/**
 * main.tsx — Application entry point.
 *
 * IMPORTANT: BrowserRouter MUST wrap App here (not inside App) because
 * App.tsx calls useLocation() and useRoutes(), which require the Router context.
 */
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider, MutationCache, QueryCache } from '@tanstack/react-query';
import { toast } from '@nestora/ui-web';
import { ApiError } from './lib/axios';
import '@nestora/shared'; // Initializes i18n and global side effects from shared
import './index.css';
import App from './App.tsx';

const handleApiError = (error: unknown) => {
  if (error instanceof ApiError) {
    if (error.status === 422) {
      toast.error(error.message || 'Validation failed. Please check your inputs.');
    } else {
      toast.error(error.message || 'An unexpected error occurred.');
    }
  } else if (error instanceof Error) {
    toast.error(error.message);
  } else {
    toast.error('An unexpected error occurred.');
  }
};

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: handleApiError,
  }),
  mutationCache: new MutationCache({
    onError: handleApiError,
  }),
  defaultOptions: {
    queries: {
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

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