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

interface Props {
    status?: string;
}

export default function ForgotPassword({ status }: Props) {
    return (
        <>
            <Head title="Lupa Password" />
            <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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
                                />
                            </svg>
                        </div>
                        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
                            Lupa Password?
                        </h2>
                        <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
                            Masukkan email Anda dan kami akan mengirimkan link untuk mereset password
                        </p>
                    </div>
                    <div className="rounded-lg bg-white p-8 shadow-xl dark:bg-gray-800 dark:shadow-2xl">
                        {status && (
                            <div className="mb-6 rounded-lg bg-green-50 border border-green-200 p-5 dark:bg-green-900/20 dark:border-green-800">
                                <div className="flex items-start gap-3">
                                    <div className="flex-shrink-0">
                                        <svg
                                            className="h-5 w-5 text-green-600 dark:text-green-400"
                                            fill="none"
                                            viewBox="0 0 24 24"
                                            stroke="currentColor"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                                            />
                                        </svg>
                                    </div>
                                    <div className="flex-1">
                                        <h3 className="text-sm font-semibold text-green-800 dark:text-green-200 mb-2">
                                            Email Terkirim!
                                        </h3>
                                        <p className="text-sm text-green-700 dark:text-green-300 mb-3">
                                            {status}
                                        </p>
                                        <div className="mt-4 rounded-md bg-green-100 p-3 dark:bg-green-900/30">
                                            <p className="text-xs text-green-800 dark:text-green-200 font-medium mb-1">
                                                📧 Periksa Email Anda:
                                            </p>
                                            <ul className="text-xs text-green-700 dark:text-green-300 space-y-1 list-disc list-inside">
                                                <li>Periksa folder <strong>Inbox</strong> atau <strong>Spam</strong></li>
                                                <li>Email dikirim dari <strong>noreply</strong> kami</li>
                                                <li>Link reset password berlaku selama <strong>60 menit</strong></li>
                                                <li>Jika tidak menerima email, coba kirim ulang setelah beberapa saat</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )}

                        <Form
                            action="/forgot-password"
                            method="post"
                            className="space-y-6"
                        >
                            {({
                                errors,
                                processing,
                                clearErrors,
                            }) => (
                                <>
                                    <div>
                                        <label htmlFor="email" className="sr-only">
                                            Email address
                                        </label>
                                        <input
                                            id="email"
                                            name="email"
                                            type="email"
                                            autoComplete="email"
                                            required
                                            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"
                                            onChange={() => clearErrors('email')}
                                        />
                                        {errors.email && (
                                            <p className="mt-2 text-sm text-red-600 dark:text-red-400">
                                                {errors.email}
                                            </p>
                                        )}
                                    </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>
                                                    Mengirim...
                                                </span>
                                            ) : (
                                                'Kirim Link Reset Password'
                                            )}
                                        </button>
                                    </div>

                                    <div className="text-center">
                                        <Link
                                            href="/login"
                                            className="text-sm font-semibold text-[#d4af37] hover:text-[#b8941f] dark:text-[#b8941f] dark:hover:text-[#9a7d15] transition-colors duration-200"
                                        >
                                            ← Kembali ke Login
                                        </Link>
                                    </div>
                                </>
                            )}
                        </Form>
                    </div>
                </div>
            </div>
        </>
    );
}

