'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { navigation, metaModules, getModuleByHref, getCategoryById, CategoryId } from '@/lib/navigation'

export function Breadcrumbs() {
  const pathname = usePathname()

  // Build breadcrumb items from path
  const items: Array<{ label: string; href: string }> = []

  // Always start with Dashboard (Home)
  items.push({ label: 'Dashboard', href: '/dashboard' })

  // Parse the path
  const pathParts = pathname.split('/').filter(Boolean)

  if (pathParts.length > 0) {
    // Check if it's a category
    const categoryId = pathParts[0] as CategoryId
    const category = getCategoryById(categoryId)

    if (category) {
      // Add category
      items.push({ label: category.name, href: `/${category.id}` })

      // Check if there's a module
      if (pathParts.length > 1) {
        const moduleHref = `/${pathParts[0]}/${pathParts[1]}`
        const result = getModuleByHref(moduleHref)
        if (result) {
          items.push({ label: result.module.name, href: moduleHref })
        }
      }
    } else {
      // Check meta modules (but skip dashboard as it's already added)
      const metaModule = metaModules.find(m => m.href === `/${pathParts[0]}`)
      if (metaModule && metaModule.href !== '/dashboard') {
        items.push({ label: metaModule.name, href: metaModule.href })
      }
    }
  }

  // Don't show breadcrumbs for just dashboard
  if (items.length <= 1) {
    return null
  }

  return (
    <nav className="flex items-center gap-2 text-sm text-slate-500 mb-4">
      {items.map((item, index) => (
        <span key={`${index}-${item.href}`} className="flex items-center gap-2">
          {index > 0 && (
            <svg className="w-4 h-4 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          )}
          {index === items.length - 1 ? (
            <span className="text-slate-900 font-medium">{item.label}</span>
          ) : (
            <Link
              href={item.href}
              className="hover:text-primary-600 transition-colors"
            >
              {item.label}
            </Link>
          )}
        </span>
      ))}
    </nav>
  )
}