"use client";
import { usePathname, useRouter } from "next/navigation";
import { ChevronRight, Home } from "lucide-react";

const LABEL_MAP: Record<string, string> = {
  marketplace: "Marketplace",
  search: "Search",
  categories: "Categories",
  wishlist: "Wishlist",
  messages: "Messages",
  orders: "Orders",
  listing: "Listing",
  create: "Create",
  seller: "Seller",
  dashboard: "Dashboard",
  listings: "My Listings",
  earnings: "Earnings",
  profile: "Profile",
  settings: "Settings",
  tracking: "Tracking",
  checkout: "Checkout",
};

export function MarketplaceBreadcrumbs() {
  const pathname = usePathname();
  const router = useRouter();

  const segments = pathname.split("/").filter(Boolean);
  if (segments.length <= 1) return null;

  const crumbs = segments.map((seg, i) => {
    const href = "/" + segments.slice(0, i + 1).join("/");
    const isId = seg.length > 20 || /^[a-f0-9-]{8,}$/.test(seg);
    const label = isId ? "Detail" : (LABEL_MAP[seg] ?? seg.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()));
    return { label, href, isLast: i === segments.length - 1 };
  });

  return (
    <nav
      className="flex items-center gap-1 px-4 py-2 text-xs overflow-x-auto no-scrollbar border-b border-[var(--border)]"
      aria-label="Breadcrumb"
    >
      <button
        onClick={() => router.push("/marketplace")}
        className="flex items-center gap-1 shrink-0 transition-colors hover:text-[var(--accent)]"
        style={{ color: "var(--text-muted)" }}
      >
        <Home size={11} />
      </button>

      {crumbs.map((crumb) => (
        <span key={crumb.href} className="flex items-center gap-1 shrink-0">
          <ChevronRight size={10} style={{ color: "var(--border)" }} />
          <button
            onClick={() => !crumb.isLast && router.push(crumb.href)}
            className="font-medium transition-colors"
            style={{
              color: crumb.isLast ? "var(--text-primary)" : "var(--text-muted)",
              cursor: crumb.isLast ? "default" : "pointer",
            }}
          >
            {crumb.label}
          </button>
        </span>
      ))}
    </nav>
  );
}