"use client";

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

const titleByPath: { href: string; label: string }[] = [
  { href: "/dashboard", label: "Dashboard" },
  { href: "/sellers", label: "Sellers" },
  { href: "/products", label: "Products" },
  { href: "/categories", label: "Categories" },
  { href: "/quotes", label: "Request a Quote" },
  { href: "/offers", label: "Offers" },
  { href: "/questions", label: "Questions" },
  { href: "/profile", label: "My Profile" },
];

export default function TopbarBreadcrumb() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const title = titleByPath.find((item) => pathname.startsWith(item.href))?.label ?? "Dashboard";
  const segments = pathname.split("/").filter(Boolean);
  const isSellerDetail = segments[0] === "sellers" && segments.length > 1;
  const isListedProducts = isSellerDetail && searchParams.get("tab") === "products";
  const isProductsCatalog = segments[0] === "products" && (segments[1] === "new" || segments[1] === "used");

  if (isProductsCatalog) {
    return (
      <p className="flex items-center gap-1.5 text-[13px] font-medium text-[#667085]">
        <span>Products</span>
        <span>&gt;</span>
        <span className="text-[#101828]">{segments[1] === "new" ? "New Products" : "Used Products"}</span>
      </p>
    );
  }

  if (!isSellerDetail) {
    return <p className="text-[13px] font-medium text-[#344054]">{title}</p>;
  }

  return (
    <p className="flex items-center gap-1.5 text-[13px] font-medium text-[#667085]">
      <Link href="/sellers" className="hover:text-[#101828]">
        Sellers
      </Link>
      <span>&gt;</span>
      {isListedProducts ? (
        <>
          <Link href={pathname} className="hover:text-[#101828]">
            Sellers Details
          </Link>
          <span>&gt;</span>
          <span className="text-[#101828]">Listed Products</span>
        </>
      ) : (
        <span className="text-[#101828]">Sellers Details</span>
      )}
    </p>
  );
}