import Link from "next/link"
import { usePathname } from "next/navigation"
import { useState, useEffect } from "react"
import { getNavItems } from "@/lib/navigation"
import { ChevronRight } from "lucide-react"
import { useTranslations } from "next-intl"

export function Breadcrumbs() {
  const pathname = usePathname()
  const t = useTranslations()
  const [windowWidth, setWindowWidth] = useState<number>(0)

  useEffect(() => {
    const handleResize = () => setWindowWidth(window.innerWidth)
    handleResize() // Set initial width
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  const isMobile = windowWidth < 768 // Tailwind's md breakpoint
  const navItems = getNavItems(pathname)

  // Split path into segments and filter out locale prefix (en, fr)
  const segments = pathname.split("/").filter(Boolean).filter(segment => !['en', 'fr'].includes(segment))
  let crumbs: { href: string; label: string }[] = []
  let currentHref = ""

  for (let i = 0; i < segments.length; i++) {
    currentHref += "/" + segments[i]

    // Skip client ID if next segment is appointments
    if ((/^\d+$/.test(segments[i]) || segments[i].length === 24) && segments[i + 1] === "appointments") {
      continue
    }

    // Try to find a nav item for this segment
    const nav = navItems.find(item => item.href === currentHref)
    if (nav) {
      crumbs.push({ href: nav.href, label: nav.label })
    } else {
      // Fallback: generate readable label for dynamic/nested segments
      let label = segments[i]
      if (label === "add") label = "breadcrumbs.addService"
      else if (label === "edit") label = "breadcrumbs.editService"
      else if (label === "new") label = "breadcrumbs.addService"
      else if (label === "playground") label = "assistant.playgroundPageTitle"
      else if (label === "notifications") label = "notifications.title"
      else if (label === "customers") label = "customers.pageTitle"
      else if (label === "appointments") label = "customers.appointments.title"
      else if (label === "profile") label = "breadcrumbs.profile"
      else if (/^\d+$/.test(label) || label.length === 24) label = "breadcrumbs.clientDetails"
      else label = label.replace(/-/g, " ").replace(/\b\w/g, l => l.toUpperCase())
      crumbs.push({ href: currentHref, label })
    }
  }
  // Always start with Dashboard
  if (!crumbs.length || crumbs[0].href !== "/dashboard") {
    crumbs = [{ href: "/dashboard", label: "sidebar.dashboard" }, ...crumbs]
  }

  // For mobile: show only last 2 items to prevent overflow
  const displayCrumbs = isMobile && crumbs.length > 2
    ? crumbs.slice(-2) // Show only last 2 items on mobile
    : crumbs

  return (
    <nav aria-label="Breadcrumb" className="flex items-center gap-1 sm:gap-2 text-xs sm:text-sm">
      {displayCrumbs.map((crumb, idx) => (
        <span key={crumb.href} className="flex items-center gap-1 shrink-0">
          {idx > 0 && <ChevronRight className="w-3 h-3 sm:w-4 sm:h-4 text-gray-400 shrink-0" />}
          {idx < displayCrumbs.length - 1 ? (
            <Link
              href={crumb.href}
              className={`${crumb.label === "sidebar.dashboard"
                ? "text-gray-400 font-medium"
                : "text-blue-900 hover:text-blue-700 font-medium"
                } transition-colors min-h-11 flex items-center px-1 sm:px-2 py-1 rounded hover:bg-gray-50 truncate max-w-[120px] sm:max-w-none`}
            >
              {t(crumb.label)}
            </Link>
          ) : (
            <span className="text-gray-700 font-semibold min-h-11 flex items-center px-1 sm:px-2 py-1 truncate max-w-[150px] sm:max-w-none">
              {t(crumb.label)}
            </span>
          )}
        </span>
      ))}
    </nav>
  )
}