ignum/components/breadCrumb.tsx

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronRight, Home } from "lucide-react";
import { useTranslations } from "next-intl";
import { useCategory } from "@/zustand/useCategory";
import { useSubCategory } from "@/zustand/useSubCategory";
import { useProductPageInfo } from "@/zustand/useProduct";

interface BreadcrumbProps {
  customLabels?: Record<string, string>;
  className?: string;
}

export function Breadcrumb({
  customLabels = {},
  className = "",
}: BreadcrumbProps) {
  const pathname = usePathname();
  const t = useTranslations();
  const category = useCategory((state) => state.category);
  const subCategory = useSubCategory((state) => state.subCategory);
  const product = useProductPageInfo((state) => state.product);

  // Pathdan segments olish
  const segments = pathname.split("/").filter((segment) => segment !== "");

  // Agar locale bo'lsa, uni olib tashlash (uz, en, ru)
  const locales = ["uz", "en", "ru"];
  const filteredSegments = segments.filter(
    (segment) => !locales.includes(segment),
  );

  // Agar faqat home page bo'lsa, breadcrumb ko'rsatmaslik
  if (filteredSegments.length === 0) {
    return null;
  }

  // Breadcrumb items yaratish
  const breadcrumbItems: Array<{
    label: string;
    href: string;
    isLast: boolean;
  }> = [];

  // Home qo'shish (har doim birinchi)
  breadcrumbItems.push({
    label: t("breadcrumb.home") || "Home",
    href: "/",
    isLast: false,
  });

  // Locale olish
  const locale = segments.find((seg) => locales.includes(seg)) || "";
  const localePrefix = locale ? `/${locale}` : "";

  // Segmentlarni tahlil qilish
  filteredSegments.forEach((segment, index) => {
    const isLast = index === filteredSegments.length - 1;

    if (segment === "catalog_page") {
      // Catalog_page - asosiy kategoriyalar sahifasi
      breadcrumbItems.push({
        label: t("breadcrumb.catalog_page") || "Katalog",
        href: `${localePrefix}/catalog_page`,
        isLast: isLast,
      });
    } else if (segment === "subCategory") {
      // SubCategory - kategoriya nomi ko'rsatiladi
      if (category?.name) {
        breadcrumbItems.push({
          label: category.name,
          href: `${localePrefix}/catalog_page/subCategory`,
          isLast: isLast,
        });
      }
    } else if (segment === "products") {
      if (subCategory?.name) {
        // Agar subCategory orqali kelgan bo'lsa
        // 1. Kategoriya
        if (category?.name) {
          const categoryInBreadcrumb = breadcrumbItems.find(
            (item) => item.label === category.name,
          );
          if (!categoryInBreadcrumb) {
            breadcrumbItems.push({
              label: category.name,
              href: `${localePrefix}/catalog_page/subCategory`,
              isLast: false,
            });
          }
        }

        // 2. SubKategoriya
        breadcrumbItems.push({
          label: subCategory.name,
          href: `${localePrefix}/catalog_page/subCategory`,
          isLast: false,
        });
      } else if (category?.name) {
        // To'g'ridan-to'g'ri kategoriyadan products ga kelgan
        breadcrumbItems.push({
          label: category.name,
          href: `${localePrefix}/catalog_page`,
          isLast: false,
        });
      }
    } else if (segment.startsWith("[") && segment.endsWith("]")) {
      // Dynamic route (masalan, [slug])
      // Custom label yoki default
      const slugValue = segment.replace(/\[|\]/g, "");
      const label = customLabels[slugValue] || slugValue;

      breadcrumbItems.push({
        label: label,
        href: `${localePrefix}/${filteredSegments.slice(0, index + 1).join("/")}`,
        isLast: isLast,
      });
    } else {
      // Boshqa segmentlar
      const label = getLabel(segment);
      breadcrumbItems.push({
        label: label,
        href: `${localePrefix}/${filteredSegments.slice(0, index + 1).join("/")}`,
        isLast: isLast,
      });
    }
  });

  // Default label translator
  function getLabel(segment: string): string {
    // Agar custom label berilgan bo'lsa
    if (customLabels[segment]) {
      return customLabels[segment];
    }

    // Agar translation mavjud bo'lsa
    try {
      if (segment === "special_product") {
        return product.name;
      }
      if(segment === 'detail') return '';
      return t(`breadcrumb.${segment}`);
    } catch {
      // Aks holda, segment nomini formatlash
      return segment
        .replace(/-/g, " ")
        .replace(/_/g, " ")
        .split(" ")
        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
        .join(" ");
    }
  }

  return (
    <nav aria-label="Breadcrumb" className={`py-4 ${className} sm:px-5 px-2`}>
      <ol className="flex items-center flex-wrap gap-2 sm:text-xl text-lg">
        {breadcrumbItems.map((item, index) => (
          <li
            key={`${item.label}-${index}`}
            className="flex items-center gap-2"
          >
            {index > 0 && (
              <ChevronRight className="w-4 h-4 text-gray-200" />
            )}

            {index === 0 ? (
              // Home link with icon
              <Link
                href={item.href}
                className="flex items-center gap-1.5 text-gray-200 hover:text-red-600 transition-colors duration-200"
              >
                <Home className="w-4 h-4" />
                <span className="hidden sm:inline">{item.label}</span>
              </Link>
            ) : item.isLast ? (
              // Last item (current page)
              <span className=" text-gray-200 font-medium line-clamp-1">
                {item.label}
              </span>
            ) : (
              // Regular link
              <Link
                href={item.href}
                className="text-gray-200 hover:text-red-600 transition-colors duration-200 line-clamp-1"
              >
                {item.label}
              </Link>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}