'use client';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import IconLockDots from '@/components/icon/icon-lock-dots';
import IconMail from '@/components/icon/icon-mail';
import IconUser from '@/components/icon/icon-user';

const API_BASE =
  process.env.NEXT_PUBLIC_API_BASE_URL?.replace(/\/$/, '') ||
  // 'https://ebay.backend.data4autos.com';
    'http://localhost:3003';


const ComponentsAuthRegisterForm = () => {
  const router = useRouter();

  const [name, setName] = useState('');
  const [phonenumber, setPhonenumber] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [subscribe, setSubscribe] = useState(false);

  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [msg, setMsg] = useState<string | null>(null);

  const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setErr(null);
    setMsg(null);

    if (!name || !email || !password || !phonenumber) {
      setErr('Please fill in all fields.');
      return;
    }

    setLoading(true);
    try {
      const res = await fetch(`${API_BASE}/api/auth/signup`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        // If your API sets cookies, uncomment:
        // credentials: 'include',
        body: JSON.stringify({
          name,
          email,
          password,
          phonenumber,
          // You can also send `subscribe` if your API supports it
          // subscribe,
        }),
      });

      const contentType = res.headers.get('content-type') || '';
      let data: any = null;
      if (contentType.includes('application/json')) {
        data = await res.json();
      } else {
        data = await res.text();
      }

      if (!res.ok) {
        const message =
          (typeof data === 'object' && (data?.message || data?.error)) ||
          `Signup failed (${res.status})`;
        throw new Error(message);
      }

      setMsg(
        (typeof data === 'object' && (data?.message || 'Signup successful!')) ||
          'Signup successful!'
      );
      // Redirect to login (or wherever you like)
      setTimeout(() => router.push('/login'), 1000);
    } catch (e: any) {
      setErr(e?.message || 'Something went wrong. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form className="space-y-3 p-4 dark:text-white" onSubmit={submitForm}>

      {/* Name */}
      <div>
        <label htmlFor="Name">Name</label>
        <div className="relative text-white-dark">
          <input
            id="Name"
            type="text"
            placeholder="Enter Name"
            className="form-input ps-10 placeholder:text-white-dark"
            value={name}
            onChange={(e) => setName(e.target.value)}
            autoComplete="name"
          />
          <span className="absolute start-4 top-1/2 -translate-y-1/2">
            <IconUser fill={true} />
          </span>
        </div>
      </div>

      {/* Email */}
      <div>
        <label htmlFor="Email">Email</label>
        <div className="relative text-white-dark">
          <input
            id="Email"
            type="email"
            placeholder="Enter Email"
            className="form-input ps-10 placeholder:text-white-dark"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            autoComplete="email"
          />
          <span className="absolute start-4 top-1/2 -translate-y-1/2">
            <IconMail fill={true} />
          </span>
        </div>
      </div>

      {/* Password */}
      <div>
        <label htmlFor="Password">Password</label>
        <div className="relative text-white-dark">
          <input
            id="Password"
            type="password"
            placeholder="Enter Password"
            className="form-input ps-10 placeholder:text-white-dark"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            autoComplete="new-password"
          />
          <span className="absolute start-4 top-1/2 -translate-y-1/2">
            <IconLockDots fill={true} />
          </span>
        </div>
      </div>

      {/* Phone Number */}
      <div>
        <label htmlFor="PhoneNumber">Phone Number</label>
        <div className="relative text-white-dark">
          <input
            id="PhoneNumber"
            type="tel"
            placeholder="Enter Phone Number"
            className="form-input ps-10 placeholder:text-white-dark"
            value={phonenumber}
            onChange={(e) => setPhonenumber(e.target.value)}
            autoComplete="tel"
          />
          {/* Simple emoji icon to match the padded layout without adding a new component */}
          <span className="absolute start-4 top-1/2 -translate-y-1/2">📞</span>
        </div>
      </div>

      {/* Subscribe */}
      {/* <div>
        <label className="flex cursor-pointer items-center">
          <input
            type="checkbox"
            className="form-checkbox bg-white dark:bg-black"
            checked={subscribe}
            onChange={(e) => setSubscribe(e.target.checked)}
          />
          <span className="text-white-dark">Subscribe to weekly newsletter</span>
        </label>
      </div> */}

      {/* Alerts */}
      {err && (
        <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
          {err}
        </div>
      )}
      {msg && (
        <div className="rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
          {msg}
        </div>
      )}

      {/* Submit */}
      <button
        type="submit"
        disabled={loading}
        className="btn w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(25,212,251,0.44)] disabled:cursor-not-allowed disabled:opacity-70 !mt-6 bg-[linear-gradient(135deg,#0EA5E9_0%,#19D4FB_50%,#67E8F9_100%)] text-white hover:bg-[linear-gradient(135deg,#67E8F9_0%,#19D4FB_50%,#0EA5E9_100%)]"
      >
        {loading ? 'Creating account…' : 'Sign Up'}
      </button>
    </form>
  );
};

export default ComponentsAuthRegisterForm;