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

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

export default function VerifyEmail({ status, email }: Props) {
    useForceLightTheme();
    const resend = useForm({});
    const sent = status === 'verification-link-sent';

    const submit = (e: ReactSubmitEvent) => {
        e.preventDefault();
        resend.post('/email/verification-notification');
    };

    const logout = () => {
        router.post('/logout');
    };

    return (
        <>
            <Head title="Verify your email">
            </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">
                                Verify your <em className="italic text-accent">email</em>.
                            </h1>
                            <p className="mt-5 text-base leading-relaxed text-muted-foreground">
                                We sent a verification link to{' '}
                                <span className="font-medium text-foreground">{email ?? 'your inbox'}</span>. Click
                                the link to finish setting up your account.
                            </p>

                            {sent && (
                                <p className="mt-6 rounded-md border border-success/30 bg-success/5 px-4 py-3 text-sm text-success">
                                    A fresh verification link has been sent.
                                </p>
                            )}

                            <form onSubmit={submit} className="mt-6 flex flex-col items-stretch gap-3">
                                <Button type="submit" disabled={resend.processing} size="lg">
                                    {resend.processing ? 'Resending…' : 'Resend verification email'}
                                </Button>
                                <button
                                    type="button"
                                    onClick={logout}
                                    className="whitespace-nowrap self-center text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
                                >
                                    Sign out
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </main>
        </>
    );
}
