/* global React, ReactDOM, Sidebar, TopBar, StatusBar, Dashboard, Triage, Detail, SurfaceMap, FindingsList, FINDINGS, pickStream, ReconSubs, ReconDNS, ReconJS, ReconArchive, Endpoints, Params, VulnCategory, AuthView, ApiView, Suppressed, LogicCandidates, EvidenceVault, ReportDraft */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const SEED_STREAM = Array.from({ length: 18 }).map(() => pickStream());

function App() {
  const [view, setView] = useStateA(() => localStorage.getItem('atlas.view') || 'dashboard');
  const [scanRunning, setScanRunning] = useStateA(() => localStorage.getItem('atlas.scan') !== 'false');
  const [stream, setStream] = useStateA(SEED_STREAM);
  const [activeFinding, setActiveFinding] = useStateA('F-0042');
  const [theme, setTheme] = useStateA(() => localStorage.getItem('atlas.theme') || 'dark');

  useEffectA(() => { localStorage.setItem('atlas.view', view); }, [view]);
  useEffectA(() => { localStorage.setItem('atlas.scan', String(scanRunning)); }, [scanRunning]);
  useEffectA(() => {
    localStorage.setItem('atlas.theme', theme);
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);
  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');

  // animated stream
  useEffectA(() => {
    if (!scanRunning) return;
    const id = setInterval(() => {
      setStream(s => [pickStream(), ...s].slice(0, 80));
    }, 1100);
    return () => clearInterval(id);
  }, [scanRunning]);

  const counts = {
    surface: 2841,
    endpoints: 2841,
    vulns: FINDINGS.filter(f => ['crit','high'].includes(f.sev)).length,
    triage: 17,
    findings: FINDINGS.length,
  };

  const openFinding = (id) => { setActiveFinding(id); setView('detail'); };

  let main;
  if (view === 'dashboard') main = <Dashboard scanRunning={scanRunning} toggleScan={() => setScanRunning(s => !s)} stream={stream} openTriage={() => setView('triage')} openFinding={openFinding}/>;
  else if (view === 'triage') main = <Triage scanRunning={scanRunning} openFinding={openFinding}/>;
  else if (view === 'suppressed') main = <Suppressed/>;
  else if (view === 'logic') main = <LogicCandidates openFinding={openFinding}/>;
  else if (view === 'detail') main = <Detail findingId={activeFinding} back={() => setView('triage')}/>;
  else if (view === 'surface') main = <SurfaceMap/>;
  else if (view === 'recon.subs') main = <ReconSubs/>;
  else if (view === 'recon.dns') main = <ReconDNS/>;
  else if (view === 'recon.js') main = <ReconJS/>;
  else if (view === 'recon.arch') main = <ReconArchive/>;
  else if (view === 'recon') main = <SurfaceMap/>;
  else if (view === 'endpoints') main = <Endpoints/>;
  else if (view === 'params') main = <Params/>;
  else if (view.startsWith('vulns.')) main = <VulnCategory kind={view}/>;
  else if (view === 'vulns') main = <VulnCategory kind="vulns.injection"/>;
  else if (view.startsWith('auth.') || view === 'auth') main = <AuthView kind={view === 'auth' ? 'auth.bypass' : view}/>;
  else if (view.startsWith('api.') || view === 'api') main = <ApiView kind={view === 'api' ? 'api.rest' : view}/>;
  else if (view === 'findings') main = <FindingsList openFinding={openFinding}/>;
  else if (view === 'evidence') main = <EvidenceVault/>;
  else if (view === 'report') main = <ReportDraft/>;
  else main = <Dashboard scanRunning={scanRunning} toggleScan={() => setScanRunning(s => !s)} stream={stream} openTriage={() => setView('triage')} openFinding={openFinding}/>;

  const engagement = { client: 'Meridian Commerce', id: 'ENG-2026-0418', scope: 'shop.merid.example.com' };

  return (
    <div className="app">
      <TopBar view={view} scanRunning={scanRunning} theme={theme} toggleTheme={toggleTheme}/>
      <Sidebar engagement={engagement} view={view} setView={setView} counts={counts} scanRunning={scanRunning}/>
      <main className="main">{main}</main>
      <StatusBar scanRunning={scanRunning} eventCount={1184 + stream.length} findingsCount={FINDINGS.length}/>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);