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

type Props = {
    token: string;
    email?: string;
};

type ResetForm = {
    token: string;
    email: string;
    password: string;
    password_confirmation: string;
};

export default function ResetPassword({ token, email }: Props) {
    useForceLightTheme();
    const { data, setData, post, processing, errors, reset } = useForm<ResetForm>({
        token,
        email: email ?? '',
        password: '',
        password_confirmation: '',
    });

    const submit = (e: ReactSubmitEvent) => {
        e.preventDefault();
        post('/reset-password', {
            onFinish: () => reset('password', 'password_confirmation'),
        });
    };

    return (
        <>
            <Head title="Choose a new 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">
                                Choose a new <em className="italic text-accent">password</em>.
                            </h1>
                            <p className="mt-5 text-base leading-relaxed text-muted-foreground">
                                Pick something at least 8 characters long.
                            </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
                                />
                                <Field
                                    id="password"
                                    label="New password"
                                    type="password"
                                    autoComplete="new-password"
                                    value={data.password}
                                    onChange={(e) => setData('password', e.target.value)}
                                    error={errors.password}
                                    required
                                    autoFocus
                                />
                                <Field
                                    id="password_confirmation"
                                    label="Confirm new password"
                                    type="password"
                                    autoComplete="new-password"
                                    value={data.password_confirmation}
                                    onChange={(e) => setData('password_confirmation', e.target.value)}
                                    required
                                />

                                <Button type="submit" disabled={processing} size="lg" className="w-full">
                                    {processing ? 'Saving…' : 'Reset password'}
                                </Button>
                            </form>
                        </div>
                    </div>
                </div>
            </main>
        </>
    );
}
