/* =========================================================
   NETRA AI — Live screen + Alerts inbox + Incident detail
   ========================================================= */

/* ============ LIVE ============ */
const ScreenLive = ({ go }) => {
  const { CAMERAS } = window.NETRA;
  const [grid, setGrid] = React.useState("3x3");
  const [focused, setFocused] = React.useState(null);
  const visible = CAMERAS.slice(0, grid === "2x2" ? 4 : grid === "3x3" ? 9 : 12);

  const cols = grid === "2x2" ? 2 : grid === "3x3" ? 3 : 4;
  const sceneOf = c => {
    if (c.zone === "Lobby") return "lobby";
    if (c.zone === "Restricted" && c.name.toLowerCase().includes("server")) return "server";
    if (c.zone === "Restricted") return "lab";
    if (c.name.toLowerCase().includes("rooftop")) return "roof";
    if (c.name.toLowerCase().includes("dock")) return "dock";
    if (c.zone === "Perimeter") return "perimeter";
    return "common";
  };

  return (
    <div className="fade-in">
      <div style={{display: "flex", alignItems: "center", gap: 12, marginBottom: 16}}>
        <h2 style={{margin: 0, font: "500 18px var(--font-display)", color: "var(--ink-0)", letterSpacing: "-0.01em"}}>Live Operations</h2>
        <span className="pill iris"><span className="d" />12 cameras · 8 sensors</span>
        <div style={{flex: 1}} />
        <div style={{display: "flex", gap: 6, background: "var(--bg-1)", padding: 4, borderRadius: "var(--r-md)", border: "1px solid var(--line)"}}>
          {["2x2","3x3","4x3"].map(g => (
            <button key={g} className={`btn sm ${grid===g?"primary":"ghost"}`} onClick={()=>setGrid(g)} style={{height: 22}}>{g}</button>
          ))}
        </div>
        <button className="btn sm"><Icon name="filter" size={12} />Filter</button>
        <button className="btn sm primary"><Icon name="bolt" size={12} />AI Highlights</button>
      </div>

      <div style={{display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 12}}>
        {visible.map(c => (
          <div key={c.id} className={`cam ${c.alert==="crit"?"alert":""}`} onClick={()=>setFocused(c)}>
            {c.status === "off" ? (
              <div style={{position: "absolute", inset: 0, display: "grid", placeItems: "center", color: "var(--ink-3)", background: "#000"}}>
                <div style={{textAlign: "center"}}>
                  <Icon name="close" size={28} />
                  <div style={{font: "10px var(--font-mono)", marginTop: 8, letterSpacing: "0.16em"}}>FEED OFFLINE</div>
                </div>
              </div>
            ) : (
              <>
                <SimFeed scene={sceneOf(c)} seed={c.id.charCodeAt(4) + c.id.charCodeAt(5)} alert={c.alert} />
                <div className="scanline" />
              </>
            )}
            <div className="overlay" />
            <div className="head">
              {c.status === "live" && <span className="rec" />}
              <span className="name">{c.name}</span>
              <span className="ts">{c.id} · {new Date().toLocaleTimeString().slice(0,8)}</span>
            </div>
            <div className="foot">
              <span><StatusDot status={c.status} /></span>
              <span>{c.zone}</span>
              <span style={{marginLeft: "auto"}}>{c.res} · {c.fps}fps</span>
              {c.ai && <span style={{color: "var(--iris)"}}>● AI</span>}
            </div>
          </div>
        ))}
      </div>

      {focused && (
        <div onClick={()=>setFocused(null)}
             style={{position:"fixed", inset:0, zIndex:50, background:"rgba(0,0,0,0.7)", backdropFilter:"blur(8px)", display:"grid", placeItems:"center", padding: 40}}>
          <div onClick={e=>e.stopPropagation()} style={{width: "min(1200px, 95vw)"}}>
            <div className="cam" style={{aspectRatio: "16/9", borderRadius: 14}}>
              <SimFeed scene={sceneOf(focused)} seed={focused.id.charCodeAt(4)+focused.id.charCodeAt(5)} alert={focused.alert} />
              <div className="scanline" />
              <div className="overlay" />
              <div className="head">
                <span className="rec" />
                <span className="name">{focused.name}</span>
                <span className="ts">{focused.id} · {new Date().toLocaleTimeString()}</span>
              </div>
              <div className="foot">
                <span><StatusDot status={focused.status} /> {focused.zone}</span>
                <span style={{marginLeft: "auto"}}>{focused.res} · {focused.fps}fps · AI</span>
              </div>
            </div>
            <div style={{display:"flex", gap: 8, marginTop: 14, justifyContent: "center"}}>
              <button className="btn"><Icon name="rewind" size={12} />-10s</button>
              <button className="btn primary"><Icon name="play" size={12} />Live</button>
              <button className="btn"><Icon name="ff" size={12} />+10s</button>
              <button className="btn"><Icon name="download" size={12} />Snapshot</button>
              <button className="btn" onClick={()=>{ setFocused(null); go("incident"); }}><Icon name="incident" size={12} />Open Incident</button>
              <button className="btn ghost" onClick={()=>setFocused(null)}><Icon name="close" size={12} /></button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

/* ============ ALERTS ============ */
const ScreenAlerts = ({ go }) => {
  const { ALERTS } = window.NETRA;
  const [filter, setFilter] = React.useState("all");
  const [selected, setSelected] = React.useState(ALERTS[0].id);
  const list = filter === "all" ? ALERTS : ALERTS.filter(a => a.sev === filter);
  const sel = ALERTS.find(a => a.id === selected) || ALERTS[0];

  return (
    <div className="fade-in" style={{display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 16, height: "calc(100vh - 100px)"}}>
      {/* list */}
      <div className="panel" style={{display: "flex", flexDirection: "column", overflow: "hidden"}}>
        <div className="panel-h">
          <h3>Alerts</h3>
          <span className="sub">{list.length} of {ALERTS.length}</span>
          <div className="actions">
            {["all","crit","warn","info"].map(f => (
              <button key={f} className={`btn sm ${filter===f?"primary":"ghost"}`} onClick={()=>setFilter(f)}>
                {f === "all" ? "All" : f === "crit" ? "Critical" : f === "warn" ? "Warning" : "Info"}
              </button>
            ))}
          </div>
        </div>
        <div style={{overflow: "auto", flex: 1}}>
          {list.map(a => (
            <div key={a.id} onClick={()=>setSelected(a.id)}
                 style={{
                   padding: "14px 18px",
                   borderBottom: "1px solid var(--line)",
                   cursor: "pointer",
                   background: selected===a.id ? "rgba(77,214,255,0.05)" : "transparent",
                   borderLeft: selected===a.id ? "2px solid var(--iris)" : "2px solid transparent",
                 }}>
              <div style={{display: "flex", alignItems: "center", gap: 8, marginBottom: 6}}>
                <SevPill sev={a.sev} />
                <span className="mono" style={{fontSize: 11, color: "var(--ink-3)"}}>{a.id}</span>
                <span style={{flex:1}} />
                <span className="mono" style={{fontSize: 11, color: "var(--ink-3)"}}>{a.when}</span>
              </div>
              <div style={{color: "var(--ink-0)", fontSize: 14, marginBottom: 4}}>{a.title}</div>
              <div style={{display: "flex", gap: 12, fontSize: 12, color: "var(--ink-3)"}}>
                <span><Icon name="cam" size={12} style={{verticalAlign: "-2px", marginRight: 4}} />{a.cam}</span>
                <span>{a.zone}</span>
                <span className="mono">conf {(a.conf*100).toFixed(0)}%</span>
                <span style={{marginLeft: "auto", color: a.status === "open" ? "var(--bad)" : a.status === "investigating" ? "var(--warn)" : a.status === "ack" ? "var(--info)" : "var(--good)"}}>● {a.status}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* detail */}
      <div className="panel" style={{display: "flex", flexDirection: "column", overflow: "auto"}}>
        <div className="panel-h">
          <SevPill sev={sel.sev} />
          <h3>{sel.title}</h3>
          <span className="sub">{sel.id}</span>
          <div className="actions">
            <button className="btn sm" onClick={()=>go("incident")}><Icon name="expand" size={12} />Open Full</button>
            <button className="btn sm primary"><Icon name="check" size={12} />Acknowledge</button>
          </div>
        </div>
        <div className="panel-b" style={{flex: 1}}>
          <div className="cam" style={{aspectRatio: "16/9", borderRadius: 10, marginBottom: 16}}>
            <SimFeed scene={sel.zone==="Restricted"?"server":sel.zone==="Lobby"?"lobby":"perimeter"} seed={parseInt(sel.id.slice(-2))} alert={sel.sev} />
            <div className="scanline" />
            <div className="overlay" />
            <div className="head"><span className="rec" /><span className="name">{sel.cam}</span><span className="ts">{sel.when}</span></div>
          </div>

          <div className="grid k2" style={{marginBottom: 16}}>
            <Field lbl="Zone" v={sel.zone} />
            <Field lbl="Rule" v={sel.rule} />
            <Field lbl="People" v={sel.people} />
            <Field lbl="Confidence" v={(sel.conf*100).toFixed(0)+"%"} />
          </div>

          <h4 style={{font: "500 12px var(--font-mono)", color: "var(--ink-3)", letterSpacing: "0.16em", textTransform: "uppercase", margin: "8px 0"}}>Analysis</h4>
          <p style={{color: "var(--ink-1)", margin: "0 0 16px"}}>{sel.desc}</p>

          <h4 style={{font: "500 12px var(--font-mono)", color: "var(--ink-3)", letterSpacing: "0.16em", textTransform: "uppercase", margin: "8px 0"}}>Quick Actions</h4>
          <div style={{display: "flex", flexWrap: "wrap", gap: 8}}>
            <button className="btn"><Icon name="users" size={12} />Assign</button>
            <button className="btn"><Icon name="flag" size={12} />Flag</button>
            <button className="btn"><Icon name="history" size={12} />Replay 60s</button>
            <button className="btn"><Icon name="bell" size={12} />Notify SOC</button>
            <button className="btn crit"><Icon name="alert" size={12} />Escalate</button>
          </div>
        </div>
      </div>
    </div>
  );
};

const Field = ({lbl, v}) => (
  <div style={{background: "var(--bg-2)", padding: "10px 12px", borderRadius: "var(--r-md)", border: "1px solid var(--line)"}}>
    <div style={{font: "10px var(--font-mono)", color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.14em"}}>{lbl}</div>
    <div style={{color: "var(--ink-0)", marginTop: 4, fontSize: 14}}>{v}</div>
  </div>
);

/* ============ INCIDENT ============ */
const ScreenIncident = ({ go }) => {
  const { ALERTS, TIMELINE_4471 } = window.NETRA;
  const sel = ALERTS[0]; // INC-4471 — the tailgate
  const [playT, setPlayT] = React.useState(0);
  const [playing, setPlaying] = React.useState(true);
  React.useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => setPlayT(t => (t + 0.5) % 60), 100);
    return () => clearInterval(id);
  }, [playing]);

  return (
    <div className="fade-in">
      {/* header */}
      <div style={{display:"flex", alignItems:"flex-start", gap: 12, marginBottom: 16}}>
        <button className="btn ghost" onClick={()=>go("alerts")} style={{transform: "rotate(180deg)"}}><Icon name="chevron" size={14} /></button>
        <div>
          <div style={{display: "flex", alignItems: "center", gap: 10, marginBottom: 6}}>
            <SevPill sev={sel.sev} />
            <span className="mono" style={{color: "var(--ink-3)", fontSize: 11}}>{sel.id}</span>
            <span className="tag">OPEN</span>
          </div>
          <h2 style={{margin: 0, font: "500 22px var(--font-display)", color: "var(--ink-0)", letterSpacing: "-0.01em"}}>{sel.title}</h2>
          <div style={{color: "var(--ink-3)", fontSize: 12, marginTop: 4, fontFamily: "var(--font-mono)"}}>
            10:38:55 IST · {sel.zone} · {sel.cam} · auto-correlated by Netra
          </div>
        </div>
        <div style={{flex: 1}} />
        <div style={{display: "flex", gap: 6}}>
          <button className="btn"><Icon name="users" size={12} />Assign</button>
          <button className="btn"><Icon name="download" size={12} />Export</button>
          <button className="btn crit"><Icon name="alert" size={12} />Escalate</button>
          <button className="btn primary"><Icon name="check" size={12} />Resolve</button>
        </div>
      </div>

      <div style={{display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginBottom: 16}}>
        {/* main replay */}
        <div className="panel">
          <div className="panel-h">
            <h3>Synchronised Replay</h3>
            <span className="sub">3 cameras · −5s … +10s</span>
            <div className="actions">
              <span className="tag mono">{(playT - 5).toFixed(1)}s</span>
            </div>
          </div>
          <div className="panel-b" style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10}}>
            <div className="cam alert" style={{aspectRatio: "16/9", gridColumn: "1 / -1"}}>
              <SimFeed scene="perimeter" seed={71} alert="crit" />
              <div className="scanline" />
              <div className="overlay" />
              <div className="head"><span className="rec" /><span className="name">CAM-003 East Entry</span><span className="ts">10:38:55</span></div>
            </div>
            <div className="cam" style={{aspectRatio: "16/9"}}>
              <SimFeed scene="lobby" seed={23} alert={null} />
              <div className="scanline" />
              <div className="overlay" />
              <div className="head"><span className="rec" /><span className="name">CAM-002 Reception</span><span className="ts">10:38:55</span></div>
            </div>
            <div className="cam" style={{aspectRatio: "16/9"}}>
              <SimFeed scene="common" seed={43} alert={null} />
              <div className="scanline" />
              <div className="overlay" />
              <div className="head"><span className="rec" /><span className="name">CAM-001 Lobby</span><span className="ts">10:38:55</span></div>
            </div>
            {/* scrubber */}
            <div style={{gridColumn: "1 / -1", padding: "12px 4px"}}>
              <div style={{display:"flex", alignItems:"center", gap: 12, marginBottom: 8}}>
                <button className="btn sm"><Icon name="rewind" size={12} /></button>
                <button className="btn sm primary" onClick={()=>setPlaying(p=>!p)}>
                  <Icon name={playing?"pause":"play"} size={12} />{playing?"Pause":"Play"}
                </button>
                <button className="btn sm"><Icon name="ff" size={12} /></button>
                <span className="mono" style={{color: "var(--ink-3)", fontSize: 11, marginLeft: "auto"}}>0.5×</span>
                <span className="mono" style={{color: "var(--ink-3)", fontSize: 11}}>1.0×</span>
                <span className="mono" style={{color: "var(--ink-1)", fontSize: 11}}>2.0×</span>
              </div>
              <div style={{position: "relative", height: 30, background: "var(--bg-2)", borderRadius: 6, border: "1px solid var(--line)", overflow: "hidden"}}>
                {/* event ticks */}
                {TIMELINE_4471.map((e,i) => {
                  const [h,m,s] = e.t.split(":").map(Number);
                  const start = 10*3600 + 38*60 + 51;
                  const pos = ((h*3600+m*60+s) - start) / 25 * 100;
                  return <div key={i} style={{position: "absolute", left: `${pos}%`, top: 0, bottom: 0, width: 2, background: e.sev==="crit"?"var(--crit)":e.sev==="warn"?"var(--warn)":"var(--iris)", opacity: 0.6}} />;
                })}
                <div style={{position: "absolute", left: `${(playT/15)*100}%`, top: 0, bottom: 0, width: 1, background: "var(--ink-0)", boxShadow: "0 0 8px var(--ink-0)"}} />
              </div>
              <div style={{display: "flex", justifyContent: "space-between", marginTop: 6, font: "10px var(--font-mono)", color: "var(--ink-3)", letterSpacing: "0.1em"}}>
                <span>10:38:51</span><span>10:38:58</span><span>10:39:05</span><span>10:39:12</span>
              </div>
            </div>
          </div>
        </div>

        {/* AI explanation */}
        <div className="panel">
          <div className="panel-h">
            <h3>AI Correlation</h3>
            <span className="sub">Netra signature R-12</span>
          </div>
          <div className="panel-b">
            <div style={{background: "var(--bg-2)", padding: 14, borderRadius: "var(--r-md)", border: "1px solid rgba(255,61,110,0.2)", marginBottom: 14}}>
              <div style={{font: "10px var(--font-mono)", color: "var(--crit)", letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 6}}>SIGNATURE MATCH · 96%</div>
              <div style={{color: "var(--ink-0)", marginBottom: 6}}>Tailgate · Identity-Obscured Secondary</div>
              <div style={{color: "var(--ink-2)", fontSize: 12, lineHeight: 1.5}}>
                Single badge swipe at <b style={{color:"var(--ink-1)"}}>RDR-007</b>, two persons crossed door contact within <b style={{color:"var(--saffron)"}}>1.4s</b>. Secondary face not enrolled. Net signal weight: 0.96.
              </div>
            </div>

            <h4 style={{font: "500 11px var(--font-mono)", color: "var(--ink-3)", letterSpacing: "0.16em", textTransform: "uppercase", margin: "12px 0 8px"}}>Signal Weights</h4>
            {[
              ["Door contact bi-cross", 0.92, "crit"],
              ["Single badge event",   0.88, "warn"],
              ["Face B unenrolled",    0.81, "warn"],
              ["Velocity pattern",     0.74, "info"],
              ["Time-of-day prior",    0.31, "info"],
            ].map(([lbl, v, sev]) => (
              <div key={lbl} style={{display: "flex", alignItems: "center", gap: 10, padding: "6px 0"}}>
                <div style={{flex: 1, fontSize: 12, color: "var(--ink-1)"}}>{lbl}</div>
                <div style={{width: 120}} className={`meter ${sev}`}><i style={{width: `${v*100}%`}}/></div>
                <div className="mono" style={{width: 36, textAlign: "right", fontSize: 11, color: "var(--ink-2)"}}>{v.toFixed(2)}</div>
              </div>
            ))}

            <h4 style={{font: "500 11px var(--font-mono)", color: "var(--ink-3)", letterSpacing: "0.16em", textTransform: "uppercase", margin: "16px 0 8px"}}>People involved</h4>
            <div style={{display: "flex", gap: 10, alignItems: "center", padding: "8px 0", borderTop: "1px solid var(--line)"}}>
              <Avatar initials="AS" />
              <div>
                <div style={{color: "var(--ink-0)", fontSize: 13}}>Anika Sharma</div>
                <div style={{color: "var(--ink-3)", fontSize: 11, fontFamily:"var(--font-mono)"}}>AB-1042 · L3 · badge holder</div>
              </div>
              <span className="pill good" style={{marginLeft: "auto"}}>Authorised</span>
            </div>
            <div style={{display: "flex", gap: 10, alignItems: "center", padding: "8px 0", borderTop: "1px solid var(--line)"}}>
              <Avatar initials="?" color="rgba(255,61,110,0.2)" />
              <div>
                <div style={{color: "var(--ink-0)", fontSize: 13}}>Unknown #B</div>
                <div style={{color: "var(--ink-3)", fontSize: 11, fontFamily:"var(--font-mono)"}}>face not enrolled · hood/mask 28% confidence</div>
              </div>
              <span className="pill crit" style={{marginLeft: "auto"}}>Unauth</span>
            </div>
          </div>
        </div>
      </div>

      {/* Timeline river */}
      <div className="panel">
        <div className="panel-h">
          <h3>Event Timeline · River</h3>
          <span className="sub">Lanes converge on incident</span>
        </div>
        <div className="panel-b" style={{paddingTop: 8}}>
          <TimelineRiver events={TIMELINE_4471} height={260} />
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenLive, ScreenAlerts, ScreenIncident });