// STYLE 2: REDACTED — 机密文件解密版 · 白纸 + 打字机 + 大量涂黑
// 更像一份刚刚从档案库调出来、被部分解密的文件

const redactedStyles = {
  page: {
    background: "#2a2420",
    color: "#14110f",
    minHeight: "100vh",
    padding: "32px 0",
    fontFamily: "'EB Garamond','Noto Serif SC',serif",
  },
  paper: {
    background: "#e8e2d0",
    margin: "0 auto",
    maxWidth: 1280,
    minHeight: "90vh",
    boxShadow: "0 30px 80px -20px rgba(0,0,0,0.8), 0 4px 0 rgba(0,0,0,0.3)",
    position: "relative",
    color: "#14110f",
  },
};

const paperTexture = (
  <div style={{
    position: "absolute", inset: 0, pointerEvents: "none",
    backgroundImage: `
      radial-gradient(circle at 20% 15%, rgba(139, 0, 0, 0.04) 0%, transparent 30%),
      radial-gradient(circle at 80% 70%, rgba(107, 42, 26, 0.06) 0%, transparent 35%),
      radial-gradient(circle at 50% 90%, rgba(0, 0, 0, 0.08) 0%, transparent 40%)
    `,
  }} />
);

const RedactedHeader = () => (
  <div style={{ position: "relative", padding: "36px 56px 24px", borderBottom: "2px solid #14110f" }}>
    {/* FOIA-style header */}
    <div style={{
      display: "flex", justifyContent: "space-between",
      fontFamily: "'JetBrains Mono',monospace",
      fontSize: 10, letterSpacing: 2, color: "#6b2a1a", marginBottom: 20,
      paddingBottom: 10, borderBottom: "1px solid #8a6f49",
    }}>
      <span>DOC. REF · DA/ARCH/2026/04</span>
      <span>DECLASSIFIED — REDACTED IN PART</span>
      <span>PAGE 01 OF ∞</span>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 30 }}>
      <div>
        <div className="mono" style={{ fontSize: 10, letterSpacing: 2, color: "#6b2a1a", marginBottom: 4 }}>FROM THE OFFICE OF</div>
        <div className="type" style={{ fontSize: 13, letterSpacing: 1 }}>暗黑收集站 / Archival Section</div>
        <div className="type" style={{ fontSize: 13, letterSpacing: 1, marginTop: 2 }}>
          收件人: <Redact w={110}>&nbsp;</Redact>
        </div>
      </div>

      <div style={{ textAlign: "center" }}>
        <h1 style={{
          fontFamily: "'Special Elite',monospace",
          fontSize: 46, lineHeight: 1,
          letterSpacing: 2, fontWeight: 400,
          color: "#14110f",
          marginBottom: 10,
        }}>
          暗黑收集站
        </h1>
        <div className="mono" style={{ fontSize: 12, letterSpacing: 8, color: "#14110f", borderTop: "1px solid #14110f", borderBottom: "1px solid #14110f", padding: "4px 20px", display: "inline-block" }}>
          AI DARK FILE
        </div>
        <div className="type" style={{ marginTop: 10, fontSize: 13, color: "#3a2e1c" }}>
          收集世界上不愿被提起的事
        </div>
      </div>

      <div style={{ textAlign: "right" }}>
        <Stamp text="DECLASSIFIED" color="#8b0000" rot={4} size={1.2} />
        <div className="mono" style={{ fontSize: 10, letterSpacing: 2, color: "#6b2a1a", marginTop: 10 }}>
          日期: 2026.04.18<br/>
          依据: 档案公开法 §VII
        </div>
      </div>
    </div>
  </div>
);

const RedactedNav = ({ active, onChange }) => (
  <div style={{
    padding: "18px 56px",
    borderBottom: "1px solid #8a6f49",
    display: "flex",
    gap: 0,
    flexWrap: "wrap",
    background: "#dcd2b8",
  }}>
    {CATEGORIES.map((c, i) => {
      const on = active === c.k;
      return (
        <button key={c.k} onClick={() => onChange(c.k)}
          className="type"
          style={{
            padding: "8px 18px",
            marginRight: 10, marginBottom: 6,
            background: on ? "#14110f" : "transparent",
            color: on ? "#e8e2d0" : "#14110f",
            border: on ? "1px solid #14110f" : "1px dashed #6b2a1a",
            fontSize: 13, letterSpacing: 1,
            fontFamily: "'Special Elite',monospace",
          }}>
          [{String(i).padStart(2, "0")}] {c.zh}
          <span className="mono" style={{ fontSize: 10, marginLeft: 8, opacity: 0.7 }}>· {c.count}</span>
        </button>
      );
    })}
  </div>
);

// Typewriter article-style card
const RedactedCard = ({ item, index }) => {
  // redact some words based on item.redactions spec: [paragraphIndex, wordStart, wordCount]
  const excerptWords = item.excerpt.split(/(\s|，|。|、)/);
  const redactIndices = new Set();
  (item.redactions || []).forEach(([_, start, count]) => {
    for (let i = 0; i < count; i++) redactIndices.add(start * 2 + i * 2);
  });

  return (
    <article style={{
      padding: "28px 32px 30px",
      borderTop: "1px solid #8a6f49",
      borderBottom: index % 2 === 1 ? "1px solid #8a6f49" : "none",
      borderLeft: "1px solid #8a6f49",
      borderRight: "1px solid #8a6f49",
      background: "#e8e2d0",
      position: "relative",
      marginBottom: 24,
      marginLeft: index % 2 === 0 ? 0 : 8,
    }}>
      {/* angled stamp */}
      <div style={{ position: "absolute", top: 14, right: 22 }}>
        <Stamp text={item.status_en} rot={-7} size={1} />
      </div>

      {/* file bar */}
      <div style={{
        display: "flex", gap: 14, alignItems: "center",
        borderBottom: "1px solid #14110f", paddingBottom: 8, marginBottom: 14,
      }}>
        <span className="type" style={{ fontSize: 13, letterSpacing: 1 }}>
          案卷 № <strong style={{ color: "#8b0000" }}>{item.id}</strong>
        </span>
        <span style={{ flex: 1 }} />
        <span className="mono" style={{ fontSize: 11, letterSpacing: 1.5 }}>
          CLASSIFICATION / <strong style={{ color: "#8b0000" }}>{item.cat_en}</strong>
        </span>
      </div>

      <h3 className="type" style={{
        fontFamily: "'Special Elite','Noto Serif SC',monospace",
        fontSize: 26, lineHeight: 1.3, color: "#14110f",
        marginBottom: 4, fontWeight: 400,
      }}>
        {item.title}
      </h3>
      <div className="mono" style={{ fontSize: 12, color: "#6b2a1a", letterSpacing: 1, marginBottom: 18, fontStyle: "italic" }}>
        — {item.title_en}
      </div>

      {/* excerpt with redactions */}
      <p className="type" style={{
        fontSize: 14, lineHeight: 1.95, color: "#14110f",
        marginBottom: 18,
        fontFamily: "'Special Elite',monospace",
        textIndent: "2em",
      }}>
        {excerptWords.map((w, i) =>
          redactIndices.has(i)
            ? <Redact key={i} w={w.length * 10 + 10}>{w}</Redact>
            : <React.Fragment key={i}>{w}</React.Fragment>
        )}
      </p>

      {/* meta table */}
      <table className="mono" style={{
        width: "100%", fontSize: 12, letterSpacing: 1,
        borderCollapse: "collapse", marginBottom: 14,
      }}>
        <tbody>
          <tr style={{ borderTop: "1px solid #14110f", borderBottom: "1px solid #8a6f49" }}>
            <td style={{ padding: "6px 8px", background: "#dcd2b8", width: 80 }}>DATE</td>
            <td style={{ padding: "6px 8px" }}>{item.date}</td>
            <td style={{ padding: "6px 8px", background: "#dcd2b8", width: 80 }}>WIT.</td>
            <td style={{ padding: "6px 8px" }}>{typeof item.witnesses === "number" ? item.witnesses : item.witnesses}</td>
          </tr>
          <tr style={{ borderBottom: "1px solid #8a6f49" }}>
            <td style={{ padding: "6px 8px", background: "#dcd2b8" }}>COORD</td>
            <td style={{ padding: "6px 8px" }}>
              {item.loc.includes("涂黑")
                ? <Redact w={160}>&nbsp;</Redact>
                : item.loc}
            </td>
            <td style={{ padding: "6px 8px", background: "#dcd2b8" }}>CRED.</td>
            <td style={{ padding: "6px 8px" }}>
              <Credibility n={typeof item.credibility === "number" ? item.credibility : 1} color="#8b0000" />
            </td>
          </tr>
          <tr style={{ borderBottom: "1px solid #14110f" }}>
            <td style={{ padding: "6px 8px", background: "#dcd2b8" }}>STATUS</td>
            <td style={{ padding: "6px 8px", color: "#8b0000", fontWeight: 600 }}>● {item.status_en}</td>
            <td style={{ padding: "6px 8px", background: "#dcd2b8" }}>TAGS</td>
            <td style={{ padding: "6px 8px" }}>{item.tags.map(t => `#${t}`).join(" ")}</td>
          </tr>
        </tbody>
      </table>

      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span className="mono" style={{ fontSize: 10, color: "#6b2a1a", letterSpacing: 2 }}>
          [ 以下内容于 §§§§ 条款下部分公开 ]
        </span>
        <a href={`article.html?id=${item.id}`} className="type" style={{
          fontSize: 13, color: "#8b0000", letterSpacing: 1,
          borderBottom: "1px dashed #8b0000",
        }}>→ 申请完整阅卷</a>
      </div>
    </article>
  );
};

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

  const sitePages = [
    ["首页","HOME","index.html"],["分类","CATEGORY","category.html"],
    ["档案库","ARCHIVE","archive.html"],["地图","MAP","map.html"],
    ["标签","TAG","tag.html"],["关于","ABOUT","about.html"],["检索","SEARCH","search.html"],
  ];
  return (
    <div style={redactedStyles.page}>
      <nav style={{ maxWidth:1280, margin:"0 auto 16px", padding:"8px 56px",
        background:"#14110f", color:"#e8e2d0", display:"flex", gap:24, alignItems:"center", fontSize:12 }}>
        {sitePages.map(([zh,en,h],i)=>(
          <a key={en} href={h} style={{ display:"flex", gap:6, alignItems:"baseline",
            borderBottom:i===0?"1px solid #8b0000":"1px solid transparent", paddingBottom:2 }}>
            <span style={{ color:i===0?"#e8e2d0":"#a89b78" }}>{zh}</span>
            <span className="mono" style={{ fontSize:9, letterSpacing:1.5, color:"#6a6257" }}>{en}</span>
          </a>
        ))}
      </nav>
      <div style={redactedStyles.paper}>
        {paperTexture}
        {/* perforation holes on left edge */}
        <div style={{ position: "absolute", top: 80, bottom: 40, left: 20, display: "flex", flexDirection: "column", gap: 42 }}>
          {Array.from({ length: 18 }).map((_, i) => (
            <div key={i} style={{ width: 10, height: 10, borderRadius: "50%", background: "#2a2420", boxShadow: "inset 0 1px 2px rgba(0,0,0,0.5)" }} />
          ))}
        </div>

        <RedactedHeader />
        <RedactedNav active={active} onChange={setActive} />

        {/* meta strip */}
        <div style={{
          padding: "14px 56px",
          background: "#14110f", color: "#e8e2d0",
          display: "flex", justifyContent: "space-between",
          fontFamily: "'JetBrains Mono',monospace",
          fontSize: 10, letterSpacing: 3,
        }}>
          <span>▸ {filtered.length} FILES RETURNED</span>
          <span>SORT: MOST RECENT ⇂</span>
          <span>总计 {SITE.total_files} 卷 · 未结 {SITE.total_unsolved}</span>
          <span>LAST REVIEWED · 2026.04.18</span>
        </div>

        {/* two-column case list */}
        <div style={{
          padding: "28px 56px 40px",
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: "0 24px",
        }}>
          {filtered.map((item, i) => (
            <RedactedCard key={item.id} item={item} index={i} />
          ))}
        </div>

        {/* footer bar */}
        <div style={{
          borderTop: "2px solid #14110f",
          padding: "18px 56px 28px",
          display: "flex", justifyContent: "space-between", alignItems: "center",
        }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: 2, color: "#6b2a1a" }}>
            // END OF RELEASE. 其余内容依 §VII-b 条款保留 //
          </div>
          <Stamp text="REDACTED" rot={-4} size={1.1} />
          <div className="mono" style={{ fontSize: 10, letterSpacing: 2, color: "#6b2a1a" }}>
            © 2017—2026 · 暗黑收集站
          </div>
        </div>
      </div>
    </div>
  );
};

window.RedactedView = RedactedView;