// Shared small components used across styles

const Redact = ({ w = 60, children }) => (
  <span style={{
    display: "inline-block",
    background: "#000",
    color: "#000",
    padding: "0 6px",
    minWidth: w,
    userSelect: "none",
    transform: "skewX(-1deg)",
    boxShadow: "0 0 0 1px #000",
  }}>{children || "\u00A0"}</span>
);

const Stamp = ({ text = "CONFIDENTIAL", color = "#8b0000", rot = -6, size = 1 }) => (
  <div style={{
    display: "inline-block",
    border: `${2.5*size}px double ${color}`,
    color,
    padding: `${4*size}px ${10*size}px`,
    fontFamily: "'Special Elite', monospace",
    fontSize: 11*size,
    letterSpacing: 2,
    textTransform: "uppercase",
    transform: `rotate(${rot}deg)`,
    opacity: 0.85,
    mixBlendMode: "multiply",
    whiteSpace: "nowrap",
  }}>{text}</div>
);

const FileNumber = ({ id, prefix = "FILE №" }) => (
  <span className="mono" style={{ letterSpacing: 1.5 }}>{prefix} {id}</span>
);

// crosshair / target marker
const Crosshair = ({ size = 14, color = "#8b0000" }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" style={{ display: "inline-block", verticalAlign: "middle" }}>
    <circle cx="7" cy="7" r="5.5" fill="none" stroke={color} strokeWidth="0.8"/>
    <line x1="7" y1="0" x2="7" y2="3" stroke={color} strokeWidth="0.8"/>
    <line x1="7" y1="11" x2="7" y2="14" stroke={color} strokeWidth="0.8"/>
    <line x1="0" y1="7" x2="3" y2="7" stroke={color} strokeWidth="0.8"/>
    <line x1="11" y1="7" x2="14" y2="7" stroke={color} strokeWidth="0.8"/>
    <circle cx="7" cy="7" r="1" fill={color}/>
  </svg>
);

// Credibility pips
const Credibility = ({ n, color = "#8b0000" }) => (
  <span className="mono" style={{ letterSpacing: 3 }}>
    {[1,2,3,4,5].map(i => (
      <span key={i} style={{ color: i <= n ? color : "rgba(120,110,95,0.4)" }}>●</span>
    ))}
  </span>
);

// placeholder imagery — distressed gradient with file-folder tone
const EvidencePlaceholder = ({ label = "EVIDENCE", caseId, seed = 1, variant = "kraft" }) => {
  const tints = {
    kraft: ["#3a2e1c", "#1a1410"],
    paper: ["#c9bda0", "#a89b78"],
    dark:  ["#1a1816", "#070605"],
    red:   ["#2a0808", "#0a0202"],
  };
  const [a, b] = tints[variant] || tints.kraft;
  // pseudorandom streaks
  const streaks = Array.from({ length: 7 }).map((_, i) => ({
    y: ((seed * 37 + i * 13) % 90) + 5,
    w: 20 + ((seed * 11 + i * 7) % 60),
    o: 0.05 + (((seed + i) % 5) * 0.03),
  }));
  return (
    <div style={{
      position: "relative",
      width: "100%",
      aspectRatio: "4/3",
      background: `linear-gradient(135deg, ${a}, ${b})`,
      overflow: "hidden",
      borderTop: "1px solid rgba(0,0,0,0.4)",
      borderBottom: "1px solid rgba(0,0,0,0.4)",
    }}>
      <svg width="100%" height="100%" viewBox="0 0 100 75" preserveAspectRatio="none"
        style={{ position: "absolute", inset: 0 }}>
        {streaks.map((s, i) => (
          <rect key={i} x="0" y={s.y} width="100" height="0.3" fill="#000" opacity={s.o} />
        ))}
        <rect x="0" y="0" width="100" height="75" fill="url(#vig)" />
        <defs>
          <radialGradient id="vig" cx="50%" cy="50%" r="70%">
            <stop offset="60%" stopColor="#000" stopOpacity="0"/>
            <stop offset="100%" stopColor="#000" stopOpacity="0.55"/>
          </radialGradient>
        </defs>
      </svg>
      {/* corner markers */}
      <div className="mono" style={{ position: "absolute", top: 8, left: 10, fontSize: 9, letterSpacing: 2, color: "rgba(200,185,150,0.7)" }}>
        + {label}
      </div>
      <div className="mono" style={{ position: "absolute", top: 8, right: 10, fontSize: 9, letterSpacing: 1, color: "rgba(200,185,150,0.6)" }}>
        {caseId}
      </div>
      <div className="mono" style={{ position: "absolute", bottom: 8, left: 10, fontSize: 9, letterSpacing: 1, color: "rgba(200,185,150,0.55)" }}>
        [photo redacted]
      </div>
      <div className="mono" style={{ position: "absolute", bottom: 8, right: 10, fontSize: 9, letterSpacing: 1, color: "rgba(200,185,150,0.55)" }}>
        +
      </div>
      {/* center small crosshair */}
      <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
        <Crosshair size={22} color="rgba(220,200,160,0.3)" />
      </div>
    </div>
  );
};

Object.assign(window, { Redact, Stamp, FileNumber, Crosshair, Credibility, EvidencePlaceholder });