'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Compass, Home, LineChart, ScanLine, UserRound } from 'lucide-react';
import { cn } from '@/lib/format';

const TABS = [
  { href: '/', label: 'Home', icon: Home, match: (p: string) => p === '/' },
  { href: '/explore', label: 'Explore', icon: Compass, match: (p: string) => p.startsWith('/explore') || p.startsWith('/search') || p.startsWith('/asset') || p.startsWith('/set') || p.startsWith('/brand') },
  { href: '/markets', label: 'Markets', icon: LineChart, match: (p: string) => p.startsWith('/markets') || p.startsWith('/rareindex') || p.startsWith('/trending') || p.startsWith('/sales') || p.startsWith('/listings') || p.startsWith('/auctions') || p.startsWith('/market-map') },
  { href: '/scanner', label: 'Scanner', icon: ScanLine, match: (p: string) => p.startsWith('/scanner') || p.startsWith('/research') },
  { href: '/account', label: 'Account', icon: UserRound, match: (p: string) => p.startsWith('/account') || p.startsWith('/collections') || p.startsWith('/watchlist') || p.startsWith('/alerts') || p.startsWith('/login') || p.startsWith('/signup') || p.startsWith('/notifications') },
];

/** Mobile bottom tab bar (§165): five primary destinations, safe-area aware, hidden from md up. */
export function TabBar() {
  const pathname = usePathname() ?? '/';
  if (pathname.startsWith('/admin')) return null;
  return (
    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-elevated/92 backdrop-blur-md md:hidden" aria-label="Primary mobile" style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}>
      <ul className="grid h-[var(--ri-tabbar-h)] grid-cols-5">
        {TABS.map((t) => {
          const active = t.match(pathname);
          const Icon = t.icon;
          return (
            <li key={t.href}>
              <Link href={t.href} aria-current={active ? 'page' : undefined} className={cn('flex h-full flex-col items-center justify-center gap-0.5 text-[10px] font-medium', active ? 'text-fg' : 'text-subtle')}>
                <span className={cn('flex h-7 w-12 items-center justify-center rounded-full transition-colors', active && 'bg-inset')}>
                  <Icon className="h-[18px] w-[18px]" strokeWidth={active ? 2.25 : 1.75} />
                </span>
                {t.label}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}