/* =========================================================
   NETRA AI — Live theater (camera grid + AI reasoning log)
   ========================================================= */

/* A synthetic "camera feed" — abstract scene rendered as SVG with subtle motion */
const FakeCamFeed = ({ kind = "lobby", time = "10:42:18" }) => {
  // Different scene compositions per camera "kind"
  if (kind === "tailgate") {
    return (
      <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
        <defs>
          <linearGradient id="cam-bg-tg" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#0a1828" />
            <stop offset="100%" stopColor="#040a14" />
          </linearGradient>
        </defs>
        <rect width="320" height="180" fill="url(#cam-bg-tg)" />
        {/* perspective floor */}
        <path d="M 0 180 L 130 70 L 190 70 L 320 180 Z" fill="#0a1320" opacity="0.6" />
        {[0.2, 0.4, 0.6, 0.8].map((p, i) => (
          <line key={i} x1={0 + 320 * p * 0.5} y1={180 - 110 * (1 - p)} x2={320 - 320 * p * 0.5} y2={180 - 110 * (1 - p)}
            stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
        ))}
        {/* door */}
        <rect x="135" y="50" width="50" height="100" fill="#1a2030" stroke="rgba(255,255,255,0.15)" />
        <rect x="180" y="95" width="3" height="12" fill="#4dd6ff" opacity="0.9" />
        {/* badge reader glow */}
        <circle cx="182" cy="101" r="6" fill="#4dd6ff" opacity="0.15" />
        {/* two people silhouettes */}
        <g>
          <ellipse cx="120" cy="148" rx="13" ry="6" fill="#000" opacity="0.4" />
          <circle cx="120" cy="105" r="11" fill="#2a3447" />
          <path d="M 105 125 L 105 155 L 135 155 L 135 125 Q 135 116 120 116 Q 105 116 105 125 Z" fill="#2a3447" />
        </g>
        <g style={{ animation: "tg-step 3.4s ease-in-out infinite" }}>
          <ellipse cx="90" cy="150" rx="13" ry="6" fill="#000" opacity="0.4" />
          <circle cx="90" cy="108" r="11" fill="#3a2030" />
          <path d="M 75 128 L 75 158 L 105 158 L 105 128 Q 105 119 90 119 Q 75 119 75 128 Z" fill="#3a2030" />
        </g>
      </svg>
    );
  }
  if (kind === "dock") {
    return (
      <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
        <defs>
          <linearGradient id="cam-bg-dk" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#0d1a14" />
            <stop offset="100%" stopColor="#060a08" />
          </linearGradient>
        </defs>
        <rect width="320" height="180" fill="url(#cam-bg-dk)" />
        {/* dock outline */}
        <rect x="0" y="120" width="320" height="60" fill="#0a1320" />
        <line x1="0" y1="120" x2="320" y2="120" stroke="rgba(255,255,255,0.15)" />
        {/* truck silhouette */}
        <rect x="200" y="60" width="120" height="65" fill="#1a2030" stroke="rgba(255,255,255,0.12)" />
        <rect x="280" y="75" width="30" height="35" fill="#0a1320" />
        <circle cx="220" cy="125" r="10" fill="#0a0f18" stroke="rgba(255,255,255,0.15)" />
        <circle cx="295" cy="125" r="10" fill="#0a0f18" stroke="rgba(255,255,255,0.15)" />
        {/* loitering person */}
        <g>
          <ellipse cx="80" cy="158" rx="11" ry="5" fill="#000" opacity="0.4" />
          <circle cx="80" cy="118" r="10" fill="#2a3a30" />
          <path d="M 66 138 L 66 165 L 94 165 L 94 138 Q 94 130 80 130 Q 66 130 66 138 Z" fill="#2a3a30" />
        </g>
        {/* dwell breadcrumbs */}
        <g opacity="0.7">
          {[[45, 162], [60, 160], [72, 160]].map((p, i) => (
            <circle key={i} cx={p[0]} cy={p[1]} r="2" fill="#f0a73a" opacity={0.3 + i * 0.2} />
          ))}
        </g>
      </svg>
    );
  }
  if (kind === "server") {
    return (
      <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
        <rect width="320" height="180" fill="#040a14" />
        {/* server racks (rows) */}
        {[15, 75, 135, 195, 255].map((x, i) => (
          <g key={i}>
            <rect x={x} y="20" width="50" height="140" fill="#0a1320" stroke="rgba(255,255,255,0.1)" />
            {Array.from({ length: 18 }).map((_, j) => (
              <rect key={j} x={x + 4} y={26 + j * 7.4} width="42" height="5" fill="#1a2030" />
            ))}
            {/* random green/amber leds */}
            {Array.from({ length: 18 }).map((_, j) => (
              <circle key={j} cx={x + 44} cy={29 + j * 7.4} r="0.8" fill={(i * j) % 5 === 0 ? "#f0a73a" : "#5ce0a8"}
                opacity={(j + i) % 3 === 0 ? 0.9 : 0.4} />
            ))}
          </g>
        ))}
      </svg>
    );
  }
  if (kind === "lobby") {
    return (
      <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
        <defs>
          <linearGradient id="cam-bg-lb" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#0d1726" />
            <stop offset="100%" stopColor="#050b14" />
          </linearGradient>
        </defs>
        <rect width="320" height="180" fill="url(#cam-bg-lb)" />
        {/* desk */}
        <rect x="40" y="115" width="240" height="30" fill="#0a1320" stroke="rgba(255,255,255,0.12)" />
        {/* monitor */}
        <rect x="120" y="80" width="60" height="40" fill="#04111a" stroke="rgba(77,214,255,0.4)" />
        <rect x="146" y="120" width="8" height="8" fill="#1a2030" />
        {/* person seated */}
        <circle cx="200" cy="100" r="10" fill="#2a3447" />
        <path d="M 188 115 L 188 145 L 212 145 L 212 115 Z" fill="#2a3447" />
        {/* plant decor */}
        <g transform="translate(290 100)">
          <rect x="-6" y="20" width="12" height="20" fill="#1a2030" />
          <ellipse cx="0" cy="10" rx="14" ry="14" fill="#1a3020" opacity="0.7" />
        </g>
        {/* lobby pillars */}
        <rect x="20" y="20" width="6" height="120" fill="#0a1320" />
        <rect x="294" y="20" width="6" height="120" fill="#0a1320" />
      </svg>
    );
  }
  if (kind === "lot") {
    return (
      <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
        <rect width="320" height="180" fill="#040810" />
        {/* parking grid */}
        {Array.from({ length: 6 }).map((_, i) => (
          <line key={i} x1={40 + i * 48} y1="80" x2={40 + i * 48} y2="160" stroke="rgba(255,255,255,0.1)" />
        ))}
        <line x1="40" y1="80" x2="320" y2="80" stroke="rgba(255,255,255,0.12)" />
        {/* cars */}
        {[[60, 100], [110, 100], [200, 100], [250, 100]].map((c, i) => (
          <g key={i}>
            <rect x={c[0] - 18} y={c[1] - 6} width="36" height="22" rx="3" fill="#1a2030" stroke="rgba(255,255,255,0.1)" />
            <circle cx={c[0] - 12} cy={c[1] + 16} r="3" fill="#0a0f18" />
            <circle cx={c[0] + 12} cy={c[1] + 16} r="3" fill="#0a0f18" />
          </g>
        ))}
        {/* hooded silhouette */}
        <g>
          <ellipse cx="160" cy="158" rx="11" ry="5" fill="#000" opacity="0.5" />
          <path d="M 150 108 Q 150 96 160 96 Q 170 96 170 108 L 170 124 L 150 124 Z" fill="#1a1020" />
          <path d="M 145 124 L 145 162 L 175 162 L 175 124 Z" fill="#1a1020" />
        </g>
        {/* light pole */}
        <line x1="35" y1="20" x2="35" y2="160" stroke="#1a2030" strokeWidth="2" />
        <circle cx="35" cy="20" r="4" fill="#f0a73a" opacity="0.6" />
      </svg>
    );
  }
  if (kind === "roof") {
    return (
      <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
        <rect width="320" height="180" fill="#040912" />
        {/* sky horizon */}
        <rect width="320" height="60" fill="#0a1424" />
        {/* HVAC units */}
        {[40, 110, 200].map((x, i) => (
          <g key={i}>
            <rect x={x} y="80" width="50" height="55" fill="#0a1320" stroke="rgba(255,255,255,0.15)" />
            <rect x={x + 6} y="86" width="38" height="20" fill="#1a2030" />
            <circle cx={x + 25} cy="115" r="10" fill="#04111a" stroke="rgba(255,255,255,0.1)" />
            <line x1={x + 25} y1="105" x2={x + 25} y2="125" stroke="rgba(255,255,255,0.2)" />
            <line x1={x + 15} y1="115" x2={x + 35} y2="115" stroke="rgba(255,255,255,0.2)" />
          </g>
        ))}
        {/* propped door (right) */}
        <rect x="270" y="70" width="40" height="80" fill="#0a1320" stroke="rgba(240,167,58,0.6)" />
        <rect x="270" y="148" width="40" height="3" fill="#f0a73a" opacity="0.6" />
      </svg>
    );
  }
  return null;
};

/* ---------- Live theater section ---------- */
const LiveTheater = () => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 1000);
    return () => clearInterval(id);
  }, []);

  // animated clock
  const ts = React.useMemo(() => {
    const t = new Date();
    const s = (10 * 3600 + 38 * 60 + 51 + tick) % (24 * 3600);
    const h = String(Math.floor(s / 3600)).padStart(2, "0");
    const m = String(Math.floor((s / 60) % 60)).padStart(2, "0");
    const sec = String(s % 60).padStart(2, "0");
    return `${h}:${m}:${sec}`;
  }, [tick]);

  const logLines = [
    { t: "10:38:51", lane: "info", src: "CAM-003", msg: "Person A approaches East Entry" },
    { t: "10:38:53", lane: "info", src: "RDR-007", msg: "Badge AB-1042 swipe — Anika S." },
    { t: "10:38:54", lane: "info", src: "SNS-024", msg: "Door contact OPEN" },
    { t: "10:38:55", lane: "ai", src: "Netra-LM", msg: "Tailgate signature matched (Δ=1.4s)" },
    { t: "10:38:55", lane: "crit", src: "CAM-003", msg: "Person B crossed threshold" },
    { t: "10:38:56", lane: "warn", src: "Netra", msg: "Person B face not enrolled · conf 0.96" },
    { t: "10:38:58", lane: "crit", src: "system", msg: "INC-4471 created — SEV CRIT" },
    { t: "10:39:02", lane: "info", src: "SOC", msg: "Pager fired → on-call S. Rao" },
    { t: "10:39:14", lane: "info", src: "SOC", msg: "Operator acknowledged · clip pinned" },
  ];

  return (
    <div className="theater-frame">
      <div className="theater-chrome">
        <span className="lights"><i /><i /><i /></span>
        <span className="crumb">
          OPERATIONS &nbsp;/&nbsp; <b>Live cameras — HQ Bengaluru · 12 active</b>
        </span>
        <span className="live-ind"><span className="d" /> LIVE · {ts}</span>
      </div>

      <div className="cam-grid">
        <div className="cam-tile featured alert">
          <FakeCamFeed kind="tailgate" />
          <div className="cam-scrim" />
          <div className="cam-scan" />
          <div className="cam-head">
            <span className="rec" />
            <span>CAM-003 · East Entry — Badge</span>
            <span className="ts">{ts}</span>
          </div>
          <div className="bbox" style={{ left: "33%", top: "44%", width: "16%", height: "44%" }}>
            <span className="bbox-lbl">PERSON A · 0.98 · BADGE OK</span>
          </div>
          <div className="bbox crit" style={{ left: "21%", top: "45%", width: "16%", height: "44%" }}>
            <span className="bbox-lbl">PERSON B · 0.96 · NOT ENROLLED</span>
          </div>
          <div className="bbox warn" style={{ left: "55%", top: "26%", width: "10%", height: "46%" }}>
            <span className="bbox-lbl">DOOR · OPEN 2.1s</span>
          </div>
          <div className="cam-foot">
            <span className="crit-tag">● R-12 TAILGATE</span>
            <span>4K · 30FPS</span>
            <span style={{ marginLeft: "auto" }}>AI ON</span>
          </div>
        </div>

        <div className="cam-tile">
          <FakeCamFeed kind="dock" />
          <div className="cam-scrim" />
          <div className="cam-scan" />
          <div className="cam-head">
            <span className="rec" />
            <span>CAM-004 · Loading Dock</span>
            <span className="ts">{ts}</span>
          </div>
          <div className="bbox warn" style={{ left: "20%", top: "57%", width: "12%", height: "35%" }}>
            <span className="bbox-lbl">DWELL 6m 12s</span>
          </div>
          <div className="cam-foot">
            <span style={{ color: "var(--saffron)" }}>R-08 LOITER</span>
            <span style={{ marginLeft: "auto" }}>1080p · 24FPS</span>
          </div>
        </div>

        <div className="cam-tile">
          <FakeCamFeed kind="server" />
          <div className="cam-scrim" />
          <div className="cam-scan" />
          <div className="cam-head">
            <span className="rec" />
            <span>CAM-005 · Server Room</span>
            <span className="ts">{ts}</span>
          </div>
          <div className="cam-foot">
            <span>R-21 AFTER-HRS · OK</span>
            <span style={{ marginLeft: "auto", color: "var(--good)" }}>● ALL CLEAR</span>
          </div>
        </div>

        <div className="cam-tile">
          <FakeCamFeed kind="lobby" />
          <div className="cam-scrim" />
          <div className="cam-scan" />
          <div className="cam-head">
            <span className="rec" />
            <span>CAM-001 · Main Lobby</span>
            <span className="ts">{ts}</span>
          </div>
          <div className="bbox" style={{ left: "58%", top: "50%", width: "12%", height: "30%" }}>
            <span className="bbox-lbl">PERSON · 0.99</span>
          </div>
          <div className="cam-foot">
            <span>3 PERSONS</span>
            <span style={{ marginLeft: "auto", color: "var(--good)" }}>● OK</span>
          </div>
        </div>

        <div className="cam-tile">
          <FakeCamFeed kind="lot" />
          <div className="cam-scrim" />
          <div className="cam-scan" />
          <div className="cam-head">
            <span className="rec" />
            <span>CAM-007 · North Lot</span>
            <span className="ts">{ts}</span>
          </div>
          <div className="bbox warn" style={{ left: "46%", top: "55%", width: "10%", height: "32%" }}>
            <span className="bbox-lbl">FACE OBSCURED</span>
          </div>
          <div className="cam-foot">
            <span style={{ color: "var(--saffron)" }}>R-17 IDENTITY</span>
            <span style={{ marginLeft: "auto" }}>4K · 24FPS</span>
          </div>
        </div>

        <div className="cam-tile">
          <FakeCamFeed kind="roof" />
          <div className="cam-scrim" />
          <div className="cam-scan" />
          <div className="cam-head">
            <span className="rec" />
            <span>CAM-010 · Rooftop HVAC</span>
            <span className="ts">{ts}</span>
          </div>
          <div className="bbox warn" style={{ left: "83%", top: "38%", width: "14%", height: "42%" }}>
            <span className="bbox-lbl">DOOR HELD · 3m 40s</span>
          </div>
          <div className="cam-foot">
            <span style={{ color: "var(--saffron)" }}>R-09 DOOR</span>
            <span style={{ marginLeft: "auto" }}>1080p</span>
          </div>
        </div>
      </div>

      <div className="ai-log">
        <div className="ai-log-head">
          <h4>Netra · Reasoning</h4>
          <span className="think"><i /> Thinking</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {logLines.map((l, i) => (
            <div key={i} className={`ai-log-line ${l.lane}`}>
              <span className="t">{l.t}</span>
              <div>
                <div className="msg">{l.msg}</div>
                <span className="src">{l.src}</span>
              </div>
            </div>
          ))}
        </div>
        <div className="ai-log-foot">
          <div className="stat"><b>1.42s</b><span>P95 LATENCY</span></div>
          <div className="stat" style={{ marginLeft: "auto" }}><b>96.4%</b><span>PRECISION</span></div>
          <div className="stat"><b>INC-4471</b><span>OPEN</span></div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { LiveTheater, FakeCamFeed });