'use client';
import IconLockDots from '@/components/icon/icon-lock-dots';
import IconMail from '@/components/icon/icon-mail';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';

type User = { id: string; email: string; is_active: boolean };

const ComponentsAuthLoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const router = useRouter();
  const API = process.env.NEXT_PUBLIC_FASTAPI_URL; // e.g. http://localhost:8000

  const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    try {
      const res = await fetch(`${API}/auth/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password }),
        credentials: 'include', // cookie from FastAPI
      });

      let data: any = null;
      try {
        data = await res.json();
      } catch {
        // non-JSON error
      }

      if (!res.ok) {
        const msg = data?.detail || data?.message || 'Invalid credentials';
        throw new Error(msg);
      }

      const user: User = data;
      toast.success(`Welcome ${user.email}`);
      router.push('/adminDashboard');
      router.refresh();
    } catch (err: any) {
      toast.error(err?.message ?? 'Login failed');
    } finally {
      setLoading(false);
    }
  };

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

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

      <button
        type="submit"
        disabled={loading}
        className="w-full uppercase border-0 rounded-md bg-[#fcd913] text-black font-semibold py-2 hover:bg-[#E6C812] transition disabled:opacity-70"
      >
        {loading ? 'Logging in...' : 'Sign In'}
      </button>
    </form>
  );
};

export default ComponentsAuthLoginForm;