import { cn } from '@/lib/utils';
import { Link } from '@tanstack/react-router';
import { __ } from '@wordpress/i18n';
import { Menu, X } from 'lucide-react';
import { useEffect, useState } from 'react';

type ActiveNavItem = {
	label: string;
	to: string;
};

type DisabledNavItem = {
	label: string;
	disabled: true;
};

type NavItem = ActiveNavItem | DisabledNavItem;

const NAV_ITEMS: NavItem[] = [
	{ label: __('Programs', 'allcoach'), to: '/programs/' },
	{ label: __('Clients', 'allcoach'), to: '/clients/' },
	{ label: __('Appointments', 'allcoach'), to: '/appointments/' },
	{ label: __('Orders', 'allcoach'), to: '/orders/' },
	{ label: __('Settings', 'allcoach'), to: '/settings/' },
];

const getCurrentPath = () => {
	const hash = window.location.hash.slice(1); // remove leading #
	return hash.split('?')[0] || '/'; // strip search params, fallback to /
};

const GlobalHeader = () => {
	const [pathname, setPathname] = useState(getCurrentPath);
	const [menuOpen, setMenuOpen] = useState(false);

	useEffect(() => {
		const handler = () => {
			setPathname(getCurrentPath());
			setMenuOpen(false);
		};
		window.addEventListener('allcoach:navigate', handler);
		return () => window.removeEventListener('allcoach:navigate', handler);
	}, []);

	const isActive = (to: string) => {
		const base = to.replace(/\/$/, ''); // strip trailing slash for comparison
		return (
			pathname === base ||
			pathname === base + '/' ||
			pathname.startsWith(base + '/')
		);
	};

	return (
		<header className="sticky top-[var(--wp-admin--admin-bar--height,32px)] z-50 border-b border-gray-200 bg-white">
			<div className="flex h-[54px] items-center justify-between px-4 md:px-5">
				{/* Logo */}
				<div className="flex shrink-0 items-center">
					<img
						src={`${__ALLCOACH_ADMIN__.pluginUrl}assets/images/logo.png`}
						alt="AllCoach"
						width={120}
						height={30}
						className="h-[28px] w-auto"
					/>
				</div>

				{/* Nav – desktop only, absolute centred */}
				<nav className="absolute left-1/2 flex -translate-x-1/2 items-center gap-1 max-md:hidden">
					{NAV_ITEMS.map((item) => {
						if ('disabled' in item) {
							return (
								<span
									key={item.label}
									className="cursor-default rounded-full px-4 py-1.5 text-[13px] font-medium text-gray-400"
								>
									{item.label}
								</span>
							);
						}

						return (
							<Link
								preload={false}
								key={item.to}
								to={item.to}
								className={cn(
									'rounded-full px-4 py-1.5 text-[13px] font-medium transition-colors',
									isActive(item.to)
										? 'border border-teal-500/30 bg-teal-50 text-teal-600'
										: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900',
								)}
							>
								{item.label}
							</Link>
						);
					})}
				</nav>

				{/* Right */}
				<div className="flex shrink-0 items-center gap-2">
					<span className="rounded-full border border-teal-200 px-3 py-1 text-[12px] font-medium text-teal-600 max-sm:hidden">
						v{__ALLCOACH_ADMIN__.version}
					</span>
					{/* Hamburger – mobile only */}
					<button
						type="button"
						onClick={() => setMenuOpen((o) => !o)}
						className="flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 text-gray-500 transition-colors hover:border-gray-300 hover:text-gray-700 md:hidden"
					>
						{menuOpen ? (
							<X className="size-[15px]" />
						) : (
							<Menu className="size-[15px]" />
						)}
					</button>
				</div>
			</div>

			{/* Mobile dropdown menu */}
			{menuOpen && (
				<nav className="border-t border-gray-100 px-3 py-2 md:hidden">
					{NAV_ITEMS.map((item) => {
						if ('disabled' in item) {
							return (
								<span
									key={item.label}
									className="flex cursor-default items-center rounded-lg px-3 py-2.5 text-[13px] font-medium text-gray-300"
								>
									{item.label}
								</span>
							);
						}

						return (
							<Link
								key={item.to}
								to={item.to}
								className={cn(
									'flex items-center rounded-lg px-3 py-2.5 text-[13px] font-medium transition-colors',
									isActive(item.to)
										? 'bg-teal-50 text-teal-600'
										: 'text-gray-700 hover:bg-gray-100',
								)}
							>
								{item.label}
							</Link>
						);
					})}
					<div className="mt-2 border-t border-gray-100 pt-2">
						<span className="px-3 py-1 text-[12px] text-gray-400">
							v{__ALLCOACH_ADMIN__.version}
						</span>
					</div>
				</nav>
			)}
		</header>
	);
};

export default GlobalHeader;