'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 axios from "axios";
import toast from 'react-hot-toast';

const ComponentsAuthLoginForm = () => {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    const [loading, setLoading] = useState(false)
    const router = useRouter()

    const submitForm = async (e: React.FormEvent) => {
        e.preventDefault()

        setLoading(true)
        try {
            const res = await axios.post(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/login`, {
                email,
                password,
            })

            localStorage.setItem("token", res.data.token)

            toast.success("Login successful!")
            router.push("/")
        } catch (err: any) {
            console.error("Login error:", err)
            toast.error(err.response?.data?.error || "Invalid credentials")
        } 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 type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
                    <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 type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
                    <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;