import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { ThemeProvider } from "styled-components";
import { Toaster } from "sonner";
import { MuiThemeProvider } from "./components/MuiThemeProvider";
import { EmpresaProvider } from "./context/EmpresaContext";
import {
  AuthContextProvider,
  GlobalStyles,
  Light,
  MyRoutes,
  useThemeStore,
} from "./index";
import SuscripcionBloqueadaAlert from "./components/common/SuscripcionBloqueadaAlert";
import AyudaIaHost from "./components/ayuda-ia/AyudaIaHost";
import { CommandPalette, useCommandPalette } from "./components/organismos/CommandPalette/CommandPalette";
import { useLocation } from "react-router-dom";

// Rutas públicas donde no debe aparecer la UI del ERP (FAB de IA, etc.).
// Son páginas a las que llega un comprador externo desde el checkout.
const RUTAS_PUBLICAS_EXTERNAS = ["/pago-exitoso", "/pago-cancelado"];

function AppShell() {
  const palette = useCommandPalette();
  const { pathname } = useLocation();
  // Vistas de cliente externo: rutas de pago y todo el portal público (/pub/...).
  const esPublica = RUTAS_PUBLICAS_EXTERNAS.includes(pathname) || pathname.startsWith("/pub/");
  // En el POS (/pos y /pos-admin) el carrito ocupa toda la columna derecha, que
  // es justo donde caían los toasts: el aviso de "producto agregado" tapaba el
  // ítem recién agregado y los totales, que es lo que el cajero está mirando.
  const esPOS = pathname.startsWith("/pos");
  return (
    <>
      {!esPublica && <SuscripcionBloqueadaAlert />}
      <MyRoutes />
      {!esPublica && <AyudaIaHost />}
      {!esPublica && <CommandPalette open={palette.open} onClose={() => palette.setOpen(false)} />}
      {/* Los mensajes de error del backend suelen ser largos (ej. "Stock insuficiente.
          Disponible: 0, requerido: 1") y con los 4s por defecto desaparecían antes de
          poder leerlos. Con botón de cerrar, además, no hay que esperar a que se vayan. */}
      <Toaster position={esPOS ? "top-center" : "top-right"} richColors closeButton toastOptions={{ duration: 6000 }} />
    </>
  );
}

function App() {
  const { themeStyle } = useThemeStore();

  return (
    <ThemeProvider theme={themeStyle || Light}>
      <MuiThemeProvider>
        <AuthContextProvider>
          <EmpresaProvider>
            <GlobalStyles />

            <AppShell />

            <ReactQueryDevtools initialIsOpen={true} />
          </EmpresaProvider>
        </AuthContextProvider>
      </MuiThemeProvider>
    </ThemeProvider>
  );
}

export default App;