/* ==========================================================================
   BUILDER (Beta): zeigt, was zusammenhängt, während man baut. Bewertet nichts.
   Plan und Regeln in docs/BUILDER.md.

   Die Seite ist bewusst Bild statt Text. Waagerecht ist Zeit, senkrecht ist
   Art: jeder Baustein rastet in seiner Spur auf einer Viertelstunde ein, und
   seine Lage bedeutet etwas. Ein freier Canvas wäre hübscher und sagte nichts.

   Was der Builder zeigt, kommt aus /api/builder/tag und ist entweder aus
   gepflegten Daten gerechnet (Makros, Erholung nach dem Modell von split.py)
   oder rein strukturell (Abstände). Wertende Sätze gibt es hier nicht.
   ========================================================================== */

const BLD_TAG = 24 * 60;
const BLD_RASTER = 15;
const BLD_SPEICHER = "bb-builder-v1";

const BLD_ARTEN = {
  mahlzeit: { label: "Mahlzeit", farbe: "var(--viz-3)", start: 12 * 60, dauer: 30 },
  training: { label: "Training", farbe: "var(--viz-2)", start: 17 * 60, dauer: 60 },
  cardio:   { label: "Cardio",   farbe: "var(--k-story)", start: 7 * 60, dauer: 30 },
  schlaf:   { label: "Schlaf",   farbe: "var(--viz-4)", start: 23 * 60, dauer: 8 * 60 },
  pharmakologie: { label: "Pharmakologie", farbe: "var(--viz-1)", start: 8 * 60, dauer: 30 },
};

/* Evidenzstufen als Kürzel, in der Reihenfolge der Datenlage. Ein Weg ist so
   gut belegt wie sein schwächstes Glied; das Backend nennt genau diese Stufe. */
const BLD_STUFEN = {
  measured:  { kurz: "M", label: "gemessen" },
  boltz:     { kurz: "B", label: "Boltz" },
  rang:      { kurz: "R", label: "Rang" },
  predicted: { kurz: "V", label: "vorhergesagt" },
  curated:   { kurz: "K", label: "kuratiert" },
};
const BLD_RICHTUNG = { hoch: "▲", runter: "▼", offen: "●" };

const BLD_CHRONO = {
  lerche: { label: "Früh", zeichen: "☀" },
  mittel: { label: "Mittel", zeichen: "◐" },
  eule:   { label: "Spät", zeichen: "☾" },
};

/* --- kleine Helfer ------------------------------------------------------- */

function bldUhr(min) {
  const m = ((Math.round(min) % BLD_TAG) + BLD_TAG) % BLD_TAG;
  return String(Math.floor(m / 60)).padStart(2, "0") + ":" + String(m % 60).padStart(2, "0");
}

function bldDauer(min) {
  const h = Math.floor(min / 60);
  const m = Math.round(min % 60);
  return h ? (m ? `${h} h ${m}` : `${h} h`) : `${m} min`;
}

function bldId() {
  return Math.random().toString(36).slice(2, 9);
}

function bldLaden() {
  try {
    const roh = JSON.parse(localStorage.getItem(BLD_SPEICHER) || "null");
    if (roh && roh.varianten && roh.varianten.A) return roh;
  } catch (e) { /* privates Fenster oder gesperrter Speicher: leer starten */ }
  return {
    aktiv: "A",
    varianten: {
      A: {
        gewicht: 85,
        bausteine: [
          { id: bldId(), art: "schlaf", start: 23 * 60, dauer: 8 * 60, chronotyp: "mittel" },
        ],
      },
    },
  };
}

/* Die Icons sind Linien und keine Emoji: sie sollen in beiden Themen und in
   jeder Farbe der Spur gleich lesbar sein. */
function BldIcon({ art, size = 18 }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round",
    "aria-hidden": true };
  if (art === "mahlzeit") return (
    <svg {...p}><path d="M7 3v8M5 3v5a2 2 0 0 0 4 0V3M7 11v10" /><path d="M17 3c-2 2-2 6 0 8v10" /></svg>
  );
  if (art === "training") return (
    <svg {...p}><path d="M6 7v10M3 9v6M18 7v10M21 9v6M6 12h12" /></svg>
  );
  if (art === "cardio") return (
    <svg {...p}><path d="M20.8 5.6a5.5 5.5 0 0 0-7.8 0L12 6.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l8.8 8.7 8.8-8.7a5.5 5.5 0 0 0 0-7.8z" /></svg>
  );
  if (art === "koffein") return (
    <svg {...p}><path d="M4 9h12v6a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z" /><path d="M16 11h2a2 2 0 0 1 0 4h-2M8 3c0 1.5 1 1.5 1 3M12 3c0 1.5 1 1.5 1 3" /></svg>
  );
  if (art === "schlaf") return (
    <svg {...p}><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z" /></svg>
  );
  return (
    <svg {...p}><rect x="4" y="9" width="16" height="6" rx="3" /><path d="M12 9v6" /></svg>
  );
}

/* Plus und Minus als große Flächen. Kleine Pfeile in einem Zahlenfeld sind
   auf dem Handy nicht zu treffen. */
function BldStepper({ wert, schritt, min, max, onChange, anzeige }) {
  const setzen = (w) => onChange(Math.max(min, Math.min(max, w)));
  return (
    <div className="bld-stepper">
      <button type="button" onClick={() => setzen(wert - schritt)} aria-label="−">−</button>
      <span>{anzeige ? anzeige(wert) : wert}</span>
      <button type="button" onClick={() => setzen(wert + schritt)} aria-label="+">+</button>
    </div>
  );
}

/* Ein Stoff steht im Tag nur, wenn seine Halbwertszeit unter einem Tag liegt.
   Die Grenze rechnet das Backend aus der gepflegten Kinetik; ein Depot kennt
   keine Uhrzeit, und ohne Kinetik wird nicht geraten. */
function bldImTag(b, kinetik) {
  const k = (kinetik || {})[b.slug];
  return !!k && k.ebene === "tag";
}

/* Ueberlappende Bausteine stapeln sich, statt sich zu verdecken. Jeder bekommt
   die erste Unterspur, in der er Platz hat; die Spur waechst mit ihrer Zahl.
   Dieselbe Rechnung wie in einem Kalender, und der Grund ist derselbe: zwei
   Termine zur selben Zeit sind zwei Termine und nicht einer. */
function bldUnterspuren(bausteine, dauerVon) {
  const spur = {};
  const belegt = [];
  bausteine.slice().sort((a, b) => a.start - b.start).forEach((b) => {
    const stuecke = bldStuecke(b.start, dauerVon(b));
    let i = 0;
    for (;;) {
      const frei = (belegt[i] || []).every((s) => stuecke.every((teil) => {
        const endeA = teil[0] + teil[1];
        const endeB = s[0] + s[1];
        return endeA <= s[0] || teil[0] >= endeB;
      }));
      if (frei) break;
      i += 1;
    }
    belegt[i] = (belegt[i] || []).concat(stuecke);
    spur[b.id] = i;
  });
  return { spur, hoehe: Math.max(1, belegt.length) };
}

/* --- Zeitachse ------------------------------------------------------------ */

function BldLineal() {
  return (
    <div className="bld-lineal" aria-hidden="true">
      {Array.from({ length: 25 }, (_, h) => (
        <span key={h} style={{ left: (h / 24) * 100 + "%" }} className={h % 6 === 0 ? "gross" : ""}>
          {h % 3 === 0 ? String(h % 24).padStart(2, "0") : ""}
        </span>
      ))}
    </div>
  );
}

/** Teilstücke eines Bausteins auf dem Tag. Über Mitternacht sind es zwei. */
function bldStuecke(start, dauer) {
  const ende = start + dauer;
  if (ende <= BLD_TAG) return [[start, dauer]];
  return [[start, BLD_TAG - start], [0, ende - BLD_TAG]];
}

function BldBlock({ b, ergebnis, fokus, onFokus, onVerschieben, reihe = 0 }) {
  const art = BLD_ARTEN[b.art];
  const dauer = b.art === "mahlzeit" || b.art === "pharmakologie" ? art.dauer : (b.dauer || art.dauer);
  const ziehen = useRef(null);

  function runter(e) {
    const spur = e.currentTarget.closest(".bld-spur-feld");
    if (!spur) return;
    e.currentTarget.setPointerCapture(e.pointerId);
    ziehen.current = { x: e.clientX, start: b.start, breite: spur.getBoundingClientRect().width, bewegt: false };
  }
  function bewegen(e) {
    const z = ziehen.current;
    if (!z) return;
    const dx = e.clientX - z.x;
    if (Math.abs(dx) > 3) z.bewegt = true;
    if (!z.bewegt) return;
    const roh = z.start + (dx / z.breite) * BLD_TAG;
    const gerastert = Math.round(roh / BLD_RASTER) * BLD_RASTER;
    onVerschieben(b.id, ((gerastert % BLD_TAG) + BLD_TAG) % BLD_TAG);
  }
  function hoch() {
    const z = ziehen.current;
    ziehen.current = null;
    if (z && !z.bewegt) onFokus(fokus === b.id ? null : b.id);
  }

  let inhalt;
  if (b.art === "mahlzeit") {
    inhalt = <><b>{ergebnis ? Math.round(ergebnis.kcal) : "·"}</b>
      {b.koffein_mg > 0 && <span className="bld-koffein-punkt" title={b.koffein_mg + " mg"}><BldIcon art="koffein" size={12} /></span>}</>;
  } else if (b.art === "training") {
    const saetze = (b.muskeln || []).reduce((s, m) => s + (m.saetze || 0), 0);
    inhalt = <><b>{saetze}</b><small>{BB.t("Sätze")}</small></>;
  } else if (b.art === "cardio") {
    inhalt = <><b>{b.label || "·"}</b><small>{bldDauer(dauer)}</small></>;
  } else if (b.art === "pharmakologie") {
    inhalt = <b className="bld-block-name">{b.label || "·"}</b>;
  } else {
    inhalt = <><b>{bldDauer(dauer)}</b><small>{BLD_CHRONO[b.chronotyp || "mittel"].zeichen}</small></>;
  }

  // Der Inhalt steht im längsten Teilstück. Ein Schlaf ab 23:30 hat vor
  // Mitternacht nur eine halbe Stunde Platz, und dort stünde er abgeschnitten.
  const stuecke = bldStuecke(b.start, dauer);
  const haupt = stuecke.reduce((best, s, i) => (s[1] > stuecke[best][1] ? i : best), 0);
  const mindest = b.art === "mahlzeit" ? "3.6rem"
    : b.art === "pharmakologie" || b.art === "cardio" ? "6.5rem" : "2.6rem";
  return stuecke.map(([von, lang], i) => (
    <button
      key={i}
      type="button"
      className={"bld-block a-" + b.art + (fokus === b.id ? " on" : "") + (fokus && fokus !== b.id ? " leise" : "")}
      style={{ left: (von / BLD_TAG) * 100 + "%", width: `max(${(lang / BLD_TAG) * 100}%, ${mindest})`,
               "--farbe": art.farbe, "--reihe": reihe }}
      onPointerDown={runter}
      onPointerMove={bewegen}
      onPointerUp={hoch}
      onPointerCancel={() => { ziehen.current = null; }}
      title={`${BB.t(art.label)} ${bldUhr(b.start)}`}
    >
      {i === haupt && <span className="bld-block-in"><BldIcon art={b.art} size={15} />{inhalt}</span>}
    </button>
  ));
}

/* Die Erholung läuft über den Tag hinaus. Sie steht deshalb als Schweif hinter
   dem Training, der am rechten Rand ausläuft, und nicht als Kästchen im Tag:
   36 Stunden in eine Spur von 24 gequetscht sähen aus wie ein halber Tag. */
function BldSchweif({ t, fokus, onFokus, reihe = 0 }) {
  const lang = (t.muskeln[0] && t.muskeln[0].regeneration_h) || 0;
  if (!lang) return null;
  const ende = t.start + t.dauer;
  const bis = ende + lang * 60;
  const breite = Math.min(bis, BLD_TAG) - ende;
  if (breite <= 0) return null;
  return (
    <button
      type="button"
      className={"bld-schweif" + (fokus === t.id ? " on" : "") + (fokus && fokus !== t.id ? " leise" : "")}
      style={{ left: (ende / BLD_TAG) * 100 + "%", width: (breite / BLD_TAG) * 100 + "%", "--reihe": reihe }}
      onClick={() => onFokus(fokus === t.id ? null : t.id)}
      title={`${t.muskeln[0].label}: ${Math.round(lang)} h`}
    >
      <span>{Math.round(lang)} h{bis > BLD_TAG ? " →" : ""}</span>
    </button>
  );
}

/* Abstände zum Schlaf als Klammer über den Spuren. Nur der Abstand, kein
   Urteil darüber: ob zwei Stunden viel oder wenig sind, braucht eine Quelle,
   und die kommt mit Phase 3. */
function BldKlammern({ abstaende, bausteine, fokus }) {
  const nach = Object.fromEntries(bausteine.map((b) => [b.id, b]));
  return (
    <div className="bld-klammern" aria-hidden="true">
      {abstaende.map((a, i) => {
        const s = nach[a.nach];
        if (!s) return null;
        const bis = s.start;
        const von = (bis - a.minuten + BLD_TAG) % BLD_TAG;
        if (von > bis) return null;   /* über Mitternacht: im Wirkungsbild, nicht hier */
        const an = fokus && (fokus === a.von || fokus === a.nach);
        return (
          <div key={i}
               className={"bld-klammer k-" + a.art + (an ? " on" : "") + (fokus && !an ? " leise" : "")}
               style={{ left: (von / BLD_TAG) * 100 + "%", width: ((bis - von) / BLD_TAG) * 100 + "%",
                        top: a.art === "training" ? 0 : "1.1rem" }}>
            <span>{bldDauer(a.minuten)}</span>
          </div>
        );
      })}
    </div>
  );
}

function BldZeitachse({ v, erg, fokus, onFokus, onNeu, onVerschieben, fenster, kinetik, darfPharma }) {
  const mahl = Object.fromEntries(((erg && erg.mahlzeiten) || []).map((m) => [m.id, m]));
  const train = (erg && erg.training) || [];
  const dauerVon = (b) => {
    const def = BLD_ARTEN[b.art];
    return b.art === "mahlzeit" || b.art === "pharmakologie" ? def.dauer : (b.dauer || def.dauer);
  };
  const imTag = (b) => b.art !== "pharmakologie" || bldImTag(b, kinetik);
  const lagen = Object.fromEntries(Object.keys(BLD_ARTEN).map((art) => [
    art, bldUnterspuren(v.bausteine.filter((b) => b.art === art && imTag(b)), dauerVon)]));
  return (
    <section className="bld-zeit">
      <div className="bld-zeit-kopf">
        <div />
        <div className="bld-zeit-oben">
          <BldLineal />
          {erg && <BldKlammern abstaende={erg.abstaende || []} bausteine={v.bausteine} fokus={fokus} />}
        </div>
      </div>
      {Object.entries(BLD_ARTEN).map(([art, def]) => {
        if (art === "pharmakologie" && !darfPharma) {
          return (
            <div key={art} className="bld-spur gesperrt" style={{ "--farbe": def.farbe }}>
              <div className="bld-neu aus">
                <BldIcon art={art} size={20} />
                <span>{BB.t(def.label)}</span>
              </div>
              <div className="bld-spur-feld bld-sperre">
                <Link to="/auswertung">{BB.t("Mit Premium")}</Link>
              </div>
            </div>
          );
        }
        // Was keine Uhrzeit kennt, steht links und bekommt je Eintrag eine
        // eigene Zeile. Nebeneinander schoben sie sich sonst nach rechts ueber
        // die Stoffe, die sehr wohl eine Uhrzeit haben.
        const ohneZeit = art === "pharmakologie"
          ? v.bausteine.filter((b) => b.art === art && !imTag(b)) : [];
        const hoehe = Math.max(lagen[art].hoehe, ohneZeit.length || 1);
        return (
        <div key={art} className="bld-spur" style={{ "--farbe": def.farbe, "--lagen": hoehe }}>
          <button type="button" className="bld-neu" onClick={() => onNeu(art)}
                  title={BB.t("Hinzufügen")}>
            <BldIcon art={art} size={20} />
            <span>{BB.t(def.label)}</span>
            <b>+</b>
          </button>
          <div className="bld-spur-feld">
            {[6, 12, 18].map((h) => <i key={h} className="bld-gitter" style={{ left: (h / 24) * 100 + "%" }} />)}
            {art === "mahlzeit" && fenster > 0 && v.bausteine.filter((b) => b.art === "mahlzeit" && b.koffein_mg > 0).map((b) => (
              bldStuecke(b.start, fenster).map(([von, lang], i) => (
                <i key={"k" + b.id + i}
                   className={"bld-koffein-fenster" + (fokus === b.id ? " on" : "") + (fokus && fokus !== b.id ? " leise" : "")}
                   style={{ left: (von / BLD_TAG) * 100 + "%", width: (lang / BLD_TAG) * 100 + "%",
                            "--reihe": lagen.mahlzeit.spur[b.id] || 0 }} />
              ))
            ))}
            {art === "training" && train.map((t) => (
              <BldSchweif key={"s" + t.id} t={t} fokus={fokus} onFokus={onFokus}
                          reihe={lagen.training.spur[t.id] || 0} />
            ))}
            {v.bausteine.filter((b) => b.art === art && imTag(b)).map((b) => (
              <BldBlock key={b.id} b={b} ergebnis={mahl[b.id]} fokus={fokus} reihe={lagen[art].spur[b.id]}
                        onFokus={onFokus} onVerschieben={onVerschieben} />
            ))}
            {art === "pharmakologie" && (
              <div className="bld-ausser-tag">
                {ohneZeit.map((b) => {
                  const k = (kinetik || {})[b.slug];
                  const ebene = k ? k.ebene : "unbekannt";
                  return (
                    <button key={b.id} type="button"
                            className={"bld-plakette e-" + ebene + (fokus === b.id ? " on" : "") + (fokus && fokus !== b.id ? " leise" : "")}
                            onClick={() => onFokus(fokus === b.id ? null : b.id)}
                            title={ebene === "depot" ? BB.t("Depot: im Protokoll, ohne Uhrzeit") : BB.t("Kinetik unbekannt")}>
                      <span>{ebene === "depot" ? "∞" : "?"}</span>{b.label || "·"}
                    </button>
                  );
                })}
              </div>
            )}
          </div>
        </div>
        );
      })}
    </section>
  );
}

/* --- Bearbeiten ------------------------------------------------------------ */

function BldSuche({ onNimm }) {
  const [q, setQ] = useState("");
  const [treffer, setTreffer] = useState([]);
  useEffect(() => {
    const wert = q.trim();
    if (wert.length < 2) { setTreffer([]); return undefined; }
    let alive = true;
    const t = setTimeout(() => {
      BB.get("/builder/lebensmittel" + BB.qs({ q: wert, limit: 8 }))
        .then((d) => { if (alive) setTreffer(d || []); })
        .catch(() => { if (alive) setTreffer([]); });
    }, 200);
    return () => { alive = false; clearTimeout(t); };
  }, [q]);
  return (
    <div className="bld-suche">
      <input className="input" value={q} onChange={(e) => setQ(e.target.value)}
             placeholder={BB.t("Lebensmittel suchen …")} aria-label={BB.t("Lebensmittel suchen …")} />
      {treffer.length > 0 && (
        <div className="bld-treffer">
          {treffer.map((t) => (
            <button key={t.id} type="button" onClick={() => { onNimm(t); setQ(""); }}>
              <span>{t.label}</span>
              <small>{Math.round(t.je100g.kcal || 0)} kcal · {Math.round(t.je100g.protein || 0)} P</small>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function BldMakroBalken({ p, kh, f, hoehe = 10 }) {
  const kcal = p * 4 + kh * 4 + f * 9;
  if (!kcal) return <div className="bld-makro leer" style={{ height: hoehe }} />;
  return (
    <div className="bld-makro" style={{ height: hoehe }}>
      <i className="m-p" style={{ flex: p * 4 }} />
      <i className="m-k" style={{ flex: kh * 4 }} />
      <i className="m-f" style={{ flex: f * 9 }} />
    </div>
  );
}

function BldEditor({ b, erg, muskeln, onAendern, onLoeschen, onSchliessen, kinetik, wochen, stamm = {}, spiegelzeile = null }) {
  const art = BLD_ARTEN[b.art];
  const setze = (patch) => onAendern(b.id, patch);
  return (
    <section className="bld-editor" style={{ "--farbe": art.farbe }}>
      <div className="bld-editor-kopf">
        <span className="bld-editor-art"><BldIcon art={b.art} size={22} />{BB.t(art.label)}</span>
        {(b.art !== "pharmakologie" || bldImTag(b, kinetik)) && (
          <BldStepper wert={b.start} schritt={BLD_RASTER} min={0} max={BLD_TAG - BLD_RASTER}
                      onChange={(w) => setze({ start: w })} anzeige={bldUhr} />
        )}
        {b.art !== "mahlzeit" && b.art !== "pharmakologie" && (
          <BldStepper wert={b.dauer || art.dauer} schritt={b.art === "schlaf" ? 30 : 15}
                      min={15} max={b.art === "schlaf" ? 14 * 60 : 6 * 60}
                      onChange={(w) => setze({ dauer: w })} anzeige={bldDauer} />
        )}
        <span className="grow" />
        <button type="button" className="bld-rund gefahr" onClick={() => onLoeschen(b.id)}
                title={BB.t("Entfernen")}>✕</button>
        <button type="button" className="bld-rund" onClick={onSchliessen} title={BB.t("Fertig")}>✓</button>
      </div>

      {b.art === "mahlzeit" && (
        <div className="bld-editor-rumpf">
          <div className="bld-editor-zeile">
            <BldSuche onNimm={(t) => setze({ posten: (b.posten || []).concat({ id: t.id, gramm: 100 }) })} />
            <div className={"bld-koffein" + (b.koffein_mg > 0 ? " on" : "")}>
              <BldIcon art="koffein" size={20} />
              <BldStepper wert={b.koffein_mg || 0} schritt={50} min={0} max={800}
                          onChange={(w) => setze({ koffein_mg: w })} anzeige={(w) => w + " mg"} />
            </div>
          </div>
          <div className="bld-posten">
            {(b.posten || []).map((p, i) => {
              const z = erg ? erg.posten[i] : null;
              return (
                <div key={i} className="bld-posten-zeile">
                  <span className="grow">{z ? z.label : p.id}</span>
                  <BldStepper wert={p.gramm} schritt={10} min={0} max={2000}
                              onChange={(w) => setze({ posten: b.posten.map((x, j) => (j === i ? { ...x, gramm: w } : x)) })}
                              anzeige={(w) => w + " g"} />
                  <span className="bld-posten-kcal">{z ? Math.round(z.kcal) : "·"}</span>
                  <button type="button" className="bld-rund klein"
                          onClick={() => setze({ posten: b.posten.filter((_, j) => j !== i) })}>✕</button>
                </div>
              );
            })}
          </div>
          {erg && (
            <div className="bld-mahl-summe">
              <BldMakroBalken p={erg.protein} kh={erg.kh} f={erg.fett} hoehe={14} />
              <div className="bld-makro-zahlen">
                <span className="m-p">{Math.round(erg.protein)} P</span>
                <span className="m-k">{Math.round(erg.kh)} KH</span>
                <span className="m-f">{Math.round(erg.fett)} F</span>
                <b>{Math.round(erg.kcal)} kcal</b>
              </div>
            </div>
          )}
        </div>
      )}

      {b.art === "training" && (
        <div className="bld-muskeln">
          {muskeln.map((m) => {
            const eintrag = (b.muskeln || []).find((x) => x.muskel === m.id);
            const an = !!eintrag;
            return (
              <div key={m.id} className={"bld-muskel" + (an ? " on" : "")}>
                <button type="button" onClick={() => setze({
                  muskeln: an ? b.muskeln.filter((x) => x.muskel !== m.id)
                              : (b.muskeln || []).concat({ muskel: m.id, saetze: 4 }),
                })}>{BB.t(m.label)}</button>
                {an && (
                  <BldStepper wert={eintrag.saetze} schritt={1} min={1} max={30}
                              onChange={(w) => setze({ muskeln: b.muskeln.map((x) => (x.muskel === m.id ? { ...x, saetze: w } : x)) })} />
                )}
              </div>
            );
          })}
        </div>
      )}

      {b.art === "pharmakologie" && (
        <div className="bld-editor-rumpf">
          {b.slug ? (
            <div className="bld-stoff-gewaehlt">
              <b>{b.label}</b>
              <div className="bld-wochen">
                <span>{BB.t("Woche")}</span>
                <BldStepper wert={b.von || 1} schritt={1} min={1} max={(b.bis || wochen)}
                            onChange={(w) => setze({ von: w })} />
                <span>→</span>
                <BldStepper wert={b.bis || wochen} schritt={1} min={b.von || 1} max={wochen}
                            onChange={(w) => setze({ bis: w })} />
              </div>
              <button type="button" className="bld-rund klein" title={BB.t("Anderen Stoff wählen")}
                      onClick={() => setze({ slug: "", label: "", schema: "" })}>↺</button>
            </div>
          ) : (
            <BldStoffSuche onNimm={(s) => setze({ slug: s.slug, label: s.label })} />
          )}
          {spiegelzeile && spiegelzeile.schemata.length > 0 && (
            <div className="bld-schemata">
              <span className="bld-feld-titel">
                {BB.t("Anreicherung")} · {BB.t(spiegelzeile.kompartiment || "")}
              </span>
              <div className="bld-stufen">
                {spiegelzeile.schemata.map((s) => (
                  <button key={s.id} type="button"
                          className={"bld-stufe" + ((b.schema || spiegelzeile.schema) === s.id ? " on" : "")}
                          onClick={() => setze({ schema: s.id })}>
                    <b>{BB.t(s.label)}</b>
                    {s.dosis && <span>{s.dosis}</span>}
                  </button>
                ))}
              </div>
              {spiegelzeile.aussage && (
                <>
                  <p className="bld-schema-text">{BB.t(spiegelzeile.aussage)}</p>
                  <a className="bld-quelle" href={"https://pubmed.ncbi.nlm.nih.gov/" + spiegelzeile.pmid + "/"}
                     target="_blank" rel="noopener noreferrer">{spiegelzeile.quelle}</a>
                </>
              )}
            </div>
          )}
          {spiegelzeile && !spiegelzeile.schemata.length && (
            <p className="bld-schema-text leer">
              {BB.t("Zu diesem Stoff ist kein belegter Anreicherungsverlauf hinterlegt. Gezeigt wird nur der Einnahmezeitraum.")}
            </p>
          )}
        </div>
      )}

      {b.art === "cardio" && (
        <div className="bld-editor-rumpf">
          <div className="bld-sportarten">
            {(stamm.cardio || []).map((s) => (
              <button key={s.id} type="button"
                      className={"bld-sport" + (b.sportart === s.id ? " on" : "")}
                      onClick={() => setze({ sportart: s.id, label: s.label, stufe: s.stufen[0].id })}>
                {BB.t(s.label)}
              </button>
            ))}
          </div>
          {b.sportart && (
            <div className="bld-stufen">
              {((stamm.cardio || []).find((s) => s.id === b.sportart) || { stufen: [] }).stufen.map((st) => {
                const zone = (stamm.zonen || []).find((z) => z.id === st.zone) || {};
                return (
                  <button key={st.id} type="button"
                          className={"bld-stufe" + (b.stufe === st.id ? " on" : "")}
                          onClick={() => setze({ stufe: st.id })}>
                    <b>{BB.t(st.label)}</b>
                    <span>{BB.t(zone.label || "")}{zone.von ? ` · ${zone.von}–${zone.bis}` : ""}</span>
                    <small>{st.met} MET</small>
                  </button>
                );
              })}
            </div>
          )}
        </div>
      )}

      {b.art === "schlaf" && (
        <div className="bld-chrono">
          {Object.entries(BLD_CHRONO).map(([k, c]) => (
            <button key={k} type="button" className={(b.chronotyp || "mittel") === k ? "on" : ""}
                    onClick={() => setze({ chronotyp: k })}>
              <span>{c.zeichen}</span>{BB.t(c.label)}
            </button>
          ))}
        </div>
      )}
    </section>
  );
}

/* --- Wirkungsbild ---------------------------------------------------------- */

/* Die Tagesuhr: derselbe Tag als Kreis. Die Spuren oben zeigen die Reihenfolge,
   die Uhr zeigt die Verteilung, also wo der Tag voll ist und wo leer. */
function BldUhr({ v, erg, fokus, onFokus }) {
  const R = 78;
  const winkel = (min) => (min / BLD_TAG) * Math.PI * 2 - Math.PI / 2;
  const punkt = (min, r) => [100 + r * Math.cos(winkel(min)), 100 + r * Math.sin(winkel(min))];
  const bogen = (von, dauer, r) => {
    const lang = Math.min(dauer, BLD_TAG - 1);
    const [x1, y1] = punkt(von, r);
    const [x2, y2] = punkt(von + lang, r);
    return `M ${x1} ${y1} A ${r} ${r} 0 ${lang > BLD_TAG / 2 ? 1 : 0} 1 ${x2} ${y2}`;
  };
  const kcal = Object.fromEntries(((erg && erg.mahlzeiten) || []).map((m) => [m.id, m.kcal]));
  const maxKcal = Math.max(1, ...Object.values(kcal));
  const leise = (id) => (fokus && fokus !== id ? 0.25 : 1);
  return (
    <svg viewBox="-28 -28 256 256" className="bld-uhr" role="img" aria-label={BB.t("Tagesuhr")}>
      <circle cx="100" cy="100" r={R} className="bld-uhr-ring" />
      {Array.from({ length: 24 }, (_, h) => {
        const [x1, y1] = punkt(h * 60, R + 6);
        const [x2, y2] = punkt(h * 60, R + (h % 6 ? 10 : 14));
        return <line key={h} x1={x1} y1={y1} x2={x2} y2={y2} className="bld-uhr-strich" />;
      })}
      {[0, 6, 12, 18].map((h) => {
        const [x, y] = punkt(h * 60, R + 24);
        return <text key={h} x={x} y={y + 3} className="bld-uhr-zahl">{String(h).padStart(2, "0")}</text>;
      })}
      {v.bausteine.filter((b) => b.art === "schlaf").map((b) => (
        <path key={b.id} d={bogen(b.start, b.dauer || 480, R)} className="bld-uhr-schlaf"
              style={{ opacity: leise(b.id) }} onClick={() => onFokus(b.id)} />
      ))}
      {v.bausteine.filter((b) => b.art === "training").map((b) => (
        <path key={b.id} d={bogen(b.start, b.dauer || 60, R - 16)} className="bld-uhr-training"
              style={{ opacity: leise(b.id) }} onClick={() => onFokus(b.id)} />
      ))}
      {v.bausteine.filter((b) => b.art === "mahlzeit").map((b) => {
        const [x, y] = punkt(b.start, R - 34);
        const r = 4 + 9 * Math.sqrt((kcal[b.id] || 0) / maxKcal);
        return <circle key={b.id} cx={x} cy={y} r={r} className="bld-uhr-mahl"
                       style={{ opacity: leise(b.id) }} onClick={() => onFokus(b.id)} />;
      })}
    </svg>
  );
}

function BldKarte({ titel, kopf, children, breit }) {
  return (
    <div className={"bld-karte" + (breit ? " breit" : "")}>
      <div className="bld-karte-kopf"><span>{titel}</span>{kopf}</div>
      {children}
    </div>
  );
}

/* Das Proteinband: das Studienband als Fläche, der eigene Wert als Marke.
   Keine Wertung daneben. Wo die Marke liegt, sieht man. */
function BldProteinBand({ ergebnisse }) {
  const band = ergebnisse.find((e) => e.erg) && ergebnisse.find((e) => e.erg).erg.protein.band;
  if (!band) return null;
  const MAX = 3;
  const x = (w) => Math.max(0, Math.min(100, (w / MAX) * 100)) + "%";
  return (
    <div className="bld-band">
      <div className="bld-band-feld">
        <i className="bld-band-flaeche" style={{ left: x(band.von), width: `calc(${x(band.bis)} - ${x(band.von)})` }} />
        <i className="bld-band-mitte" style={{ left: x(band.mitte) }} />
        {ergebnisse.map(({ name, erg }) => erg && erg.protein.g_je_kg != null && (
          <span key={name} className={"bld-band-marke v-" + name} style={{ left: x(erg.protein.g_je_kg) }}>
            <b>{name}</b>
          </span>
        ))}
      </div>
      <div className="bld-band-achse">
        {[0, 1, 2, 3].map((w) => <span key={w} style={{ left: x(w) }}>{w}</span>)}
      </div>
      <a className="bld-quelle" href={"https://pubmed.ncbi.nlm.nih.gov/" + band.pmid + "/"}
         target="_blank" rel="noopener noreferrer" title={band.lesart}>
        {band.einheit} · {band.quelle}
      </a>
    </div>
  );
}

function BldEnergie({ ergebnisse }) {
  const max = Math.max(1, ...ergebnisse.map(({ erg }) => (erg ? erg.summe.kcal : 0)));
  return (
    <div className="bld-energie">
      {ergebnisse.map(({ name, erg }) => {
        const s = erg ? erg.summe : { kcal: 0, protein: 0, kh: 0, fett: 0 };
        return (
          <div key={name} className="bld-energie-zeile">
            <span className={"bld-variante-marke v-" + name}>{name}</span>
            <div className="bld-energie-balken" style={{ width: (s.kcal / max) * 100 + "%" }}>
              <BldMakroBalken p={s.protein} kh={s.kh} f={s.fett} hoehe={22} />
            </div>
            <b>{Math.round(s.kcal)}</b>
          </div>
        );
      })}
      <div className="bld-legende">
        <span className="m-p">{BB.t("Protein")}</span>
        <span className="m-k">{BB.t("Kohlenhydrate")}</span>
        <span className="m-f">{BB.t("Fett")}</span>
      </div>
    </div>
  );
}

function BldErholung({ erg, fokus, onFokus }) {
  const zeilen = ((erg && erg.training) || []).flatMap((t) => t.muskeln.map((m) => ({ ...m, quelle: t.id })));
  if (!zeilen.length) return <BldLeer art="training" />;
  const MAX = 72;
  return (
    <div className="bld-erholung">
      <div className="bld-erholung-achse">
        {[0, 24, 48, 72].map((h) => <span key={h} style={{ left: (h / MAX) * 100 + "%" }}>{h}</span>)}
      </div>
      {zeilen.map((z, i) => (
        <button key={i} type="button"
                className={"bld-erholung-zeile" + (fokus === z.quelle ? " on" : "") + (fokus && fokus !== z.quelle ? " leise" : "")}
                onClick={() => onFokus(fokus === z.quelle ? null : z.quelle)}>
          <span className="bld-erholung-name">{BB.t(z.label)}</span>
          <span className="bld-erholung-feld">
            {[24, 48].map((h) => <i key={h} className="bld-gitter" style={{ left: (h / MAX) * 100 + "%" }} />)}
            <i className="bld-erholung-balken" style={{ width: Math.min(100, (z.regeneration_h / MAX) * 100) + "%" }} />
          </span>
          <b>{Math.round(z.regeneration_h)}</b>
        </button>
      ))}
    </div>
  );
}

function BldAbstaende({ erg, fokus, onFokus }) {
  const liste = (erg && erg.abstaende) || [];
  if (!liste.length) return <BldLeer art="schlaf" />;
  return (
    <div className="bld-abstaende">
      {liste.map((a, i) => {
        const an = fokus && (fokus === a.von || fokus === a.nach);
        return (
          <button key={i} type="button"
                  className={"bld-abstand" + (an ? " on" : "") + (fokus && !an ? " leise" : "")}
                  style={{ "--farbe": BLD_ARTEN[a.art].farbe }}
                  onClick={() => onFokus(a.von)}>
            <BldIcon art={a.art} size={22} />
            <span className="bld-abstand-pfeil" />
            <BldIcon art="schlaf" size={22} />
            <b>{bldDauer(a.minuten)}</b>
          </button>
        );
      })}
    </div>
  );
}

/* Was Studien zu genau dieser Konstellation gefunden haben. Jede Kachel nennt
   ihre Quelle und ihren Umfang; keine sagt, was zu tun ist. Die Farbe sagt nur,
   ob die Konstellation der Studie im Plan vorliegt, nicht ob der Plan gut ist. */
const BLD_REGEL_ICONS = {
  training_vor_schlaf: ["training", "schlaf"],
  koffein_vor_schlaf: ["koffein", "schlaf"],
  schlafentzug_erholung: ["schlaf", "training"],
};

function BldBelege({ erg, fokus, onFokus }) {
  const regeln = (erg && erg.regeln) || [];
  if (!regeln.length) return <BldLeer art="schlaf" />;
  return (
    <div className="bld-belege">
      {regeln.map((r, i) => {
        const [a, b] = BLD_REGEL_ICONS[r.id] || ["schlaf", "schlaf"];
        const an = fokus && (fokus === r.von || fokus === r.nach);
        return (
          <div key={i} className={"bld-beleg s-" + r.stufe + (an ? " on" : "") + (fokus && !an && r.von ? " leise" : "")}
               onClick={() => r.von && onFokus(r.von)}>
            <div className="bld-beleg-kopf">
              <span className="bld-beleg-icons">
                <BldIcon art={a} size={20} /><i className="bld-beleg-pfeil" /><BldIcon art={b} size={20} />
              </span>
              {r.minuten != null && <b>{bldDauer(r.minuten)}</b>}
              {r.dosis_mg != null && (
                <span className="bld-dosis" title={BB.t("Studie")}>
                  <span>{r.dosis_mg} mg</span><small>/ {r.dosis_studie_mg}</small>
                </span>
              )}
            </div>
            {r.werte && (
              <div className="bld-beleg-werte">
                {r.werte.map((w) => (
                  <span key={w.was} className={w.richtung < 0 ? "runter" : "hoch"}>
                    <b>{w.richtung < 0 ? "↓" : "↑"} {w.prozent} %</b><small>{BB.t(w.was)}</small>
                  </span>
                ))}
              </div>
            )}
            <p>{BB.t(r.aussage)}</p>
            <a className="bld-quelle" href={"https://pubmed.ncbi.nlm.nih.gov/" + r.pmid + "/"}
               target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
              {r.quelle} · {BB.t(r.umfang)}
            </a>
          </div>
        );
      })}
    </div>
  );
}

function BldLeer({ art }) {
  return (
    <div className="bld-leer" style={{ "--farbe": BLD_ARTEN[art].farbe }}>
      <BldIcon art={art} size={28} />
    </div>
  );
}

/* Alles, was fuer den ganzen Tag gilt, an einer Stelle statt verteilt: Koerper,
   Alltagsbewegung, Herzfrequenzzonen. Zugeklappt eine Zeile, denn wer einmal
   eingetragen hat, braucht es nicht wieder. */
function BldAllgemein({ v, stamm, energie, onAendern }) {
  const [auf, setAuf] = useState(!v.geschlecht || !v.groesse || !v.alter);
  const setze = (patch) => onAendern(patch);
  const zonen = (energie && energie.zonen) || [];
  return (
    <section className={"bld-allgemein" + (auf ? " auf" : "")}>
      <button type="button" className="bld-allgemein-kopf" onClick={() => setAuf(!auf)}>
        <span className="bld-allgemein-titel">{BB.t("Allgemein")}</span>
        <span className="bld-allgemein-kurz">
          {v.geschlecht ? BB.t(v.geschlecht === "m" ? "Mann" : "Frau") : BB.t("unvollständig")}
          {v.gewicht ? ` · ${v.gewicht} kg` : ""}
          {v.groesse ? ` · ${v.groesse} cm` : ""}
          {v.alter ? ` · ${v.alter} ${BB.t("Jahre")}` : ""}
          {v.schritte ? ` · ${BB.num(v.schritte)} ${BB.t("Schritte")}` : ""}
        </span>
        <i>{auf ? "−" : "+"}</i>
      </button>
      {auf && (
        <div className="bld-allgemein-rumpf">
          <div className="bld-feldreihe">
            <div className="bld-feld">
              <span>{BB.t("Geschlecht")}</span>
              <div className="bld-wahl">
                {[["m", "Mann"], ["w", "Frau"]].map(([k, l]) => (
                  <button key={k} type="button" className={v.geschlecht === k ? "on" : ""}
                          onClick={() => setze({ geschlecht: k })}>{BB.t(l)}</button>
                ))}
              </div>
            </div>
            <div className="bld-feld">
              <span>{BB.t("Gewicht")}</span>
              <BldStepper wert={v.gewicht || 80} schritt={1} min={30} max={250}
                          onChange={(w) => setze({ gewicht: w })} anzeige={(w) => w + " kg"} />
            </div>
            <div className="bld-feld">
              <span>{BB.t("Größe")}</span>
              <BldStepper wert={v.groesse || 175} schritt={1} min={120} max={230}
                          onChange={(w) => setze({ groesse: w })} anzeige={(w) => w + " cm"} />
            </div>
            <div className="bld-feld">
              <span>{BB.t("Alter")}</span>
              <BldStepper wert={v.alter || 30} schritt={1} min={14} max={100}
                          onChange={(w) => setze({ alter: w })} />
            </div>
          </div>
          <div className="bld-feldreihe">
            <div className="bld-feld">
              <span>{BB.t("Schritte am Tag")}</span>
              <BldStepper wert={v.schritte || 0} schritt={500} min={0} max={40000}
                          onChange={(w) => setze({ schritte: w })} anzeige={BB.num} />
            </div>
            <div className="bld-feld grow">
              <span>{v.schritte ? BB.t("Alltag: aus den Schritten gerechnet") : BB.t("Alltag")}</span>
              <div className={"bld-wahl" + (v.schritte ? " aus" : "")}>
                {(stamm.pal || []).map((x) => (
                  <button key={x.id} type="button" className={v.pal === x.id ? "on" : ""}
                          disabled={!!v.schritte} title={BB.t(x.beispiel)}
                          onClick={() => setze({ pal: v.pal === x.id ? "" : x.id })}>
                    {BB.t(x.label)}
                  </button>
                ))}
              </div>
            </div>
          </div>
          {zonen.length > 0 && (
            <div className="bld-zonen">
              <span className="bld-zonen-titel">
                {BB.t("Herzfrequenzzonen")} · {energie.hfmax} {BB.t("max")}
              </span>
              <div className="bld-zonen-leiste">
                {zonen.map((z) => (
                  <div key={z.id} className={"bld-zone z" + z.id}>
                    <b>{BB.t(z.wort)}</b><span>{z.von}–{z.bis}</span>
                  </div>
                ))}
              </div>
              <a className="bld-quelle" href={"https://pubmed.ncbi.nlm.nih.gov/" + energie.hfmax_pmid + "/"}
                 target="_blank" rel="noopener noreferrer">{energie.hfmax_quelle}</a>
            </div>
          )}
        </div>
      )}
    </section>
  );
}

/* Das Energieband. Keine Zahl, sondern eine Spanne, und darunter steht, woraus
   sie sich zusammensetzt. Jeder Teil traegt seine eigene Breite. */
const BLD_TEIL_LABEL = {
  grundumsatz: "Ruheumsatz", alltag: "Alltag", schritte: "Schritte",
  training: "Training", cardio: "Cardio",
};

function BldEnergieband({ energie }) {
  if (!energie) return null;
  if (!energie.moeglich) {
    return (
      <div className="bld-energie-fehlt">
        <BldIcon art="cardio" size={24} />
        <span>{BB.t("Für den Verbrauch fehlen noch Angaben im Block „Allgemein“.")}</span>
      </div>
    );
  }
  const max = Math.max(energie.bis, 1);
  let gelaufen = 0;
  return (
    <div className="bld-eband">
      <div className="bld-eband-zahl">
        <b>{BB.num(energie.von)}</b>
        <span>{BB.t("bis")}</span>
        <b>{BB.num(energie.bis)}</b>
        <small>kcal</small>
      </div>
      <div className="bld-eband-balken">
        {energie.teile.map((teil) => {
          const links = (gelaufen / max) * 100;
          gelaufen += teil.kcal;
          return (
            <i key={teil.was} className={"t-" + teil.was}
               style={{ left: links + "%", width: (teil.kcal / max) * 100 + "%" }}
               title={`${BB.t(BLD_TEIL_LABEL[teil.was] || teil.was)}: ${BB.num(teil.kcal)} ± ${BB.num(teil.spanne)}`} />
          );
        })}
        <i className="bld-eband-spanne"
           style={{ left: (energie.von / max) * 100 + "%", width: ((energie.bis - energie.von) / max) * 100 + "%" }} />
      </div>
      <div className="bld-eband-teile">
        {energie.teile.map((teil) => (
          <span key={teil.was} className={"t-" + teil.was}>
            <i />{BB.t(BLD_TEIL_LABEL[teil.was] || teil.was)}
            <b>{BB.num(teil.kcal)}</b>
            <small>± {BB.num(teil.spanne)}</small>
          </span>
        ))}
      </div>
    </div>
  );
}

/* --- Pharmakologie -------------------------------------------------------- */

const BLD_KATEGORIEN = {
  muskel: "Muskel", stoffwechsel: "Stoffwechsel", hormone: "Hormone",
  herz_kreislauf: "Herz und Kreislauf", blut: "Blut", leber: "Leber", niere: "Niere",
  zns: "Gehirn und Nerven", haut: "Haut", prostata: "Prostata",
  entzuendung: "Entzündung", zellstress: "Zellstress",
};

function BldStoffSuche({ onNimm }) {
  const [q, setQ] = useState("");
  const [treffer, setTreffer] = useState([]);
  useEffect(() => {
    const wert = q.trim();
    if (wert.length < 2) { setTreffer([]); return undefined; }
    let alive = true;
    const t = setTimeout(() => {
      BB.get("/builder/stoffe" + BB.qs({ q: wert }))
        .then((d) => { if (alive) setTreffer(d || []); })
        .catch(() => { if (alive) setTreffer([]); });
    }, 200);
    return () => { alive = false; clearTimeout(t); };
  }, [q]);
  return (
    <div className="bld-suche">
      <input className="input" value={q} onChange={(e) => setQ(e.target.value)} autoFocus
             placeholder={BB.t("Stoff suchen …")} aria-label={BB.t("Stoff suchen …")} />
      {treffer.length > 0 && (
        <div className="bld-treffer">
          {treffer.map((s) => (
            <button key={s.slug} type="button" onClick={() => { onNimm(s); setQ(""); }}>
              <span>{s.label}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

/* Das Protokoll: dieselben Stoffe in Wochen. Ein Balken je Stoff, gegriffen
   wird er wie ein Baustein im Tag, nur rastet er auf ganzen Wochen ein. */
/* Der Spiegel als Flaeche hinter dem Einnahmebalken: wie viel vom Plateau zu
   welchem Zeitpunkt steht. Belegt ist, wann das Plateau erreicht war; die Form
   dazwischen ist eine Saettigungskurve, und die Flaeche ist deshalb bewusst
   blass und ohne Achsenbeschriftung. Ohne Beleg bleibt die Flaeche leer. */
function BldSpiegel({ zeile, wochen }) {
  if (!zeile || !zeile.kurve) return null;
  const tage = zeile.tage || wochen * 7;
  const x = (tag) => ((zeile.von_tag + tag) / tage) * 100;
  const punkte = zeile.kurve.map(([tag, wert]) => `${x(tag)},${100 - wert * 100}`).join(" ");
  const flaeche = `${x(0)},100 ${punkte} ${x(zeile.kurve[zeile.kurve.length - 1][0])},100`;
  return (
    <svg className="bld-spiegel" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
      <polygon points={flaeche} />
      <polyline points={punkte} />
    </svg>
  );
}

function BldProtokoll({ v, kinetik, fokus, onFokus, onNeu, onAendern, onWochen, spiegel }) {
  const wochen = v.wochen || 12;
  const stoffe = v.bausteine.filter((b) => b.art === "pharmakologie");
  const ziehen = useRef(null);

  function runter(e, b) {
    const feld = e.currentTarget.closest(".bld-proto-feld");
    if (!feld) return;
    e.currentTarget.setPointerCapture(e.pointerId);
    ziehen.current = { b, x: e.clientX, breite: feld.getBoundingClientRect().width, bewegt: false };
  }
  function bewegen(e) {
    const z = ziehen.current;
    if (!z) return;
    const dx = e.clientX - z.x;
    if (Math.abs(dx) > 3) z.bewegt = true;
    if (!z.bewegt) return;
    const schritt = Math.round((dx / z.breite) * wochen);
    const lang = (z.b.bis || wochen) - (z.b.von || 1);
    const von = Math.max(1, Math.min(wochen - lang, (z.b.von || 1) + schritt));
    onAendern(z.b.id, { von, bis: von + lang });
  }
  function hoch(b) {
    const z = ziehen.current;
    ziehen.current = null;
    if (z && !z.bewegt) onFokus(fokus === b.id ? null : b.id);
  }

  return (
    <section className="bld-zeit bld-proto" style={{ "--wochen": wochen }}>
      <div className="bld-zeit-kopf">
        <div className="bld-proto-laenge">
          <BldStepper wert={wochen} schritt={1} min={2} max={52} onChange={onWochen}
                      anzeige={(w) => w + " W"} />
        </div>
        <div className="bld-proto-lineal">
          {Array.from({ length: wochen }, (_, i) => (
            <span key={i} className={(i + 1) % 4 === 0 ? "gross" : ""}>{i + 1}</span>
          ))}
        </div>
      </div>
      {stoffe.map((b) => {
        const k = (kinetik || {})[b.slug];
        const von = b.von || 1;
        const bis = Math.min(b.bis || wochen, wochen);
        return (
          <div key={b.id} className="bld-spur" style={{ "--farbe": BLD_ARTEN.pharmakologie.farbe }}>
            <button type="button" className={"bld-proto-name" + (fokus === b.id ? " on" : "")}
                    onClick={() => onFokus(fokus === b.id ? null : b.id)}>
              <BldIcon art="pharmakologie" size={18} />
              <span>{b.label || BB.t("Stoff wählen")}</span>
              <em>{von}–{bis}</em>
              {k && <small className={"e-" + k.ebene}>{k.ebene === "tag" ? "☀" : k.ebene === "depot" ? "∞" : "?"}</small>}
            </button>
            <div className="bld-spur-feld bld-proto-feld">
              {Array.from({ length: wochen - 1 }, (_, i) => (
                <i key={i} className="bld-gitter" style={{ left: ((i + 1) / wochen) * 100 + "%" }} />
              ))}
              <BldSpiegel zeile={(spiegel || []).find((x) => x.id === b.id)} wochen={wochen} />
              <button type="button"
                      className={"bld-block bld-proto-balken" + (fokus === b.id ? " on" : "") + (fokus && fokus !== b.id ? " leise" : "")}
                      style={{ left: ((von - 1) / wochen) * 100 + "%", width: ((bis - von + 1) / wochen) * 100 + "%",
                               "--farbe": BLD_ARTEN.pharmakologie.farbe }}
                      onPointerDown={(e) => runter(e, b)} onPointerMove={bewegen}
                      onPointerUp={() => hoch(b)} onPointerCancel={() => { ziehen.current = null; }}>
              </button>
            </div>
          </div>
        );
      })}
      <div className="bld-spur" style={{ "--farbe": BLD_ARTEN.pharmakologie.farbe }}>
        <button type="button" className="bld-neu" onClick={() => onNeu("pharmakologie")}>
          <BldIcon art="pharmakologie" size={20} /><span>{BB.t("Stoff")}</span><b>+</b>
        </button>
        <div />
      </div>
    </section>
  );
}

/* Die Endpunktkarte: je Endpunkt, welcher Stoff ihn berührt, in welche
   Richtung und wie gut belegt. Keine Beträge. Die Deckkraft folgt der
   Konfidenz des Weges, die Farbe der Richtung, das Kürzel der Datenlage. */
function BldEndpunktkarte({ pharma, stoffe, fokus, onFokus, offen, setOffen }) {
  const label = Object.fromEntries(stoffe.map((b) => [b.slug, b.label || b.slug]));
  const gruppen = [];
  (pharma.endpunkte || []).forEach((e) => {
    const g = gruppen.find((x) => x.k === e.kategorie);
    if (g) g.e.push(e); else gruppen.push({ k: e.kategorie, e: [e] });
  });
  if (!gruppen.length) return <BldLeer art="pharmakologie" />;
  return (
    <div className="bld-ep">
      <div className="bld-ep-legende">
        <span className="r-hoch">▲ {BB.t("hoch")}</span>
        <span className="r-runter">▼ {BB.t("runter")}</span>
        <span className="r-offen">● {BB.t("Richtung offen")}</span>
        <span className="bld-ep-stufen">
          {Object.entries(BLD_STUFEN).map(([k, s]) => <i key={k} title={BB.t(s.label)}>{s.kurz}</i>)}
        </span>
        <span className="bld-ep-hinweis">{BB.t("Sortiert nach Datenlage, nicht nach Wirkung")}</span>
      </div>
      <div className="bld-ep-gruppen">
        {gruppen.map((g) => (
          <div key={g.k} className="bld-ep-gruppe">
            <div className="bld-ep-gruppe-kopf">{BB.t(BLD_KATEGORIEN[g.k] || g.k)}</div>
            {g.e.map((e) => {
              const auf = offen === e.endpoint;
              const an = fokus && e.effekte.some((x) => x.baustein === fokus);
              return (
                <div key={e.endpoint} className={"bld-ep-zeile" + (auf ? " auf" : "") + (fokus && !an ? " leise" : "")}>
                  <button type="button" className="bld-ep-name" onClick={() => setOffen(auf ? null : e.endpoint)}>
                    <span>{BB.t(e.label)}</span><i>{auf ? "−" : "+"}</i>
                  </button>
                  <div className="bld-ep-effekte">
                    {e.effekte.map((x, i) => (
                      <button key={i} type="button"
                              className={"bld-ep-pille r-" + x.richtung + (fokus === x.baustein ? " on" : "")}
                              style={{ opacity: fokus && fokus !== x.baustein ? 0.2 : 0.4 + 0.6 * Math.min(1, x.konfidenz * 1.6) }}
                              onClick={() => onFokus(fokus === x.baustein ? null : x.baustein)}
                              title={`${label[x.slug] || x.slug} · ${(x.kette || []).join(" → ")} · ${BB.t(BLD_STUFEN[x.stufe] ? BLD_STUFEN[x.stufe].label : x.stufe)}`}>
                        <b>{BLD_RICHTUNG[x.richtung] || "●"}</b>
                        <span>{label[x.slug] || x.slug}</span>
                        {x.wege > 1 && <small className="bld-ep-wege">{x.wege}</small>}
                        <i>{(BLD_STUFEN[x.stufe] || { kurz: "?" }).kurz}</i>
                      </button>
                    ))}
                  </div>
                  {auf && <BldRezeptor effekte={e.effekte} proteine={pharma.proteine || {}} />}
                </div>
              );
            })}
          </div>
        ))}
      </div>
      <div className="bld-ep-fuss">
        {(pharma.ohneKnoten || []).map((s) => (
          <span key={s} className="bld-plakette e-unbekannt" title={BB.t("Die Karte kennt diesen Stoff nicht")}>
            <span>?</span>{label[s] || s}
          </span>
        ))}
        {(pharma.ohneWege || []).map((s) => (
          <span key={s} className="bld-plakette e-unbekannt" title={BB.t("Bekannt, aber ohne Weg zu einem Endpunkt")}>
            <span>∅</span>{label[s] || s}
          </span>
        ))}
        {pharma.ohneDosis && <span className="bld-ep-hinweis">{BB.t("Ohne Dosis gerechnet")}</span>}
      </div>
    </div>
  );
}

/* Der Rezeptorblick: wo die treibenden Proteine abgelesen werden. Eine
   Ableserate in mRNA aus dem HPA, keine Rezeptordichte, und die Fußzeile
   sagt das, damit der Balken nicht nach Wirkort aussieht. */
function BldRezeptor({ effekte, proteine }) {
  const gene = [...new Set(effekte.flatMap((x) => x.treiber || []).filter(Boolean))];
  const mit = gene.filter((g) => (proteine[g] || []).length);
  if (!mit.length) return <div className="bld-rezeptor leer">{BB.t("Für diese Proteine liegt keine Gewebeverteilung vor.")}</div>;
  return (
    <div className="bld-rezeptor">
      {mit.map((g) => (
        <div key={g} className="bld-rezeptor-gen">
          <b>{g}</b>
          {proteine[g].map((x) => (
            <div key={x.label} className="bld-rezeptor-zeile">
              <span>{BB.t(x.label)}</span>
              <i><em style={{ width: x.anteil * 100 + "%" }} /></i>
            </div>
          ))}
        </div>
      ))}
      <small>{BB.t("Ableserate des Gens (mRNA, HPA), keine Rezeptordichte.")}</small>
    </div>
  );
}

/* Was sich messen ließe. Das einzige Stück des Builders, das etwas vorschlägt,
   und es schlägt eine Blutabnahme vor und keinen Stoff. Gebündelt je Laborwert:
   wer über drei Endpunkte dreimal GGT liest, liest dreimal dieselbe Abnahme. */
function BldMarker({ marker, fokus, onFokus }) {
  const [alleOhne, setAlleOhne] = useState(false);
  const liste = (marker && marker.marker) || [];
  const ohne = (marker && marker.ohne) || [];
  if (!liste.length && !ohne.length) return <BldLeer art="pharmakologie" />;
  return (
    <div className="bld-marker">
      <div className="bld-marker-liste">
        {liste.map((m) => (
          <div key={m.analyt} className={"bld-marker-karte g-" + m.guete}>
            <div className="bld-marker-kopf">
              <b>{BB.t(m.label)}</b>
              <span className="bld-marker-guete">{BB.t(m.guete)}</span>
              {m.einheit && <small>{m.einheit}</small>}
            </div>
            <div className="bld-marker-endpunkte">
              {m.endpunkte.map((e) => (
                <button key={e.endpoint} type="button" className="bld-marker-ep"
                        title={BB.t(e.warum)}
                        onClick={() => onFokus(fokus === e.endpoint ? null : e.endpoint)}>
                  <i className={"f-" + (e.folgt > 0 ? "hoch" : e.folgt < 0 ? "runter" : "beide")}>
                    {e.folgt > 0 ? "▲" : e.folgt < 0 ? "▼" : "↕"}
                  </i>
                  <span>{BB.t(e.label)}</span>
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>
      {ohne.length > 0 && (
        <div className="bld-ohne">
          <button type="button" className="bld-ohne-kopf" onClick={() => setAlleOhne(!alleOhne)}>
            <span>{BB.t("Ohne Laborwert")}</span><b>{ohne.length}</b><i>{alleOhne ? "−" : "+"}</i>
          </button>
          {alleOhne && (
            <div className="bld-ohne-liste">
              {ohne.map((o) => (
                <div key={o.endpoint} className="bld-ohne-zeile">
                  <b>{BB.t(o.label)}</b><span>{BB.t(o.grund)}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

/* Die Zielkarte. Eigene Cytoscape-Instanz, nicht die der Molekuelkarte: dieselbe
   Bibliothek, eigener Behaelter, eigenes Stylesheet. Die Molekuelkarte bleibt
   unberuehrt, und der Builder kann Knoten hinzufuegen und entfernen, ohne dass
   dort etwas nachgezeichnet werden muss.

   Gruppen sind zusammengesetzte Knoten (`parent`), damit die Flaeche dahinter
   wirklich die Gruppe ist und kein daruebergelegtes Rechteck, das beim Zoomen
   verrutscht. */
function BldZielkarte({ daten, ziele, onZiele, fokus, onFokus }) {
  const hostRef = useRef(null);
  const cyRef = useRef(null);
  const [offen, setOffen] = useState(null);

  useEffect(() => {
    if (!hostRef.current || !window.cytoscape) return undefined;
    /* Cytoscape zeichnet auf Canvas und loest keine CSS-Variablen auf. Die
       Farben werden deshalb einmal aus dem Dokument gelesen, wie es die
       Molekuelkarte mit `mkPalette` tut. */
    const cs = getComputedStyle(hostRef.current);
    const f = Object.fromEntries(["accent", "ep", "fg", "fg2", "fg3", "fg4", "hoch", "ink", "runter", "stoff",
       "gruppe-bg", "gruppe-an", "gruppe-line"].map(
      (n) => [n, cs.getPropertyValue("--bld-" + n).trim()]));
    const cy = window.cytoscape({
      container: hostRef.current,
      minZoom: 0.2, maxZoom: 2.5,
      style: [
        /* Cytoscape wendet `background-opacity` getrennt an und ignoriert
           das Alpha im Farbwert. Die Flaeche ist deshalb eine Volltonfarbe
           mit eigener Deckkraft. Der Glow der gewaehlten Gruppe ist ein
           `overlay`, das ist das einzige Mittel der Bibliothek fuer einen
           Schein um ein Element herum. */
        { selector: "node[art='gruppe']", style: {
          "background-color": f.fg, "background-opacity": 0.04,
          "border-width": 2, "border-color": f["gruppe-line"],
          "border-opacity": 1, shape: "round-rectangle", padding: 30,
          label: "data(label)", "text-valign": "top", "text-halign": "center",
          "text-margin-y": -12, color: f.fg2,
          "font-size": 15, "font-weight": 700, "font-family": "Instrument Sans, sans-serif",
        } },
        { selector: "node[art='gruppe'].an", style: {
          "border-color": f.accent, "border-width": 2,
          "background-color": f.accent, "background-opacity": 0.1, color: f.accent,
          "overlay-color": f.accent, "overlay-opacity": 0.14, "overlay-padding": 14,
        } },
        { selector: "node[art='endpunkt']", style: {
          "background-color": f.ep, width: 14, height: 14,
          label: "data(label)", "font-size": 11, color: f.fg3,
          "text-valign": "bottom", "text-halign": "center", "text-margin-y": 5,
          "text-wrap": "wrap", "text-max-width": 110,
          "font-family": "Instrument Sans, sans-serif",
        } },
        { selector: "node[art='endpunkt'][treffer > 0]", style: {
          "background-color": f.accent, width: 22, height: 22,
          color: f.fg, "font-weight": 600,
        } },
        { selector: "node[art='stoff']", style: {
          "background-color": f.stoff, shape: "round-rectangle",
          width: "label", height: 26, padding: 9, label: "data(label)",
          "font-size": 13, "font-weight": 700, color: f.ink,
          "text-valign": "center", "text-halign": "center",
          "font-family": "Instrument Sans, sans-serif",
        } },
        { selector: "edge", style: {
          width: 1.5, "curve-style": "bezier", opacity: 0.55,
          "line-color": f.fg4, "target-arrow-color": f.fg4,
          "target-arrow-shape": "triangle", "arrow-scale": 0.8,
        } },
        { selector: "edge[richtung='hoch']", style: {
          "line-color": f.hoch, "target-arrow-color": f.hoch } },
        { selector: "edge[richtung='runter']", style: {
          "line-color": f.runter, "target-arrow-color": f.runter } },
        { selector: "edge[stufe='measured']", style: { width: 3, opacity: 0.9 } },
        { selector: ".leise", style: { opacity: 0.12 } },
      ],
    });
    cyRef.current = cy;
    cy.on("tap", "node[art='gruppe']", (e) => setOffen(e.target.id()));
    cy.on("tap", "node[art='stoff']", (e) => onFokus(e.target.data("slug")));
    cy.on("tap", (e) => { if (e.target === cy) { setOffen(null); onFokus(null); } });
    return () => { cy.destroy(); cyRef.current = null; };
  }, []);

  // Daten tauschen, Anordnung neu legen. `cose` ordnet zusammengesetzte Knoten
  // von sich aus so, dass die Gruppen auseinanderliegen.
  useEffect(() => {
    const cy = cyRef.current;
    if (!cy || !daten) return;
    cy.elements().remove();
    cy.add((daten.knoten || []).map((n) => ({
      data: { id: n.id, art: n.art, label: n.label, parent: n.gruppe,
              slug: n.slug, treffer: n.treffer || 0 } })));
    cy.add((daten.kanten || []).map((k) => ({
      data: { id: k.id, source: k.von, target: k.nach,
              richtung: k.richtung, stufe: k.stufe } })));
    cy.layout({ name: "cose", animate: false, nodeRepulsion: 42000,
                idealEdgeLength: 120, nestingFactor: 1.1, gravity: 0.3,
                componentSpacing: 120, padding: 40, nodeOverlap: 30 }).run();
    cy.fit(undefined, 40);
  }, [daten]);

  // Eine Gruppe anklicken heisst: dorthin fahren und hineinzoomen.
  useEffect(() => {
    const cy = cyRef.current;
    if (!cy) return;
    cy.elements().removeClass("an leise");
    if (!offen) { cy.animate({ fit: { eles: cy.elements(), padding: 40 } }, { duration: 420 }); return; }
    const gruppe = cy.$id(offen);
    if (!gruppe.length) return;
    gruppe.addClass("an");
    const dazu = gruppe.descendants();
    const nachbarn = dazu.connectedEdges().connectedNodes();
    cy.elements().difference(gruppe.union(dazu).union(nachbarn).union(dazu.connectedEdges()))
      .addClass("leise");
    cy.animate({ fit: { eles: gruppe.union(nachbarn), padding: 60 } },
               { duration: 420, easing: "ease-out-cubic" });
  }, [offen, daten]);

  return (
    <div className="bld-zielkarte">
      <div className="bld-zielwahl">
        {((daten && daten.verfuegbar) || []).map((z) => (
          <button key={z.id} type="button"
                  className={"bld-zielknopf" + (ziele.includes(z.id) ? " on" : "")}
                  onClick={() => onZiele(ziele.includes(z.id)
                    ? ziele.filter((x) => x !== z.id) : ziele.concat(z.id))}>
            {BB.t(z.label)}
          </button>
        ))}
      </div>
      {!ziele.length ? (
        <div className="bld-zielkarte-leer">
          <BldIcon art="pharmakologie" size={34} />
          <span>{BB.t("Wähle oben ein Ziel oder mehrere.")}</span>
        </div>
      ) : (
        <>
          <div className="bld-zielkarte-feld" ref={hostRef} />
          <div className="bld-zielkarte-fuss">
            {offen
              ? <button type="button" className="bld-zuruck" onClick={() => setOffen(null)}>
                  {BB.t("Alles zeigen")}
                </button>
              : <span>{BB.t("Klick auf eine Gruppe zoomt hinein")}</span>}
            {(daten && daten.leer || []).length > 0 && (
              <span className="bld-zielkarte-leerliste">
                {BB.t("Ohne Berührung")}: {daten.leer.map((x) => BB.t(x)).join(", ")}
              </span>
            )}
          </div>
        </>
      )}
    </div>
  );
}

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

function BuilderPage() {
  const { user, ready } = useAuth();
  const [stand, setStand] = useState(bldLaden);
  const [fokus, setFokus] = useState(null);
  const [ansicht, setAnsicht] = useState("tag");
  const [ergebnisse, setErgebnisse] = useState({});
  const [stamm, setStamm] = useState(null);
  const [fehler, setFehler] = useState("");
  const [pharma, setPharma] = useState({});
  const [pharmaFehler, setPharmaFehler] = useState("");
  const [offen, setOffen] = useState(null);
  const [karte, setKarte] = useState(null);

  const aktiv = stand.aktiv;
  const v = stand.varianten[aktiv];
  // Mahlzeit, Training, Schlaf und Cardio rechnen gegen gepflegte Daten und
  // sind offen. Die Pharmakologie zeigt denselben Inhalt wie die Molekuelkarte
  // und haengt deshalb an derselben Mitgliedschaft.
  // Dieselbe Regel wie `require_premium` am Server und wie in der
  // Molekuelkarte. Sie steht hier nur, um die richtige Ansicht zu waehlen;
  // entschieden wird sie am Server.
  const darfPharma = !!user && (user.plan === "premium" || user.role === "admin"
                                || user.role === "mod");

  useEffect(() => {
    try { localStorage.setItem(BLD_SPEICHER, JSON.stringify(stand)); } catch (e) { /* egal */ }
  }, [stand]);

  useEffect(() => {
    BB.get("/builder/stammdaten").then(setStamm).catch((err) => setFehler(err.message));
  }, []);

  /* Jede Variante wird für sich gelesen. Die Antwort kommt mit kurzer Pause,
     damit nicht jeder Schritt beim Ziehen eine Anfrage auslöst. */
  const schluessel = JSON.stringify(stand.varianten);
  useEffect(() => {
    let alive = true;
    const t = setTimeout(() => {
      Object.entries(stand.varianten).forEach(([name, va]) => {
        BB.post("/builder/tag", {
          gewicht_kg: va.gewicht, groesse_cm: va.groesse, alter: va.alter,
          geschlecht: va.geschlecht, schritte: va.schritte, pal: va.pal,
          bausteine: va.bausteine,
        })
          .then((d) => { if (alive) { setErgebnisse((e) => ({ ...e, [name]: d })); setFehler(""); } })
          .catch((err) => { if (alive) setFehler(err.message); });
      });
    }, 250);
    return () => { alive = false; clearTimeout(t); };
  }, [schluessel]);

  /* Die Pharmakologie wird getrennt gelesen: andere Schranke (Premium, wie die
     Molekülkarte), und sie hängt nur an den Stoffen, nicht an Uhrzeiten. */
  const pharmaSchluessel = JSON.stringify(Object.fromEntries(Object.entries(stand.varianten).map(
    ([n, va]) => [n, [va.wochen || 12].concat(va.bausteine
      .filter((b) => b.art === "pharmakologie" && b.slug)
      .map((b) => [b.slug, b.id, b.von, b.bis, b.schema].join("|")))])));
  useEffect(() => {
    if (!darfPharma) return undefined;
    let alive = true;
    const t = setTimeout(() => {
      Object.entries(stand.varianten).forEach(([name, va]) => {
        const bs = va.bausteine.filter((b) => b.art === "pharmakologie" && b.slug);
        if (!bs.length) { setPharma((e) => ({ ...e, [name]: null })); return; }
        BB.post("/builder/pharmakologie", { bausteine: bs, wochen: va.wochen || 12 })
          .then((d) => { if (alive) { setPharma((e) => ({ ...e, [name]: d })); setPharmaFehler(""); } })
          .catch((err) => { if (alive) setPharmaFehler(err.message); });
      });
    }, 300);
    return () => { alive = false; clearTimeout(t); };
  }, [pharmaSchluessel, darfPharma]);

  /* Die Zielkarte haengt an denselben Stoffen plus der Zielauswahl. Sie wird
     getrennt geholt, damit ein Klick auf ein Ziel nicht die ganze
     Pharmakologie neu rechnet. */
  const zieleKey = (v.ziele || []).join(",");
  useEffect(() => {
    if (!darfPharma) return undefined;
    const bs = v.bausteine.filter((b) => b.art === "pharmakologie" && b.slug);
    let alive = true;
    const t = setTimeout(() => {
      BB.post("/builder/karte", { bausteine: bs, ziele: v.ziele || [] })
        .then((d) => { if (alive) setKarte(d); })
        .catch(() => {});
    }, 300);
    return () => { alive = false; clearTimeout(t); };
  }, [zieleKey, pharmaSchluessel, darfPharma]);

  const aendereVariante = (patch) => setStand((s) => ({
    ...s, varianten: { ...s.varianten, [s.aktiv]: { ...s.varianten[s.aktiv], ...patch } },
  }));
  const aendereBaustein = (id, patch) => aendereVariante({
    bausteine: v.bausteine.map((b) => (b.id === id ? { ...b, ...patch } : b)),
  });
  const neu = (art) => {
    const def = BLD_ARTEN[art];
    const b = { id: bldId(), art, start: def.start };
    if (art !== "mahlzeit") b.dauer = def.dauer;
    if (art === "mahlzeit") b.posten = [];
    if (art === "training") b.muskeln = [];
    if (art === "schlaf") b.chronotyp = "mittel";
    if (art === "pharmakologie") Object.assign(b, { slug: "", label: "", von: 1, bis: v.wochen || 12 });
    aendereVariante({ bausteine: v.bausteine.concat(b) });
    setFokus(b.id);
  };
  const loeschen = (id) => {
    aendereVariante({ bausteine: v.bausteine.filter((b) => b.id !== id) });
    setFokus(null);
  };
  const variante = (name) => setStand((s) => {
    if (s.varianten[name]) return { ...s, aktiv: name };
    // Eine neue Variante beginnt als Kopie: verglichen wird ein Tausch, nicht
    // zwei Pläne, die sich in allem unterscheiden.
    const kopie = JSON.parse(JSON.stringify(s.varianten[s.aktiv]));
    return { ...s, aktiv: name, varianten: { ...s.varianten, [name]: kopie } };
  });
  const varianteWeg = (name) => {
    setStand((s) => {
      const rest = { ...s.varianten };
      delete rest[name];
      return { aktiv: "A", varianten: rest };
    });
    setErgebnisse((e) => { const n = { ...e }; delete n[name]; return n; });
  };

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

  const erg = ergebnisse[aktiv];
  const pharmaErg = pharma[aktiv];
  const kinetik = Object.fromEntries(((pharmaErg && pharmaErg.stoffe) || []).map((s) => [s.slug, s.kinetik]));
  const gewaehlt = v.bausteine.find((b) => b.id === fokus);
  const ergGewaehlt = gewaehlt && gewaehlt.art === "mahlzeit" && erg
    ? erg.mahlzeiten.find((m) => m.id === gewaehlt.id) : null;
  const liste = Object.keys(stand.varianten).sort().map((name) => ({ name, erg: ergebnisse[name] }));

  return (
    <div className="bld-seite">
      <BldKopf>
        <div className="bld-kopf-steuer">
          <div className="bld-varianten">
            {["A", "B"].map((name) => (
              <button key={name} type="button"
                      className={"v-" + name + (aktiv === name ? " on" : "") + (stand.varianten[name] ? "" : " neu")}
                      onClick={() => variante(name)}>
                {stand.varianten[name] ? name : "+ " + name}
              </button>
            ))}
            {stand.varianten.B && (
              <button type="button" className="bld-rund klein" title={BB.t("Variante B entfernen")}
                      onClick={() => varianteWeg("B")}>✕</button>
            )}
          </div>
          <Segmented value={ansicht} onChange={setAnsicht}
                     options={[{ value: "tag", label: BB.t("Tag") }, { value: "protokoll", label: BB.t("Protokoll") }]} />
        </div>
      </BldKopf>

      {fehler && <div className="bld-fehler">{fehler}</div>}

      <BldAllgemein v={v} stamm={stamm || {}} energie={erg && erg.energie}
                    onAendern={aendereVariante} />

      {ansicht === "tag" ? (
        <>
          <BldZeitachse v={v} erg={erg} fokus={fokus} onFokus={setFokus} onNeu={neu}
                        onVerschieben={(id, start) => aendereBaustein(id, { start })}
                        fenster={(((stamm && stamm.regeln) || {}).koffein_vor_schlaf || {}).fenster_min || 0}
                        kinetik={kinetik} darfPharma={darfPharma} />

          {gewaehlt && (
            <BldEditor key={gewaehlt.id} b={gewaehlt} erg={ergGewaehlt}
                       muskeln={(stamm && stamm.muskeln) || []} kinetik={kinetik} wochen={v.wochen || 12}
                       stamm={stamm || {}}
                       spiegelzeile={((pharmaErg && pharmaErg.spiegel && pharmaErg.spiegel.stoffe) || []).find((x) => x.id === (gewaehlt || {}).id) || null}
                       onAendern={aendereBaustein} onLoeschen={loeschen} onSchliessen={() => setFokus(null)} />
          )}

          <div className="bld-raster">
            <BldKarte titel={BB.t("Tagesuhr")}>
              <BldUhr v={v} erg={erg} fokus={fokus} onFokus={setFokus} />
            </BldKarte>
            <BldKarte titel={BB.t("Energie")} kopf={<small>{BB.t("Zufuhr und Verbrauch")}</small>}>
              <BldEnergie ergebnisse={liste} />
              <BldEnergieband energie={erg && erg.energie} />
              <BldProteinBand ergebnisse={liste} />
            </BldKarte>
            <BldKarte titel={BB.t("Erholung je Muskel")} kopf={<small>h</small>}>
              <BldErholung erg={erg} fokus={fokus} onFokus={setFokus} />
            </BldKarte>
            <BldKarte titel={BB.t("Abstand zum Schlaf")}>
              <BldAbstaende erg={erg} fokus={fokus} onFokus={setFokus} />
            </BldKarte>
            <BldKarte titel={BB.t("Was Studien dazu sagen")} breit>
              <BldBelege erg={erg} fokus={fokus} onFokus={setFokus} />
            </BldKarte>
          </div>
        </>
      ) : (
        !darfPharma ? (
          <div className="bld-tor">
            <BldIcon art="pharmakologie" size={40} />
            <span>{BB.t("Die Pharmakologie gehört zur Mitgliedschaft")}</span>
            <Link to="/auswertung" className="btn primary">{BB.t("Premium entdecken")}</Link>
          </div>
        ) : (
        <>
          <BldProtokoll v={v} kinetik={kinetik} fokus={fokus} onFokus={setFokus} onNeu={neu}
                        spiegel={(pharmaErg && pharmaErg.spiegel && pharmaErg.spiegel.stoffe) || []}
                        onAendern={aendereBaustein} onWochen={(w) => aendereVariante({
                          wochen: w,
                          bausteine: v.bausteine.map((b) => (b.art === "pharmakologie"
                            ? { ...b, von: Math.min(b.von || 1, w), bis: Math.min(b.bis || w, w) } : b)),
                        })} />
          {gewaehlt && (
              <BldEditor key={gewaehlt.id} b={gewaehlt} erg={ergGewaehlt}
                       muskeln={(stamm && stamm.muskeln) || []} kinetik={kinetik} wochen={v.wochen || 12}
                       stamm={stamm || {}}
                       spiegelzeile={((pharmaErg && pharmaErg.spiegel && pharmaErg.spiegel.stoffe) || []).find((x) => x.id === (gewaehlt || {}).id) || null}
                       onAendern={aendereBaustein} onLoeschen={loeschen} onSchliessen={() => setFokus(null)} />
          )}
          {pharmaFehler ? (
            <div className="bld-tor klein">
              <BldIcon art="pharmakologie" size={34} />
              <span>{pharmaFehler}</span>
            </div>
          ) : (
            <>
            <BldKarte titel={BB.t("Ziele")}
                      kopf={<small>{BB.t("Was deine Stoffe darin berühren")}</small>} breit>
              <BldZielkarte daten={karte} ziele={v.ziele || []}
                            onZiele={(z) => aendereVariante({ ziele: z })}
                            fokus={fokus} onFokus={setFokus} />
            </BldKarte>
            <BldKarte titel={BB.t("Was sich messen ließe")}
                      kopf={<small>{BB.t("Vorgeschlagen werden Messungen, keine Stoffe")}</small>} breit>
              {pharmaErg ? <BldMarker marker={pharmaErg.marker} fokus={offen} onFokus={setOffen} />
                         : <BldLeer art="pharmakologie" />}
            </BldKarte>
            <BldKarte titel={BB.t("Endpunkte")} kopf={<small>{BB.t("Klick auf einen Endpunkt zeigt die Gewebe")}</small>} breit>
              {pharmaErg
                ? <BldEndpunktkarte pharma={pharmaErg} stoffe={v.bausteine.filter((b) => b.art === "pharmakologie")}
                                    fokus={fokus} onFokus={setFokus} offen={offen} setOffen={setOffen} />
                : <BldLeer art="pharmakologie" />}
            </BldKarte>
            </>
          )}
        </>
        )
      )}
    </div>
  );
}

function BldKopf({ children }) {
  return (
    <header className="bld-kopf">
      <div className="bld-titel">
        <h1>{BB.t("Builder")}</h1>
        <span className="bld-beta">BETA</span>
      </div>
      {children}
    </header>
  );
}

Object.assign(window, { BuilderPage });