import { ChevronRight } from "lucide-react";
import Link from "next/link";

import { cn } from "@/lib/utils";

export interface ProductBreadcrumbCategory {
  name?: string | null;
  slug?: string | null;
}

export interface ProductBreadcrumbsProps {
  itemTitle: string;
  category?: ProductBreadcrumbCategory | null;
  categoryPath?: ProductBreadcrumbCategory[] | null;
  className?: string;
}

interface CategoryCrumb {
  name: string;
  slug: string;
}

function normalizeCategory(category?: ProductBreadcrumbCategory | null): CategoryCrumb | null {
  const name = category?.name?.trim();
  const slug = category?.slug?.trim();

  if (!name || !slug) return null;

  return { name, slug };
}

function getCategoryCrumbs(
  categoryPath?: ProductBreadcrumbCategory[] | null,
  category?: ProductBreadcrumbCategory | null,
): CategoryCrumb[] {
  const pathCrumbs = (categoryPath ?? [])
    .map((pathCategory) => normalizeCategory(pathCategory))
    .filter((pathCategory): pathCategory is CategoryCrumb => pathCategory !== null);

  if (pathCrumbs.length > 0) return pathCrumbs;

  const singleCategory = normalizeCategory(category);
  return singleCategory ? [singleCategory] : [];
}

function categoryHref(slug: string): string {
  const params = new URLSearchParams({ category_slug: slug });
  return `/items?${params.toString()}`;
}

const breadcrumbLinkClasses =
  "rounded-sm text-slate-500 transition-colors hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-forest-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50";

export function ProductBreadcrumbs({
  itemTitle,
  category,
  categoryPath,
  className,
}: ProductBreadcrumbsProps) {
  const categoryCrumbs = getCategoryCrumbs(categoryPath, category);
  const currentTitle = itemTitle.trim() || "Item";

  return (
    <nav aria-label="Breadcrumb" className={cn("overflow-hidden", className)}>
      <ol className="flex min-w-0 items-center gap-1 text-xs font-medium text-slate-500 sm:text-sm">
        <li className="shrink-0">
          <Link href="/" className={breadcrumbLinkClasses}>
            Home
          </Link>
        </li>

        {categoryCrumbs.map((categoryCrumb, index) => (
          <li
            key={`${categoryCrumb.slug}-${index}`}
            className="flex min-w-0 items-center gap-1"
          >
            <ChevronRight
              aria-hidden="true"
              className="h-3.5 w-3.5 shrink-0 text-slate-300"
            />
            <Link
              href={categoryHref(categoryCrumb.slug)}
              className={cn(breadcrumbLinkClasses, "block max-w-36 truncate sm:max-w-56")}
            >
              {categoryCrumb.name}
            </Link>
          </li>
        ))}

        <li className="flex min-w-0 items-center gap-1">
          <ChevronRight
            aria-hidden="true"
            className="h-3.5 w-3.5 shrink-0 text-slate-300"
          />
          <span
            aria-current="page"
            className="block min-w-0 truncate text-slate-700"
          >
            {currentTitle}
          </span>
        </li>
      </ol>
    </nav>
  );
}