import type { AppRouter } from "@nontara/server/shared";
import type { QueryClient } from "@tanstack/react-query";
import {
	createRootRouteWithContext,
	HeadContent,
	Outlet,
	Scripts,
} from "@tanstack/react-router";
import type { TRPCOptionsProxy } from "@trpc/tanstack-react-query";
import { ThemeProvider } from "next-themes";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Toaster } from "@/components/ui/sonner";
import appCss from "../index.css?url";

export interface RouterAppContext {
	trpc: TRPCOptionsProxy<AppRouter>;
	queryClient: QueryClient;
}

export const Route = createRootRouteWithContext<RouterAppContext>()({
	head: () => ({
		meta: [
			{
				charSet: "utf-8",
			},
			{
				name: "viewport",
				content: "width=device-width, initial-scale=1",
			},
			{
				title: "Nontara Media Server",
			},
		],
		links: [
			{
				rel: "stylesheet",
				href: appCss,
			},
		],
	}),

	component: RootDocument,
});

function RootDocument() {
	return (
		<html lang="en" suppressHydrationWarning>
			<head>
				<HeadContent />
			</head>
			<body>
				<ThemeProvider
					attribute="class"
					defaultTheme="system"
					enableSystem
					disableTransitionOnChange
				>
					<ScrollArea className="h-svh w-full">
						<div className="grid min-h-svh grid-rows-[auto_1fr]">
							<Outlet />
						</div>
						<ScrollBar orientation="vertical" />
					</ScrollArea>
					<Toaster richColors />
				</ThemeProvider>
				{/*<TanStackRouterDevtools position="bottom-left" />*/}
				{/*<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />*/}
				<Scripts />
			</body>
		</html>
	);
}
