// Archive list + detail pages
function ArchivePage({ onNav }) {
  const [filter, setFilter] = React.useState("all");
  const [speciesFilter, setSpeciesFilter] = React.useState("all");
  const [sort, setSort] = React.useState("recent");
  const data = window.DEER_DATA;
  const speciesTabs = [
    { k: "all", l: "全部物种", n: data.length },
    ...((window.SPECIES_CATALOG || []).map(s => ({
      k: s.key,
      l: s.label,
      n: data.filter(d => d.speciesKey === s.key).length,
    })).filter(s => s.n > 0)),
  ];

  const filtered = React.useMemo(() => {
    let arr = data;
    if (filter === "archived") arr = arr.filter(d => d.verified);
    if (filter === "candidate") arr = arr.filter(d => d.candidate);
    if (speciesFilter !== "all") arr = arr.filter(d => d.speciesKey === speciesFilter);
    if (sort === "recent") arr = [...arr].sort((a, b) => b.lastSeen.localeCompare(a.lastSeen));
    if (sort === "most") arr = [...arr].sort((a, b) => b.sightings - a.sightings);
    if (sort === "first") arr = [...arr].sort((a, b) => a.firstSeen.localeCompare(b.firstSeen));
    return arr;
  }, [filter, speciesFilter, sort]);

  return (
    <div className="page">
      <section style={{ padding: "64px 0 48px", borderBottom: "1px solid var(--rule)" }}>
        <div className="app">
          <div className="kicker mb-4"><span className="dot">●</span>ARCHIVE / 动物档案</div>
          <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 64, alignItems: "end" }}>
            <h1 className="serif" style={{ fontSize: 56, lineHeight: 1.1 }}>
              每一次相遇，<br />都可以进入<span style={{ color: "var(--accent)" }}>档案</span>。
            </h1>
            <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.7, maxWidth: 420 }}>
              档案由志愿者在多次观察与核对之后建立。梅花鹿可以做到个体级命名；狐狸、海豹、猛禽等高敏感或证据不足的记录，会先进入物种级或候选状态。
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: "32px 0", borderBottom: "1px solid var(--rule)", background: "var(--paper-2)" }}>
        <div className="app" style={{ display: "grid", gap: 18 }}>
          <div style={{ display: "flex", gap: 4 }}>
            {[
              { k: "all", l: "全部", n: data.length },
              { k: "archived", l: "已归档", n: data.filter(d => d.verified).length },
              { k: "candidate", l: "候选个体", n: data.filter(d => d.candidate).length },
            ].map(t => (
              <button key={t.k} onClick={() => setFilter(t.k)}
                className={"btn btn-sm " + (filter === t.k ? "" : "btn-ghost")}
                style={{ fontSize: 12 }}>
                {t.l} <span style={{ opacity: .55, marginLeft: 4 }}>{t.n}</span>
              </button>
            ))}
          </div>
          <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
            {speciesTabs.map(t => (
              <button key={t.k} onClick={() => setSpeciesFilter(t.k)}
                className={"btn btn-sm " + (speciesFilter === t.k ? "" : "btn-ghost")}
                style={{ fontSize: 12 }}>
                {t.l} <span style={{ opacity: .55, marginLeft: 4 }}>{t.n}</span>
              </button>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span className="mono" style={{ fontSize: 10.5, letterSpacing: ".14em", color: "var(--muted)", textTransform: "uppercase" }}>SORT</span>
            <select className="form-select" value={sort} onChange={e => setSort(e.target.value)} style={{ width: "auto", padding: "8px 12px", fontSize: 12 }}>
              <option value="recent">最近出现</option>
              <option value="most">观察次数</option>
              <option value="first">最早收录</option>
            </select>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="app">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
            {filtered.map(d => (
              <DeerCard key={d.id} deer={d} onClick={() => onNav("deer:" + d.id)} />
            ))}
          </div>
          <div style={{ marginTop: 48, padding: 28, border: "1px dashed var(--rule)", textAlign: "center", color: "var(--ink-soft)", fontSize: 13 }}>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: ".14em", color: "var(--muted)", textTransform: "uppercase", marginBottom: 10 }}>— 档案池以外 —</div>
            还有约 <strong style={{ color: "var(--ink)" }}>23</strong> 张近期上传的照片在 AI 初审与志愿者纠偏队列中，可能形成新个体档案、物种线索或合并到既有档案。
            <button className="btn btn-ghost btn-sm" style={{ marginLeft: 14 }} onClick={() => onNav("review")}>查看审核流程 →</button>
          </div>
        </div>
      </section>
    </div>
  );
}

function DeerDetailPage({ deerId, onNav }) {
  const deer = window.DEER_DATA.find(d => d.id === deerId) || window.DEER_DATA[0];
  const related = window.DEER_DATA
    .filter(d => d.id !== deer.id && d.verified)
    .sort((a, b) => {
      const sa = a.speciesKey === deer.speciesKey ? -1 : 0;
      const sb = b.speciesKey === deer.speciesKey ? -1 : 0;
      return sa - sb;
    })
    .slice(0, 3);
  const timeline = [
    { t: deer.lastSeen, e: "最近一次被观察", c: "— 志愿者：林间回声", loc: deer.region },
    { t: "2026-02-14", e: "特征补充（背脊深色条纹）", c: "— 志愿者：晨跑阿姨" },
    { t: "2025-11-03", e: "被并档：合并了一条重复上传", c: "— AI 初审 + 志愿者确认" },
    { t: "2025-07-22", e: "进入正式档案池", c: "— 累计观察 ≥ 8 次" },
    { t: deer.firstSeen, e: "首次被上传记录", c: "— 上传者：海雾摄影" },
  ];

  return (
    <div className="page">
      <section style={{ padding: "28px 0 0" }}>
        <div className="app">
          <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".12em" }}>
            <a onClick={() => onNav("home")} style={{ cursor: "pointer" }}>HOME</a>
            <span style={{ margin: "0 10px" }}>/</span>
            <a onClick={() => onNav("archive")} style={{ cursor: "pointer" }}>ARCHIVE</a>
            <span style={{ margin: "0 10px" }}>/</span>
            <span style={{ color: "var(--ink)" }}>{deer.id}</span>
          </div>
        </div>
      </section>

      <section style={{ padding: "32px 0 56px", borderBottom: "1px solid var(--rule)" }}>
        <div className="app">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, alignItems: "start" }}>
            <div>
              <Portrait palette={deer.palette} photo={deer.photo} photoTone={deer.photoTone} id={deer.id} label={deer.region} aspect="4 / 5" />
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginTop: 10 }}>
                {[0, 1, 2].map(i => {
                  const g = deer.gallery && deer.gallery[i];
                  return (
                    <div key={i} style={{ aspectRatio: "1 / 1", background: g ? `url(${g}) center/cover` : `linear-gradient(${[120, 200, 60][i]}deg, ${deer.palette[0]}, ${deer.palette[2]})`, border: "1px solid var(--rule)", position: "relative", filter: deer.photoTone || undefined }}>
                      <div className="mono" style={{ position: "absolute", bottom: 6, left: 8, fontSize: 9, color: "rgba(255,255,255,.85)", letterSpacing: ".1em", textShadow: "0 1px 2px rgba(0,0,0,.5)" }}>
                        IMG_{String(i + 2).padStart(3, "0")}
                      </div>
                    </div>
                  );
                })}
              </div>
              <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".08em", marginTop: 14, textAlign: "right" }}>
                共 {deer.sightings} 张图片 · {deer.contributors} 位贡献者
              </div>
              <div style={{ marginTop: 10, padding: "10px 12px", border: "1px solid var(--rule)", background: "var(--paper-2)", fontSize: 11.5, color: "var(--ink-soft)", lineHeight: 1.55 }}>
                <span className="mono" style={{ fontSize: 9.5, letterSpacing: ".12em", color: "var(--muted)" }}>PHOTO SOURCE</span>
                <br />
                {deer.photoLicense || "待补充授权"} · {deer.photoSourceNote || "来源待核"}
                {deer.photoSource && (
                  <>
                    {" · "}
                    <a href={deer.photoSource} target="_blank" rel="noreferrer" style={{ color: "var(--accent)" }}>来源页</a>
                  </>
                )}
              </div>
            </div>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10 }}>
                {deer.candidate ? (
                  <span className="chip candidate">● 候选个体 / Candidate</span>
                ) : (
                  <span className="chip ok">● 已归档 / Verified</span>
                )}
                <span className="chip accent">{deer.species || "野生动物"}</span>
                <span className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".14em" }}>
                  {deer.id} · 首次收录 {deer.firstSeen}
                </span>
              </div>
              <h1 className="serif" style={{ fontSize: 72, lineHeight: 1.05, color: "var(--ink)", fontWeight: 500 }}>
                {deer.name}
              </h1>
              <div className="mono" style={{ fontSize: 12, color: "var(--muted)", letterSpacing: ".16em", textTransform: "uppercase", marginTop: 4 }}>
                {deer.nameEn}
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 18, marginTop: 36 }}>
                <Field label="物种 · Species" value={`${deer.species || "待确认"} · ${deer.speciesEn || ""}`} />
                <Field label="性别 · Sex" value={deer.sex} />
                <Field label="推测年龄 · Est. Age" value={deer.estAge} />
                <Field label="活动区域 · Region" value={deer.region} />
                <Field label="最近出现 · Last seen" value={deer.lastSeen} />
                <Field label="照片状态 · Photo rights" value={deer.sourceStatus === "licensed-seed" ? "授权种子图，可上线展示" : "待补充授权"} />
              </div>

              <div style={{ marginTop: 32 }}>
                <div className="form-label">识别特征 · Identifying marks</div>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {deer.tags.map(t => <span key={t} className="chip accent">{t}</span>)}
                </div>
              </div>

              <div style={{ marginTop: 36, padding: "24px 26px", background: "var(--paper-2)", borderLeft: "3px solid var(--accent)" }}>
                <div className="form-label">故事 · Story</div>
                <p style={{ fontSize: 15, lineHeight: 1.75, color: "var(--ink)", fontFamily: "Noto Serif SC, serif" }}>
                  {deer.story}
                </p>
              </div>

              <div style={{ display: "flex", gap: 10, marginTop: 28 }}>
                <button className="btn btn-accent" onClick={() => onNav("upload")}>为 {deer.name} 上传一次观察</button>
                {deer.candidate && <button className="btn btn-ghost">提名一个名字 →</button>}
                <button className="btn btn-ghost">收藏这份档案</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="app">
          <div className="section-head">
            <div>
              <div className="kicker mb-4"><span className="dot">●</span>TIMELINE / 档案时间线</div>
              <h2>它的故事，<br />由很多人共同写成。</h2>
            </div>
            <div className="side">
              档案页上的每一条信息，都由社群贡献者累积：上传者、志愿审核员、故事补充者、以及 AI 初审系统共同维护。
            </div>
          </div>
          <div style={{ position: "relative" }}>
            {timeline.map((e, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "140px 20px 1fr", gap: 24, padding: "20px 0", borderTop: i === 0 ? "1px solid var(--rule)" : "1px solid var(--rule-soft)" }}>
                <div className="mono" style={{ fontSize: 11.5, color: "var(--ink)", letterSpacing: ".1em" }}>{e.t}</div>
                <div style={{ position: "relative" }}>
                  <div style={{ width: 8, height: 8, borderRadius: 99, background: "var(--accent)", marginTop: 6 }}></div>
                  {i < timeline.length - 1 && <div style={{ position: "absolute", left: 3, top: 18, bottom: -24, width: 2, background: "var(--rule)" }}></div>}
                </div>
                <div>
                  <div className="serif" style={{ fontSize: 16, color: "var(--ink)" }}>{e.e}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{e.c}{e.loc ? ` · ${e.loc}` : ""}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="app">
          <div className="section-head">
            <div>
              <div className="kicker mb-4"><span className="dot">●</span>RELATED / 相邻档案</div>
              <h2>它不是<br />孤立存在。</h2>
            </div>
            <div className="side">
              共享物种、活动区域或观察季节的其他档案。你可能在同一条步道、海岸或迁徙季中遇见它们。
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            {related.map(d => <DeerCard key={d.id} deer={d} onClick={() => onNav("deer:" + d.id)} />)}
          </div>
        </div>
      </section>
    </div>
  );
}

function Field({ label, value }) {
  return (
    <div>
      <div className="form-label">{label}</div>
      <div style={{ fontSize: 15, color: "var(--ink)" }}>{value}</div>
    </div>
  );
}

Object.assign(window, { ArchivePage, DeerDetailPage, Field });