function AppShellRouter() {
  const { usuario } = useAuth();
  const [page, setPage] = React.useState('dashboard');
  const [params, setParams] = React.useState(null);

  if (!usuario) return <Login />;

  const navegar = (nuevaPagina, nuevosParams = null) => {
    setParams(nuevosParams);
    setPage(nuevaPagina);
  };

  const paginas = {
    dashboard: <Dashboard onNavigate={navegar} />,
    baterias: <Baterias params={params} />,
    luces: <Luces />,
    movimientos: <Movimientos params={params} />,
    reportes: <Reportes />,
    'ingreso-masivo': <IngresoMasivo onNavigate={navegar} />,
    'salida-masiva': <SalidaMasiva />,
    devolucion: <Devolucion />,
    'instalacion-luces': <InstalacionLuces />,
    'asignacion-luces': <AsignacionLuces />,
    'lotes-pendientes': <LotesPendientes onNavigate={navegar} />,
    empleados: <Empleados />,
    tiendas: <Tiendas />,
    proveedores: <Proveedores />,
    'unidades-vehiculares': <UnidadesVehiculares />,
    transportistas: <Transportistas />,
    areas: <Areas />,
    usuarios: <Usuarios />,
  };

  return (
    <Layout page={page} onNavigate={navegar}>
      {paginas[page] || <Dashboard onNavigate={navegar} />}
    </Layout>
  );
}

function App() {
  return (
    <AuthProvider>
      <ToastProvider>
        <AppShellRouter />
      </ToastProvider>
    </AuthProvider>
  );
}

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