/* ==========================================================================
   BROWSE: /wissen (curated knowledge base) and /forum (community feed).
   ========================================================================== */

const PAGE = 24;

/** Shared fetching + pagination for both views. */
function usePosts(filters) {
  const [state, setState] = useState({ items: [], total: 0, loading: true });
  const [offset, setOffset] = useState(0);
  const key = JSON.stringify(filters);

  useEffect(() => { setOffset(0); }, [key]);

  useEffect(() => {
    let alive = true;
    setState((s) => ({ ...s, loading: true }));
    BB.get("/posts" + BB.qs(Object.assign({}, filters, { limit: PAGE, offset })))
      .then((d) => {
        if (!alive) return;
        setState((s) => ({
          items: offset === 0 ? d.items : s.items.concat(d.items),
          total: d.total,
          loading: false,
        }));
      })
      .catch(() => { if (alive) setState({ items: [], total: 0, loading: false }); });
    return () => { alive = false; };
  }, [key, offset]);

  const more = state.items.length < state.total;
  return { ...state, more, loadMore: () => setOffset((o) => o + PAGE) };
}

/* --- category tree ------------------------------------------------------- */

function TreeNode({ cat, cats, active, onPick, depth }) {
  const kids = BB.children(cats, cat.id);
  const inPath = useMemo(
    () => active === cat.id || BB.ancestors(cats, active).some((a) => a.id === cat.id),
    [active, cat.id, cats]
  );
  const [open, setOpen] = useState(inPath);
  useEffect(() => { if (inPath) setOpen(true); }, [inPath]);

  return (
    <div>
      <button
        className={"tree-item" + (active === cat.id ? " on" : "") + (depth === 0 ? " tree-top" : "")}
        onClick={() => { onPick(cat.id); if (kids.length) setOpen(true); }}
      >
        {kids.length > 0 ? (
          <span
            className={"caret" + (open ? " open" : "")}
            onClick={(e) => { e.stopPropagation(); setOpen((o) => !o); }}
          >▶</span>
        ) : (
          <span className="caret" />
        )}
        <span className="grow" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{cat.label}</span>
        {cat.count > 0 && <span className="n">{cat.count}</span>}
      </button>
      {open && kids.length > 0 && (
        <div className="tree-kids">
          {kids.map((k) => (
            <TreeNode key={k.id} cat={k} cats={cats} active={active} onPick={onPick} depth={depth + 1} />
          ))}
        </div>
      )}
    </div>
  );
}

function CategoryTree({ cats, active, onPick }) {
  return (
    <nav className="tree">
      <button className={"tree-item tree-top" + (!active ? " on" : "")} onClick={() => onPick("")}>
        <span className="caret" />
        <span className="grow">{BB.t("Alle")}</span>
      </button>
      {BB.children(cats, null).filter((c) => !c.forumOnly).map((c) => (
        <TreeNode key={c.id} cat={c} cats={cats} active={active} onPick={onPick} depth={0} />
      ))}
    </nav>
  );
}

/* --- /wissen ------------------------------------------------------------- */

function Wissen({ categories, params }) {
  const { go } = useRouter();
  const { user } = useAuth();
  const cat = params.get("cat") || "";
  const q = params.get("q") || "";
  const onlyUnread = params.get("unread") === "1";
  const [draft, setDraft] = useState(q);

  useEffect(() => { setDraft(q); }, [q]);

  const setParam = useCallback((patch, opts) => {
    const next = new URLSearchParams(params);
    Object.entries(patch).forEach(([k, v]) => (v ? next.set(k, v) : next.delete(k)));
    const s = next.toString();
    go("/wissen/alle" + (s ? "?" + s : ""), opts);
  }, [go, params]);

  // Die Liste folgt dem Tippen mit kurzer Pause, damit nicht jeder einzelne
  // Tastendruck einen Request ausloest. Replace haelt die Browser-Historie bei
  // einem Suchbegriff sauber, waehrend Kategoriewechsel weiter zurueckgehen.
  useEffect(() => {
    const wert = draft.trim();
    if (wert === q) return undefined;
    const timer = setTimeout(() => {
      setParam({ q: wert }, { keepScroll: true, replace: true });
    }, 250);
    return () => clearTimeout(timer);
  }, [draft, q, setParam]);

  const { items, total, loading, more, loadMore } = usePosts({
    collection: "wiki", category: cat, q, sort: q ? "new" : "title",
    unread: onlyUnread ? 1 : "",
  });

  const current = BB.catById(categories, cat);
  const trail = cat ? BB.ancestors(categories, cat) : [];
  const forumTarget = current && current.forumOnly
    ? "/forum?kind=recipe" + (cat !== "rezepte" ? "&category=" + encodeURIComponent(cat) : "")
    : "";

  useEffect(() => {
    if (forumTarget) go(forumTarget);
  }, [forumTarget, go]);

  // progress for the selected branch, or for the whole knowledge base
  const progress = useMemo(() => {
    const readableTotal = (entry) => BB.isAdmin(user)
      ? (entry.count || 0)
      : (entry.readyCount !== undefined
        ? entry.readyCount
        : (entry.publishedCount !== undefined ? entry.publishedCount : (entry.count || 0)));
    if (current) return { read: current.readCount || 0, total: readableTotal(current) };
    return BB.children(categories, null).filter((c) => !c.forumOnly).reduce(
      (acc, c) => ({ read: acc.read + (c.readCount || 0), total: acc.total + readableTotal(c) }),
      { read: 0, total: 0 }
    );
  }, [categories, current, user]);

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

  return (
    <div className="wrap section" style={{ paddingTop: "3rem" }}>
      <header className="section-head" style={{ marginBottom: "2.5rem" }}>
        <div className="eyebrow">
          <Link to="/wissen">{BB.t("Wissensbasis")}</Link>
          {trail.map((a) => (
            <React.Fragment key={a.id}>
              <span style={{ color: "var(--fg-4)" }}>/</span>
              <Link to={"/wissen?cat=" + a.id}>{a.label}</Link>
            </React.Fragment>
          ))}
        </div>
        <h1>{current ? current.label : BB.t("Alles Wissen")}</h1>
        <p className="lead">
          {current && current.blurb
            ? current.blurb
            : BB.t("Redaktionell gepflegte Einträge: Mechanismus, Kennzahlen, Nebenwirkungen und Quellen.")}
        </p>
      </header>

      <div className="browse">
        <aside>
          <CategoryTree cats={categories} active={cat} onPick={(id) => setParam({ cat: id })} />
        </aside>

        <div>
          {user && progress.total > 0 && (
            <div className="panel" style={{ marginBottom: "1.5rem" }}>
              <ReadProgress
                read={progress.read}
                total={progress.total}
                label={current ? current.label : BB.t("Gesamte Wissensbasis")}
              />
            </div>
          )}

          <div className="spread" style={{ marginBottom: "1.5rem", flexWrap: "wrap", gap: "1rem" }}>
            <form
              className="hdr-search"
              style={{ display: "block", maxWidth: 340, margin: 0, flex: "1 1 240px" }}
              onSubmit={(e) => {
                e.preventDefault();
                setParam({ q: draft.trim() }, { keepScroll: true, replace: true });
              }}
            >
              <span className="ico">⌕</span>
              <input
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                aria-busy={loading}
                placeholder={BB.t("Stoff, Alias oder Inhalt …")}
                aria-label={BB.t("Wissensbasis durchsuchen")}
              />
            </form>
            <div className="row" style={{ gap: "1rem", flexWrap: "wrap" }}>
              {user && (
                <Segmented
                  value={onlyUnread ? "unread" : "all"}
                  onChange={(v) => setParam({ unread: v === "unread" ? "1" : "" })}
                  options={[{ value: "all", label: BB.t("Alle") }, { value: "unread", label: BB.t("Ungelesen") }]}
                />
              )}
              <span className="label">{BB.num(total)} {BB.t("Einträge")}</span>
            </div>
          </div>

          {loading && items.length === 0 ? (
            <SkeletonCards n={4} />
          ) : items.length === 0 ? (
            <Empty mark="⌕" title={BB.t("Nichts gefunden")}>
              {BB.t("Für diese Kombination aus Kategorie und Suche gibt es keine Einträge.")}
            </Empty>
          ) : (
            <div style={{ borderTop: "1px solid var(--line)" }}>
              {items.map((p) => <PostRow key={p.id} post={p} />)}
            </div>
          )}

          {more && (
            <div style={{ textAlign: "center", marginTop: "2.5rem" }}>
              <button className="btn ghost" onClick={loadMore} disabled={loading}>
                {loading ? BB.t("Lädt …") : BB.t("Mehr laden")}
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* --- /forum -------------------------------------------------------------- */

const SORTS = [
  { value: "new", label: "Neu" },
  { value: "top", label: "Top" },
  { value: "discussed", label: "Diskutiert" },
];

function Forum({ params }) {
  const { go } = useRouter();
  const { user } = useAuth();
  const kind = params.get("kind") || "";
  const category = params.get("category") || "";
  const tag = params.get("tag") || "";
  const sort = params.get("sort") || "new";
  const q = params.get("q") || "";
  const [draft, setDraft] = useState(q);

  useEffect(() => { setDraft(q); }, [q]);

  const setParam = (patch) => {
    const next = new URLSearchParams(params);
    Object.entries(patch).forEach(([k, v]) => (v ? next.set(k, v) : next.delete(k)));
    const s = next.toString();
    go("/forum" + (s ? "?" + s : ""));
  };

  const { items, total, loading, more, loadMore } = usePosts({
    collection: "forum", kind, category, tag, sort, q,
  });

  return (
    <div className="wrap section" style={{ paddingTop: "3rem" }}>
      <header className="section-head" style={{ marginBottom: "2.5rem" }}>
        <div className="eyebrow">{BB.t("Forum")}</div>
        <div className="spread" style={{ alignItems: "flex-end", flexWrap: "wrap" }}>
          <h1>{BB.t("Was die Community teilt")}</h1>
          <Link to="/neu" className="btn primary">+ {BB.t("Beitrag schreiben")}</Link>
        </div>
        <p className="lead">
          {BB.t("Artikel, Erfahrungsberichte, Stack-Protokolle, Rezepte und Transformationen aus Community und Redaktion.")}
        </p>
      </header>

      <div className="spread" style={{ flexWrap: "wrap", gap: "1rem", marginBottom: "2rem" }}>
        <Segmented
          value={kind}
          onChange={(v) => setParam({ kind: v })}
          options={[{ value: "", label: "Alle" }].concat(
            BB.USER_KINDS.map((k) => ({ value: k, label: BB.KINDS[k].label }))
          )}
        />
        <div className="row" style={{ gap: "1rem", flexWrap: "wrap" }}>
          <Segmented value={sort} onChange={(v) => setParam({ sort: v })} options={SORTS} />
          <form
            className="hdr-search"
            style={{ display: "block", maxWidth: 260, margin: 0 }}
            onSubmit={(e) => { e.preventDefault(); setParam({ q: draft }); }}
          >
            <span className="ico">⌕</span>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} placeholder={BB.t("Suchen …")} aria-label={BB.t("Forum durchsuchen")} />
          </form>
        </div>
      </div>

      {tag && (
        <div className="row" style={{ gap: 8, marginBottom: "1.5rem" }}>
          <span className="label">{BB.t("Gefiltert nach")}</span>
          <button className="pill tag on" onClick={() => setParam({ tag: "" })}>{BB.t(tag)} ✕</button>
        </div>
      )}

      {loading && items.length === 0 ? (
        <SkeletonCards />
      ) : items.length === 0 ? (
        <Empty
          mark="✎"
          title={BB.t("Noch keine Beiträge")}
          action={
            user
              ? <Link to="/neu" className="btn primary" style={{ marginTop: "0.5rem" }}>{BB.t("Ersten Beitrag schreiben")}</Link>
              : <Link to="/registrieren" className="btn primary" style={{ marginTop: "0.5rem" }}>{BB.t("Profil erstellen")}</Link>
          }
        >
          {BB.t("Hier ist noch nichts. Mit deinem Beitrag fängt es an.")}
        </Empty>
      ) : (
        <>
          <div className="label" style={{ marginBottom: "1rem" }}>{BB.num(total)} {BB.t("Beiträge")}</div>
          <div className="grid-posts">
            {items.map((p) => <PostCard key={p.id} post={p} />)}
          </div>
        </>
      )}

      {more && (
        <div style={{ textAlign: "center", marginTop: "3rem" }}>
          <button className="btn ghost" onClick={loadMore} disabled={loading}>
            {loading ? "Lädt …" : "Mehr laden"}
          </button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Wissen, Forum, CategoryTree, usePosts });