import { Head, Link, useForm, usePage } from '@inertiajs/react';
import type { FormEvent } from 'react';

type SharedProps = {
    wedding: { name: string } | null;
};

export default function RequestCode() {
    const { wedding } = usePage<SharedProps>().props;
    const form = useForm({ email: '', remember: false });

    const submit = (event: FormEvent) => {
        event.preventDefault();
        form.post('/login/code');
    };

    return (
        <>
            <Head title="Anmelden" />
            <main className="auth-shell">
                <section className="auth-card">
                    <Link className="back-link" href="/">← Zurück</Link>
                    <span className="eyebrow">{wedding?.name}</span>
                    <h1 className="auth-title">Willkommen</h1>
                    <p className="auth-copy">
                        Gib die E-Mail-Adresse deiner Einladung ein. Wir senden dir einen sechsstelligen Anmeldecode.
                    </p>

                    <form onSubmit={submit} noValidate>
                        <div className="mb-3">
                            <label className="form-label" htmlFor="email">E-Mail-Adresse</label>
                            <input
                                autoComplete="email"
                                autoFocus
                                className={`form-control form-control-lg ${form.errors.email ? 'is-invalid' : ''}`}
                                id="email"
                                inputMode="email"
                                onChange={(event) => form.setData('email', event.target.value)}
                                type="email"
                                value={form.data.email}
                            />
                            {form.errors.email && <div className="invalid-feedback">{form.errors.email}</div>}
                        </div>

                        <div className="form-check mb-4">
                            <input
                                checked={form.data.remember}
                                className="form-check-input"
                                id="remember"
                                onChange={(event) => form.setData('remember', event.target.checked)}
                                type="checkbox"
                            />
                            <label className="form-check-label" htmlFor="remember">
                                Auf diesem Gerät angemeldet bleiben
                            </label>
                        </div>

                        <button className="primary-action w-100" disabled={form.processing} type="submit">
                            {form.processing ? 'Code wird gesendet …' : 'Code per E-Mail senden'}
                        </button>
                    </form>
                </section>
            </main>
        </>
    );
}
