'use client';
import IconLockDots from '@/components/icon/icon-lock-dots';
import IconMail from '@/components/icon/icon-mail';
import { useRouter } from 'next/navigation';
import React, {useState} from 'react';
import axios from 'axios';
import Link from 'next/link';
import { Eye, EyeOff } from "lucide-react";
import { ApiServerBaseUrl } from '@/utils/baseurl.utils';

const ComponentsAuthLoginForm = () => {
    const router = useRouter();
    // ✅ Form state as object
    const [formData, setFormData] = useState({
        email: '',
        password: '',
        subscribe: false,
    });
     const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [loading, setLoading] = useState(false);
    const [err, setErr] = useState<string | null>(null);
    const [msg, setMsg] = useState<string | null>(null);
    const [showPassword, setShowPassword] = useState(false);

    // ✅ Handle input changes
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value, type, checked } = e.target;
        setFormData((prev) => ({
            ...prev,
            [name]: type === 'checkbox' ? checked : value,
        }));
    };
 

    //submit form
    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setErr(null);
        setMsg(null);
        if (!formData.email || !formData.password) {
            setErr('Please enter email and password.');
            return;
        }
        setLoading(true);
         try {
            const res = await axios.post(`${ApiServerBaseUrl}/auth/login`, formData);

            // Assuming backend returns token
            const data = res.data;
            console.log('Login success:', data);

            localStorage.setItem('token', data.token);

            router.push('/');
        } catch (err: any) {
            if (err.response) {
                setErr(err.response.data.error || 'Login failed');
            } else {
                setErr(err.message);
            }
        } finally {
            setLoading(false);
        }
    };


    return (
        <form className="space-y-5 dark:text-white" onSubmit={submitForm}>
             {/* 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>}
            <div>
                <label htmlFor="Email">Email</label>
                <div className="relative text-white-dark">
                    <input 
                    id="Email" 
                    name="email"
                    type="email"
                    placeholder="Enter Email"
                        className="form-input ps-10 placeholder:text-white-dark"
                        value={formData.email}
                        onChange={handleChange}
                        required />
                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
                        <IconMail fill={true} />
                    </span>
                </div>
            </div>
            <div>
                <label htmlFor="Password">Password</label>
                <div className="relative text-white-dark">
                    <input id="Password"
                    name="password"
                    type={showPassword ? "text" : "password"}
                    placeholder="Enter Password"
                    className="form-input ps-10 placeholder:text-white-dark"
                    value={formData.password}
                    onChange={handleChange}
                    required
                     />
                   
                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
                        <IconLockDots fill={true} />
                    </span>
                    {/* 👁️ Eye toggle (right) */}
                    <button
                        type="button"
                        className="absolute end-3 top-1/2 -translate-y-1/2 text-gray-400"
                        onClick={() => setShowPassword(!showPassword)}
                    >
                        {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                    </button>
                </div>
            </div>            
             <div className="text-end mt-4">
             <Link href="/forgot-password" className="text-sm text-blue-500 hover:underline">
                           Forgot Password?
             </Link>
            </div>
            <div>
                <label className="flex cursor-pointer items-center">
                    <input type="checkbox"
                     checked={formData.subscribe}
                     onChange={handleChange}
                    className="form-checkbox bg-white dark:bg-black" />
                    <span className="text-white-dark">Subscribe to weekly newsletter</span>
                </label>
            </div>
            <button type="submit" className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
                Sign in
            </button>
        </form>
    );
};

export default ComponentsAuthLoginForm;