// App entry: mounts everything together

function App() {
  const [route, setRoute] = useState(() => {
    const stored = localStorage.getItem('optima.route') || 'drilling/info';
    // Ensure route is valid by current NAV
    const { mod, sub } = parseRoute(stored);
    const m = NAV.find((x) => x.id === mod);
    if (!m) return 'drilling/info';
    if (m.children && !sub) return buildRoute(mod, defaultSub(mod));
    return stored;
  });
  const [cmdOpen, setCmdOpen] = useState(false);
  const [notifOpen, setNotifOpen] = useState(false);
  const [collapsed, setCollapsed] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    localStorage.setItem('optima.route', route);
  }, [route]);

  // cerrar drawer mobile al navegar
  useEffect(() => {
    setMobileOpen(false);
  }, [route]);

  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setCmdOpen((o) => !o);
      }
      if (e.key === 'Escape') {
        setCmdOpen(false);
        setNotifOpen(false);
        setMobileOpen(false);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const { state } = useStore();
  const alertCount = state.alerts.filter((a) => a.level === 'high' || a.level === 'med').length;
  const { mod, sub } = parseRoute(route);

  // Immersive views (telemetría) fill the main area without the padded container
  const immersive = mod === 'drilling' && sub === 'telemetria';

  return (
    <div className="flex h-full bg-bg">
      <Sidebar
        route={route}
        onNav={setRoute}
        collapsed={collapsed}
        onToggle={() => setCollapsed((c) => !c)}
        mobileOpen={mobileOpen}
        onMobileClose={() => setMobileOpen(false)}
      />
      <div className="flex-1 flex flex-col min-w-0">
        <Topbar
          route={route}
          onNav={setRoute}
          onOpenCmd={() => setCmdOpen(true)}
          onOpenNotif={() => setNotifOpen((o) => !o)}
          onOpenMobileNav={() => setMobileOpen(true)}
          notifCount={alertCount}
        />
        <main
          className={cn(
            'flex-1 min-h-0',
            immersive
              ? 'relative overflow-hidden'
              : 'overflow-y-auto px-6 py-6 max-w-[1400px] w-full mx-auto',
          )}
        >
          <RouteView route={route} />
        </main>
      </div>
      <CommandPalette open={cmdOpen} onClose={() => setCmdOpen(false)} onNav={setRoute} />
      <NotifPanel open={notifOpen} onClose={() => setNotifOpen(false)} alerts={state.alerts} />
    </div>
  );
}

function RouteView({ route }) {
  const { mod, sub } = parseRoute(route);
  if (mod === 'drilling') return <DrillingModule sub={sub} />;
  if (mod === 'geologia') return <AreaModule area={AREAS.geologia} sub={sub} />;
  if (mod === 'fluidos') return <AreaModule area={AREAS.fluidos} sub={sub} />;
  if (mod === 'hse') return <AreaModule area={AREAS.hse} sub={sub} />;
  if (mod === 'programa') return <ProgramaPozoModule />;
  if (mod === 'resumen') return <ResumenModule />;
  return <DrillingModule sub="info" />;
}

function Root() {
  return (
    <StoreProvider>
      <ToastProvider>
        <App />
      </ToastProvider>
    </StoreProvider>
  );
}

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