import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { QueryClient, QueryClientProvider, QueryCache, MutationCache } from '@tanstack/react-query'
import './index.css'
import { AuthProvider } from './features/auth/AuthContext'
import { trpc, trpcClient } from './core/api/trpc'
import AppRouter from './core/components/AppRouter'
import AvisoVersion from './core/components/AvisoVersion'
import { TRPCClientError } from '@trpc/client'
import { onUnauthorized } from './core/api/session'
import { iniciarInstalar } from './core/instalar'

iniciarInstalar();

// Global error handler for 401 Unauthorized.
// El corte por sesión vencida vive en el fetch del link tRPC (core/api/session),
// que ve TODAS las llamadas. Esto queda como red de seguridad para errores que
// llegan con forma tRPC pero sin haber pasado por ese fetch.
const handleUnauthorized = (error: unknown) => {
  if (
    error instanceof TRPCClientError &&
    (error.data?.code === 'UNAUTHORIZED' || error.data?.httpStatus === 401)
  ) {
    onUnauthorized();
  }
};

// React Query client for tRPC
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      refetchOnWindowFocus: false,
    },
  },
  queryCache: new QueryCache({
    onError: handleUnauthorized,
  }),
  mutationCache: new MutationCache({
    onError: handleUnauthorized,
  }),
});

function Root() {
  return (
    <StrictMode>
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        <QueryClientProvider client={queryClient}>
          <AuthProvider>
            <AppRouter />
            <AvisoVersion />
          </AuthProvider>
        </QueryClientProvider>
      </trpc.Provider>
    </StrictMode>
  );
}

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