import AuthStatus from '@/Components/auth/AuthStatus';
import PasswordInput from '@/Components/auth/PasswordInput';
import { Button } from '@/Components/ui/button';
import { Field, Input } from '@/Components/ui/field';
import GuestLayout from '@/Layouts/GuestLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';

export default function Login({ status, canResetPassword }: { status?: string; canResetPassword: boolean }) {
    const { data, setData, post, processing, errors, reset } = useForm({ email: '', password: '', remember: false as boolean });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route('login'), { onFinish: () => reset('password') });
    };

    return (
        <GuestLayout
            title="Welcome back"
            subtitle="Log in to pick up your library where you left it."
            footer={<>New here? <Link href={route('register')} className="font-medium text-foreground underline-offset-4 hover:underline">Create an account</Link></>}
        >
            <Head title="Log in" />
            <AuthStatus message={status} />
            <form onSubmit={submit} className="space-y-4" noValidate>
                <Field label="Email" htmlFor="email" error={errors.email}>
                    <Input id="email" type="email" autoComplete="username" autoFocus value={data.email} aria-invalid={!!errors.email} onChange={(e) => setData('email', e.target.value)} placeholder="you@example.com" />
                </Field>
                <Field
                    label="Password"
                    htmlFor="password"
                    error={errors.password}
                >
                    <PasswordInput id="password" autoComplete="current-password" value={data.password} aria-invalid={!!errors.password} onChange={(e) => setData('password', e.target.value)} />
                </Field>
                <div className="flex items-center justify-between text-sm">
                    <label className="flex cursor-pointer items-center gap-2 text-muted-foreground">
                        <input type="checkbox" checked={data.remember} onChange={(e) => setData('remember', e.target.checked)} className="size-4 rounded border-input bg-card text-primary focus:ring-ring/40" />
                        Remember me
                    </label>
                    {canResetPassword && (
                        <Link href={route('password.request')} className="text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">Forgot password?</Link>
                    )}
                </div>
                <Button type="submit" size="lg" className="w-full" loading={processing}>Log in</Button>
            </form>
        </GuestLayout>
    );
}
