import { HeaderNavigation } from "@/components/header/navigation";
import { LoginButton } from "@/components/login-button";
import { LogoutButton } from "@/components/logout-button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { validateRequest } from "@/server/auth";
import { UserRole, hasRole } from "@/server/auth/permissions";
import { StickerIcon, UserIcon, WrenchIcon } from "lucide-react";
import Link from "next/link";
import { If, Then } from "react-if";

function getInitials(name: string | undefined) {
	if (!name) return "";

	const parts = name.split(" ");
	if (parts.length === 1) return parts[0].slice(0, 2);

	return parts[0].charAt(0) + parts[parts.length - 1].charAt(0);
}

export async function Header() {
	const { user } = await validateRequest();

	return (
		<header className="h-16 bg-neutral-900 border-b-4 border-neutral-600 text-white select-none shadow-md">
			<div className="px-8 h-full max-w-screen-2xl w-full mx-auto flex items-center justify-between">
				<div className="flex flex-row items-center gap-8">
					<Link href="/" className="flex items-center gap-2">
						<StickerIcon size={20} />
						<h1 className="text-lg font-mono">MYP</h1>
					</Link>
					<HeaderNavigation />
				</div>

				{user != null && (
					<DropdownMenu>
						<DropdownMenuTrigger>
							<Avatar>
								<AvatarFallback className="bg-neutral-700">
									<span className="font-semibold">{getInitials(user?.displayName)}</span>
								</AvatarFallback>
							</Avatar>
						</DropdownMenuTrigger>
						<DropdownMenuContent align="end" className="w-56">
							<DropdownMenuGroup>
								<DropdownMenuLabel>Mein Account</DropdownMenuLabel>
								<DropdownMenuSeparator />
								<DropdownMenuItem asChild>
									<Link href="/my/profile/" className="flex items-center gap-2">
										<UserIcon className="w-4 h-4" />
										<span>Mein Profil</span>
									</Link>
								</DropdownMenuItem>

								<If condition={hasRole(user, UserRole.ADMIN)}>
									<Then>
										<DropdownMenuItem asChild>
											<Link href="/admin/" className="flex items-center gap-2">
												<WrenchIcon className="w-4 h-4" />
												<span>Adminbereich</span>
											</Link>
										</DropdownMenuItem>
									</Then>
								</If>
								<DropdownMenuSeparator />
								<DropdownMenuItem>
									<LogoutButton />
								</DropdownMenuItem>
							</DropdownMenuGroup>
						</DropdownMenuContent>
					</DropdownMenu>
				)}
				{user == null && <LoginButton />}
			</div>
		</header>
	);
}