// Components
import { Form, Head } from '@inertiajs/react';
import { Mail, ArrowRight } from 'lucide-react';
import TextLink from '@/components/text-link';
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';
import { logout } from '@/routes';
import { send } from '@/routes/verification';

export default function VerifyEmail({ status }: { status?: string }) {
    return (
        <>
            <Head title="Verifikasi Email" />

            <div className="flex flex-col items-center justify-center text-center my-2">
                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-50 text-blue-500 mb-4 animate-pulse">
                    <Mail className="h-8 w-8" />
                </div>
            </div>

            {status === 'verification-link-sent' && (
                <div className="mb-5 rounded-xl border px-4 py-3 text-center text-sm font-medium text-green-700" style={{ backgroundColor: '#E8FFF9', borderColor: '#06D6A0' }}>
                    Tautan verifikasi baru telah dikirimkan ke alamat email yang Anda gunakan saat mendaftar.
                </div>
            )}

            <Form {...send.form()} className="space-y-6 text-center">
                {({ processing }) => (
                    <>
                        <Button 
                            disabled={processing} 
                            className="w-full h-11 rounded-xl font-semibold text-sm transition-all"
                            style={{ backgroundColor: '#118AB2' }}
                        >
                            {processing ? <Spinner /> : <ArrowRight className="mr-2 h-4 w-4" />}
                            Kirim Ulang Email Verifikasi
                        </Button>

                        <TextLink
                            href={logout()}
                            className="mx-auto block text-sm font-semibold hover:underline"
                            style={{ color: '#E63946' }}
                        >
                            Keluar dari Akun
                        </TextLink>
                    </>
                )}
            </Form>
        </>
    );
}

VerifyEmail.layout = {
    title: 'Verifikasi Email Anda',
    description:
        'Sebelum melanjutkan, silakan verifikasi alamat email Anda dengan mengklik tautan yang baru saja kami kirimkan ke email Anda.',
};
