'use client';
import { BarChart3, Globe2, Map, Scale, Search } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { routes } from '@/lib/site';
import { isFullBleed } from './main-frame';
import { useOpenSearch } from './search-context';

/**
 * Fixed bottom tab bar (< md): Explore · Countries · Compare · Rank · Search. Safe-area padding; the body
 * reserves space (`pb-[calc(56px+env(safe-area-inset-bottom))]`) so it never covers the footer. Hidden on the
 * full-viewport explorers, which carry their own bottom controls.
 */
export function MobileTabBar() {
  const pathname = usePathname();
  const openSearch = useOpenSearch();
  if (isFullBleed(pathname)) return null;
  const tabs = [
    { href: routes.explore(), label: t('nav.explore'), Icon: Map },
    { href: routes.countries(), label: t('nav.countries'), Icon: Globe2 },
    { href: routes.compare(), label: t('nav.compare'), Icon: Scale },
    { href: routes.rankings(), label: t('nav.rank'), Icon: BarChart3 },
  ];
  return (
    <nav aria-label={t('nav.primary')} className="fixed inset-x-0 bottom-0 z-30 border-t border-rule bg-paper/95 backdrop-blur supports-[backdrop-filter]:bg-paper/90 md:hidden safe-bottom">
      <ul className="grid h-14 grid-cols-5">
        {tabs.map(({ href, label, Icon }) => {
          const base = href.split('?')[0]!;
          const active = pathname === base || pathname.startsWith(`${base}/`);
          return (
            <li key={href} className="min-w-0">
              <Link href={href} aria-current={active ? 'page' : undefined} className={cn('flex h-full flex-col items-center justify-center gap-0.5 text-2xs', active ? 'text-accent' : 'text-ink-2')}>
                <Icon size={20} aria-hidden strokeWidth={active ? 2.25 : 1.75} />
                <span className="truncate">{label}</span>
              </Link>
            </li>
          );
        })}
        <li className="min-w-0">
          <button type="button" onClick={openSearch} className="flex h-full w-full flex-col items-center justify-center gap-0.5 text-2xs text-ink-2">
            <Search size={20} aria-hidden strokeWidth={1.75} />
            <span className="truncate">{t('nav.search')}</span>
          </button>
        </li>
      </ul>
    </nav>
  );
}