"use client"

import * as React from "react"
import { ChevronRight, Home } from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"

interface BreadcrumbItem {
  label: string
  href?: string
  icon?: React.ReactNode
}

interface BreadcrumbProps {
  className?: string
  separator?: React.ReactNode
  homeIcon?: boolean
  /**
   * When true, hides the root "Home" item. Useful for compact mobile headers.
   */
  hideRoot?: boolean
}

export function Breadcrumb({
  className,
  separator = <ChevronRight className="h-4 w-4 text-muted-foreground" />,
  homeIcon = true,
  hideRoot = false,
}: BreadcrumbProps) {
  const pathname = usePathname()

  // Route label mapping
  const routeLabels: Record<string, string> = {
    dashboard: "Dashboard",
    repositories: "Repositories",
    "getting-started": "Getting Started",
    apikeys: "API Keys",
    staging: "Staging",
    billing: "Billing",
    onboarding: "Onboarding",
  }

  // Generate breadcrumb items from pathname
  const generateBreadcrumbs = (): BreadcrumbItem[] => {
    const paths = pathname.split("/").filter(Boolean)
    const breadcrumbs: BreadcrumbItem[] = []

    // Always add home
    breadcrumbs.push({
      label: "Home",
      href: "/",
      icon: homeIcon ? <Home className="h-4 w-4" /> : undefined,
    })

    // Build up the path
    let currentPath = ""
    paths.forEach((path, index) => {
      currentPath += `/${path}`
      const label = routeLabels[path] || path.charAt(0).toUpperCase() + path.slice(1)

      breadcrumbs.push({
        label,
        href: index === paths.length - 1 ? undefined : currentPath, // Last item is not a link
      })
    })

    return breadcrumbs
  }

  const breadcrumbs = generateBreadcrumbs()
  const visibleBreadcrumbs =
    hideRoot && breadcrumbs.length > 1 ? breadcrumbs.slice(1) : breadcrumbs

  // Don't show breadcrumbs if we're on the root
  if (visibleBreadcrumbs.length <= 1) {
    return null
  }

  return (
    <nav aria-label="Breadcrumb" className={cn("flex items-center space-x-1 text-sm", className)}>
      {visibleBreadcrumbs.map((crumb, index) => (
        <React.Fragment key={index}>
          {index > 0 && <span className="mx-2">{separator}</span>}

          {crumb.href ? (
            <Link
              href={crumb.href}
              className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
            >
              {crumb.icon}
              <span>{crumb.label}</span>
            </Link>
          ) : (
            <span className="flex items-center gap-1 text-foreground font-medium">
              {crumb.icon}
              <span>{crumb.label}</span>
            </span>
          )}
        </React.Fragment>
      ))}
    </nav>
  )
}

// Optional: Export individual breadcrumb components for more control
export function BreadcrumbList({
  children,
  className,
}: {
  children: React.ReactNode
  className?: string
}) {
  return (
    <nav aria-label="Breadcrumb" className={cn("flex items-center space-x-1 text-sm", className)}>
      {children}
    </nav>
  )
}

export function BreadcrumbItem({
  children,
  className,
  href,
  current = false,
}: {
  children: React.ReactNode
  className?: string
  href?: string
  current?: boolean
}) {
  const content = (
    <span
      className={cn(
        "flex items-center gap-1",
        current ? "text-foreground font-medium" : "text-muted-foreground",
        className,
      )}
    >
      {children}
    </span>
  )

  if (href && !current) {
    return (
      <Link href={href} className="hover:text-foreground transition-colors">
        {content}
      </Link>
    )
  }

  return content
}

export function BreadcrumbSeparator({ children }: { children?: React.ReactNode }) {
  return (
    <span className="mx-2 text-muted-foreground">
      {children || <ChevronRight className="h-4 w-4" />}
    </span>
  )
}
