/* ==========================================================================
   DATENBANK: geschuetzte, rein lesende Katalogansicht.

   Die vier Kataloge bleiben fachlich getrennt und werden erst hier unter einem
   Premium-Zugang zusammengefuehrt. Uebungen kommen aus dem bestehenden
   ExerciseCatalog; die grossen Lebensmittel-, Evidenz- und Molekuellisten
   werden serverseitig gefiltert und in kleinen Fenstern nachgeladen.
   ========================================================================== */

const DB_BEREICHE = [
  {
    id: "uebungen", icon: "◫", label: "Übungen",
    blurb: "Körperpartien, Geräte, Muskelziele und Anleitungen.",
  },
  {
    id: "nahrungsmittel", icon: "▤", label: "Nahrungsmittel",
    blurb: "Makros und Energie pro 100 g aus der Lebensmittelbasis.",
  },
  {
    id: "evidenz", icon: "⌁", label: "Evidenz",
    blurb: "Quellen und Einzelnachweise hinter den Wissensartikeln.",
  },
  {
    id: "molekuele", icon: "◈", label: "Moleküle",
    blurb: "Substanzen, Metaboliten und Zielproteine aus der Molekülkarte.",
  },
];

const DB_FOOD_GROUP_LABELS = {
  fleisch: "Fleisch", fisch: "Fisch", ei: "Eier", milch: "Milchprodukte",
  huelsenfrucht: "Hülsenfrüchte", getreide: "Getreide und Beilagen",
  gemuese: "Gemüse", obst: "Obst", nuss: "Nüsse und Samen", fett: "Fette und Öle",
  suess: "Süßes", sonstiges: "Sonstiges", markt: "Markt",
};

const DB_MOLECULE_TYPES = [
  ["substance", "Substanz"], ["metabolite", "Metabolit"],
  ["receptor", "Rezeptor"], ["enzyme", "Enzym"],
  ["transporter", "Transporter"], ["regulator", "Regulator"],
  ["endpoint", "Analyse-Endpunkt"],
];

function datenbankDarf(user) {
  return !!user && (user.plan === "premium" || user.role === "admin" || user.role === "mod");
}

function datenbankBereich(value) {
  return DB_BEREICHE.some((bereich) => bereich.id === value) ? value : "uebungen";
}

function datenbankHref(id) {
  return "/datenbank?bereich=" + encodeURIComponent(id);
}

function datenbankZahl(value, suffix = "") {
  if (value === null || value === undefined || value === "") return "–";
  const number = Number(value);
  if (!Number.isFinite(number)) return "–";
  const digits = Number.isInteger(number) ? 0 : 2;
  return new Intl.NumberFormat(BB.lang || "de", {
    maximumFractionDigits: digits,
  }).format(number) + suffix;
}

function DatenbankLanding({ user }) {
  return (
    <div className="wrap section stack database-landing">
      <section className="database-landing-hero">
        <div className="database-landing-copy">
          <div className="eyebrow">{BB.t("Premium-Datenbank")}</div>
          <h1>{BB.t("Die Datenbank hinter deinen Entscheidungen.")}</h1>
          <p className="lede">
            {BB.t("Übungen, Nahrungsmittel, Evidenz und Moleküle – zentral gesammelt, nachvollziehbar und nur lesend.")}
          </p>
          <p className="database-landing-note">
            {BB.t("Zugriff auf die Datenbank gehört zur Premium-Mitgliedschaft.")} {BB.t("Alle Einträge bleiben unverändert. Du kannst sie durchsuchen und die Quellen einsehen.")}
          </p>
          <div className="row database-landing-actions">
            {!user && <Link to="/registrieren" className="btn primary">{BB.t("Konto anlegen")}</Link>}
            {user && <a href="#datenbank-angebote" className="btn primary">{BB.t("Premium entdecken")}</a>}
            {!user && <Link to="/login" className="btn ghost">{BB.t("Schon dabei? Einloggen")}</Link>}
          </div>
        </div>
        <div className="database-landing-orbit" aria-hidden="true">
          {DB_BEREICHE.map((bereich, index) => (
            <div className={"database-orbit-node n-" + index} key={bereich.id}>
              <span>{bereich.icon}</span>
              <small>{BB.t(bereich.label)}</small>
            </div>
          ))}
          <div className="database-orbit-core">BB</div>
        </div>
      </section>

      <section className="database-landing-catalog">
        <div className="eyebrow">{BB.t("Lesender Zugriff")}</div>
        <h2>{BB.t("Vier Kataloge, ein Einstieg.")}</h2>
        <div className="database-preview-grid">
          {DB_BEREICHE.map((bereich) => (
            <article className="database-preview-card" key={bereich.id}>
              <span className="database-preview-icon" aria-hidden="true">{bereich.icon}</span>
              <h3>{BB.t(bereich.label)}</h3>
              <p>{BB.t(bereich.blurb)}</p>
            </article>
          ))}
        </div>
      </section>

      <div id="datenbank-angebote" className="database-offer">
        <Angebot user={user} />
      </div>
    </div>
  );
}

function DatenbankNavigation({ active, overview }) {
  const counts = {};
  (overview && overview.sections || []).forEach((item) => { counts[item.id] = item.count; });
  return (
    <nav className="database-nav" aria-label={BB.t("Datenbank")} role="tablist">
      {DB_BEREICHE.map((bereich) => (
        <Link
          key={bereich.id}
          to={datenbankHref(bereich.id)}
          className={"database-nav-item" + (active === bereich.id ? " on" : "")}
          role="tab"
          aria-selected={active === bereich.id}
          aria-current={active === bereich.id ? "page" : undefined}
        >
          <span className="database-nav-icon" aria-hidden="true">{bereich.icon}</span>
          <span className="database-nav-label">{BB.t(bereich.label)}</span>
          {counts[bereich.id] !== undefined && (
            <span className="database-nav-count mono">{BB.num(counts[bereich.id])}</span>
          )}
        </Link>
      ))}
    </nav>
  );
}

function DatenbankFehler({ error, onRetry }) {
  return (
    <div className="panel database-error" role="alert">
      <strong>{BB.t("Die Datenbank konnte nicht geladen werden.")}</strong>
      <p>{error || BB.t("Das hat nicht geklappt.")}</p>
      {onRetry && <button type="button" className="btn ghost sm" onClick={onRetry}>{BB.t("Neu laden")}</button>}
    </div>
  );
}

function DatenbankExercises() {
  const [data, setData] = useState(null);
  const [error, setError] = useState("");
  const [version, setVersion] = useState(0);

  useEffect(() => {
    let alive = true;
    setData(null);
    setError("");
    BB.get("/datenbank/uebungen")
      .then((payload) => { if (alive) setData(payload); })
      .catch((err) => { if (alive) setError(err.message || BB.t("Das hat nicht geklappt.")); });
    return () => { alive = false; };
  }, [version]);

  const labelFuer = useCallback((id) => {
    const muskel = (data && data.muskeln || []).find((item) => item.id === id);
    return muskel ? BB.t(muskel.label) : id;
  }, [data]);

  return (
    <section className="database-section-stack" aria-labelledby="database-section-title">
      <div className="database-section-intro">
        <div>
          <div className="eyebrow">{BB.t("Katalog")}</div>
          <h2 id="database-section-title">{BB.t("Übungen")}</h2>
          <p>{BB.t("Durchsuche Übungen nach Körperpartie und Gerät. Die Angaben stammen aus dem ExerciseDB-Katalog.")}</p>
        </div>
        <span className="database-readonly">{BB.t("Nur lesen")}</span>
      </div>
      {error && <DatenbankFehler error={error} onRetry={() => setVersion((n) => n + 1)} />}
      {!data && !error && <div className="panel"><Spinner label={BB.t("Datenbank wird geladen …")} /></div>}
      {data && (
        <section className="panel database-catalog-panel">
          <ExerciseCatalog
            embedded
            auswahl={false}
            uebungen={data.items || []}
            labelFuer={labelFuer}
          />
        </section>
      )}
    </section>
  );
}

function DatenbankFood() {
  const [suche, setSuche] = useState("");
  const [gruppe, setGruppe] = useState("");
  const [items, setItems] = useState([]);
  const [gruppen, setGruppen] = useState([]);
  const [quelle, setQuelle] = useState(null);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError] = useState("");
  const request = useRef(0);

  useEffect(() => {
    const id = ++request.current;
    let alive = true;
    setLoading(true);
    setItems([]);
    setError("");
    const timer = setTimeout(() => {
      BB.get("/datenbank/nahrungsmittel" + BB.qs({
        q: suche.trim(), gruppe, land: BB.country, lang: BB.lang, limit: 60, offset: 0,
      }))
        .then((data) => {
          if (!alive || id !== request.current) return;
          setItems(data.items || []);
          setGruppen(data.gruppen || []);
          setQuelle(data.quelle || null);
          setTotal(data.total || 0);
          setLoading(false);
        })
        .catch((err) => {
          if (!alive || id !== request.current) return;
          setError(err.message || BB.t("Das hat nicht geklappt."));
          setLoading(false);
        });
    }, 180);
    return () => { alive = false; clearTimeout(timer); };
  }, [suche, gruppe]);

  function mehrLaden() {
    if (loadingMore || items.length >= total) return;
    setLoadingMore(true);
    BB.get("/datenbank/nahrungsmittel" + BB.qs({
      q: suche.trim(), gruppe, land: BB.country, lang: BB.lang,
      limit: 60, offset: items.length,
    }))
      .then((data) => {
        setItems((old) => old.concat(data.items || []));
        setTotal(data.total || 0);
      })
      .catch((err) => setError(err.message || BB.t("Das hat nicht geklappt.")))
      .finally(() => setLoadingMore(false));
  }

  return (
    <section className="database-section-stack" aria-labelledby="database-section-title">
      <div className="database-section-intro">
        <div>
          <div className="eyebrow">{BB.t("Katalog")}</div>
          <h2 id="database-section-title">{BB.t("Nahrungsmittel")}</h2>
          <p>{BB.t("Durchsuche die Lebensmittelbasis nach Namen, Gruppe und Nährwerten.")}</p>
        </div>
        <span className="database-readonly">{BB.t("Nur lesen")}</span>
      </div>

      <div className="panel database-list-panel">
        <div className="database-toolbar">
          <input
            className="input"
            type="search"
            value={suche}
            onChange={(event) => setSuche(event.target.value)}
            placeholder={BB.t("Suche in der Datenbank …")}
            aria-label={BB.t("Nahrungsmittel suchen")}
          />
          <select className="input" value={gruppe} onChange={(event) => setGruppe(event.target.value)} aria-label={BB.t("Alle Gruppen")}>
            <option value="">{BB.t("Alle Gruppen")}</option>
            {gruppen.map((key) => <option key={key} value={key}>{BB.t(DB_FOOD_GROUP_LABELS[key] || key)}</option>)}
          </select>
        </div>
        <div className="database-list-summary">
          <span>{BB.num(total)} {BB.t("Einträge")}</span>
          {quelle && <span>{BB.t("Quelle")}: {quelle.name}</span>}
        </div>

        {error && <DatenbankFehler error={error} />}
        {loading ? <Spinner label={BB.t("Datenbank wird geladen …")} /> : items.length === 0 ? (
          <Empty mark="⌕" title={BB.t("Keine Einträge gefunden.")} />
        ) : (
          <>
            <div className="database-food-grid">
              {items.map((item) => (
                <article className="database-food-card" key={item.id}>
                  <div className="database-card-head">
                    <h3>{item.label}</h3>
                    {item.gruppe && <span className="pill">{BB.t(DB_FOOD_GROUP_LABELS[item.gruppe] || item.gruppe)}</span>}
                  </div>
                  <div className="database-food-values">
                    <div><span>{BB.t("Kalorien")}</span><strong>{datenbankZahl(item.kcal, " kcal")}</strong></div>
                    <div><span>{BB.t("Eiweiß")}</span><strong>{datenbankZahl(item.protein, " g")}</strong></div>
                    <div><span>{BB.t("Kohlenhydrate")}</span><strong>{datenbankZahl(item.kh, " g")}</strong></div>
                    <div><span>{BB.t("Fett")}</span><strong>{datenbankZahl(item.fett, " g")}</strong></div>
                  </div>
                  <p className="database-card-foot">{BB.t("Nährwerte je 100 g")} · {item.quelle || BB.t("Kuratierte Lebensmittelbasis")}</p>
                </article>
              ))}
            </div>
            {items.length < total && (
              <button type="button" className="btn ghost database-load-more" onClick={mehrLaden} disabled={loadingMore}>
                {loadingMore ? BB.t("Datenbank wird geladen …") : BB.t("Mehr laden")} · {BB.num(items.length)} / {BB.num(total)}
              </button>
            )}
          </>
        )}
      </div>
    </section>
  );
}

function DatenbankEvidence() {
  const [suche, setSuche] = useState("");
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError] = useState("");
  const request = useRef(0);

  useEffect(() => {
    const id = ++request.current;
    let alive = true;
    setLoading(true);
    setItems([]);
    setError("");
    const timer = setTimeout(() => {
      BB.get("/datenbank/evidenz" + BB.qs({ q: suche.trim(), limit: 50, offset: 0 }))
        .then((data) => {
          if (!alive || id !== request.current) return;
          setItems(data.items || []);
          setTotal(data.total || 0);
          setLoading(false);
        })
        .catch((err) => {
          if (!alive || id !== request.current) return;
          setError(err.message || BB.t("Das hat nicht geklappt."));
          setLoading(false);
        });
    }, 180);
    return () => { alive = false; clearTimeout(timer); };
  }, [suche]);

  function mehrLaden() {
    if (loadingMore || items.length >= total) return;
    setLoadingMore(true);
    BB.get("/datenbank/evidenz" + BB.qs({ q: suche.trim(), limit: 50, offset: items.length }))
      .then((data) => {
        setItems((old) => old.concat(data.items || []));
        setTotal(data.total || 0);
      })
      .catch((err) => setError(err.message || BB.t("Das hat nicht geklappt.")))
      .finally(() => setLoadingMore(false));
  }

  return (
    <section className="database-section-stack" aria-labelledby="database-section-title">
      <div className="database-section-intro">
        <div>
          <div className="eyebrow">{BB.t("Freigegebene Evidenz")}</div>
          <h2 id="database-section-title">{BB.t("Evidenz")}</h2>
          <p>{BB.t("Finde die Einzelnachweise hinter den freigegebenen Wissensartikeln.")}</p>
        </div>
        <span className="database-readonly">{BB.t("Nur lesen")}</span>
      </div>
      <div className="panel database-list-panel">
        <div className="database-toolbar single">
          <input
            className="input"
            type="search"
            value={suche}
            onChange={(event) => setSuche(event.target.value)}
            placeholder={BB.t("Suche in der Datenbank …")}
            aria-label={BB.t("Evidenz suchen")}
          />
        </div>
        <div className="database-list-summary"><span>{BB.num(total)} {BB.t("Nachweis")}</span></div>
        {error && <DatenbankFehler error={error} />}
        {loading ? <Spinner label={BB.t("Datenbank wird geladen …")} /> : items.length === 0 ? (
          <Empty mark="⌁" title={BB.t("Keine Einträge gefunden.")} />
        ) : (
          <>
            <div className="database-evidence-list">
              {items.map((item) => (
                <article className="database-evidence-card" key={item.id}>
                  <div className="database-evidence-meta">
                    <span className="pill">{item.kategorie || BB.t("Evidenz")}</span>
                    <span className="dim">{BB.t("Referenz")} {item.nummer}</span>
                    {item.pmid && <span className="mono database-ref-id">PMID {item.pmid}</span>}
                  </div>
                  <p className="database-evidence-text">{item.referenz}</p>
                  <div className="database-evidence-links">
                    <Link to={"/wissen/" + item.artikelSlug}>{BB.t("Zum Wissensartikel")} · {item.artikelTitel}</Link>
                    {item.doi && <span className="dim">DOI {item.doi}</span>}
                    {item.url && <a href={item.url} target="_blank" rel="noopener noreferrer">{BB.t("Quelle öffnen")} ↗</a>}
                  </div>
                </article>
              ))}
            </div>
            {items.length < total && (
              <button type="button" className="btn ghost database-load-more" onClick={mehrLaden} disabled={loadingMore}>
                {loadingMore ? BB.t("Datenbank wird geladen …") : BB.t("Mehr laden")} · {BB.num(items.length)} / {BB.num(total)}
              </button>
            )}
          </>
        )}
      </div>
    </section>
  );
}

function DatenbankMolecules() {
  const [suche, setSuche] = useState("");
  const [typ, setTyp] = useState("");
  const [items, setItems] = useState([]);
  const [typen, setTypen] = useState(DB_MOLECULE_TYPES.map(([id, label]) => ({ id, label })));
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError] = useState("");
  const request = useRef(0);

  useEffect(() => {
    const id = ++request.current;
    let alive = true;
    setLoading(true);
    setItems([]);
    setError("");
    const timer = setTimeout(() => {
      BB.get("/datenbank/molekuele" + BB.qs({ q: suche.trim(), typ, limit: 60, offset: 0 }))
        .then((data) => {
          if (!alive || id !== request.current) return;
          setItems(data.items || []);
          setTypen(data.typen || typen);
          setTotal(data.total || 0);
          setLoading(false);
        })
        .catch((err) => {
          if (!alive || id !== request.current) return;
          setError(err.message || BB.t("Das hat nicht geklappt."));
          setLoading(false);
        });
    }, 180);
    return () => { alive = false; clearTimeout(timer); };
  }, [suche, typ]);

  function mehrLaden() {
    if (loadingMore || items.length >= total) return;
    setLoadingMore(true);
    BB.get("/datenbank/molekuele" + BB.qs({ q: suche.trim(), typ, limit: 60, offset: items.length }))
      .then((data) => {
        setItems((old) => old.concat(data.items || []));
        setTotal(data.total || 0);
      })
      .catch((err) => setError(err.message || BB.t("Das hat nicht geklappt.")))
      .finally(() => setLoadingMore(false));
  }

  return (
    <section className="database-section-stack" aria-labelledby="database-section-title">
      <div className="database-section-intro">
        <div>
          <div className="eyebrow">{BB.t("Molekülkarte")}</div>
          <h2 id="database-section-title">{BB.t("Moleküle")}</h2>
          <p>{BB.t("Durchsuche die vorhandenen Moleküle, Metaboliten und Zielproteine.")}</p>
        </div>
        <span className="database-readonly">{BB.t("Nur lesen")}</span>
      </div>
      <div className="panel database-list-panel">
        <div className="database-toolbar">
          <input
            className="input"
            type="search"
            value={suche}
            onChange={(event) => setSuche(event.target.value)}
            placeholder={BB.t("Suche in der Datenbank …")}
            aria-label={BB.t("Moleküle suchen")}
          />
          <select className="input" value={typ} onChange={(event) => setTyp(event.target.value)} aria-label={BB.t("Alle Typen")}>
            <option value="">{BB.t("Alle Typen")}</option>
            {typen.map((item) => <option key={item.id} value={item.id}>{BB.t(item.label)}</option>)}
          </select>
        </div>
        <div className="database-list-summary"><span>{BB.num(total)} {BB.t("Einträge")}</span></div>
        {error && <DatenbankFehler error={error} />}
        {loading ? <Spinner label={BB.t("Datenbank wird geladen …")} /> : items.length === 0 ? (
          <Empty mark="◈" title={BB.t("Keine Einträge gefunden.")} />
        ) : (
          <>
            <div className="database-molecule-grid">
              {items.map((item) => (
                <article className="database-molecule-card" key={item.id}>
                  <div className="database-card-head">
                    <span className="pill database-molecule-type">{BB.t(item.typLabel || item.typ)}</span>
                    {item.seed && <span className="database-seed">{BB.t("Aus der Wissensbasis")}</span>}
                  </div>
                  <h3>{item.label}</h3>
                  {item.name && item.name !== item.label && <p className="database-molecule-name">{item.name}</p>}
                  <dl className="database-molecule-meta">
                    {item.pubchemCid && <div><dt>{BB.t("PubChem CID")}</dt><dd>{item.pubchemCid}</dd></div>}
                    {item.uniprot && <div><dt>{BB.t("UniProt")}</dt><dd>{item.uniprot}</dd></div>}
                  </dl>
                  {item.artikelSlug && <Link to={"/wissen/" + item.artikelSlug} className="database-card-link">{BB.t("Zum Wissensartikel")} ↗</Link>}
                </article>
              ))}
            </div>
            {items.length < total && (
              <button type="button" className="btn ghost database-load-more" onClick={mehrLaden} disabled={loadingMore}>
                {loadingMore ? BB.t("Datenbank wird geladen …") : BB.t("Mehr laden")} · {BB.num(items.length)} / {BB.num(total)}
              </button>
            )}
          </>
        )}
      </div>
    </section>
  );
}

function DatenbankBereich({ id }) {
  if (id === "nahrungsmittel") return <DatenbankFood />;
  if (id === "evidenz") return <DatenbankEvidence />;
  if (id === "molekuele") return <DatenbankMolecules />;
  return <DatenbankExercises />;
}

function DatenbankPage({ params, legacy = false }) {
  const { user, ready } = useAuth();
  const requested = params && (params.get("bereich") || params.get("section"));
  const active = datenbankBereich(requested || (legacy ? "uebungen" : "uebungen"));
  const darf = datenbankDarf(user);
  const [overview, setOverview] = useState(null);
  const [error, setError] = useState("");
  const [overviewVersion, setOverviewVersion] = useState(0);

  useEffect(() => {
    if (!darf) return undefined;
    let alive = true;
    setOverview(null);
    setError("");
    BB.get("/datenbank")
      .then((data) => { if (alive) setOverview(data); })
      .catch((err) => { if (alive) setError(err.message || BB.t("Das hat nicht geklappt.")); });
    return () => { alive = false; };
  }, [darf, overviewVersion]);

  if (!ready) return <div className="wrap section"><Spinner /></div>;
  if (!darf) return <DatenbankLanding user={user} />;

  return (
    <div className="wrap section stack database-page">
      <header className="database-page-header">
        <div>
          <div className="eyebrow">{BB.t("Premium-Datenbank")} · {BB.t("Nur lesen")}</div>
          <h1>{BB.t("Datenbank")}</h1>
          <p className="lede">{BB.t("Die Datenbank enthält die kuratierten Kataloge der Bodybuilding Bible.")}</p>
        </div>
        {overview && <span className="database-total mono">{BB.num((overview.sections || []).reduce((sum, item) => sum + (item.count || 0), 0))} {BB.t("Einträge")}</span>}
      </header>

      <DatenbankNavigation active={active} overview={overview} />
      {error
        ? <DatenbankFehler error={error} onRetry={() => setOverviewVersion((n) => n + 1)} />
        : <DatenbankBereich id={active} />}
    </div>
  );
}

Object.assign(window, {
  DatenbankPage, DatenbankLanding, DatenbankNavigation,
});