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

type PageProps = {
    wedding: { name: string } | null;
    invitation: {
        salutation: string | null;
        emailHint: string;
        expiresAt: string;
        guests: Array<{ name: string; isChild: boolean }>;
    };
};

export default function InvitationShow() {
    const { wedding, invitation } = usePage<PageProps>().props;
    const form = useForm({ remember: true });

    const submit = (event: FormEvent) => {
        event.preventDefault();
        form.post(`${window.location.pathname}/code`);
    };

    return (
        <>
            <Head title="Deine Einladung" />
            <main className="invitation-shell">
                <div className="botanical botanical-left" aria-hidden="true" />
                <div className="botanical botanical-right" aria-hidden="true" />
                <section className="invitation-card">
                    <span className="eyebrow">Persönliche Einladung</span>
                    <h1 className="invitation-title">{wedding?.name}</h1>
                    <div className="ornament" aria-hidden="true"><span /><i>◇</i><span /></div>
                    <p className="invitation-salutation">{invitation.salutation || 'Schön, dass ihr da seid!'}</p>
                    <p className="invitation-copy">Diese Einladung ist für:</p>
                    <ul className="invitee-list">
                        {invitation.guests.map((guest, index) => (
                            <li key={`${guest.name}-${index}`}>
                                <span>{guest.name}</span>
                                {guest.isChild && <small>Kind</small>}
                            </li>
                        ))}
                    </ul>
                    <p className="invitation-copy">
                        Zum geschützten Hochzeitsbereich senden wir einen Anmeldecode an <strong>{invitation.emailHint}</strong>.
                    </p>
                    <form onSubmit={submit}>
                        <div className="form-check invitation-remember">
                            <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>
                        {form.errors.remember && <div className="alert alert-danger mt-3">{form.errors.remember}</div>}
                        <button className="primary-action w-100" disabled={form.processing} type="submit">
                            {form.processing ? 'Code wird gesendet …' : 'Einladung öffnen'}
                        </button>
                    </form>
                </section>
            </main>
        </>
    );
}
