import { Form, Head, router } from '@inertiajs/react';
import { useState } from 'react';

interface Props {
    email?: string;
    success?: string;
}

export default function VerifyOtp({ email: sessionEmail, success }: Props) {
    const [email, setEmail] = useState(sessionEmail || '');
    const [resending, setResending] = useState(false);

    const handleResendOtp = (e: React.FormEvent) => {
        e.preventDefault();
        if (!email) {
            return;
        }

        setResending(true);
        router.post('/register/resend-otp', { email }, {
            onFinish: () => setResending(false),
        });
    };

    return (
        <>
            <Head title="Verifikasi Email" />
            <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-gray-50 via-gray-100 to-gray-200 px-4 py-12 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 sm:px-6 lg:px-8">
                <div className="w-full max-w-md space-y-8">
                    <div className="text-center">
                        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-[#d4af37]/10 dark:bg-[#b8941f]/20">
                            <svg
                                className="h-8 w-8 text-[#d4af37] dark:text-[#b8941f]"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                                />
                            </svg>
                        </div>
                        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
                            Verifikasi Email Anda
                        </h2>
                        <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
                            Masukkan kode OTP yang telah dikirim ke email Anda
                        </p>
                    </div>
                    <div className="rounded-lg bg-white p-8 shadow-xl dark:bg-gray-800 dark:shadow-2xl">
                        {success && (
                            <div className="mb-6 rounded-md bg-green-50 p-4 dark:bg-green-900/20">
                                <p className="text-sm text-green-800 dark:text-green-200">
                                    {success}
                                </p>
                            </div>
                        )}

                        <Form
                            action="/register/verify"
                            method="post"
                            className="space-y-6"
                        >
                            {({
                                errors,
                                processing,
                                clearErrors,
                            }) => (
                                <>
                                    <div className="space-y-4">
                                        <div>
                                            <label htmlFor="email" className="sr-only">
                                                Email address
                                            </label>
                                            <input
                                                id="email"
                                                name="email"
                                                type="email"
                                                autoComplete="email"
                                                required
                                                value={email}
                                                onChange={(e) => {
                                                    setEmail(e.target.value);
                                                    clearErrors('email');
                                                }}
                                                className="relative block w-full rounded-md border-0 px-3 py-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-[#d4af37] dark:bg-gray-800 dark:text-white dark:ring-gray-700 dark:placeholder:text-gray-500 dark:focus:ring-[#b8941f]"
                                                placeholder="Alamat Email"
                                            />
                                            {errors.email && (
                                                <p className="mt-2 text-sm text-red-600 dark:text-red-400">
                                                    {errors.email}
                                                </p>
                                            )}
                                        </div>

                                        <div>
                                            <label htmlFor="otp_code" className="sr-only">
                                                Kode OTP
                                            </label>
                                            <input
                                                id="otp_code"
                                                name="otp_code"
                                                type="text"
                                                inputMode="numeric"
                                                pattern="[0-9]{6}"
                                                maxLength={6}
                                                required
                                                className="relative block w-full rounded-md border-0 px-3 py-2 text-center text-2xl font-bold tracking-widest text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-[#d4af37] dark:bg-gray-800 dark:text-white dark:ring-gray-700 dark:placeholder:text-gray-500 dark:focus:ring-[#b8941f]"
                                                placeholder="000000"
                                                onChange={(e) => {
                                                    // Hanya izinkan angka
                                                    const value = e.target.value.replace(/\D/g, '');
                                                    e.target.value = value;
                                                    clearErrors('otp_code');
                                                }}
                                            />
                                            {errors.otp_code && (
                                                <p className="mt-2 text-sm text-red-600 dark:text-red-400">
                                                    {errors.otp_code}
                                                </p>
                                            )}
                                            <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                                Kode OTP berlaku selama 10 menit
                                            </p>
                                        </div>
                                    </div>

                                    <div>
                                        <button
                                            type="submit"
                                            disabled={processing}
                                            className="group relative flex w-full justify-center rounded-md bg-[#d4af37] px-3 py-2 text-sm font-semibold text-white hover:bg-[#b8941f] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#d4af37] disabled:opacity-50 disabled:cursor-not-allowed dark:bg-[#b8941f] dark:hover:bg-[#9a7d15] dark:focus-visible:outline-[#b8941f] transition-colors duration-200"
                                        >
                                            {processing ? (
                                                <span className="flex items-center">
                                                    <svg
                                                        className="mr-2 h-4 w-4 animate-spin"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        fill="none"
                                                        viewBox="0 0 24 24"
                                                    >
                                                        <circle
                                                            className="opacity-25"
                                                            cx="12"
                                                            cy="12"
                                                            r="10"
                                                            stroke="currentColor"
                                                            strokeWidth="4"
                                                        />
                                                        <path
                                                            className="opacity-75"
                                                            fill="currentColor"
                                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                                        />
                                                    </svg>
                                                    Memverifikasi...
                                                </span>
                                            ) : (
                                                'Verifikasi'
                                            )}
                                        </button>
                                    </div>

                                    <div className="text-center">
                                        <button
                                            type="button"
                                            onClick={handleResendOtp}
                                            disabled={resending || !email}
                                            className="text-sm font-semibold text-[#d4af37] hover:text-[#b8941f] disabled:opacity-50 disabled:cursor-not-allowed dark:text-[#b8941f] dark:hover:text-[#9a7d15] transition-colors duration-200"
                                        >
                                            {resending ? (
                                                <span className="flex items-center justify-center">
                                                    <svg
                                                        className="mr-2 h-4 w-4 animate-spin"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        fill="none"
                                                        viewBox="0 0 24 24"
                                                    >
                                                        <circle
                                                            className="opacity-25"
                                                            cx="12"
                                                            cy="12"
                                                            r="10"
                                                            stroke="currentColor"
                                                            strokeWidth="4"
                                                        />
                                                        <path
                                                            className="opacity-75"
                                                            fill="currentColor"
                                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                                        />
                                                    </svg>
                                                    Mengirim...
                                                </span>
                                            ) : (
                                                'Kirim ulang kode OTP'
                                            )}
                                        </button>
                                    </div>
                                </>
                            )}
                        </Form>
                    </div>
                </div>
            </div>
        </>
    );
}

