"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Home as HomeIcon,
  Sparkles,
  Calendar,
  Building2,
  UserRound,
  type LucideIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";

type NavItem = {
  label: string;
  href: string;
  icon: LucideIcon;
  match?: (pathname: string) => boolean;
};

const ITEMS: NavItem[] = [
  {
    label: "Trang chủ",
    href: "/",
    icon: HomeIcon,
    match: (p) => p === "/",
  },
  {
    label: "Tử vi",
    href: "/tu-vi",
    icon: Sparkles,
    match: (p) =>
      p === "/tu-vi" ||
      p.startsWith("/tu-vi-") ||
      p.startsWith("/tu-tru") ||
      p.startsWith("/12-con-giap") ||
      p.startsWith("/cung-hoang-dao") ||
      p.startsWith("/than-so-hoc") ||
      p.startsWith("/giai-mong") ||
      p.startsWith("/so-mang"),
  },
  {
    label: "Lịch",
    href: "/lich",
    icon: Calendar,
    match: (p) => p === "/lich" || p.startsWith("/lich-am") || p.startsWith("/xem-ngay-tot"),
  },
  {
    label: "Phong thủy",
    href: "/phong-thuy",
    icon: Building2,
    match: (p) =>
      p === "/phong-thuy" ||
      p.startsWith("/phong-thuy-") ||
      p.startsWith("/mau-sac") ||
      p.startsWith("/so-dien-thoai") ||
      p.startsWith("/nam-xay-nha") ||
      p.startsWith("/ban-tay"),
  },
  {
    label: "Cá nhân",
    href: "/me",
    icon: UserRound,
    match: (p) => p.startsWith("/me"),
  },
];

/**
 * Sticky bottom nav for mobile (hidden on lg+).
 *
 * Active state derived from pathname so navigating between sections
 * highlights the right tab without prop drilling.
 */
export function BottomNav() {
  const pathname = usePathname() ?? "/";

  return (
    <nav
      aria-label="Điều hướng dưới cùng"
      className="bg-bg-base/90 border-stroke-subtle fixed right-0 bottom-0 left-0 z-30 border-t backdrop-blur-md lg:hidden"
    >
      <ul className="grid h-16 grid-cols-5">
        {ITEMS.map(({ label, href, icon: Icon, match }) => {
          const active = match ? match(pathname) : pathname === href;
          return (
            <li key={href}>
              <Link
                href={href}
                aria-current={active ? "page" : undefined}
                className={cn(
                  "flex h-full flex-col items-center justify-center gap-0.5 transition-colors",
                  active ? "text-brand-gold" : "text-ink-muted hover:text-brand-gold"
                )}
              >
                <Icon className="h-5 w-5" aria-hidden="true" />
                <span className="text-[10px]">{label}</span>
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}