// Archive — dense, type-driven, filter by tag + tier + search; no thumbnails.
const { useState: useStateArc, useMemo: useMemoArc } = React;

function ArchivePage({ navigate, initialTag }) {
  const { ESSAYS, TAGS } = window.HOAGS_DATA;
  const [tag, setTag] = useStateArc(initialTag && TAGS.includes(initialTag) ? initialTag : "All");
  const [tier, setTier] = useStateArc("All");
  const [q, setQ] = useStateArc("");
  const [sort, setSort] = useStateArc("newest");

  const filtered = useMemoArc(() => {
    const needle = q.trim().toLowerCase();
    let xs = ESSAYS.filter((e) => {
      if (tag !== "All" && e.tag !== tag) return false;
      if (tier !== "All" && e.tier !== tier) return false;
      if (needle && !e.title.toLowerCase().includes(needle) && !(e.dek || "").toLowerCase().includes(needle)) return false;
      return true;
    });
    if (sort === "longest") xs = [...xs].sort((a, b) => b.minutes - a.minutes);
    else xs = [...xs].sort((a, b) => b.iso.localeCompare(a.iso));
    return xs;
  }, [tag, tier, q, sort]);

  // Group by year
  const groups = useMemoArc(() => {
    const m = {};
    for (const e of filtered) {
      const y = e.iso.slice(0, 4);
      if (!m[y]) m[y] = [];
      m[y].push(e);
    }
    return Object.entries(m).sort(([a], [b]) => b.localeCompare(a));
  }, [filtered]);

  return (
    <div className="th-archive">
      <header className="th-archive-head">
        <span className="th-eyebrow">Archive · {ESSAYS.length} pieces</span>
        <h1 className="th-archive-title">A writer's archive.</h1>
        <p className="th-archive-sub">
          Everything published — essays, notes, the occasional book write-up.
          Filter by topic, tier, or search the back catalogue.
        </p>
      </header>

      <div className="th-archive-controls">
        <div className="th-control-block">
          <span className="th-eyebrow">Topic</span>
          <div className="th-chiprow">
            {TAGS.map((t) => (
              <button
                key={t}
                className={"th-tagchip" + (tag === t ? " is-on" : "")}
                onClick={() => setTag(t)}
              >
                {t}
              </button>
            ))}
          </div>
        </div>

        <div className="th-control-block">
          <span className="th-eyebrow">Tier</span>
          <div className="th-chiprow">
            {[
              { id: "All", label: "All" },
              { id: "free", label: "Feed" },
              { id: "loop", label: "Loop" },
              { id: "inner", label: "Inner Loop" },
            ].map((t) => (
              <button
                key={t.id}
                className={"th-tagchip" + (tier === t.id ? " is-on" : "")}
                onClick={() => setTier(t.id)}
              >
                {t.label}
              </button>
            ))}
          </div>
        </div>

        <div className="th-control-block th-control-search">
          <span className="th-eyebrow">Search</span>
          <input
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Title or one-liner…"
            className="th-archive-search"
          />
        </div>

        <div className="th-control-block">
          <span className="th-eyebrow">Sort</span>
          <div className="th-chiprow">
            {[
              { id: "newest", label: "Newest" },
              { id: "longest", label: "Longest" },
            ].map((s) => (
              <button
                key={s.id}
                className={"th-tagchip" + (sort === s.id ? " is-on" : "")}
                onClick={() => setSort(s.id)}
              >
                {s.label}
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className="th-archive-results">
        {groups.length === 0 ? (
          <div className="th-archive-empty">No essays match those filters.</div>
        ) : (
          groups.map(([year, items]) => (
            <div key={year} className="th-archive-year">
              <div className="th-archive-year-head">
                <span className="th-archive-year-num">{year}</span>
                <span className="th-archive-year-rule" />
                <span className="th-archive-year-count">{items.length} {items.length === 1 ? "piece" : "pieces"}</span>
              </div>
              {items.map((e) => (
                <a
                  key={e.id}
                  href="#"
                  className="th-arc-row"
                  onClick={(ev) => { ev.preventDefault(); navigate("essay", { id: e.id }); }}
                >
                  <span className="th-arc-date">{e.date.split(",")[0]}</span>
                  <span className="th-arc-tag">{e.tag}</span>
                  <span className="th-arc-title-col">
                    <span className="th-arc-title">{e.title}</span>
                    <span className="th-arc-dek">{e.dek}</span>
                  </span>
                  <span className={"th-tier-pill th-tier-" + e.tier}>
                    {e.tier === "free" ? "Feed" : e.tier === "loop" ? "Loop" : "Inner"}
                  </span>
                  <span className="th-arc-min">{e.minutes}m</span>
                </a>
              ))}
            </div>
          ))
        )}
      </div>
    </div>
  );
}

window.ArchivePage = ArchivePage;