import { createRootRoute, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import { Toaster } from "sonner";
import Header from "@/components/Header";
import { AppSidebar } from "@/components/Sidebar/sidebar";
import { SidebarProvider } from "@/components/ui/sidebar";
import { ThemeProvider } from "@/lib/theme-provider";
import { TooltipProvider } from "../components/ui/tooltip";
import { useSession } from "../lib/auth-client";

const RootLayout = () => {
	const { data: session } = useSession();
	return (
		<div className="[--header-height:calc(--spacing(14))]">
			<ThemeProvider>
				<SidebarProvider className="flex flex-col" defaultOpen={false}>
					<Header />
					<TooltipProvider>
						<div className="relative min-h-[calc(100svh-var(--header-height))]">
							<AppSidebar />

							<main className="w-full">
								<div className="mx-auto w-full flex justify-center">
									{" "}
									{/* className="mx-auto w-full max-w-7xl" use this for dashboards and stuff*/}
									<Outlet />
								</div>
							</main>
						</div>
					</TooltipProvider>

					<Toaster expand richColors closeButton />
				</SidebarProvider>
			</ThemeProvider>
			{session && session.user.role === "systemAdmin" && (
				<TanStackRouterDevtools position="bottom-right" />
			)}
		</div>
	);
};

export const Route = createRootRoute({ component: RootLayout });