/* eagle.jsx — Eagle Eye experience router. Owns the theme mode (persisted),
   the selected alert, the Alert Launcher, and which screen is shown. Provides
   the theme context so every Eagle Eye component re-themes on toggle. */

function EagleEye({ screen, navigate, onBack }) {
  const [mode, setMode] = React.useState(() => { try { return localStorage.getItem("eagle-theme") || "dark"; } catch (e) { return "dark"; } });
  const [alert, setAlert] = React.useState(window.ALERTS[0]);
  const [launcher, setLauncher] = React.useState(false);
  // bumped whenever the Alert Launcher picks an alert → tells the (always-mounted)
  // Agent screen to auto-run the investigation. Other screens ignore it.
  const [agentAutoRun, setAgentAutoRun] = React.useState(0);
  const scr = screen || "soc";

  const E = window.EAGLE_THEMES[mode] || window.EAGLE_THEMES.dark;
  const toggleTheme = () => setMode((m) => { const n = m === "dark" ? "light" : "dark"; try { localStorage.setItem("eagle-theme", n); } catch (e) {} return n; });

  // Screen is URL-driven: navigating updates the hash (#/eagle/<screen>), which
  // re-renders this still-mounted component with a new `screen` prop. Because the
  // live screens below never unmount, an in-flight run survives every switch.
  const go = (s) => navigate("#/eagle/" + s);
  const toSoc = () => navigate("#/eagle/soc");
  const openLauncher = () => setLauncher(true);
  // Alert Launcher selection: load the alert, jump to Agent, and auto-run it.
  const onLauncherSelect = (a) => { setAlert(a); setAgentAutoRun((n) => n + 1); navigate("#/eagle/agent"); };

  const navProps = { mode, onToggleTheme: toggleTheme, onPickAlert: openLauncher, onGo: go };
  // visibility helper for the live screens (kept mounted so in-flight runs survive tab switches)
  const vis = (s) => ({ display: scr === s ? "block" : "none" });

  return (
    <window.EagleThemeCtx.Provider value={E}>
      <div className="h-full w-full a-fade" style={{ background: E.bg, fontFamily: E.sans }}>
        {/* ---- live-run screens: ALWAYS mounted, toggled by visibility. Never remount
                these — unmounting would kill a running stream/investigation. */}
        <div className="h-full w-full" style={vis("model")}>
          <window.ModelScreen alert={alert} onBack={toSoc} active={scr === "model"} {...navProps} />
        </div>
        <div className="h-full w-full" style={vis("app")}>
          <window.AppScreen alert={alert} onBack={toSoc} active={scr === "app"} {...navProps} />
        </div>
        <div className="h-full w-full" style={vis("agent")}>
          <window.AgentScreen alert={alert} onBack={toSoc} active={scr === "agent"} autoRun={agentAutoRun} {...navProps} />
        </div>

        {/* ---- static screens: no live run, safe to mount on demand */}
        {scr === "soc" && <window.SocDashboard alert={alert} onLaunch={go} onPickAlert={openLauncher} onSelectAlert={(id) => setAlert(window.getAlert(id))} onExit={onBack} onGo={go} mode={mode} onToggleTheme={toggleTheme} />}
        {scr === "compare" && <window.CompareScreen onBack={toSoc} onLaunch={go} onGo={go} mode={mode} onToggleTheme={toggleTheme} />}

        <window.AlertLauncher open={launcher} onClose={() => setLauncher(false)} onSelect={onLauncherSelect} currentId={alert.id} />
      </div>
    </window.EagleThemeCtx.Provider>
  );
}

window.EagleEye = EagleEye;