'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link'
import { useAuth } from '@/lib/auth'

const pageTitles: Record<string, string> = {
  '/dashboard': 'Dashboard',
  '/maestros/articulos': 'Artículos',
  '/maestros/articulos/importar': 'Importar Artículos desde Excel',
  '/maestros/articulos/etiquetas': 'Etiquetas de Códigos de Barras',
  '/maestros/proyectos': 'Proyectos',
  '/maestros/bodegas': 'Bodegas',
  '/maestros/proveedores': 'Proveedores',
  '/ingresos': 'Ingresos de Inventario',
  '/ingresos/nuevo': 'Nuevo Ingreso',
  '/ingresos/importar': 'Importar Ingresos desde Excel',
  '/salidas': 'Salidas de Inventario',
  '/salidas/nueva': 'Nueva Salida',
  '/kardex': 'Kardex de Inventario',
  '/reportes/stock': 'Stock en Mano',
  '/reportes/movimientos': 'Reporte de Movimientos',
  '/reportes/costos': 'Costos por Proyecto',
  '/reportes/salidas-proyecto': 'Salidas por Proyecto',
  '/admin/usuarios': 'Gestión de Usuarios',
  '/admin/parametros': 'Parámetros del Sistema',
  '/admin/auditoria': 'Auditoría del Sistema',
}

function getBreadcrumbs(pathname: string): Array<{ label: string; href?: string }> {
  const parts = pathname.split('/').filter(Boolean)
  const breadcrumbs: Array<{ label: string; href?: string }> = [{ label: 'Home', href: '/dashboard' }]
  
  let currentPath = ''
  parts.forEach((part, index) => {
    currentPath += `/${part}`
    const isLast = index === parts.length - 1
    const title = pageTitles[currentPath] || part.charAt(0).toUpperCase() + part.slice(1)
    breadcrumbs.push({
      label: title,
      href: isLast ? undefined : currentPath,
    })
  })
  
  return breadcrumbs
}

interface HeaderProps {
  onMenuClick: () => void
}

export default function Header({ onMenuClick }: HeaderProps) {
  const pathname = usePathname()
  const { user } = useAuth()
  const breadcrumbs = getBreadcrumbs(pathname)
  const title = pageTitles[pathname] || breadcrumbs[breadcrumbs.length - 1]?.label || 'Inventario'

  return (
    <header className="bg-white border-b border-gray-200 shadow-sm sticky top-0 z-40">
      <div className="px-4 sm:px-6 py-3 flex items-center justify-between gap-4">
        {/* Left: Mobile menu + Breadcrumbs */}
        <div className="flex items-center gap-3 flex-1 min-w-0">
          {/* Mobile hamburger */}
          <button
            onClick={onMenuClick}
            className="lg:hidden flex flex-col gap-1.5 p-2 rounded-lg hover:bg-gray-100 transition flex-shrink-0"
            aria-label="Abrir menú"
          >
            <span className="block w-5 h-0.5 bg-gray-700 rounded" />
            <span className="block w-5 h-0.5 bg-gray-700 rounded" />
            <span className="block w-5 h-0.5 bg-gray-700 rounded" />
          </button>

          {/* Breadcrumbs */}
          <nav className="hidden sm:flex items-center gap-2 text-sm" aria-label="Breadcrumb">
            {breadcrumbs.map((crumb, index) => (
              <div key={index} className="flex items-center gap-2">
                {index > 0 && <span className="text-gray-400">/</span>}
                {crumb.href ? (
                  <Link
                    href={crumb.href}
                    className="text-gray-600 hover:text-gray-900 transition-colors"
                  >
                    {crumb.label}
                  </Link>
                ) : (
                  <span className="text-gray-900 font-semibold">{crumb.label}</span>
                )}
              </div>
            ))}
          </nav>

          {/* Mobile title */}
          <h2 className="sm:hidden text-lg font-bold text-gray-900 truncate">{title}</h2>
        </div>

        {/* Right: User info + Date */}
        <div className="flex items-center gap-4 flex-shrink-0">
          <div className="hidden md:block text-sm text-gray-600">
            {new Date().toLocaleDateString('es-HN', {
              weekday: 'long',
              year: 'numeric',
              month: 'long',
              day: 'numeric',
            })}
          </div>
          {user && (
            <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-lg">
              <div className="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
                {user.name.charAt(0).toUpperCase()}
              </div>
              <div className="hidden lg:block">
                <div className="text-sm font-semibold text-gray-900">{user.name}</div>
                <div className="text-xs text-gray-500">{user.role}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </header>
  )
}