// ==== Multi-agent SOC sim =============================================

function SocSim() {
  const events = AYUSH.SOC_EVENTS;
  const [running, setRunning] = useState(true);
  const [idx, setIdx] = useState(0);
  const [progress, setProgress] = useState(0);
  const streamRef = useRef(null);

  useEffect(() => {
    if (!running) return;
    if (idx >= events.length) {
      // loop after a beat
      const t = setTimeout(() => { setIdx(0); setProgress(0); }, 2400);
      return () => clearTimeout(t);
    }
    const next = Math.min(events.length, idx + 1);
    const dur = 700 + Math.random() * 700;
    const start = performance.now();
    let raf;
    function f() {
      const p = Math.min(1, (performance.now() - start) / dur);
      const pct = (next / events.length) * 100;
      setProgress(pct - ((1 - p) * (100 / events.length)));
      if (p < 1) raf = requestAnimationFrame(f);
      else setIdx(next);
    }
    f();
    return () => cancelAnimationFrame(raf);
  }, [running, idx, events.length]);

  useEffect(() => {
    if (streamRef.current) streamRef.current.scrollTop = streamRef.current.scrollHeight;
  }, [idx]);

  return (
    <section id="soc" className="scene" data-screen-label="08 SOC Sim">
      <div className="scene-head">
        <div className="eyebrow">Simulation</div>
        <h2>Five agents.<br />One <em>live</em> incident.</h2>
          <p className="lede">
            Watch the SOC do what it does — in real time. Planner, forensics, identity, threat-intel, executor, critic. Lethal-trifecta is checked before any mutation. Mutations require human gate. Saga rollback armed.
          </p>
      </div>

      <div className="soc-frame">
        <div className="soc-incident">
          <h4>active incident</h4>
          <div className="severity"><span className="dot magenta"/> SEVERITY · HIGH · S3</div>
          <div className="title">Anomalous NHI privilege drift detected on workload <span style={{color:"var(--amber)"}}>etl-batch</span> from edge zone <span className="mono">eu-1</span>.</div>

          <div className="meta">
            <div className="row"><span className="k">ticket</span><span>INC-2026-3814</span></div>
            <div className="row"><span className="k">campaign</span><span style={{color:"var(--mint)"}}>cobalt-dna</span></div>
            <div className="row"><span className="k">blast radius</span><span>14 nodes — db.primary → idp</span></div>
            <div className="row"><span className="k">flight rec</span><span>348 spans · 12 tool calls</span></div>
          </div>

          <div className="soc-progress">
            <div className="lbl"><span>investigation</span><span style={{color:"var(--mint)"}}>{Math.round(progress)}%</span></div>
            <div className="bar"><div className="fill" style={{width: `${progress}%`}}/></div>
            <div className="lbl"><span>cost</span><span style={{color:"var(--ink)"}}>$2.10 · 8.2k tokens</span></div>
          </div>
        </div>

        <div className="soc-agents">
          <h4>agent stream · 5 agents online</h4>
          <div className="stream tele" ref={streamRef}>
            {events.slice(0, idx).map((e, i) => (
              <div key={i} className="row" style={{animation: "bl-in .25s var(--easing)"}}>
                <span className="ts">{e.ts}</span>
                <span className={"agent " + (e.color || "")}>[{e.agent}]</span>
                <span className="msg" dangerouslySetInnerHTML={{__html: e.msg}}/>
              </div>
            ))}
            {idx >= events.length && (
              <div className="row" style={{marginTop: 12}}>
                <span className="ts">--</span>
                <span className="agent">[done]</span>
                <span className="msg" style={{color:"var(--mint)"}}>incident closed · saga commit · post-mortem queued</span>
              </div>
            )}
          </div>
          <div className="ctrl">
            <button className="btn" onClick={() => setRunning(r => !r)}>{running ? "pause" : "resume"}</button>
            <button className="btn ghost" onClick={() => { setIdx(0); setProgress(0); }}>↺ replay</button>
            <span className="mono muted" style={{fontSize: 11, marginLeft: "auto"}}>simulated · pattern from production</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SocSim });