"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

import { LayoutGrid, Trophy, Wallet } from "lucide-react";

import { cn } from "@/lib/utils";

const tabs = [
  { href: "/hall", label: "大厅", icon: LayoutGrid, match: (p: string) => p === "/hall" },
  {
    href: "/wallet",
    label: "钱包",
    icon: Wallet,
    match: (p: string) => p === "/wallet" || p.startsWith("/wallet/"),
  },
  {
    href: "/results",
    label: "开奖",
    icon: Trophy,
    match: (p: string) => p === "/results" || p.startsWith("/results/"),
  },
] as const;

/**
 * 移动端 H5 主导航：底部 Tab（界面文档 §1.1 以手机为主）。
 */
export function PlayerBottomNav() {
  const pathname = usePathname() ?? "";

  return (
    <nav
      className="fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/95 pb-[env(safe-area-inset-bottom,0px)] backdrop-blur-md supports-[backdrop-filter]:bg-background/90"
      aria-label="主导航"
    >
      <div className="mx-auto grid h-14 max-w-lg grid-cols-3">
        {tabs.map(({ href, label, icon: Icon, match }) => {
          const active = match(pathname);
          return (
            <Link
              key={href}
              href={href}
              prefetch
              aria-current={active ? "page" : undefined}
              className={cn(
                "flex flex-col items-center justify-center gap-0.5 text-[11px] font-medium transition-colors",
                active
                  ? "text-primary"
                  : "text-muted-foreground hover:text-foreground active:text-foreground",
              )}
            >
              <Icon
                aria-hidden
                className={cn("size-[22px]", active && "stroke-[2.25px]")}
              />
              {label}
            </Link>
          );
        })}
      </div>
    </nav>
  );
}