/* =====================================================================
   AI-COS — Root app: router (login → admin shell / customer portal)
   ===================================================================== */
function ModuleHost({ active, ctx }) {
  // Dispatch to a built module global, else a graceful placeholder
  const map = {
    dashboard: window.Dashboard,
    jobs: window.JobsModule,
    iso: window.ISOModule,
    cylinders: window.CylindersModule,
    certs: window.CertsModule,
    assets: window.AssetsModule,
    crm: window.CRMModule,
    qms: window.QMSModule,
    schedule: window.ScheduleModule,
    inventory: window.InventoryModule,
    finance: window.FinanceModule,
    documents: window.DocsModule,
    reports: window.ReportsModule,
    ai: window.AIModule,
    competency: window.CompetencyModule,
    hse: window.HSEModule,
    pm: window.PMModule,
    field: window.FieldModule,
    admin: window.AdminModule,
  };
  const Comp = map[active];
  if (Comp) return <Comp {...ctx} />;

  const meta = ['grid', 'Module', null, 'This module is part of the AI-COS scope.', []];

  return (
    <div className="page rise">
      <ModulePlaceholder icon={meta[0]} title={meta[1]} phase={meta[2]} desc={meta[3]} points={meta[4]} />
    </div>
  );
}

function App() {
  const [screen, setScreen] = useState('login'); // login | admin | portal
  const [active, setActive] = useState('dashboard');
  const [aiOpen, setAiOpen] = useState(false);
  const [notifOpen, setNotifOpen] = useState(false);
  const [jobId, setJobId] = useState(null);
  const [detail, setDetail] = useState(null);
  const [search, setSearch] = useState(null);

  useEffect(() => {
    window._openDetail = (type, data) => { setSearch(null); setDetail({ type, data }); document.querySelector('.content')?.scrollTo(0, 0); };
    window._search = (q) => { setDetail(null); setSearch(q); document.querySelector('.content')?.scrollTo(0, 0); };
    window._openJob = (id) => { setSearch(null); setDetail(null); setActive('jobs'); setJobId(id); };
  }, []);
  const navTo = (id) => { setActive(id); setJobId(null); setDetail(null); setSearch(null); document.querySelector('.content')?.scrollTo(0, 0); };
  window._navTo = navTo;
  const openJob = (id) => { setActive('jobs'); setJobId(id); setDetail(null); };

  if (screen === 'login') return <Login onEnter={(role) => { setScreen(role === 'admin' ? 'admin' : 'portal'); setActive('dashboard'); }} />;
  if (screen === 'portal') return <Portal onLogout={() => setScreen('login')} />;

  const navLabel = (window.DB.nav.flatMap((g) => g.items).find((i) => i.id === active) || {}).label || 'Dashboard';
  const ctx = { onNav: navTo, openJob, jobId, setJobId };

  return (
    <div className="app">
      <Sidebar active={active} onNav={navTo} onLogout={() => setScreen('login')} />
      <div className="main">
        <Topbar title={navLabel} crumb={navLabel} onOpenAI={() => setAiOpen(true)} onOpenNotif={() => setNotifOpen(true)} onNav={navTo} onLogout={() => setScreen('login')} />
        <div className="content">
          {search != null ? <SearchResults query={search} onBack={() => setSearch(null)} />
            : detail ? <RecordPage type={detail.type} data={detail.data} onBack={() => setDetail(null)} onNav={navTo} />
            : <ModuleHost active={active} ctx={ctx} />}
        </div>
      </div>
      <AIAssistant open={aiOpen} onClose={() => setAiOpen(false)} onNav={navTo} />
      <NotifPanel open={notifOpen} onClose={() => setNotifOpen(false)} onNav={navTo} />
      <ToastHost />
      <FormHost />
    </div>
  );
}

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