import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import "./i18n";
import "./index.css";
import App from "./App";
import { CompareProvider } from "./lib/compare";
import { LocationProvider } from "./lib/location";
import { AuthProvider } from "./lib/auth";
import { FavoritesProvider } from "./lib/favorites";
import { initBrandColor } from "./lib/theme";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 60_000, refetchOnWindowFocus: false, retry: 1 },
  },
});

// Must run before the first render so the opening frame is already the right
// brand color rather than the built-in fallback.
initBrandColor();

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
      <FavoritesProvider>
      <CompareProvider>
        <LocationProvider>
          <BrowserRouter>
            <App />
          </BrowserRouter>
        </LocationProvider>
      </CompareProvider>
      </FavoritesProvider>
      </AuthProvider>
    </QueryClientProvider>
  </StrictMode>
);