// Side-effect import: react-table 7.x's prebundled output references
// `regeneratorRuntime` as a free global from its legacy babel emit. The
// global is set up by this import; without it, mounting any view that uses
// react-table's useAsyncDebounce (e.g. our DataTable) throws at runtime.
// Drop this once react-table is replaced.
import "regenerator-runtime/runtime";
import { createRoot } from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { router } from "./router";

// MD-2 React Context Provider
import { MaterialUIControllerProvider } from "@/context";
import { AuthProvider } from "@/context/auth";
import ErrorBoundary from "@/components/ErrorBoundary";
import { initErrorTracking } from "@/logic/errorTracking";

initErrorTracking();

// TanStack Query client.
//
// Conventions for this project:
//   - Query keys are tuples starting with the entity name, then disambiguators:
//       ['labelTypes']                         — list of label types
//       ['labelTypes', id]                     — one label type
//       ['labels', { labelTypeId, page }]      — paginated labels under a type
//   - queryFn always calls AuthNetwork (auto-handles 401 → silent refresh → retry).
//     Don't bypass AuthNetwork; the auth refresh is the only thing keeping
//     requests authenticated after access-token expiry.
//   - Mutations call AuthNetwork directly and invalidate the relevant query
//     key on success: `queryClient.invalidateQueries({ queryKey: ['labelTypes'] })`.
//
// Defaults below are conservative on purpose: the existing Network class
// already retries idempotent requests, and refetch-on-focus would be
// disruptive in the middle of long classify/import wizards.
const queryClient = new QueryClient({
	defaultOptions: {
		queries: {
			retry: false,
			refetchOnWindowFocus: false,
			// 30s before a query is considered stale and re-fetched on remount.
			// Tune per-query when a tighter or looser window matters.
			staleTime: 30_000,
		},
		mutations: {
			retry: false,
		},
	},
});

const container = document.getElementById("app");
const root = createRoot(container);

root.render(
	<ErrorBoundary>
		<QueryClientProvider client={queryClient}>
			<MaterialUIControllerProvider>
				<AuthProvider>
					<RouterProvider router={router} />
				</AuthProvider>
			</MaterialUIControllerProvider>
			{import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-right" />}
		</QueryClientProvider>
	</ErrorBoundary>
);