"use client";
import { usePathname, useRouter } from "next/navigation";
import { Home, Search, Package, User, type LucideProps } from "lucide-react";
import { useWishlist } from "@/lib/WishlistContext";

const TABS = [
  { id: "home",    label: "Home",    href: "/marketplace",         icon: Home,    exact: true },
  { id: "search",  label: "Browse",  href: "/marketplace/search",  icon: Search },
  // center slot → FAB occupies this space
  { id: "orders",  label: "Orders",  href: "/marketplace/orders",  icon: Package },
  { id: "profile", label: "Profile", href: "/marketplace/profile", icon: User },
];

export function MarketplaceBottomNav() {
  const router = useRouter();
  const pathname = usePathname();
  const { count: wishlistCount } = useWishlist();

  // Hide bottom nav on messages page — it uses its own full-height layout
  if (pathname.startsWith("/marketplace/messages")) return null;

  const isActive = (href: string, exact?: boolean) =>
    exact ? pathname === href : pathname === href || pathname.startsWith(href + "/");

  return (
    <nav
      className="md:hidden flex items-stretch"
      style={{
        position: "fixed",
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 40,
        height: 60,
        paddingBottom: "env(safe-area-inset-bottom, 0px)",
        background: "var(--card)",
        borderTop: "1px solid var(--border)",
        backdropFilter: "blur(16px)",
        WebkitBackdropFilter: "blur(16px)",
      }}
    >
      {/* First 2 tabs */}
      {TABS.slice(0, 2).map((tab) => {
        const active = isActive(tab.href, tab.exact);
        return (
          <TabButton
            key={tab.id}
            label={tab.label}
            icon={tab.icon}
            active={active}
            onClick={() => router.push(tab.href)}
          />
        );
      })}

      {/* Center spacer for FAB */}
      <div style={{ width: 72, flexShrink: 0 }} />

      {/* Last 2 tabs */}
      {TABS.slice(2).map((tab) => {
        const active = isActive(tab.href, tab.exact);
        return (
          <TabButton
            key={tab.id}
            label={tab.label}
            icon={tab.icon}
            active={active}
            onClick={() => router.push(tab.href)}
          />
        );
      })}
    </nav>
  );
}

function TabButton({
  label,
  icon: Icon,
  active,
  onClick,
}: {
  label: string;
  icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
  active: boolean;
  onClick: () => void;
}) {
  return (
    <button
      onClick={onClick}
      style={{
        flex: 1,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 3,
        border: "none",
        background: "transparent",
        cursor: "pointer",
        padding: 0,
        position: "relative",
        color: active ? "var(--accent)" : "var(--text-muted)",
        transition: "color 0.15s",
      }}
    >
      {/* Active indicator dot */}
      {active && (
        <span
          style={{
            position: "absolute",
            top: 6,
            left: "50%",
            transform: "translateX(-50%)",
            width: 4,
            height: 4,
            borderRadius: "50%",
            background: "var(--accent)",
          }}
        />
      )}
      <Icon size={20} strokeWidth={active ? 2.2 : 1.6} />
      <span
        style={{
          fontSize: 9,
          fontWeight: active ? 700 : 500,
          letterSpacing: "0.02em",
        }}
      >
        {label}
      </span>
    </button>
  );
}