import { Link, useForm, usePage } from '@inertiajs/react';
import { useMemo, useState } from 'react';
import AppLayout from '@/layouts/AppLayout';
import { useTranslator } from '@/lib/i18n';

interface Props {
    locale: { code: string; label: string; is_default: boolean };
    base: Record<string, Record<string, string>>;       // namespace => key => English
    strings: Record<string, Record<string, string>>;    // namespace => key => translation
}

export default function AdminTranslations({ locale, base, strings }: Props) {
    const t = useTranslator();
    const { flash } = usePage<any>().props;
    const [query, setQuery] = useState('');

    // Seed the form with every base key so the controller receives the full set.
    const initial = useMemo(() => {
        const out: Record<string, Record<string, string>> = {};
        for (const ns of Object.keys(base)) {
            out[ns] = {};
            for (const key of Object.keys(base[ns])) {
                out[ns][key] = strings?.[ns]?.[key] ?? '';
            }
        }
        return out;
    }, [base, strings]);

    const form = useForm<{ strings: Record<string, Record<string, string>> }>({ strings: initial });

    function setCell(ns: string, key: string, value: string) {
        form.setData('strings', {
            ...form.data.strings,
            [ns]: { ...form.data.strings[ns], [key]: value },
        });
    }

    function save(e: React.FormEvent) {
        e.preventDefault();
        form.put(`/admin/languages/${locale.code}/translations`, { preserveScroll: true });
    }

    const q = query.trim().toLowerCase();
    const namespaces = Object.keys(base);

    // Per-namespace translated counts for the progress hint.
    const translatedCount = namespaces.reduce((sum, ns) => sum + Object.keys(base[ns]).filter(k => (form.data.strings[ns]?.[k] ?? '').trim() !== '').length, 0);
    const totalCount = namespaces.reduce((sum, ns) => sum + Object.keys(base[ns]).length, 0);

    return (
        <AppLayout>
            <div className="max-w-3xl mx-auto px-6 py-10">
                <div className="mb-6">
                    <Link href="/admin/languages" className="text-sm text-muted-foreground hover:text-foreground">← {t('admin.languages')}</Link>
                    <div className="flex items-center justify-between gap-4 flex-wrap mt-2">
                        <div>
                            <h1 className="font-serif text-3xl">{t('admin.tr_title', { label: locale.label })}</h1>
                            <p className="text-sm text-muted-foreground mt-1">
                                {locale.is_default
                                    ? t('admin.tr_default_note')
                                    : t('admin.tr_progress_note', { done: translatedCount, total: totalCount })}
                            </p>
                        </div>
                        <button onClick={save} disabled={form.processing} className="bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm disabled:opacity-50">
                            {form.processing ? t('common.saving') : t('admin.tr_save')}
                        </button>
                    </div>
                </div>

                {flash?.success && (
                    <div className="mb-4 rounded-lg border border-success/30 bg-success/10 px-4 py-3 text-sm text-success">{flash.success}</div>
                )}

                <input
                    type="search"
                    placeholder={t('admin.tr_filter_placeholder')}
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    className="w-full border border-border rounded-lg px-3 py-2 text-sm mb-6"
                />

                <form onSubmit={save} className="space-y-7">
                    {namespaces.map((ns) => {
                        const keys = Object.keys(base[ns]).filter((k) => {
                            if (!q) return true;
                            return k.toLowerCase().includes(q)
                                || base[ns][k].toLowerCase().includes(q)
                                || ns.toLowerCase().includes(q);
                        });
                        if (keys.length === 0) return null;
                        return (
                            <section key={ns}>
                                <h2 className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground mb-3">{ns}</h2>
                                <div className="space-y-3">
                                    {keys.map((key) => (
                                        <div key={key} className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4 md:items-center">
                                            <div className="min-w-0">
                                                <p className="text-[13px] text-foreground truncate">{base[ns][key]}</p>
                                                <p className="text-[11px] text-muted-foreground font-mono">{ns}.{key}</p>
                                            </div>
                                            <input
                                                type="text"
                                                value={form.data.strings[ns]?.[key] ?? ''}
                                                onChange={(e) => setCell(ns, key, e.target.value)}
                                                placeholder={base[ns][key]}
                                                disabled={locale.is_default}
                                                className="border border-border rounded-lg px-3 py-2 text-sm disabled:opacity-60 disabled:bg-muted/40"
                                            />
                                        </div>
                                    ))}
                                </div>
                            </section>
                        );
                    })}

                    {!locale.is_default && (
                        <div className="pt-2">
                            <button type="submit" disabled={form.processing} className="bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm disabled:opacity-50">
                                {form.processing ? t('common.saving') : t('admin.tr_save')}
                            </button>
                        </div>
                    )}
                </form>
            </div>
        </AppLayout>
    );
}