// Landing — app de monitoreo (datos ficticios) dentro del teléfono del bento; rota entre Resumen, Servidores, Cámaras y Eventos
const { INFRA_PHOTOS: MPH } = window.PORTFOLIO_DATA;
const MON_SRV = [["hetzner-01", "Proxmox · 12 LXC", 34, 61], ["pbx-core", "Asterisk · SIP", 18, 42], ["nas-backup", "ZFS · 18 TB", 7, 29]];
const MON_SRV_FULL = [["hetzner-01", "Proxmox · Falkenstein", 34, 61, "41 días", "1,2 Gb/s"], ["pbx-core", "Asterisk · SIP trunk", 18, 42, "12 días", "84 llamadas"], ["nas-backup", "ZFS · 18 TB · 72% usado", 7, 29, "203 días", "412 GB / noche"], ["edge-fw", "FortiGate · WireGuard", 12, 38, "97 días", "63 túneles"]];
const MON_CT = Array.from({ length: 28 }, (_, i) => (i === 19 ? "warn" : "ok"));
const MON_EV = [["03:12", "Backup nocturno completado", "hetzner-01 → nas-backup · 412 GB"], ["02:00", "Reinicio programado", "pbx-core · 48 s sin servicio"], ["ayer", "Cámara 03 recuperó señal", "Depósito · 2 min sin video"]];
const MON_EV_FULL = [["Hoy", [["06:40", "ok", "Certificados renovados", "*.kopelsanchez.com · 90 días"], ["03:12", "ok", "Backup nocturno completado", "hetzner-01 → nas-backup · 412 GB"], ["02:00", "info", "Reinicio programado", "pbx-core · 48 s sin servicio"]]], ["Ayer", [["22:15", "warn", "CPU alta en odoo-web", "92% durante 4 min · normalizado"], ["18:03", "ok", "Cámara 03 recuperó señal", "Depósito · 2 min sin video"], ["09:30", "ok", "Deploy dialer v2.4.1", "600+ tests · 0 fallos"]]]];
const MON_CAMS = [[0, "CAM 01", "Rack principal"], [3, "CAM 03", "Depósito"], [5, "CAM 04", "Entrada"], [7, "CAM 06", "Sala técnica"]];
const MON_PAGES = ["Resumen", "Servidores", "Cámaras", "Eventos"];
const MI = {
  bell: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0"/></svg>,
  cam: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>,
  srv: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><path d="M7 7.5h.01M7 16.5h.01"/></svg>,
  box: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"><path d="m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z"/><path d="M4 7.5 12 12l8-4.5M12 12v9"/></svg>,
};
const Bars = ({ cpu, ram }) => <div className="mon-bars"><div><small>CPU</small><i style={{ "--v": `${cpu}%` }}></i></div><div><small>RAM</small><i style={{ "--v": `${ram}%` }}></i></div></div>;

function MonResumen() {
  return (
    <>
      <div className="mon-card">
        <div className="mon-ct"><span>{MI.srv}Servidores</span><em>3 / 3 en línea</em></div>
        {MON_SRV.map(([n, d, cpu, ram]) => <div className="mon-srv" key={n}><span className="mon-dot"></span><div className="mon-srv-t"><b>{n}</b><small>{d}</small></div><Bars cpu={cpu} ram={ram} /></div>)}
      </div>
      <div className="mon-row">
        <div className="mon-card"><div className="mon-ct"><span>{MI.box}Containers</span><em>27 / 28</em></div><div className="mon-grid">{MON_CT.map((s, i) => <i key={i} className={s} style={{ "--i": i }}></i>)}</div></div>
        <div className="mon-card mon-cams"><div className="mon-ct"><span>{MI.cam}Cámaras</span><em>8 live</em></div>{MON_CAMS.slice(0, 2).map(([p, c, l]) => <div className="mon-cam" key={c}><img src={MPH[p].src} alt="" loading="lazy" /><span><i></i>{c} · {l}</span></div>)}</div>
      </div>
      <div className="mon-card">
        <div className="mon-ct"><span>{MI.bell}Eventos</span><em>Últimas 24 h</em></div>
        {MON_EV.map(([t, a, b]) => <div className="mon-ev" key={a}><time>{t}</time><div><b>{a}</b><small>{b}</small></div></div>)}
      </div>
    </>
  );
}
function MonServidores() {
  return (
    <>
      <div className="mon-kp"><div><small>Uptime 30 d</small><b>99,98%</b></div><div><small>Carga media</small><b>0,42</b></div><div><small>Alertas</small><b>0</b></div></div>
      {MON_SRV_FULL.map(([n, d, cpu, ram, up, io]) => (
        <div className="mon-card mon-srv-card" key={n}>
          <div className="mon-srv"><span className="mon-dot"></span><div className="mon-srv-t"><b>{n}</b><small>{d}</small></div><Bars cpu={cpu} ram={ram} /></div>
          <div className="mon-meta"><span>Uptime <b>{up}</b></span><span>{io}</span><span className="mon-spark">{[3, 5, 4, 7, 6, 8, 5, 9, 7, 6, 8, 10].map((v, i) => <i key={i} style={{ "--h": `${v * 10}%`, "--i": i }}></i>)}</span></div>
        </div>
      ))}
    </>
  );
}
function MonCamaras() {
  return (
    <>
      <div className="mon-kp"><div><small>En vivo</small><b>8 / 8</b></div><div><small>Grabación</small><b>14 días</b></div><div><small>Movimiento</small><b>3 hoy</b></div></div>
      <div className="mon-camgrid">{MON_CAMS.map(([p, c, l]) => <div className="mon-cam big" key={c}><img src={MPH[p].src} alt="" loading="lazy" /><span><i></i>{c} · {l}</span><em>1080p</em></div>)}</div>
      <div className="mon-card"><div className="mon-ct"><span>{MI.cam}Último movimiento</span><em>07:58</em></div><div className="mon-ev"><time>07:58</time><div><b>CAM 04 · Entrada</b><small>Ingreso de personal · clip de 12 s guardado</small></div></div></div>
    </>
  );
}
function MonEventos() {
  return (
    <>
      <div className="mon-filters"><b className="mon-chip" data-on="">Todos</b><b className="mon-chip">Alertas</b><b className="mon-chip">Backups</b></div>
      {MON_EV_FULL.map(([day, items]) => (
        <div className="mon-card" key={day}>
          <div className="mon-ct"><span>{day}</span><em>{items.length} eventos</em></div>
          {items.map(([t, s, a, b]) => <div className="mon-ev" key={a}><time>{t}</time><div className="mon-evb"><span className={`mon-st ${s}`}></span><div><b>{a}</b><small>{b}</small></div></div></div>)}
        </div>
      ))}
    </>
  );
}

function MonScreen() {
  const [p, setP] = React.useState(0);
  const [out, setOut] = React.useState(false);
  const reduced = React.useMemo(() => matchMedia("(prefers-reduced-motion: reduce)").matches, []);
  React.useEffect(() => {
    if (reduced) return;
    const a = setTimeout(() => setOut(true), 5200);
    const b = setTimeout(() => { setP(k => (k + 1) % MON_PAGES.length); setOut(false); }, 5600);
    return () => { clearTimeout(a); clearTimeout(b); };
  }, [p]);
  const titles = ["Todo en orden", "4 servidores", "8 cámaras en vivo", "6 eventos hoy"];
  return (
    <div className="scr mon">
      <div className="mon-hd"><div><small>Lunes 6:42 · Montevideo</small><b key={p} className="mon-title">{titles[p]}</b></div><span className="mon-bell">{MI.bell}<i>3</i></span></div>
      <div className="mon-seg">{MON_PAGES.map((n, k) => <span key={n} data-on={k === p ? "" : undefined}>{n}</span>)}</div>
      <div className={`mon-page${out ? " out" : ""}`} key={p}>{[<MonResumen />, <MonServidores />, <MonCamaras />, <MonEventos />][p]}</div>
    </div>
  );
}

Object.assign(window, { MonScreen });