import { Form, Head } from '@inertiajs/react';
import { MailCheck } from 'lucide-react';
import { TicketCard } from '@/components/ticket/ticket-ui';
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';

export default function CustomerVerifyEmail({
    email,
    status,
}: {
    email: string;
    status?: string;
}) {
    return (
        <>
            <Head title="Confirm your email" />

            <div className="mx-auto w-full max-w-lg">
                <TicketCard>
                    <div className="flex size-11 items-center justify-center rounded-xl bg-solar-soft text-solar-ink">
                        <MailCheck className="size-5" />
                    </div>

                    <h1 className="mt-4 text-xl font-semibold tracking-tight">
                        Confirm your email address
                    </h1>

                    <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                        We have sent a confirmation link to{' '}
                        <span className="font-medium text-foreground">
                            {email}
                        </span>
                        . Open it to finish setting up your account. The link
                        works on your phone as well as this computer.
                    </p>

                    <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                        We ask before showing anything on your account because
                        it contains your property address and your system's
                        history. The confirmation is what proves the address is
                        yours.
                    </p>

                    {status === 'verification-link-sent' ? (
                        <p className="mt-4 rounded-lg bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700 ring-1 ring-emerald-500/20 dark:text-emerald-300">
                            A new link has been sent. It can take a minute to
                            arrive — check your spam or junk folder too.
                        </p>
                    ) : null}

                    <div className="mt-6 flex flex-wrap items-center gap-3">
                        <Form
                            action="/ticket/email/verification-notification"
                            method="post"
                        >
                            {({ processing }) => (
                                <Button
                                    type="submit"
                                    variant="outline"
                                    disabled={processing}
                                >
                                    {processing && <Spinner />}
                                    Send the link again
                                </Button>
                            )}
                        </Form>

                        <Form action="/ticket/logout" method="post">
                            {({ processing }) => (
                                <Button
                                    type="submit"
                                    variant="ghost"
                                    disabled={processing}
                                >
                                    Sign out
                                </Button>
                            )}
                        </Form>
                    </div>

                    <p className="mt-6 border-t border-hairline pt-4 text-xs text-muted-foreground">
                        No email after a few minutes? Ring us or reply to the
                        email address we send from and we will confirm the
                        account for you.
                    </p>
                </TicketCard>
            </div>
        </>
    );
}
