'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Home, Search, CalendarDays, PartyPopper, User } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { useItemCount } from '@/lib/store/booking-draft';

type NavItem = {
  href: string;
  // Feature 054 (US9, T065) — `cart` tab is now the Party Builder "Your Event".
  labelKey: 'home' | 'search' | 'wizard' | 'your_event' | 'profile';
  icon: React.ElementType;
  matchExact?: boolean;
};

export function BottomNav({ locale }: { locale: string }) {
  const t = useTranslations('nav');
  const pathname = usePathname();
  const cartItemCount = useItemCount();

  const items: NavItem[] = [
    { href: `/${locale}`, labelKey: 'home', icon: Home, matchExact: true },
    { href: `/${locale}/search`, labelKey: 'search', icon: Search },
    { href: `/${locale}/wizard`, labelKey: 'wizard', icon: CalendarDays },
    { href: `/${locale}/cart`, labelKey: 'your_event', icon: PartyPopper },
    { href: `/${locale}/me`, labelKey: 'profile', icon: User },
  ];

  return (
    <nav
      aria-label={t('menu')}
      className="fixed bottom-0 start-0 end-0 z-50 md:hidden border-t border-neutral-200 bg-white"
    >
      <ul className="flex list-none p-0 m-0">
        {items.map(({ href, labelKey, icon: Icon, matchExact }) => {
          const isActive = matchExact
            ? pathname === href
            : pathname.startsWith(href) && pathname !== `/${locale}`;
          return (
            <li key={href} className="flex-1">
              <Link
                href={href}
                className={`flex flex-col items-center gap-1 py-2.5 px-1 text-[11px] font-medium transition-colors ${
                  labelKey === 'wizard'
                    ? 'text-primary-600'
                    : isActive
                    ? 'text-primary-700'
                    : 'text-neutral-500 hover:text-neutral-800'
                }`}
                aria-current={isActive ? 'page' : undefined}
              >
                {labelKey === 'wizard' ? (
                  <span className="flex items-center justify-center rounded-full bg-primary-50 p-1">
                    <Icon className="h-6 w-6" aria-hidden />
                  </span>
                ) : labelKey === 'your_event' ? (
                  <div className="relative" data-testid="bottomnav-your-event-icon">
                    <Icon className="h-5 w-5" aria-hidden />
                    {cartItemCount > 0 && (
                      <span className="absolute -top-1 -end-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-primary-600 text-[7px] font-bold text-white">
                        {cartItemCount > 9 ? '9+' : cartItemCount}
                      </span>
                    )}
                  </div>
                ) : (
                  <Icon className="h-5 w-5" aria-hidden />
                )}
                <span>{t(labelKey)}</span>
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}