import { ErrorBoundary } from '@/components/error-boundary';
import { Toaster } from '@/components/ui/sonner';
import { TooltipProvider } from '@/components/ui/tooltip';
import { queryClient } from '@/lib/query-client';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { RouterProvider } from '@tanstack/react-router';
import apiFetch from '@wordpress/api-fetch';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import '../../styles/admin.pcss';
import { createRouter } from './router';

export const router = createRouter();

document.addEventListener('DOMContentLoaded', () => {
	apiFetch.use(apiFetch.createNonceMiddleware(__ALLCOACH_ADMIN__.nonce));
	const rootElement = document.getElementById('AllCoach-Admin-Root');
	if (!rootElement) {
		console.warn('AllCoach Admin: Root element not found');
		return;
	}
	const root = createRoot(rootElement);
	root.render(
		<StrictMode>
			<ErrorBoundary>
				<QueryClientProvider client={queryClient}>
					<TooltipProvider>
						<RouterProvider router={router} />
						<Toaster />
					</TooltipProvider>
					<ReactQueryDevtools initialIsOpen={false} />
				</QueryClientProvider>
			</ErrorBoundary>
		</StrictMode>,
	);
});