import {
	createFileRoute,
	Link,
	Outlet,
	useMatchRoute,
} from "@tanstack/react-router";
import type { LucideIcon } from "lucide-react";
import {
	ArrowLeft,
	Database,
	LayoutDashboard,
	Puzzle,
	Settings,
	Users,
} from "lucide-react";
import logoSrc from "@/assets/logo.png";
import { DashboardHeader } from "@/components/dashboard/DashboardHeader";
import { UserAccountDropdown } from "@/components/dashboard/UserAccountDropdown";
import { Button } from "@/components/ui/button";
import {
	Empty,
	EmptyContent,
	EmptyDescription,
	EmptyHeader,
	EmptyMedia,
	EmptyTitle,
} from "@/components/ui/empty";
import {
	Sidebar,
	SidebarContent,
	SidebarFooter,
	SidebarGroup,
	SidebarGroupContent,
	SidebarHeader,
	SidebarInset,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarProvider,
} from "@/components/ui/sidebar";
import { canAccessDashboard } from "@/functions/auth";
import type { FileRoutesByTo } from "@/routeTree.gen";

export const Route = createFileRoute("/dashboard")({
	component: RouteComponent,
	loader: async () => {
		return {
			hasAccess: await canAccessDashboard(),
		};
	},
});

type DashboardRoute = Extract<
	keyof FileRoutesByTo,
	| "/dashboard"
	| "/dashboard/users"
	| "/dashboard/libraries"
	| "/dashboard/extensions"
>;

interface MenuItem {
	readonly title: string;
	readonly url: DashboardRoute;
	readonly icon: LucideIcon;
}

const menuItems: readonly MenuItem[] = [
	{
		title: "Dashboard",
		url: "/dashboard",
		icon: LayoutDashboard,
	},
	{
		title: "Users",
		url: "/dashboard/users",
		icon: Users,
	},
	{
		title: "Libraries",
		url: "/dashboard/libraries",
		icon: Database,
	},
	{
		title: "Extensions",
		url: "/dashboard/extensions",
		icon: Puzzle,
	},
];

function RouteComponent() {
	const matchRoute = useMatchRoute();
	const loaderData = Route.useLoaderData();
	if (!loaderData.hasAccess) {
		return (
			<div className="flex min-h-screen items-center justify-center bg-background p-4">
				<Empty>
					<EmptyHeader>
						<EmptyMedia variant="icon">
							<Settings />
						</EmptyMedia>
						<EmptyTitle>Access Denied</EmptyTitle>
						<EmptyDescription>
							You do not have permission to access the dashboard. Please contact
							an administrator if you believe this is an error.
						</EmptyDescription>
					</EmptyHeader>
					<EmptyContent>
						<Button asChild>
							<Link to="/home">
								<ArrowLeft className="mr-2 size-4" />
								Back to Home
							</Link>
						</Button>
					</EmptyContent>
				</Empty>
			</div>
		);
	}

	return (
		<SidebarProvider>
			<Sidebar>
				<SidebarHeader>
					<Link to="/home" className="flex items-center gap-2 px-2 py-1">
						<img
							src={logoSrc}
							alt="Nontara"
							className="h-8 w-auto select-none"
							loading="eager"
							fetchPriority="high"
							decoding="async"
							draggable={false}
						/>
					</Link>
				</SidebarHeader>
				<SidebarContent>
					<SidebarGroup>
						<SidebarGroupContent>
							<SidebarMenu>
								{menuItems.map((item) => {
									const isActive = !!matchRoute({ to: item.url, fuzzy: false });
									return (
										<SidebarMenuItem key={item.title}>
											<SidebarMenuButton asChild isActive={isActive}>
												<Link to={item.url}>
													<item.icon />
													<span>{item.title}</span>
												</Link>
											</SidebarMenuButton>
										</SidebarMenuItem>
									);
								})}
							</SidebarMenu>
						</SidebarGroupContent>
					</SidebarGroup>
				</SidebarContent>
				<SidebarFooter>
					<SidebarMenu>
						<SidebarMenuItem>
							<UserAccountDropdown />
						</SidebarMenuItem>
					</SidebarMenu>
				</SidebarFooter>
			</Sidebar>
			<SidebarInset>
				<DashboardHeader />
				<Outlet />
			</SidebarInset>
		</SidebarProvider>
	);
}
