import { useEffect, useState, useCallback } from 'react';
import Layout from '../components/Layout';
import { apiFetch, apiPost } from '../lib/api';

const SOURCE_LABELS = { words: 'Wörter', questions: 'Fragen', statements: 'Statements' };
const LANGS = [
  { code: 'de', label: 'Deutsch', flag: '🇩🇪' },
  { code: 'en', label: 'English', flag: '🇬🇧' },
  { code: 'sv', label: 'Svenska', flag: '🇸🇪' },
];
const SOURCES = ['words', 'questions', 'statements'];

function pct(have, total) { return total ? Math.round((have / total) * 100) : 0; }

export default function TranslationHub() {
  const [coverage, setCoverage] = useState(null);  // 'words|de' → {total, have, missing}
  const [busy, setBusy] = useState(null);          // `${table}|${to}`
  const [progress, setProgress] = useState(null);
  const [error, setError] = useState(null);

  const load = useCallback(async () => {
    try {
      const { coverage } = await apiFetch('/claude/translation-coverage');
      const map = {};
      for (const g of coverage) map[`${g.source_table}|${g.language}`] = g;
      setCoverage(map);
    } catch (e) { setError(e.message); }
  }, []);

  useEffect(() => { load(); }, [load]);

  async function translateMissing(table, to) {
    const key = `${table}|${to}`;
    setBusy(key); setError(null); setProgress(`Übersetze fehlende ${SOURCE_LABELS[table]} nach ${to.toUpperCase()} …`);
    try {
      const res = await apiPost('/claude/translate-missing', { source_table: table, to });
      setProgress(`Fertig: ${res.translated} übersetzt${res.failed ? `, ${res.failed} fehlgeschlagen` : ''}.`);
      await load();
    } catch (e) {
      setError(e.message);
      setProgress(null);
    } finally {
      setBusy(null);
      setTimeout(() => setProgress(null), 4000);
    }
  }

  return (
    <Layout back="/">
      <div className="max-w-5xl mx-auto">
        <h1 className="text-2xl font-bold text-slate-800 mb-1">Übersetzungen</h1>
        <p className="text-slate-500 mb-4">
          Fehlende Sprachen per Claude automatisch übersetzen. Placeholder (z.B. <code className="px-1 bg-slate-100 rounded">{`{{Apfel.w:...}}`}</code>)
          bleiben strukturell erhalten, das Label wird mit-übersetzt und korrekt gebeugt.
        </p>

        <div className="bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm rounded-xl px-4 py-3 mb-6">
          <b>Logik:</b> Es werden nur Zeilen übersetzt, die in mindestens einer Sprache Text haben und in der Zielsprache leer sind.
          Quell-Sprache wird automatisch gewählt (Default: erste gefüllte Sprache).
          Nach „Alle übersetzen" werden die Wörter mit allen 3 Sprachen automatisch auf Status <b>translated</b> gesetzt.
        </div>

        {error && <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-xl px-4 py-2 mb-4">{error}</div>}
        {progress && <div className="bg-amber-50 border border-amber-200 text-amber-800 text-sm rounded-xl px-4 py-2 mb-4">{progress}</div>}

        <div className="space-y-6">
          {SOURCES.map(table => (
            <div key={table} className="bg-white rounded-2xl border border-slate-200 p-5">
              <h2 className="font-semibold text-slate-700 mb-4">{SOURCE_LABELS[table]}</h2>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                {LANGS.map(lang => {
                  const g = coverage?.[`${table}|${lang.code}`];
                  const total = g?.total ?? 0;
                  const have = g?.have ?? 0;
                  const missing = g?.missing ?? 0;
                  const key = `${table}|${lang.code}`;
                  const p = pct(have, total);
                  return (
                    <div key={lang.code} className="border border-slate-100 rounded-xl p-3 bg-slate-50/50">
                      <div className="flex items-center justify-between mb-2">
                        <span className="text-sm font-medium text-slate-700">{lang.flag} {lang.label}</span>
                        <span className="text-xs text-slate-500">{coverage ? `${have}/${total}` : '…'}</span>
                      </div>
                      <div className="h-2 bg-slate-200 rounded-full overflow-hidden mb-2">
                        <div className="h-full bg-emerald-500 transition-all" style={{ width: `${p}%` }} />
                      </div>
                      <div className="flex items-center justify-between">
                        <span className={`text-xs ${missing ? 'text-amber-600' : 'text-emerald-600'}`}>
                          {missing ? `${missing} fehlen` : 'vollständig'}
                        </span>
                        <button
                          disabled={!missing || busy === key}
                          onClick={() => translateMissing(table, lang.code)}
                          className={`text-xs px-2.5 py-1 rounded-lg font-medium transition-colors
                            ${!missing
                              ? 'bg-slate-100 text-slate-400 cursor-not-allowed'
                              : busy === key
                                ? 'bg-emerald-300 text-white cursor-wait'
                                : 'bg-emerald-600 text-white hover:bg-emerald-500'}`}
                        >
                          {busy === key ? 'Läuft …' : '🪄 Übersetzen'}
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>
    </Layout>
  );
}