// pages/mobile/MobileCameras.jsx

function MobileCameras({ initialCam, onCamConsumed }) {
  const [open, setOpen] = React.useState(null);

  React.useEffect(() => {
    if (initialCam) {
      setOpen(initialCam);
      onCamConsumed && onCamConsumed();
    }
  }, [initialCam]);

  return (
    <>
      <h1 className="m-title">Câmeras</h1>
      <div className="m-subtitle">{CAMERAS.length} feeds ao vivo · toque p/ ampliar</div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 10 }}>
        {CAMERAS.map(c => (
          <div key={c.id} className="m-card" style={{ padding: 0 }}>
            <div onClick={() => setOpen(c)} style={{ borderRadius: "14px 14px 0 0", overflow: "hidden", aspectRatio: "16/10" }}>
              <LiveHlsPlayer cam={c} big />
            </div>
            <div style={{ padding: "10px 14px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{c.name}</div>
                <div style={{ fontSize: 10.5, color: "var(--fg-4)", fontFamily: "var(--font-mono)", marginTop: 1 }}>{c.zone}</div>
              </div>
              <button className="btn" style={{ height: 28, padding: "0 10px", fontSize: 11.5 }} onClick={() => setOpen(c)}>
                <I.Maximize size={12} /> ampliar
              </button>
            </div>
          </div>
        ))}
      </div>

      {open && <CamFullscreen cam={open} onClose={() => setOpen(null)} />}
    </>
  );
}

function CamFullscreen({ cam, onClose }) {
  const [time, setTime] = React.useState(new Date());
  React.useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="m-cam-fullscreen">
      {/* Rotate hint — the user is holding portrait */}
      <div className="m-cam-rotate-hint">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="6" y="2" width="12" height="20" rx="2"/>
          <circle cx="12" cy="18" r="1" fill="currentColor"/>
        </svg>
        gire para landscape · experiência cheia
      </div>

      <button className="m-cam-close" onClick={onClose}><I.X size={18} /></button>

      <div className="m-cam-fullscreen-inner" style={{
        display: "flex", alignItems: "center", justifyContent: "center"
      }}>
        <div style={{ width: "100%", height: "100%" }}>
          <LiveHlsPlayer cam={cam} big />
        </div>

        {/* HUD */}
        <div style={{
          position: "absolute", bottom: 14, left: 14, right: 14,
          display: "flex", justifyContent: "space-between",
          color: "rgba(255,255,255,0.7)", fontFamily: "var(--font-mono)", fontSize: 10.5,
          pointerEvents: "none"
        }}>
          <span><span className="status-dot live" style={{ display: "inline-block", marginRight: 6, verticalAlign: "middle" }}></span>{cam.name}</span>
          <span>{time.toLocaleTimeString("pt-BR")}</span>
        </div>
      </div>
    </div>
  );
}

window.MobileCameras = MobileCameras;