'use client';
import { Activity, Bookmark, Home, Search, Trophy } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/cn';
import { useOpenSearch } from './search-context';

/** Bottom tab bar (< lg): Home · Live · Search · Rankings · Watchlist (spec §87). Safe-area aware. */
export function MobileTabBar() {
  const pathname = usePathname();
  const openSearch = useOpenSearch();
  const isActive = (href: string) => (href === '/' ? pathname === '/' : pathname === href || pathname.startsWith(href + '/'));
  const cls = (active: boolean) => cn('flex h-full w-full flex-col items-center justify-center gap-0.5 text-[10.5px]', active ? 'text-accent' : 'text-ink-2');
  return (
    <nav aria-label="Primary (mobile)" className="safe-bottom fixed inset-x-0 bottom-0 z-[46] border-t border-rule bg-canvas/95 backdrop-blur-md lg:hidden">
      <ul className="grid h-[var(--tabbar-h)] grid-cols-5">
        <li className="min-w-0">
          <Link href="/" aria-current={isActive('/') ? 'page' : undefined} className={cls(isActive('/'))}>
            <Home size={21} aria-hidden strokeWidth={isActive('/') ? 2.25 : 1.75} />
            <span className="truncate">Home</span>
          </Link>
        </li>
        <li className="min-w-0">
          <Link href="/live" aria-current={isActive('/live') ? 'page' : undefined} className={cls(isActive('/live'))}>
            <span className="relative">
              <Activity size={21} aria-hidden strokeWidth={isActive('/live') ? 2.25 : 1.75} />
              <span className="dot absolute -right-1 -top-0.5 size-[6px]" aria-hidden />
            </span>
            <span className="truncate">Live</span>
          </Link>
        </li>
        <li className="min-w-0">
          <button type="button" onClick={openSearch} className={cls(false)} aria-label="Search">
            <Search size={21} aria-hidden strokeWidth={1.75} />
            <span className="truncate">Search</span>
          </button>
        </li>
        <li className="min-w-0">
          <Link href="/rankings" aria-current={isActive('/rankings') ? 'page' : undefined} className={cls(isActive('/rankings'))}>
            <Trophy size={21} aria-hidden strokeWidth={isActive('/rankings') ? 2.25 : 1.75} />
            <span className="truncate">Rankings</span>
          </Link>
        </li>
        <li className="min-w-0">
          <Link href="/watchlist" aria-current={isActive('/watchlist') ? 'page' : undefined} className={cls(isActive('/watchlist'))}>
            <Bookmark size={21} aria-hidden strokeWidth={isActive('/watchlist') ? 2.25 : 1.75} />
            <span className="truncate">Watchlist</span>
          </Link>
        </li>
      </ul>
    </nav>
  );
}