'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()

  const items: Array<{ label: string; href: string }> = []

  items.push({ label: 'Dashboard', href: '/dashboard' })

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

  if (pathParts.length > 0) {
    const categoryId = pathParts[0] as CategoryId
    const category = getCategoryById(categoryId)

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

      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 {
      const metaModule = metaModules.find(m => m.href === `/${pathParts[0]}`)
      if (metaModule && metaModule.href !== '/dashboard') {
        items.push({ label: metaModule.name, href: metaModule.href })
      }
    }
  }

  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>
  )
}