import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { MantineProvider } from "@mantine/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter } from "react-router-dom";

import "@mantine/core/styles.css";
import "@mantine/dates/styles.css";
import "@mantine/spotlight/styles.css";
// The package maps these; the raw dist path is not an exported specifier.
import "@edr/ui-common/styles.css";
import "@edr/ui-common/theme.css";
import "./index.css";
import "./i18n";

import { App } from "./App";
import { ColorSchemeSync } from "@/shared/components/ColorSchemeSync";
import { AuthProvider } from "@/auth/AuthContext";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // HR data changes rarely within a session; refetching on every window
      // focus is noise, not freshness.
      refetchOnWindowFocus: false,
      staleTime: 30_000,
      // A 401 is handled by the http interceptor's refresh, and a 403 will not
      // become a 200 on retry — only retry once, for transient failures.
      retry: 1,
    },
  },
});

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    {/* "light" rather than "auto": the shell's `dark` class is the single
        source of truth and ColorSchemeSync follows it. Leaving this on "auto"
        lets Mantine pick from the OS while the shell has been toggled the other
        way, which is the same mismatch by a different route. */}
    <MantineProvider defaultColorScheme="light">
      <ColorSchemeSync />
      <QueryClientProvider client={queryClient}>
        <BrowserRouter>
          <AuthProvider>
            <App />
          </AuthProvider>
        </BrowserRouter>
      </QueryClientProvider>
    </MantineProvider>
  </StrictMode>,
);
