import { useForm, Link } from '@inertiajs/react';
import { useTranslator } from '@/lib/i18n';

interface Props {
    token: string;
    status?: 'invalid' | 'already_accepted' | 'already_member';
    wedding?: { partner_a_name: string; partner_b_name: string };
}

export default function Invite({ token, status, wedding }: Props) {
    const t = useTranslator();
    const { post, processing } = useForm({});

    function accept(e: React.FormEvent) {
        e.preventDefault();
        post(`/invite/${token}`);
    }

    if (status === 'invalid') {
        return (
            <div className="min-h-screen bg-background flex items-center justify-center p-4">
                <div className="text-center bg-card border border-border rounded-2xl p-8 max-w-md w-full">
                    <p className="text-4xl mb-4">❌</p>
                    <h1 className="font-serif text-2xl mb-2">{t('invite.invalid_title')}</h1>
                    <p className="text-muted-foreground">{t('invite.invalid_body')}</p>
                    <Link href="/login" className="block mt-4 text-primary hover:underline text-sm">{t('invite.go_login')}</Link>
                </div>
            </div>
        );
    }

    if (status === 'already_member') {
        return (
            <div className="min-h-screen bg-background flex items-center justify-center p-4">
                <div className="text-center bg-card border border-border rounded-2xl p-8 max-w-md w-full">
                    <p className="text-4xl mb-4">✓</p>
                    <h1 className="font-serif text-2xl mb-2">{t('invite.already_title')}</h1>
                    <p className="text-muted-foreground">{t('invite.already_body')}</p>
                    <Link href="/weddings" className="block mt-4 text-primary hover:underline text-sm">{t('invite.go_weddings')}</Link>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-background flex items-center justify-center p-4">
            <div className="text-center bg-card border border-border rounded-2xl p-8 max-w-md w-full">
                <p className="text-4xl mb-4">💍</p>
                <h1 className="font-serif text-2xl mb-2">{t('invite.invited_title')}</h1>
                {wedding && (
                    <p className="text-muted-foreground mb-6">
                        {t('invite.join_team', { names: `${wedding.partner_a_name} & ${wedding.partner_b_name}` })}
                    </p>
                )}
                <form onSubmit={accept}>
                    <button type="submit" disabled={processing} className="w-full bg-primary text-primary-foreground py-2.5 rounded-lg font-medium disabled:opacity-60">
                        {processing ? t('invite.accepting') : t('invite.accept')}
                    </button>
                </form>
                <p className="text-xs text-muted-foreground mt-4">
                    {t('invite.need_account')}
                </p>
            </div>
        </div>
    );
}