import { useLocation, useRouter } from "@tanstack/react-router";
import type { LucideIcon } from "lucide-react";
import {
	ArrowLeft,
	Database,
	LayoutDashboard,
	Puzzle,
	Users,
} from "lucide-react";
import UserMenu from "@/components/UserMenu";
import { Button } from "@/components/ui/button";
import { SidebarTrigger } from "@/components/ui/sidebar";
import type { FileRoutesByTo } from "@/routeTree.gen";

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,
	},
];

export function DashboardHeader() {
	const router = useRouter();
	const location = useLocation();
	const pathname = location.pathname;

	const getHeaderTitle = () => {
		const menuItem = menuItems.find((item) => item.url === pathname);
		return menuItem?.title || "Dashboard";
	};

	return (
		<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
			<div className="flex items-center gap-2">
				<SidebarTrigger className="-ml-1" />
				<Button
					variant="ghost"
					size="icon"
					onClick={() => router.history.back()}
					aria-label="Go back"
				>
					<ArrowLeft className="size-5" />
				</Button>
			</div>
			<div className="flex flex-1 items-center justify-between">
				<h1 className="font-semibold text-lg">{getHeaderTitle()}</h1>
				<UserMenu />
			</div>
		</header>
	);
}
