import AuthStatus from '@/Components/auth/AuthStatus';
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 { ArrowLeft } from 'lucide-react';
import { FormEventHandler } from 'react';

export default function ForgotPassword({ status }: { status?: string }) {
    const { data, setData, post, processing, errors } = useForm({ email: '' });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route('password.email'));
    };

    return (
        <GuestLayout
            title="Reset your password"
            subtitle="Enter the email you signed up with and we'll send a link to choose a new password."
            footer={<Link href={route('login')} className="inline-flex items-center gap-1 hover:text-foreground"><ArrowLeft className="size-3.5" /> Back to log in</Link>}
        >
            <Head title="Forgot password" />
            <AuthStatus message={status} />
            <form onSubmit={submit} className="space-y-4" noValidate>
                <Field label="Email" htmlFor="email" error={errors.email}>
                    <Input id="email" type="email" autoFocus value={data.email} aria-invalid={!!errors.email} onChange={(e) => setData('email', e.target.value)} placeholder="you@example.com" />
                </Field>
                <Button type="submit" size="lg" className="w-full" loading={processing}>Email reset link</Button>
            </form>
        </GuestLayout>
    );
}
