/* cctv.ae — AI-vision simulation overlays.
   Pure CSS/SVG "computer-vision" layers (detection boxes, face keypoints, ANPR
   locks, behavioural pose skeleton) drawn over the photographic bands. Decorative,
   pointer-events: none, gated for reduced-motion via CSS classes in index.html. */
(function () {
  const CY = "var(--af-light-blue)";

  /* Corner-bracket detection box with a label chip. */
  function DetBox({ left, top, width, height, label, conf, accent = CY, blink, children, labelSide = "top" }) {
    const corner = (pos) => {
      const s = { position: "absolute", width: 11, height: 11, borderColor: accent, borderStyle: "solid", borderWidth: 0 };
      if (pos.includes("t")) s.top = -1; if (pos.includes("b")) s.bottom = -1;
      if (pos.includes("l")) s.left = -1; if (pos.includes("r")) s.right = -1;
      s.borderTopWidth = pos.includes("t") ? 2 : 0;
      s.borderBottomWidth = pos.includes("b") ? 2 : 0;
      s.borderLeftWidth = pos.includes("l") ? 2 : 0;
      s.borderRightWidth = pos.includes("r") ? 2 : 0;
      return <span aria-hidden style={s} key={pos} />;
    };
    return (
      <div style={{ position: "absolute", left, top, width, height, border: `1px solid ${accent}66`, borderRadius: 2, boxShadow: `0 0 12px ${accent}3d, inset 0 0 18px ${accent}1f` }}>
        {["tl", "tr", "bl", "br"].map(corner)}
        {children}
        {label && (
          <span className={blink ? "ai-blink" : ""} style={{ position: "absolute", left: -1, [labelSide === "top" ? "bottom" : "top"]: "calc(100% + 3px)", display: "inline-flex", alignItems: "center", gap: 5, padding: "2px 6px", background: accent, color: "#022", fontSize: 10, fontWeight: 700, letterSpacing: "0.04em", borderRadius: 2, whiteSpace: "nowrap", fontFamily: "ui-monospace, monospace" }}>
            {label}{conf && <b style={{ fontWeight: 800, opacity: 0.85 }}>{conf}</b>}
          </span>
        )}
      </div>
    );
  }

  /* Five face keypoints + a thin mesh, sized to the parent box. */
  function FaceMesh({ color = CY }) {
    const pts = [[34, 38], [66, 38], [50, 56], [36, 74], [64, 74]];
    return (
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100%" style={{ position: "absolute", inset: 0 }} aria-hidden>
        <polyline points="34,38 50,56 66,38" fill="none" stroke={color} strokeWidth="1" opacity="0.6" className="ai-dash" />
        <polyline points="36,74 50,82 64,74" fill="none" stroke={color} strokeWidth="1" opacity="0.6" className="ai-dash" />
        {pts.map(([x, y], i) => <circle key={i} cx={x} cy={y} r="2.4" fill={color} />)}
      </svg>
    );
  }

  /* Behavioural pose skeleton (stick figure with joints). */
  function PoseSkeleton({ color = CY }) {
    const J = { head: [50, 13], neck: [50, 30], sL: [35, 33], sR: [65, 33], eL: [27, 52], eR: [73, 52], hL: [24, 70], hR: [76, 70], hipL: [43, 62], hipR: [57, 62], kL: [40, 86], kR: [60, 86], fL: [38, 110], fR: [62, 110] };
    const bones = [["neck", "sL"], ["neck", "sR"], ["sL", "eL"], ["eL", "hL"], ["sR", "eR"], ["eR", "hR"], ["neck", "hipL"], ["neck", "hipR"], ["hipL", "kL"], ["kL", "fL"], ["hipR", "kR"], ["kR", "fR"]];
    return (
      <svg viewBox="0 0 100 120" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" style={{ position: "absolute", inset: 0 }} aria-hidden>
        {bones.map(([a, b], i) => <line key={i} x1={J[a][0]} y1={J[a][1]} x2={J[b][0]} y2={J[b][1]} stroke={color} strokeWidth="2" strokeLinecap="round" opacity="0.85" />)}
        <circle cx={J.head[0]} cy={J.head[1]} r="7" fill="none" stroke={color} strokeWidth="2" />
        {Object.values(J).map(([x, y], i) => <circle key={i} cx={x} cy={y} r="2.4" fill={color} />)}
      </svg>
    );
  }

  const ScanSweep = ({ inset = "0" }) => (
    <span aria-hidden className="ai-scan" style={{ position: "absolute", left: inset, right: inset, height: 2, background: `linear-gradient(90deg, transparent, ${CY}, transparent)`, boxShadow: `0 0 10px ${CY}`, pointerEvents: "none" }} />
  );

  const HudChip = ({ children, style }) => (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 10px", background: "rgba(4,30,66,0.55)", border: `1px solid ${CY}55`, borderRadius: "var(--radius-pill)", color: "#fff", fontSize: 11, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", backdropFilter: "blur(4px)", fontFamily: "ui-monospace, monospace", ...style }}>
      <span className="ai-blink" style={{ width: 7, height: 7, borderRadius: "50%", background: CY }} />{children}
    </span>
  );

  /* Hero overlay — detections across the surveillance wall (right side). */
  function AIVisionHero() {
    return (
      <div aria-hidden className="ai-layer" style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 2 }}>
        <div style={{ position: "absolute", top: "12%", right: "3.5%", display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-end" }}>
          <HudChip>AI Threat Scan · Live</HudChip>
          <HudChip style={{ textTransform: "none" }}>14 feeds · 6 alerts</HudChip>
        </div>
        <DetBox left="50%" top="20%" width="13%" height="30%" label="PERSON" conf="0.98" />
        <DetBox left="70%" top="26%" width="12%" height="25%" label="FACE ID #1042" conf="0.97" blink />
        <DetBox left="84%" top="50%" width="12%" height="20%" label="MOTION" conf="0.89" />
        <DetBox left="58%" top="60%" width="16%" height="17%" label="PLATE · D 12345" conf="0.95" accent="#7ee0ff" labelSide="bottom" />
        <ScanSweep inset="48%" />
      </div>
    );
  }

  /* Facial-recognition band overlay — face boxes + a behavioural pose. */
  function AIFaceBand() {
    return (
      <div aria-hidden className="ai-layer" style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 2 }}>
        <DetBox left="6%" top="20%" width="7%" height="46%" label="MATCH" conf="0.99"><FaceMesh /></DetBox>
        <DetBox left="20%" top="28%" width="6.5%" height="40%" label="ID #2271" conf="0.96"><FaceMesh /></DetBox>
        <DetBox left="80%" top="18%" width="7%" height="46%" label="MATCH" conf="0.98" labelSide="bottom"><FaceMesh /></DetBox>
        <DetBox left="91%" top="30%" width="6.5%" height="40%" label="VISITOR" conf="0.92" accent="#7ee0ff" labelSide="bottom"><FaceMesh color="#7ee0ff" /></DetBox>
        <DetBox left="32%" top="14%" width="7%" height="74%" label="BEHAVIOUR · NEUTRAL" conf="" accent="#7ee0ff"><PoseSkeleton color="#7ee0ff" /></DetBox>
      </div>
    );
  }

  Object.assign(window, { AIVisionHero, AIFaceBand, CCTVDetBox: DetBox, CCTVHudChip: HudChip });
})();