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

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

export default function ResetPassword({ token, email: initialEmail }: Props) {
    return (
        <>
            <Head title="Reset 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">
                            Reset Password
                        </h2>
                        <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
                            Masukkan password baru untuk akun Anda
                        </p>
                    </div>
                    <div className="rounded-lg bg-white p-8 shadow-xl dark:bg-gray-800 dark:shadow-2xl">
                        <Form
                            action="/reset-password"
                            method="post"
                            className="space-y-6"
                        >
                            {({
                                errors,
                                processing,
                                clearErrors,
                            }) => (
                                <>
                                    <input type="hidden" name="token" value={token} />

                                    <div>
                                        <label htmlFor="email" className="sr-only">
                                            Email address
                                        </label>
                                        <input
                                            id="email"
                                            name="email"
                                            type="email"
                                            autoComplete="email"
                                            required
                                            defaultValue={initialEmail}
                                            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 className="space-y-4">
                                        <div>
                                            <label htmlFor="password" className="sr-only">
                                                Password Baru
                                            </label>
                                            <input
                                                id="password"
                                                name="password"
                                                type="password"
                                                autoComplete="new-password"
                                                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="Password Baru"
                                                onChange={() => clearErrors('password')}
                                            />
                                            {errors.password && (
                                                <p className="mt-2 text-sm text-red-600 dark:text-red-400">
                                                    {errors.password}
                                                </p>
                                            )}
                                        </div>

                                        <div>
                                            <label htmlFor="password_confirmation" className="sr-only">
                                                Konfirmasi Password
                                            </label>
                                            <input
                                                id="password_confirmation"
                                                name="password_confirmation"
                                                type="password"
                                                autoComplete="new-password"
                                                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="Konfirmasi Password"
                                                onChange={() => clearErrors('password_confirmation')}
                                            />
                                        </div>
                                    </div>

                                    {errors.token && (
                                        <div className="rounded-md bg-red-50 p-4 dark:bg-red-900/20">
                                            <p className="text-sm text-red-800 dark:text-red-200">
                                                {errors.token}
                                            </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>
                                                    Memproses...
                                                </span>
                                            ) : (
                                                '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>
        </>
    );
}

