// Archive — full sorted grid of every published case, with a category filter bar.
// Data comes from window.CASES (loaded async by data.jsx).

const ArchiveIntro = ({ total, unsolved }) => (
  <section style={{
    padding: "36px 48px 16px",
    display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40,
    alignItems: "end", borderBottom: "1px dashed #2a2620",
  }}>
    <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: 3, color: "#6a6257", marginBottom: 8 }}>
        ▸ SECTION / 档案库
      </div>
      <h2 style={{
        fontFamily: "'Noto Serif SC',serif", fontSize: 44, fontWeight: 500,
        color: "#f4ecd8", letterSpacing: 2, lineHeight: 1.1, marginBottom: 10,
      }}>全部档案</h2>
      <div className="type" style={{ fontSize: 14, color: "#a89b78", fontStyle: "italic" }}>
        Every file on record — sorted by when it was filed.
      </div>
    </div>
    <div className="mono" style={{
      fontSize: 12, letterSpacing: 1, color: "#c9bda0", lineHeight: 1.9,
      borderLeft: "2px solid #8b0000", paddingLeft: 18,
    }}>
      总计 · <span style={{ color: "#f4ecd8" }}>{total}</span> 卷<br/>
      其中未结 · <span style={{ color: "#a81515" }}>{unsolved}</span> 卷<br/>
      最新更新 · <span style={{ color: "#f4ecd8" }}>{new Date().toISOString().slice(0,10)}</span>
    </div>
  </section>
);

const ArchiveFilter = ({ active, onChange }) => (
  <div className="da-filter-bar" style={{
    padding: "18px 48px",
    display: "flex", gap: 0, flexWrap: "wrap",
    borderBottom: "1px dashed #2a2620",
  }}>
    {CATEGORIES.map(c => {
      const on = active === c.k;
      return (
        <button key={c.k} onClick={() => onChange(c.k)} style={{
          padding: "8px 16px",
          marginRight: -1, marginBottom: -1,
          border: "1px solid #2a2620",
          background: on ? "#8b0000" : "transparent",
          color: on ? "#f4ecd8" : "#c9bda0",
          display: "flex", flexDirection: "column", alignItems: "flex-start",
          minWidth: 130,
        }}>
          <span style={{ fontSize: 15, letterSpacing: 2 }}>{c.zh}</span>
          <span className="mono" style={{ fontSize: 10, letterSpacing: 1.5,
            color: on ? "rgba(244,236,216,0.75)" : "#6a6257" }}>
            {c.en} · {c.count}
          </span>
        </button>
      );
    })}
  </div>
);

const App = () => {
  useDataReady();
  const [active, setActive] = React.useState(() => {
    const p = new URLSearchParams(location.search);
    return p.get("cat") || "all";
  });
  if (!window.DATA_READY) {
    return (<>
      <ClassifiedBar /><SiteHeader /><SiteNav current="ARCHIVE" />
      <LoadingArchive />
      <SiteFooter />
    </>);
  }
  const cases = active === "all" ? CASES.slice() : CASES.filter(c => c.cat === active);
  cases.sort((a, b) => (b.published_ts || 0) - (a.published_ts || 0));
  return (
    <>
      <ClassifiedBar /><SiteHeader /><SiteNav current="ARCHIVE" />
      <ArchiveIntro total={SITE.total_files} unsolved={SITE.total_unsolved} />
      <ArchiveFilter active={active} onChange={setActive} />
      <section style={{ padding: "40px 48px 60px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 20 }}>
          <h3 style={{ fontSize: 18, fontWeight: 500, letterSpacing: 3, color: "#e8e2d0" }}>
            {active === "all" ? "全部" : active} · <span className="mono" style={{ fontSize: 12, color: "#6a6257", letterSpacing: 2, marginLeft: 6 }}>{cases.length} FILES</span>
          </h3>
          <div className="mono" style={{ fontSize: 11, color: "#6a6257", letterSpacing: 1.5 }}>
            排序 ▾ 最新归档
          </div>
        </div>
        {cases.length === 0 ? (
          <div style={{ color: "#6a6257", padding: 48, textAlign: "center", fontStyle: "italic" }}>
            该分类下暂无案卷。
          </div>
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "48px 28px", rowGap: 56 }}>
            {cases.map((item, i) => (
              <CaseCard key={item.id} item={item} rot={((i%3)-1)*0.1} />
            ))}
          </div>
        )}
      </section>
      <SiteFooter />
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);