/* Hunian Kita — CCTV komplek (live camera grid) */

function CCTV({ ctx }) {
  const HK = window.HK;
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => { const t = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(t); }, []);
  const ts = now.toLocaleTimeString("id-ID", { hour12: false });
  const date = now.toLocaleDateString("id-ID", { day: "2-digit", month: "2-digit", year: "numeric" });
  const online = HK.cctv.filter((c) => c.status === "online").length;
  const offline = HK.cctv.length - online;
  const resident = ctx.role === "penghuni";

  return (
    <div className="content-inner">
      <div className="mini-stats">
        <div className="ms"><span className="msv">{HK.cctv.length}</span><span className="msl">Total kamera</span></div>
        <div className="ms"><span className="msv" style={{ color: "var(--pos)" }}>{online}</span><span className="msl">Online</span></div>
        <div className="ms"><span className="msv" style={{ color: offline ? "var(--neg)" : "var(--t1)" }}>{offline}</span><span className="msl">Offline</span></div>
        <div className="ms"><span className="msv">30 hari</span><span className="msl">Rekaman tersimpan</span></div>
      </div>

      <div className="section-title mt"><h2>Pantauan langsung</h2><span className="statline">{resident ? "Kamera area umum komplek" : "Semua titik · East & main gate"}</span>
        <div className="right"><span className="badge pos"><span className="bdot" />Live · {ts}</span></div></div>

      <div className="cam-grid">
        {HK.cctv.map((c) => {
          const on = c.status === "online";
          return (
            <div className={"cam " + c.status} key={c.id}>
              <div className="feed">
                {on && <Icon name="cctv" size={46} className="bgico" />}
                {!on && <div className="offl"><Icon name="video-off" size={32} /><span className="ol">TIDAK ADA SINYAL</span></div>}
                <div className="ov">
                  <div className="top">
                    {on ? <span className="rec"><span className="d" />LIVE</span> : <span className="rec" style={{ background: "rgba(110,116,128,.85)" }}>OFFLINE</span>}
                    <span className="ts">{date} {ts}</span>
                  </div>
                  <div className="nm">{c.name}</div>
                </div>
              </div>
              <div className="bar2">
                <span className="live-dot" style={{ background: on ? "var(--pos)" : "var(--neg)" }} />
                <div style={{ flex: 1, minWidth: 0 }}><div className="cn">{c.name}</div><div className="ca">{c.id} · {c.area} · {c.res}</div></div>
                <button className="iconbtn" style={{ width: 32, height: 32 }} onClick={() => ctx.toast(on ? "Membuka " + c.name + " layar penuh" : c.name + " sedang offline")}><Icon name="maximize" size={15} /></button>
              </div>
            </div>
          );
        })}
      </div>

      {offline > 0 && (
        <div className="callout mt" style={{ borderColor: "var(--warn)" }}>
          <span className="cic" style={{ background: "var(--warn)" }}><Icon name="triangle-alert" size={20} /></span>
          <div style={{ flex: 1 }}><div className="ct" style={{ fontSize: 13.5 }}>{offline} kamera offline — Gerbang Timur sedang diperbaiki</div><div className="cm">Terhubung ke tiket perbaikan C-2415 · Tim Keamanan menangani.</div></div>
          {!resident && <button className="btn ghost sm" onClick={() => ctx.go("complaints")}>Lihat tiket</button>}
        </div>
      )}
    </div>
  );
}

window.CCTV = CCTV;