// STYLE 3: CASE WALL — 刑侦板 · 照片 + 图钉 + 红线 + 便签
// 像一面满满的案件墙，随意但克制

const casewallStyles = {
  page: {
    // textured corkboard-like dark surface, no emoji
    background: "#1a1410",
    backgroundImage: `
      radial-gradient(circle at 10% 20%, rgba(88,60,35,0.3) 0, transparent 40%),
      radial-gradient(circle at 85% 60%, rgba(60,40,22,0.35) 0, transparent 45%),
      radial-gradient(circle at 40% 85%, rgba(40,25,15,0.4) 0, transparent 50%)
    `,
    color: "#e8e2d0",
    minHeight: "100vh",
    fontFamily: "'EB Garamond','Noto Serif SC',serif",
    position: "relative",
    overflow: "hidden",
  },
};

const Pushpin = ({ color = "#8b0000", x = 0, y = 0 }) => (
  <div style={{
    position: "absolute", left: x, top: y,
    width: 16, height: 16, borderRadius: "50%",
    background: `radial-gradient(circle at 35% 35%, ${color}ee, ${color}88 60%, #000)`,
    boxShadow: "0 2px 4px rgba(0,0,0,0.6), inset -2px -2px 4px rgba(0,0,0,0.4), inset 2px 2px 2px rgba(255,255,255,0.2)",
    zIndex: 5,
  }} />
);

const CaseWallHeader = () => (
  <header style={{
    padding: "28px 48px 20px",
    display: "flex", alignItems: "center", justifyContent: "space-between",
    borderBottom: "1px dashed rgba(232,226,208,0.15)",
    position: "relative", zIndex: 2,
  }}>
    <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: 4, color: "#a89b78" }}>{SITE.since} · VOL. XII</div>
      <h1 style={{
        fontFamily: "'Noto Serif SC','EB Garamond',serif",
        fontSize: 44, letterSpacing: 10, fontWeight: 500,
        color: "#e8e2d0", margin: "4px 0 2px",
      }}>
        暗黑收集站
      </h1>
      <div className="mono" style={{ fontSize: 11, letterSpacing: 6, color: "#8b0000" }}>
        — AI DARK FILE —
      </div>
    </div>

    <div style={{ textAlign: "right" }}>
      <div style={{ fontStyle: "italic", color: "#c9bda0", fontSize: 15, marginBottom: 8 }}>
        {SITE.tagline_zh}
      </div>
      <div style={{ display: "inline-flex", gap: 16, fontFamily: "'JetBrains Mono',monospace", fontSize: 11, color: "#a89b78", letterSpacing: 2 }}>
        <span>案卷 {SITE.total_files}</span>
        <span style={{ color: "#4a4038" }}>|</span>
        <span style={{ color: "#a81515" }}>未结 {SITE.total_unsolved}</span>
        <span style={{ color: "#4a4038" }}>|</span>
        <span>活跃 9</span>
      </div>
    </div>
  </header>
);

const CaseWallNav = ({ active, onChange }) => (
  <nav style={{
    padding: "16px 48px 18px",
    display: "flex", flexWrap: "wrap", gap: 10,
    borderBottom: "1px dashed rgba(232,226,208,0.15)",
    position: "relative", zIndex: 2,
    alignItems: "center",
  }}>
    <span className="mono" style={{ fontSize: 10, letterSpacing: 3, color: "#6a6257", marginRight: 8 }}>▸ 板上筛选 /</span>
    {CATEGORIES.map(c => {
      const on = active === c.k;
      return (
        <button key={c.k} onClick={() => onChange(c.k)} style={{
          padding: "4px 12px",
          fontFamily: "'Special Elite',monospace",
          fontSize: 12, letterSpacing: 1,
          background: on ? "#8b0000" : "transparent",
          color: on ? "#f4ecd8" : "#c9bda0",
          border: `1px solid ${on ? "#8b0000" : "rgba(169,155,120,0.4)"}`,
          borderRadius: 0,
        }}>
          {c.zh} <span style={{ opacity: 0.7 }}>· {c.count}</span>
        </button>
      );
    })}
    <div style={{ flex: 1 }} />
    <div className="mono" style={{ fontSize: 11, color: "#6a6257", letterSpacing: 1 }}>LAST PINNED · 2026.04.18</div>
  </nav>
);

// "Polaroid" photo card
const PolaroidCard = ({ item, rot, pin, width = 280 }) => (
  <div style={{
    width,
    background: "#e8e2d0",
    padding: "10px 10px 14px",
    boxShadow: `
      0 1px 0 rgba(0,0,0,0.4),
      0 12px 24px -6px rgba(0,0,0,0.7),
      0 24px 48px -12px rgba(0,0,0,0.5)
    `,
    transform: `rotate(${rot}deg)`,
    position: "relative",
    color: "#14110f",
    fontFamily: "'Special Elite',monospace",
  }}>
    <Pushpin color={pin} x={width/2 - 8} y={-6} />
    <EvidencePlaceholder caseId={item.id} label={item.cat_en}
      seed={parseInt(item.id.replace(/\D/g,""))%97} variant="dark" />
    <div style={{
      position: "absolute", top: 18, right: 18,
    }}>
      <Stamp text={item.status_en} rot={-4} size={0.75} />
    </div>
    <div style={{ padding: "10px 4px 2px" }}>
      <div style={{ display: "flex", justifyContent: "space-between",
        fontSize: 10, letterSpacing: 1, color: "#6b2a1a", marginBottom: 4,
      }}>
        <span>№ {item.id}</span><span>{item.date.split(" ")[0]}</span>
      </div>
      <div style={{ fontSize: 15, lineHeight: 1.3, color: "#14110f", fontFamily: "'Noto Serif SC',serif" }}>
        {item.title}
      </div>
    </div>
  </div>
);

// Sticky note
const StickyNote = ({ item, rot, pin, color = "#d4c9a8", width = 260 }) => (
  <div style={{
    width,
    background: color,
    padding: "16px 16px 18px",
    boxShadow: "0 1px 0 rgba(0,0,0,0.4), 0 14px 28px -10px rgba(0,0,0,0.7)",
    transform: `rotate(${rot}deg)`,
    position: "relative",
    color: "#14110f",
    fontFamily: "'Special Elite',monospace",
    lineHeight: 1.55,
  }}>
    <Pushpin color={pin} x={width/2 - 8} y={-6} />
    <div style={{
      display: "flex", justifyContent: "space-between",
      fontSize: 10, letterSpacing: 1.5, marginBottom: 10,
      color: "#6b2a1a", paddingBottom: 6, borderBottom: "1px solid rgba(107,42,26,0.4)",
    }}>
      <span>▸ {item.cat_en}</span>
      <span>№ {item.id}</span>
    </div>
    <div style={{ fontSize: 15, fontFamily: "'Noto Serif SC',serif", marginBottom: 8, lineHeight: 1.35 }}>
      {item.title}
    </div>
    <div style={{ fontSize: 11, color: "#3a2e1c", marginBottom: 10 }}>
      {item.excerpt.slice(0, 58)}…
    </div>
    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "#6b2a1a" }}>
      <span>{item.date}</span>
      <Credibility n={typeof item.credibility === "number" ? item.credibility : 1} color="#8b0000" />
    </div>
  </div>
);

// Index card
const IndexCard = ({ item, rot, pin, width = 340 }) => (
  <div style={{
    width,
    background: "#efe8d6",
    backgroundImage: "repeating-linear-gradient(transparent 0, transparent 22px, rgba(107,42,26,0.15) 22px, rgba(107,42,26,0.15) 23px)",
    padding: "14px 16px 16px",
    boxShadow: "0 1px 0 rgba(0,0,0,0.4), 0 16px 32px -10px rgba(0,0,0,0.7)",
    transform: `rotate(${rot}deg)`,
    position: "relative",
    color: "#14110f",
    fontFamily: "'Special Elite',monospace",
  }}>
    <Pushpin color={pin} x={width/2 - 8} y={-6} />
    {/* red header line */}
    <div style={{
      borderBottom: "1.5px solid #8b0000",
      paddingBottom: 4, marginBottom: 8,
      display: "flex", justifyContent: "space-between",
      fontSize: 11, letterSpacing: 1.5,
    }}>
      <span style={{ color: "#8b0000" }}>▸ {item.cat_en} / {item.cat}</span>
      <span>{item.id}</span>
    </div>
    <h4 style={{
      fontFamily: "'Noto Serif SC',serif",
      fontSize: 17, lineHeight: 1.3, marginBottom: 6, fontWeight: 500,
    }}>{item.title}</h4>
    <div style={{ fontSize: 11, fontStyle: "italic", color: "#6b2a1a", marginBottom: 8 }}>
      {item.title_en}
    </div>
    <div style={{ fontSize: 12, lineHeight: 1.5, color: "#3a2e1c", marginBottom: 10 }}>
      {item.excerpt.slice(0, 95)}…
    </div>
    <div style={{
      fontSize: 10, letterSpacing: 1,
      display: "grid", gridTemplateColumns: "auto 1fr", gap: "2px 8px",
      color: "#3a2e1c",
    }}>
      <span style={{ color: "#6b2a1a" }}>DATE</span><span>{item.date}</span>
      <span style={{ color: "#6b2a1a" }}>LOC</span><span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.loc}</span>
      <span style={{ color: "#6b2a1a" }}>STAT</span><span style={{ color: "#8b0000" }}>● {item.status}</span>
    </div>
  </div>
);

// Connecting red thread (decorative SVG)
const RedThreads = () => (
  <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
    pointerEvents: "none", zIndex: 1,
  }}>
    <defs>
      <filter id="threadblur"><feGaussianBlur stdDeviation="0.3"/></filter>
    </defs>
    {/* Several thread lines between random points */}
    {[
      ["M 220 240 Q 420 200 680 340"],
      ["M 680 340 Q 900 480 1180 260"],
      ["M 220 240 Q 400 520 640 700"],
      ["M 1180 260 Q 1080 520 820 700"],
      ["M 640 700 Q 800 780 1000 720"],
    ].map((d, i) => (
      <path key={i} d={d[0]} fill="none" stroke="#a81515" strokeWidth="1.1"
        strokeDasharray="none" opacity="0.65" filter="url(#threadblur)" />
    ))}
  </svg>
);

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

  // layout: absolute-positioned wall with some jitter
  const positions = [
    // [leftPct, topPx, rot, kind, pinColor]
    [4,   30, -2.4, "polaroid", "#8b0000"],
    [25,  10,  1.8, "index",    "#c49a3a"],
    [52,  50, -1.2, "polaroid", "#a81515"],
    [74,   0,  2.6, "sticky",   "#8b0000"],
    [90,  70, -3.1, "sticky",   "#c49a3a"],
    [6,  420,  2.2, "sticky",   "#a81515"],
    [22, 400, -1.5, "polaroid", "#8b0000"],
    [47, 440,  1.6, "index",    "#a81515"],
    [70, 420, -2.8, "polaroid", "#c49a3a"],
    [3,  770, -1.8, "index",    "#8b0000"],
    [30, 800,  2.4, "sticky",   "#a81515"],
    [55, 820, -1.5, "polaroid", "#c49a3a"],
    [78, 780,  2.0, "index",    "#8b0000"],
  ];

  return (
    <div style={casewallStyles.page}>
      {/* subtle cork texture via noise */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        opacity: 0.25, mixBlendMode: "overlay",
        backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")`,
      }} />

      <CaseWallHeader />
      <nav style={{ padding:"10px 48px", borderBottom:"1px dashed rgba(232,226,208,0.15)",
        display:"flex", gap:24, alignItems:"center", fontSize:12, position:"relative", zIndex:2 }}>
        {[["首页","HOME","index.html"],["分类","CATEGORY","category.html"],["档案库","ARCHIVE","archive.html"],
          ["地图","MAP","map.html"],["标签","TAG","tag.html"],["关于","ABOUT","about.html"],["检索","SEARCH","search.html"]]
          .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>
      <CaseWallNav active={active} onChange={setActive} />

      {/* the wall */}
      <div style={{
        position: "relative",
        padding: "40px 0 80px",
        minHeight: 1400,
      }}>
        <RedThreads />

        {/* "CASE BOARD" label */}
        <div style={{
          position: "absolute", top: 12, left: 48,
          fontFamily: "'Special Elite',monospace",
          fontSize: 13, letterSpacing: 3, color: "#a89b78",
        }}>
          ▸ ACTIVE CASE BOARD · {filtered.length} PINNED
        </div>
        <div style={{
          position: "absolute", top: 12, right: 48,
          fontFamily: "'JetBrains Mono',monospace",
          fontSize: 10, letterSpacing: 2, color: "#6a6257",
        }}>
          RED THREAD · 已建立关联 5
        </div>

        {filtered.slice(0, positions.length).map((item, i) => {
          const [left, top, rot, kind, pin] = positions[i] || positions[i % positions.length];
          return (
            <a key={item.id} href={`article.html?id=${item.id}`} style={{
              position: "absolute",
              left: `${left}%`,
              top: top + 40,
              zIndex: 2,
              display: "block",
            }}>
              {kind === "polaroid" && <PolaroidCard item={item} rot={rot} pin={pin} />}
              {kind === "sticky" && <StickyNote item={item} rot={rot} pin={pin}
                color={i % 3 === 0 ? "#d4c9a8" : (i % 3 === 1 ? "#c4a57a" : "#efe8c4")} />}
              {kind === "index" && <IndexCard item={item} rot={rot} pin={pin} />}
            </a>
          );
        })}
      </div>

      <footer style={{
        borderTop: "1px dashed rgba(232,226,208,0.15)",
        padding: "24px 48px",
        display: "flex", justifyContent: "space-between",
        fontFamily: "'JetBrains Mono',monospace",
        fontSize: 11, color: "#6a6257", letterSpacing: 2,
        position: "relative", zIndex: 2,
      }}>
        <span>© 暗黑收集站 · EST. 2017</span>
        <span>本站所有内容为公开资料再整理 · NOT A LEGAL DOCUMENT</span>
        <span>V. 12.04</span>
      </footer>
    </div>
  );
};

window.CaseWallView = CaseWallView;