/* ==========================================================================
   ADMIN: Inhalte, Nutzer, Kategorien und Tags. Nutzerkonten nur für Admins.
   ========================================================================== */

const BLANK_CAT = {
  label: "", parentId: "", sort: 0, isGroup: false, isSubst: false,
  tag: "", schema: "", blurb: "", image: "",
};

function catPath(cats, id) {
  return BB.ancestors(cats, id).map((a) => a.label).concat(
    (BB.catById(cats, id) || {}).label || ""
  ).join(" → ");
}

function topCatId(cats, id) {
  const byId = Object.fromEntries(cats.map((cat) => [cat.id, cat]));
  let current = id;
  const seen = new Set();
  while (current && byId[current] && !seen.has(current)) {
    seen.add(current);
    if (!byId[current].parentId) return current;
    current = byId[current].parentId;
  }
  return id || "";
}

/** Flat, indented picker over the whole tree. */
function CatSelect({ cats, value, onChange, exclude = [], allowEmpty = "keine (oberste Ebene)" }) {
  const options = useMemo(() => {
    const out = [];
    const walk = (parentId, depth) => {
      BB.children(cats, parentId).forEach((c) => {
        if (!exclude.includes(c.id)) {
          out.push({ id: c.id, label: " ".repeat(depth * 3) + c.label });
          walk(c.id, depth + 1);
        }
      });
    };
    walk(null, 0);
    return out;
  }, [cats, exclude.join(",")]);

  return (
    <select className="input" value={value || ""} onChange={(e) => onChange(e.target.value)}>
      {allowEmpty !== false && <option value="">{allowEmpty}</option>}
      {options.map((o) => <option key={o.id} value={o.id}>{o.label}</option>)}
    </select>
  );
}

/* --- Kategorien ---------------------------------------------------------- */

function CategoryRow({ cat, cats, depth, selected, onSelect }) {
  const kids = BB.children(cats, cat.id);
  return (
    <>
      <button
        className={"tree-item" + (selected === cat.id ? " on" : "") + (depth === 0 ? " tree-top" : "")}
        style={{ paddingLeft: 8 + depth * 16 }}
        onClick={() => onSelect(cat.id)}
      >
        <span className="grow" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
          {cat.label}
        </span>
        {cat.isGroup && <span className="n">Gruppe</span>}
        <span className="n">{cat.count}</span>
      </button>
      {kids.map((k) => (
        <CategoryRow key={k.id} cat={k} cats={cats} depth={depth + 1} selected={selected} onSelect={onSelect} />
      ))}
    </>
  );
}

function CategoryEditor({ cats, onReload }) {
  const notify = useToast();
  const [selected, setSelected] = useState(null);
  const [form, setForm] = useState(BLANK_CAT);
  const [creating, setCreating] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [reassign, setReassign] = useState("");

  const current = selected ? BB.catById(cats, selected) : null;

  useEffect(() => {
    if (!current) return;
    setForm({
      label: current.label, parentId: current.parentId || "", sort: current.sort,
      isGroup: current.isGroup, isSubst: current.isSubst, tag: current.tag || "",
      schema: current.schema || "", blurb: current.blurb || "", image: current.image || "",
    });
    setCreating(false);
    setError("");
    setReassign("");
  }, [selected, current && current.label]);

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  function startCreate() {
    setSelected(null);
    setCreating(true);
    setForm({ ...BLANK_CAT, parentId: "" });
    setError("");
  }

  async function save(e) {
    e.preventDefault();
    setBusy(true);
    setError("");
    const payload = { ...form, sort: Number(form.sort) || 0, parentId: form.parentId || null };
    try {
      if (creating) {
        const r = await BB.post("/admin/categories", payload);
        notify(`Kategorie „${form.label}“ angelegt`);
        await onReload();
        setCreating(false);
        setSelected(r.id);
      } else {
        await BB.patch("/admin/categories/" + selected, payload);
        notify("Kategorie gespeichert");
        await onReload();
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setBusy(false);
    }
  }

  async function remove() {
    if (!current) return;
    const hasContent = current.count > 0 || BB.children(cats, current.id).length > 0;
    if (hasContent && !reassign) {
      setError("Diese Kategorie ist nicht leer. Wähle unten ein Ziel zum Verschieben.");
      return;
    }
    if (!confirm(`„${current.label}“ wirklich löschen?`)) return;
    setBusy(true);
    setError("");
    try {
      await BB.del("/admin/categories/" + current.id + (reassign ? "?reassign=" + encodeURIComponent(reassign) : ""));
      notify(`„${current.label}“ gelöscht`);
      setSelected(null);
      await onReload();
    } catch (err) {
      setError(err.message);
    } finally {
      setBusy(false);
    }
  }

  const editing = creating || !!current;

  return (
    <div className="browse admin-category-editor">
      <aside>
        <div className="spread" style={{ marginBottom: "0.75rem" }}>
          <span className="label">{cats.length} Kategorien</span>
          <button className="btn primary sm" onClick={startCreate}>+ Neu</button>
        </div>
        <nav className="tree">
          {BB.children(cats, null).map((c) => (
            <CategoryRow key={c.id} cat={c} cats={cats} depth={0} selected={selected} onSelect={setSelected} />
          ))}
        </nav>
      </aside>

      <div>
        {!editing ? (
          <Empty mark="◧" title="Nichts ausgewählt">
            Wähle links eine Kategorie zum Bearbeiten oder lege eine neue an.
          </Empty>
        ) : (
          <form className="panel stack" style={{ gap: "1.25rem" }} onSubmit={save}>
            <div className="spread">
              <h3 style={{ fontSize: "var(--fs-h3)" }}>
                {creating ? "Neue Kategorie" : current.label}
              </h3>
              {!creating && <span className="mono dim" style={{ fontSize: "var(--fs-xs)" }}>{current.id}</span>}
            </div>

            <Field label="Name">
              <input className="input" value={form.label} onChange={(e) => set("label", e.target.value)} maxLength={80} required />
            </Field>

            <div className="row" style={{ gap: "1rem", flexWrap: "wrap", alignItems: "flex-start" }}>
              <Field label="Übergeordnet">
                <CatSelect
                  cats={cats}
                  value={form.parentId}
                  onChange={(v) => set("parentId", v)}
                  exclude={creating ? [] : [selected]}
                />
              </Field>
              <Field label="Reihenfolge" hint="Kleinere Zahl steht weiter oben.">
                <input className="input" type="number" value={form.sort} onChange={(e) => set("sort", e.target.value)} />
              </Field>
            </div>

            <Field label="Beschreibung" hint="Erscheint auf der Kategorieseite und auf der Startseite.">
              <input className="input" value={form.blurb} onChange={(e) => set("blurb", e.target.value)} maxLength={300} />
            </Field>

            <Field label="Bild-URL" hint="Nur oberste Ebene wird als Kachel auf der Startseite gezeigt.">
              <input className="input" value={form.image} onChange={(e) => set("image", e.target.value)} placeholder="https://images.unsplash.com/…" />
            </Field>

            <div className="row" style={{ gap: "1rem", flexWrap: "wrap", alignItems: "flex-start" }}>
              <Field label="Kennzahlen-Schema" hint="Bestimmt die Balken im Steckbrief.">
                <select className="input" value={form.schema} onChange={(e) => set("schema", e.target.value)}>
                  <option value="">keines</option>
                  {Object.keys(BB.SCHEMAS).map((s) => <option key={s} value={s}>{s}</option>)}
                </select>
              </Field>
              <Field label="Standard-Tag">
                <input className="input" value={form.tag} onChange={(e) => set("tag", e.target.value)} maxLength={30} />
              </Field>
            </div>

            <div className="row" style={{ gap: "1.5rem", flexWrap: "wrap" }}>
              <label className="row" style={{ gap: "0.5rem", cursor: "pointer", fontSize: "var(--fs-sm)" }}>
                <input type="checkbox" checked={form.isGroup} onChange={(e) => set("isGroup", e.target.checked)} />
                Gruppe (nimmt selbst keine Beiträge auf)
              </label>
              <label className="row" style={{ gap: "0.5rem", cursor: "pointer", fontSize: "var(--fs-sm)" }}>
                <input type="checkbox" checked={form.isSubst} onChange={(e) => set("isSubst", e.target.checked)} />
                Substanz-Kategorie
              </label>
            </div>

            {error && <div className="err">⚠ {error}</div>}

            <div className="row" style={{ gap: "0.75rem", flexWrap: "wrap", paddingTop: "0.5rem", borderTop: "1px solid var(--line)" }}>
              <button className="btn primary" disabled={busy}>
                {busy ? "Speichert …" : creating ? "Anlegen" : "Speichern"}
              </button>
              <button type="button" className="btn quiet" onClick={() => { setCreating(false); setSelected(null); }}>
                Abbrechen
              </button>
            </div>

            {!creating && (
              <div className="stack" style={{ gap: "0.75rem", paddingTop: "1rem", borderTop: "1px solid var(--line)" }}>
                <span className="label">Löschen</span>
                {(current.count > 0 || BB.children(cats, current.id).length > 0) && (
                  <Field label="Inhalte verschieben nach" hint={`${current.count} Beiträge, ${BB.children(cats, current.id).length} Unterkategorien`}>
                    <CatSelect cats={cats} value={reassign} onChange={setReassign} exclude={[current.id]} allowEmpty="bitte wählen" />
                  </Field>
                )}
                <button type="button" className="btn ghost danger" onClick={remove} disabled={busy} style={{ alignSelf: "flex-start" }}>
                  Kategorie löschen
                </button>
              </div>
            )}
          </form>
        )}
      </div>
    </div>
  );
}

/* --- Tags ---------------------------------------------------------------- */

function TagEditor() {
  const notify = useToast();
  const [tags, setTags] = useState(null);
  const [editing, setEditing] = useState(null);
  const [draft, setDraft] = useState("");
  const [busy, setBusy] = useState(false);
  const [filter, setFilter] = useState("");

  const load = useCallback(() => {
    BB.get("/tags?limit=500").then(setTags).catch(() => setTags([]));
  }, []);
  useEffect(() => { load(); }, [load]);

  async function rename(tag) {
    if (!draft.trim() || draft.trim() === tag) { setEditing(null); return; }
    setBusy(true);
    try {
      const r = await BB.post("/admin/tags/rename", { old: tag, new: draft });
      notify(r.merged ? `Zusammengeführt, ${r.merged} Doppelung(en) entfernt` : "Tag umbenannt");
      setEditing(null);
      load();
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy(false);
    }
  }

  async function remove(tag, count) {
    if (!confirm(`Tag „${tag}“ von ${count} Beiträgen entfernen?`)) return;
    setBusy(true);
    try {
      const r = await BB.del("/admin/tags/" + encodeURIComponent(tag));
      notify(`„${tag}“ von ${r.removedFrom} Beiträgen entfernt`);
      load();
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy(false);
    }
  }

  if (tags === null) return <Spinner />;

  const shown = filter
    ? tags.filter((t) => t.tag.includes(filter.toLowerCase()))
    : tags;

  return (
    <div className="stack" style={{ gap: "1.5rem" }}>
      <div className="spread" style={{ flexWrap: "wrap", gap: "1rem" }}>
        <span className="label">{tags.length} Tags</span>
        <form className="hdr-search" style={{ display: "block", maxWidth: 260, margin: 0 }} onSubmit={(e) => e.preventDefault()}>
          <span className="ico">⌕</span>
          <input value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="Tag suchen …" aria-label="Tags filtern" />
        </form>
      </div>

      <p className="dim" style={{ fontSize: "var(--fs-sm)" }}>
        Beim Umbenennen auf einen bereits vorhandenen Namen werden beide Tags zusammengeführt.
      </p>

      <div style={{ borderTop: "1px solid var(--line)" }}>
        {shown.map((t) => (
          <div key={t.tag} className="prow" style={{ gridTemplateColumns: "1fr auto", paddingBlock: "0.75rem" }}>
            {editing === t.tag ? (
              <input
                className="input"
                autoFocus
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter") { e.preventDefault(); rename(t.tag); }
                  if (e.key === "Escape") setEditing(null);
                }}
                style={{ maxWidth: 280 }}
              />
            ) : (
              <div className="row" style={{ gap: "0.75rem" }}>
                <span className="pill tag">{t.tag}</span>
                <span className="mono dim" style={{ fontSize: "var(--fs-xs)" }}>{t.count} Beiträge</span>
              </div>
            )}
            <div className="row" style={{ gap: "0.5rem" }}>
              {editing === t.tag ? (
                <>
                  <button className="btn primary sm" onClick={() => rename(t.tag)} disabled={busy}>Übernehmen</button>
                  <button className="btn quiet sm" onClick={() => setEditing(null)}>Abbrechen</button>
                </>
              ) : (
                <>
                  <button className="btn ghost sm" onClick={() => { setEditing(t.tag); setDraft(t.tag); }}>Umbenennen</button>
                  <button className="btn quiet sm" style={{ color: "var(--danger)" }} onClick={() => remove(t.tag, t.count)}>Entfernen</button>
                </>
              )}
            </div>
          </div>
        ))}
        {shown.length === 0 && <Empty mark="#" title="Kein Tag gefunden" />}
      </div>
    </div>
  );
}

/* --- Inhalte: schreiben und markieren ------------------------------------ */

const PAGE_ADMIN = 60;

const REVIEW_FILTERS = [
  { value: "", label: "Alle" },
  { value: "revise", label: "Überarbeiten" },
  { value: "none", label: "Ungeprüft" },
  { value: "ok", label: "Aktuell" },
];

const LUNA_PROVIDERS = {
  codex: "Codex mit ChatGPT-Anmeldung",
  api: "OpenAI API-Guthaben",
};


const LUNA_WORKFLOWS = {
  luna: {
    label: "Luna: Allgemeiner Wissensartikel",
    hint: "Flexible Erklärung nach dem aktuellen Luna-Standard.",
  },
  scientific: {
    label: "Wissenschaftlicher Autorenworkflow",
    hint: "docs/ARTIKEL.md mit PubMed-Evidenzpaket, Quellenprüfung und Audit.",
  },
  /* Fasst den Artikel nicht an: liest die zitierten Arbeiten und trägt ihre
     Merkmale in die Evidenzmatrix nach. Der Text, die Prüfmarkierung und
     db_articles.json bleiben unberührt. */
  evidenz: {
    label: "Evidenzmatrix nacharbeiten",
    hint: "Liest die zitierten Arbeiten und trägt ihre Merkmale nach. Der Artikeltext bleibt unberührt.",
  },
};

const LUNA_STATUSES = {
  queued: "Wartet",
  running: "Läuft",
  completed: "Abgeschlossen",
  failed: "Fehlgeschlagen",
};

const LUNA_PHASES = {
  queued: "Eingereiht",
  preparing: "Vorbereitung",
  research: "Recherche",
  "source-check": "Quellenprüfung",
  "source-selection": "Quellenauswahl",
  evidence: "Evidenzmatrix",
  draft: "Entwurf",
  audit: "Audit",
  revision: "Überarbeitung",
  validation: "Schlussprüfung",
  repair: "Formale Korrektur",
  apply: "Übernahme",
  completed: "Abgeschlossen",
  failed: "Fehlgeschlagen",
  cancelled: "Abgebrochen",
};

/** Eine Zeile der Inhaltsübersicht: Markierung setzen, Notiz schreiben. */
function ContentRow({ item, cats, onMark, allowLuna = false, activeJob = null,
                      defaultProvider = "codex", apiAvailable = false, onQueued }) {
  const notify = useToast();
  const [editing, setEditing] = useState(false);
  const [handoff, setHandoff] = useState(false);
  const [note, setNote] = useState(item.reviewNote || "");
  const [instruction, setInstruction] = useState(item.reviewNote || "");
  const [provider, setProvider] = useState(defaultProvider);
  const [workflow, setWorkflow] = useState("luna");
  const [busy, setBusy] = useState(false);
  const cat = BB.catById(cats, item.categoryId);
  const sensitiveRoot = ["stoffe", "kontext", "gesundheit"].includes(
    topCatId(cats, item.categoryId)
  );
  const isWiki = BB.collectionOf(item) === "wiki";

  useEffect(() => { setNote(item.reviewNote || ""); }, [item.reviewNote]);
  useEffect(() => {
    if (!handoff) setInstruction(item.reviewNote || "");
  }, [item.reviewNote, handoff]);
  useEffect(() => {
    if (!handoff) setProvider(
      defaultProvider === "api" && !apiAvailable ? "codex" : (defaultProvider || "codex")
    );
  }, [defaultProvider, apiAvailable, handoff]);

  async function mark(next, keepNote) {
    setBusy(true);
    try {
      const r = await BB.post("/admin/posts/" + item.id + "/review", {
        review: next,
        note: keepNote === undefined ? note : keepNote,
      });
      onMark(item.id, r);
      setEditing(false);
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy(false);
    }
  }

  async function enqueue() {
    setBusy(true);
    try {
      const job = await BB.post("/admin/luna-queue", {
        postId: item.id,
        provider,
        workflow,
        instruction: instruction.trim(),
      });
      if (onQueued) onQueued(job);
      setHandoff(false);
      notify(`„${item.title}“ ist in der Luna-Queue`);
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy(false);
    }
  }

  const href = BB.postHref(item);

  return (
    <div className={"crow" + (item.review ? " r-" + item.review : "")}>
      <div className="crow-main">
        <div className="row" style={{ gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
          <KindBadge kind={item.kind} />
          <Link to={href} className="crow-title">{item.title}</Link>
          {item.status === "draft" && <span className="pill">Entwurf</span>}
          {item.figTodo && <span className="pill" title="Im Text steht mindestens ein Bildplatzhalter">◫ Bild fehlt</span>}
          {item.graphicTodo && <span className="pill" title="Im Text steht ein Briefing für eine noch zu erstellende SVG-Grafik">⌁ Grafik fehlt</span>}
        </div>
        <div className="crow-meta mono">
          {(BB.COLLECTIONS[BB.collectionOf(item)] || BB.COLLECTIONS.forum).label} ·{" "}
          {cat ? cat.label : "ohne Kategorie"} · {item.author}
          {item.reviewBy ? " · markiert von " + item.reviewBy : ""}
          {item.reviewAt ? " · " + BB.when(item.reviewAt) : ""}
        </div>
        {!editing && item.reviewNote && <p className="review-note">{item.reviewNote}</p>}
        {editing && (
          <div className="stack" style={{ gap: "0.5rem", marginTop: "0.6rem" }}>
            <textarea
              className="textarea"
              style={{ minHeight: 70 }}
              value={note}
              maxLength={600}
              autoFocus
              onChange={(e) => setNote(e.target.value)}
              placeholder="Was ist zu tun?"
            />
            <div className="row" style={{ gap: "0.5rem" }}>
              <button className="btn primary sm" disabled={busy} onClick={() => mark(item.review || "revise")}>
                Speichern
              </button>
              <button className="btn quiet sm" onClick={() => { setNote(item.reviewNote || ""); setEditing(false); }}>
                Abbrechen
              </button>
            </div>
          </div>
        )}
        {handoff && (
          <div className="luna-handoff">
            {sensitiveRoot && (
              <p className="luna-warning">
                Pharmakologie, Wissenschaft sowie Gesundheit und Monitoring sind normalerweise
                für den Flaggschiff-Workflow vorgesehen. Die Übergabe bleibt bewusst möglich.
              </p>
            )}
            <div className="luna-handoff-fields">
              <Field
                label="Workflow"
                hint={(LUNA_WORKFLOWS[workflow] || LUNA_WORKFLOWS.luna).hint}
              >
                <select className="input" value={workflow} onChange={(e) => setWorkflow(e.target.value)}>
                  {Object.entries(LUNA_WORKFLOWS).map(([value, option]) => (
                    <option key={value} value={value}>{option.label}</option>
                  ))}
                </select>
              </Field>
              <Field label="Ausführungsweg">
                <select className="input" value={provider} onChange={(e) => setProvider(e.target.value)}>
                  {Object.entries(LUNA_PROVIDERS).map(([value, label]) => (
                    <option key={value} value={value} disabled={value === "api" && !apiAvailable}>
                      {label}{value === "api" && !apiAvailable ? " (nicht konfiguriert)" : ""}
                    </option>
                  ))}
                </select>
              </Field>
              <Field label="Zusatzauftrag" hint="Optional. Die Überarbeiten-Notiz wurde als Ausgangspunkt übernommen.">
                <textarea
                  className="textarea"
                  value={instruction}
                  maxLength={2000}
                  onChange={(e) => setInstruction(e.target.value)}
                  placeholder="Was soll Luna besonders prüfen oder ändern?"
                />
              </Field>
            </div>
            <div className="row" style={{ gap: "0.5rem", flexWrap: "wrap" }}>
              <button className="btn primary sm" disabled={busy} onClick={enqueue}>
                {busy ? "Reihe ein …" : "In die Queue"}
              </button>
              <button className="btn quiet sm" disabled={busy} onClick={() => setHandoff(false)}>
                Abbrechen
              </button>
            </div>
          </div>
        )}
      </div>

      <div className="crow-actions">
        {Object.entries(BB.REVIEWS).map(([key, r]) => (
          <button
            key={key}
            className={"pill" + (item.review === key ? " on" : "")}
            disabled={busy}
            title={r.hint}
            onClick={() => mark(item.review === key ? "" : key)}
          >
            {r.mark} {r.label}
          </button>
        ))}
        <button className="btn quiet sm" onClick={() => setEditing((e) => !e)}>
          {item.reviewNote ? "Notiz ✎" : "Notiz +"}
        </button>
        {allowLuna && isWiki && (activeJob ? (
          <span className={"pill luna-state s-" + activeJob.status} title={activeJob.detail || "Luna-Queue"}>
            {activeJob.status === "running"
              ? `Luna ${activeJob.progress}%`
              : `Luna wartet${activeJob.queuePosition ? " #" + activeJob.queuePosition : ""}`}
          </span>
        ) : (
          <button className="btn ghost sm" disabled={busy} onClick={() => setHandoff((open) => !open)}>
            An Luna
          </button>
        ))}
        <Link to={"/bearbeiten/" + item.slug} className="btn ghost sm">Bearbeiten</Link>
      </div>
    </div>
  );
}

function ContentEditor({ cats, allowLuna = false }) {
  // "Alle" zeigt schon die richtige Reihenfolge: erst Überarbeiten, dann
  // Ungeprüftes, zuletzt das Erledigte.
  const [review, setReview] = useState("");
  const [kind, setKind] = useState("");
  const [collection, setCollection] = useState("");
  const [category, setCategory] = useState("");
  const [figs, setFigs] = useState("");
  const [graphics, setGraphics] = useState("");
  const [status, setStatus] = useState("");
  const [q, setQ] = useState("");
  const [draft, setDraft] = useState("");
  const [data, setData] = useState(null);
  const [authors, setAuthors] = useState([]);
  const [as, setAs] = useState("bible");
  const [loading, setLoading] = useState(true);
  const [lunaData, setLunaData] = useState({
    settings: { defaultProvider: "codex" }, items: [],
  });

  useEffect(() => {
    BB.get("/admin/authors").then(setAuthors).catch(() => setAuthors([]));
  }, []);

  useEffect(() => {
    if (!allowLuna) return undefined;
    let alive = true;
    const loadQueue = () => BB.get("/admin/luna-queue?activeOnly=true&limit=250")
      .then((result) => { if (alive) setLunaData(result); })
      .catch(() => {});
    loadQueue();
    const timer = setInterval(loadQueue, 5000);
    return () => { alive = false; clearInterval(timer); };
  }, [allowLuna]);

  const [offset, setOffset] = useState(0);

  useEffect(() => { setOffset(0); }, [review, kind, collection, category, figs, graphics, status, q]);

  useEffect(() => {
    let alive = true;
    setLoading(true);
    BB.get("/admin/posts" + BB.qs({ review, kind, collection, category, figs, graphics, status, q, limit: PAGE_ADMIN, offset }))
      .then((d) => {
        if (!alive) return;
        // beim Nachladen anhängen, sonst springt die Liste an den Anfang zurück
        setData((prev) => (offset && prev ? { ...d, items: prev.items.concat(d.items) } : d));
        setLoading(false);
      })
      .catch(() => { if (alive) { setData({ items: [], total: 0, counts: {} }); setLoading(false); } });
    return () => { alive = false; };
  }, [review, kind, collection, category, figs, graphics, status, q, offset]);

  // die Zeile bleibt nach dem Markieren stehen, damit die Liste nicht springt
  const onMark = (id, patch) =>
    setData((d) => ({ ...d, items: d.items.map((i) => (i.id === id ? { ...i, ...patch } : i)) }));

  const counts = (data && data.counts) || {};
  const activeJobs = useMemo(
    () => Object.fromEntries((lunaData.items || []).map((job) => [job.postId, job])),
    [lunaData.items]
  );
  const onQueued = (job) => setLunaData((current) => ({
    ...current,
    items: [job].concat((current.items || []).filter((entry) => entry.id !== job.id)),
  }));

  return (
    <div className="stack" style={{ gap: "1.5rem" }}>
      <div className="panel">
        <div className="row" style={{ gap: "1.25rem", flexWrap: "wrap", alignItems: "flex-end" }}>
          <Field label="Neuer Beitrag im Namen von" hint="Etwa ein Rezept, das unter der Redaktion laufen soll.">
            <select className="input" value={as} onChange={(e) => setAs(e.target.value)}>
              {authors.map((a) => (
                <option key={a.username} value={a.username}>{a.displayName} (@{a.username})</option>
              ))}
            </select>
          </Field>
          {/* Vom Arbeitstisch der Redaktion aus wird für die Wissensbasis
              geschrieben, deshalb steht der Editor gleich auf ?in=wiki. */}
          <div className="row" style={{ gap: "0.5rem", flexWrap: "wrap", flex: "none" }}>
            {["recipe", "article", "wiki"].map((k) => (
              <Link
                key={k}
                to={"/neu?as=" + encodeURIComponent(as) + "&in=wiki&kind=" + k}
                className={"btn " + (k === "recipe" ? "primary" : "ghost")}
              >
                + {BB.KINDS[k].label}
              </Link>
            ))}
          </div>
        </div>
      </div>

      <div className="spread" style={{ flexWrap: "wrap", gap: "1rem" }}>
        <Segmented
          value={review}
          onChange={setReview}
          options={REVIEW_FILTERS.map((f) => ({
            value: f.value,
            label: f.value && counts[f.value] !== undefined ? `${f.label} (${counts[f.value]})` : f.label,
          }))}
        />
        <div className="row" style={{ gap: "0.75rem", flex: "none", flexWrap: "wrap" }}>
          {/* Eigene Marke neben dem Redaktionsstand, weil beides unabhängig ist:
              ein Beitrag kann aktuell sein und trotzdem auf ein Bild warten. */}
          <button
            className={"pill" + (figs ? " on" : "")}
            title="Beiträge, in deren Text ein Bildplatzhalter steht"
            onClick={() => setFigs(figs ? "" : "todo")}
          >
            ◫ Bild fehlt{counts.figs ? " (" + BB.num(counts.figs) + ")" : ""}
          </button>
          <button
            className={"pill" + (graphics ? " on" : "")}
            title="Beiträge mit einem Briefing für eine noch zu erstellende SVG-Grafik"
            onClick={() => setGraphics(graphics ? "" : "todo")}
          >
            ⌁ Grafik fehlt{counts.graphics ? " (" + BB.num(counts.graphics) + ")" : ""}
          </button>
          <button
            className={"pill" + (status === "draft" ? " on" : "")}
            title="Nur noch nicht veröffentlichte Beiträge anzeigen"
            onClick={() => setStatus(status === "draft" ? "" : "draft")}
          >
            ✎ Entwürfe{counts.draft ? " (" + BB.num(counts.draft) + ")" : ""}
          </button>
          <form
            className="hdr-search"
            style={{ display: "block", maxWidth: 260, margin: 0 }}
            onSubmit={(e) => { e.preventDefault(); setQ(draft.trim()); }}
          >
            <span className="ico">⌕</span>
            <input value={draft} onChange={(e) => setDraft(e.target.value)}
                   placeholder="Titel oder Notiz …" aria-label="Beiträge filtern" />
          </form>
        </div>
      </div>

      <div className="row" style={{ gap: "1rem", flexWrap: "wrap", alignItems: "flex-start" }}>
        <Field label="Erscheint in">
          <select className="input" value={collection} onChange={(e) => setCollection(e.target.value)}>
            <option value="">Wissensbasis und Forum</option>
            {Object.entries(BB.COLLECTIONS).map(([v, c]) => <option key={v} value={v}>{c.label}</option>)}
          </select>
        </Field>
        <Field label="Art">
          <select className="input" value={kind} onChange={(e) => setKind(e.target.value)}>
            <option value="">alle Arten</option>
            <option value="wiki">Wissensartikel</option>
            {BB.USER_KINDS.map((k) => <option key={k} value={k}>{BB.KINDS[k].plural}</option>)}
          </select>
        </Field>
        <Field label="Kategorie">
          <CatSelect cats={cats} value={category} onChange={setCategory} allowEmpty="alle Kategorien" />
        </Field>
      </div>

      {loading && !data ? (
        <Spinner />
      ) : !data.items.length ? (
        <Empty mark="◧" title="Kein Beitrag in dieser Auswahl" />
      ) : (
        <>
          <span className="label">
            {BB.num(data.items.length)} von {BB.num(data.total)} Beiträgen
          </span>
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {data.items.map((item) => (
              <ContentRow
                key={item.id}
                item={item}
                cats={cats}
                onMark={onMark}
                allowLuna={allowLuna}
                activeJob={activeJobs[item.id] || null}
                defaultProvider={(lunaData.settings || {}).defaultProvider || "codex"}
                apiAvailable={!!((lunaData.settings || {}).capabilities || {}).apiKeyFile}
                onQueued={onQueued}
              />
            ))}
          </div>
          {data.items.length < data.total && (
            <div style={{ textAlign: "center", marginTop: "1.5rem" }}>
              <button className="btn ghost" disabled={loading}
                      onClick={() => setOffset((o) => o + PAGE_ADMIN)}>
                {loading ? "Lädt …" : "Mehr laden"}
              </button>
            </div>
          )}
        </>
      )}
    </div>
  );
}

/* --- Redaktion ------------------------------------------------------------
   Drei Flächen unter einem Tab: die Queue, die Modellwahl je Workflow und die
   Standards, nach denen die Workflows schreiben. Modell und Standard gelten
   ab dem nächsten Auftrag; ein laufender hat beides beim Start festgehalten. */

const REDAKTION_FLAECHEN = [
  ["queue", "Queue"],
  ["modelle", "Modelle"],
  ["standards", "Standards"],
];

function RedaktionEditor() {
  const [flaeche, setFlaeche] = useState("queue");
  return (
    <div className="stack">
      <div className="seg" role="tablist" aria-label="Redaktion">
        {REDAKTION_FLAECHEN.map(([id, label]) => (
          <button key={id} type="button" role="tab" aria-selected={flaeche === id}
                  className={flaeche === id ? "on" : ""} onClick={() => setFlaeche(id)}>
            {label}
          </button>
        ))}
      </div>
      {flaeche === "queue" && <LunaQueueEditor />}
      {flaeche === "modelle" && <RedaktionModelle />}
      {flaeche === "standards" && <RedaktionStandards />}
    </div>
  );
}

function RedaktionModelle() {
  const notify = useToast();
  const [settings, setSettings] = useState(null);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState("");

  useEffect(() => {
    BB.get("/admin/luna-queue?limit=1")
      .then((result) => setSettings(result.settings))
      .catch((err) => setError(err.message));
  }, []);

  if (error) return <div className="panel"><p className="an-error">{error}</p></div>;
  if (!settings) return <div className="panel"><Spinner label="Modelle werden geladen …" /></div>;

  const katalog = settings.katalog || { modelle: [], reasoning: {}, rollen: {} };
  const caps = settings.capabilities || {};
  const familieDa = { codex: !!caps.codexInstalled, claude: !!caps.claudeLogin };

  async function waehle(workflow, rolle, patch) {
    const jetzt = settings.models[workflow][rolle];
    let wahl = { model: jetzt.model, reasoning: jetzt.reasoning, ...patch };
    const familie = (katalog.modelle.find((m) => m.value === wahl.model) || {}).familie || "codex";
    const erlaubt = katalog.reasoning[familie] || [];
    if (!erlaubt.includes(wahl.reasoning)) wahl.reasoning = erlaubt[erlaubt.length - 1];
    const key = workflow + "-" + rolle;
    setBusy(key);
    try {
      const neu = await BB.patch("/admin/luna-queue/settings",
        { models: { [workflow]: { [rolle]: wahl } } });
      setSettings(neu);
      notify("Gilt ab dem nächsten Auftrag");
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy("");
    }
  }

  return (
    <div className="stack">
      <p className="redaktion-hinweis">
        Die Wahl gilt ab dem nächsten Auftrag. Ein laufender Auftrag behält die Modelle,
        mit denen er gestartet ist; sie stehen danach im Auftrag.
        Modelle mit <span className="mono">claude-</span> laufen über das Claude-Abo, alle anderen über Codex.
      </p>
      {Object.entries(katalog.rollen).map(([workflow, rollen]) => (
        <section className="panel redaktion-workflow" key={workflow}>
          <div className="label">Workflow</div>
          <h3>{(LUNA_WORKFLOWS[workflow] || {}).label || workflow}</h3>
          <div className="redaktion-rollen">
            {rollen.map((rolle) => {
              const wahl = settings.models[workflow][rolle.value];
              const key = workflow + "-" + rolle.value;
              return (
                <div className="redaktion-rolle" key={rolle.value}>
                  <strong>{rolle.label}</strong>
                  <Field label="Modell">
                    <select className="input" value={wahl.model} disabled={busy === key}
                            onChange={(e) => waehle(workflow, rolle.value, { model: e.target.value })}>
                      {["codex", "claude"].map((familie) => (
                        <optgroup key={familie} label={familie === "claude" ? "Claude (Abo)" : "Codex"}>
                          {katalog.modelle.filter((m) => m.familie === familie).map((m) => (
                            <option key={m.value} value={m.value}>
                              {m.label}{familieDa[familie] ? "" : " (Worker meldet keinen Zugang)"}
                            </option>
                          ))}
                        </optgroup>
                      ))}
                    </select>
                  </Field>
                  <Field label="Reasoning">
                    <select className="input" value={wahl.reasoning} disabled={busy === key}
                            onChange={(e) => waehle(workflow, rolle.value, { reasoning: e.target.value })}>
                      {(katalog.reasoning[wahl.familie] || []).map((r) => (
                        <option key={r} value={r}>{r}</option>
                      ))}
                    </select>
                  </Field>
                </div>
              );
            })}
          </div>
        </section>
      ))}
    </div>
  );
}

function RedaktionStandards() {
  const notify = useToast();
  const [liste, setListe] = useState(null);
  const [name, setName] = useState("");
  const [doc, setDoc] = useState(null);
  const [text, setText] = useState("");
  const [ansicht, setAnsicht] = useState("bearbeiten");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const geaendert = !!doc && text !== doc.text;

  useEffect(() => {
    BB.get("/admin/redaktion/standards")
      .then((result) => {
        setListe(result.items);
        if (result.items.length) setName(result.items[0].name);
      })
      .catch((err) => setError(err.message));
  }, []);

  useEffect(() => {
    if (!name) return;
    setDoc(null);
    BB.get("/admin/redaktion/standards/" + name)
      .then((result) => { setDoc(result); setText(result.text); })
      .catch((err) => setError(err.message));
  }, [name]);

  function wechsle(neu) {
    if (geaendert && !confirm("Ungespeicherte Änderungen verwerfen?")) return;
    setName(neu);
  }

  async function speichern() {
    setBusy(true);
    try {
      const result = await BB.put("/admin/redaktion/standards/" + name, { text, hash: doc.hash });
      setDoc(result);
      setText(result.text);
      notify("Gespeichert, die vorige Fassung ist gesichert");
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy(false);
    }
  }

  async function fassungLaden(id) {
    if (geaendert && !confirm("Ungespeicherte Änderungen verwerfen?")) return;
    try {
      const result = await BB.get(`/admin/redaktion/standards/${name}/versionen/${id}`);
      setText(result.text);
      setAnsicht("bearbeiten");
      notify("Fassung geladen. Erst Speichern stellt sie wieder her.");
    } catch (err) {
      notify(err.message, "bad");
    }
  }

  if (error) return <div className="panel"><p className="an-error">{error}</p></div>;
  if (!liste) return <div className="panel"><Spinner label="Standards werden geladen …" /></div>;

  return (
    <div className="redaktion-standards">
      <nav className="panel redaktion-dateien" aria-label="Standards">
        {liste.map((item) => (
          <button key={item.name} type="button" className={item.name === name ? "on" : ""}
                  onClick={() => wechsle(item.name)}>
            <strong>{item.label}</strong>
            <span className="mono">{item.datei}</span>
          </button>
        ))}
      </nav>
      <section className="panel redaktion-editor">
        {!doc ? <Spinner label="Datei wird geladen …" /> : (
          <>
            <div className="spread" style={{ gap: "1rem", flexWrap: "wrap" }}>
              <div>
                <div className="label mono">{doc.datei}</div>
                <h3>{doc.label}</h3>
                <div className="crow-meta mono">
                  {BB.num(text.length)} Zeichen · zuletzt geändert {doc.geaendert ? BB.when(doc.geaendert) : "–"}
                </div>
              </div>
              <div className="row" style={{ gap: "0.5rem" }}>
                <div className="seg">
                  {[["bearbeiten", "Bearbeiten"], ["vorschau", "Vorschau"]].map(([id, label]) => (
                    <button key={id} type="button" className={ansicht === id ? "on" : ""}
                            onClick={() => setAnsicht(id)}>{label}</button>
                  ))}
                </div>
                <button className="btn" disabled={!geaendert || busy} onClick={speichern}>
                  {busy ? "Speichert …" : "Speichern"}
                </button>
              </div>
            </div>
            {ansicht === "bearbeiten" ? (
              <textarea className="input mono redaktion-text" value={text} spellCheck={false}
                        onChange={(e) => setText(e.target.value)} />
            ) : (
              <div className="prose redaktion-vorschau"
                   dangerouslySetInnerHTML={{ __html: BB.markdown(text) }} />
            )}
            {doc.versionen && doc.versionen.length > 0 && (
              <details className="redaktion-versionen">
                <summary>Frühere Fassungen ({doc.versionen.length})</summary>
                <ul>
                  {doc.versionen.map((v) => (
                    <li key={v.id}>
                      <button type="button" className="btn ghost sm" onClick={() => fassungLaden(v.id)}>
                        {v.id.replace(/^(\d{4})(\d{2})(\d{2})-(\d{2})(\d{2}).*/, "$3.$2.$1 $4:$5")} UTC
                      </button>
                      <span className="mono">{BB.num(v.zeichen)} Zeichen</span>
                    </li>
                  ))}
                </ul>
              </details>
            )}
          </>
        )}
      </section>
    </div>
  );
}

/* --- Queue ---------------------------------------------------------------- */

function LunaQueueEditor() {
  const notify = useToast();
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState("");

  const load = useCallback((quiet = false) => {
    if (!quiet) setLoading(true);
    return BB.get("/admin/luna-queue?limit=150")
      .then((result) => {
        setData(result);
        setError("");
      })
      .catch((err) => setError(err.message))
      .finally(() => { if (!quiet) setLoading(false); });
  }, []);

  useEffect(() => {
    let alive = true;
    const refresh = () => {
      if (!alive) return;
      BB.get("/admin/luna-queue?limit=150")
        .then((result) => { if (alive) { setData(result); setError(""); } })
        .catch((err) => { if (alive) setError(err.message); })
        .finally(() => { if (alive) setLoading(false); });
    };
    refresh();
    const timer = setInterval(refresh, 3000);
    return () => { alive = false; clearInterval(timer); };
  }, []);

  async function changeSettings(patch, key) {
    setBusy(key);
    try {
      const settings = await BB.patch("/admin/luna-queue/settings", patch);
      setData((current) => ({ ...current, settings }));
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy("");
    }
  }

  async function jobAction(job, action, success) {
    if (action === "cancel" && job.status === "running"
        && !confirm(`Laufenden Auftrag „${job.title}“ abbrechen?`)) return;
    const key = `${job.id}-${action}`;
    setBusy(key);
    try {
      await BB.post(`/admin/luna-queue/${job.id}/${action}`);
      notify(success);
      await load(true);
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy("");
    }
  }

  async function startNext() {
    setBusy("next");
    try {
      await BB.post("/admin/luna-queue/next/start");
      notify("Der nächste Auftrag ist zum Start freigegeben");
      await load(true);
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy("");
    }
  }

  if (loading && !data) return <div className="panel"><Spinner label="Luna-Queue wird geladen …" /></div>;
  if (!data) return <div className="panel"><p className="an-error">{error || "Queue konnte nicht geladen werden."}</p></div>;

  const settings = data.settings || {};
  const capabilities = settings.capabilities || {};
  const counts = data.counts || {};

  return (
    <div className="luna-queue stack">
      <div className="luna-overview">
        <section className="panel luna-controls">
          <div className="spread luna-panel-head">
            <div>
              <div className="label">Serielle Verarbeitung</div>
              <h3>Queue-Steuerung</h3>
            </div>
            <span className={"luna-worker-dot" + (settings.workerOnline ? " online" : "")}>
              {settings.workerOnline ? "Worker online" : "Worker offline"}
            </span>
          </div>

          <button
            className={"luna-switch" + (settings.autoStart ? " on" : "")}
            type="button"
            role="switch"
            aria-checked={!!settings.autoStart}
            disabled={busy === "auto"}
            onClick={() => changeSettings({ autoStart: !settings.autoStart }, "auto")}
          >
            <span className="luna-switch-track" aria-hidden="true"><span /></span>
            <span>
              <strong>Automatisch starten</strong>
              <small>{settings.autoStart
                ? "Der Worker nimmt wartende Artikel nacheinander an."
                : "Artikel warten, bis du sie manuell freigibst."}</small>
            </span>
          </button>

          {/* Fast jeder Fehlschlag ist ein erreichtes Codex-Limit. Mit diesem
              Schalter laeuft ein grosser Stapel passiv durch: der Worker holt
              Fehlschlaege nach der Wartezeit selbst zurueck. */}
          <button
            className={"luna-switch" + (settings.autoRetry ? " on" : "")}
            type="button"
            role="switch"
            aria-checked={!!settings.autoRetry}
            disabled={busy === "retry"}
            onClick={() => changeSettings({ autoRetry: !settings.autoRetry }, "retry")}
          >
            <span className="luna-switch-track" aria-hidden="true"><span /></span>
            <span>
              <strong>Fehlgeschlagene wiederholen</strong>
              <small>{settings.autoRetry
                ? `Fehlgeschlagene Aufträge kommen nach ${settings.autoRetryHours || 2} h wieder in die Queue, höchstens bis zum ${settings.autoRetryMaxAttempts || 5}. Start.`
                : "Fehlgeschlagene Aufträge bleiben liegen, bis du sie einzeln wiederholst."}</small>
            </span>
          </button>

          <Field label="Standard-Ausführungsweg">
            <select
              className="input"
              value={settings.defaultProvider || "codex"}
              disabled={busy === "provider"}
              onChange={(event) => changeSettings(
                { defaultProvider: event.target.value }, "provider")}
            >
              {Object.entries(LUNA_PROVIDERS).map(([value, label]) => (
                <option key={value} value={value} disabled={value === "api" && !capabilities.apiKeyFile}>
                  {label}{value === "api" && !capabilities.apiKeyFile ? " (nicht konfiguriert)" : ""}
                </option>
              ))}
            </select>
          </Field>

          <button className="btn ghost" disabled={!counts.queued || busy === "next"} onClick={startNext}>
            {busy === "next" ? "Freigabe läuft …" : "Nächsten Artikel starten"}
          </button>
        </section>

        <section className="panel luna-worker">
          <div className="label">Host-Worker</div>
          <h3>{settings.workerHost || "Noch nicht verbunden"}</h3>
          <dl className="luna-facts">
            <div><dt>Codex CLI</dt><dd>{capabilities.codexInstalled ? "bereit" : "nicht erkannt"}</dd></div>
            <div><dt>ChatGPT-Anmeldung</dt><dd>{capabilities.chatgptLogin ? "bereit" : "nicht erkannt"}</dd></div>
            <div><dt>API-Schlüsseldatei</dt><dd>{capabilities.apiKeyFile ? "bereit" : "nicht konfiguriert"}</dd></div>
            <div><dt>Claude CLI</dt><dd>{capabilities.claudeInstalled ? "bereit" : "nicht erkannt"}</dd></div>
            <div><dt>Claude-Abo</dt><dd>{capabilities.claudeLogin ? "angemeldet" : "nicht erkannt"}</dd></div>
            <div><dt>Worker-Fassung</dt><dd className="mono">{settings.workerVersion || "–"}</dd></div>
            <div><dt>Lebenszeichen</dt><dd>{settings.workerHeartbeat ? BB.when(settings.workerHeartbeat) : "noch keines"}</dd></div>
          </dl>
          {!settings.workerOnline && (
            <p className="luna-warning">Die Queue bleibt erhalten. Neue Aufträge starten, sobald der Host-Worker wieder läuft.</p>
          )}
        </section>
      </div>

      <div className="luna-counts" aria-label="Queue-Zähler">
        {Object.entries(LUNA_STATUSES).map(([status, label]) => (
          <div key={status} className={"luna-count s-" + status}>
            <strong>{BB.num(counts[status] || 0)}</strong><span>{label}</span>
          </div>
        ))}
      </div>

      {error && <p className="an-error">{error}</p>}

      {!data.items.length ? (
        <Empty mark="◌" title="Die Luna-Queue ist leer">
          Übergib einen Wissensartikel im Tab „Inhalte“ an Luna.
        </Empty>
      ) : (
        <div className="luna-jobs" aria-live="polite">
          {data.items.map((job) => {
            const inputTokens = Number((job.usage || {}).input) || 0;
            const outputTokens = Number((job.usage || {}).output) || 0;
            const cachedTokens = Number((job.usage || {}).cachedInput) || 0;
            const reasoningTokens = Number((job.usage || {}).reasoning) || 0;
            return (
              <article className={"panel luna-job s-" + job.status} key={job.id}>
                <div className="luna-job-main">
                  <div className="row" style={{ gap: "0.5rem", flexWrap: "wrap" }}>
                    <span className={"pill luna-state s-" + job.status}>{LUNA_STATUSES[job.status] || job.status}</span>
                    <span className="pill">{job.workflowLabel || (LUNA_WORKFLOWS[job.workflow] || LUNA_WORKFLOWS.luna).label}</span>
                    <span className="pill">{LUNA_PROVIDERS[job.provider] || job.provider}</span>
                    {job.status === "queued" && job.queuePosition && <span className="pill">Position {job.queuePosition}</span>}
                  </div>
                  <Link to={"/wissen/" + job.slug} className="luna-job-title">{job.title}</Link>
                  <div className="crow-meta mono">
                    Auftrag #{job.id} · {job.requestedBy} · {BB.when(job.createdAt)}
                    {job.attempt ? ` · Versuch ${job.attempt}` : ""}
                  </div>
                  {job.instruction && <p className="luna-instruction">{job.instruction}</p>}
                  {job.status === "running" && (
                    <div className="luna-progress">
                      <div className="spread">
                        <span>{LUNA_PHASES[job.phase] || job.phase}</span>
                        <strong className="mono">{job.progress}%</strong>
                      </div>
                      <div className="luna-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow={job.progress}>
                        <span style={{ transform: `scaleX(${job.progress / 100})` }} />
                      </div>
                    </div>
                  )}
                  {job.detail && <p className="luna-detail">{job.detail}</p>}
                  {job.resultSummary && <p className="luna-result">{job.resultSummary}</p>}
                  {job.error && <pre className="luna-error">{job.error}</pre>}
                </div>

                <div className="luna-job-side">
                  {inputTokens + outputTokens > 0 && (
                    <span
                      className="mono dim"
                      title={`${BB.num(inputTokens)} Eingabe, davon ${BB.num(cachedTokens)} Cache; ${BB.num(outputTokens)} Ausgabe, davon ${BB.num(reasoningTokens)} Reasoning`}
                    >
                      {BB.num(inputTokens)} rein · {BB.num(outputTokens)} raus
                    </span>
                  )}
                  {job.status === "queued" && (
                    <>
                      {!job.runRequested && (
                        <button className="btn primary sm" disabled={busy === `${job.id}-start`}
                                onClick={() => jobAction(job, "start", "Auftrag zum Start freigegeben")}>
                          Jetzt starten
                        </button>
                      )}
                      {job.runRequested && <span className="mono dim">Start freigegeben</span>}
                      <button className="btn quiet sm" disabled={busy === `${job.id}-cancel`}
                              onClick={() => jobAction(job, "cancel", "Auftrag abgebrochen")}>
                        Entfernen
                      </button>
                    </>
                  )}
                  {job.status === "running" && (
                    <button className="btn quiet sm" disabled={job.cancelRequested || busy === `${job.id}-cancel`}
                            onClick={() => jobAction(job, "cancel", "Abbruch angefordert")}>
                      {job.cancelRequested ? "Abbruch angefordert" : "Abbrechen"}
                    </button>
                  )}
                  {["failed", "cancelled"].includes(job.status) && (
                    <button className="btn ghost sm" disabled={busy === `${job.id}-retry`}
                            onClick={() => jobAction(job, "retry", "Auftrag erneut eingereiht")}>
                      Erneut versuchen
                    </button>
                  )}
                  {job.status === "completed" && <Link to={"/wissen/" + job.slug} className="btn ghost sm">Artikel prüfen</Link>}
                </div>
              </article>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* --- Wartung ------------------------------------------------------------- */

function Maintenance({ onReload }) {
  const notify = useToast();
  const [busy, setBusy] = useState(false);

  async function restore() {
    if (!confirm("Fehlende kuratierte Einträge aus db_articles.json wiederherstellen?")) return;
    setBusy(true);
    try {
      const r = await BB.post("/admin/restore");
      notify(`Wissensbasis geprüft, ${r.wiki} Einträge vorhanden`);
      await onReload();
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="panel stack" style={{ gap: "1rem", maxWidth: 640 }}>
      <span className="label">Wissensbasis</span>
      <p style={{ fontSize: "var(--fs-sm)", color: "var(--fg-2)" }}>
        Stellt kuratierte Einträge wieder her, die versehentlich gelöscht wurden, und
        gleicht Texte mit <code>db_articles.json</code> ab. Beiträge der Community,
        Kommentare und Bewertungen bleiben unangetastet.
      </p>
      <button className="btn ghost" onClick={restore} disabled={busy} style={{ alignSelf: "flex-start" }}>
        {busy ? "Läuft …" : "Wissensbasis abgleichen"}
      </button>
    </div>
  );
}

/* --- Seite --------------------------------------------------------------- */

/* --- Bewertungsmatrix ----------------------------------------------------
   Zeigt die Modelldateien so, wie der Scorer sie liest. Bewusst keine
   handgeschriebene Zusammenfassung: die wäre eine zweite Wahrheit neben den
   Daten und würde beim ersten Nachjustieren falsch. Was hier steht, ist das,
   womit gerechnet wird.
   ------------------------------------------------------------------------ */

function MatrixWert({ wert }) {
  if (wert === null || wert === undefined) return <span className="mono dim">-</span>;
  if (Array.isArray(wert)) {
    if (wert.every((x) => typeof x !== "object")) {
      return <span className="mono">{wert.join(" · ")}</span>;
    }
    return <span className="mono dim">{wert.length} Einträge</span>;
  }
  if (typeof wert === "object") return <MatrixTabelle daten={wert} />;
  if (typeof wert === "boolean") return <span className="mono">{wert ? "ja" : "nein"}</span>;
  return <span className="mono">{String(wert)}</span>;
}

/** Ein Objekt als Zeilen. Schlüssel mit `_hinweis` sind Erklärungen und stehen
    deshalb als Fließtext über der Tabelle, nicht als Zeile darin. */
function MatrixTabelle({ daten }) {
  const hinweise = Object.entries(daten).filter(([k]) => k.startsWith("_hinweis"));
  const zeilen = Object.entries(daten).filter(([k]) => !k.startsWith("_"));
  return (
    <div className="mx-block">
      {hinweise.map(([k, v]) => <p className="mx-hinweis" key={k}>{v}</p>)}
      {zeilen.length > 0 && (
        <dl className="mx-kv">
          {zeilen.map(([k, v]) => (
            <Fragment key={k}>
              <dt>{k}</dt>
              <dd><MatrixWert wert={v} /></dd>
            </Fragment>
          ))}
        </dl>
      )}
    </div>
  );
}

function GewichtBalken({ gewichte }) {
  const eintraege = Object.entries(gewichte);
  const summe = eintraege.reduce((s, [, v]) => s + v, 0);
  return (
    <div className="stack" style={{ gap: "0.5rem" }}>
      {eintraege.map(([k, v]) => (
        <div className="bar" key={k}>
          <div className="bar-head">
            <span className="k">{k}</span>
            <span className="v">{Math.round(v * 100)} %</span>
          </div>
          <div className="bar-track">
            <div className="bar-fill" style={{ transform: `scaleX(${v / Math.max(...eintraege.map(([, x]) => x))})` }} />
          </div>
        </div>
      ))}
      <p className="mx-hinweis">Summe {Math.round(summe * 100)} Prozent.</p>
    </div>
  );
}

function MatrixSplit({ d }) {
  const m = d.modell;
  return (
    <div className="stack" style={{ gap: "1.75rem" }}>
      <p className="mx-hinweis">
        Der Gesamtscore ist das gewichtete Mittel der Dimensionen, gedeckelt auf
        höchstens {d.strenge.deckel_ueber_schwaechster} Punkte über der schwächsten
        Dimension mit mindestens {Math.round((d.strenge.deckel_ab_gewicht || 0) * 100)} Prozent Gewicht.
      </p>

      {Object.entries(d.gewichte).map(([ziel, g]) => (
        <div key={ziel}>
          <div className="label">Gewichte für das Ziel {ziel}</div>
          <GewichtBalken gewichte={g} />
        </div>
      ))}

      <div>
        <div className="label">Reiz und Schädigung je Satz</div>
        <p className="mx-hinweis">{m._hinweis_kurven}</p>
        <table className="mx-tab">
          <thead><tr><th>Satz</th><th>Grenzreiz</th><th>Schädigung</th></tr></thead>
          <tbody>
            {m.stimulus.je_satz.map((s, i) => (
              <tr key={i}><td>{i + 1}</td><td>{s}</td><td>{m.schaden.je_satz[i]}</td></tr>
            ))}
            <tr><td>ab {m.stimulus.je_satz.length + 1}</td>
                <td>{m.stimulus.danach}</td><td>{m.schaden.danach}</td></tr>
          </tbody>
        </table>
      </div>

      <div>
        <div className="label">Wochenvolumen, ein Band für alle Muskeln</div>
        <p className="mx-hinweis">{m._hinweis_wochenvolumen}</p>
        <MatrixTabelle daten={m.wochenvolumen} />
      </div>

      <div>
        <div className="label">Muskeln</div>
        <p className="mx-hinweis">{d.muskeln._hinweis_schaden}</p>
        <table className="mx-tab">
          <thead><tr><th>Muskel</th><th>Gruppe</th><th>Schädigung</th><th>gemessen</th><th>Kern</th></tr></thead>
          <tbody>
            {Object.entries(d.muskeln).filter(([k]) => !k.startsWith("_")).map(([k, mk]) => (
              <tr key={k}>
                <td>{mk.label}</td><td>{mk.gruppe}</td><td>{mk.schaden}</td>
                <td>{mk.gemessen ? "ja" : "übertragen"}</td><td>{mk.kern ? "ja" : "nein"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {["saettigung", "erholung", "reihenfolge", "wiederholungen", "rir", "abdeckung", "sitzung"].map((k) => (
        m[k] ? (
          <div key={k}>
            <div className="label">{k}</div>
            {m["_hinweis_" + k] && <p className="mx-hinweis">{m["_hinweis_" + k]}</p>}
            <MatrixTabelle daten={m[k]} />
          </div>
        ) : null
      ))}
    </div>
  );
}

function MatrixStack({ d }) {
  const m = d.modell;
  return (
    <div className="stack" style={{ gap: "1.75rem" }}>
      {Object.entries(m.gewichte).map(([ziel, g]) => (
        <div key={ziel}>
          <div className="label">Gewichte für das Ziel {ziel}</div>
          <GewichtBalken gewichte={g} />
        </div>
      ))}
      <div>
        <div className="label">Systemlasten</div>
        <p className="mx-hinweis">{m._hinweis_last}</p>
        <table className="mx-tab">
          <thead><tr><th>System</th><th>auffällig ab</th><th>deutlich ab</th></tr></thead>
          <tbody>
            {Object.entries(m.systeme).map(([k, s]) => (
              <tr key={k}><td>{s.label}</td><td>{s.warn_ab}</td><td>{s.kritisch_ab}</td></tr>
            ))}
          </tbody>
        </table>
      </div>
      <div>
        <div className="label">Ester und Halbwertszeiten</div>
        <p className="mx-hinweis">{d.ester._hinweis}</p>
        <table className="mx-tab">
          <thead><tr><th>Ester</th><th>Halbwertszeit</th><th>Faktor bei E7D</th></tr></thead>
          <tbody>
            {Object.entries(d.ester).filter(([k]) => !k.startsWith("_")).map(([k, e]) => (
              <tr key={k}>
                <td>{e.label}</td><td>{e.halbwertszeit_tage} d</td>
                <td>{Math.pow(2, 7 / e.halbwertszeit_tage).toFixed(1)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div>
        <div className="label">Interaktionsregeln ({d.interaktionen.paare.length})</div>
        <p className="mx-hinweis">{d.interaktionen._hinweis_stufen}</p>
        <ul className="mx-liste">
          {d.interaktionen.paare.map((p) => (
            <li key={p.id}>
              <span className={"mx-stufe s-" + p.stufe}>{p.stufe}</span>
              <span>{p.text}</span>
            </li>
          ))}
        </ul>
      </div>
      {["ziel_abdeckung", "redundanz", "dosis", "evidenz", "komplexitaet", "schwankung", "side_control"].map((k) => (
        m[k] ? (
          <div key={k}>
            <div className="label">{k}</div>
            {m["_hinweis_" + k] && <p className="mx-hinweis">{m["_hinweis_" + k]}</p>}
            <MatrixTabelle daten={m[k]} />
          </div>
        ) : null
      ))}
    </div>
  );
}

function MatrixMeal({ d }) {
  const m = d.modell;
  return (
    <div className="stack" style={{ gap: "1.75rem" }}>
      <p className="mx-hinweis">{m._hinweis} Basis: {d.lebensmittel_anzahl} Lebensmittel.</p>
      {Object.entries(m.gewichte).map(([phase, g]) => (
        <div key={phase}>
          <div className="label">Gewichte in der Phase {phase}</div>
          <GewichtBalken gewichte={g} />
        </div>
      ))}
      <div>
        <div className="label">Zielkorridore je Anlass</div>
        <p className="mx-hinweis">{m._hinweis_ziel}</p>
        <table className="mx-tab">
          <thead><tr><th>Anlass</th><th>Eiweiß min.</th><th>KH-Anteil</th><th>Fett-Anteil</th><th>kcal</th><th>Magen max.</th></tr></thead>
          <tbody>
            {m.anlaesse.map((a) => {
              const z = m.anlass_ziel[a];
              return (
                <tr key={a}>
                  <td>{m.anlass_labels[a]}</td>
                  <td>{z.protein_min_g} g</td>
                  <td>{Math.round(z.kh_anteil[0] * 100)} bis {Math.round(z.kh_anteil[1] * 100)} %</td>
                  <td>{Math.round(z.fett_anteil[0] * 100)} bis {Math.round(z.fett_anteil[1] * 100)} %</td>
                  <td>{z.kcal[0]} bis {z.kcal[1]}</td>
                  <td>{m.verdauung.anlass_grenze[a]} min</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      {["verdauung", "naehrstoffe", "dichte"].map((k) => (
        <div key={k}>
          <div className="label">{k}</div>
          {m["_hinweis_" + k] && <p className="mx-hinweis">{m["_hinweis_" + k]}</p>}
          <MatrixTabelle daten={m[k]} />
        </div>
      ))}
    </div>
  );
}

function MatrixBlood({ d }) {
  const m = d.modell;
  const analyte = Object.entries(d.analyte).filter(([k]) => !k.startsWith("_"));
  return (
    <div className="stack" style={{ gap: "1.75rem" }}>
      <p className="mx-hinweis">{m._hinweis}</p>
      <p className="mx-hinweis">{m._hinweis_score}</p>
      <div>
        <div className="label">Gruppen und Gewichte</div>
        <GewichtBalken gewichte={Object.fromEntries(
          Object.entries(m.gruppen).map(([k, g]) => [g.label, g.gewicht]))} />
      </div>
      <div>
        <div className="label">Muster über mehrere Werte ({m.muster.length})</div>
        <p className="mx-hinweis">{m._hinweis_muster}</p>
        <ul className="mx-liste">
          {m.muster.map((r) => (
            <li key={r.id}>
              <span className={"mx-stufe s-" + r.stufe}>{r.stufe}</span>
              <span>
                <strong className="mono">
                  {r.wenn.map((b) => `${b.analyt} ${b.lage}`).join(" + ")}
                  {(r.ohne || []).length ? " ohne " + r.ohne.map((b) => `${b.analyt} ${b.lage}`).join(", ") : ""}
                  {(r.kontext_eines || []).length ? " bei " + r.kontext_eines.join("/") : ""}
                </strong>
                <br />{r.text}
              </span>
            </li>
          ))}
        </ul>
      </div>
      <div>
        <div className="label">Analyte ({analyte.length})</div>
        <table className="mx-tab">
          <thead><tr><th>Analyt</th><th>Gruppe</th><th>Einheit</th><th>Referenz m</th><th>rote Flagge</th></tr></thead>
          <tbody>
            {analyte.map(([k, a]) => (
              <tr key={k}>
                <td>{a.label}</td><td>{a.gruppe}</td><td className="mono">{a.einheit}</td>
                <td className="mono">{(a.referenz && a.referenz.m) ? a.referenz.m.join(" bis ") : "-"}</td>
                <td>{a.rote_flagge
                  ? (a.rote_flagge.ueber !== undefined ? "über " + a.rote_flagge.ueber : "unter " + a.rote_flagge.unter)
                  : "-"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div>
        <div className="label">Systemprompt für die spätere Textfassung</div>
        <p className="mx-hinweis">{m._hinweis_ki}</p>
        <pre className="mx-prompt">{m.ki_systemprompt}</pre>
        <p className="mx-hinweis">Aktiv: {m.ki_aktiv ? "ja" : "nein"}.</p>
      </div>
    </div>
  );
}

function MatrixAnsicht() {
  const [daten, setDaten] = useState(null);
  const [art, setArt] = useState("split");
  const [fehler, setFehler] = useState("");

  useEffect(() => {
    BB.get("/auswertung/matrix").then(setDaten).catch((e) => setFehler(e.message));
  }, []);

  if (fehler) return <p className="an-error">{fehler}</p>;
  if (!daten) return <Spinner />;

  const ANSICHT = { split: MatrixSplit, stack: MatrixStack, meal: MatrixMeal, blood: MatrixBlood };
  const Inhalt = ANSICHT[art];

  return (
    <div className="stack" style={{ gap: "1.5rem" }}>
      <div className="panel stack" style={{ gap: "0.75rem" }}>
        <div className="label">Bewertungsmatrix</div>
        <p className="mx-hinweis">
          Das hier sind die Modelldateien selbst, nicht eine Beschreibung davon. Wer eine
          Zahl ändert, sieht sie hier sofort. Alle Werte stehen in analyse/data als JSON.
        </p>
        <Segmented
          value={art}
          onChange={setArt}
          options={Object.keys(ANSICHT).map((k) => ({
            value: k, label: `${(BB.SUBJECTS[k] || {}).label || k} (${daten[k].engine})` }))}
        />
      </div>
      <Inhalt d={daten[art]} />
    </div>
  );
}

function adminUserForm(account) {
  return {
    role: account.role || "user",
    plan: account.plan || "free",
    until: account.planUntil ? String(account.planUntil).slice(0, 10) : "",
    tokens: String(account.tokens ?? 0),
  };
}

function AdminUserRow({ account, currentUsername, onSaved, onDeleted }) {
  const notify = useToast();
  const [form, setForm] = useState(() => adminUserForm(account));
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const isSelf = String(account.username).toLowerCase() === String(currentUsername).toLowerCase();

  useEffect(() => {
    setForm(adminUserForm(account));
  }, [account.role, account.plan, account.planUntil, account.tokens]);

  async function speichern(e) {
    e.preventDefault();
    setBusy(true);
    setError("");
    try {
      const updated = await BB.patch("/admin/users/" + encodeURIComponent(account.username), {
        role: form.role,
        plan: form.plan,
        until: form.until.trim(),
        tokens: Math.max(0, Math.min(9999, Number(form.tokens) || 0)),
      });
      onSaved(updated);
      notify("Gespeichert für " + updated.username, "ok");
    } catch (e) {
      setError(e.message);
    } finally {
      setBusy(false);
    }
  }

  return (
    <form className="admin-user-row" onSubmit={speichern}>
      <div className="admin-user-row-head">
        <div className="admin-user-ident">
          <Avatar user={account} size="sm" />
          <div className="admin-user-name">
            <strong>{account.displayName}</strong>
            <span className="mono">@{account.username}</span>
            <span className="dim">
              {account.email || "Keine E-Mail"} · {account.posts || 0} Beiträge · {account.comments || 0} Kommentare · {account.analyses || 0} Analysen
            </span>
          </div>
        </div>
        <span className="admin-user-current-role">{account.role}</span>
      </div>

      <div className="admin-user-fields">
        <Field label="Rolle" hint={isSelf ? "Eigene Adminrolle geschützt." : ""}>
          <select className="input" value={form.role} disabled={isSelf}
                  onChange={(e) => setForm({ ...form, role: e.target.value })}>
            <option value="user">user</option>
            <option value="mod">mod</option>
            <option value="admin">admin</option>
          </select>
        </Field>
        <Field label="Tarif">
          <select className="input" value={form.plan}
                  onChange={(e) => setForm({ ...form, plan: e.target.value })}>
            <option value="free">free</option>
            <option value="premium">premium</option>
          </select>
        </Field>
        <Field label="Läuft bis" hint="Leer heißt unbegrenzt.">
          <input className="input" type="date" value={form.until}
                 onChange={(e) => setForm({ ...form, until: e.target.value })} />
        </Field>
        <Field label="Tokens">
          <input className="input" type="number" min="0" max="9999" value={form.tokens}
                 onChange={(e) => setForm({ ...form, tokens: e.target.value })} />
        </Field>
        <button className="btn primary admin-user-save" disabled={busy}>
          {busy ? "Speichert …" : "Speichern"}
        </button>
      </div>
      {error && <p className="an-error admin-user-error">{error}</p>}

      <AdminUserKonto account={account} isSelf={isSelf} onDeleted={onDeleted} />
    </form>
  );
}

/* Zugang und Bestand: Passwort setzen, Reset-Link erzeugen, Konto löschen.
   Bewusst unter den Tarif-Feldern und optisch abgesetzt: hier steht nichts,
   was man versehentlich anklicken sollte. */
function AdminUserKonto({ account, isSelf, onDeleted }) {
  const notify = useToast();
  const [offen, setOffen] = useState(false);
  const [passwort, setPasswort] = useState("");
  const [link, setLink] = useState(null);
  const [busy, setBusy] = useState("");
  const [error, setError] = useState("");
  const [loeschen, setLoeschen] = useState(false);
  const [bestaetigung, setBestaetigung] = useState("");
  const pfad = "/admin/users/" + encodeURIComponent(account.username);

  async function lauf(name, fn) {
    setBusy(name);
    setError("");
    try {
      await fn();
    } catch (e) {
      setError(e.message);
    } finally {
      setBusy("");
    }
  }

  const setzePasswort = () => lauf("passwort", async () => {
    await BB.post(pfad + "/passwort", { password: passwort });
    setPasswort("");
    notify("Passwort gesetzt für @" + account.username, "ok");
  });

  const erzeugeLink = () => lauf("link", async () => {
    const res = await BB.post(pfad + "/reset-link", {});
    setLink(res);
  });

  const entferne = () => lauf("loeschen", async () => {
    await BB.del(pfad);
    notify("Konto @" + account.username + " gelöscht", "ok");
    onDeleted(account.username);
  });

  async function kopieren() {
    try {
      await navigator.clipboard.writeText(link.link);
      notify("Link kopiert", "ok");
    } catch {
      setError("Kopieren ging nicht. Bitte den Link von Hand markieren.");
    }
  }

  if (!offen) {
    return (
      <button type="button" className="btn ghost admin-user-konto-toggle"
              onClick={() => setOffen(true)}>
        Zugang und Konto …
      </button>
    );
  }

  return (
    <div className="admin-user-konto" onClick={(e) => e.stopPropagation()}>
      <div className="admin-user-konto-zeile">
        <Field label="Neues Passwort" hint="Mindestens 8 Zeichen. Beendet alle offenen Sitzungen.">
          <input className="input" type="text" value={passwort} autoComplete="off"
                 placeholder="direkt setzen"
                 onChange={(e) => setPasswort(e.target.value)} />
        </Field>
        <button type="button" className="btn" disabled={busy === "passwort" || passwort.length < 8}
                onClick={setzePasswort}>
          {busy === "passwort" ? "Setzt …" : "Passwort setzen"}
        </button>
        <button type="button" className="btn" disabled={busy === "link"} onClick={erzeugeLink}>
          {busy === "link" ? "Erzeugt …" : "Reset-Link erzeugen"}
        </button>
      </div>

      {link && (
        <div className="admin-user-resetlink">
          <p className="dim">
            Gilt {link.stunden} Stunden und nur einmal.{" "}
            {link.email ? "E-Mail des Kontos: " + link.email : "Das Konto hat keine E-Mail hinterlegt."}
          </p>
          <div className="admin-user-konto-zeile">
            <input className="input mono" readOnly value={link.link}
                   onFocus={(e) => e.target.select()} />
            <button type="button" className="btn" onClick={kopieren}>Kopieren</button>
          </div>
        </div>
      )}

      <div className="admin-user-konto-gefahr">
        {!loeschen ? (
          <button type="button" className="btn ghost danger" disabled={isSelf}
                  onClick={() => setLoeschen(true)}>
            {isSelf ? "Eigenes Konto geschützt" : "Konto löschen"}
          </button>
        ) : (
          <div className="stack" style={{ gap: "0.5rem" }}>
            <p className="dim">
              Beiträge und Kommentare bleiben stehen und zeigen danach einen
              gelöschten Autor. Analysen und Sitzungen werden entfernt. Zum
              Bestätigen <strong>{account.username}</strong> eintippen.
            </p>
            <div className="admin-user-konto-zeile">
              <input className="input" value={bestaetigung} autoComplete="off"
                     placeholder={account.username}
                     onChange={(e) => setBestaetigung(e.target.value)} />
              <button type="button" className="btn danger"
                      disabled={busy === "loeschen" || bestaetigung !== account.username}
                      onClick={entferne}>
                {busy === "loeschen" ? "Löscht …" : "Endgültig löschen"}
              </button>
              <button type="button" className="btn ghost"
                      onClick={() => { setLoeschen(false); setBestaetigung(""); }}>
                Abbrechen
              </button>
            </div>
          </div>
        )}
      </div>

      {error && <p className="an-error">{error}</p>}
    </div>
  );
}

function UserEditor({ currentUsername }) {
  const [query, setQuery] = useState("");
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const load = useCallback(() => {
    setLoading(true);
    return BB.get("/admin/users" + BB.qs({ q: query.trim(), limit: 200 }))
      .then((next) => { setData(next); setError(""); })
      .catch((e) => setError(e.message))
      .finally(() => setLoading(false));
  }, [query]);

  useEffect(() => {
    const timer = setTimeout(() => { load(); }, 180);
    return () => clearTimeout(timer);
  }, [load]);

  function geloescht(username) {
    setData((current) => current && {
      ...current,
      users: current.users.filter((account) => account.username !== username),
      total: Math.max(0, current.total - 1),
    });
  }

  function saved(updated) {
    setData((current) => current && {
      ...current,
      users: current.users.map((account) => (
        account.username === updated.username ? { ...account, ...updated } : account
      )),
    });
  }

  return (
    <section className="panel admin-users">
      <div className="admin-users-head">
        <div>
          <div className="label">Nutzerkonten</div>
          <p className="mx-hinweis">Rollen, Auswertungszugang, Token-Guthaben und Zugang direkt am Konto pflegen.</p>
        </div>
        {data && <span className="admin-users-count">{data.total} Nutzer</span>}
      </div>

      <label className="admin-user-search">
        <span className="label">Nutzer suchen</span>
        <input className="input" type="search" value={query}
               onChange={(e) => setQuery(e.target.value)} placeholder="Name, Benutzername oder E-Mail" />
      </label>

      {error && <p className="an-error">{error}</p>}
      {!data && loading ? <Spinner /> : data && (
        data.users.length ? (
          <div className="admin-user-list">
            {data.users.map((account) => (
              <AdminUserRow key={account.id} account={account} currentUsername={currentUsername}
                            onSaved={saved} onDeleted={geloescht} />
            ))}
          </div>
        ) : (
          <Empty mark="◎" title="Kein Nutzer gefunden">
            Prüfe den Suchbegriff oder lege ein neues Konto an.
          </Empty>
        )
      )}
      {data && data.users.length < data.total && (
        <p className="mx-hinweis">Es werden die ersten {data.users.length} von {data.total} Treffern angezeigt. Suche nach einem Namen, um die Liste einzugrenzen.</p>
      )}
    </section>
  );
}

const ANALYTICS_LABELS = {
  direct: "Direkt", internal: "Intern", google: "Google", reddit: "Reddit",
  search: "Suchmaschinen", social: "Social", other: "Andere Websites",
  mobile: "Mobile", desktop: "Desktop", tablet: "Tablet", unknown: "Unbekannt",
  de: "Deutsch", en: "English", es: "Español", fr: "Français",
  chromeos: "ChromeOS", windows: "Windows", android: "Android", ios: "iOS",
  macos: "macOS", linux: "Linux", chrome: "Chrome", firefox: "Firefox",
  safari: "Safari", edge: "Edge", opera: "Opera", samsung: "Samsung Internet",
  bot: "Crawler", other_os: "Andere", other_browser: "Andere",
};

function analyticsLabel(value) {
  const key = String(value || "unknown");
  return ANALYTICS_LABELS[key] || key.charAt(0).toUpperCase() + key.slice(1);
}

function analyticsNumber(value) {
  return new Intl.NumberFormat("de-DE", { maximumFractionDigits: 0 }).format(Number(value) || 0);
}

function analyticsDuration(seconds) {
  const total = Math.max(0, Math.round(Number(seconds) || 0));
  if (total < 60) return total + " s";
  return Math.floor(total / 60) + " min " + String(total % 60).padStart(2, "0") + " s";
}

function AnalyticsPeriodCards({ periods }) {
  const items = [
    { key: "today", label: "Heute" },
    { key: "7d", label: "7 Tage" },
    { key: "30d", label: "30 Tage" },
  ];
  return (
    <div className="analytics-periods">
      {items.map((item) => {
        const p = periods[item.key] || {};
        return (
          <section className="analytics-period" key={item.key}>
            <div className="label">{item.label}</div>
            <strong>{analyticsNumber(p.visitors)}</strong>
            <span className="analytics-period-caption">Besucher</span>
            <div className="analytics-period-meta">
              <span><b>{analyticsNumber(p.pageviews)}</b> Pageviews</span>
              <span><b>{analyticsNumber(p.sessions)}</b> Sitzungen</span>
            </div>
          </section>
        );
      })}
    </div>
  );
}

function AnalyticsTrend({ items }) {
  const width = 720;
  const height = 240;
  const pad = { top: 18, right: 18, bottom: 30, left: 18 };
  const innerW = width - pad.left - pad.right;
  const innerH = height - pad.top - pad.bottom;
  const max = Math.max(1, ...(items || []).flatMap((d) => [d.pageviews || 0, d.sessions || 0]));
  const point = (key, index) => {
    const x = pad.left + (items.length <= 1 ? innerW / 2 : (index / (items.length - 1)) * innerW);
    const y = pad.top + innerH - ((Number(items[index][key]) || 0) / max) * innerH;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  };
  const pagePoints = (items || []).map((_, i) => point("pageviews", i)).join(" ");
  const sessionPoints = (items || []).map((_, i) => point("sessions", i)).join(" ");
  const labels = (items || []).filter((_, i) => i === 0 || i === Math.floor((items.length - 1) / 2) || i === items.length - 1);

  return (
    <div className="analytics-chart">
      <div className="analytics-chart-legend">
        <span><i className="analytics-key pageviews" /> Pageviews</span>
        <span><i className="analytics-key sessions" /> Sitzungen</span>
        <span className="dim">max. {analyticsNumber(max)}</span>
      </div>
      <svg viewBox={`0 0 ${width} ${height}`} role="img" aria-label="Traffic-Verlauf">
        {[0, 0.5, 1].map((ratio) => (
          <line key={ratio} className="analytics-gridline" x1={pad.left} x2={width - pad.right}
                y1={pad.top + innerH * ratio} y2={pad.top + innerH * ratio} />
        ))}
        <polyline className="analytics-line pageviews" points={pagePoints} />
        <polyline className="analytics-line sessions" points={sessionPoints} />
        {items.map((item, i) => (
          <title key={item.date + i}>{item.date}: {analyticsNumber(item.pageviews)} Pageviews, {analyticsNumber(item.sessions)} Sitzungen</title>
        ))}
      </svg>
      <div className="analytics-chart-labels">
        {labels.map((item) => <span key={item.date}>{item.date.slice(5).replace("-", ".")}</span>)}
      </div>
    </div>
  );
}

function AnalyticsBars({ items = [], empty = "Noch keine Daten" }) {
  const max = Math.max(1, ...items.map((item) => Number(item.value) || Number(item.sessions) || 0));
  if (!items.length) return <p className="mx-hinweis">{empty}</p>;
  return (
    <div className="analytics-bars">
      {items.map((item) => {
        const value = Number(item.value) || Number(item.sessions) || 0;
        return (
          <div className="analytics-bar" key={item.key}>
            <div className="bar-head"><span className="k">{analyticsLabel(item.key)}</span><span className="v">{analyticsNumber(value)}</span></div>
            <div className="bar-track"><span className="bar-fill" style={{ transform: `scaleX(${value / max})` }} /></div>
          </div>
        );
      })}
    </div>
  );
}

function AnalyticsTable({ columns, rows = [], empty = "Noch keine Daten" }) {
  if (!rows.length) return <p className="mx-hinweis">{empty}</p>;
  return (
    <div className="analytics-table-wrap">
      <table className="mx-tab analytics-table">
        <thead><tr>{columns.map((c) => <th key={c.key}>{c.label}</th>)}</tr></thead>
        <tbody>{rows.map((row, index) => (
          <tr key={(row.id || row.path || row.query || row.campaign || "row") + index}>
            {columns.map((column) => <td key={column.key}>{column.render ? column.render(row) : row[column.key]}</td>)}
          </tr>
        ))}</tbody>
      </table>
    </div>
  );
}

function AnalyticsDashboard() {
  const [days, setDays] = useState(30);
  const [data, setData] = useState(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let alive = true;
    setLoading(true);
    setError("");
    BB.get("/admin/analytics" + BB.qs({ days }))
      .then((result) => { if (alive) setData(result); })
      .catch((err) => { if (alive) setError(err.message); })
      .finally(() => { if (alive) setLoading(false); });
    return () => { alive = false; };
  }, [days]);

  if (loading && !data) return <div className="panel"><Spinner label="Analytics werden geladen ..." /></div>;
  if (error && !data) return <div className="panel"><p className="an-error">{error}</p></div>;
  if (!data) return null;

  const gsc = data.searchConsole || { status: "not_configured", rows: [] };
  const pageColumns = [
    { key: "title", label: "Seite", render: (row) => <><strong>{row.title || row.path}</strong><small className="analytics-subline">{row.path}</small></> },
    { key: "views", label: "Aufrufe", render: (row) => analyticsNumber(row.views) },
  ];
  const articleColumns = [
    { key: "title", label: "Artikel", render: (row) => <><strong>{row.title}</strong><small className="analytics-subline">{row.path}</small></> },
    { key: "views", label: "Aufrufe", render: (row) => analyticsNumber(row.views) },
  ];
  const pathColumns = (field, label) => [
    { key: "path", label: "Pfad", render: (row) => <span className="mono analytics-path">{row.path || "/"}</span> },
    { key: field, label, render: (row) => analyticsNumber(row[field]) },
  ];
  const gscColumns = [
    { key: "query", label: "Suchanfrage", render: (row) => <strong>{row.query}</strong> },
    { key: "clicks", label: "Klicks", render: (row) => analyticsNumber(row.clicks) },
    { key: "impressions", label: "Impr.", render: (row) => analyticsNumber(row.impressions) },
    { key: "ctr", label: "CTR", render: (row) => (Number(row.ctr || 0) * 100).toFixed(1) + "%" },
    { key: "position", label: "Pos.", render: (row) => Number(row.position || 0).toFixed(1) },
    { key: "page", label: "Landingpage", render: (row) => <span className="mono analytics-path">{row.page}</span> },
  ];

  return (
    <div className="analytics-dashboard">
      <div className="analytics-toolbar">
        <div>
          <p className="mx-hinweis">Anonyme First-Party-Messung ohne gespeicherte IP-Adressen. Besucher sind eine rotierende, pseudonyme 24-Stunden-Kennung.</p>
        </div>
        <Segmented value={String(days)} onChange={(value) => setDays(Number(value))} options={[
          { value: "7", label: "7 Tage" }, { value: "30", label: "30 Tage" }, { value: "90", label: "90 Tage" },
        ]} />
      </div>

      <AnalyticsPeriodCards periods={data.periods || {}} />

      <div className="analytics-grid analytics-grid-main">
        <section className="panel analytics-panel analytics-trend-panel">
          <div className="analytics-panel-head"><div><div className="label">Traffic-Verlauf</div><h3>Besucherfluss</h3></div><span className="dim">letzte {data.days} Tage</span></div>
          <AnalyticsTrend items={data.trend || []} />
        </section>
        <section className="panel analytics-panel">
          <div className="analytics-panel-head"><div><div className="label">Geräte</div><h3>Verteilung</h3></div></div>
          <AnalyticsBars items={data.devices} />
        </section>
        <section className="panel analytics-panel">
          <div className="analytics-panel-head"><div><div className="label">Akquisition</div><h3>Traffic-Quellen</h3></div></div>
          <AnalyticsBars items={data.sources} />
        </section>
      </div>

      <div className="analytics-grid analytics-grid-2">
        <section className="panel analytics-panel"><div className="analytics-panel-head"><div><div className="label">Inhalte</div><h3>Top-Artikel</h3></div></div><AnalyticsTable columns={articleColumns} rows={data.topArticles} /></section>
        <section className="panel analytics-panel"><div className="analytics-panel-head"><div><div className="label">Seiten</div><h3>Top-Aufrufe</h3></div></div><AnalyticsTable columns={pageColumns} rows={data.topPages} /></section>
      </div>

      <div className="analytics-grid analytics-grid-2">
        <section className="panel analytics-panel"><div className="analytics-panel-head"><div><div className="label">Navigation</div><h3>Einstiegsseiten</h3></div></div><AnalyticsTable columns={pathColumns("visits", "Besuche")} rows={data.entryPages} /></section>
        <section className="panel analytics-panel"><div className="analytics-panel-head"><div><div className="label">Navigation</div><h3>Ausstiegsseiten</h3></div></div><AnalyticsTable columns={pathColumns("exits", "Ausstiege")} rows={data.exitPages} /></section>
      </div>

      <div className="analytics-grid analytics-grid-2">
        <section className="panel analytics-panel"><div className="analytics-panel-head"><div><div className="label">Interne Suche</div><h3>Häufigste Suchbegriffe</h3></div></div><AnalyticsTable columns={[
          { key: "query", label: "Begriff", render: (row) => <strong>{row.query}</strong> },
          { key: "searches", label: "Suchen", render: (row) => analyticsNumber(row.searches) },
          { key: "sessions", label: "Sitzungen", render: (row) => analyticsNumber(row.sessions) },
        ]} rows={data.searchTerms} /></section>
        <section className="panel analytics-panel"><div className="analytics-panel-head"><div><div className="label">Kampagnen</div><h3>UTM-Quellen</h3></div></div><AnalyticsTable columns={[
          { key: "campaign", label: "Kampagne", render: (row) => <strong>{row.campaign}</strong> },
          { key: "source", label: "Quelle", render: (row) => row.source || "-" },
          { key: "medium", label: "Medium", render: (row) => row.medium || "-" },
          { key: "sessions", label: "Sitzungen", render: (row) => analyticsNumber(row.sessions) },
        ]} rows={data.campaigns} /></section>
      </div>

      <section className="panel analytics-panel">
        <div className="analytics-panel-head"><div><div className="label">Qualität</div><h3>Verhalten und Technik</h3></div></div>
        <div className="analytics-quality">
          <div><strong>{analyticsDuration(data.averageDurationSec)}</strong><span>durchschnittliche Verweildauer</span></div>
          <div><strong>{Number(data.averageScroll || 0).toFixed(0)}%</strong><span>durchschnittliche Scrolltiefe</span></div>
          <div><strong>{analyticsNumber(data.durationSamples)}</strong><span>ausgewertete Verweildauern</span></div>
        </div>
        <div className="analytics-grid analytics-grid-2 analytics-tech-grid">
          <div><div className="label">Browser</div><AnalyticsBars items={data.browsers} /></div>
          <div><div className="label">Betriebssysteme</div><AnalyticsBars items={data.operatingSystems} /></div>
          <div><div className="label">Website-Sprache</div><AnalyticsBars items={data.languages} /></div>
        </div>
      </section>

      <section className="panel analytics-panel">
        <div className="analytics-panel-head"><div><div className="label">Google Search Console</div><h3>Top-Keywords und Landingpages</h3></div><span className="dim">letzte 28 Tage · finale Daten</span></div>
        {gsc.status === "not_configured" ? (
          <p className="mx-hinweis">{gsc.message} Setze <span className="mono">GOOGLE_SEARCH_CONSOLE_PROPERTY</span> und einen OAuth-Refresh-Token oder einen kurzlebigen Access-Token in der Serverumgebung.</p>
        ) : gsc.status !== "ok" ? (
          <p className="an-error">{gsc.message || "Search Console konnte nicht geladen werden."}</p>
        ) : (
          <AnalyticsTable columns={gscColumns} rows={gsc.rows} empty="Für diesen Zeitraum liegen keine Suchanfragen vor." />
        )}
      </section>

      {error && <p className="an-error">{error}</p>}
      {loading && <p className="dim mono">Aktualisiere ...</p>}
    </div>
  );
}

const KARTE_STATUS = {
  queued: "wartet",
  running: "läuft",
  completed: "fertig",
  failed: "fehlgeschlagen",
  cancelled: "abgebrochen",
};

const KARTE_SCHRITT_STATUS = {
  offen: "offen",
  laeuft: "läuft",
  fertig: "fertig",
  fehler: "Fehler",
};

// Die Zielseite der Karte. Die Stoffseite darüber sagt, welcher Wirkstoff noch
// keinen Knoten hat; hier steht das Gegenstück: wieviel von der Allowlist
// überhaupt in der Datenbank angekommen ist.
//
// Der Anlass ist wörtlich: die Convergence-Erweiterung vom 2026-08-25 brachte
// 403 Zielproteine und 37 Analyse-Endpunkte dazu, alle im Code. In der Karte
// stand davon keiner, weil seitdem kein Seed lief, und die Verwaltung meldete
// weiter „alle Stoffe haben einen Knoten". Eine Lücke, die nur die eine Seite
// zählt, ist keine Anzeige, sondern eine beruhigende Zahl.
const ABDECKUNG_ZEILEN = [
  {
    id: "kern",
    label: "Kernliste",
    hinweis: "Die handkuratierten Ziele aus zielklassen.py.",
  },
  {
    id: "analyse",
    label: "Analyseziele",
    hinweis: "Die Convergence-Erweiterung aus analyseziele.py. Sie hängt als Ganzes am Schritt „Seed“.",
  },
  {
    id: "endpunkte",
    label: "Analyse-Endpunkte",
    hinweis: "Virtuelle Ziele wie „Cholestase“ oder „Herzfrequenz“. Sie tragen bewusst keine UniProt-Nummer.",
  },
  {
    id: "gruppen",
    label: "Zielgruppen vollständig",
    hinweis: "Eine unvollständige Gruppe antwortet still falsch: mTORC1 ohne RPTOR ist nicht mTORC1, sondern mTOR überhaupt.",
  },
];

function KarteAbdeckung({ analyse }) {
  if (!analyse) return null;
  const konvergenz = analyse.konvergenz || {};
  const zeilen = ABDECKUNG_ZEILEN
    .map((zeile) => ({ ...zeile, wert: analyse[zeile.id] }))
    .filter((zeile) => zeile.wert);
  const luecken = zeilen.filter((zeile) => zeile.wert.fehlend > 0);
  const konvergenzFehlt = (konvergenz.fehlend || []).length;

  return (
    <section className="panel karte-abdeckung">
      <div className="label">Was von der Allowlist in der Karte steht</div>
      <h3>
        {luecken.length
          ? "Die Karte ist hinter dem Code"
          : "Karte und Allowlist stimmen überein"}
      </h3>
      <dl className="luna-facts">
        {zeilen.map((zeile) => (
          <div key={zeile.id}>
            <dt title={zeile.hinweis}>{zeile.label}</dt>
            <dd className={zeile.wert.fehlend ? "karte-fehlt" : ""}>
              {BB.num(zeile.wert.soll - zeile.wert.fehlend)} von {BB.num(zeile.wert.soll)}
            </dd>
          </div>
        ))}
        <div>
          <dt title="Nur diese Ziele erzeugen in der mehrstufigen Convergence einen Befund. Was hier fehlt, wird stillschweigend übersprungen.">
            Convergence-Ziele erreichbar
          </dt>
          <dd className={konvergenzFehlt ? "karte-fehlt" : ""}>
            {BB.num(konvergenz.aufgeloest || 0)} von {BB.num(konvergenz.gesamt || 0)}
          </dd>
        </div>
        <div>
          <dt title="Gerichtete Protein-zu-Protein-Kanten aus SIGNOR. Ohne sie endet jeder mehrstufige Pfad nach der Bindung.">
            SIGNOR-Signalkanten
          </dt>
          <dd className={analyse.signalkanten ? "" : "karte-fehlt"}>
            {BB.num(analyse.signalkanten || 0)}
          </dd>
        </div>
      </dl>

      {(luecken.length > 0 || konvergenzFehlt > 0) && (
        <details className="karte-luecken">
          <summary>Was genau fehlt</summary>
          {luecken.map((zeile) => {
            const beispiele = zeile.wert.beispiele || [];
            return (
              <p key={zeile.id}>
                <strong>{zeile.label}:</strong>{" "}
                <span className="mono">{beispiele.join(", ")}</span>
                {zeile.wert.fehlend > beispiele.length && (
                  <span> … und {BB.num(zeile.wert.fehlend - beispiele.length)} weitere</span>
                )}
                <br />
                <small>{zeile.hinweis}</small>
              </p>
            );
          })}
          {konvergenzFehlt > 0 && (
            <p>
              <strong>Convergence-Ziele:</strong>{" "}
              <span className="mono">{konvergenz.fehlend.join(", ")}</span>
              <br />
              <small>
                Diese Ziele stehen in der PoC-Liste, haben aber keinen Knoten.
                Die Analyse überspringt sie ohne Fehlermeldung, im Report fehlen
                sie einfach.
              </small>
            </p>
          )}
          <p>
            <small>
              Der Schritt „Seed“ legt Ziele und Endpunkte an, „SIGNOR“ die
              gerichteten Signalkanten. Die {BB.num(analyse.nichtProtein || 0)}{" "}
              Nicht-Proteinziele aus der Fachliste fehlen hier absichtlich: sie
              bekommen keinen Platzhalter-Knoten.
            </small>
          </p>
        </details>
      )}
    </section>
  );
}

// Die Karte gegen die Wissensbasis abgleichen. Der Knopf legt nur einen
// Auftrag an, gearbeitet wird auf dem Host. Deshalb steht der Worker-Zustand
// gleich daneben: ohne ihn bleibt der Auftrag liegen, und das soll man sehen,
// bevor man drückt und wartet.
function KarteEditor() {
  const notify = useToast();
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState("");
  const [gewaehlt, setGewaehlt] = useState(null);
  const [offen, setOffen] = useState(0);

  useEffect(() => {
    let alive = true;
    const refresh = () => {
      if (!alive) return;
      BB.get("/admin/karte")
        .then((result) => { if (alive) { setData(result); setError(""); } })
        .catch((err) => { if (alive) setError(err.message); })
        .finally(() => { if (alive) setLoading(false); });
    };
    refresh();
    const timer = setInterval(refresh, 4000);
    return () => { alive = false; clearInterval(timer); };
  }, []);

  const schritte = (data && data.schritte) || [];
  const aktiv = gewaehlt || schritte.map((s) => s.id);

  async function starten() {
    setBusy("start");
    try {
      const result = await BB.post("/admin/karte", { schritte: aktiv });
      setData(result);
      notify("Auftrag angelegt. Der Host-Worker nimmt ihn an.");
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy("");
    }
  }

  async function abbrechen(job) {
    if (!confirm("Auftrag abbrechen? Der laufende Schritt wird zu Ende gebracht.")) return;
    setBusy("cancel-" + job.id);
    try {
      setData(await BB.post(`/admin/karte/${job.id}/abbrechen`));
      notify("Abbruch vorgemerkt");
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy("");
    }
  }

  if (loading && !data) return <div className="panel"><Spinner label="Kartenstand wird geladen …" /></div>;
  if (!data) return <div className="panel"><p className="an-error">{error || "Kartenstand konnte nicht geladen werden."}</p></div>;

  const bestand = data.bestand || {};
  const worker = data.worker || {};
  const auftraege = data.auftraege || [];
  const laufend = auftraege.find((job) => job.status === "running" || job.status === "queued");
  const ohneKnoten = bestand.ohneKnoten || [];
  const ohneZiel = bestand.ohneZiel || [];
  const abdeckung = bestand.analyse || {};
  // Die drei Mengen, die der Seed selbst anlegt. Die Gruppen stehen bewusst
  // nicht darin: sie sind eine Sicht auf dieselben Proteine und wuerden hier
  // doppelt zaehlen.
  const zieleFehlend = ["kern", "analyse", "endpunkte"]
    .reduce((summe, id) => summe + ((abdeckung[id] || {}).fehlend || 0), 0);

  return (
    <div className="luna-queue stack">
      <div className="luna-overview">
        <section className="panel luna-controls">
          <div className="spread luna-panel-head">
            <div>
              <div className="label">Gegen die Wissensbasis</div>
              <h3>Karte aktualisieren</h3>
            </div>
            <span className={"luna-worker-dot" + (worker.online ? " online" : "")}>
              {worker.online ? "Worker online" : "Worker offline"}
            </span>
          </div>

          <p className="luna-detail">
            {ohneKnoten.length
              ? `${ohneKnoten.length} von ${bestand.stoffe} Stoffen haben noch keinen Knoten in der Karte.`
              : `Alle ${bestand.stoffe} Stoffe haben einen Knoten.`}
            {" "}
            {ohneZiel.length
              ? `${ohneZiel.length} davon hängen an keinem Zielprotein.`
              : "Jeder hängt an mindestens einem Zielprotein."}
          </p>

          {zieleFehlend > 0 && (
            <p className="luna-warning">
              {BB.num(zieleFehlend)} Ziele und Endpunkte aus der Allowlist haben
              noch keinen Knoten. Der Schritt „Seed“ legt sie an; die Quellen
              danach finden nur, wofür ein Ziel schon dasteht.
            </p>
          )}

          <details className="karte-schritte">
            <summary>Schritte wählen ({aktiv.length} von {schritte.length})</summary>
            {schritte.map((schritt) => (
              <label className="karte-schritt" key={schritt.id}>
                <input
                  type="checkbox"
                  checked={aktiv.includes(schritt.id)}
                  onChange={(event) => setGewaehlt(
                    event.target.checked
                      ? [...aktiv, schritt.id]
                      : aktiv.filter((id) => id !== schritt.id))}
                />
                <span><strong>{schritt.label}</strong><small>{schritt.hinweis}</small></span>
              </label>
            ))}
          </details>

          <button
            className="btn"
            disabled={!!laufend || !aktiv.length || busy === "start"}
            onClick={starten}
          >
            {busy === "start" ? "Wird angelegt …" : "Karte aktualisieren"}
          </button>
          {!!laufend && (
            <p className="luna-warning">
              Auftrag #{laufend.id} {KARTE_STATUS[laufend.status]}. Es läuft immer nur einer.
            </p>
          )}
          {!worker.online && !laufend && (
            <p className="luna-warning">
              Der Host-Worker meldet sich nicht. Der Auftrag bleibt stehen, bis
              <code className="mono"> python3 -m app.mk_queue_worker </code> auf dem Host läuft.
            </p>
          )}
        </section>

        <section className="panel luna-worker">
          <div className="label">Bestand</div>
          <h3>{BB.num(bestand.knoten || 0)} Knoten, {BB.num(bestand.kanten || 0)} Kanten</h3>
          <dl className="luna-facts">
            <div><dt>Zielproteine</dt><dd>{BB.num(bestand.ziele || 0)}</dd></div>
            {Object.entries(bestand.jeQuelle || {}).map(([quelle, n]) => (
              <div key={quelle}><dt>{quelle}</dt><dd>{BB.num(n)}</dd></div>
            ))}
            <div><dt>Host</dt><dd>{worker.host || "noch nicht verbunden"}</dd></div>
            <div><dt>Lebenszeichen</dt><dd>{worker.heartbeat ? BB.when(worker.heartbeat) : "noch keines"}</dd></div>
          </dl>
          {(ohneKnoten.length > 0 || ohneZiel.length > 0) && (
            <details className="karte-luecken">
              <summary>Welche Stoffe fehlen</summary>
              {ohneKnoten.length > 0 && (
                <p><strong>Ohne Knoten:</strong> <span className="mono">{ohneKnoten.join(", ")}</span></p>
              )}
              {ohneZiel.length > 0 && (
                <p>
                  <strong>Ohne Zielprotein:</strong> <span className="mono">{ohneZiel.join(", ")}</span>
                  <br />
                  <small>
                    Ein Lauf schließt diese Lücke nur, wo es eine Messung gibt.
                    Peptide und Pflanzenauszüge bleiben oft ohne, und das ist
                    kein Fehler, sondern die Datenlage.
                  </small>
                </p>
              )}
            </details>
          )}
        </section>
      </div>

      <KarteAbdeckung analyse={bestand.analyse} />

      {error && <p className="an-error">{error}</p>}

      {!auftraege.length ? (
        <Empty mark="◌" title="Noch kein Lauf">
          Der erste Auftrag baut die Karte aus molecules.json und der Allowlist neu auf.
        </Empty>
      ) : (
        <div className="luna-jobs" aria-live="polite">
          {auftraege.map((job) => (
            <article className={"panel luna-job s-" + job.status} key={job.id}>
              <div className="luna-job-main">
                <div className="row" style={{ gap: "0.5rem", flexWrap: "wrap" }}>
                  <span className={"pill luna-state s-" + job.status}>{KARTE_STATUS[job.status] || job.status}</span>
                  <span className="pill">{job.fertigeSchritte} von {job.schritte.length} Schritten</span>
                  {job.sicherung && <span className="pill">gesichert</span>}
                </div>
                <div className="crow-meta mono">
                  Auftrag #{job.id} · {job.angefordertVon || "Host"} · {BB.when(job.createdAt)}
                </div>

                {job.status === "running" && (
                  <div className="luna-progress">
                    <div className="spread">
                      <span>{job.schritt || "läuft"}</span>
                      <strong className="mono">{job.fortschritt}%</strong>
                    </div>
                    <div className="luna-progress-track" role="progressbar"
                         aria-valuemin="0" aria-valuemax="100" aria-valuenow={job.fortschritt}>
                      <span style={{ transform: `scaleX(${job.fortschritt / 100})` }} />
                    </div>
                  </div>
                )}

                <ol className="karte-lauf">
                  {job.schritte.map((schritt) => (
                    <li key={schritt.id} className={"s-" + schritt.status}>
                      <span>{schritt.label}</span>
                      <span className="mono">
                        {KARTE_SCHRITT_STATUS[schritt.status] || schritt.status}
                        {schritt.sekunden ? ` · ${schritt.sekunden} s` : ""}
                      </span>
                      {schritt.ausgabe && <pre>{schritt.ausgabe}</pre>}
                    </li>
                  ))}
                </ol>

                {job.bilanz && job.bilanz.nachher && (
                  <p className="luna-result">
                    {BB.num(job.bilanz.nachher.knoten)} Knoten ({job.bilanz.knotenNeu >= 0 ? "+" : ""}
                    {BB.num(job.bilanz.knotenNeu)}), {BB.num(job.bilanz.nachher.kanten)} Kanten
                    ({job.bilanz.kantenNeu >= 0 ? "+" : ""}{BB.num(job.bilanz.kantenNeu)}).
                  </p>
                )}
                {job.sicherung && <p className="crow-meta mono">Sicherung: {job.sicherung}</p>}
                {job.fehler && <pre className="luna-error">{job.fehler}</pre>}
              </div>

              <div className="luna-job-side">
                {(job.status === "queued" || job.status === "running") && (
                  <button className="btn ghost" disabled={busy === "cancel-" + job.id}
                          onClick={() => abbrechen(job)}>
                    Abbrechen
                  </button>
                )}
              </div>
            </article>
          ))}
        </div>
      )}
    </div>
  );
}

// Der zusammengefuehrte Durchgang, in der Form des bestehenden Scorers:
// Faktorbalken mit Gewicht, darunter die Aufschluesselung.
//
// Er steht in der Verwaltung und nicht in der Auswertung, weil Halbwerte und
// Gewichte gesetzt und nicht kalibriert sind. Deshalb steht hier auch kein
// Satz, der die Zahl deutet -- nur, woraus sie entstanden ist.
const ZWECK_LABEL = {
  bulk: "Aufbau", cut: "Diät", recomp: "Recomp",
  recovery: "Erholung", longevity: "Langlebigkeit",
};

const RICHTUNG_PFEIL = { hoch: "▲", runter: "▼", offen: "–" };

/* Die hybride Zahl. Die Rechnung bleibt die Basis; wo sie keine gemessene
   Stärke im Weg hat, trägt die gepflegte Organlast. Beide Anteile stehen da,
   sonst sieht man der Zahl nicht an, welche Seite sie gerade trägt, und
   genau das ist bei den anabolen Steroiden der Regelfall: 16 der 22 haben in
   den freien Datenbanken keine einzige gemessene AR-Bindung. */
function Mischung({ mischung }) {
  if (!mischung) return null;
  const anteil = mischung.abdeckung;
  return (
    <div className="zsp-mischung">
      <div className="zsp-mischung-balken" title={`${Math.round(anteil * 100)} % gerechnet`}>
        <div className="zsp-mischung-gerechnet" style={{ width: `${anteil * 100}%` }} />
      </div>
      <small>
        <strong>{Math.round(anteil * 100)} %</strong> gerechnet ({Math.round(mischung.gerechnet)})
        {" · "}
        <strong>{Math.round((1 - anteil) * 100)} %</strong> gepflegt ({Math.round(mischung.kuratiert)})
        {anteil === 0 && (
          <em>, kein Weg trägt eine gemessene Stärke</em>
        )}
      </small>
    </div>
  );
}

function FaktorBalken({ faktor }) {
  const ton = faktor.score >= 70 ? "" : faktor.score >= 40 ? "warn" : "hot";
  return (
    <div className="bar zsp-faktor-bar">
      <div className="bar-head">
        <span className="k">
          {faktor.label}
          <em className="zsp-roh" title="Rohsumme vor der Sättigung">
            roh {faktor.roh > 0 ? "+" : ""}{faktor.roh.toFixed(2)}
          </em>
        </span>
        <span className="v">
          <em className="an-dim-gewicht" title="Anteil am gewichteten Mittel">
            {Math.round(faktor.gewicht * 100)} %
          </em>
          {Math.round(faktor.score)}
        </span>
      </div>
      <div className="bar-track">
        <div className={"bar-fill " + ton}
             style={{ transform: `scaleX(${faktor.score / 100})` }} />
      </div>
    </div>
  );
}

/* Zwei gegeneinander laufende Balken. Genau hier lohnt das Bild: dass ein
   Stoff ein Ziel hochzieht und ein anderer es herunterzieht, ist als Zahl
   eine Behauptung und als Gegenüberstellung eine Beobachtung. */
function PaarWaage({ eintrag }) {
  const a = eintrag.aWert || 0;
  const b = eintrag.bWert || 0;
  const max = Math.max(Math.abs(a), Math.abs(b), 0.0001);
  /* Dieselbe Form wie in der Auswertung: eine Spurzeile je Stoff, der Name an
     dem Ende, an dem sein Balken liegt. Bewusst hier noch einmal geschrieben,
     die Verwaltung ist ein Autorenwerkzeug und haengt nicht an auswertung.jsx.
     Der genaue Wert steht als Titel am Balken, das ist der Unterschied zur
     Nutzeransicht. */
  const seite = (name, wert, treiber) => {
    const runter = wert < 0;
    const anteil = (Math.abs(wert) / max) * 50;
    const marke = (
      <span className="zsp-waage-marke">
        <span className="zsp-waage-name">
          {runter ? "\u25bc " + name : name + " \u25b2"}
        </span>
        {treiber && <code className="zsp-waage-treiber">{treiber}</code>}
      </span>
    );
    return (
      <div className="zsp-waage-zeile">
        {runter ? marke : <span />}
        <span className="zsp-waage-spur" title={`${name}: ${wert.toFixed(3)}`}>
          <span className="zsp-waage-mitte" />
          <span className={"zsp-waage-balken " + (runter ? "runter" : "hoch")}
                style={{ width: `${anteil}%`,
                         left: runter ? `${50 - anteil}%` : "50%" }} />
        </span>
        {runter ? <span /> : marke}
      </div>
    );
  };
  return (
    <div className="zsp-paar">
      <div className="zsp-paar-kopf">
        <strong>{eintrag.label}</strong>
        {!eintrag.zeitgleich && <span className="zsp-versetzt">zeitlich versetzt</span>}
      </div>
      <div className="zsp-waage">
        {seite(eintrag.a, a, (eintrag.ueber || [])[0])}
        {seite(eintrag.b, b, (eintrag.ueber || [])[1])}
      </div>
      <p className="zsp-paar-grund">
        {eintrag.grund}
        {eintrag.timingGrund ? ` · ${eintrag.timingGrund}` : ""}
      </p>
    </div>
  );
}

function KategorieBefund({ eintrag }) {
  return (
    <div className="zsp-kategorie">
      <div className="zsp-kategorie-kopf">
        <strong>{eintrag.kategorie}</strong>
        <span>{eintrag.betrag.toFixed(2)}</span>
      </div>
      <ul className="zsp-punkte">
        {eintrag.punkte.map((punkt) => (
          <li key={punkt.endpoint}>
            <span className="zsp-punkt-name">
              {RICHTUNG_PFEIL[punkt.richtung] || ""} {punkt.label}
            </span>
            <span className="zsp-punkt-wert">
              {punkt.betrag.toFixed(2)}
              <em title="Konfidenz dieses Befunds">k {punkt.konfidenz.toFixed(2)}</em>
            </span>
            <div className="zsp-durch">
              {punkt.durch.length
                ? punkt.durch.map((d) => (
                    <span key={d.slug + d.ueber}>
                      {d.label} {RICHTUNG_PFEIL[d.richtung] || ""} über <code>{d.ueber}</code>
                      {/* Ohne gemessene Affinität im Weg trägt der Betrag keine
                          Ordnung. Das muss dastehen, sonst liest man eine
                          Reihenfolge, die es nicht gibt. */}
                      {d.staerkeordnung === false && (
                        <em className="zsp-offen" title="Der Weg trägt keine gemessene Affinität. Der Betrag ordnet hier nicht.">
                          {" "}ohne Stärkeordnung
                        </em>
                      )}
                    </span>
                  ))
                : <span className="zsp-offen">Wirkrichtung nicht belegt</span>}
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

/* Eine einzelne Stellschraube. Beide Sätze stehen dabei: was sie tut, und was
   passiert, wenn man sie verstellt. Eine Zahl in einem Formular ohne den
   zweiten Satz wird entweder nie oder aus dem Bauch heraus angefasst. */
function Stellschraube({ schraube, wert, onChange }) {
  const abweichend = String(wert) !== String(schraube.vorgabe);
  const setzen = (roh) => onChange(schraube.key, roh);

  let feld;
  if (schraube.art === "schalter") {
    feld = (
      <label className="zsp-schraube-schalter">
        <input type="checkbox" checked={!!wert}
               onChange={(e) => setzen(e.target.checked)} />
        {" "}{wert ? "an" : "aus"}
      </label>
    );
  } else if (schraube.art === "auswahl") {
    feld = (
      <select className="input" value={wert}
              onChange={(e) => setzen(e.target.value)}>
        {schraube.optionen.map((o) => <option key={o} value={o}>{o}</option>)}
      </select>
    );
  } else {
    feld = (
      <input className="input" type="number" value={wert}
             min={schraube.min === null ? undefined : schraube.min}
             max={schraube.max === null ? undefined : schraube.max}
             step={schraube.art === "ganzzahl" ? (schraube.schritt || 1) : schraube.schritt}
             onChange={(e) => setzen(
               e.target.value === "" ? schraube.vorgabe
                 : (schraube.art === "ganzzahl" ? parseInt(e.target.value, 10)
                                                : parseFloat(e.target.value)))} />
    );
  }

  return (
    <div className={"zsp-schraube" + (abweichend ? " zsp-abweichend" : "")}>
      <div>
        <div className="zsp-schraube-kopf">
          {schraube.label}<code>{schraube.key}</code>
        </div>
        <p>{schraube.erklaerung}</p>
        <p className="zsp-folge">{schraube.folge}</p>
      </div>
      <div className="zsp-schraube-wert">
        {feld}
        <small>
          Vorgabe {String(schraube.vorgabe)}
          {abweichend && (
            <>
              {" · "}
              <button type="button" className="zsp-pfad-knopf"
                      onClick={() => setzen(schraube.vorgabe)}>zurück</button>
            </>
          )}
        </small>
      </div>
    </div>
  );
}

/* Die Stellschrauben der Interaktionsmatrix.

   Gespeichert werden nur Abweichungen von den Vorgaben im Code. Eine leere
   Ablage heißt damit genau: es gilt der Stand, der in `zusammenspiel.Config`
   steht. Wären hier alle Werte gespiegelt, liefe jede Änderung an einer
   Vorgabe an der Datenbank vorbei, und niemand sähe, welche der beiden gilt.

   Der Entwurf wirkt sofort im Probelauf daneben und erst nach "Übernehmen"
   für jede Auswertung. Eine Zahl, die man nicht vorher an einem echten Stack
   sehen kann, wird nach Gefühl gestellt. */
function ZspStellschrauben({ daten, entwurf, setEntwurf, onUebernehmen, busy }) {
  if (!daten) return null;
  const werte = {};
  daten.schrauben.forEach((s) => {
    werte[s.key] = entwurf[s.key] === undefined ? s.vorgabe : entwurf[s.key];
  });
  const halbwerte = Object.assign({}, entwurf.halbwerte || {});
  const gewichte = entwurf.gewichte || {};

  function schraubeSetzen(key, wert) {
    const naechster = Object.assign({}, entwurf);
    const schraube = daten.schrauben.find((s) => s.key === key);
    if (String(wert) === String(schraube.vorgabe)) delete naechster[key];
    else naechster[key] = wert;
    setEntwurf(naechster);
  }

  function halbwertSetzen(key, wert, vorgabe) {
    const naechste = Object.assign({}, halbwerte);
    if (!wert || wert === vorgabe) delete naechste[key];
    else naechste[key] = wert;
    const naechster = Object.assign({}, entwurf);
    if (Object.keys(naechste).length) naechster.halbwerte = naechste;
    else delete naechster.halbwerte;
    setEntwurf(naechster);
  }

  function gewichtSetzen(zweck, key, wert) {
    const vorgabe = daten.gewichteVorgabe[zweck][key];
    const zeile = Object.assign({}, gewichte[zweck] || {});
    if (wert === vorgabe || Number.isNaN(wert)) delete zeile[key];
    else zeile[key] = wert;
    const naechste = Object.assign({}, gewichte);
    if (Object.keys(zeile).length) naechste[zweck] = zeile;
    else delete naechste[zweck];
    const naechster = Object.assign({}, entwurf);
    if (Object.keys(naechste).length) naechster.gewichte = naechste;
    else delete naechster.gewichte;
    setEntwurf(naechster);
  }

  const abweichungen = daten.schrauben.filter((s) => String(werte[s.key]) !== String(s.vorgabe)).length
    + Object.keys(halbwerte).length
    + Object.values(gewichte).reduce((n, z) => n + Object.keys(z).length, 0);
  const geaendert = JSON.stringify(entwurf) !== JSON.stringify(daten.abweichungen || {});

  return (
    <section className="panel">
      <div className="label">Stellschrauben</div>
      <h3>Wie die Matrix rechnet</h3>
      <p className="luna-detail">
        Die Zahlen sind gesetzt und nicht kalibriert. Es gibt keine Studie zu
        Mischkonsum, gegen die sich ein Halbwert prüfen ließe. Was es gibt, sind
        echte Stacks, die gepflegte Bewertung daneben und
        {" "}<code className="mono">werkzeuge/_last_vergleich.py</code>. Was hier steht,
        wirkt sofort im Probelauf unten und erst nach „Übernehmen" für jede
        Auswertung.
      </p>

      {daten.gruppen.map((gruppe) => (
        <details className="zsp-faktor" key={gruppe} open={gruppe === "Paare"}>
          <summary><strong>{gruppe}</strong></summary>
          <div className="zsp-schrauben">
            {daten.schrauben.filter((s) => s.gruppe === gruppe).map((s) => (
              <Stellschraube key={s.key} schraube={s} wert={werte[s.key]}
                             onChange={schraubeSetzen} />
            ))}
          </div>
        </details>
      ))}

      <details className="zsp-faktor">
        <summary><strong>Halbwerte je Faktor</strong></summary>
        <p className="luna-detail">{daten.halbwertErklaerung}</p>
        <table className="zsp-matrix">
          <thead>
            <tr><th>Faktor</th><th>Halbwert</th><th>Vorgabe</th></tr>
          </thead>
          <tbody>
            {daten.faktoren.map((f) => (
              <tr key={f.key}>
                <td>{f.label}</td>
                <td>
                  <input className="input" type="number" step="0.1" min="0.1"
                         value={halbwerte[f.key] === undefined ? f.vorgabe : halbwerte[f.key]}
                         onChange={(e) => halbwertSetzen(
                           f.key, parseFloat(e.target.value), f.vorgabe)} />
                </td>
                <td className="zsp-summe">{f.vorgabe}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </details>

      <details className="zsp-faktor">
        <summary><strong>Gewichte je Zweck</strong></summary>
        <p className="luna-detail">{daten.gewichtErklaerung}</p>
        <table className="zsp-matrix">
          <thead>
            <tr>
              <th>Zweck</th>
              {daten.faktoren.map((f) => <th key={f.key}>{f.label}</th>)}
              <th>Summe</th>
            </tr>
          </thead>
          <tbody>
            {Object.keys(daten.gewichte).map((zweck) => {
              const zeile = daten.faktoren.map((f) => {
                const eigen = (gewichte[zweck] || {})[f.key];
                return eigen === undefined ? daten.gewichteVorgabe[zweck][f.key] : eigen;
              });
              const summe = zeile.reduce((a, b) => a + b, 0);
              return (
                <tr key={zweck}>
                  <td>{ZWECK_LABEL[zweck] || (zweck === "_" ? "ohne Zweck" : zweck)}</td>
                  {daten.faktoren.map((f, i) => (
                    <td key={f.key}>
                      <input type="number" className="input" step="0.01" min="0" max="1"
                             value={zeile[i]}
                             onChange={(e) => gewichtSetzen(
                               zweck, f.key, parseFloat(e.target.value))} />
                    </td>
                  ))}
                  <td className={"zsp-summe" + (summe <= 0 ? " hot" : "")}>
                    {summe.toFixed(2)}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <p className="luna-detail">
          Die Summe muss nicht 1,00 ergeben: gemittelt wird durch die Summe der
          Gewichte. Sie zeigt trotzdem, ob eine Zeile sich beim Verstellen
          verschoben hat.
        </p>
      </details>

      <div className="zsp-einstellungen-fuss">
        <button className="btn" disabled={busy || !geaendert}
                onClick={() => onUebernehmen(entwurf)}>
          {busy ? "Speichert …" : "Übernehmen"}
        </button>
        <button className="btn" disabled={busy || !Object.keys(entwurf).length}
                onClick={() => setEntwurf({})}>
          Auf die Vorgaben zurücksetzen
        </button>
        <small>
          {abweichungen === 0
            ? "Keine Abweichung von den Vorgaben."
            : `${abweichungen} Abweichung${abweichungen === 1 ? "" : "en"} von den Vorgaben.`}
          {geaendert && " Noch nicht übernommen."}
          {daten.stand && daten.stand.updatedAt
            ? ` Zuletzt gespeichert ${daten.stand.updatedAt}.` : ""}
        </small>
      </div>
    </section>
  );
}

function ZusammenspielEditor() {
  const notify = useToast();
  const [text, setText] = useState("testosteron:500 +anastrozol:1");
  const [zweck, setZweck] = useState("bulk");
  const [daten, setDaten] = useState(null);
  const [busy, setBusy] = useState(false);
  const [speichert, setSpeichert] = useState(false);
  const [error, setError] = useState("");
  // Die gespeicherten Stellschrauben und der Entwurf daneben. Der Entwurf geht
  // in jeden Probelauf mit, ohne ihn zu speichern: eine Zahl, die man nicht
  // vorher an einem echten Stack sehen kann, wird nach Gefühl gestellt.
  const [schrauben, setSchrauben] = useState(null);
  const [entwurf, setEntwurf] = useState({});

  useEffect(() => {
    let aktiv = true;
    BB.get("/admin/zusammenspiel/einstellungen").then((d) => {
      if (!aktiv) return;
      setSchrauben(d);
      setEntwurf(d.abweichungen || {});
    }).catch((err) => aktiv && setError(err.message));
    return () => { aktiv = false; };
  }, []);

  async function rechnen(event) {
    event.preventDefault();
    setBusy(true);
    setError("");
    try {
      const antwort = await BB.post("/admin/zusammenspiel",
                                    { stoffe: text, zweck, einstellungen: entwurf });
      setDaten(antwort);
      if (antwort.einstellungen) setSchrauben(antwort.einstellungen);
    } catch (err) {
      setError(err.message);
      setDaten(null);
    } finally {
      setBusy(false);
    }
  }

  async function uebernehmen(werte) {
    setSpeichert(true);
    try {
      const d = await BB.patch("/admin/zusammenspiel/einstellungen", { werte });
      setSchrauben(d);
      setEntwurf(d.abweichungen || {});
      notify("Stellschrauben übernommen. Sie gelten ab der nächsten Auswertung.");
    } catch (err) {
      notify(err.message, "error");
    } finally {
      setSpeichert(false);
    }
  }

  const bewertung = daten && daten.bewertung;
  const ergebnis = daten && daten.ergebnis;
  const probelauf = daten && daten.gespeicherteEinstellungen === false;

  return (
    <div className="luna-queue stack zsp">
      <ZspStellschrauben daten={schrauben} entwurf={entwurf}
                         setEntwurf={setEntwurf} onUebernehmen={uebernehmen}
                         busy={speichert} />

      <section className="panel">
        <div className="label">Interaktionsmatrix</div>
        <h3>Stack rechnen</h3>
        <p className="luna-detail">
          Ein Wort je Stoff: <code className="mono">slug:dosis@zeitpunkt</code>,
          ein <code className="mono">+</code> davor macht ihn zur Absicherung.
          Zeitpunkte sind <code className="mono">morgens</code>,{" "}
          <code className="mono">pre_workout</code>, <code className="mono">abends</code>.
        </p>
        <form className="zsp-form" onSubmit={rechnen}>
          <input className="input" value={text} spellCheck={false}
                 onChange={(e) => setText(e.target.value)}
                 placeholder="oxymetholon:100 +tudca:1000@morgens" />
          <select className="input" value={zweck} onChange={(e) => setZweck(e.target.value)}>
            {Object.entries(ZWECK_LABEL).map(([id, label]) => (
              <option key={id} value={id}>{label}</option>
            ))}
          </select>
          <button className="btn" disabled={busy || !text.trim()}>
            {busy ? "Rechnet …" : "Rechnen"}
          </button>
        </form>
        {error && <p className="an-error">{error}</p>}
      </section>

      {bewertung && (
        <>
          <section className="panel zsp-kopf">
            <div className="zsp-score">
              <div className="zsp-score-zahl">{Math.round(bewertung.score)}</div>
              <div className="zsp-score-text">
                <div className="label">Score</div>
                <small>{ZWECK_LABEL[bewertung.zweck] || bewertung.zweck || "ohne Zweck"}</small>
              </div>
            </div>
            {/* Die Konfidenz steht neben der Zahl und nicht darin. Sonst kann
                man nicht mehr unterscheiden, ob der Stack schlecht ist oder
                die Datenlage dünn. */}
            <div className="zsp-konfidenz">
              <div className="bar">
                <div className="bar-head">
                  <span className="k">Konfidenz</span>
                  <span className="v">{Math.round(bewertung.konfidenz * 100)} %</span>
                </div>
                <div className="bar-track">
                  <div className="bar-fill"
                       style={{ transform: `scaleX(${bewertung.konfidenz})` }} />
                </div>
              </div>
              <small>
                {bewertung.konfidenzFaktoren.anzahlStoffe} Stoffe, Stoffzahlfaktor{" "}
                {bewertung.konfidenzFaktoren.stoffzahl.toFixed(2)}
                {bewertung.paareOhneRichtung > 0 && (
                  <> · {bewertung.paareOhneRichtung} Paare ohne belegte Wirkrichtung,
                  nicht bewertet</>
                )}
              </small>
            </div>
            <p className="luna-warning zsp-hinweis">{bewertung.herleitung.hinweis}</p>
          </section>

          <section className="panel">
            <div className="label">Faktoren</div>
            {bewertung.faktoren.map((faktor) => (
              <details className="zsp-faktor" key={faktor.key}
                       open={faktor.befunde.length > 0 && faktor.gewicht >= 0.2}>
                <summary><FaktorBalken faktor={faktor} /></summary>
                <Mischung mischung={faktor.mischung} />
                {!faktor.befunde.length ? (
                  <p className="zsp-leer">Kein Befund.</p>
                ) : faktor.befundart === "kategorien" ? (
                  faktor.befunde.map((eintrag) => (
                    <KategorieBefund key={eintrag.kategorie} eintrag={eintrag} />
                  ))
                ) : (
                  faktor.befunde.map((eintrag, i) => (
                    <PaarWaage key={eintrag.endpoint + i} eintrag={eintrag} />
                  ))
                )}
              </details>
            ))}
          </section>

          <section className="panel">
            <div className="label">Stoffe</div>
            <dl className="luna-facts">
              {ergebnis.stoffe.map((stoff) => (
                <div key={stoff.slug}>
                  <dt>
                    {stoff.label}
                    {stoff.rolle === "kontrolle" && <em> · Absicherung</em>}
                  </dt>
                  <dd>
                    Dosisfaktor {stoff.dosisfaktor.faktor.toFixed(2)}
                    {stoff.dosisfaktor.gedeckelt ? " (gedeckelt)" : ""} ·
                    Evidenzstufe {stoff.evidenz.stufe} ·
                    {" "}{stoff.erreichteEndpunkte} Endpunkte
                    {stoff.hinweis ? ` · ${stoff.hinweis}` : ""}
                  </dd>
                </div>
              ))}
            </dl>
          </section>
        </>
      )}
    </div>
  );
}

/* --- Bestand --------------------------------------------------------------
   Ein Stoff steht an fünf Stellen: Artikel, bible.db, molecules.json, Karten-
   knoten, Analyseprofil. Jeder Import füllt nur einen Teil davon, und was
   dazwischen nicht zusammenpasst, meldet sonst niemand. Hier steht es
   nebeneinander. Die Prüfung rechnet app/bestand.py, dasselbe Modul, das auch
   werkzeuge/bestand_pruefen.py aufruft. Gespeichert werden nur die Vermerke:
   „bewusst“ heißt gesehen und so gewollt, die Notiz sagt warum. */

const BESTAND_STUFE = { fehler: "Fehler", warnung: "Warnung", hinweis: "Hinweis" };
const BESTAND_KARTE = { cid: "CID", skip: "skip", fehlt: "fehlt" };
const BESTAND_SEITE = 80;

function BestandVermerk({ schluessel, vermerk, mitStatus = true, onGespeichert }) {
  const notify = useToast();
  const [offen, setOffen] = useState(false);
  const [notiz, setNotiz] = useState((vermerk && vermerk.notiz) || "");
  const [busy, setBusy] = useState(false);
  const bewusst = !!(vermerk && vermerk.status === "bewusst");

  const speichern = async (status, text) => {
    setBusy(true);
    try {
      await BB.put("/admin/bestand/vermerk", { schluessel, status, notiz: text });
      setOffen(false);
      onGespeichert();
    } catch (err) {
      notify(err.message || "Konnte nicht gespeichert werden.", "bad");
    } finally {
      setBusy(false);
    }
  };

  if (offen) {
    return (
      <div className="bestand-vermerk-form">
        <textarea className="textarea" rows={2} value={notiz} autoFocus
          placeholder="Warum, was ist geklärt, was fehlt noch …"
          onChange={(e) => setNotiz(e.target.value)} />
        <div className="row" style={{ gap: "0.5rem", flexWrap: "wrap" }}>
          <button type="button" className="btn sm" disabled={busy}
            onClick={() => speichern(bewusst ? "bewusst" : "offen", notiz)}>
            Speichern
          </button>
          <button type="button" className="btn ghost sm" disabled={busy} onClick={() => setOffen(false)}>
            Abbrechen
          </button>
        </div>
      </div>
    );
  }
  return (
    <div className="bestand-vermerk">
      {vermerk && vermerk.notiz && (
        <span className="bestand-notiz" title={(vermerk.von || "") + " · " + (vermerk.updated_at || "")}>
          {vermerk.notiz}
        </span>
      )}
      <span className="row" style={{ gap: "0.4rem", flexWrap: "wrap" }}>
        {mitStatus && (
          <button type="button" className={"pill" + (bewusst ? " on" : "")} disabled={busy}
            title="Gesehen und so gewollt. Zählt dann nicht mehr als offen."
            onClick={() => speichern(bewusst ? "offen" : "bewusst", (vermerk && vermerk.notiz) || "")}>
            {bewusst ? "bewusst so" : "als bewusst markieren"}
          </button>
        )}
        <button type="button" className="pill" onClick={() => setOffen(true)}>
          {vermerk && vermerk.notiz ? "Notiz ändern" : "Notiz"}
        </button>
      </span>
    </div>
  );
}

function BestandPruefung({ pruefung, befunde, mitBewussten, onGespeichert }) {
  const zeigen = befunde.filter((b) => mitBewussten || !b.bewusst);
  if (!zeigen.length) return null;
  return (
    <details className={"bestand-gruppe s-" + pruefung.stufe} open={pruefung.stufe !== "hinweis" && zeigen.length <= 20}>
      <summary>
        <span className={"bestand-stufe s-" + pruefung.stufe}>{BESTAND_STUFE[pruefung.stufe]}</span>
        <strong>{pruefung.label}</strong>
        <span className="mono dim">
          {BB.num(pruefung.offen)} offen{pruefung.bewusst ? " · " + BB.num(pruefung.bewusst) + " bewusst" : ""}
        </span>
      </summary>
      <p className="dim bestand-erklaerung">
        {pruefung.bedeutung} <b>Zu tun:</b> {pruefung.tun}
      </p>
      <ul className="bestand-liste">
        {zeigen.map((b) => (
          <li key={b.schluessel} className={b.bewusst ? "bewusst" : ""}>
            <div>
              <Link to={"/wissen/" + b.slug} className="mono">{b.slug}</Link>
              <span className="bestand-text">{b.text}</span>
            </div>
            <BestandVermerk schluessel={b.schluessel} vermerk={b.vermerk} onGespeichert={onGespeichert} />
          </li>
        ))}
      </ul>
    </details>
  );
}

function BestandKarte({ karte, artikelCid }) {
  if (karte.status === "cid") {
    return (
      <a href={"https://pubchem.ncbi.nlm.nih.gov/compound/" + karte.cid} target="_blank" rel="noopener noreferrer"
        title={karte.name + (artikelCid && artikelCid !== karte.cid ? " · Artikel nennt " + artikelCid : "")}>
        {karte.cid}
      </a>
    );
  }
  if (karte.status === "skip") return <span className="dim" title={karte.grund}>skip</span>;
  return <span className="bestand-fehlt">fehlt</span>;
}

function BestandStoffe({ stoffe, pruefungen, onGespeichert }) {
  const [suche, setSuche] = useState("");
  const [kategorie, setKategorie] = useState("");
  const [karte, setKarte] = useState("");
  const [befund, setBefund] = useState("");
  const [anzahl, setAnzahl] = useState(BESTAND_SEITE);
  const [notizFuer, setNotizFuer] = useState(null);

  const kategorien = useMemo(() => [...new Set(stoffe.map((s) => s.kategorie))].sort(), [stoffe]);
  const label = useMemo(() => Object.fromEntries(pruefungen.map((p) => [p.id, p])), [pruefungen]);
  const q = suche.trim().toLowerCase();
  const gefiltert = stoffe.filter((s) =>
    (!q || s.slug.includes(q) || s.titel.toLowerCase().includes(q))
    && (!kategorie || s.kategorie === kategorie)
    && (!karte || s.karte.status === karte)
    && (!befund || (befund === "*" ? s.befunde.length > 0 : s.befunde.includes(befund))));

  useEffect(() => { setAnzahl(BESTAND_SEITE); }, [suche, kategorie, karte, befund]);

  return (
    <section className="panel">
      <div className="label">Alle Stoffe</div>
      <div className="row" style={{ gap: "0.75rem", flexWrap: "wrap", alignItems: "flex-end" }}>
        <Field label="Suche">
          <input className="input" value={suche} placeholder="Slug oder Titel" onChange={(e) => setSuche(e.target.value)} />
        </Field>
        <Field label="Kategorie">
          <select className="input" value={kategorie} onChange={(e) => setKategorie(e.target.value)}>
            <option value="">alle</option>
            {kategorien.map((k) => <option key={k} value={k}>{k}</option>)}
          </select>
        </Field>
        <Field label="Karte">
          <select className="input" value={karte} onChange={(e) => setKarte(e.target.value)}>
            <option value="">alle</option>
            <option value="cid">mit CID</option>
            <option value="skip">skip</option>
            <option value="fehlt">fehlt</option>
          </select>
        </Field>
        <Field label="Befund">
          <select className="input" value={befund} onChange={(e) => setBefund(e.target.value)}>
            <option value="">egal</option>
            <option value="*">irgendeiner</option>
            {pruefungen.filter((p) => p.offen + p.bewusst > 0).map((p) => (
              <option key={p.id} value={p.id}>{p.label}</option>
            ))}
          </select>
        </Field>
      </div>
      <p className="dim mono">{BB.num(gefiltert.length)} von {BB.num(stoffe.length)}</p>
      <div className="analytics-table-wrap">
        <table className="mx-tab bestand-tabelle">
          <thead>
            <tr>
              <th>Stoff</th><th>Artikel</th><th>Karte</th><th>Knoten</th><th>Profil</th><th>Luna</th><th>Befunde</th>
            </tr>
          </thead>
          <tbody>
            {gefiltert.slice(0, anzahl).map((s) => (
              <React.Fragment key={s.slug}>
                <tr>
                  <td>
                    <Link to={"/wissen/" + s.slug}>{s.titel}</Link>
                    <small className="analytics-subline">{s.slug} · {s.kategorie}</small>
                    {s.notiz && notizFuer !== s.slug && <small className="bestand-notiz">{s.notiz}</small>}
                  </td>
                  <td>
                    {s.leer ? <span className="bestand-fehlt">leer</span> : s.entwurf ? "Entwurf" : "öffentlich"}
                    {s.review === "revise" && <span title={s.reviewNotiz}> · prüfen</span>}
                  </td>
                  <td><BestandKarte karte={s.karte} artikelCid={s.artikelCid} /></td>
                  <td>{s.knoten ? BB.num(s.knoten.kanten) + " Kanten" : <span className="dim">–</span>}</td>
                  <td>{s.profil ? "ja" : <span className="dim">–</span>}</td>
                  <td>
                    {s.luna === "aktiv" ? "in Arbeit"
                      : s.luna ? (LUNA_STATUSES[s.luna] || s.luna)
                      : <span className="dim">–</span>}
                  </td>
                  <td>
                    <span className="bestand-marken">
                      {s.befunde.map((id) => (
                        <span key={id} className={"bestand-stufe s-" + label[id].stufe} title={label[id].bedeutung}>
                          {label[id].label}
                        </span>
                      ))}
                      <button type="button" className="pill" onClick={() => setNotizFuer(notizFuer === s.slug ? null : s.slug)}>
                        {s.notiz ? "Notiz" : "+ Notiz"}
                      </button>
                    </span>
                  </td>
                </tr>
                {notizFuer === s.slug && (
                  <tr className="bestand-notizzeile">
                    <td colSpan={7}>
                      <BestandVermerk schluessel={"notiz:" + s.slug} mitStatus={false}
                        vermerk={s.notiz ? { notiz: s.notiz } : null}
                        onGespeichert={() => { setNotizFuer(null); onGespeichert(); }} />
                    </td>
                  </tr>
                )}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </div>
      {gefiltert.length > anzahl && (
        <button type="button" className="btn ghost sm" onClick={() => setAnzahl(anzahl + BESTAND_SEITE * 3)}>
          Weitere {BB.num(Math.min(BESTAND_SEITE * 3, gefiltert.length - anzahl))} zeigen
        </button>
      )}
    </section>
  );
}

function BestandAnsicht() {
  const [daten, setDaten] = useState(null);
  const [fehler, setFehler] = useState("");
  const [mitBewussten, setMitBewussten] = useState(false);
  const [mitHinweisen, setMitHinweisen] = useState(false);

  const laden = React.useCallback(() => {
    BB.get("/admin/bestand")
      .then((d) => { setDaten(d); setFehler(""); })
      .catch((e) => setFehler(e.message || "Fehler"));
  }, []);
  useEffect(() => { laden(); }, [laden]);

  if (fehler) return <p className="err">{fehler}</p>;
  if (!daten) return <Spinner />;

  const s = daten.summe;
  const nachPruefung = {};
  daten.befunde.forEach((b) => { (nachPruefung[b.pruefung] = nachPruefung[b.pruefung] || []).push(b); });
  const gruppen = daten.pruefungen.filter((p) => nachPruefung[p.id] && (mitHinweisen || p.stufe !== "hinweis"));

  return (
    <div className="stack" style={{ gap: "1.5rem" }}>
      <section className="panel">
        <div className="label">Stand</div>
        <h3>
          {s.fehler ? BB.num(s.fehler) + " Widersprüche, " : "Keine Widersprüche, "}
          {BB.num(s.warnung)} Warnungen offen
        </h3>
        <dl className="luna-facts bestand-zahlen">
          <div><dt>Stoffe mit Artikel</dt><dd>{BB.num(s.stoffe)}</dd></div>
          <div><dt>Karte: mit CID / skip / fehlt</dt>
            <dd>{BB.num(s.karteCid)} / {BB.num(s.karteSkip)} / <span className={s.karteFehlt ? "bestand-fehlt" : ""}>{BB.num(s.karteFehlt)}</span></dd></div>
          <div><dt>Mit Kartenknoten</dt><dd>{BB.num(s.knoten)}</dd></div>
          <div><dt>Mit Analyseprofil</dt><dd>{BB.num(s.profile)}</dd></div>
          <div><dt>Entwurf / davon leer</dt><dd>{BB.num(s.entwurf)} / {BB.num(s.leer)}</dd></div>
          <div><dt>Offen: Fehler / Warnungen / Hinweise</dt>
            <dd>{BB.num(s.fehler)} / {BB.num(s.warnung)} / {BB.num(s.hinweis)}</dd></div>
        </dl>
        <p className="dim">
          Dieselbe Prüfung auf der Kommandozeile: <span className="mono">python3 werkzeuge/bestand_pruefen.py</span>.
          Sie endet mit Code 1, solange ein Fehler offen ist.
        </p>
      </section>

      <section className="stack" style={{ gap: "0.75rem" }}>
        <div className="row" style={{ gap: "0.5rem", flexWrap: "wrap" }}>
          <button type="button" className={"pill" + (mitHinweisen ? " on" : "")} onClick={() => setMitHinweisen(!mitHinweisen)}>
            Hinweise zeigen
          </button>
          <button type="button" className={"pill" + (mitBewussten ? " on" : "")} onClick={() => setMitBewussten(!mitBewussten)}>
            Bewusste zeigen
          </button>
          <button type="button" className="pill" onClick={laden}>Neu prüfen</button>
        </div>
        {gruppen.map((p) => (
          <BestandPruefung key={p.id} pruefung={p} befunde={nachPruefung[p.id]}
            mitBewussten={mitBewussten} onGespeichert={laden} />
        ))}
        {!gruppen.some((p) => p.offen > 0) && <p className="dim">Nichts offen.</p>}
      </section>

      {daten.erledigteVermerke.length > 0 && (
        <details className="panel">
          <summary>Vermerke ohne aktuellen Befund ({daten.erledigteVermerke.length})</summary>
          <p className="dim">Der Befund ist weg, erledigt oder der Slug hat sich geändert. Der Vermerk bleibt, damit nichts still verschwindet.</p>
          <ul className="bestand-liste">
            {daten.erledigteVermerke.map((v) => (
              <li key={v.schluessel}>
                <div><span className="mono">{v.schluessel}</span><span className="bestand-text">{v.notiz}</span></div>
                <BestandVermerk schluessel={v.schluessel} vermerk={v} onGespeichert={laden} />
              </li>
            ))}
          </ul>
        </details>
      )}

      <BestandStoffe stoffe={daten.stoffe} pruefungen={daten.pruefungen} onGespeichert={laden} />
    </div>
  );
}

const ADMIN_GROUPS = [
  {
    label: "Inhalte",
    items: [
      { id: "inhalte", label: "Inhalte", description: "Beiträge erstellen, filtern und redaktionell prüfen." },
      { id: "luna", label: "Redaktion", description: "Queue, Modelle je Workflow und die Standards, nach denen geschrieben wird.", adminOnly: true },
    ],
  },
  {
    label: "Struktur & Modelle",
    items: [
      { id: "bestand", label: "Bestand", description: "Ob jeder Stoff in Artikel, Karte, Knoten und Profil zusammenhängt, und was dazwischen offen ist.", adminOnly: true },
      { id: "kategorien", label: "Kategorien", description: "Die Hierarchie der Wissensbasis pflegen." },
      { id: "tags", label: "Tags", description: "Schlagwörter bereinigen und zusammenführen." },
      { id: "matrix", label: "Matrix", description: "Die aktiven Bewertungsmodelle nachvollziehen." },
      { id: "karte", label: "Molekülkarte", description: "Die Karte gegen die Wissensbasis abgleichen und neu aufbauen.", adminOnly: true },
      { id: "zusammenspiel", label: "Interaktionsmatrix", description: "Die Stellschrauben der Matrix setzen und sie gegen einen Stack rechnen.", adminOnly: true },
      { id: "boltz", label: "Boltz-Läufe", description: "Was die lokal gerechneten Strukturen sagen, und wo sie nichts sagen.", adminOnly: true },
    ],
  },
  {
    label: "Administration",
    items: [
      { id: "nutzer", label: "Nutzer", description: "Rollen, Tarife, Laufzeiten und Tokens verwalten.", adminOnly: true },
      { id: "wartung", label: "Wartung", description: "Die kuratierte Wissensbasis abgleichen." },
    ],
  },
  {
    label: "Einblicke",
    items: [
      { id: "analytics", label: "Analytics", description: "Reichweite, Nutzung und Suchanfragen auswerten.", adminOnly: true },
    ],
  },
];

/* --- Boltz-Laeufe ---------------------------------------------------------
   Ein `affinity_pred` allein ist nicht lesbar: log10(IC50 in Mikromol), gueltig
   nur innerhalb eines Ziels. Lesbar wird er erst neben den gemessenen
   Kontrollen. Deshalb steht hier zuerst das Fenster und dann alles andere. */

function boltzZahl(w, stellen = 2) {
  return typeof w === "number" ? w.toFixed(stellen).replace(".", ",") : "–";
}

/* Eine gemessene Menge spannt hier zwoelf Groessenordnungen: von 2,6 pM beim
   Estrogen bis 3,5 mM bei einem Nichtbinder. Feste Nachkommastellen machen
   daraus "0,00 nM", und damit steht die staerkste Kontrolle als Null da. */
function boltzMenge(nm) {
  if (nm >= 1e6) return (nm / 1e6).toFixed(1).replace(".", ",") + " mM";
  if (nm >= 1000) return Math.round(nm / 1000) + " µM";
  if (nm >= 1) return nm.toFixed(1).replace(".", ",") + " nM";
  if (nm >= 0.001) return (nm * 1000).toFixed(0) + " pM";
  return nm.toExponential(1).replace(".", ",") + " nM";
}

function BoltzZeile({ zeile, fenster }) {
  const klasse = {
    "wie ein Binder": "gut",
    "wohl keiner": "aus",
    "dazwischen": "warn",
  }[zeile.einordnung] || "";
  const kontrolle = zeile.rolle !== "candidate";
  return (
    <tr className={"boltz-zeile" + (kontrolle ? " boltz-kontrolle" : "")}>
      <td>
        {zeile.slug ? <Link to={"/wissen/" + zeile.slug}>{zeile.label}</Link> : zeile.label}
        {kontrolle && (
          <em className="boltz-rolle">
            {zeile.rolle === "control_binder" ? "bindet, gemessen" : "bindet nicht, gemessen"}
            {typeof zeile.gemessenNm === "number"
              ? " · " + boltzMenge(zeile.gemessenNm)
              : ""}
          </em>
        )}
      </td>
      <td className="mono">{boltzZahl(zeile.affinitaet)}</td>
      <td className="mono">{boltzZahl(zeile.wahrscheinlichkeit)}</td>
      <td className="mono">{boltzZahl(zeile.konfidenz)}</td>
      <td>{!kontrolle && <span className={"boltz-marke " + klasse}>{zeile.einordnung}</span>}</td>
    </tr>
  );
}

function BoltzLauf({ lauf }) {
  const [alle, setAlle] = React.useState(false);
  const f = lauf.fenster;
  const zeigen = alle ? lauf.kandidaten : lauf.kandidaten.slice(0, 12);
  return (
    <section className="admin-card boltz-lauf">
      <div className="admin-card-head">
        <div>
          <strong>{lauf.ziel}</strong>
          <span className="dim"> · {lauf.kandidaten.length} Kandidaten · {lauf.version || "Boltz"}</span>
        </div>
        <span className={"boltz-marke " + (f.trennt ? "gut" : "aus")}>
          {f.trennt ? "trennt" : f.geeicht ? "trennt nicht" : "ungeeicht"}
        </span>
      </div>

      {/* Ohne diesen Satz ist keine Zahl darunter lesbar. */}
      <p className="dim boltz-fenster">
        {f.trennt ? (
          <>Die gemessenen Binder liegen bis <b>{boltzZahl(f.binderSchwaechster)}</b>,
          der beste Nichtbinder bei <b>{boltzZahl(f.nichtbinderBester)}</b>. Dazwischen
          liegt ein Fenster von {boltzZahl(f.abstand)} Größenordnungen: was besser
          als {boltzZahl(f.binderSchwaechster)} ist, verhält sich hier wie ein Binder.</>
        ) : f.geeicht ? (
          <>Binder und Nichtbinder überschneiden sich. An diesem Protein trennt das
          Modell nicht, und dann ist auch ein schöner Wert darunter nichts wert.</>
        ) : (
          <>Kein gemessener Nichtbinder. Man sieht, wo bekannte Binder landen
          (bis {boltzZahl(f.binderSchwaechster)}), aber nicht, wo etwas landet, das
          nicht bindet. Ein Kandidat darüber ist damit kein Nichtbinder, sondern
          eine offene Frage.</>
        )}
      </p>

      <table className="boltz-tabelle">
        <thead>
          <tr>
            <th>Stoff</th><th>Affinität</th><th>p(Binder)</th><th>Konfidenz</th><th></th>
          </tr>
        </thead>
        <tbody>
          {lauf.kontrollen.map((z) => <BoltzZeile key={"k" + z.label} zeile={z} fenster={f} />)}
          {zeigen.map((z) => <BoltzZeile key={z.label} zeile={z} fenster={f} />)}
        </tbody>
      </table>
      {lauf.kandidaten.length > zeigen.length && (
        <button type="button" className="btn ghost sm" onClick={() => setAlle(true)}>
          Alle {lauf.kandidaten.length} zeigen
        </button>
      )}
    </section>
  );
}

function BoltzLaeufe() {
  const [daten, setDaten] = React.useState(null);
  const [fehler, setFehler] = React.useState("");
  React.useEffect(() => {
    BB.get("/admin/lokal").then(setDaten).catch((e) => setFehler(e.message || "Fehler"));
  }, []);
  if (fehler) return <p className="err">{fehler}</p>;
  if (!daten) return <Spinner />;
  const z = daten.zusammenfassung;
  return (
    <div className="stack">
      <header>
        <h2>Boltz-Läufe</h2>
        <p className="dim">
          Lokal gerechnete Strukturen. Die Werte werden <b>nie</b> zu Kanten der
          Molekülkarte und gehen in keinen Score ein: ein Modellwert ist keine
          Messung. Er darf eine Zielhypothese stützen oder entkräften.
        </p>
        <p className="dim">
          {z.laeufe} Läufe · {z.trennen} davon trennen sauber · {z.geeicht} geeicht
          (Binder <i>und</i> Nichtbinder gerechnet) · {z.treffer} Kandidaten im Binderbereich
        </p>
      </header>
      {daten.laeufe.map((l) => <BoltzLauf key={l.id} lauf={l} />)}
      {!daten.laeufe.length && (
        <p className="dim">Noch nichts eingespielt. `werkzeuge/_lokal_import.py`</p>
      )}
    </div>
  );
}

function Verwaltung({ categories, onReload }) {
  const { user, ready } = useAuth();
  const { path, go } = useRouter();
  const canManage = !!user && (user.role === "admin" || user.role === "mod");
  const pathname = path.split("?")[0];
  const requestedSection = pathname.split("/").filter(Boolean)[1] || "inhalte";
  const groups = ADMIN_GROUPS.map((group) => ({
    ...group,
    items: group.items.filter((item) => !item.adminOnly || (user && user.role === "admin")),
  })).filter((group) => group.items.length);
  const sections = groups.flatMap((group) => group.items);
  const current = sections.find((item) => item.id === requestedSection) || sections[0];

  useEffect(() => {
    if (ready && !canManage) go("/");
  }, [ready, canManage, go]);

  useEffect(() => {
    if (ready && canManage && current && requestedSection !== current.id) {
      go("/verwaltung/" + current.id, { keepScroll: true });
    }
  }, [ready, canManage, current && current.id, requestedSection, go]);

  if (!ready) return <div className="wrap section"><Spinner /></div>;
  if (!canManage) return null;
  if (!current) return null;

  const tab = current.id;

  return (
    <div className="wrap section admin-page">
      <header className="admin-mobile-head">
        <div className="eyebrow">Verwaltung</div>
        <label className="admin-mobile-picker">
          <span className="label">Bereich</span>
          <select className="input" value={tab} onChange={(event) => go("/verwaltung/" + event.target.value)}>
            {groups.map((group) => (
              <optgroup key={group.label} label={group.label}>
                {group.items.map((item) => <option key={item.id} value={item.id}>{item.label}</option>)}
              </optgroup>
            ))}
          </select>
        </label>
      </header>

      <div className="admin-shell">
        <aside className="admin-sidebar" aria-label="Verwaltungsbereiche">
          <div className="admin-sidebar-title">
            <div className="eyebrow">Verwaltung</div>
            <strong>Arbeitsbereich</strong>
          </div>
          <nav>
            {groups.map((group) => (
              <div className="admin-nav-group" key={group.label}>
                <span className="admin-nav-label">{group.label}</span>
                {group.items.map((item) => (
                  <Link
                    key={item.id}
                    to={"/verwaltung/" + item.id}
                    className={tab === item.id ? "on" : ""}
                    aria-current={tab === item.id ? "page" : undefined}
                  >
                    {item.label}
                  </Link>
                ))}
              </div>
            ))}
          </nav>
        </aside>

        <main className="admin-content">
          <header className="admin-content-head">
            <div className="eyebrow">{groups.find((group) => group.items.some((item) => item.id === tab)).label}</div>
            <h2>{current.label}</h2>
            <p>{current.description}</p>
          </header>

          {tab === "inhalte" && <ContentEditor cats={categories} allowLuna={user.role === "admin"} />}
          {tab === "kategorien" && <CategoryEditor cats={categories} onReload={onReload} />}
          {tab === "tags" && <TagEditor />}
          {tab === "wartung" && <Maintenance onReload={onReload} />}
          {tab === "matrix" && <MatrixAnsicht />}
          {tab === "bestand" && user.role === "admin" && <BestandAnsicht />}
          {tab === "karte" && user.role === "admin" && <KarteEditor />}
          {tab === "zusammenspiel" && user.role === "admin" && <ZusammenspielEditor />}
          {tab === "boltz" && user.role === "admin" && <BoltzLaeufe />}
          {tab === "nutzer" && user.role === "admin" && <UserEditor currentUsername={user.username} />}
          {tab === "luna" && user.role === "admin" && <RedaktionEditor />}
          {tab === "analytics" && user.role === "admin" && <AnalyticsDashboard />}
        </main>
      </div>
    </div>
  );
}

Object.assign(window, { Verwaltung, UserEditor, CatSelect, catPath, ContentEditor, LunaQueueEditor, RedaktionEditor, KarteEditor, ZusammenspielEditor });