"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  RiHomeLine,
  RiMenu4Fill,
  RiPokerHeartsLine,
  RiShoppingCartLine,
  RiUser3Line,
} from "@remixicon/react";
import { cn } from "@/lib/utils";

const STATIC_ITEMS = [
  { href: "/", label: "Home", Icon: RiHomeLine },
  { href: "/cart", label: "Cart", Icon: RiShoppingCartLine },
  { href: "/products", label: "Category", Icon: RiMenu4Fill },
  { href: "/wishlist", label: "Wishlist", Icon: RiPokerHeartsLine },
];

/**
 * Client-rendered mobile bottom navigation so the active tab is derived
 * from the current pathname instead of being hardcoded.
 */
export default function MobileNav({ hasSession }: { hasSession: boolean }) {
  const pathname = usePathname();
  const accountHref = hasSession ? "/account" : "/login";

  const items = [
    ...STATIC_ITEMS,
    { href: accountHref, label: "Account", Icon: RiUser3Line },
  ];

  function isActive(href: string) {
    if (href === "/") return pathname === "/";
    return pathname === href || pathname.startsWith(`${href}/`);
  }

  return (
    <nav
      aria-label="Mobile bottom navigation"
      className="md:hidden fixed bottom-0 left-0 right-0 z-50 border-t border-outline-variant bg-background"
    >
      <div className="mx-auto grid max-w-md grid-cols-5 gap-1 px-3 py-2">
        {items.map((item) => {
          const active = isActive(item.href);
          return (
            <Link
              key={item.label}
              href={item.href}
              prefetch
              aria-current={active ? "page" : undefined}
              className={cn(
                "flex flex-col items-center gap-1 rounded-full px-2 py-2 text-[11px] font-medium transition-colors",
                active
                  ? "text-primary"
                  : "text-on-surface-variant hover:text-primary",
              )}
            >
              <span
                className={cn(
                  "flex h-8 w-8 items-center justify-center rounded-full",
                  active ? "bg-primary text-primary-foreground" : "",
                )}
              >
                <item.Icon size={18} />
              </span>
              <span>{item.label}</span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}