'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react';
import { ShoppingCart, Heart, User, Menu, X, Search } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useCart } from '@/presentation/hooks/useCart';
import { useWishlist } from '@/presentation/hooks/useWishlist';
import { useAuth } from '@/presentation/hooks/useAuth';
import { useTranslation } from '@/hooks/useTranslation';
import Logo from '@/components/ui/Logo';
import { SITE_LOCATION } from '@/lib/constants';

export default function Header() {
  const pathname = usePathname();
  const [mobileOpen, setMobileOpen] = useState(false);
  const { summary } = useCart();
  const { items: wishlistItems } = useWishlist();
  const { isAuthenticated } = useAuth();
  const cartCount = summary.itemCount;
  const wishlistCount = wishlistItems.length;
  const { t } = useTranslation();

  const isHome = pathname === '/' || pathname === '/home';

  const navLinks = [
    { href: '/', label: t('nav.home'), matchHome: true },
    { href: '/shop', label: t('nav.shop') },
    { href: '/shop?category=chicken', label: t('nav.chicken') },
    { href: '/shop?category=beef', label: t('nav.beef') },
    { href: '/shop?category=lamb', label: t('nav.lamb') },
    { href: '/shop?category=fish', label: t('nav.fish') },
    { href: '/about', label: t('nav.about') },
    { href: '/about#contact', label: t('nav.contact') },
  ];

  return (
    <header className="border-b border-cream-300/80 bg-cream-50/95 backdrop-blur-md">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex h-16 items-center justify-between lg:h-20">
          <Link href="/" className="flex items-center gap-3">
            <Logo size="sm" />
            <div className="hidden sm:block">
              <span className="font-display text-xl font-bold text-brand-800">
                {t('site.name')}
              </span>
              <p className="text-[10px] font-medium uppercase tracking-widest text-brand-600">
                {SITE_LOCATION}
              </p>
            </div>
          </Link>

          <nav className="hidden items-center gap-8 lg:flex">
            {navLinks.map((link) => {
              const active =
                'matchHome' in link && link.matchHome
                  ? isHome
                  : pathname === link.href || pathname.startsWith(`${link.href}?`);
              return (
                <Link
                  key={link.href}
                  href={link.href}
                  aria-current={active ? 'page' : undefined}
                  className={cn(
                    'text-sm font-medium transition-colors hover:text-brand-700',
                    active ? 'text-brand-800' : 'text-gray-600'
                  )}
                >
                  {link.label}
                </Link>
              );
            })}
          </nav>

          <div className="flex items-center gap-1 sm:gap-2">
            <Link
              href="/shop?q="
              className="hidden rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700 sm:block"
              aria-label={t('nav.searchProducts')}
            >
              <Search className="h-5 w-5" />
            </Link>

            <Link
              href="/wishlist"
              className="relative rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700"
              aria-label={t('nav.wishlist')}
            >
              <Heart className="h-5 w-5" />
              {wishlistCount > 0 && (
                <span className="absolute -end-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-gold-500 text-[10px] font-bold text-white">
                  {wishlistCount}
                </span>
              )}
            </Link>

            <Link
              href="/cart"
              className="relative rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700"
              aria-label={t('nav.cart')}
            >
              <ShoppingCart className="h-5 w-5" />
              {cartCount > 0 && (
                <span className="absolute -end-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-brand-700 text-[10px] font-bold text-white">
                  {cartCount}
                </span>
              )}
            </Link>

            <Link
              href={isAuthenticated ? '/account' : '/login'}
              className="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700"
              aria-label={t('nav.account')}
            >
              <User className="h-5 w-5" />
            </Link>

            <button
              className="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 lg:hidden"
              onClick={() => setMobileOpen(!mobileOpen)}
              aria-label={t('nav.toggleMenu')}
            >
              {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
            </button>
          </div>
        </div>
      </div>

      {mobileOpen && (
        <div className="border-t border-gray-100 bg-white lg:hidden">
          <nav className="flex flex-col px-4 py-4">
            {navLinks.map((link) => {
              const active =
                'matchHome' in link && link.matchHome
                  ? isHome
                  : pathname === link.href || pathname.startsWith(`${link.href}?`);
              return (
                <Link
                  key={link.href}
                  href={link.href}
                  aria-current={active ? 'page' : undefined}
                  className={cn(
                    'rounded-lg px-4 py-3 text-sm font-medium transition-colors hover:bg-brand-50 hover:text-brand-700',
                    active ? 'bg-brand-50 text-brand-800' : 'text-gray-600'
                  )}
                  onClick={() => setMobileOpen(false)}
                >
                  {link.label}
                </Link>
              );
            })}
          </nav>
        </div>
      )}
    </header>
  );
}