/* ==========================================================================
   APP: shell, header, global search, routing table, footer.
   ========================================================================== */

const NAV = [
  { to: "/wissen", label: "Wissen" },
  { to: "/forum", label: "Forum" },
  { to: "/datenbank", label: "Datenbank" },
  { to: "/auswertung", label: "Analyse" },
  { to: "/molekuelkarte", label: "Molekülkarte" },
];

/* --- global search ------------------------------------------------------- */

function GlobalSearch({ variant = "header", onNavigate }) {
  const { go } = useRouter();
  const [q, setQ] = useState("");
  const [hits, setHits] = useState([]);
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const input = useRef(null);
  const request = useRef(0);

  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        input.current && input.current.focus();
      }
      if (e.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  useEffect(() => {
    const query = q.trim();
    const version = ++request.current;
    if (query.length < 2) { setHits([]); setLoading(false); return; }
    setLoading(true);
    const id = setTimeout(() => {
      BB.get("/posts" + BB.qs({ q: query, limit: 7 }))
        .then((d) => { if (request.current === version) setHits(d.items); })
        .catch(() => { if (request.current === version) setHits([]); })
        .finally(() => { if (request.current === version) setLoading(false); });
    }, 180);
    return () => clearTimeout(id);
  }, [q]);

  function submit(e) {
    e.preventDefault();
    if (!q.trim()) return;
    setOpen(false);
    onNavigate && onNavigate();
    go("/suche?q=" + encodeURIComponent(q.trim()));
  }

  function navigate(to) {
    setOpen(false);
    setQ("");
    onNavigate && onNavigate();
    go(to);
  }

  return (
    <form className={"hdr-search " + variant} onSubmit={submit} role="search">
      <span className="ico" aria-hidden="true">⌕</span>
      <input
        ref={input}
        value={q}
        onChange={(e) => { setQ(e.target.value); setOpen(true); }}
        onFocus={() => setOpen(true)}
        onBlur={() => setTimeout(() => setOpen(false), 180)}
        placeholder={BB.t("Suchen …")}
        aria-label={BB.t("Website durchsuchen")}
        aria-expanded={open && q.trim().length >= 2}
        aria-controls={variant + "-search-results"}
      />
      {open && q.trim().length >= 2 && (
        <div className="search-pop" id={variant + "-search-results"} aria-live="polite" aria-busy={loading}>
          {loading ? (
            <div className="none search-loading">{BB.t("Suche läuft …")}</div>
          ) : hits.length === 0 ? (
            <div className="none">{BB.t("Nichts gefunden")}: {q}</div>
          ) : (
            hits.map((p) => (
              <Link key={p.id} to={BB.postHref(p)} onClick={(e) => { e.preventDefault(); navigate(BB.postHref(p)); }}>
                <div className="grow">
                  <div className="t"><DraftMark post={p} /> {p.title}</div>
                  <div className="s">
                    {(BB.KINDS[p.kind] || {}).label || p.kind}
                    {p.author ? " · " + p.author.displayName : ""}
                  </div>
                </div>
                <span className="s">↵</span>
              </Link>
            ))
          )}
          <Link
            to={"/suche?q=" + encodeURIComponent(q.trim())}
            className="search-all"
            onClick={(e) => { e.preventDefault(); navigate("/suche?q=" + encodeURIComponent(q.trim())); }}
          >
            <span className="grow">{BB.t("Alle Ergebnisse anzeigen")}</span>
            <span className="s">↵</span>
          </Link>
        </div>
      )}
    </form>
  );
}

/* --- Sprachumschalter ----------------------------------------------------- */

const FLAG_ASSETS = {
  DE: "/static/assets/flags/de.svg",
  US: "/static/assets/flags/us.svg",
  GB: "/static/assets/flags/gb.svg",
  ES: "/static/assets/flags/es.svg",
  FR: "/static/assets/flags/fr.svg",
  SE: "/static/assets/flags/se.svg",
};

function CountryFlag({ country }) {
  const code = String(country || "").toUpperCase();
  const src = FLAG_ASSETS[code];
  return src ? <img className="lang-flag" src={src} alt="" aria-hidden="true" /> : null;
}

function AppearanceMenu() {
  const { locale, setLocale } = useLang();
  const { path, go } = useRouter();
  const [open, setOpen] = useState(false);
  const [tab, setTab] = useState("theme");
  const [theme, setTheme] = useState(BB.theme);
  const [accent, setAccent] = useState(BB.accent);
  const box = useRef(null);
  const trigger = useRef(null);
  const currentLocale = BB.LOCALES[locale] || BB.LOCALES[BB.DEFAULT_LOCALE];

  useEffect(() => {
    if (!open) return;
    const away = (e) => { if (box.current && !box.current.contains(e.target)) setOpen(false); };
    const esc = (e) => { if (e.key === "Escape") { setOpen(false); trigger.current && trigger.current.focus(); } };
    document.addEventListener("pointerdown", away);
    window.addEventListener("keydown", esc);
    return () => {
      document.removeEventListener("pointerdown", away);
      window.removeEventListener("keydown", esc);
    };
  }, [open]);

  return (
    <div className="appearance-menu" ref={box}>
      <button
        ref={trigger}
        className="btn ghost sm"
        onClick={() => setOpen((o) => !o)}
        aria-haspopup="menu"
        aria-expanded={open}
        aria-label={BB.t("Darstellung und Sprache")}
        title={BB.t("Darstellung und Sprache")}
      >
        <span aria-hidden="true">◐</span>
        <CountryFlag country={currentLocale.country} />
      </button>
      {open && (
        <div className="appearance-popover" role="menu" aria-label={BB.t("Darstellung und Sprache")}>
          <div className="appearance-tabs" role="tablist">
            {[['theme', 'Theme'], ['accent', 'Akzent'], ['language', 'Sprache']].map(([id, label]) => (
              <button key={id} role="tab" aria-selected={tab === id} onClick={() => setTab(id)}>{BB.t(label)}</button>
            ))}
          </div>
          <div className="appearance-options">
            {tab === "theme" && [['dark', 'Dunkel'], ['light', 'Hell']].map(([id, label]) => (
              <button key={id} aria-pressed={theme === id} onClick={() => { BB.setTheme(id); setTheme(BB.theme); }}><span aria-hidden="true">{id === 'dark' ? '☾' : '☀'}</span>{BB.t(label)}</button>
            ))}
            {tab === "accent" && [['green', 'Grün'], ['pink', 'Pink']].map(([id, label]) => (
              <button key={id} aria-pressed={accent === id} onClick={() => { BB.setAccent(id); setAccent(BB.accent); }}><span className={"appearance-swatch " + id} aria-hidden="true" />{BB.t(label)}</button>
            ))}
            {tab === "language" && Object.entries(BB.LOCALES).map(([code, info]) => (
              <button key={code} role="menuitemradio" aria-checked={code === locale} onClick={() => { setOpen(false); setLocale(code); go(path); }}>
                <CountryFlag country={info.country} />{BB.t(info.label)}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

/* --- header -------------------------------------------------------------- */

function Header() {
  const { path, go } = useRouter();
  const { user, ready, setUser } = useAuth();
  const notify = useToast();
  const [stuck, setStuck] = useState(false);
  const [menu, setMenu] = useState(false);
  const [accountOpen, setAccountOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => { setMenu(false); setAccountOpen(false); }, [path]);
  useEffect(() => {
    document.body.style.overflow = menu ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menu]);
  useEffect(() => {
    const close = (event) => {
      if (!event.target.closest(".account-menu")) setAccountOpen(false);
    };
    const escape = (event) => {
      if (event.key === "Escape") setAccountOpen(false);
    };
    document.addEventListener("pointerdown", close);
    document.addEventListener("keydown", escape);
    return () => {
      document.removeEventListener("pointerdown", close);
      document.removeEventListener("keydown", escape);
    };
  }, []);

  const active = (to) => path === to || path.startsWith(to + "?") || path.startsWith(to + "/");

  async function logout() {
    setAccountOpen(false);
    await BB.post("/auth/logout").catch(() => {});
    setUser(null);
    notify(BB.t("Abgemeldet"));
    go("/");
  }

  return (
    <header className={"hdr" + (path.split("?")[0] === "/" ? " home" : "") + (stuck ? " stuck" : "")}>
      <div className="wrap hdr-in">
        <Link to="/" className="brand">
          <span className="brand-logo">
            <img src="/static/assets/logo-source.png" alt="" aria-hidden="true" />
          </span>
          <span className="brand-txt">
            Bodybuilding Bible
            <small>{BB.t("Wissen & Community")}</small>
          </span>
        </Link>

        <nav className="nav">
          {NAV.map((n) => (
            <Link key={n.to} to={n.to} className={active(n.to) ? "on" : ""}>{BB.t(n.label)}</Link>
          ))}
          {user && (user.role === "admin" || user.role === "mod") && (
            <Link to="/verwaltung" className={active("/verwaltung") ? "on" : ""}>{BB.t("Verwaltung")}</Link>
          )}
        </nav>

        <GlobalSearch />

        <div className="row" style={{ gap: "0.5rem", flex: "none" }}>
          <AppearanceMenu />
          {!ready ? null : user ? (
            <div className={"account-menu" + (accountOpen ? " open" : "")}>
              <button
                type="button"
                className="account-trigger"
                onClick={() => setAccountOpen((open) => !open)}
                aria-haspopup="menu"
                aria-expanded={accountOpen}
                title={BB.t("Mein Profil")}
              >
                <Avatar user={user} />
              </button>
              <div className="account-popover" role="menu" aria-label={BB.t("Konto")}>
                <Link to={"/u/" + user.username} role="menuitem">{BB.t("Mein Profil")}</Link>
                <Link to="/einstellungen" role="menuitem">{BB.t("Einstellungen")}</Link>
                <button type="button" className="danger" role="menuitem" onClick={logout}>{BB.t("Abmelden")}</button>
              </div>
            </div>
          ) : (
            <div className="hdr-auth">
              <Link to="/login" className="btn quiet sm">{BB.t("Einloggen")}</Link>
              <Link to="/registrieren" className="btn primary sm">{BB.t("Profil erstellen")}</Link>
            </div>
          )}
        </div>

        <button
          className={"burger" + (menu ? " on" : "")}
          onClick={() => setMenu((m) => !m)}
          aria-label={BB.t("Menü")}
          aria-expanded={menu}
        >
          <span /><span /><span />
        </button>
      </div>

      {/* **Ausserhalb der Kopfzeile, sonst faellt es nach dem Scrollen zusammen.**
          `.hdr.stuck` traegt `backdrop-filter`, und ein Filter macht das
          Element zum Bezugsrahmen fuer `position: fixed` darin -- dieselbe
          Falle wie beim Vollbild der Molekuelkarte, nur eine Ebene hoeher. Am
          Seitenanfang stand die Klasse noch nicht, weiter unten schon: das
          Menue klappte dann auf die 76 Pixel der Leiste zusammen und war
          unsichtbar. Als Portal an `body` haengt es an keinem Vorfahren mehr. */}
      {menu && ReactDOM.createPortal((
        <div className="mobile-nav">
          <GlobalSearch variant="mobile" onNavigate={() => setMenu(false)} />
          {NAV.map((n) => (
            <Link key={n.to} to={n.to} className={active(n.to) ? "on" : ""}>{n.label}</Link>
          ))}
          {user ? (
            <>
              <Link to={"/u/" + user.username}>{BB.t("Mein Profil")}</Link>
              <Link to="/einstellungen">{BB.t("Einstellungen")}</Link>
              {(user.role === "admin" || user.role === "mod") && <Link to="/verwaltung">{BB.t("Verwaltung")}</Link>}
            </>
          ) : (
            <>
              <Link to="/login">{BB.t("Einloggen")}</Link>
              <Link to="/registrieren">{BB.t("Profil erstellen")}</Link>
            </>
          )}
        </div>
      ), document.body)}
    </header>
  );
}

/* --- footer -------------------------------------------------------------- */

function Footer({ categories }) {
  const tops = BB.children(categories, null).filter((c) => !c.forumOnly).slice(0, 6);
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <Link to="/" className="brand" style={{ marginBottom: "1rem" }}>
              <span className="brand-logo">
                <img src="/static/assets/logo-source.png" alt="" aria-hidden="true" />
              </span>
              <span className="brand-txt">Bodybuilding Bible<small>{BB.t("Wissen & Community")}</small></span>
            </Link>
            <p className="disclaimer">
              {BB.t("Alle Inhalte dienen ausschließlich der Information und Dokumentation und stellen keine medizinische Beratung oder Handlungsempfehlung dar. Der Umgang mit verschreibungspflichtigen Substanzen gehört in ärztliche Hand.")}
            </p>
            {/* Transparenzhinweis nach Artikel 50 der EU-Verordnung 2024/1689.
                Er steht bewusst neben dem medizinischen Hinweis und nicht in
                der Zeile darunter: beides ist eine Aussage darüber, wie die
                Inhalte zu lesen sind. */}
            <p className="disclaimer">
              {BB.t("Die Inhalte dieser Seite werden unter Einsatz von KI-Systemen erstellt.")}{" "}
              <Link to="/impressum#ki">{BB.t("Mehr dazu")}</Link>
            </p>
          </div>
          <div>
            <h4>{BB.t("Wissen")}</h4>
            {tops.map((c) => <Link key={c.id} to={"/wissen?cat=" + c.id}>{c.label}</Link>)}
          </div>
          <div>
            <h4>{BB.t("Community")}</h4>
            {BB.USER_KINDS.map((k) => (
              <Link key={k} to={"/forum?kind=" + k}>{BB.KINDS[k].plural}</Link>
            ))}
          </div>
          <div>
            <h4>{BB.t("Konto")}</h4>
            <Link to="/login">{BB.t("Einloggen")}</Link>
            <Link to="/registrieren">{BB.t("Profil erstellen")}</Link>
            <Link to="/neu">{BB.t("Beitrag schreiben")}</Link>
          </div>
          <div>
            <h4>Service &amp; Recht</h4>
            <Link to="/faq">FAQ</Link>
            <Link to="/impressum">Impressum</Link>
            <Link to="/datenschutz">{BB.t("Datenschutz")}</Link>
            <Link to="/agb">AGB</Link>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Bodybuilding Bible</span>
        </div>
      </div>
    </footer>
  );
}

/* --- noch gesperrte Bereiche --------------------------------------------- */

/* Forum und Registrierung sind waehrend des Aufbaus zu. Die Sperre gilt im
   Server, hier steht nur die Erklaerung: wer den Bereich aufruft, soll wissen
   warum er leer ist, statt in einen 403 zu laufen. */
function GesperrtPage({ title, message }) {
  return (
    <div className="wrap section">
      <Empty
        mark={BB.t("Bald")}
        title={BB.t(title)}
        action={<Link to="/wissen/alle" className="btn primary">{BB.t("Zur Wissensbasis")}</Link>}
      >
        {BB.t(message)}
      </Empty>
    </div>
  );
}

/* --- routing ------------------------------------------------------------- */

function Routes({ categories, stats, onReloadCategories }) {
  const { path } = useRouter();
  const { user } = useAuth();
  const isEditor = !!user && (user.role === "admin" || user.role === "mod");
  const [pathname, search] = path.split("?");
  const params = useMemo(() => new URLSearchParams(search || ""), [search]);
  const seg = pathname.split("/").filter(Boolean);

  /* Sammeltitel für jede Route. Ein einzelner Beitrag meldet seinen eigenen,
     sobald die Daten da sind, und behält dann Vorrang. Wo hier null steht, wartet
     der Titel genau darauf. */
  useEffect(() => {
    const named = {
      wissen: seg[1] && seg[1] !== "alle" ? null : BB.t("Wissensbasis"),
      forum: BB.t("Forum"),
      datenbank: BB.t("Datenbank"),
      uebungen: BB.t("Datenbank"),
      beitrag: null,
      suche: BB.t("Suchergebnisse"),
      auswertung: BB.t("Split-Analyse"),
      molekuelkarte: BB.t("Molekülkarte"),
      neu: BB.t("Beitrag schreiben"),
      bearbeiten: BB.t("Bearbeiten"),
      u: null,
      login: BB.t("Einloggen"),
      registrieren: BB.t("Profil erstellen"),
      danke: BB.t("Danke."),
      "passwort-neu": BB.t("Neues Passwort setzen"),
      faq: "FAQ",
      impressum: "Impressum",
      agb: "AGB",
      einstellungen: BB.t("Einstellungen"),
      verwaltung: ({
        inhalte: "Inhalte · Verwaltung",
        luna: "Luna-Queue · Verwaltung",
        kategorien: "Kategorien · Verwaltung",
        tags: "Tags · Verwaltung",
        matrix: "Matrix · Verwaltung",
        nutzer: "Nutzer · Verwaltung",
        wartung: "Wartung · Verwaltung",
        analytics: "Analytics · Verwaltung",
      })[seg[1]] || BB.t("Verwaltung"),
    };
    const key = seg[0] || "";
    const title = !key ? BB.t("Analysen, Wissen und Molekülkarte") : key in named ? named[key] : BB.t("Diese Seite gibt es nicht");
    BB.setTitle(title, { fallback: true });
  }, [pathname, search]);

  if (pathname === "/") return <Landing categories={categories} stats={stats} />;
  if (seg[0] === "wissen") {
    if (seg[1] === "alle") return <Wissen categories={categories} params={params} />;
    if (seg[1]) return <PostPage slug={decodeURIComponent(seg[1])} categories={categories} onReloadCategories={onReloadCategories} />;
    return (params.get("cat") || params.get("q") || params.get("unread"))
      ? <Wissen categories={categories} params={params} />
      : <KnowledgeLanding categories={categories} stats={stats} />;
  }
  if (seg[0] === "forum") {
    if (!BB.FLAGS.forumEnabled) {
      return <GesperrtPage title="Forum noch nicht freigeschaltet" message={BB.FLAGS.forumClosedMessage} />;
    }
    return <Forum params={params} />;
  }
  if (seg[0] === "datenbank") return <DatenbankPage params={params} />;
  // Alte Lesezeichen bleiben erreichbar und landen direkt im passenden
  // Datenbankbereich. Die öffentliche Navigation zeigt nur noch /datenbank.
  if (seg[0] === "uebungen") return <DatenbankPage params={params} legacy />;
  if (seg[0] === "suche") return <SearchPage params={params} />;
  if (seg[0] === "auswertung") return <AuswertungPage params={params} categories={categories} />;
  if (seg[0] === "molekuelkarte") return <MolekuelkartePage params={params} />;
  if (seg[0] === "beitrag" && seg[1]) {
    if (!BB.FLAGS.forumEnabled) {
      return <GesperrtPage title="Forum noch nicht freigeschaltet" message={BB.FLAGS.forumClosedMessage} />;
    }
    return <PostPage slug={decodeURIComponent(seg[1])} categories={categories} onReloadCategories={onReloadCategories} />;
  }
  if (seg[0] === "neu") {
    // Ohne offenes Forum kann nur die Redaktion in die Wissensbasis schreiben.
    if (!BB.FLAGS.forumEnabled && !isEditor) {
      return <GesperrtPage title="Forum noch nicht freigeschaltet" message={BB.FLAGS.forumClosedMessage} />;
    }
    return <Compose categories={categories} params={params} />;
  }
  if (seg[0] === "bearbeiten" && seg[1]) return <Compose categories={categories} params={params} slug={decodeURIComponent(seg[1])} />;
  if (seg[0] === "u" && seg[1]) return <Profile username={decodeURIComponent(seg[1])} />;
  if (seg[0] === "login") return <AuthForm mode="login" />;
  if (seg[0] === "registrieren") {
    if (!BB.FLAGS.registrationEnabled) {
      return <GesperrtPage title="Registrierung noch nicht freigeschaltet" message={BB.FLAGS.registrationClosedMessage} />;
    }
    return <AuthForm mode="register" />;
  }
  if (seg[0] === "passwort-neu") return <PasswortNeu params={params} />;
  if (seg[0] === "danke") return <ZahlungDanke />;
  if (seg[0] === "faq") return <FAQPage />;
  if (seg[0] === "impressum") return <ImpressumPage />;
  if (seg[0] === "agb") return <AGBPage />;
  if (seg[0] === "datenschutz") return <DatenschutzPage />;
  if (seg[0] === "einstellungen") return <Settings />;
  if (seg[0] === "verwaltung") return <Verwaltung categories={categories} onReload={onReloadCategories} />;

  return (
    <div className="wrap section">
      <Empty mark="404" title={BB.t("Diese Seite gibt es nicht")} action={<Link to="/" className="btn primary">{BB.t("Zur Startseite")}</Link>}>
        {BB.t("Vielleicht hilft die Suche oben weiter.")}
      </Empty>
    </div>
  );
}

/* --- Fehlergrenze --------------------------------------------------------- */

/** React haengt bei einer Ausnahme im Render den gesamten Baum aus. Ohne diese
    Grenze wird aus einem Fehler in einer Ansicht eine schwarze Seite, und zwar
    ohne jeden Hinweis darauf, was los ist.

    Der haeufigste Fall in diesem Aufbau ohne Build-Schritt: eine offene Seite
    stammt von vor einer Aenderung und kennt eine neu hinzugekommene .jsx-Datei
    nicht. Dann ist die Komponente schlicht nicht definiert. Das faengt der
    Boundary ab und sagt genau das. */
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  static getDerivedStateFromError(error) {
    return { error };
  }

  componentDidCatch(error, info) {
    console.error("Fehler in der Ansicht:", error, info && info.componentStack);
  }

  componentDidUpdate(prev) {
    // Beim Wechsel der Route neu versuchen, sonst bleibt die Meldung kleben.
    if (prev.resetKey !== this.props.resetKey && this.state.error) {
      this.setState({ error: null });
    }
  }

  render() {
    const err = this.state.error;
    if (!err) return this.props.children;

    const meldung = String(err.message || err);
    const fehlt = (meldung.match(/^(\w+) is not defined/) || [])[1];
    const bausteine = eingebundeneBausteine();

    // Fehlt ein Bezeichner, gibt es genau zwei Ursachen, und sie fuehren zu
    // verschiedenen Schritten. Die Unterscheidung steht hier, damit sie nicht
    // erst in der Browser-Konsole gesucht werden muss.
    let hinweis = BB.t("Beim Aufbau ist ein Fehler aufgetreten. Die Einzelheiten stehen in der Konsole des Browsers.");
    if (fehlt) {
      const datei = bausteineFuer(fehlt, bausteine);
      hinweis = datei
        ? BB.t("Die Datei ist eingebunden, wurde aber nicht ausgeführt. Das ist ein Fehler im Browser, nicht auf dem Server. Bitte die Konsole öffnen, dort steht die Ursache.")
        : BB.t("Die geöffnete Seite stammt von vor der letzten Änderung. Ein Neuladen mit Strg+F5 behebt das.");
    }

    return (
      <div className="wrap section">
        <div className="empty">
          <div className="mark">!</div>
          <h3>{BB.t("Diese Ansicht konnte nicht geladen werden")}</h3>
          <p>{hinweis}</p>
          <p className="mono s" style={{ color: "var(--fg-4)" }}>{meldung}</p>
          <p className="mono s" style={{ color: "var(--fg-4)", maxWidth: "44rem", lineHeight: 1.7 }}>
            {BB.t("Eingebunden")}: {bausteine.join(", ") || "-"}
          </p>
          <button className="btn primary" onClick={() => window.location.reload()}>
            {BB.t("Neu laden")}
          </button>
        </div>
      </div>
    );
  }
}

/** Welche .jsx-Dateien stehen als Babel-Skript in der Seite? */
function eingebundeneBausteine() {
  try {
    return Array.from(document.querySelectorAll('script[type="text/babel"]'))
      .map((s) => (s.getAttribute("src") || "inline").split("/").pop());
  } catch (e) {
    return [];
  }
}

/** Ist die Datei eingebunden, in der der fehlende Bezeichner stehen müsste? */
function bausteineFuer(name, bausteine) {
  const datei = name.replace(/Page$/, "").toLowerCase() + ".jsx";
  return bausteine.find((b) => b.toLowerCase() === datei) || null;
}

/** Fades the main region on every route change, cheap continuity between views. */
function PageTransition({ children }) {
  const { path } = useRouter();
  const ref = useRef(null);
  const key = path.split("?")[0];

  useEffect(() => {
    const el = ref.current;
    if (!el || BB.reducedMotion() || typeof anime === "undefined") return;
    anime.remove(el);
    anime({ targets: el, opacity: [0, 1], translateY: [8, 0], duration: 420, easing: "easeOutQuad" });
  }, [key]);

  return <main ref={ref}>{children}</main>;
}

/* --- root ---------------------------------------------------------------- */

function Shell() {
  const { path } = useRouter();
  const [categories, setCategories] = useState([]);
  const [stats, setStats] = useState({ wiki: 0, community: 0, members: 0, categories: 0, comments: 0 });

  const reloadCategories = useCallback(
    () => BB.get("/categories").then(setCategories).catch(() => {}),
    []
  );

  useEffect(() => {
    reloadCategories();
    BB.get("/stats").then(setStats).catch(() => {});
  }, [reloadCategories]);

  return (
    <>
      <Header />
      <PageTransition>
        <ErrorBoundary resetKey={path.split("?")[0]}>
          <Routes categories={categories} stats={stats} onReloadCategories={reloadCategories} />
        </ErrorBoundary>
      </PageTransition>
      <Footer categories={categories} />
      <ConsentLayer />
    </>
  );
}

function App() {
  const [user, setUser] = useState(null);
  const [ready, setReady] = useState(false);
  const [locale, setLocaleState] = useState(BB.localeKey);
  const [textsReady, setTextsReady] = useState(false);
  const lang = (BB.LOCALES[locale] || BB.LOCALES[BB.DEFAULT_LOCALE]).lang;

  useEffect(() => {
    BB.get("/me")
      .then(setUser)
      .catch(() => setUser(null))
      .finally(() => setReady(true));
  }, []);

  // Oberflächentexte holen, bevor gerendert wird, sonst blitzt Deutsch auf
  useEffect(() => {
    let alive = true;
    setTextsReady(false);
    BB.loadUiStrings(lang, BB.UI_STRINGS).finally(() => { if (alive) setTextsReady(true); });
    return () => { alive = false; };
  }, [lang]);

  const setLocale = useCallback((next) => {
    const key = BB.setLocale(next);
    setLocaleState(key);
  }, []);

  return (
    <RouterProvider>
      <AuthCtx.Provider value={{ user, setUser, ready }}>
        <LangCtx.Provider value={{ lang, locale, setLocale }}>
          <ToastHost>
            {/* key erzwingt einen Neuaufbau, damit alle Daten in der neuen Sprache kommen */}
            {textsReady
              ? <Shell key={locale} />
              : <div className="boot"><div className="boot-mark">BB</div></div>}
          </ToastHost>
        </LangCtx.Provider>
      </AuthCtx.Provider>
    </RouterProvider>
  );
}

// ErrorBoundary wird nur hier gebraucht. Eine `class` ist wie `const`
// dateilokal, der Export macht sie trotzdem von aussen pruefbar.
Object.assign(window, { App, Header, Footer, Routes, ErrorBoundary });