/* Sentinel — static app router · 28 screens, 8 modules */

const { useState: useS, useEffect: useE, useMemo: useM, useRef: useR } = React;

// All screens registered. Auth is standalone (no shell).
const HF_REGISTRY = {
  // Auth (standalone)
  'a1':       { Comp: HFScreenA1, mode: 'standalone', label: 'Login',                code: 'A1' },
  'a2':       { Comp: HFScreenA2, mode: 'standalone', label: 'Onboarding',           code: 'A2' },
  // Cockpit
  'c1-rssi':  { Comp: HFScreenC1RSSI,  module: 'cockpit', label: 'RSSI',             code: 'C1' },
  'c1-dpo':   { Comp: HFScreenC1DPO,   module: 'cockpit', label: 'DPO',              code: 'C1' },
  'c1-caio':  { Comp: HFScreenC1CAIO,  module: 'cockpit', label: 'Chief AI Officer', code: 'C1' },
  'c1-comex': { Comp: HFScreenC1COMEX, module: 'cockpit', label: 'COMEX',            code: 'C1' },
  // Parc
  'ag1':      { Comp: HFScreenAG1, module: 'parc',     label: 'Inventaire',          code: 'AG1' },
  'ag2':      { Comp: HFScreenAG2, module: 'parc',     label: 'Connecteurs',         code: 'AG2' },
  'ag3':      { Comp: HFScreenAG3, module: 'parc',     label: 'Fiche agent',         code: 'AG3' },
  // Observe
  'ob1':      { Comp: HFScreenOB1, module: 'observe',  label: 'Live activity',       code: 'OB1' },
  'ob2':      { Comp: HFScreenOB2, module: 'observe',  label: 'Santé du parc',       code: 'OB2' },
  'ob3':      { Comp: HFScreenOB3, module: 'observe',  label: 'Détail événement',    code: 'OB3' },
  'ob4':      { Comp: HFScreenOB4, module: 'observe',  label: 'Piste d\'audit',      code: 'OB4' },
  // Secure
  'se1':      { Comp: HFScreenSE1, module: 'secure',   label: 'Vue d\'ensemble',     code: 'SE1' },
  'se2':      { Comp: HFScreenSE2, module: 'secure',   label: 'Policies',            code: 'SE2' },
  'se3':      { Comp: HFScreenSE3, module: 'secure',   label: 'Incidents',           code: 'SE3' },
  'se4':      { Comp: HFScreenSE4, module: 'secure',   label: 'Accès & secrets',     code: 'SE4' },
  // Pilot
  'pi1':      { Comp: HFScreenPI1, module: 'pilot',    label: 'Centre d\'alertes',   code: 'PI1' },
  'pi2':      { Comp: HFScreenPI2, module: 'pilot',    label: 'Workflows',           code: 'PI2' },
  'pi3':      { Comp: HFScreenPI3, module: 'pilot',    label: 'Kill switch',         code: 'PI3' },
  'pi4':      { Comp: HFScreenPI4, module: 'pilot',    label: 'Revues',              code: 'PI4' },
  // Compliance
  'co1':      { Comp: HFScreenCO1, module: 'compliance', label: 'Registre AI Act',   code: 'CO1' },
  'co2':      { Comp: HFScreenCO2, module: 'compliance', label: 'DPIA / AIPD',       code: 'CO2' },
  'co3':      { Comp: HFScreenCO3, module: 'compliance', label: 'Coffre de preuves', code: 'CO3', star: true },
  // Admin
  'ad1':      { Comp: HFScreenAD1, module: 'admin',    label: 'Utilisateurs',        code: 'AD1' },
  'ad2':      { Comp: HFScreenAD2, module: 'admin',    label: 'Paramètres',          code: 'AD2' },
  'ad3':      { Comp: HFScreenAD3, module: 'admin',    label: 'Facturation',         code: 'AD3' },
  'ad4':      { Comp: HFScreenAD4, module: 'admin',    label: 'Audit log',           code: 'AD4' },
};

const MODULE_DEFAULTS = {
  cockpit: 'c1-rssi',
  parc: 'ag1',
  observe: 'ob2',
  secure: 'se1',
  pilot: 'pi1',
  compliance: 'co3',
  admin: 'ad1',
};

const MODULE_SCREENS = {
  cockpit:    ['c1-rssi','c1-dpo','c1-caio','c1-comex'],
  parc:       ['ag1','ag2','ag3'],
  observe:    ['ob1','ob2','ob3','ob4'],
  secure:     ['se1','se2','se3','se4'],
  pilot:      ['pi1','pi2','pi3','pi4'],
  compliance: ['co1','co2','co3'],
  admin:      ['ad1','ad2','ad3','ad4'],
};

const MODULE_LABELS = {
  cockpit: 'Cockpit',
  parc: 'Parc d\'agents',
  observe: 'Observabilité',
  secure: 'Sécurité',
  pilot: 'Pilotage',
  compliance: 'Conformité',
  admin: 'Administration',
};

// ---- Sidebar: routes via state instead of hash for instant nav ----
const SidebarRouted = ({ current, onModuleClick, onAuthClick }) => (
  <aside className="sidebar">
    <div className="sidebar-brand">
      <img src="assets/brand/logo-ascenzia-white.svg" alt="Ascenzia" />
      <span style={{
        fontFamily: 'var(--font-primary)',
        fontSize: 10,
        letterSpacing: 'var(--track-label)',
        textTransform: 'uppercase',
        color: 'var(--gold-400)',
        fontWeight: 600,
        marginLeft: 'auto',
      }}>Sentinel</span>
    </div>

    <div className="sidebar-tenant">
      <span className="label">Tenant</span>
      <strong>Banque Aurore SA</strong>
      <span style={{ color: 'var(--fg-subtle)', fontSize: 11 }}>FR · Paris dc-3</span>
    </div>

    <div className="sidebar-group">Modules</div>
    {[
      { key: 'cockpit', label: 'Cockpit', icon: 'layoutDashboard' },
      { key: 'parc', label: 'Parc d\'agents', icon: 'bot', count: '142' },
      { key: 'observe', label: 'Observabilité', icon: 'activity' },
      { key: 'secure', label: 'Sécurité', icon: 'shield', count: '3' },
      { key: 'pilot', label: 'Pilotage', icon: 'zap' },
      { key: 'compliance', label: 'Conformité', icon: 'fileCheck' },
    ].map(it => (
      <button key={it.key} onClick={() => onModuleClick(it.key)}
        className={`nav-item ${current === it.key ? 'active' : ''}`}
        style={{ background: 'transparent', border: 0, width: '100%', textAlign: 'left', cursor: 'pointer' }}>
        <Icon name={it.icon} size={16} />
        {it.label}
        {it.count && <span className="count">{it.count}</span>}
      </button>
    ))}

    <div className="sidebar-group" style={{ marginTop: 16 }}>Système</div>
    <button onClick={() => onModuleClick('admin')}
      className={`nav-item ${current === 'admin' ? 'active' : ''}`}
      style={{ background: 'transparent', border: 0, width: '100%', textAlign: 'left', cursor: 'pointer' }}>
      <Icon name="settings" size={16} />Administration
    </button>

    <div className="sidebar-group" style={{ marginTop: 16 }}>Auth (preview)</div>
    <button onClick={() => onAuthClick('a1')}
      className="nav-item"
      style={{ background: 'transparent', border: 0, width: '100%', textAlign: 'left', cursor: 'pointer' }}>
      <Icon name="lock" size={16} />Login
    </button>
    <button onClick={() => onAuthClick('a2')}
      className="nav-item"
      style={{ background: 'transparent', border: 0, width: '100%', textAlign: 'left', cursor: 'pointer' }}>
      <Icon name="zap" size={16} />Onboarding
    </button>

    <div className="sidebar-footer">
      <div className="avatar">LM</div>
      <div style={{ flex: 1 }}>
        <div className="name">Léa Mercier</div>
        <div className="role">RSSI · Sécurité</div>
      </div>
    </div>
  </aside>
);

// ---- Module sub-nav (refactored to use CSS classes) ----
const ModuleSubNav = ({ moduleKey, active, onPick }) => {
  const screens = MODULE_SCREENS[moduleKey];
  if (!screens) return null;
  return (
    <div className="module-subnav">
      <span className="module-label">{MODULE_LABELS[moduleKey]}</span>
      {screens.map(key => {
        const s = HF_REGISTRY[key];
        const isActive = active === key;
        return (
          <button key={key} onClick={() => onPick(key)} className={`pill ${isActive ? 'active' : ''}`}>
            <span className="code">{s.code}</span>
            {s.label}
            {s.star && <span className="star">★</span>}
          </button>
        );
      })}
    </div>
  );
};

// ---- Command-palette style screen index (replaces the dev floating button) ----
function ScreenIndex({ active, setActive, onClose }) {
  const [query, setQuery] = useS('');
  const inputRef = useR(null);

  useE(() => { inputRef.current && inputRef.current.focus(); }, []);

  useE(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  const q = query.trim().toLowerCase();
  const groups = useM(() => {
    const all = [
      ['Auth', ['a1', 'a2']],
      ...Object.entries(MODULE_SCREENS).map(([m, keys]) => [MODULE_LABELS[m], keys]),
    ];
    if (!q) return all;
    const filtered = all
      .map(([label, keys]) => [
        label,
        keys.filter((k) => {
          const s = HF_REGISTRY[k];
          return (
            s.label.toLowerCase().includes(q) ||
            s.code.toLowerCase().includes(q) ||
            k.toLowerCase().includes(q) ||
            label.toLowerCase().includes(q)
          );
        }),
      ])
      .filter(([, keys]) => keys.length > 0);
    return filtered;
  }, [q]);

  const allMatches = groups.flatMap(([, keys]) => keys);

  const pick = (k) => {
    setActive(k);
    onClose();
  };

  return (
    <div className="screen-index-scrim" onClick={onClose}>
      <div className="screen-index-panel" onClick={(e) => e.stopPropagation()}>
        <header>
          <Icon name="search" size={16} />
          <input
            ref={inputRef}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Aller à un écran…"
            onKeyDown={(e) => {
              if (e.key === 'Enter' && allMatches.length > 0) pick(allMatches[0]);
            }}
          />
          <kbd>esc</kbd>
        </header>
        <div className="screen-index-list">
          {groups.length === 0 && <div className="screen-index-empty">Aucun écran ne correspond.</div>}
          {groups.map(([label, keys]) => (
            <div key={label}>
              <div className="screen-index-group">{label}</div>
              {keys.map((k) => {
                const s = HF_REGISTRY[k];
                const isActive = active === k;
                return (
                  <button key={k} className={`screen-index-item ${isActive ? 'active' : ''}`} onClick={() => pick(k)}>
                    <span className="code">{s.code}</span>
                    <span style={{ flex: 1 }}>{s.label}</span>
                    {s.star && <span className="star">★</span>}
                  </button>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---- App boot splash (briefly visible while React mounts) ----
function AppBoot() {
  return (
    <div className="app-boot">
      <div className="mark">
        <img src="assets/brand/mark-a-white.svg" alt="" />
      </div>
      Sentinel · chargement…
    </div>
  );
}

function HiFiApp() {
  const [active, setActive] = useS(() => {
    const h = location.hash.replace('#', '');
    return HF_REGISTRY[h] ? h : 'c1-rssi';
  });
  const [indexOpen, setIndexOpen] = useS(false);

  useE(() => {
    const onHash = () => {
      const h = location.hash.replace('#', '');
      if (HF_REGISTRY[h]) setActive(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  useE(() => {
    if (location.hash.replace('#', '') !== active) {
      history.replaceState(null, '', '#' + active);
    }
    window.scrollTo({ top: 0 });
  }, [active]);

  useE(() => {
    const onKey = (e) => {
      // ⇧⌘P / Ctrl+Shift+P → open index
      if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === 'P' || e.key === 'p')) {
        e.preventDefault();
        setIndexOpen((o) => !o);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const screen = HF_REGISTRY[active];
  const Comp = screen.Comp;

  // Standalone (Auth screens) — render without the shell, but keep the screen index reachable.
  if (screen.mode === 'standalone') {
    return (
      <>
        <div key={active} className="screen-fade"><Comp /></div>
        {indexOpen && <ScreenIndex active={active} setActive={setActive} onClose={() => setIndexOpen(false)} />}
        <FloatingIndex onOpen={() => setIndexOpen(true)} />
      </>
    );
  }

  // Shell-mode screens
  return (
    <>
      <div className="app-shell">
        <SidebarRouted
          current={screen.module}
          onModuleClick={(m) => setActive(MODULE_DEFAULTS[m])}
          onAuthClick={(k) => setActive(k)}
        />
        <div>
          <TopBar onIndexOpen={() => setIndexOpen(true)} />
          <ModuleSubNav moduleKey={screen.module} active={active} onPick={setActive} />
          <div key={active} className="screen-fade"><Comp /></div>
          <div className="app-footer">
            <span><span className="ok-dot"></span>Plateforme opérationnelle · 99.98 %</span>
            <span>Juridiction des données · France · v 1.0 statique</span>
          </div>
        </div>
      </div>
      {indexOpen && <ScreenIndex active={active} setActive={setActive} onClose={() => setIndexOpen(false)} />}
    </>
  );
}

// Compact floating button — only shown on standalone (auth) screens that lack a top bar.
function FloatingIndex({ onOpen }) {
  return (
    <button
      onClick={onOpen}
      style={{
        position: 'fixed', bottom: 24, left: 24, zIndex: 100,
        width: 44, height: 44, borderRadius: 999,
        background: 'var(--navy-900)', color: 'var(--gold-400)',
        border: 0, cursor: 'pointer',
        boxShadow: 'var(--elev-3)',
        display: 'grid', placeItems: 'center',
      }}
      title="Index des écrans (⇧⌘P)"
    >
      <Icon name="layoutDashboard" size={18} />
    </button>
  );
}

const rootEl = document.getElementById('root');
ReactDOM.createRoot(rootEl).render(<HiFiApp />);