"use client";

import Link from "next/link";
import { usePathname, useSearchParams } from "next/navigation";
import { AnimatePresence, motion } from "framer-motion";
import { ChevronLeft } from "lucide-react";
import { Suspense } from "react";
import { buildBreadcrumbItems } from "@/lib/breadcrumbs";
import { useBreadcrumbSegmentLabels } from "@/components/breadcrumb-context";

function SiteBreadcrumbsInner({ className }: { className?: string }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const segmentLabels = useBreadcrumbSegmentLabels();
  const spread = searchParams.get("spread");
  const items = buildBreadcrumbItems(pathname, { segmentLabels, spread });

  if (items.length <= 1) return null;

  const trailKey = `${pathname}?${spread ?? ""}`;

  return (
    <div
      className={`border-b border-border/60 bg-surface/80 ${className ?? ""}`.trim()}
    >
      <div className="container mx-auto px-4 py-2.5">
        <AnimatePresence mode="wait">
          <motion.nav
            key={trailKey}
            aria-label="مسیر صفحه"
            initial={{ opacity: 0, y: -6 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 6 }}
            transition={{ duration: 0.28, ease: "easeOut" }}
          >
            <ol className="flex flex-wrap items-center gap-1 text-sm">
              {items.map((item, index) => {
                const isLast = index === items.length - 1;
                return (
                  <li key={`${item.href}-${index}`} className="flex items-center gap-1">
                    {index > 0 && (
                      <ChevronLeft
                        className="h-3.5 w-3.5 shrink-0 text-muted-foreground/50"
                        aria-hidden
                      />
                    )}
                    {isLast ? (
                      <span className="font-medium text-foreground" aria-current="page">
                        {item.label}
                      </span>
                    ) : (
                      <Link
                        href={item.href}
                        className="text-muted-foreground transition-colors duration-200 hover:text-foreground"
                      >
                        {item.label}
                      </Link>
                    )}
                  </li>
                );
              })}
            </ol>
          </motion.nav>
        </AnimatePresence>
      </div>
    </div>
  );
}

export function SiteBreadcrumbs({ className }: { className?: string }) {
  return (
    <Suspense fallback={null}>
      <SiteBreadcrumbsInner className={className} />
    </Suspense>
  );
}