import { Form, Head, Link } from '@inertiajs/react';
import AuthFooterLink from '@/components/auth/auth-footer-link';
import { AuthField, AuthPasswordField } from '@/components/auth/auth-field';
import AuthHeading from '@/components/auth/auth-heading';
import { Spinner } from '@/components/ui/spinner';
import { store } from '@/routes/login';
import { request } from '@/routes/password';

type Props = {
    status?: string;
    canResetPassword: boolean;
};

export default function Login({ status, canResetPassword }: Props) {
    return (
        <>
            <Head title="Log in" />

            <AuthHeading
                eyebrow="Hey there, welcome back!"
                title="Login to your account!"
            />

            {status && (
                <div className="mt-6 rounded-lg bg-green-50 px-4 py-3 text-center text-sm font-medium text-green-700 dark:bg-green-500/10 dark:text-green-400">
                    {status}
                </div>
            )}

            <Form
                {...store.form()}
                resetOnSuccess={['password']}
                className="mt-6"
            >
                {({ processing, errors }) => (
                    <>
                        <div className="space-y-4">
                            <AuthField
                                name="email"
                                type="email"
                                label="Email address"
                                required
                                autoFocus
                                autoComplete="email"
                                placeholder="you@example.com"
                                error={errors.email}
                            />

                            <div>
                                <AuthPasswordField
                                    name="password"
                                    label="Password"
                                    required
                                    autoComplete="current-password"
                                    placeholder="••••••••••"
                                    error={errors.password}
                                />
                                {canResetPassword && (
                                    <div className="mt-2 text-right">
                                        <Link
                                            href={request()}
                                            className="text-sm transition-colors hover:text-gold-dark"
                                        >
                                            Forgot Password?
                                        </Link>
                                    </div>
                                )}
                            </div>
                        </div>

                        <button
                            type="submit"
                            disabled={processing}
                            data-test="login-button"
                            className="mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-gold text-base font-semibold text-white transition-colors hover:bg-gold-dark disabled:opacity-70"
                        >
                            {processing && <Spinner />}
                            Login
                        </button>
                    </>
                )}
            </Form>

            <AuthFooterLink />
        </>
    );
}
