import { useEffect } from 'react';
import { Head, Link, useForm } from '@inertiajs/react';
import AuthLayout from '@/Layouts/AuthLayout';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/Components/ui/card";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Button } from "@/Components/ui/button";
import { Switch } from "@/Components/ui/switch";
import { useTranslation } from '@/hooks/useTranslation';

export default function Login({ status }) {
    const { t } = useTranslation();
    const { data, setData, post, processing, errors, reset } = useForm({
        login: '', 
        password: '',
        remember: false, 
    });

    useEffect(() => {
        return () => reset('password');
    }, []);

    const submit = (e) => {
        e.preventDefault();
        post(route('login'));
    };

    return (
        <AuthLayout>
            <Head title={t('Log in')} />

            <Card className="w-full border-border/50 shadow-lg bg-card">
                <CardHeader className="space-y-1 text-center">
                    <CardTitle className="text-2xl">{t('Welcome back')}</CardTitle>
                    <CardDescription>{t('Enter your username or email to login')}</CardDescription>
                </CardHeader>

                <CardContent>
                    {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}

                    <form onSubmit={submit} className="space-y-4">
                        <div className="space-y-2">
                            <Label htmlFor="login">{t('Username or Email')}</Label>
                            <Input
                                id="login"
                                type="text"
                                placeholder={t('johndoe or m@example.com')}
                                value={data.login}
                                onChange={(e) => setData('login', e.target.value)}
                            />
                            {errors.login && <p className="text-sm text-destructive">{errors.login}</p>}
                        </div>

                        <div className="space-y-2">
                            <div className="flex items-center justify-between">
                                <Label htmlFor="password">{t('Password')}</Label>
                                <Link href={route('password.request')} className="text-sm font-medium text-primary hover:underline">
                                    {t('Forgot password?')}
                                </Link>
                            </div>
                            <Input
                                id="password"
                                type="password"
                                value={data.password}
                                onChange={(e) => setData('password', e.target.value)}
                            />
                            {errors.password && <p className="text-sm text-destructive">{errors.password}</p>}
                        </div>

                        <div className="flex items-center space-x-2 pt-2 pb-1">
                            <Switch 
                                id="remember" 
                                checked={data.remember} 
                                onCheckedChange={(checked) => setData('remember', checked)} 
                                className="data-[state=checked]:bg-primary"
                            />
                            <Label 
                                htmlFor="remember" 
                                className="text-sm font-medium cursor-pointer text-muted-foreground hover:text-foreground transition-colors"
                            >
                                {t('Remember me')}
                            </Label>
                        </div>

                        <Button className="w-full mt-2" type="submit" disabled={processing}>
                            {processing ? t("Logging in...") : t("Login")}
                        </Button>
                    </form>
                </CardContent>
                <CardFooter className="flex justify-center">
                    <p className="text-sm text-muted-foreground">
                        {t("Don't have an account?")} <Link href={route('register')} className="text-primary font-medium hover:underline">{t('Sign up')}</Link>
                    </p>
                </CardFooter>
            </Card>
        </AuthLayout>
    );
}