/* ==========================================================================
   POST: reader for both curated wiki entries and community posts.
   ========================================================================== */

/* --- cross-link peek ----------------------------------------------------- */

function peekStyle(at) {
  return {
    left: Math.min(at.x, window.innerWidth - 316),
    top: at.y + 10 > window.innerHeight - 120 ? at.y - 110 : at.y + 10,
  };
}

function Peek({ at, entry }) {
  return (
    <div className="peek" style={peekStyle(at)}>
      <div className="t">{entry.title}</div>
      <div className="d">{(entry.summary || "").slice(0, 150)}</div>
    </div>
  );
}

/** Quellenangabe beim Überfahren eines Belegs im Fließtext. */
function SourcePeek({ at, source }) {
  return (
    <div className="peek" style={peekStyle(at)}>
      <div className="t">{BB.t("Quelle")} [{source.n}]</div>
      <div className="d">{source.text}</div>
    </div>
  );
}

/* --- sources ------------------------------------------------------------- */

/** Target of a source entry: PubMed first, then DOI, then a plain address. */
function refHref(r) {
  if (r.pmid) return "https://pubmed.ncbi.nlm.nih.gov/" + encodeURIComponent(r.pmid) + "/";
  if (r.doi) return "https://doi.org/" + String(r.doi).replace(/^(https?:\/\/)?(dx\.)?doi\.org\//i, "");
  if (r.url && /^https?:\/\//i.test(r.url)) return r.url;
  return null;
}

function RefList({ refs }) {
  return (
    <div className="refs">
      {refs.map((r, i) => {
        const href = refHref(r);
        const badge = r.pmid ? "PMID " + r.pmid : r.doi ? "DOI" : BB.t("Quelle öffnen");
        return (
          <div className="ref" key={i} id={"quelle-" + (r.n || i + 1)}>
            <span className="n">[{r.n || i + 1}]</span>
            {href ? (
              <a href={href} target="_blank" rel="noopener noreferrer" title={BB.t("Quelle öffnen")}>
                {r.text}
                <span className="ref-badge">{badge}</span>
              </a>
            ) : (
              <span>{r.text}</span>
            )}
          </div>
        );
      })}
    </div>
  );
}

/** Renders post body and wires up the auto-generated cross references. */
function Body({ post, index, refs, showTodo }) {
  const ref = useRef(null);
  const { go } = useRouter();
  const [peek, setPeek] = useState(null);
  const [cited, setCited] = useState(null);

  const html = useMemo(() => {
    const raw = post.format === "html"
      ? post.body
      : BB.markdown(post.body, { trustedFigures: post.kind === "wiki" });
    return post.kind === "wiki" ? BB.autoLink(raw, index, post.slug) : raw;
  }, [post.body, post.format, post.kind, post.slug, index]);
  // Querverweise setzt nur die Art „wiki“: der Index enthält Stoff- und
  // Themennamen, in einem Rezepttext hätte er nichts zu suchen.

  // Beleg im Text: die Nummer steht als data-ref am leeren <sup>, die
  // Bedienbarkeit kommt von hier, damit das Artikel-HTML sauber bleibt.
  const sourceOf = (el) => (refs || []).find((r, i) => String(r.n || i + 1) === el.dataset.ref);

  const jumpToSource = (el) => {
    const row = document.getElementById("quelle-" + el.dataset.ref);
    if (!row) return;
    const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    row.scrollIntoView({ behavior: still ? "auto" : "smooth", block: "center" });
    row.classList.add("hit");
    setTimeout(() => row.classList.remove("hit"), 2500);
  };

  useEffect(() => {
    const root = ref.current;
    if (!root) return;
    const find = (e) => e.target.closest && e.target.closest(".auto-link");
    const findCite = (e) => e.target.closest && e.target.closest(".cite");

    root.querySelectorAll(".cite").forEach((el) => {
      const src = sourceOf(el);
      el.setAttribute("tabindex", "0");
      el.setAttribute("role", "button");
      el.setAttribute("aria-label", BB.t("Quelle") + " " + el.dataset.ref + (src ? ": " + src.text : ""));
    });

    const onClick = (e) => {
      const c = findCite(e);
      if (c) {
        e.preventDefault();
        setCited(null);
        jumpToSource(c);
        return;
      }
      const a = find(e);
      if (!a) return;
      e.preventDefault();
      setPeek(null);
      go("/wissen/" + a.dataset.slug);
    };
    const onKey = (e) => {
      if (e.key !== "Enter" && e.key !== " ") return;
      const c = findCite(e);
      if (!c) return;
      e.preventDefault();
      jumpToSource(c);
    };
    const onOver = (e) => {
      const c = findCite(e);
      if (c) {
        const src = sourceOf(c);
        if (!src) return;
        const r = c.getBoundingClientRect();
        setCited({ at: { x: r.left, y: r.bottom }, source: { ...src, n: c.dataset.ref } });
        return;
      }
      const a = find(e);
      if (!a) return;
      const entry = index.find((x) => x.slug === a.dataset.slug);
      if (!entry) return;
      const r = a.getBoundingClientRect();
      setPeek({ at: { x: r.left, y: r.bottom }, entry });
    };
    const onOut = (e) => {
      if (findCite(e)) setCited(null);
      if (find(e)) setPeek(null);
    };
    root.addEventListener("click", onClick);
    root.addEventListener("keydown", onKey);
    root.addEventListener("mouseover", onOver);
    root.addEventListener("mouseout", onOut);
    return () => {
      root.removeEventListener("click", onClick);
      root.removeEventListener("keydown", onKey);
      root.removeEventListener("mouseover", onOver);
      root.removeEventListener("mouseout", onOut);
    };
  }, [html, index, go, refs]);

  return (
    <>
      {/* show-todo blendet die Bildplatzhalter ein, die dem Leser verborgen bleiben */}
      <div className={"prose" + (showTodo ? " show-todo" : "")} ref={ref}
           dangerouslySetInnerHTML={{ __html: html }} />
      {peek && <Peek {...peek} />}
      {cited && <SourcePeek {...cited} />}
    </>
  );
}

/* --- kind-specific side panels ------------------------------------------- */

function WikiPanel({ post, categories }) {
  const d = post.data || {};
  const schema = BB.schemaFor(categories, post.categoryId);
  const cat = BB.catById(categories, post.categoryId);
  return (
    <>
      {(d.molecule || d.moleculeNote) && (
        <div className="panel">
          <div className="label">{BB.t("Strukturformel")}</div>
          <Molecule slug={d.molecule} cid={d.pubchemCid} title={post.title} note={d.moleculeNote} />
          {d.molecule && d.formula && (
            <div className="mono dim" style={{ textAlign: "center", fontSize: "var(--fs-xs)" }}>{d.formula}</div>
          )}
        </div>
      )}
      {schema && d.bars && (
        <div className="panel">
          <div className="label">{BB.t("Kennzahlen")}</div>
          <MetricBars schema={schema} values={d.bars} />
        </div>
      )}
      <div className="panel">
        <div className="label">{BB.t("Steckbrief")}</div>
        <dl className="kv">
          {cat && <><dt>{BB.t("Kategorie")}</dt><dd><Link to={"/wissen?cat=" + cat.id}>{cat.label}</Link></dd></>}
          {d.formula && <><dt>{BB.t("Formel")}</dt><dd className="mono">{d.formula}</dd></>}
          {d.aliases && d.aliases.length > 0 && <><dt>{BB.t("Auch bekannt als")}</dt><dd>{d.aliases.join(", ")}</dd></>}
          <dt>{BB.t("Aufrufe")}</dt><dd className="mono">{BB.num(post.views)}</dd>
        </dl>
      </div>
    </>
  );
}

function StackPanel({ post }) {
  const d = post.data || {};
  const compounds = Array.isArray(d.compounds) ? d.compounds.filter((c) => c && c.name) : [];
  if (!compounds.length && !d.weeks && !d.goal) return null;
  return (
    <div className="panel">
      <div className="label">{BB.t("Protokoll")}</div>
      <dl className="kv">
        {d.goal && <><dt>{BB.t("Ziel")}</dt><dd>{d.goal}</dd></>}
        {d.weeks && <><dt>{BB.t("Dauer")}</dt><dd className="mono">{d.weeks} Wochen</dd></>}
        {d.experience && <><dt>{BB.t("Erfahrung")}</dt><dd>{d.experience}</dd></>}
      </dl>
      {compounds.length > 0 && (
        <>
          <div className="label" style={{ marginTop: "0.5rem" }}>{BB.t("Wirkstoffe")}</div>
          <div className="stack" style={{ gap: "0.6rem" }}>
            {compounds.map((c, i) => (
              <div key={i} className="spread" style={{ fontSize: "var(--fs-sm)", gap: "0.75rem" }}>
                <span>{c.name}</span>
                <span className="mono dim" style={{ textAlign: "right", whiteSpace: "nowrap" }}>
                  {[c.dose, c.freq].filter(Boolean).join(" · ")}
                </span>
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

function TransformationPanel({ post }) {
  const d = post.data || {};
  const pairs = [
    ["Gewicht", d.weightBefore, d.weightAfter, "kg"],
    ["Körperfett", d.bfBefore, d.bfAfter, "%"],
  ].filter(([, a, b]) => a || b);
  if (!pairs.length && !d.months && !d.natural) return null;
  return (
    <div className="panel">
      <div className="label">{BB.t("Zahlen")}</div>
      <dl className="kv">
        {pairs.map(([label, a, b, unit]) => (
          <React.Fragment key={label}>
            <dt>{label}</dt>
            <dd className="mono">{a || "k. A."}{unit} → <strong style={{ color: "var(--accent)" }}>{b || "k. A."}{unit}</strong></dd>
          </React.Fragment>
        ))}
        {d.months && <><dt>{BB.t("Zeitraum")}</dt><dd className="mono">{d.months} Monate</dd></>}
        {d.natural !== undefined && <><dt>{BB.t("Natural")}</dt><dd>{d.natural ? "Ja" : "Nein"}</dd></>}
      </dl>
      <div className="row" style={{ gap: 8 }}>
        {d.beforeUrl && <img src={d.beforeUrl} alt="Vorher" style={{ width: "50%", borderRadius: "var(--r-sm)" }} />}
        {d.afterUrl && <img src={d.afterUrl} alt="Nachher" style={{ width: "50%", borderRadius: "var(--r-sm)" }} />}
      </div>
    </div>
  );
}

function RecipePanel({ post }) {
  const d = post.data || {};
  const ingredients = Array.isArray(d.ingredients) ? d.ingredients.filter((c) => c && c.name) : [];
  const macros = [
    ["kcal", BB.t("Kalorien"), "kcal"],
    ["protein", BB.t("Eiweiß"), "g"],
    ["carbs", BB.t("Kohlenhydrate"), "g"],
    ["fat", "Fett", "g"],
    ["fiber", BB.t("Ballaststoffe"), "g"],
  ].filter(([key]) => d[key]);
  if (!ingredients.length && !macros.length && !d.servings && !d.minutes) return null;

  return (
    <>
      <div className="panel">
        <div className="label">{BB.t("Rezept")}</div>
        <dl className="kv">
          {d.servings && <><dt>{BB.t("Portionen")}</dt><dd className="mono">{d.servings}</dd></>}
          {d.minutes && <><dt>{BB.t("Zubereitungszeit")}</dt><dd className="mono">{d.minutes} {BB.t("Minuten")}</dd></>}
          {d.difficulty && <><dt>{BB.t("Aufwand")}</dt><dd>{d.difficulty}</dd></>}
        </dl>
        {macros.length > 0 && (
          <>
            <div className="label" style={{ marginTop: "0.5rem" }}>
              {BB.t("Nährwerte")} <span className="dim">({BB.t("pro Portion")})</span>
            </div>
            <div className="macros">
              {macros.map(([key, label, unit]) => (
                <div key={key}>
                  <span className="v mono">{d[key]}<small>{unit}</small></span>
                  <span className="k">{label}</span>
                </div>
              ))}
            </div>
          </>
        )}
      </div>
      {ingredients.length > 0 && (
        <div className="panel">
          <div className="label">{BB.t("Zutaten")}</div>
          <ul className="ingredients">
            {ingredients.map((c, i) => (
              <li key={i}>
                <span className="mono dim">{c.amount || ""}</span>
                <span>{c.name}</span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </>
  );
}

/* --- Redaktionsstand ------------------------------------------------------ */

/** Markiert einen Beitrag als geprüft oder überarbeitungsbedürftig. Sichtbar
    nur für Admins und Mods, direkt beim Lesen. */
function ReviewBox({ post, onChange }) {
  const notify = useToast();
  const [open, setOpen] = useState(false);
  const [note, setNote] = useState(post.reviewNote || "");
  const [busy, setBusy] = useState(false);
  const state = post.review || "";

  useEffect(() => { setNote(post.reviewNote || ""); }, [post.reviewNote]);

  async function mark(next, nextNote) {
    setBusy(true);
    try {
      const r = await BB.post("/admin/posts/" + post.id + "/review", {
        review: next,
        note: nextNote === undefined ? note : nextNote,
      });
      onChange(r);
      notify(next ? "Markiert: " + BB.REVIEWS[next].label : "Markierung entfernt");
      setOpen(false);
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className={"reviewbox" + (state ? " r-" + state : "")}>
      <div className="row" style={{ gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
        <span className="label">{BB.t("Redaktion")}</span>
        {Object.entries(BB.REVIEWS).map(([key, r]) => (
          <button
            key={key}
            className={"pill" + (state === key ? " on" : "")}
            disabled={busy}
            title={r.hint}
            onClick={() => mark(state === key ? "" : key)}
          >
            {r.mark} {r.label}
          </button>
        ))}
        <button className="btn quiet sm" onClick={() => setOpen((o) => !o)}>
          {post.reviewNote ? "Notiz bearbeiten" : "Notiz"}
        </button>
        {post.reviewAt && (
          <span className="mono dim" style={{ fontSize: "var(--fs-xs)" }}>{BB.when(post.reviewAt)}</span>
        )}
      </div>

      {!open && post.reviewNote && <p className="review-note">{post.reviewNote}</p>}

      {open && (
        <div className="stack" style={{ gap: "0.5rem", marginTop: "0.75rem" }}>
          <textarea
            className="textarea"
            style={{ minHeight: 80 }}
            value={note}
            maxLength={600}
            onChange={(e) => setNote(e.target.value)}
            placeholder={BB.t("Was ist zu tun? Etwa: Quelle 4 passt nicht zur Aussage.")}
          />
          <div className="row" style={{ gap: "0.5rem" }}>
            <button className="btn primary sm" disabled={busy} onClick={() => mark(state || "revise")}>
              Notiz speichern
            </button>
            <button className="btn quiet sm" onClick={() => { setNote(post.reviewNote || ""); setOpen(false); }}>
              {BB.t("Abbrechen")}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

/* --- comments ------------------------------------------------------------ */

function CommentForm({ postId, parentId, onDone, onCancel, autoFocus }) {
  const [text, setText] = useState("");
  const [busy, setBusy] = useState(false);
  const notify = useToast();

  async function submit(e) {
    e.preventDefault();
    if (!text.trim() || busy) return;
    setBusy(true);
    try {
      await BB.post(`/posts/${postId}/comments`, { body: text, parentId: parentId || null });
      setText("");
      onDone();
    } catch (err) {
      notify(err.message, "bad");
    } finally {
      setBusy(false);
    }
  }

  return (
    <form onSubmit={submit} className="stack" style={{ gap: "0.75rem", width: "100%" }}>
      <textarea
        className="textarea"
        style={{ minHeight: parentId ? 90 : 120 }}
        value={text}
        autoFocus={autoFocus}
        onChange={(e) => setText(e.target.value)}
        placeholder={parentId ? "Antworten …" : "Was denkst du dazu?"}
      />
      <div className="row" style={{ gap: 8 }}>
        <button className="btn primary sm" disabled={!text.trim() || busy}>
          {busy ? "Sendet …" : parentId ? "Antworten" : "Kommentieren"}
        </button>
        {onCancel && <button type="button" className="btn quiet sm" onClick={onCancel}>{BB.t("Abbrechen")}</button>}
      </div>
    </form>
  );
}

function Comment({ comment, replies, postId, onChange, depth = 0 }) {
  const { user } = useAuth();
  const [replying, setReplying] = useState(false);
  const notify = useToast();
  const mine = user && (user.id === comment.authorId || user.role === "admin" || user.role === "mod");

  async function remove() {
    if (!confirm("Kommentar löschen?")) return;
    try {
      await BB.del("/comments/" + comment.id);
      onChange();
    } catch (err) {
      notify(err.message, "bad");
    }
  }

  return (
    <>
      <div className={"cmt" + (depth > 0 ? " reply" : "")}>
        <Avatar user={comment.author} />
        <div>
          <div className="cmt-head">
            <Link to={"/u/" + comment.author.username}><strong>{comment.author.displayName}</strong></Link>
            {comment.author.role === "admin" && <span className="pill" style={{ padding: "1px 8px" }}>{BB.t("Admin")}</span>}
            <span>{BB.when(comment.createdAt)}</span>
          </div>
          <div className="cmt-body">{comment.body}</div>
          <div className="cmt-actions">
            {user && depth === 0 && <button onClick={() => setReplying((r) => !r)}>{BB.t("Antworten")}</button>}
            {mine && <button onClick={remove}>{BB.t("Löschen")}</button>}
          </div>
          {replying && (
            <div style={{ marginTop: "0.85rem" }}>
              <CommentForm
                postId={postId}
                parentId={comment.id}
                autoFocus
                onDone={() => { setReplying(false); onChange(); }}
                onCancel={() => setReplying(false)}
              />
            </div>
          )}
        </div>
      </div>
      {replies.map((r) => (
        <Comment key={r.id} comment={r} replies={[]} postId={postId} onChange={onChange} depth={depth + 1} />
      ))}
    </>
  );
}

function Comments({ postId }) {
  const { user } = useAuth();
  const [list, setList] = useState(null);

  const load = useCallback(() => {
    BB.get(`/posts/${postId}/comments`).then(setList).catch(() => setList([]));
  }, [postId]);

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

  const { roots, byParent } = useMemo(() => {
    const all = list || [];
    const byParent = new Map();
    all.forEach((c) => {
      if (c.parentId) {
        if (!byParent.has(c.parentId)) byParent.set(c.parentId, []);
        byParent.get(c.parentId).push(c);
      }
    });
    return { roots: all.filter((c) => !c.parentId), byParent };
  }, [list]);

  return (
    <section className="comments">
      <h2 style={{ fontSize: "var(--fs-h3)" }}>
        {list ? `${list.length} ${BB.t(list.length === 1 ? "Kommentar" : "Kommentare")}` : BB.t("Kommentare")}
      </h2>

      {user ? (
        <div className="cmt">
          <Avatar user={user} />
          <CommentForm postId={postId} onDone={load} />
        </div>
      ) : (
        <div className="panel row" style={{ gap: "1rem", justifyContent: "space-between", flexWrap: "wrap" }}>
          <span className="dim">{BB.t("Melde dich an, um mitzudiskutieren.")}</span>
          <Link to="/login" className="btn ghost sm">{BB.t("Einloggen")}</Link>
        </div>
      )}

      {list === null ? (
        <div className="skel" style={{ height: 80 }} />
      ) : roots.length === 0 ? (
        <p className="dim" style={{ fontSize: "var(--fs-sm)" }}>{BB.t("Noch keine Kommentare.")}</p>
      ) : (
        roots.map((c) => (
          <Comment key={c.id} comment={c} replies={byParent.get(c.id) || []} postId={postId} onChange={load} />
        ))
      )}
    </section>
  );
}

/* --- page ---------------------------------------------------------------- */


/* ==========================================================================
   EVIDENZMATRIX: welche Studie traegt welche Aussage, und wie gut.

   Die Quellenliste darueber sagt, *dass* der Artikel Belege hat. Sie sagt
   nicht, welcher Satz an welcher Arbeit haengt. Genau da lebt das
   Autoritaetsargument: eine PMID hinter einer Behauptung sieht aus wie ein
   Beleg, auch wenn dahinter zwoelf Ratten ueber zehn Tage stehen.

   Spaltenreihenfolge ist Absicht: erst der Score, dann die Arbeit, dann die
   Aussage, dann die Merkmale, die den Score begruenden. Eine Zeile je Paar aus
   Studie und Aussage -- dieselbe Arbeit steht mehrfach da, wenn sie mehreres
   traegt, und das ist die Auskunft und keine Dopplung.
   ========================================================================== */

function evidenzStufe(score) {
  if (score >= 70) return "gut";
  if (score >= 55) return "ok";
  if (score >= 38) return "mittel";
  if (score >= 20) return "schwach";
  return "kaum";
}

const EV_RICHTUNG = { stuetzt: "stützt", teilweise: "teilweise", widerspricht: "widerspricht" };

function EvidenzZeile({ beleg, aussage, offen, onToggle }) {
  const st = beleg.studie || {};
  const merkmale = [
    st.design,
    // Wo gemessen wurde und wie übertragbar das ist, sind zwei Angaben. Die
    // Rattenstudie am konservierten Rezeptor trägt eine Mechanismusaussage
    // direkt und eine Humandosis-Aussage gar nicht.
    st.modell,
    st.n ? "n = " + BB.num(st.n) : null,
    st.dauer_tage ? Math.round(st.dauer_tage / 7) + " Wochen" : null,
    st.randomisiert ? BB.t("randomisiert") : null,
    st.verblindung ? BB.t("Verblindung") + ": " + st.verblindung : null,
    st.kontrolle ? BB.t("Kontrolle") + ": " + st.kontrolle : null,
    st.studienzahl ? st.studienzahl + " " + BB.t("Arbeiten") : null,
    st.interessen ? BB.t("Interessen") + ": " + st.interessen : null,
    beleg.uebertragbar ? BB.t("übertragbar") + ": " + beleg.uebertragbar : null,
  ].filter(Boolean);
  const grund = beleg.uebertragbar_grund || beleg.uebertragbarGrund || "";
  return (
    <>
      <tr className={"ev-zeile s-" + evidenzStufe(beleg.score)}>
        <td className="ev-score">
          <button type="button" onClick={onToggle}
                  aria-expanded={offen}
                  title={BB.t("Wie dieser Wert zustande kommt")}>
            {Math.round(beleg.score)}
          </button>
        </td>
        <td className="ev-studie">
          {st.pmid
            ? <a href={"https://pubmed.ncbi.nlm.nih.gov/" + st.pmid + "/"}
                 rel="noopener noreferrer" target="_blank">{st.quelle}</a>
            : st.quelle}
          {beleg.richtung && beleg.richtung !== "stuetzt" && (
            <span className={"ev-richtung r-" + beleg.richtung}>
              {BB.t(EV_RICHTUNG[beleg.richtung] || beleg.richtung)}
            </span>
          )}
        </td>
        <td className="ev-aussage">{aussage}</td>
        <td className="ev-merkmale">{merkmale.join(" · ")}</td>
      </tr>
      {offen && (
        <tr className="ev-herleitung">
          <td />
          <td colSpan={3}>
            <ul>
              {(beleg.herleitung || []).map((h, i) => (
                <li key={i}>
                  <em>{h.punkte > 0 ? "+" : ""}{h.punkte}</em>
                  {BB.t(h.was)}{h.wert !== undefined ? ": " + h.wert : ""}
                </li>
              ))}
            </ul>
            {beleg.beleg && <p className="ev-zitat">{beleg.beleg}</p>}
            {grund && (
              <p className="ev-limit">
                <strong>{BB.t("Warum übertragbar")}:</strong> {grund}
              </p>
            )}
            {st.limitationen && (
              <p className="ev-limit"><strong>{BB.t("Grenzen")}:</strong> {st.limitationen}</p>
            )}
          </td>
        </tr>
      )}
    </>
  );
}

function Evidenzmatrix({ slug }) {
  const [daten, setDaten] = useState(null);
  const [offen, setOffen] = useState("");
  const [alle, setAlle] = useState(false);

  useEffect(() => {
    let aktiv = true;
    BB.get("/evidenz/" + encodeURIComponent(slug))
      .then((d) => { if (aktiv) setDaten(d); })
      .catch(() => {});
    return () => { aktiv = false; };
  }, [slug]);

  if (!daten || !(daten.aussagen || []).length) return null;

  // Eine Zeile je Paar, staerkster Beleg zuerst. Nicht nach Aussage gruppiert:
  // die Frage "was traegt hier am meisten" kommt vor "was steht wo im Text".
  const zeilen = [];
  daten.aussagen.forEach((a) => {
    (a.belege || []).forEach((b) => zeilen.push({ beleg: b, aussage: a.aussage }));
  });
  zeilen.sort((x, y) => y.beleg.score - x.beleg.score);
  const sichtbar = alle ? zeilen : zeilen.slice(0, 8);
  const b = daten.bilanz || {};

  return (
    <section className="ev-matrix" aria-labelledby="ev-titel">
      <div className="label" id="ev-titel">{BB.t("Evidenzmatrix")}</div>
      <p className="ev-lead">
        {BB.t("Welche Arbeit trägt welche Aussage, und wie gut. Der Wert links fasst Bauart, Teilnehmerzahl, Dauer, Verblindung, Kontrolle, Interessenlage und Übertragbarkeit zusammen; ein Klick darauf zeigt jeden Summanden.")}
      </p>
      <p className="ev-bilanz">
        {b.aussagen} {BB.t("Aussagen")} · {b.belege} {BB.t("Belege")}
        {Object.entries(b.je_stufe || {}).filter(([, n]) => n)
          .map(([wort, n]) => " · " + n + " " + BB.t(wort))}
        {b.ohne_beleg ? " · " + b.ohne_beleg + " " + BB.t("ohne Beleg") : ""}
      </p>
      <div className="ev-tabelle-huelle">
        <table className="ev-tabelle">
          <thead>
            <tr>
              <th>{BB.t("Güte")}</th>
              <th>{BB.t("Studie")}</th>
              <th>{BB.t("Aussage")}</th>
              <th>{BB.t("Merkmale")}</th>
            </tr>
          </thead>
          <tbody>
            {sichtbar.map((z, i) => (
              <EvidenzZeile key={i} beleg={z.beleg} aussage={z.aussage}
                            offen={offen === String(i)}
                            onToggle={() => setOffen(offen === String(i) ? "" : String(i))} />
            ))}
          </tbody>
        </table>
      </div>
      {zeilen.length > sichtbar.length && (
        <button type="button" className="zsp-mehr" onClick={() => setAlle(true)}>
          {BB.t("alle Belege zeigen")} ({zeilen.length})
        </button>
      )}
    </section>
  );
}

function PostPage({ slug, categories, onReloadCategories }) {
  const { go } = useRouter();
  const { user } = useAuth();
  const notify = useToast();
  // Der Server hat den Beitrag beim ersten Aufruf schon mitgeschickt
  const [post, setPost] = useState(() => BB.takePost(slug));
  const [missing, setMissing] = useState(false);
  const [draftBlocked, setDraftBlocked] = useState(false);
  const [index, setIndex] = useState([]);

  // only curated entries get cross-links, so only they pay for the index
  useEffect(() => {
    if (post && post.kind === "wiki") {
      let alive = true;
      BB.loadIndex().then((i) => { if (alive) setIndex(i); });
      return () => { alive = false; };
    }
  }, [post && post.kind]);

  useEffect(() => {
    let alive = true;
    // Liegt der Beitrag schon vorgerendert vor, wäre ein zweiter Aufruf nur ein
    // Tausch gegen dasselbe, mit Ladeanzeige dazwischen. Der Server hat ihn in
    // dem Fall auch bereits als Aufruf gezählt.
    const needsAdmin = post && (
      post.status !== "published" ||
      post.needsReview ||
      (Object.prototype.hasOwnProperty.call(post, "review") && post.review !== "ok")
    );
    if (post && post.slug === slug && (!needsAdmin || BB.isAdmin(user))) return;
    setPost(null);
    setMissing(false);
    setDraftBlocked(false);
    BB.get("/posts/" + encodeURIComponent(slug))
      .then((p) => {
        if (!alive) return;
        setPost(p);
        // opening marks it read on the server, so the progress counters moved
        if (p.read && onReloadCategories) onReloadCategories();
      })
      .catch((err) => {
        if (!alive) return;
        if (err && err.status === 403) {
          setDraftBlocked(true);
          setMissing(false);
        } else {
          setMissing(true);
          setDraftBlocked(false);
        }
      });
    return () => { alive = false; };
  }, [slug, onReloadCategories, user && user.id, user && user.role]);

  useEffect(() => {
    if (post) BB.setTitle(post.title, { desc: post.summary });
    else if (draftBlocked) BB.setTitle(BB.t("Noch in Arbeit"));
    else if (missing) BB.setTitle(BB.t("Beitrag nicht gefunden"));
  }, [post, draftBlocked, missing]);

  async function toggleRead() {
    try {
      const r = await BB.post(`/posts/${post.id}/read`);
      setPost((p) => ({ ...p, read: r.read }));
      notify(r.read ? "Als gelesen markiert" : "Als ungelesen markiert");
      if (onReloadCategories) onReloadCategories();
    } catch (err) {
      notify(err.message, "bad");
    }
  }

  async function fruehzugang(tage) {
    try {
      const r = await BB.post(`/posts/${post.id}/fruehzugang`, { tage });
      setPost((p) => ({ ...p, earlyUntil: r.earlyUntil }));
    } catch (e) { /* steht nur der Redaktion offen */ }
  }

  async function anpinnen() {
    try {
      const r = await BB.post(`/posts/${post.id}/anpinnen`);
      setPost((p) => ({ ...p, pinned: r.pinned }));
    } catch (e) { /* Der Knopf steht nur der Redaktion offen. */ }
  }

  async function vote() {
    if (!user) { go("/login"); return; }
    try {
      const r = await BB.post(`/posts/${post.id}/vote`);
      setPost((p) => ({ ...p, votes: r.votes, voted: r.voted }));
    } catch (err) {
      notify(err.message, "bad");
    }
  }

  async function remove() {
    if (!confirm(`"${post.title}" wirklich löschen?`)) return;
    try {
      const bestaetigung = BB.isWiki(post) ? BB.qs({ confirm: post.slug }) : "";
      await BB.del("/posts/" + post.id + bestaetigung);
      notify("Beitrag gelöscht");
      go(BB.isWiki(post) ? "/wissen" : "/forum");
    } catch (err) {
      notify(err.message, "bad");
    }
  }

  if (missing) {
    return (
      <div className="wrap section">
        <Empty mark="404" title={BB.t("Beitrag nicht gefunden")} action={<Link to="/" className="btn ghost">{BB.t("Zur Startseite")}</Link>}>
          {BB.t("Der Link zeigt ins Leere. Vielleicht wurde der Beitrag gelöscht oder umbenannt.")}
        </Empty>
      </div>
    );
  }
  if (draftBlocked) {
    return (
      <div className="wrap section">
        <Empty mark="TBD" title={BB.t("Noch in Arbeit")} action={<Link to="/wissen" className="btn ghost">{BB.t("Zur Wissensbasis")}</Link>}>
          {BB.t("Dieser Artikel ist noch in Arbeit und noch nicht freigegeben.")}
        </Empty>
      </div>
    );
  }
  if (!post) return <div className="wrap section"><Spinner /></div>;

  const cat = BB.catById(categories, post.categoryId);
  const isWiki = BB.isWiki(post);
  const d = post.data || {};

  return (
    <article className="wrap section" style={{ paddingTop: "2.5rem" }}>
      <div className="reader">
        <div>
          <header className="reader-head">
            <div className="eyebrow">
              <Link to={isWiki ? "/wissen" : "/forum"}>{isWiki ? BB.t("Wissensbasis") : BB.t("Forum")}</Link>
              {cat && (
                <>
                  <span style={{ color: "var(--fg-4)" }}>/</span>
                  {/* Der Kategorienbaum gehört zu /wissen. Ein Forumsbeitrag zeigt
                      seine Kategorie deshalb an, verlinkt sie aber nicht: dort
                      stünde er nicht in der Liste. */}
                  {isWiki
                    ? <Link to={"/wissen?cat=" + cat.id}>{cat.label}</Link>
                    : <span>{cat.label}</span>}
                </>
              )}
            </div>

            <h1>{post.title}</h1>
            {post.summary && <p className="lead">{post.summary}</p>}

            {post.cover && (
              <img
                src={post.cover}
                alt=""
                style={{ width: "100%", borderRadius: "var(--r)", border: "1px solid var(--line)", aspectRatio: "16/9", objectFit: "cover" }}
                onError={(e) => { e.target.style.display = "none"; }}
              />
            )}

            <div className="reader-meta">
              <KindBadge kind={post.kind} />
              <DraftMark post={post} />
              <Byline author={post.author} at={post.createdAt} extra={`${post.readingMinutes} ${BB.t("Min. Lesezeit")}`} />
              <div className="grow" />
              {user && (
                <button
                  className={"pill" + (post.read ? " on" : "")}
                  onClick={toggleRead}
                  title={post.read ? "Als ungelesen markieren" : "Als gelesen markieren"}
                >
                  {post.read ? "✓ " + BB.t("gelesen") : BB.t("als gelesen markieren")}
                </button>
              )}
              {/* Nur im Forum. Ein Wissensartikel wird nicht gewählt, er wird
                  belegt: die Evidenzmatrix am Ende sagt, was er trägt. */}
              {/* Frühzugang: neue Forschungssubstanzen lesen Premium zuerst.
                  Das Datum läuft von selbst ab, eine Freigabe von Hand wird
                  vergessen. */}
              {isWiki && user && (user.role === "admin" || user.role === "mod") && (
                <button className={"pill" + (post.earlyUntil ? " on" : "")}
                        onClick={() => fruehzugang(post.earlyUntil ? 0 : 14)}
                        title={BB.t("Neue Artikel zuerst für Premium")}>
                  {post.earlyUntil
                    ? BB.t("Frühzugang bis") + " " + post.earlyUntil
                    : BB.t("Frühzugang 14 Tage")}
                </button>
              )}
              {!isWiki && user && (user.role === "admin" || user.role === "mod") && (
                <button className={"pill" + (post.pinned ? " on" : "")} onClick={anpinnen}
                        title={BB.t("Oben festhalten")}>
                  📌 {post.pinned ? BB.t("angepinnt") : BB.t("anpinnen")}
                </button>
              )}
              {!isWiki && (
                <button className={"pill" + (post.voted ? " on" : "")} onClick={vote} title={BB.t("Hilfreich")}>
                  ▲ {post.votes || 0}
                </button>
              )}
            </div>

            {post.tags.length > 0 && <TagList tags={post.tags} />}
          </header>

          {post.kind === "tierlist" && (
            <div style={{ marginBottom: "2.5rem" }}>
              <TierListView data={post.data} />
            </div>
          )}

          <Body post={post} index={index} refs={isWiki ? d.refs : null} showTodo={post.canReview} />

          {isWiki && Array.isArray(d.refs) && d.refs.length > 0 && (
            <section style={{ marginTop: "3.5rem", paddingTop: "2rem", borderTop: "1px solid var(--line)" }}>
              <div className="label" style={{ marginBottom: "1rem" }}>{BB.t("Quellen")}</div>
              <RefList refs={d.refs} />
            </section>
          )}

          {isWiki && <Evidenzmatrix slug={post.slug} />}

          {/* Transparenzhinweis nach Artikel 50 der EU-Verordnung 2024/1689.
              Nur die Wissensbasis: Forumsbeiträge schreiben Nutzer selbst. */}
          {isWiki && (
            <p className="ki-hinweis">
              {BB.t("Dieser Artikel wurde unter Einsatz von KI-Systemen erstellt.")}{" "}
              <Link to="/impressum#ki">{BB.t("Mehr dazu")}</Link>
            </p>
          )}

          {post.canReview && (
            <div style={{ marginTop: "2.5rem" }}>
              <ReviewBox
                post={post}
                onChange={(r) => setPost((p) => ({ ...p, ...r }))}
              />
            </div>
          )}

          {post.canEdit && (
            <div className="row" style={{ gap: 8, marginTop: "1.5rem", paddingTop: "1.5rem", borderTop: "1px solid var(--line)" }}>
              <Link to={"/bearbeiten/" + post.slug} className="btn ghost sm">{BB.t("Bearbeiten")}</Link>
              <button className="btn ghost danger sm" onClick={remove}>{BB.t("Löschen")}</button>
            </div>
          )}

          <Comments postId={post.id} />
        </div>

        <aside className="aside-panel">
          {/* Die Seitenleiste hängt an der Art, nicht an der Sammlung: ein Rezept
              zeigt Zutaten und Nährwerte, egal ob es im Forum oder in der
              Wissensbasis steht. */}
          {post.kind === "wiki" && <WikiPanel post={post} categories={categories} />}
          {post.kind === "stack" && <StackPanel post={post} />}
          {post.kind === "transformation" && <TransformationPanel post={post} />}
          {post.kind === "recipe" && <RecipePanel post={post} />}
          {!isWiki && post.author && (
            <div className="panel">
              <div className="label">{BB.t("Autor")}</div>
              <Link to={"/u/" + post.author.username} className="row" style={{ gap: "0.75rem" }}>
                <Avatar user={post.author} />
                <span>
                  <div style={{ fontWeight: 500 }}>{post.author.displayName}</div>
                  <div className="mono dim" style={{ fontSize: "var(--fs-xs)" }}>@{post.author.username}</div>
                </span>
              </Link>
            </div>
          )}
          <div className="panel">
            <div className="disclaimer">
              {BB.t("Inhalte dienen der Information und Dokumentation. Sie ersetzen keine ärztliche Beratung, besonders nicht bei verschreibungspflichtigen Substanzen.")}
            </div>
          </div>
        </aside>
      </div>
    </article>
  );
}

Object.assign(window, { PostPage, Comments, ReviewBox });