import React, { useState } from "react";
import {
	NavigationMenu,
	NavigationMenuList,
	NavigationMenuItem,
	NavigationMenuLink,
} from "./components/ui/NavigationMenu";
import { __, sprintf } from "@wordpress/i18n";
import { Link, useRouterState } from "@tanstack/react-router";
import { Button } from "./components/ui/Button";
import { Menu, X } from "lucide-react";
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "./components/ui/Tooltip";
import { _CONTENTGATE_DASHBOARD_, ContentGateDashboardType } from "./types";

type NavItem = {
	label: string;
	path: string;
};

type HeaderProps = {
	title?: string;
	navItems?: NavItem[];
};

const { version, assetsURL } =
	_CONTENTGATE_DASHBOARD_ as ContentGateDashboardType;

const MainHeader: React.FC<HeaderProps> = ({
	title = __("ContentGate", "contentgate"),
	navItems = [
		{ label: "Content Rules", path: "/content-rules" },
		{ label: "Settings", path: "/settings/general" },
	],
}) => {
	const routerState = useRouterState();
	const currentPath = routerState.location.pathname;
	const [mobileOpen, setMobileOpen] = useState(false);

	return (
		<header
			className="bg-white px-6 flex items-center justify-between gap-6 h-[60px] z-50 fixed top-[32px] right-0 border-b border-border"
			style={{ zIndex: 99999 }}
		>
			<div className="flex items-center gap-5 h-full">
				<div className="flex items-center gap-2 h-full border-r border-border pr-5">
					<img
						src={`${assetsURL || ""}images/logo.png`}
						alt={title}
						className="max-w-[150px]"
					/>
				</div>

				<div className="sm:hidden">
					<Button
						onClick={() => setMobileOpen(true)}
						className="px-3 py-2 flex items-center gap-2"
						variant="ghost"
					>
						<Menu size={20} />
					</Button>
				</div>

				<div className="hidden sm:flex h-full">
					<NavigationMenu className="h-full [&>div]:h-full">
						<NavigationMenuList className="h-full gap-3">
							{navItems.map((item, index) => {
								const isActive = currentPath === item.path;
								return (
									<NavigationMenuItem
										key={index}
										className="!mb-0 h-full"
									>
										<NavigationMenuLink asChild>
											<Link
												to={item.path}
												className={`px-1 py-6 h-full border-b-2 text-sm font-medium focus:outline-none focus:shadow-none focus:text-primary hover:bg-transparent hover:text-primary ${
													isActive
														? "text-primary border-primary"
														: "text-black-450 border-transparent"
												}`}
											>
												{item.label}
											</Link>
										</NavigationMenuLink>
									</NavigationMenuItem>
								);
							})}
						</NavigationMenuList>
					</NavigationMenu>
				</div>
			</div>

			<Tooltip>
				<TooltipTrigger>
					<span className="border border-border text-[#8F8F8F] bg-[#F3F3F3] rounded-[4px] px-2 py-[4px] text-xs font-medium">
						v{version}
					</span>
				</TooltipTrigger>
				<TooltipContent
					className="z-[99999] text-center max-w-[200px] "
					side="bottom"
				>
					<p>
						{sprintf(
							__(
								"You are currently using ContentGate v%s",
								"contentgate",
							),
							version,
						)}
					</p>
				</TooltipContent>
			</Tooltip>

			<div
				className={`fixed top-[45px] left-0 h-full w-64 bg-white shadow-xl z-50 transform transition-transform duration-300 ease-in-out ${
					mobileOpen ? "translate-x-0" : "-translate-x-full"
				}`}
			>
				<div className="flex justify-start p-4">
					<Button
						onClick={() => setMobileOpen(false)}
						variant="ghost"
						className="p-2"
					>
						<X size={20} />
					</Button>
				</div>

				<nav className="flex flex-col gap-2 p-4 ">
					{navItems.map((item, index) => {
						const isActive = currentPath === item.path;
						return (
							<Link
								key={index}
								to={item.path}
								onClick={() => setMobileOpen(false)}
								className={`px-3 py-2 font-semibold rounded ${
									isActive
										? "bg-primary text-white"
										: "text-black-450 hover:bg-gray-100"
								}`}
							>
								{item.label}
							</Link>
						);
					})}
				</nav>
			</div>

			{mobileOpen && (
				<div
					onClick={() => setMobileOpen(false)}
					className="fixed inset-0 bg-black/40 z-40"
				/>
			)}
		</header>
	);
};

export default MainHeader;