import { useState } from 'react';
import { useForm, router } from '@inertiajs/react';
import AppLayout from '@/layouts/AppLayout';
import { CURRENCIES, currencyForCountry, capitalForCountry, findCountry } from '@/lib/locales';
import { CountryCombobox } from '@/components/country-combobox';
import { useTranslator } from '@/lib/i18n';

interface ExtraEvent {
    key: string;
    name: string;
    date?: string;
    time?: string;
    location?: string;
}

interface Wedding {
    id: string;
    partner_a_id: string;
    partner_a_name: string;
    partner_b_name: string;
    wedding_date: string | null;
    venue_name: string | null;
    venue_city: string | null;
    venue_country: string | null;
    currency: string;
    extra_events?: ExtraEvent[] | null;
}

interface Props {
    wedding: Wedding;
    currentUserRole: string;
    auth: { user: { id: string; name: string; email: string; is_admin: boolean } };
}

export default function WeddingEdit({ wedding, currentUserRole, auth }: Props) {
    const t = useTranslator();
    const isCreator = auth.user.id === wedding.partner_a_id;
    const [deleteConfirm, setDeleteConfirm] = useState('');
    const [deleting, setDeleting] = useState(false);
    const [events, setEvents] = useState<ExtraEvent[]>(wedding.extra_events ?? []);

    // Normalize legacy free-text country values to ISO codes when possible
    const normalizedCountry = findCountry(wedding.venue_country)?.code ?? (wedding.venue_country ?? '');

    const { data, setData, patch, processing, errors } = useForm({
        partner_a_name: wedding.partner_a_name,
        partner_b_name: wedding.partner_b_name,
        wedding_date: wedding.wedding_date ? wedding.wedding_date.slice(0, 10) : '',
        venue_name: wedding.venue_name ?? '',
        venue_city: wedding.venue_city ?? '',
        venue_country: normalizedCountry,
        currency: wedding.currency ?? 'USD',
    });

    function saveEvents(next: ExtraEvent[]) {
        setEvents(next);
        router.patch(`/weddings/${wedding.id}`,
            { ...data, extra_events: next as never },
            { preserveScroll: true });
    }
    function addEvent() {
        const key = `evt_${Date.now()}`;
        saveEvents([...events, { key, name: t('wedding_edit.new_event'), date: '', time: '', location: '' }]);
    }
    function updateEvent(idx: number, patch: Partial<ExtraEvent>) {
        const next = events.map((e, i) => i === idx ? { ...e, ...patch } : e);
        setEvents(next);
    }
    function commitEvent(idx: number) {
        saveEvents(events);
    }
    function removeEvent(idx: number) {
        if (!confirm(t('wedding_edit.remove_confirm', { name: events[idx].name }))) return;
        saveEvents(events.filter((_, i) => i !== idx));
    }

    function submit(e: React.FormEvent) {
        e.preventDefault();
        patch(`/weddings/${wedding.id}`);
    }

    function handleDelete() {
        if (deleteConfirm !== 'delete') return;
        setDeleting(true);
        router.delete(`/weddings/${wedding.id}`);
    }

    return (
        <AppLayout wedding={wedding} currentUserRole={currentUserRole} auth={auth}>
            <div className="max-w-2xl mx-auto space-y-8 py-8 px-4">
                <div>
                    <h1 className="text-2xl font-bold" style={{ fontFamily: 'var(--font-playfair)' }}>
                        {t('wedding_edit.title')}
                    </h1>
                    <p className="text-muted-foreground text-sm mt-1">{t('wedding_edit.subtitle')}</p>
                </div>

                <form onSubmit={submit} className="bg-card border border-border rounded-xl p-6 space-y-5">
                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-sm font-medium mb-1">{t('wedding.partner_a_name')}</label>
                            <input
                                className="input"
                                value={data.partner_a_name}
                                onChange={e => setData('partner_a_name', e.target.value)}
                            />
                            {errors.partner_a_name && <p className="text-red-500 text-xs mt-1">{errors.partner_a_name}</p>}
                        </div>
                        <div>
                            <label className="block text-sm font-medium mb-1">{t('wedding.partner_b_name')}</label>
                            <input
                                className="input"
                                value={data.partner_b_name}
                                onChange={e => setData('partner_b_name', e.target.value)}
                            />
                            {errors.partner_b_name && <p className="text-red-500 text-xs mt-1">{errors.partner_b_name}</p>}
                        </div>
                    </div>

                    <div>
                        <label className="block text-sm font-medium mb-1">{t('wedding.wedding_date')}</label>
                        <input
                            type="date"
                            className="input"
                            value={data.wedding_date}
                            onChange={e => setData('wedding_date', e.target.value)}
                        />
                    </div>

                    <div>
                        <label className="block text-sm font-medium mb-1">{t('wedding.venue_name')}</label>
                        <input
                            className="input"
                            value={data.venue_name}
                            onChange={e => setData('venue_name', e.target.value)}
                            placeholder={t('wedding_edit.venue_placeholder')}
                        />
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-sm font-medium mb-1">{t('wedding.venue_city')}</label>
                            <input
                                className="input"
                                value={data.venue_city}
                                onChange={e => setData('venue_city', e.target.value)}
                                placeholder={t('wedding_edit.city_placeholder')}
                            />
                        </div>
                        <div>
                            <label className="block text-sm font-medium mb-1">{t('wedding.venue_country')}</label>
                            <CountryCombobox
                                value={data.venue_country}
                                onChange={(code) => {
                                    setData('venue_country', code);
                                    const nextCurrency = currencyForCountry(code);
                                    if (nextCurrency && data.currency === 'USD') {
                                        setData('currency', nextCurrency);
                                    }
                                    const cap = capitalForCountry(code);
                                    if (cap && !data.venue_city) {
                                        setData('venue_city', cap);
                                    }
                                }}
                                placeholder={t('wedding_edit.country_placeholder')}
                            />
                        </div>
                    </div>

                    <div>
                        <label className="block text-sm font-medium mb-1">{t('wedding.currency')}</label>
                        <select
                            className="input"
                            value={data.currency}
                            onChange={(e) => setData('currency', e.target.value)}
                        >
                            {CURRENCIES.map((c) => (
                                <option key={c.code} value={c.code}>
                                    {c.code} — {c.name} ({c.symbol})
                                </option>
                            ))}
                        </select>
                    </div>

                    <button
                        type="submit"
                        disabled={processing}
                        className="w-full bg-primary text-primary-foreground rounded-lg py-2.5 text-sm font-semibold hover:opacity-90 transition disabled:opacity-50"
                    >
                        {processing ? t('common.saving') : t('wedding_edit.save_changes')}
                    </button>
                </form>

                {/* Extra events */}
                <div className="bg-card border border-border rounded-xl p-6 space-y-4">
                    <div>
                        <h2 className="text-lg font-semibold">{t('wedding_edit.extra_events')}</h2>
                        <p className="text-xs text-muted-foreground mt-1">
                            {t('wedding_edit.extra_events_help_1')} <strong>{t('wedding_edit.extra_events_help_strong')}</strong> {t('wedding_edit.extra_events_help_2')} <a href={`/weddings/${wedding.id}/guests`} className="text-primary hover:underline">{t('nav.guests')}</a> {t('wedding_edit.extra_events_help_3')}
                        </p>
                    </div>

                    {events.length === 0 && (
                        <p className="text-sm text-muted-foreground italic">{t('wedding_edit.no_extra_events')}</p>
                    )}

                    <div className="space-y-3">
                        {events.map((evt, idx) => (
                            <div key={evt.key} className="border border-border rounded-lg p-4 space-y-2">
                                <div className="flex items-start gap-2">
                                    <input
                                        value={evt.name}
                                        onChange={e => updateEvent(idx, { name: e.target.value })}
                                        onBlur={() => commitEvent(idx)}
                                        placeholder={t('wedding_edit.event_name_placeholder')}
                                        className="flex-1 input font-medium"
                                    />
                                    <button
                                        onClick={() => removeEvent(idx)}
                                        className="text-red-500 hover:text-red-700 px-2"
                                        title={t('common.remove')}
                                    >×</button>
                                </div>
                                <div className="grid grid-cols-2 gap-2">
                                    <input
                                        type="date"
                                        value={evt.date ?? ''}
                                        onChange={e => updateEvent(idx, { date: e.target.value })}
                                        onBlur={() => commitEvent(idx)}
                                        className="input text-sm"
                                    />
                                    <input
                                        type="time"
                                        value={evt.time ?? ''}
                                        onChange={e => updateEvent(idx, { time: e.target.value })}
                                        onBlur={() => commitEvent(idx)}
                                        className="input text-sm"
                                    />
                                </div>
                                <input
                                    value={evt.location ?? ''}
                                    onChange={e => updateEvent(idx, { location: e.target.value })}
                                    onBlur={() => commitEvent(idx)}
                                    placeholder={t('wedding_edit.location_placeholder')}
                                    className="input text-sm"
                                />
                            </div>
                        ))}
                    </div>

                    <button
                        onClick={addEvent}
                        className="w-full py-2 text-sm border border-dashed border-border rounded-lg text-muted-foreground hover:text-foreground hover:border-primary"
                    >+ {t('wedding_edit.add_event')}</button>
                </div>

                {isCreator && (
                    <div className="bg-card border border-red-200 rounded-xl p-6 space-y-4">
                        <h2 className="text-lg font-semibold text-red-600">{t('wedding_edit.danger_zone')}</h2>
                        <p className="text-sm text-muted-foreground">
                            {t('wedding_edit.danger_desc')}
                        </p>
                        <div className="space-y-3">
                            <div>
                                <label className="block text-sm font-medium mb-1">
                                    {t('wedding_edit.type_confirm_1')} <span className="font-mono font-bold">delete</span> {t('wedding_edit.type_confirm_2')}
                                </label>
                                <input
                                    className="input border-red-300 focus:border-red-500"
                                    value={deleteConfirm}
                                    onChange={e => setDeleteConfirm(e.target.value)}
                                    placeholder="delete"
                                />
                            </div>
                            <button
                                onClick={handleDelete}
                                disabled={deleteConfirm !== 'delete' || deleting}
                                className="w-full bg-red-600 text-white rounded-lg py-2.5 text-sm font-semibold hover:bg-red-700 transition disabled:opacity-40"
                            >
                                {deleting ? t('wedding_edit.deleting') : t('wedding_edit.delete_wedding')}
                            </button>
                        </div>
                    </div>
                )}
            </div>
        </AppLayout>
    );
}