"use client";

import { Activity, Map as MapIcon, Radio, Search, Trophy } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { openPalette } from "@/components/command-palette";
import { cn } from "@/components/ui/cn";
import { routes } from "@/lib/routes";

/** §72 — Map · Live · Projects · Rank · Search. */
const ITEMS = [
  { label: "Map", href: routes.map(), icon: MapIcon, match: (p: string) => p.startsWith("/map") },
  { label: "Live", href: routes.live(), icon: Radio, match: (p: string) => p.startsWith("/live") || p.startsWith("/pulse"), live: true },
  { label: "Projects", href: routes.projects(), icon: Activity, match: (p: string) => p.startsWith("/projects") },
  { label: "Rank", href: routes.rankings(), icon: Trophy, match: (p: string) => p.startsWith("/rankings") },
  { label: "Search", href: null, icon: Search, match: (p: string) => p.startsWith("/search") },
];

/** Fixed bottom nav (mobile only). Hidden by `[data-hide-mobile-nav]` on body (map page sheets). */
export function MobileNav() {
  const path = usePathname();
  return (
    <nav aria-label="Mobile" className="fixed inset-x-0 bottom-0 z-[55] border-t border-hair bg-paper/95 backdrop-blur safe-b md:hidden [body[data-hide-mobile-nav]_&]:hidden">
      <ul className="grid h-14 grid-cols-5">
        {ITEMS.map((it) => {
          const active = it.match(path);
          const Icon = it.icon;
          const cls = cn("relative flex h-full flex-col items-center justify-center gap-0.5 text-[10.5px] font-medium", active ? "text-ink" : "text-ink-3");
          const inner = (
            <>
              <span className="relative">
                <Icon className="size-5" strokeWidth={active ? 2 : 1.6} />
                {it.live && <span aria-hidden className="absolute -right-1 -top-0.5 inline-block size-1.5 rounded-full bg-accent animate-pulse-soft" />}
              </span>
              <span>{it.label}</span>
              {active && <span aria-hidden className="absolute inset-x-5 top-0 h-[2px] bg-ink" />}
            </>
          );
          return (
            <li key={it.label}>
              {it.href ? (
                <Link href={it.href} aria-current={active ? "page" : undefined} className={cls}>
                  {inner}
                </Link>
              ) : (
                <button type="button" onClick={() => openPalette()} className={cn(cls, "w-full")} aria-label="Search">
                  {inner}
                </button>
              )}
            </li>
          );
        })}
      </ul>
    </nav>
  );
}