import { Head, Link, useForm } from '@inertiajs/react';
import GuestLayout from '@/Layouts/GuestLayout';
import { Button } from '@/Components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { MailCheck, LogOut, Loader2 } from 'lucide-react';
import useTranslation from '@/hooks/useTranslation';

export default function VerifyEmail({ status }) {
    const { t } = useTranslation();
    const { post, processing } = useForm({});

    const submit = (e) => {
        e.preventDefault();
        post(route('verification.send'));
    };

    return (
        <GuestLayout>
            <Head title={t('_verify_email_title', 'Email Verification')} />

            <div className="flex items-center justify-center min-h-[80vh] px-4">
                <Card className="w-full max-w-md shadow-lg border-0 sm:border">
                    <CardHeader className="text-center space-y-2">
                        <div className="flex justify-center">
                            <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                <MailCheck className="h-6 w-6" />
                            </div>
                        </div>
                        <CardTitle className="text-2xl font-bold">
                            {t('_verify_your_email', 'Verify Your Email')}
                        </CardTitle>
                        <CardDescription>
                            {t('_verify_email_desc', "Thanks for signing up! Please check your inbox for a verification link.")}
                        </CardDescription>
                    </CardHeader>
                    
                    <CardContent>
                        {status === 'verification-link-sent' && (
                            <div className="mb-4 p-3 rounded-md bg-green-50 text-green-700 text-sm font-medium border border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800">
                                {t('_verification_link_sent', 'A new verification link has been sent to the email address you provided during registration.')}
                            </div>
                        )}

                        <p className="text-sm text-muted-foreground mb-6">
                            {t('_didnt_receive_email', "If you didn't receive the email, we will gladly send you another.")}
                        </p>

                        <form onSubmit={submit}>
                            <div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
                                <Button className="w-full sm:w-auto" disabled={processing}>
                                    {processing && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
                                    {t('_resend_verification', 'Resend Verification Email')}
                                </Button>

                                <Button asChild variant="link" className="text-muted-foreground">
                                    <Link
                                        href={route('logout')}
                                        method="post"
                                        as="button"
                                        className="flex items-center gap-2"
                                    >
                                        <LogOut className="h-4 w-4" />
                                        {t('_logout', 'Log Out')}
                                    </Link>
                                </Button>
                            </div>
                        </form>
                    </CardContent>
                </Card>
            </div>
        </GuestLayout>
    );
}