import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AuthProvider } from './context/AuthContext';
import { ConfigProvider } from './context/ConfigContext';
import { ToastProvider } from './context/ToastContext';
import App from './App';
// Tipografía de marca, servida desde la app (sin Google Fonts): la PWA debe verse igual sin conexión.
// IBM Plex Sans en el cuerpo; Archivo (variable, con eje de ancho) en títulos, declarada en index.css.
// Solo subconjunto latino (cubre el español): los demás idiomas del paquete no se cargan ni se precachean.
import '@fontsource/ibm-plex-sans/latin-400.css';
import '@fontsource/ibm-plex-sans/latin-500.css';
import '@fontsource/ibm-plex-sans/latin-600.css';
import '@fontsource/ibm-plex-sans/latin-700.css';
import './index.css';

// TanStack Query client with sensible defaults:
// - staleTime 30s: reuse fresh cached data when navigating between pages
// - retry 1: fail fast on transient errors but allow a single retry
// - refetchOnWindowFocus: disabled to avoid surprise background refetches
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30_000,
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <AuthProvider>
          <ConfigProvider>
            <ToastProvider>
              <App />
            </ToastProvider>
          </ConfigProvider>
        </AuthProvider>
      </BrowserRouter>
    </QueryClientProvider>
  </StrictMode>,
);