import { Form, Head } from '@inertiajs/react';
import { LockKeyhole, Mail } from 'lucide-react';
import { AuthPasswordField } 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 { update } from '@/routes/password';

type Props = {
    email: string;
    passwordRules: string;
};

export default function ResetPassword({ email, passwordRules }: Props) {
    return (
        <>
            <Head title="Set a new password" />

            <ResetSteps current={2} />

            <AuthHeading
                icon={LockKeyhole}
                title="Set a new password"
                description="Your code is verified. Choose a strong password you haven’t used before."
            />

            <div className="mt-6 flex items-center gap-3 rounded-lg border border-navy/10 bg-gray-50 px-4 py-3 text-sm dark:border-white/10 dark:bg-ink-soft">
                <Mail className="size-4 shrink-0 text-gold-dark" />
                <span className="truncate font-medium">{email}</span>
            </div>

            <Form
                {...update.form()}
                resetOnSuccess={['password', 'password_confirmation']}
                className="mt-4"
            >
                {({ processing, errors }) => (
                    <>
                        <div className="space-y-4">
                            <AuthPasswordField
                                name="password"
                                label="New password"
                                required
                                autoFocus
                                autoComplete="new-password"
                                placeholder="••••••••••"
                                passwordrules={passwordRules}
                                error={errors.password}
                            />
                            <AuthPasswordField
                                name="password_confirmation"
                                label="Confirm new password"
                                required
                                autoComplete="new-password"
                                placeholder="••••••••••"
                                passwordrules={passwordRules}
                                error={errors.password_confirmation}
                            />
                        </div>

                        <button
                            type="submit"
                            disabled={processing}
                            data-test="reset-password-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 />}
                            Reset password
                        </button>
                    </>
                )}
            </Form>
        </>
    );
}
