// Components
import { store } from '@/actions/App/Http/Controllers/Auth/EmailVerificationNotificationController';
import { logout } from '@/routes';
import { Form, Head, usePage } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';

import TextLink from '@/components/text-link';
import { Button } from '@/components/ui/button';
import AuthLayout from '@/layouts/auth-layout';

export default function VerifyEmail({ status }: { status?: string }) {
    const isNewRegistration = status === 'registration-success';
    const description = isNewRegistration
        ? 'Thanks! Please confirm your email address to access your dashboard.'
        : 'Please verify your email address by clicking on the link we just emailed to you.';
    const page = usePage<{ flash?: { verification?: { status: string; title?: string; message?: string } } }>();
    const verificationFlash = page.props.flash?.verification;

    return (
        <AuthLayout title="Verify email" description={description}>
            <Head title="Email verification" />

            {verificationFlash && (
                <div
                    className={`mb-6 rounded-md border p-4 text-left text-sm font-medium ${
                        verificationFlash.status === 'success'
                            ? 'border-emerald-200 bg-emerald-50 text-emerald-800'
                            : 'border-rose-200 bg-rose-50 text-rose-800'
                    }`}
                >
                    <p className="font-semibold">{verificationFlash.title}</p>
                    <p className="mt-1 text-sm font-normal">{verificationFlash.message}</p>
                </div>
            )}

            {isNewRegistration && (
                <div className="mb-6 rounded-md bg-blue-50 p-4 text-left text-sm text-blue-900">
                    <p className="font-semibold">Almost there! Confirm your email address to start using Fotospiel.</p>
                    <p className="mt-2">We just sent a confirmation message to your inbox. As soon as you click the link you will be taken straight to your dashboard.</p>
                    <p className="mt-2">Can't find it? Check your spam folder or request a new link below.</p>
                </div>
            )}

            {status === 'verification-link-sent' && (
                <div className="mb-4 text-center text-sm font-medium text-green-600">
                    We have sent the verification link again. Please also check your spam folder.
                </div>
            )}

            <Form {...store.form()} className="space-y-6 text-center">
                {({ processing }) => (
                    <>
                        <Button disabled={processing} variant="secondary">
                            {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                            Resend verification email
                        </Button>

                        <TextLink href={logout()} className="mx-auto block text-sm">
                            Log out
                        </TextLink>
                    </>
                )}
            </Form>
        </AuthLayout>
    );
}
