import { Provider } from "react-redux";
import store from "./store/store";
import { createRoot } from "react-dom/client";
import { QueryClientProvider } from "@tanstack/react-query";
import { CookiesProvider } from "react-cookie";
// react-toastify v11 does not inject its own stylesheet — it has to be
// imported. Without this the toast container renders completely
// unstyled: no position:fixed, no z-index, no surface. Every toast in
// the app was landing in normal document flow behind the page content,
// which is why notifications appeared to be "behind" modals.
// Imported before index.css so our own overrides win.
import "react-toastify/dist/ReactToastify.css";
import "./index.css";
import AppRouter from "./Routes.tsx";
import { FirebaseProvider } from "./firebase/FirebaseContext.tsx";
import { ThemeProvider } from "./components/DataGrid/ThemeContext.tsx";
import { GridContextProvider } from "./components/DataGrid/GridContext.tsx";
import LoaderModal from "./components/LoaderModal.tsx";
import { queryClient } from "./api/queryClient.ts";
import { installErrorReporting } from "./observability/reportError.ts";

// Before anything renders, so a crash during the first paint is still caught.
// Without this, unhandled promise rejections — which is how nearly every
// failed request surfaces — were silently discarded.
installErrorReporting();
createRoot(document.getElementById("root")!).render(
  // <StrictMode>
  <Provider store={store}>
    <QueryClientProvider client={queryClient}>
      <CookiesProvider>
        <LoaderModal />
        <FirebaseProvider>
          <ThemeProvider>
            <GridContextProvider>
              <AppRouter />
            </GridContextProvider>
          </ThemeProvider>
        </FirebaseProvider>
      </CookiesProvider>
    </QueryClientProvider>
  </Provider>
  // </StrictMode>,
);