import { Button, Field } from '@/Components/ui';
import BackToHomeLink from '@/Components/BackToHomeLink';
import { useForceLightTheme } from '@/lib/theme';
import { CrossMark } from '@/marketing/shared';
import { Head, Link, useForm } from '@inertiajs/react';
import type { SubmitEvent as ReactSubmitEvent } from 'react';

type Props = {
    status?: string;
};

type ForgotForm = {
    email: string;
};

export default function ForgotPassword({ status }: Props) {
    useForceLightTheme();
    const { data, setData, post, processing, errors } = useForm<ForgotForm>({
        email: '',
    });

    const submit = (e: ReactSubmitEvent) => {
        e.preventDefault();
        post('/forgot-password');
    };

    return (
        <>
            <Head title="Reset password">
            </Head>
            <main className="min-h-screen bg-background font-sans text-foreground antialiased overflow-hidden">
                <div className="relative mx-auto min-h-screen max-w-6xl border-x border-border/60">
                    <CrossMark className="left-0 top-0" />
                    <CrossMark className="left-full top-0" />
                    <CrossMark className="left-0 top-full" />
                    <CrossMark className="left-full top-full" />
                    <div className="mx-auto flex min-h-screen max-w-md flex-col justify-center px-6 py-10">
                        <BackToHomeLink />

                        <div className="ms-card rounded-2xl border border-border bg-card p-6 shadow-sm sm:p-8">
                            <h1 className="font-display text-3xl font-medium leading-[1.1] tracking-tight text-foreground sm:text-4xl">
                                Reset your <em className="italic text-accent">password</em>.
                            </h1>
                            <p className="mt-5 text-base leading-relaxed text-muted-foreground">
                                Enter your email and we'll send a link to reset your password.
                            </p>

                            {status && (
                                <p className="mt-6 rounded-md border border-success/30 bg-success/5 px-4 py-3 text-sm text-success">
                                    {status}
                                </p>
                            )}

                            <form onSubmit={submit} className="mt-6 space-y-4">
                                <Field
                                    id="email"
                                    label="Email"
                                    type="email"
                                    autoComplete="email"
                                    value={data.email}
                                    onChange={(e) => setData('email', e.target.value)}
                                    error={errors.email}
                                    required
                                    autoFocus
                                />

                                <Button type="submit" disabled={processing} size="lg" className="w-full">
                                    {processing ? 'Sending…' : 'Email reset link'}
                                </Button>
                            </form>

                            <p className="mt-6 text-sm text-muted-foreground">
                                Remembered it?{' '}
                                <Link href="/login" className="font-medium text-accent hover:underline">
                                    Sign in
                                </Link>
                            </p>
                        </div>
                    </div>
                </div>
            </main>
        </>
    );
}
