import type { FC } from "react";

import { MantineProvider } from "@mantine/core";
import { DatesProvider } from "@mantine/dates";
import { Notifications } from "@mantine/notifications";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { cssVariablesResolver, theme } from "@wealthledger/ui/theme";
import { BrowserRouter } from "react-router";

import { AppRoutes, RouteErrorBoundary } from "@/app/routes";
import { AuthProvider } from "@/features/auth";

const queryClient = new QueryClient({
	defaultOptions: {
		queries: {
			refetchOnReconnect: true,
			refetchOnWindowFocus: true,
			retry: false,
		},
	},
});

const App: FC = () => {
	return (
		<MantineProvider
			cssVariablesResolver={cssVariablesResolver}
			forceColorScheme="light"
			theme={theme}
		>
			<DatesProvider settings={{ locale: "ru" }}>
				<QueryClientProvider client={queryClient}>
					<BrowserRouter>
						<AuthProvider>
							<RouteErrorBoundary>
								<AppRoutes />
							</RouteErrorBoundary>
						</AuthProvider>
					</BrowserRouter>

					<Notifications autoClose={4000} limit={2} position="top-right" zIndex={1000} />
				</QueryClientProvider>
			</DatesProvider>
		</MantineProvider>
	);
};

export { App };