// STYLE 1: DOSSIER — 经典档案袋 · 深色 + 牛皮纸 + 红印章
// 首页布局：档案墙，网格卡片 + 分类筛选

const dossierStyles = {
  page: {
    background: "#0a0a0a",
    color: "#e8e2d0",
    minHeight: "100vh",
    fontFamily: "'EB Garamond','Noto Serif SC',serif",
  },
};

const DossierHeader = () => (
  <header style={{
    borderBottom: "1px solid #2a2620",
    padding: "22px 48px 18px",
    display: "grid",
    gridTemplateColumns: "auto 1fr auto",
    gap: 40,
    alignItems: "center",
    position: "relative",
  }}>
    {/* classification bar */}
    <div style={{
      position: "absolute", top: 0, left: 0, right: 0,
      background: "#8b0000",
      color: "#f4ecd8",
      fontFamily: "'JetBrains Mono',monospace",
      fontSize: 10,
      letterSpacing: 4,
      padding: "3px 48px",
      display: "flex", justifyContent: "space-between",
    }}>
      <span>// CLASSIFIED · 仅限内部阅览 · DO NOT DISTRIBUTE //</span>
      <span>COPY 001 / 001</span>
    </div>

    <div style={{ paddingTop: 14 }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: 3, color: "#a89b78", marginBottom: 6 }}>
        {SITE.volume} · {SITE.issue}
      </div>
      <div style={{ fontFamily: "'Special Elite',monospace", fontSize: 11, letterSpacing: 2, color: "#8b0000" }}>
        {SITE.since} · 归档中
      </div>
    </div>

    <div style={{ textAlign: "center", paddingTop: 14 }}>
      <h1 style={{
        fontFamily: "'EB Garamond','Noto Serif SC',serif",
        fontSize: 42,
        fontWeight: 500,
        letterSpacing: 8,
        lineHeight: 1,
        marginBottom: 8,
      }}>
        <span style={{ color: "#e8e2d0" }}>暗 黑 收 集 站</span>
      </h1>
      <div className="mono" style={{ fontSize: 11, letterSpacing: 6, color: "#a89b78" }}>
        — AI DARK FILE —
      </div>
      <div style={{ marginTop: 8, fontStyle: "italic", fontSize: 14, color: "#c9bda0" }}>
        {SITE.tagline_zh}<span style={{ margin: "0 10px", color: "#4a443a" }}>/</span><span className="mono" style={{ fontStyle: "normal", fontSize: 11, letterSpacing: 1 }}>{SITE.tagline_en}</span>
      </div>
    </div>

    <div style={{ paddingTop: 14, textAlign: "right" }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: 2, color: "#a89b78", marginBottom: 4 }}>
        档案编号 / FILE #
      </div>
      <div className="type" style={{ fontSize: 18, color: "#8b0000", letterSpacing: 2 }}>
        DA-∅∅∅∅-M
      </div>
    </div>
  </header>
);

const DossierNav = () => {
  const items = [
    ["首页", "HOME", "index.html"],
    ["分类", "CATEGORY", "category.html"],
    ["档案库", "ARCHIVE", "archive.html"],
    ["地图", "MAP", "map.html"],
    ["标签", "TAG", "tag.html"],
    ["关于", "ABOUT", "about.html"],
    ["检索", "SEARCH", "search.html"],
  ];
  return (
    <nav style={{
      borderBottom: "1px solid #2a2620",
      padding: "10px 48px",
      display: "flex",
      gap: 32,
      alignItems: "center",
      fontSize: 13,
    }}>
      {items.map(([zh, en, href], i) => (
        <a key={en} href={href} style={{
          display: "flex", alignItems: "baseline", gap: 6,
          paddingBottom: 2,
          borderBottom: i === 0 ? "1px solid #8b0000" : "1px solid transparent",
        }}>
          <span style={{ color: i === 0 ? "#e8e2d0" : "#a89b78" }}>{zh}</span>
          <span className="mono" style={{ fontSize: 9, letterSpacing: 1.5, color: "#6a6257" }}>{en}</span>
        </a>
      ))}
      <div style={{ flex: 1 }} />
      <div className="mono" style={{ fontSize: 10, color: "#6a6257", letterSpacing: 2 }}>
        总计 {SITE.total_files} 卷 · 未结 {SITE.total_unsolved}
      </div>
      <a href="search.html" style={{ width: 200, display: "flex", alignItems: "center", gap: 8,
        border: "1px solid #2a2620", padding: "4px 10px", background: "#120f0c",
      }}>
        <Crosshair size={11} color="#a89b78" />
        <span className="mono" style={{ fontSize: 11, color: "#6a6257", letterSpacing: 1 }}>搜索案卷 / search...</span>
      </a>
    </nav>
  );
};

const DossierFilter = ({ active, onChange }) => (
  <div style={{
    padding: "20px 48px 0",
    display: "flex",
    gap: 0,
    flexWrap: "wrap",
    borderBottom: "1px dashed #2a2620",
    paddingBottom: 18,
  }}>
    <div style={{ width: "100%", fontSize: 11, letterSpacing: 3,
      color: "#6a6257", fontFamily: "'JetBrains Mono',monospace", marginBottom: 12,
    }}>
      ▸ 按案件类型筛选 / FILTER BY CLASSIFICATION
    </div>
    {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,
          transition: "all .15s",
        }}>
          <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 DossierCard = ({ item, featured = false, rot = 0 }) => {
  const statusColor = {
    "未结": "#a81515", "进行中": "#c49a3a", "已破": "#5a7a4a",
    "已归档": "#a89b78", "悬疑": "#a81515", "封闭": "#6a6257",
    "民间": "#8a6f49",
  }[item.status] || "#a89b78";

  return (
    <a href={`article.html?id=${item.id}`} style={{ display: "block" }}>
    <article style={{
      background: "#14110f",
      border: "1px solid #2a2620",
      position: "relative",
      transform: `rotate(${rot}deg)`,
      boxShadow: "0 2px 0 rgba(0,0,0,0.5), 0 20px 40px -20px rgba(0,0,0,0.8)",
    }}>
      {/* folder tab */}
      <div style={{
        position: "absolute", top: -22, left: 20,
        background: "#14110f",
        border: "1px solid #2a2620",
        borderBottom: "none",
        padding: "4px 14px 3px",
        fontSize: 10,
        letterSpacing: 2,
        color: "#a89b78",
        fontFamily: "'JetBrains Mono',monospace",
      }}>
        ▸ {item.cat_en} / {item.cat}
      </div>

      {/* red stamp at top right */}
      <div style={{ position: "absolute", top: 12, right: 12, zIndex: 2 }}>
        <Stamp text={item.status_en} rot={-8} size={0.9} />
      </div>

      <EvidencePlaceholder caseId={item.id} seed={parseInt(item.id.replace(/\D/g,""))%97}
        label={item.cat_en} variant={featured ? "kraft" : (item.cat === "UFO" ? "dark" : "kraft")} />

      <div style={{ padding: "18px 20px 20px" }}>
        <div style={{ display: "flex", justifyContent: "space-between",
          fontFamily: "'JetBrains Mono',monospace", fontSize: 10, letterSpacing: 1.5,
          color: "#6a6257", marginBottom: 10,
        }}>
          <span>{item.id}</span>
          <span>{item.date}</span>
        </div>

        <h3 style={{
          fontFamily: "'Noto Serif SC','EB Garamond',serif",
          fontSize: featured ? 24 : 19,
          fontWeight: 500,
          lineHeight: 1.3,
          color: "#f4ecd8",
          marginBottom: 8,
          letterSpacing: 0.5,
        }}>
          {item.title}
        </h3>
        <div style={{ fontFamily: "'Special Elite',monospace", fontSize: 11,
          color: "#8a6f49", letterSpacing: 1, marginBottom: 14,
        }}>
          {item.title_en}
        </div>

        <p style={{ fontSize: 14, lineHeight: 1.65, color: "#c9bda0",
          marginBottom: 16, textWrap: "pretty",
        }}>
          {item.excerpt}
        </p>

        <div style={{
          borderTop: "1px dashed #2a2620",
          paddingTop: 12,
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: "8px 16px",
          fontSize: 11,
          fontFamily: "'JetBrains Mono',monospace",
          letterSpacing: 1,
        }}>
          <MetaRow label="坐标" value={item.loc} />
          <MetaRow label="状态" value={item.status} color={statusColor} />
          <MetaRow label="目击" value={typeof item.witnesses === "number" ? `${item.witnesses} 人` : item.witnesses} />
          <div style={{ display: "flex", gap: 6 }}>
            <span style={{ color: "#6a6257" }}>可信度</span>
            <Credibility n={typeof item.credibility === "number" ? item.credibility : 1} color="#a81515" />
          </div>
        </div>

        <div style={{ marginTop: 14, display: "flex", gap: 6, flexWrap: "wrap" }}>
          {item.tags.map(t => (
            <span key={t} className="mono" style={{
              fontSize: 10, letterSpacing: 1,
              padding: "2px 8px",
              border: "1px solid #2a2620",
              color: "#a89b78",
            }}>#{t}</span>
          ))}
          <div style={{ flex: 1 }} />
          <span className="mono" style={{
            fontSize: 11, letterSpacing: 2, color: "#a81515",
            borderBottom: "1px solid #a81515", paddingBottom: 1,
          }}>阅卷 → OPEN FILE</span>
        </div>
      </div>
    </article>
    </a>
  );
};

const MetaRow = ({ label, value, color }) => (
  <div style={{ display: "flex", gap: 6 }}>
    <span style={{ color: "#6a6257" }}>{label}</span>
    <span style={{ color: color || "#c9bda0", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{value}</span>
  </div>
);

const DossierFooter = () => (
  <footer style={{
    borderTop: "1px solid #2a2620",
    marginTop: 60,
    padding: "40px 48px 28px",
    display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 40,
    fontSize: 13,
  }}>
    <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: 3, color: "#6a6257", marginBottom: 10 }}>// 本站声明 / DISCLAIMER</div>
      <p style={{ lineHeight: 1.7, color: "#a89b78", fontStyle: "italic" }}>
        本站收录内容皆为公开资料之再整理与个人记录。所有观点不代表司法结论。
        <br/><span className="mono" style={{ fontStyle: "normal", fontSize: 11, color: "#6a6257" }}>
        All records are restatements of public material. Nothing herein constitutes a legal finding.</span>
      </p>
    </div>
    <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: 3, color: "#6a6257", marginBottom: 10 }}>// 归档索引 / INDEX</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 20px", color: "#c9bda0" }}>
        {[["按年份","archive.html"],["按地区","archive.html"],["按类型","category.html"],["按状态","archive.html"],["标签云","tag.html"],["RSS 订阅","about.html"]].map(([x,h]) => <a key={x} href={h}>· {x}</a>)}
      </div>
    </div>
    <div style={{ textAlign: "right" }}>
      <Stamp text="ARCHIVED" rot={3} />
      <div className="mono" style={{ fontSize: 10, letterSpacing: 2, color: "#6a6257", marginTop: 20 }}>
        暗黑收集站 · EST. 2017<br/>
        © AI DARK FILE · ALL FILES RESERVED
      </div>
    </div>
  </footer>
);

const DossierView = () => {
  const [active, setActive] = React.useState("all");
  const filtered = active === "all" ? CASES : CASES.filter(c => c.cat === active);
  const [hero, ...rest] = filtered;

  return (
    <div style={dossierStyles.page}>
      <DossierHeader />
      <DossierNav />
      <DossierFilter active={active} onChange={setActive} />

      <section style={{ padding: "32px 48px 0" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
          <h2 style={{ fontSize: 20, fontWeight: 500, letterSpacing: 4, color: "#e8e2d0" }}>
            本期重点 <span className="mono" style={{ fontSize: 12, color: "#6a6257", letterSpacing: 2, marginLeft: 10 }}>/ FEATURED FILE</span>
          </h2>
          <div className="mono" style={{ fontSize: 11, color: "#6a6257", letterSpacing: 1.5 }}>
            最后更新 · LAST UPDATED · 2026.04.18 03:17 UTC
          </div>
        </div>
      </section>

      {/* featured full-width dossier */}
      {hero && (
        <section style={{ padding: "0 48px" }}>
          <FeaturedDossier item={hero} />
        </section>
      )}

      <section style={{ padding: "40px 48px 24px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
          <h2 style={{ fontSize: 20, fontWeight: 500, letterSpacing: 4, color: "#e8e2d0" }}>
            全部案卷 <span className="mono" style={{ fontSize: 12, color: "#6a6257", letterSpacing: 2, marginLeft: 10 }}>/ CASE FILES · {filtered.length}</span>
          </h2>
          <div className="mono" style={{ fontSize: 11, color: "#6a6257" }}>
            排序 ▾ 最新归档
          </div>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: "48px 28px",
          rowGap: 56,
        }}>
          {rest.map((item, i) => (
            <DossierCard key={item.id} item={item} rot={((i%3)-1)*0.15} />
          ))}
        </div>
      </section>

      <DossierFooter />
    </div>
  );
};

const FeaturedDossier = ({ item }) => (
  <div style={{
    display: "grid",
    gridTemplateColumns: "1.1fr 1fr",
    gap: 40,
    background: "#14110f",
    border: "1px solid #2a2620",
    position: "relative",
    marginBottom: 12,
  }}>
    {/* torn tape */}
    <div style={{
      position: "absolute", top: -12, left: 120,
      width: 140, height: 28,
      background: "rgba(212, 201, 168, 0.25)",
      borderLeft: "1px dashed rgba(212,201,168,0.35)",
      borderRight: "1px dashed rgba(212,201,168,0.35)",
      transform: "rotate(-2deg)",
      backdropFilter: "blur(1px)",
    }} />
    <div style={{
      position: "absolute", top: -12, right: 80,
      width: 110, height: 24,
      background: "rgba(212, 201, 168, 0.22)",
      borderLeft: "1px dashed rgba(212,201,168,0.3)",
      borderRight: "1px dashed rgba(212,201,168,0.3)",
      transform: "rotate(3deg)",
    }} />
    {/* giant stamp */}
    <div style={{ position: "absolute", top: 24, right: 32, zIndex: 3 }}>
      <Stamp text={item.status_en} rot={-12} size={1.6} />
    </div>

    <div>
      <EvidencePlaceholder caseId={item.id} label={item.cat_en} seed={7} variant="kraft" />
    </div>

    <div style={{ padding: "34px 40px 34px 8px" }}>
      <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 16 }}>
        <div className="mono" style={{
          fontSize: 11, letterSpacing: 2, color: "#8b0000",
          padding: "3px 10px", border: "1px solid #8b0000",
        }}>
          ▸ {item.cat_en} / {item.cat}
        </div>
        <FileNumber id={item.id} />
        <span className="mono" style={{ fontSize: 11, color: "#6a6257", letterSpacing: 1 }}>{item.date}</span>
      </div>

      <h2 style={{
        fontFamily: "'Noto Serif SC','EB Garamond',serif",
        fontSize: 38, fontWeight: 500, lineHeight: 1.2,
        color: "#f4ecd8", marginBottom: 12, letterSpacing: 1,
      }}>
        {item.title}
      </h2>
      <div style={{ fontFamily: "'Special Elite',monospace", fontSize: 15,
        color: "#8a6f49", letterSpacing: 1, marginBottom: 24, fontStyle: "italic",
      }}>
        {item.title_en}
      </div>

      <p style={{ fontSize: 16, lineHeight: 1.75, color: "#d4c9a8",
        marginBottom: 24, textWrap: "pretty",
      }}>
        {item.excerpt}
      </p>

      <div style={{
        borderTop: "1px dashed #2a2620",
        borderBottom: "1px dashed #2a2620",
        padding: "14px 0",
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: "10px 24px",
        fontSize: 12,
        fontFamily: "'JetBrains Mono',monospace",
        letterSpacing: 1,
        marginBottom: 20,
      }}>
        <MetaRow label="发生坐标" value={item.loc} />
        <MetaRow label="案件状态" value={item.status} color="#a81515" />
        <MetaRow label="目击人数" value={typeof item.witnesses === "number" ? `${item.witnesses} 人` : item.witnesses} />
        <div style={{ display: "flex", gap: 6 }}>
          <span style={{ color: "#6a6257" }}>可信度等级</span>
          <Credibility n={typeof item.credibility === "number" ? item.credibility : 1} />
        </div>
      </div>

      <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
        <a href={`article.html?id=${item.id}`} style={{
          padding: "10px 20px",
          border: "1px solid #8b0000",
          background: "#8b0000",
          color: "#f4ecd8",
          fontFamily: "'JetBrains Mono',monospace",
          fontSize: 12, letterSpacing: 3,
        }}>调阅完整档案 → READ FULL FILE</a>
        <a href="category.html" style={{
          fontFamily: "'JetBrains Mono',monospace",
          fontSize: 12, letterSpacing: 2, color: "#a89b78",
        }}>相关案件 · 3</a>
      </div>
    </div>
  </div>
);

window.DossierView = DossierView;