'use client'
import React from 'react'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Checkbox } from '@/components/ui/checkbox'
import { useRouter } from 'next/navigation'
import { useState } from 'react'
import DATASERVICE from '@/config/axios'
import { useDispatch } from 'react-redux'
import { setAuthUser } from '@/store/slices/auth'
import { toast } from '@/components/ui/use-toast'

const LoginForm = () => {
    const router = useRouter();
    const dispatch = useDispatch()
    const [formData, setFormData] = useState({
        email: '',
        password: '',
    });

    const { email, password } = formData;
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        try {
            const res = await DATASERVICE.post('/auth/login', formData);
            if (res?.data?.status) {
                console.log(res.data); // Handle response as needed
                const data = { user: res.data.user, authToken: res.data.authToken }
                localStorage.setItem("token", res.data.authToken)
                dispatch(setAuthUser(data))
            }
            else {
                toast({
                    variant: "destructive",
                    title: "Error",
                    description: res?.data?.message
                })
            }
            router.push('/dashboard'); // Redirect to dashboard or any other page upon successful registration
        } catch (error: any) {
            toast({
                variant: "destructive",
                title: "Error!",
                description: error?.response?.data?.message
            })
            console.error('Registration failed:', error?.response?.data?.message);
            // Handle error response, display error messages, etc.
        }
    };
    return (
        <form className='ml-auto md:w-4/6 grid gap-4 border-none text-center' onSubmit={handleSubmit}>
            <span>
                <h1 className='leading-normal text-4xl font-semibold'>Sign In</h1>
                <p>Login to your account - enjoy exclusive Feature & many more</p>
            </span>
            <Label htmlFor="email" className='text-left'>Email</Label>
            <Input name='email' placeholder='Enter Your Email' value={email} onChange={handleChange} />
            <Label htmlFor="password" className='text-left'>Password</Label>
            <Input name='password' placeholder='Enter Your Password' type='password' value={password} onChange={handleChange} />
            <div className='flex justify-between items-center gap-1 mb-3'>
                <div className='flex items-center gap-1'>
                    <Checkbox id="remember" />
                    <Label
                        htmlFor="remember"
                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                        Remember Me
                    </Label>
                </div>
                <Link className='text-sm' href='/forget-password'>Forget Password?</Link>
            </div>
            <Button type="submit">Sign In</Button>
            <span>Don't have an account? <Link href='/register' className="font-semibold">Sign Up</Link></span>
        </form>
    )
}

export default LoginForm