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

type Props = {
    passwordRules: string;
};

export default function Register({ passwordRules }: Props) {
    return (
        <>
            <Head title="Register" />

            <AuthHeading
                eyebrow="Welcome to ZozTrip!"
                title="Create your account"
            />

            <Form
                {...store.form()}
                resetOnSuccess={['password', 'password_confirmation']}
                disableWhileProcessing
                className="mt-6"
            >
                {({ processing, errors }) => (
                    <>
                        <div className="space-y-4">
                            <AuthField
                                name="name"
                                type="text"
                                label="Full name"
                                required
                                autoFocus
                                autoComplete="name"
                                placeholder="John Doe"
                                error={errors.name}
                            />
                            <AuthField
                                name="email"
                                type="email"
                                label="Email address"
                                required
                                autoComplete="email"
                                placeholder="you@example.com"
                                error={errors.email}
                            />
                            <AuthPasswordField
                                name="password"
                                label="Password"
                                required
                                autoComplete="new-password"
                                placeholder="••••••••••"
                                passwordrules={passwordRules}
                                error={errors.password}
                            />
                            <AuthPasswordField
                                name="password_confirmation"
                                label="Confirm password"
                                required
                                autoComplete="new-password"
                                placeholder="••••••••••"
                                passwordrules={passwordRules}
                                error={errors.password_confirmation}
                            />
                        </div>

                        <button
                            type="submit"
                            disabled={processing}
                            data-test="register-user-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 />}
                            Create account
                        </button>
                    </>
                )}
            </Form>

            <p className="mt-6 text-center text-sm text-gray-500 dark:text-white/60">
                Already have an account?{' '}
                <Link
                    href={login()}
                    className="font-semibold text-navy hover:text-gold-dark dark:text-white"
                >
                    Log in
                </Link>
            </p>
        </>
    );
}
