/* Mehrsprachigkeit (DE/FR/EN) — alle Texte liegen gemeinsam in wf/lang/strings.json,
   pro Begriff mit 3 Einträgen: { "schluessel": { "de": "...", "fr": "...", "en": "..." } }.
   Neue Begriffe/Übersetzungen also einfach dort ergänzen (nicht in mehreren Dateien).
   WICHTIG: strings.json wird per fetch() geladen, nicht als <script src>, darum bei
   jeder inhaltlichen Änderung an strings.json die Versionsnummer in der fetch()-URL
   unten (?v=) um 1 erhöhen, sonst liefern Browser evtl. eine alte, gecachte Version.
   Muss VOR wf/chrome.jsx geladen werden (chrome.jsx nutzt t() für die Navigation).

   Funktionsweise:
   - Sprache wird ermittelt aus: ?lang= in der URL > localStorage > Browsersprache > "de".
   - Deutsch ist die Ausgangssprache: Aus strings.json wird pro Begriff der Eintrag für die
     aktuelle Sprache herausgezogen; t() hat zusätzlich eine eingebaute deutsche
     Rückfalltabelle, damit auch vor Abschluss des Fetches (oder falls er fehlschlägt)
     sofort korrekter Text erscheint — kein Aufblitzen von Schlüsselnamen.
   - Sprachwechsel: schreibt die Wahl in localStorage und lädt die aktuelle Seite mit
     angepasstem ?lang=-Parameter neu (einfaches, robustes Modell ohne Client-Router). */

const WF_LANGS = ["de", "fr", "en"];
const WF_LANG_DEFAULT = "de";

// Eingebaute Rückfalltabelle (Deutsch) — synchron verfügbar, kein Warten auf einen Fetch.
// Muss inhaltlich mit wf/lang/de.json übereinstimmen; einzelne Ergänzungen dort werden
// nach dem Laden automatisch mitverwendet, hier ist nur der Minimalsatz für die Navigation nötig.
const WF_STRINGS_DE_FALLBACK = {
  "nav.home": "Home",
  "nav.schmuck": "Schmuckstücke",
  "nav.neu": "Neu eingetroffen",
  "nav.sofunktioniert": "So funktioniert's",
  "nav.ueber": "Über mich",
  "nav.dieIdee": "Die Idee",
  "nav.dasKonzept": "Das Konzept",
  "nav.faq": "FAQ",
  "nav.kontakt": "Kontakt",
  "nav.merkliste": "Merkliste",
  "nav.suchen": "Suchen"
};

function wf_lang_detect() {
  try {
    const url = new URL(window.location.href);
    const fromUrl = url.searchParams.get("lang");
    if (fromUrl && WF_LANGS.includes(fromUrl)) return fromUrl;
  } catch (e) {}
  try {
    const stored = localStorage.getItem("wf_lang");
    if (stored && WF_LANGS.includes(stored)) return stored;
  } catch (e) {}
  try {
    const nav = (navigator.language || "de").slice(0, 2).toLowerCase();
    if (WF_LANGS.includes(nav)) return nav;
  } catch (e) {}
  return WF_LANG_DEFAULT;
}

window.WF_LANG = wf_lang_detect();
window.WF_STRINGS = Object.assign({}, WF_STRINGS_DE_FALLBACK);
window.WF_LANG_READY = fetch("wf/lang/strings.json?v=10")
  .then(res => res.json())
  .then(json => {
    const out = {};
    Object.keys(json).forEach(key => {
      const entry = json[key] || {};
      out[key] = entry[window.WF_LANG] || entry[WF_LANG_DEFAULT] || Object.values(entry)[0];
    });
    Object.assign(window.WF_STRINGS, out);
  })
  .catch(err => { console.error("weiterfunkeln.ch: Sprachdatei konnte nicht geladen werden.", err); });

// t("nav.kontakt", "Kontakt") — zweites Argument ist der Rückfallwert, falls der
// Schlüssel (noch) in keinem Wörterbuch existiert. So wird nie ein rohes key-Wort sichtbar.
function t(key, fallback) {
  const v = window.WF_STRINGS && window.WF_STRINGS[key];
  if (v) return v;
  if (WF_STRINGS_DE_FALLBACK[key]) return WF_STRINGS_DE_FALLBACK[key];
  return fallback !== undefined ? fallback : key;
}

function wf_lang_set(code) {
  if (!WF_LANGS.includes(code)) return;
  try { localStorage.setItem("wf_lang", code); } catch (e) {}
  const url = new URL(window.location.href);
  url.searchParams.set("lang", code);
  window.location.href = url.toString();
}

const WF_LANG_NAMES = { de: "DE", fr: "FR", en: "EN" };

function LangSwitcher({ narrow }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  const current = window.WF_LANG;
  const others = WF_LANGS.filter(l => l !== current);

  if (narrow) {
    return (
      <div style={{ display: "flex", gap: "var(--space-3)", alignItems: "center" }}>
        {WF_LANGS.map(l => (
          <button key={l} type="button" onClick={() => wf_lang_set(l)} style={{
            background: "none", border: "none", cursor: "pointer", padding: 0,
            ...wfEyebrow, fontSize: "var(--size-small)",
            color: l === current ? "var(--gold-700)" : "var(--text-strong)",
            fontWeight: l === current ? "var(--weight-medium)" : "var(--weight-regular)"
          }}>{WF_LANG_NAMES[l]}</button>
        ))}
      </div>
    );
  }

  return (
    <div ref={ref} style={{ position: "relative", zIndex: open ? 70 : "auto" }}
      onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
      <button type="button" onClick={() => setOpen(o => !o)} className="wf-submenu-link" style={{
        background: "none", border: "none", cursor: "pointer", padding: 0,
        display: "inline-flex", alignItems: "center", gap: 4,
        ...wfEyebrow, fontSize: "var(--size-small)"
      }} aria-label="Sprache wählen">
        {WF_LANG_NAMES[current]}
        <Icon name="chevronDown" size={14} style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform 150ms ease" }} />
      </button>
      {open && (
        <div style={{ position: "absolute", top: "100%", right: 0, paddingTop: 10, minWidth: 90, zIndex: 50 }}>
          <div style={{
            background: "var(--cream-50)", border: "var(--border-hairline)", borderRadius: "var(--radius-sm)",
            boxShadow: "0 16px 34px rgba(36,29,24,.16)", padding: "var(--space-2)", display: "grid"
          }}>
            {others.map(l => (
              <button key={l} type="button" onClick={() => wf_lang_set(l)} className="wf-submenu-link" style={{
                ...wfNavLink, border: "none", padding: "var(--space-2) var(--space-3)",
                background: "none", cursor: "pointer", textAlign: "left"
              }}>{WF_LANG_NAMES[l]}</button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { t, wf_lang_set, LangSwitcher, WF_LANGS });