import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft, KeyRound } from 'lucide-react';
import { AuthField } from '@/components/auth/auth-field';
import AuthHeading from '@/components/auth/auth-heading';
import ResetSteps from '@/components/auth/reset-steps';
import { Spinner } from '@/components/ui/spinner';
import { login } from '@/routes';
import { email as sendCode } from '@/routes/password';

export default function ForgotPassword({ email }: { email: string }) {
    return (
        <>
            <Head title="Forgot password" />

            <ResetSteps current={0} />

            <AuthHeading
                icon={KeyRound}
                title="Forgot your password?"
                description="No worries! Enter the email linked to your account and we’ll send you a 6 digit code to reset it."
            />

            <Form {...sendCode.form()} className="mt-6">
                {({ processing, errors }) => (
                    <>
                        <AuthField
                            name="email"
                            type="email"
                            label="Email address"
                            required
                            autoFocus
                            autoComplete="email"
                            defaultValue={email}
                            placeholder="you@example.com"
                            error={errors.email}
                        />

                        <button
                            type="submit"
                            disabled={processing}
                            data-test="send-reset-code-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 />}
                            Send code
                        </button>
                    </>
                )}
            </Form>

            <Link
                href={login()}
                className="mt-6 flex items-center justify-center gap-1.5 text-sm font-semibold transition-colors hover:text-gold-dark"
            >
                <ArrowLeft className="size-4" />
                Back to login
            </Link>
        </>
    );
}
