Speisekarte/components/LanguageManager.tsx

"use client";

// Verwaltung der Sprachpakete (nur Admin): Sprachen aktivieren/
// deaktivieren (bis auf eine einzige reduzierbar), Vorlage der
// aktuellen Begriffe herunterladen, Übersetzungsdatei hochladen, neue
// Sprache anlegen/löschen. Deutsch ist die feste Basis-Sprache und
// nicht löschbar.

import { useCallback, useEffect, useState } from "react";
import { formatMessage } from "@/lib/i18n/shared";
import { useDict } from "@/components/i18n/LocaleProvider";

interface LanguageItem {
  code: string;
  label: string;
  is_base: boolean;
  active: boolean;
  percent: number;
  outdated: boolean;
  missingCount: number;
}

export default function LanguageManager() {
  const dict = useDict();
  const [languages, setLanguages] = useState<LanguageItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [newCode, setNewCode] = useState("");
  const [newLabel, setNewLabel] = useState("");

  const load = useCallback(async () => {
    const res = await fetch("/api/admin/languages");
    if (!res.ok) {
      setError(formatMessage(dict.languageManager.loadError, { message: String(res.status) }));
    } else {
      setLanguages(await res.json());
    }
    setLoading(false);
  }, [dict]);

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

  async function toggleActive(item: LanguageItem) {
    setError(null);
    setNotice(null);
    setBusy(true);
    const res = await fetch(`/api/admin/languages/${item.code}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ active: !item.active }),
    });
    setBusy(false);
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setError(
        data.error === "cannot_deactivate_last"
          ? dict.languageManager.cannotDeactivateLast
          : formatMessage(dict.languageManager.saveError, { message: data.error ?? String(res.status) })
      );
      return;
    }
    await load();
  }

  async function deleteLanguage(item: LanguageItem) {
    if (!window.confirm(formatMessage(dict.languageManager.confirmDelete, { label: item.label })))
      return;
    setError(null);
    setNotice(null);
    setBusy(true);
    const res = await fetch(`/api/admin/languages/${item.code}`, { method: "DELETE" });
    setBusy(false);
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setError(
        data.error === "cannot_delete_base"
          ? dict.languageManager.cannotDeleteBase
          : formatMessage(dict.languageManager.deleteError, { message: data.error ?? String(res.status) })
      );
      return;
    }
    await load();
  }

  async function downloadTemplate() {
    setError(null);
    const res = await fetch("/api/admin/languages/template");
    if (!res.ok) {
      setError(formatMessage(dict.languageManager.loadError, { message: String(res.status) }));
      return;
    }
    const blob = await res.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "sprachvorlage.json";
    a.click();
    URL.revokeObjectURL(url);
  }

  async function uploadImport(code: string, e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    e.target.value = "";
    if (!file) return;
    setError(null);
    setNotice(null);
    setBusy(true);
    const fd = new FormData();
    fd.append("file", file);
    const res = await fetch(`/api/admin/languages/${code}/import`, {
      method: "POST",
      body: fd,
    });
    setBusy(false);
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setError(formatMessage(dict.languageManager.importError, { message: data.error ?? String(res.status) }));
      return;
    }
    const data = (await res.json()) as {
      imported: number;
      skipped: { key: string; reason: string }[];
    };
    let msg = formatMessage(dict.languageManager.importSuccess, { count: data.imported });
    if (data.skipped.length > 0) {
      const first = data.skipped[0];
      const [reason, placeholder] = first.reason.split(":");
      if (reason === "missing_placeholder") {
        msg +=
          " " +
          formatMessage(dict.languageManager.importMissingPlaceholder, {
            key: first.key,
            placeholder: `{${placeholder}}`,
          });
        if (data.skipped.length > 1) msg += ` (+${data.skipped.length - 1})`;
      }
    }
    setNotice(msg);
    await load();
  }

  async function createLanguage(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setNotice(null);
    const code = newCode.trim().toLowerCase();
    const label = newLabel.trim();
    if (!/^[a-z]{2,5}$/.test(code)) {
      setError(dict.languageManager.invalidCode);
      return;
    }
    if (!label) return;
    setBusy(true);
    const res = await fetch("/api/admin/languages", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ code, label }),
    });
    setBusy(false);
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setError(
        data.error === "duplicate_code"
          ? formatMessage(dict.languageManager.duplicateCode, { code })
          : formatMessage(dict.languageManager.saveError, { message: data.error ?? String(res.status) })
      );
      return;
    }
    setNewCode("");
    setNewLabel("");
    await load();
  }

  return (
    <div className="max-w-3xl space-y-6">
      <div>
        <h1 className="text-xl font-bold text-[var(--c-primary)] mb-1">
          {dict.languageManager.title}
        </h1>
        <p className="text-sm text-gray-600">{dict.languageManager.hint}</p>
      </div>

      {error && (
        <p className="text-sm text-[var(--c-del)]" role="alert">
          {error}
        </p>
      )}
      {notice && <p className="text-sm text-green-700">{notice}</p>}

      <section className="card">
        <div className="flex flex-wrap items-center gap-3 mb-3">
          <h2 className="font-semibold mr-auto">{dict.languageManager.title}</h2>
          <button type="button" className="btn btn-neutral" onClick={downloadTemplate}>
            {dict.languageManager.downloadTemplate}
          </button>
        </div>

        {loading ? (
          <p className="text-gray-500">{dict.common.loading}</p>
        ) : (
          <ul className="divide-y divide-gray-100">
            {languages.map((item) => (
              <li key={item.code} className="flex flex-wrap items-center gap-3 py-2 text-sm">
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={item.active}
                    onChange={() => toggleActive(item)}
                    disabled={busy}
                  />
                  <span className="font-semibold uppercase">{item.code}</span>
                </label>
                <span className="mr-auto">
                  {item.label}
                  {item.is_base ? (
                    <span className="ml-2 text-xs text-gray-500">
                      ({dict.languageManager.baseBadge})
                    </span>
                  ) : (
                    <span className="ml-2 text-xs text-gray-500">
                      {item.outdated
                        ? formatMessage(dict.languageManager.outdated, { count: item.missingCount })
                        : formatMessage(dict.languageManager.completeness, { percent: item.percent })}
                    </span>
                  )}
                </span>
                {!item.is_base && (
                  <>
                    <label className="btn btn-neutral cursor-pointer">
                      {dict.languageManager.uploadTranslation}
                      <input
                        type="file"
                        accept=".json,application/json"
                        className="hidden"
                        onChange={(e) => uploadImport(item.code, e)}
                        disabled={busy}
                      />
                    </label>
                    <button
                      type="button"
                      className="btn btn-del"
                      onClick={() => deleteLanguage(item)}
                      disabled={busy}
                    >
                      {dict.languageManager.delete}
                    </button>
                  </>
                )}
              </li>
            ))}
          </ul>
        )}
      </section>

      <section className="card">
        <h2 className="font-semibold mb-3">{dict.languageManager.newLanguageTitle}</h2>
        <form onSubmit={createLanguage} className="flex flex-wrap items-end gap-3">
          <div className="max-w-40">
            <label className="label" htmlFor="new-lang-code">
              {dict.languageManager.newLanguageCodeLabel}
            </label>
            <input
              id="new-lang-code"
              className="input"
              value={newCode}
              onChange={(e) => setNewCode(e.target.value)}
              required
            />
          </div>
          <div>
            <label className="label" htmlFor="new-lang-label">
              {dict.languageManager.newLanguageLabelLabel}
            </label>
            <input
              id="new-lang-label"
              className="input"
              value={newLabel}
              onChange={(e) => setNewLabel(e.target.value)}
              required
            />
          </div>
          <button type="submit" className="btn btn-add" disabled={busy}>
            {dict.languageManager.create}
          </button>
        </form>
      </section>
    </div>
  );
}