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

export default function Login() {
    return (
        <>
            <Head title="Login" />
            <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                                />
                            </svg>
                        </div>
                        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
                            Masuk ke Akun Anda
                        </h2>
                        <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
                            Silakan login untuk melanjutkan
                        </p>
                    </div>
                    <div className="rounded-lg bg-white p-8 shadow-xl dark:bg-gray-800 dark:shadow-2xl">
                        <Form
                            action="/login"
                            method="post"
                            className="space-y-6"
                        >
                        {({
                            errors,
                            processing,
                            clearErrors,
                        }) => (
                            <>
                                <div className="-space-y-px rounded-md shadow-sm">
                                    <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-t-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')}
                                        />
                                    </div>
                                    <div>
                                        <label htmlFor="password" className="sr-only">
                                            Password
                                        </label>
                                        <input
                                            id="password"
                                            name="password"
                                            type="password"
                                            autoComplete="current-password"
                                            required
                                            className="relative block w-full rounded-b-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"
                                            onChange={() => clearErrors('password')}
                                        />
                                    </div>
                                </div>

                                {errors.email && (
                                    <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.email}
                                        </p>
                                    </div>
                                )}

                                {errors.password && (
                                    <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.password}
                                        </p>
                                    </div>
                                )}

                                <div className="flex items-center justify-between">
                                    <div className="flex items-center">
                                        <input
                                            id="remember"
                                            name="remember"
                                            type="checkbox"
                                            className="h-4 w-4 rounded border-gray-300 text-[#d4af37] focus:ring-[#d4af37] dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800"
                                        />
                                        <label
                                            htmlFor="remember"
                                            className="ml-2 block text-sm text-gray-900 dark:text-gray-300"
                                        >
                                            Ingat saya
                                        </label>
                                    </div>
                                    <div className="text-sm">
                                        <Link
                                            href="/forgot-password"
                                            className="font-semibold text-[#d4af37] hover:text-[#b8941f] dark:text-[#b8941f] dark:hover:text-[#9a7d15] transition-colors duration-200"
                                        >
                                            Lupa password?
                                        </Link>
                                    </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>
                                                Memproses...
                                            </span>
                                        ) : (
                                            'Masuk'
                                        )}
                                    </button>
                                </div>
                            </>
                        )}
                        </Form>
                    </div>
                </div>
            </div>
        </>
    );
}

