import { Link, useNavigate, useRouterState } from "@tanstack/react-router";
import { SidebarIcon } from "lucide-react";
import { authClient, useSession } from "@/lib/auth-client";
import { ModeToggle } from "./mode-toggle";
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
import { Button } from "./ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "./ui/dropdown-menu";
import { useSidebar } from "./ui/sidebar";

export default function Header() {
	const { toggleSidebar } = useSidebar();
	const { data: session } = useSession();
	const { signOut } = authClient;
	const router = useRouterState();

	const navigate = useNavigate();
	const currentPath = router.location.href;

	return (
		<header
			className={`sticky top-0 z-50 flex w-full items-center border-b ${session?.session.impersonatedBy ? "bg-amber-600" : "bg-background"} `}
		>
			<div className="flex justify-between w-full">
				<div className="flex items-center gap-2 px-4">
					<div className="flex flex-row">
						<Link to="/">
							<img
								src="/lst/app/imgs/dkLst.png"
								alt="Home"
								className="size-8 cursor-pointer"
							/>
						</Link>
					</div>
					<Button
						className="h-8 w-8"
						variant="ghost"
						size="icon"
						onClick={toggleSidebar}
					>
						<SidebarIcon />
					</Button>
				</div>
				<div className="flex flex-col gap-0.5 leading-none p-2">
					<span className="font-semibold text-2xl">Logistics Support Tool</span>
				</div>
				<div className="m-1 flex gap-1">
					<div>
						{session?.session.impersonatedBy && (
							<Button
								onClick={async () => {
									await authClient.admin.stopImpersonating();
									await authClient.getSession();

									window.location.assign("/lst/app/admin/users");
								}}
							>
								Stop Impersonating
							</Button>
						)}
					</div>
					<div>
						<ModeToggle />
					</div>
					<div>
						{session ? (
							<DropdownMenu>
								<DropdownMenuTrigger>
									<Avatar>
										<AvatarImage
											src="https://github.com/evilrabbit.png"
											alt="@evilrabbit"
										/>
										<AvatarFallback>CN</AvatarFallback>
									</Avatar>
								</DropdownMenuTrigger>
								<DropdownMenuContent>
									<DropdownMenuLabel>
										Hello {session.user?.name}
									</DropdownMenuLabel>
									<DropdownMenuSeparator />
									<DropdownMenuItem>
										<Link to="/user/profile">Account</Link>
									</DropdownMenuItem>

									{/* <DropdownMenuItem>Billing</DropdownMenuItem>
                                                <DropdownMenuItem>Team</DropdownMenuItem>
                                                <DropdownMenuItem>Subscription</DropdownMenuItem> */}
									<hr className="solid"></hr>
									<DropdownMenuItem>
										<div className="m-auto">
											<Button
												size="xs"
												variant="ghost"
												onClick={() =>
													signOut({
														fetchOptions: {
															onSuccess: () => {
																navigate({ to: "/" });
															},
														},
													})
												}
											>
												Logout
											</Button>
										</div>
									</DropdownMenuItem>
								</DropdownMenuContent>
							</DropdownMenu>
						) : (
							<div className="">
								<Button>
									<Link to="/login" search={{ redirect: currentPath }}>
										Login
									</Link>
								</Button>
							</div>
						)}
					</div>
				</div>
			</div>
		</header>
	);
}
