/* ==========================================================================
   COMPOSE: create/edit a community post. Markdown in, live preview beside it.
   ========================================================================== */

// format wird vom Editor nur gelesen, nie gesetzt: Neue Beiträge legt der Server
// grundsätzlich als Markdown an, die redaktionellen HTML-Artikel behalten beim
// Bearbeiten ihr Format. Der Editor muss es trotzdem kennen, sonst zeigt er für
// einen HTML-Artikel eine falsche Vorschau.
const BLANK = {
  kind: "article", collection: "forum", title: "", summary: "", body: "", categoryId: "",
  cover: "", tags: [], data: {}, status: "published", authorUsername: "", format: "md",
};

/* --- kind-specific extra fields ------------------------------------------ */

function StackFields({ data, set }) {
  const compounds = Array.isArray(data.compounds) ? data.compounds : [{ name: "", dose: "", freq: "" }];
  const patch = (i, key, value) => {
    const next = compounds.map((c, j) => (i === j ? { ...c, [key]: value } : c));
    set("compounds", next);
  };
  return (
    <>
      <div className="row" style={{ gap: "1rem", flexWrap: "wrap" }}>
        <Field label="Ziel"><input className="input" value={data.goal || ""} onChange={(e) => set("goal", e.target.value)} placeholder="z. B. Lean Bulk" /></Field>
        <Field label="Dauer (Wochen)"><input className="input" type="number" min="1" max="104" value={data.weeks || ""} onChange={(e) => set("weeks", e.target.value)} /></Field>
        <Field label="Erfahrungslevel">
          <select className="input" value={data.experience || ""} onChange={(e) => set("experience", e.target.value)}>
            <option value="">bitte wählen</option>
            <option>Erster Zyklus</option>
            <option>Fortgeschritten</option>
            <option>Erfahren</option>
          </select>
        </Field>
      </div>

      <Field label="Wirkstoffe" hint="Name, Dosis und Frequenz, eine Zeile pro Wirkstoff.">
        <div className="stack" style={{ gap: "0.5rem" }}>
          {compounds.map((c, i) => (
            <div key={i} className="row" style={{ gap: "0.5rem" }}>
              <input className="input" style={{ flex: 2 }} value={c.name || ""} onChange={(e) => patch(i, "name", e.target.value)} placeholder="Wirkstoff" />
              <input className="input" style={{ flex: 1 }} value={c.dose || ""} onChange={(e) => patch(i, "dose", e.target.value)} placeholder="500 mg" />
              <input className="input" style={{ flex: 1 }} value={c.freq || ""} onChange={(e) => patch(i, "freq", e.target.value)} placeholder="pro Woche" />
              <button type="button" className="btn quiet sm" onClick={() => set("compounds", compounds.filter((_, j) => j !== i))} title="Zeile entfernen">✕</button>
            </div>
          ))}
        </div>
        <button type="button" className="btn ghost sm" style={{ alignSelf: "flex-start", marginTop: "0.5rem" }}
                onClick={() => set("compounds", compounds.concat({ name: "", dose: "", freq: "" }))}>
          + Wirkstoff
        </button>
      </Field>
    </>
  );
}

function TransformationFields({ data, set }) {
  return (
    <>
      <div className="row" style={{ gap: "1rem", flexWrap: "wrap" }}>
        <Field label="Gewicht vorher (kg)"><input className="input" type="number" value={data.weightBefore || ""} onChange={(e) => set("weightBefore", e.target.value)} /></Field>
        <Field label="Gewicht nachher (kg)"><input className="input" type="number" value={data.weightAfter || ""} onChange={(e) => set("weightAfter", e.target.value)} /></Field>
        <Field label="KFA vorher (%)"><input className="input" type="number" value={data.bfBefore || ""} onChange={(e) => set("bfBefore", e.target.value)} /></Field>
        <Field label="KFA nachher (%)"><input className="input" type="number" value={data.bfAfter || ""} onChange={(e) => set("bfAfter", e.target.value)} /></Field>
        <Field label="Zeitraum (Monate)"><input className="input" type="number" value={data.months || ""} onChange={(e) => set("months", e.target.value)} /></Field>
      </div>
      <div className="row" style={{ gap: "1rem", flexWrap: "wrap", alignItems: "flex-start" }}>
        <ImageUpload label="Bild vorher" compact value={data.beforeUrl || ""} onChange={(v) => set("beforeUrl", v)} />
        <ImageUpload label="Bild nachher" compact value={data.afterUrl || ""} onChange={(v) => set("afterUrl", v)} />
      </div>
      <label className="row" style={{ gap: "0.6rem", cursor: "pointer" }}>
        <input type="checkbox" checked={!!data.natural} onChange={(e) => set("natural", e.target.checked)} />
        <span style={{ fontSize: "var(--fs-sm)" }}>Natural (ohne unterstützende Substanzen)</span>
      </label>
    </>
  );
}

function RecipeFields({ data, set }) {
  const ingredients = Array.isArray(data.ingredients) && data.ingredients.length
    ? data.ingredients
    : [{ amount: "", name: "" }];
  const patch = (i, key, value) =>
    set("ingredients", ingredients.map((c, j) => (i === j ? { ...c, [key]: value } : c)));

  return (
    <>
      <div className="row" style={{ gap: "1rem", flexWrap: "wrap" }}>
        <Field label="Portionen">
          <input className="input" type="number" min="1" max="99" value={data.servings || ""}
                 onChange={(e) => set("servings", e.target.value)} placeholder="2" />
        </Field>
        <Field label="Zubereitungszeit (Min.)">
          <input className="input" type="number" min="1" max="1440" value={data.minutes || ""}
                 onChange={(e) => set("minutes", e.target.value)} placeholder="25" />
        </Field>
        <Field label="Aufwand">
          <select className="input" value={data.difficulty || ""} onChange={(e) => set("difficulty", e.target.value)}>
            <option value="">bitte wählen</option>
            <option>Einfach</option>
            <option>Mittel</option>
            <option>Aufwendig</option>
          </select>
        </Field>
      </div>

      <Field label="Nährwerte pro Portion" hint="Optional. Was du weißt, der Rest bleibt leer.">
        <div className="row" style={{ gap: "0.5rem", flexWrap: "wrap" }}>
          {[["kcal", "kcal"], ["protein", "Eiweiß (g)"], ["carbs", "Kohlenhydrate (g)"],
            ["fat", "Fett (g)"], ["fiber", "Ballaststoffe (g)"]].map(
            ([key, label]) => (
              <input
                key={key}
                className="input"
                style={{ flex: "1 1 120px" }}
                type="number"
                min="0"
                value={data[key] || ""}
                onChange={(e) => set(key, e.target.value)}
                placeholder={label}
                aria-label={label}
              />
            )
          )}
        </div>
      </Field>

      <Field label="Zutaten" hint="Menge und Zutat, eine Zeile pro Position.">
        <div className="stack" style={{ gap: "0.5rem" }}>
          {ingredients.map((c, i) => (
            <div key={i} className="row" style={{ gap: "0.5rem" }}>
              <input className="input" style={{ flex: 1 }} value={c.amount || ""}
                     onChange={(e) => patch(i, "amount", e.target.value)} placeholder="200 g" />
              <input className="input" style={{ flex: 3 }} value={c.name || ""}
                     onChange={(e) => patch(i, "name", e.target.value)} placeholder="Magerquark" />
              <button type="button" className="btn quiet sm" title="Zeile entfernen"
                      onClick={() => set("ingredients", ingredients.filter((_, j) => j !== i))}>✕</button>
            </div>
          ))}
        </div>
        <button type="button" className="btn ghost sm" style={{ alignSelf: "flex-start", marginTop: "0.5rem" }}
                onClick={() => set("ingredients", ingredients.concat({ amount: "", name: "" }))}>
          + Zutat
        </button>
      </Field>
    </>
  );
}

/* --- Wissensartikel ------------------------------------------------------ */

/** Alles, was beim Wissensartikel in der Seitenleiste landet: Kennzahlen,
    Steckbrief, Strukturformel und Quellen. Diese Felder waren bis hierher nur
    über db_articles.json zu ändern, im Editor fehlten sie ersatzlos. */
function WikiFields({ data, set, categories, categoryId }) {
  const schema = BB.schemaFor(categories, categoryId);
  const bars = data.bars || {};
  const aliases = Array.isArray(data.aliases) ? data.aliases : [];
  const refs = Array.isArray(data.refs) ? data.refs : [];

  const setBar = (key, raw) => {
    const next = { ...bars };
    if (raw === "") delete next[key];
    else next[key] = Number(raw);
    set("bars", next);
  };
  const patchRef = (i, key, value) =>
    set("refs", refs.map((r, j) => (j === i ? { ...r, [key]: value } : r)));

  return (
    <>
      {/* Welche Kennzahlen es gibt, hängt am Schema der Kategorie. Ohne Kategorie
          gibt es kein Schema und damit nichts einzustellen. */}
      {schema ? (
        <Field
          label="Kennzahlen"
          hint="Eigene Einschätzung, keine Messwerte. Leer lassen blendet die Zeile im Artikel aus."
        >
          <div className="stack" style={{ gap: "0.45rem" }}>
            {schema.map((m) => (
              <div key={m.key} className="row" style={{ gap: "0.75rem", alignItems: "center" }}>
                <span style={{ flex: "1 1 150px", fontSize: "var(--fs-sm)" }}>
                  {BB.t(m.label)}
                  {m.inverse && <span className="dim" title={BB.t("Weniger ist besser")}> ↓</span>}
                </span>
                <input
                  className="input"
                  style={{ flex: "0 0 110px" }}
                  type="number"
                  min="0"
                  max={m.max}
                  step={m.unit ? "0.1" : "1"}
                  value={bars[m.key] === undefined ? "" : bars[m.key]}
                  onChange={(e) => setBar(m.key, e.target.value)}
                  placeholder={"0 bis " + m.max}
                  aria-label={BB.t(m.label)}
                />
                <span className="mono dim" style={{ flex: "0 0 34px", fontSize: "var(--fs-xs)" }}>
                  {m.unit || "/ " + m.max}
                </span>
              </div>
            ))}
          </div>
          {Object.keys(bars).length > 0 && (
            <div className="panel" style={{ marginTop: "0.9rem" }}>
              <div className="label">So sieht es im Artikel aus</div>
              <MetricBars schema={schema} values={bars} />
            </div>
          )}
        </Field>
      ) : (
        <Field label="Kennzahlen" hint="Erst eine Kategorie wählen. Welche Kennzahlen es gibt, hängt an ihrem Schema." >
          <span className="dim" style={{ fontSize: "var(--fs-sm)" }}>Für diese Kategorie ist kein Schema hinterlegt.</span>
        </Field>
      )}

      <div className="row" style={{ gap: "1rem", flexWrap: "wrap", alignItems: "flex-start" }}>
        <Field label="Summenformel" hint="Erscheint im Steckbrief, etwa C₅H₁₁NO₂.">
          <input className="input" value={data.formula || ""} maxLength={60}
                 onChange={(e) => set("formula", e.target.value)} placeholder="C₅H₁₁NO₂" />
        </Field>
        <Field label="Auch bekannt als" hint="Mit Komma trennen. Der Auto-Linker findet den Artikel auch über diese Namen.">
          <input className="input" value={aliases.join(", ")}
                 onChange={(e) => set("aliases", e.target.value.split(",").map((s) => s.trim()).filter(Boolean))}
                 placeholder="TMG, Trimethylglycin" />
        </Field>
      </div>

      <Field
        label="Strukturformel"
        hint="Slug der Bilddatei unter static/molecules. Gibt es zu dem Stoff bewusst keine Struktur, das Feld leer lassen und stattdessen die Begründung eintragen."
      >
        <div className="row" style={{ gap: "0.75rem", flexWrap: "wrap" }}>
          <input className="input" style={{ flex: "2 1 200px" }} value={data.molecule || ""}
                 onChange={(e) => set("molecule", e.target.value.trim() || null)} placeholder="astaxanthin" />
          <input className="input" style={{ flex: "1 1 130px" }} type="number" value={data.pubchemCid || ""}
                 onChange={(e) => set("pubchemCid", e.target.value ? Number(e.target.value) : null)}
                 placeholder="PubChem-CID" aria-label="PubChem-CID" />
        </div>
        <input className="input" style={{ marginTop: "0.5rem" }} value={data.moleculeNote || ""} maxLength={120}
               onChange={(e) => set("moleculeNote", e.target.value)}
               placeholder="Begründung, falls keine Struktur: Proteingemisch, Element …" />
      </Field>

      <Field
        label="Quellen"
        hint="Die Nummer ist das Ziel der Belege im Text. Wer sie ändert oder eine Quelle löscht, muss die Marken im Fließtext nachziehen."
      >
        <div className="stack" style={{ gap: "0.75rem" }}>
          {refs.map((r, i) => (
            <div key={i} className="stack" style={{ gap: "0.4rem" }}>
              <div className="row" style={{ gap: "0.5rem" }}>
                <input className="input mono" style={{ flex: "0 0 64px" }} type="number" min="1"
                       value={r.n === undefined ? i + 1 : r.n}
                       onChange={(e) => patchRef(i, "n", Number(e.target.value))} aria-label="Nummer" />
                <input className="input" style={{ flex: 1 }} value={r.text || ""}
                       onChange={(e) => patchRef(i, "text", e.target.value)}
                       placeholder="Autor X et al. Titel. Journal. Jahr." />
                <button type="button" className="btn quiet sm" title="Quelle entfernen"
                        onClick={() => set("refs", refs.filter((_, j) => j !== i))}>✕</button>
              </div>
              <div className="row" style={{ gap: "0.5rem" }}>
                <input className="input mono" style={{ flex: 1 }} value={r.pmid || ""}
                       onChange={(e) => patchRef(i, "pmid", e.target.value.trim())} placeholder="PMID" />
                <input className="input mono" style={{ flex: 2 }} value={r.doi || ""}
                       onChange={(e) => patchRef(i, "doi", e.target.value.trim())} placeholder="DOI" />
                <input className="input mono" style={{ flex: 2 }} value={r.url || ""}
                       onChange={(e) => patchRef(i, "url", e.target.value.trim())} placeholder="Adresse" />
              </div>
            </div>
          ))}
        </div>
        <button type="button" className="btn ghost sm" style={{ alignSelf: "flex-start", marginTop: "0.6rem" }}
                onClick={() => set("refs", refs.concat({ n: refs.length + 1, text: "" }))}>
          + Quelle
        </button>
      </Field>
    </>
  );
}

/* --- Wissensartikel: Bildplatzhalter ------------------------------------ */

/* Die redaktionellen HTML-Artikel tragen die Bildaufträge bewusst im Body.
   So bleiben Motiv, Zweck und Beschriftung beim Export nach db_articles.json
   erhalten. Der Editor setzt nur das Bild und die daraus abgeleiteten
   Frontend-Labels ein; der Auftrag selbst wird nicht weggeworfen. */
const WIKI_FIGURE_RE = /<figure\b[^>]*>[\s\S]*?<\/figure>/gi;

function figureInner(block, tag, className) {
  const re = new RegExp(
    `<${tag}\\b[^>]*class="[^"]*\\b${className}\\b[^"]*"[^>]*>([\\s\\S]*?)<\\/${tag}>`,
    "i",
  );
  const match = block.match(re);
  return match ? match[1].trim() : "";
}

function figureCaption(block) {
  const match = block.match(/<figcaption\b[^>]*>([\s\S]*?)<\/figcaption>/i);
  return match ? match[1].trim() : "";
}

function figurePlain(html) {
  const holder = document.createElement("div");
  holder.innerHTML = html || "";
  return (holder.textContent || holder.innerText || "").replace(/\s+/g, " ").trim();
}

function figureEsc(value) {
  return String(value === undefined || value === null ? "" : value)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

function figurePercent(value, fallback) {
  if (value === "" || value === null || value === undefined) return fallback;
  const number = Number(value);
  if (!Number.isFinite(number)) return fallback;
  return Math.max(0, Math.min(100, Math.round(number * 10) / 10));
}

function figureLabelsFromBrief(brief) {
  const plain = figurePlain(brief);
  const match = plain.match(/Beschriftung:\s*(.*?)(?:\s+Format:|$)/i);
  if (!match) return [];
  return match[1]
    .replace(/[„“\"]/g, "")
    .split(/[,;]/)
    .map((text) => text.trim().replace(/[.!?]+$/, ""))
    .filter((text) => text && !/^(am|an|auf|daneben|im|in|jeweils|links|mittig|oben|rechts|unten|keine weiteren wörter)/i.test(text))
    .map((text, index) => ({
      text,
      left: 18 + (index % 4) * 22,
      top: 18 + Math.floor(index / 4) * 18,
      frei: false,
    }));
}

function figureLabelsFromBlock(block) {
  const spans = block.match(/<span\b[^>]*class="[^"]*\bfig-label\b[^"]*"[^>]*>[\s\S]*?<\/span>/gi) || [];
  return spans.map((span, index) => {
    const style = (span.match(/\bstyle="([^"]*)"/i) || [])[1] || "";
    const inner = (span.match(/<span\b[^>]*>([\s\S]*?)<\/span>/i) || [])[1] || "";
    const left = (style.match(/left\s*:\s*([\d.]+)%/i) || [])[1];
    const top = (style.match(/top\s*:\s*([\d.]+)%/i) || [])[1];
    const klasse = (span.match(/class="([^"]*)"/i) || [])[1] || "";
    return {
      text: figurePlain(inner),
      left: figurePercent(left, 18 + (index % 4) * 22),
      top: figurePercent(top, 18 + Math.floor(index / 4) * 18),
      frei: /\b frei\b/i.test(" " + klasse),
    };
  }).filter((label) => label.text);
}

function wikiFigureInfo(body) {
  const blocks = String(body || "").match(WIKI_FIGURE_RE) || [];
  return blocks.reduce((figures, raw, index) => {
    const opening = (raw.match(/^<figure\b[^>]*>/i) || [""])[0];
    const todo = /class="[^"]*\bfig-todo\b[^"]*"/i.test(opening);
    const bild = /class="[^"]*\bfig-bild\b[^"]*"/i.test(opening);
    if (!todo && !bild) return figures;

    const titleHtml = figureInner(raw, "div", "fig-title");
    const briefHtml = figureInner(raw, "p", "fig-brief");
    const captionHtml = figureCaption(raw);
    const image = raw.match(/<img\b[^>]*\bsrc="([^"]+)"/i);
    const labels = bild
      ? figureLabelsFromBlock(raw)
      : figureLabelsFromBrief(briefHtml);
    figures.push({
      key: (todo ? "todo" : "bild") + ":" + index + ":" + raw,
      raw,
      kind: todo ? "todo" : "bild",
      titleHtml,
      title: figurePlain(titleHtml) || "Ohne Titel",
      briefHtml,
      brief: figurePlain(briefHtml),
      captionHtml,
      src: image ? image[1] : "",
      labels,
    });
    return figures;
  }, []);
}

function wikiFigureHtml(figure, url, labels) {
  const metadata = figure.briefHtml
    ? `<details class="fig-meta"><summary>Bildbeschreibung</summary><p class="fig-brief">${figure.briefHtml}</p></details>\n`
    : "";
  const labelHtml = (labels || [])
    .filter((label) => label && String(label.text || "").trim())
    .map((label) => {
      const klasse = label.frei ? "fig-label frei" : "fig-label";
      const left = figurePercent(label.left, 50);
      const top = figurePercent(label.top, 50);
      return `<span class="${klasse}" style="left:${left}%;top:${top}%">${figureEsc(String(label.text).trim())}</span>`;
    })
    .join("\n");
  const caption = figure.captionHtml ? `\n<figcaption>${figure.captionHtml}</figcaption>` : "";
  return `<figure class="figure fig-bild">\n`
    + (figure.titleHtml ? `<div class="fig-title">${figure.titleHtml}</div>\n` : "")
    + metadata
    + `<div class="fig-canvas">\n<img src="${figureEsc(url)}" alt="">\n`
    + (labelHtml ? labelHtml + "\n" : "")
    + `</div>${caption}\n</figure>`;
}

function WikiFigureManager({ body, setBody }) {
  const figures = useMemo(() => wikiFigureInfo(body), [body]);
  const [drafts, setDrafts] = useState({});

  if (!figures.length) return null;

  const draftFor = (figure) => {
    const draft = drafts[figure.key] || {};
    return {
      url: draft.url === undefined ? figure.src : draft.url,
      labels: Array.isArray(draft.labels) ? draft.labels : figure.labels,
    };
  };

  const patchDraft = (figure, patch) => {
    setDrafts((old) => ({
      ...old,
      [figure.key]: { ...(old[figure.key] || {}), ...patch },
    }));
  };

  const patchLabel = (figure, index, patch) => {
    const draft = draftFor(figure);
    patchDraft(figure, {
      labels: draft.labels.map((label, i) => (i === index ? { ...label, ...patch } : label)),
    });
  };

  const replace = (figure) => {
    const draft = draftFor(figure);
    if (!draft.url) return;
    const next = String(body || "").replace(
      figure.raw,
      wikiFigureHtml(figure, draft.url, draft.labels),
    );
    if (next !== body) {
      setBody(next);
      setDrafts((old) => {
        const rest = { ...old };
        delete rest[figure.key];
        return rest;
      });
    }
  };

  return (
    <Field
      label={`Abbildungen (${figures.length})`}
      hint="Bildplatzhalter auswählen, eigenes Bild hochladen und die Beschriftungen in Prozent positionieren. Die Bildinfo bleibt im HTML als Metadaten erhalten."
    >
      <div className="wiki-figure-editor">
        {figures.map((figure) => {
          const draft = draftFor(figure);
          return (
            <section className="wiki-figure-card" key={figure.key}>
              <div className="wiki-figure-card-head">
                <div>
                  <div className="label">{figure.kind === "todo" ? "Bildplatzhalter" : "Vorhandene Abbildung"}</div>
                  <h3>{figure.title}</h3>
                </div>
                <span className="pill">{figure.labels.length} Beschriftungen</span>
              </div>

              {figure.brief && (
                <details className="wiki-figure-info">
                  <summary>Info aus dem Platzhalter</summary>
                  <p>{figure.brief}</p>
                </details>
              )}

              <div className="wiki-figure-controls">
                <ImageUpload
                  label={figure.kind === "todo" ? "Eigenes Bild" : "Bild ersetzen"}
                  compact
                  value={draft.url}
                  onChange={(url) => patchDraft(figure, { url })}
                />

                {draft.url && (
                  <div className="wiki-figure-side">
                    <div className="wiki-figure-preview">
                      <div className="fig-canvas">
                        <img src={draft.url} alt="" />
                        {draft.labels.map((label, index) => (
                          <span
                            key={index}
                            className={label.frei ? "fig-label frei" : "fig-label"}
                            style={{ left: figurePercent(label.left, 50) + "%", top: figurePercent(label.top, 50) + "%" }}
                          >
                            {label.text || "…"}
                          </span>
                        ))}
                      </div>
                    </div>

                    <div className="wiki-figure-labels">
                      <div className="label">Beschriftungen · Position in Prozent</div>
                      <div className="wiki-figure-label-head">
                        <span>Text</span><span>links</span><span>oben</span><span />
                      </div>
                      {draft.labels.map((label, index) => (
                        <div className="wiki-figure-label-row" key={index}>
                          <input
                            className="input"
                            value={label.text}
                            aria-label={`Beschriftung ${index + 1}`}
                            onChange={(e) => patchLabel(figure, index, { text: e.target.value })}
                          />
                          <input
                            className="input mono"
                            type="number"
                            min="0"
                            max="100"
                            step="0.5"
                            value={label.left}
                            aria-label={`Beschriftung ${index + 1}, links`}
                            onChange={(e) => patchLabel(figure, index, { left: e.target.value })}
                          />
                          <input
                            className="input mono"
                            type="number"
                            min="0"
                            max="100"
                            step="0.5"
                            value={label.top}
                            aria-label={`Beschriftung ${index + 1}, oben`}
                            onChange={(e) => patchLabel(figure, index, { top: e.target.value })}
                          />
                          <button
                            type="button"
                            className="btn quiet sm"
                            title="Beschriftung entfernen"
                            onClick={() => patchDraft(figure, { labels: draft.labels.filter((_, i) => i !== index) })}
                          >
                            ✕
                          </button>
                        </div>
                      ))}
                      <button
                        type="button"
                        className="btn ghost sm"
                        onClick={() => patchDraft(figure, { labels: draft.labels.concat({ text: "", left: 50, top: 50, frei: false }) })}
                      >
                        + Beschriftung
                      </button>
                    </div>

                    <button type="button" className="btn primary sm" onClick={() => replace(figure)}>
                      {figure.kind === "todo" ? "Bild einsetzen" : "Bild und Beschriftungen übernehmen"}
                    </button>
                  </div>
                )}
              </div>
            </section>
          );
        })}
      </div>
    </Field>
  );
}

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

function Compose({ categories, slug, params }) {
  const { go } = useRouter();
  const { user, ready } = useAuth();
  const notify = useToast();
  const editing = !!slug;

  const initialKind = params.get("kind") || "article";
  const [form, setForm] = useState(() => ({
    ...BLANK,
    kind: initialKind,
    // ?in=wiki legt den Beitrag gleich in der Wissensbasis an, ein Wissensartikel
    // kann ohnehin nirgendwo anders stehen
    collection: params.get("in") === "wiki" || initialKind === "wiki" ? "wiki" : "forum",
    // ?as=bible öffnet den Editor direkt im Namen des Redaktionskontos
    authorUsername: params.get("as") || "",
    data: initialKind === "tierlist" ? emptyTierlist() : {},
  }));
  const [tagDraft, setTagDraft] = useState("");
  const [preview, setPreview] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [postId, setPostId] = useState(null);
  const [loading, setLoading] = useState(editing);
  const [authors, setAuthors] = useState([]);
  const [currentAuthor, setCurrentAuthor] = useState(null);
  const isEditor = user && (user.role === "admin" || user.role === "mod");
  const editorialMode = isEditor && (
    params.get("in") === "wiki" || (editing && form.collection === "wiki")
  );

  useEffect(() => {
    if (ready && !user) go("/login?next=" + encodeURIComponent(window.location.pathname));
  }, [ready, user, go]);

  useEffect(() => {
    if (!isEditor) return;
    let alive = true;
    BB.get("/admin/authors").then((a) => { if (alive) setAuthors(a); }).catch(() => {});
    return () => { alive = false; };
  }, [isEditor]);

  useEffect(() => {
    if (!editing) return;
    let alive = true;
    BB.get("/posts/" + encodeURIComponent(slug))
      .then((p) => {
        if (!alive) return;
        if (!p.canEdit) { notify("Du darfst diesen Beitrag nicht bearbeiten.", "bad"); go(BB.postHref(p)); return; }
        setPostId(p.id);
        setCurrentAuthor(p.author);
        setForm({
          kind: p.kind, collection: BB.collectionOf(p), title: p.title, summary: p.summary,
          body: p.body, categoryId: p.categoryId || "", cover: p.cover, tags: p.tags,
          data: p.data || {}, status: p.status, authorUsername: "", format: p.format || "md",
        });
        setLoading(false);
      })
      .catch(() => { if (alive) { setError("Beitrag nicht gefunden."); setLoading(false); } });
    return () => { alive = false; };
  }, [slug, editing, go, notify]);

  const set = (key, value) => setForm((f) => ({ ...f, [key]: value }));
  const setData = (key, value) => setForm((f) => ({ ...f, data: { ...f.data, [key]: value } }));

  function addTag(raw) {
    const t = raw.trim().toLowerCase();
    if (!t || form.tags.includes(t) || form.tags.length >= 12) return;
    set("tags", form.tags.concat(t));
    setTagDraft("");
  }

  async function save(status) {
    if (!form.title.trim()) { setError("Gib deinem Beitrag einen Titel."); return; }
    setBusy(true);
    setError("");
    const payload = { ...form, status, categoryId: form.categoryId || null };
    try {
      const res = editing
        ? await BB.patch("/posts/" + postId, payload)
        : await BB.post("/posts", payload);
      notify(status === "draft" ? "Als Entwurf gespeichert" : editing ? "Änderungen gespeichert" : "Beitrag veröffentlicht");
      go(BB.postHref({ collection: form.collection, slug: res.slug }));
    } catch (err) {
      setError(err.message);
      setBusy(false);
    }
  }

  // only leaf categories accept posts
  const options = useMemo(
    () => categories
      .filter((c) => !c.isGroup)
      .map((c) => ({ id: c.id, label: BB.ancestors(categories, c.id).map((a) => a.label).concat(c.label).join(" → ") }))
      .sort((a, b) => a.label.localeCompare(b.label, "de")),
    [categories]
  );

  if (!ready || loading) return <div className="wrap section"><Spinner /></div>;
  if (!user) return null;

  return (
    <div className="wrap wrap-narrow section" style={{ paddingTop: "3rem" }}>
      <header className="section-head" style={{ marginBottom: "2.5rem" }}>
        <div className="eyebrow">{editing ? "Bearbeiten" : "Neuer Beitrag"}</div>
        <h2>{editing ? form.title || "Beitrag bearbeiten" : "Was willst du teilen?"}</h2>
      </header>

      {!editing && (
        <div className="kind-picker" style={{ marginBottom: "2.5rem" }}>
          {/* Wissensartikel werden ausschließlich vom Verwaltungstab aus angelegt. */}
          {(editorialMode ? ["wiki"].concat(BB.USER_KINDS) : BB.USER_KINDS).map((k) => (
            <button
              key={k}
              type="button"
              className={"kind-opt k-" + k + (form.kind === k ? " on" : "")}
              onClick={() => setForm((f) => ({
                ...f,
                kind: k,
                // ein Wissensartikel steht immer in der Wissensbasis
                collection: k === "wiki" ? "wiki" : f.collection,
                // beim Wechsel auf eine Tierlist die leeren Reihen vorbereiten
                data: k === "tierlist" && !Array.isArray(f.data.tiers) ? emptyTierlist() : f.data,
              }))}
            >
              <span className="t">
                <span aria-hidden="true" style={{ color: "var(--kc)", marginRight: 8 }}>{BB.KINDS[k].icon}</span>
                {BB.KINDS[k].label}
              </span>
              <span className="d">{BB.KINDS[k].blurb}</span>
            </button>
          ))}
        </div>
      )}

      <form className="stack" style={{ gap: "1.75rem" }} onSubmit={(e) => { e.preventDefault(); save("published"); }}>
        <input
          className="input big"
          value={form.title}
          onChange={(e) => set("title", e.target.value)}
          placeholder="Titel"
          maxLength={200}
          aria-label="Titel"
        />

        <Field label="Kurzbeschreibung" hint="Ein bis zwei Sätze, erscheint in Listen und Vorschauen.">
          <input className="input" value={form.summary} onChange={(e) => set("summary", e.target.value)} maxLength={400} placeholder="Worum geht es?" />
        </Field>

        {/* Wo der Beitrag steht, ist unabhängig von seiner Art. Nur die Redaktion
            darf in die Wissensbasis schreiben, deshalb sieht ein Mitglied den
            Umschalter gar nicht erst. */}
        {editorialMode && (
          <Field
            label="Erscheint in"
            hint={form.kind === "wiki"
              ? "Ein Wissensartikel steht immer in der Wissensbasis."
              : (BB.COLLECTIONS[form.collection] || BB.COLLECTIONS.forum).hint}
          >
            {form.kind === "wiki" ? (
              <div className="pill on" style={{ alignSelf: "flex-start" }}>
                {BB.COLLECTIONS.wiki.label}
              </div>
            ) : (
              <Segmented
                value={form.collection}
                onChange={(v) => set("collection", v)}
                options={Object.entries(BB.COLLECTIONS).map(([value, c]) => ({ value, label: c.label }))}
              />
            )}
          </Field>
        )}

        <div className="row" style={{ gap: "1rem", flexWrap: "wrap", alignItems: "flex-start" }}>
          <Field label="Kategorie">
            <select className="input" value={form.categoryId} onChange={(e) => set("categoryId", e.target.value)}>
              <option value="">ohne Kategorie</option>
              {options.map((o) => <option key={o.id} value={o.id}>{o.label}</option>)}
            </select>
          </Field>
          <ImageUpload
            label="Titelbild"
            hint="Optional. Erscheint als Vorschaubild in Listen."
            value={form.cover}
            onChange={(v) => set("cover", v)}
          />
        </div>

        {isEditor && authors.length > 0 && (
          <Field
            label="Veröffentlichen als"
            hint="Redaktionskonten stehen zur Auswahl, damit gepflegte Inhalte unter einem Namen laufen."
          >
            <select
              className="input"
              value={form.authorUsername}
              onChange={(e) => set("authorUsername", e.target.value)}
            >
              <option value="">
                {editing
                  ? "unverändert" + (currentAuthor ? " (" + currentAuthor.displayName + ")" : "")
                  : "ich selbst (" + user.displayName + ")"}
              </option>
              {authors.map((a) => (
                <option key={a.username} value={a.username}>
                  {a.displayName} (@{a.username})
                </option>
              ))}
            </select>
          </Field>
        )}

        {form.kind === "wiki" && (
          <>
            <WikiFields data={form.data} set={setData} categories={categories} categoryId={form.categoryId} />
            {form.format === "html" && (
              <WikiFigureManager body={form.body} setBody={(body) => set("body", body)} />
            )}
          </>
        )}
        {form.kind === "stack" && <StackFields data={form.data} set={setData} />}
        {form.kind === "transformation" && <TransformationFields data={form.data} set={setData} />}
        {form.kind === "recipe" && <RecipeFields data={form.data} set={setData} />}
        {form.kind === "tierlist" && (
          <Field
            label="Tierlist"
            hint="Vorauswahl aus Kategorie oder Tag übernehmen, Bilder zuordnen und anschließend in die Reihen ziehen. Eigene Uploads bleiben möglich."
          >
            <TierListEditor
              value={form.data}
              onChange={(v) => set("data", v)}
              categories={categories}
            />
          </Field>
        )}

        <Field label="Tags" hint="Enter zum Hinzufügen, maximal 12.">
          <div className="row" style={{ flexWrap: "wrap", gap: 6, marginBottom: form.tags.length ? 8 : 0 }}>
            {form.tags.map((t) => (
              <button key={t} type="button" className="pill tag on" onClick={() => set("tags", form.tags.filter((x) => x !== t))}>
                {t} ✕
              </button>
            ))}
          </div>
          <input
            className="input"
            value={tagDraft}
            onChange={(e) => setTagDraft(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addTag(tagDraft); }
              if (e.key === "Backspace" && !tagDraft && form.tags.length) set("tags", form.tags.slice(0, -1));
            }}
            placeholder="bulk, cut, anfänger …"
          />
        </Field>

        <Field
          label={form.kind === "recipe" ? "Zubereitung" : "Inhalt"}
          hint={form.format === "html"
            ? "Dieser Beitrag ist HTML, nicht Markdown. Belege sind <sup class=\"cite\" data-ref=\"7\"></sup>, Querverweise <a class=\"auto-link\" data-slug=\"ziel\" href=\"/wissen/ziel\">Text</a>."
            : "Markdown: # Abschnitt, ## Unterabschnitt, **fett**, - Liste, > Einordnung, [^7] als Beleg. Wissensartikel unterstützen zusätzlich ```figure``` mit geprüftem Inline-SVG."}
        >
          <div className="spread" style={{ marginBottom: "0.5rem" }}>
            <Segmented
              value={preview ? "preview" : "write"}
              onChange={(v) => setPreview(v === "preview")}
              options={[{ value: "write", label: "Schreiben" }, { value: "preview", label: "Vorschau" }]}
            />
            <span className="label">{BB.readingTime(form.body)} Min.</span>
          </div>
          {preview ? (
            // Ein redaktioneller Artikel liegt als HTML vor. Ihn durch den
            // Markdown-Renderer zu schicken zerlegt ihn, deshalb die Fallunterscheidung.
            <div className="prose panel show-todo" style={{ minHeight: 320, display: "block" }}
                 dangerouslySetInnerHTML={{
                   __html: (form.format === "html"
                     ? form.body
                     : BB.markdown(form.body, { trustedFigures: form.kind === "wiki" }))
                     || "<p class='dim'>Noch nichts zu sehen.</p>",
                 }} />
          ) : (
            <textarea
              className="textarea"
              style={{ minHeight: 380 }}
              value={form.body}
              onChange={(e) => set("body", e.target.value)}
              placeholder={form.kind === "recipe"
                ? "1. Quark und Eier verrühren …"
                : "## Überblick\n\nSchreib los …"}
            />
          )}
        </Field>

        {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 …" : editing ? "Änderungen speichern" : "Veröffentlichen"}
          </button>
          <button type="button" className="btn ghost" disabled={busy} onClick={() => save("draft")}>
            Als Entwurf sichern
          </button>
          <div className="grow" />
          <button type="button" className="btn quiet" onClick={() => window.history.back()}>Abbrechen</button>
        </div>
      </form>
    </div>
  );
}

Object.assign(window, { Compose });