'use client';
import { Activity, BarChart3, Globe2, MoreHorizontal, Search } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import { cn } from '@/lib/cn';
import { moreNav, primaryNav, routes } from '@/lib/site';
import { useOpenSearch } from './search-context';

/**
 * Native-feeling bottom tab bar (< md): Explore · Search · Events · Stats · More. Safe-area aware; the body reserves
 * `pb-[calc(58px+env(safe-area-inset-bottom))]` so it never covers the footer. Hidden on /explore (full-screen globe has its own controls).
 */
export function MobileTabBar() {
  const pathname = usePathname();
  const openSearch = useOpenSearch();
  const [more, setMore] = useState(false);
  useEffect(() => setMore(false), [pathname]);
  const tabs = [
    { href: routes.explore(), label: 'Explore', Icon: Globe2, match: (p: string) => p === '/' || p.startsWith('/explore') || p.startsWith('/satellite') },
    { href: routes.events(), label: 'Events', Icon: Activity, match: (p: string) => p.startsWith('/events') },
    { href: routes.stats(), label: 'Stats', Icon: BarChart3, match: (p: string) => p.startsWith('/stats') || p.startsWith('/rankings') },
  ];
  return (
    <>
      {more && (
        <div className="fixed inset-0 z-[45] bg-black/50 md:hidden" onClick={() => setMore(false)}>
          <div className="panel absolute inset-x-2 bottom-[calc(var(--tabbar-h)+env(safe-area-inset-bottom,0px)+8px)] max-h-[70vh] overflow-y-auto p-3" onClick={(e) => e.stopPropagation()}>
            <p className="eyebrow px-2 pb-2">Browse</p>
            <ul className="grid grid-cols-2 gap-1">
              {[...primaryNav, ...moreNav].map((n) => (
                <li key={n.href}>
                  <Link href={n.href} className="block rounded-md px-3 py-3 text-[15px] text-ink-2 hover:bg-plane-2 hover:text-ink">{n.label}</Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      )}
      <nav aria-label="Primary (mobile)" className="safe-bottom fixed inset-x-0 bottom-0 z-[46] border-t border-rule bg-plane/95 backdrop-blur-md md:hidden">
        <ul className="grid h-[58px] grid-cols-5">
          {tabs.slice(0, 1).map(({ href, label, Icon, match }) => (
            <TabLink key={href} href={href} label={label} Icon={Icon} active={match(pathname)} />
          ))}
          <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={21} aria-hidden strokeWidth={1.75} />
              <span className="truncate">Search</span>
            </button>
          </li>
          {tabs.slice(1).map(({ href, label, Icon, match }) => (
            <TabLink key={href} href={href} label={label} Icon={Icon} active={match(pathname)} />
          ))}
          <li className="min-w-0">
            <button type="button" onClick={() => setMore((m) => !m)} aria-expanded={more} className={cn('flex h-full w-full flex-col items-center justify-center gap-0.5 text-2xs', more ? 'text-accent' : 'text-ink-2')}>
              <MoreHorizontal size={21} aria-hidden strokeWidth={1.75} />
              <span className="truncate">More</span>
            </button>
          </li>
        </ul>
      </nav>
    </>
  );
}

function TabLink({ href, label, Icon, active }: { href: string; label: string; Icon: typeof Globe2; active: boolean }) {
  return (
    <li 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={21} aria-hidden strokeWidth={active ? 2.25 : 1.75} />
        <span className="truncate">{label}</span>
      </Link>
    </li>
  );
}