import { Link, useNavigate } from "@tanstack/react-router";
import { LogOut, User } from "lucide-react";
import { authClient } from "@/lib/auth-client";

interface HeaderProps {
	userName?: string;
	isAdmin?: boolean;
	/** When true, the user is not authenticated — show login/signup CTAs */
	isGuest?: boolean;
	isVisible?: boolean;
	/** When true, uses fixed positioning (for homepage scroll behavior) */
	isHomepage?: boolean;
}

export function Header({
	userName,
	isAdmin,
	isGuest,
	isVisible,
	isHomepage,
}: HeaderProps) {
	const navigate = useNavigate();

	const handleSignOut = async () => {
		await authClient.signOut();
		navigate({ to: "/" });
	};

	return (
		<header
			className={`border-white/10 border-b bg-[#214e51]/95 backdrop-blur-sm transition-transform duration-300 ${
				isVisible ? "translate-y-0" : "-translate-y-full"
			} ${isHomepage ? "fixed" : "sticky"} top-0 right-0 left-0 z-50`}
		>
			<div className="mx-auto flex max-w-8xl items-center justify-between px-3 py-2 sm:px-6 sm:py-3">
				<nav className="flex items-center gap-3 sm:gap-6">
					<Link
						to="/"
						className="font-['Intro',sans-serif] text-base text-white/80 transition-opacity hover:opacity-100 sm:text-lg"
					>
						Kunstenkamp
					</Link>
					{!isGuest && (
						<>
							<Link
								to="/account"
								className="text-sm text-white/70 transition-colors hover:text-white"
								activeProps={{ className: "text-white font-medium" }}
							>
								<span className="hidden sm:inline">Mijn Account</span>
								<User className="h-4 w-4 sm:hidden" />
							</Link>
							{isAdmin && (
								<Link
									to="/admin"
									className="text-sm text-white/70 transition-colors hover:text-white"
									activeProps={{ className: "text-white font-medium" }}
								>
									Admin
								</Link>
							)}
						</>
					)}
				</nav>

				{isGuest ? (
					<div className="flex items-center gap-2 sm:gap-3">
						<Link
							to="/login"
							className="text-sm text-white/70 transition-colors hover:text-white"
						>
							<span className="hidden sm:inline">Inloggen</span>
							<span className="sm:hidden">Login</span>
						</Link>
						<span className="hidden text-white/20 sm:inline">·</span>
						<Link
							to="/login"
							search={{ signup: "1" }}
							className="rounded bg-white/10 px-2 py-1 text-white/80 text-xs transition-colors hover:bg-white/20 hover:text-white sm:px-3 sm:py-1.5 sm:text-sm"
						>
							<span className="hidden sm:inline">Account aanmaken</span>
							<span className="sm:hidden">Registreer</span>
						</Link>
					</div>
				) : (
					<div className="flex items-center gap-2 sm:gap-3">
						<span className="max-w-[80px] truncate text-white/60 text-xs sm:max-w-none sm:text-sm">
							{userName}
						</span>
						<button
							type="button"
							onClick={handleSignOut}
							className="flex items-center gap-1 rounded px-1.5 py-1 text-white/50 transition-colors hover:bg-white/10 hover:text-white sm:px-2"
							title="Uitloggen"
						>
							<LogOut className="h-4 w-4" />
							<span className="hidden text-xs sm:inline">Uitloggen</span>
						</button>
					</div>
				)}
			</div>
		</header>
	);
}
