// theSitrep · top-level App. Routing + global theme/density/tweaks.

function App() {
  const { hash, view, id, navigate } = useRoute();
  const [theme, setTheme] = usePersistedState('tsr-theme', 'dark');
  const [density, setDensity] = usePersistedState('tsr-density', 'comfortable');
  const [collapsed, setCollapsed] = usePersistedState('tsr-sb', false);
  const role = 'manager';
  const [cmdOpen, setCmdOpen] = useState(false);
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const [sidePanel, setSidePanel] = useState(null);

  useEffect(() => { document.documentElement.dataset.theme = theme; }, [theme]);
  useEffect(() => { document.documentElement.dataset.density = density; }, [density]);
  useEffect(() => { document.documentElement.dataset.collapsed = collapsed ? '1' : '0'; }, [collapsed]);

  // Keyboard: ⌘K + g+letter nav
  useEffect(() => {
    let buf = '', bufT = null;
    const h = (e) => {
      const target = e.target;
      const inField = target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable);
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); setCmdOpen(true); return; }
      if (inField) return;
      if (/^[a-z]$/.test(e.key)) {
        buf += e.key;
        clearTimeout(bufT);
        bufT = setTimeout(() => { buf = ''; }, 900);
        const map = {
          gd: '#/dashboard', gs: '#/signals',
          gf: '#/ticket-forensics', gt: '#/commitment-trends',
          ge: '#/disengagement', gh: '#/hotspots',
        };
        if (map[buf]) { navigate(map[buf]); buf = ''; }
      }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, []);

  // Removed pages · redirect deep links to the dashboard.
  // (The developer list now lives in the sidebar, so '#/devs' has no page.)
  useEffect(() => {
    if (view === 'pm-overlay' || view === 'em-overlay' || view === 'me' || view === 'devs') {
      navigate('#/dashboard');
    }
  }, [view]);

  const openSidePanel = (p) => setSidePanel(p);
  const closeSidePanel = () => setSidePanel(null);
  const openTicketList = (filter) => setSidePanel({ kind: 'ticket-filter', title: filter.title || 'Filtered tickets', filter });

  const disengagementActive = DATA.disengagement.firing.length > 0;

  let body;
  switch (view) {
    case 'dashboard':     body = <Dashboard navigate={navigate} openSidePanel={openSidePanel} openTicketList={openTicketList} role={role} />; break;
    case 'dev':           body = <DevProfile navigate={navigate} openSidePanel={openSidePanel} openTicketList={openTicketList} role={role} id={id} />; break;
    case 'ticket':        body = <TicketForensicsPage navigate={navigate} openSidePanel={openSidePanel} id={id} />; break;
    case 'signals':       body = <SignalsPage navigate={navigate} openSidePanel={openSidePanel} />; break;
    case 'ticket-forensics': body = <ForensicsPage navigate={navigate} />; break;
    case 'commitment-trends': body = <CommitmentTrends navigate={navigate} />; break;
    case 'disengagement': body = <DisengagementPage navigate={navigate} openSidePanel={openSidePanel} />; break;
    case 'hotspots':      body = <HotspotsPage navigate={navigate} openSidePanel={openSidePanel} />; break;
    default:              body = <Dashboard navigate={navigate} openSidePanel={openSidePanel} openTicketList={openTicketList} role={role} />;
  }

  return (
    <div className="app">
      <Sidebar
        collapsed={collapsed} setCollapsed={setCollapsed}
        currentView={view} currentId={id} navigate={navigate}
        role={role} openCmd={() => setCmdOpen(true)}
        disengagementActive={disengagementActive}
      />
      <main className="main-col">
        <Topbar
          currentView={view} currentId={id} navigate={navigate}
          role={role}
          theme={theme} setTheme={setTheme}
          openTweaks={() => setTweaksOpen(true)}
          openCmd={() => setCmdOpen(true)}
        />
        <div className="content-scroll">{body}</div>
      </main>

      <CommandPalette open={cmdOpen} onClose={() => setCmdOpen(false)} navigate={navigate} role={role} />
      <SidePanel panel={sidePanel} onClose={closeSidePanel} navigate={navigate} />
      <TweaksPanel open={tweaksOpen} onClose={() => setTweaksOpen(false)} theme={theme} setTheme={setTheme} density={density} setDensity={setDensity} />
    </div>
  );
}

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