import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ThemeProvider } from "@mui/material/styles";
import { CssBaseline } from "@mui/material";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import "./index.css";
import App from "./App";
import { bootstrapAuthFromStorage } from "./services/api";
import theme from "./theme/materialTheme";
import { registerSW } from "virtual:pwa-register";

registerSW({ immediate: true });

// Create a client for React Query
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      refetchOnWindowFocus: false,
      staleTime: 5 * 60 * 1000, // 5 minutes
    },
  },
});

const rootEl = document.getElementById("root")!;

void bootstrapAuthFromStorage()
  .catch(() => {})
  .finally(() => {
    createRoot(rootEl).render(
      <StrictMode>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <QueryClientProvider client={queryClient}>
            <App />
          </QueryClientProvider>
        </ThemeProvider>
      </StrictMode>
    );
  });