'use client'

import { useState } from 'react';
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter } from 'next/navigation'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { loginSchema, LoginFormData } from "@/lib/schemas/loginSchema";
import { loginAction } from '@/app/action';
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';

const errorMessages = {
    user_invalid_credentials: "Invalid email or password. Please try again.",
    user_not_found: "No account found with this email. Please check and try again.",
    general_rate_limit_exceeded: "Too many login attempts. Please try again later.",
    user_blocked: "This account has been blocked. Please contact support.",
    user_password_reset_required: "Password reset required. Please check your email.",
    user_email_not_whitelisted: "This email is not authorized to access the system.",
    user_ip_not_whitelisted: "Access from your current location is not allowed.",
    default: "An unexpected error occurred. Please try again."
};

export default function LoginForm() {
    const router = useRouter()
    const [serverError, setServerError] = useState<string | null>(null)
    const [isLoading, setIsLoading] = useState(false)
    const { register, handleSubmit, formState: { errors } } = useForm<LoginFormData>({
        resolver: zodResolver(loginSchema)
    })

    const onSubmit = async (data: LoginFormData) => {
        setServerError(null)
        setIsLoading(true)
        try {
            const result = await loginAction(data.email, data.password);
            if (result && result.success) {
                console.log("Successfully logged in");
                router.push('/dashboard');
            } else {
                setServerError(result?.error || 'An unexpected error occurred')
            }
        } catch (error) {
            setServerError('An unexpected error occurred')
            console.error('Login error:', error)
        } finally {
            setIsLoading(false)
        }
    }

    return (
        <Card className="w-[350px]">
            <CardHeader>
                <CardTitle>Login</CardTitle>
                <CardDescription>
                    Enter your credentials to access your account.
                </CardDescription>
            </CardHeader>
            <CardContent>
                {serverError && <div className="text-red-500 mb-4">{serverError}</div>}
                <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
                    <div>
                        <Label htmlFor="email">Email</Label>
                        <Input id="email" {...register('email')} placeholder='Enter your email' />
                        {errors.email && <p className="text-red-500">{errors.email.message}</p>}
                    </div>
                    <div>
                        <Label htmlFor="password">Password</Label>
                        <Input id="password" type="password" {...register('password')} placeholder='Enter your password' />
                        {errors.password && <p className="text-red-500">{errors.password.message}</p>}
                    </div>
                    <Button
                        className="w-full mt-6"
                        type="submit"
                        disabled={isLoading}
                    >
                        {isLoading ? (
                            <>
                                <LoadingSpinner />
                                <span className="ml-2">Logging in...</span>
                            </>
                        ) : (
                            'Login'
                        )}
                    </Button>
                </form>
            </CardContent>
            <CardFooter className="flex justify-center">
                <a href="#" className="text-sm text-blue-600 hover:underline">
                    Forgot password?
                </a>
            </CardFooter>
        </Card>
    )
}