import { useEffect, useState } from 'react'
import { getSesion, type UsuarioSesion } from '../services/auth'
import DarkModeToggle from './DarkModeToggle'
import { CommandPalette } from './CommandPalette'

interface Props {
  usuario?: UsuarioSesion | null
  onConfiguraciones?: () => void
}

/** Barra superior: marca a la izquierda, estado de sesión y acceso a configuración a la derecha */
export function Navbar({ usuario, onConfiguraciones }: Props) {
  const [conSesion, setConSesion] = useState(() => getSesion() !== null)
  const [menuAbierto, setMenuAbierto] = useState(false)

  useEffect(() => {
    const actualizar = () => setConSesion(getSesion() !== null)
    window.addEventListener('frasa:sesion', actualizar)
    window.addEventListener('storage', actualizar)
    return () => {
      window.removeEventListener('frasa:sesion', actualizar)
      window.removeEventListener('storage', actualizar)
    }
  }, [])

  const esAdmin = usuario?.rol === 'admin'

  return (
    <header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur dark:border-[#1E293B] dark:bg-[#1E293B]/95">
      <div className="flex h-14 items-center justify-between px-4 sm:px-6 lg:px-8">
        <span className="text-base font-semibold tracking-tight text-[#111827] dark:text-[#E2E8F0]">
          CRM360 FRASA<span className="text-accent">.</span>
        </span>

        {/* Desktop nav */}
        <div className="hidden items-center gap-4 md:flex">
          <CommandPalette />
          <DarkModeToggle />
          <span
            className={`hidden items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium sm:inline-flex ${
              conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B] dark:bg-[#1E293B] dark:text-[#94A3B8]'
            }`}
          >
            <span
              aria-hidden="true"
              className={`h-1.5 w-1.5 rounded-full ${conSesion ? 'bg-green-500' : 'bg-[#94A3B8]'}`}
            />
            {conSesion ? 'Sesión activa' : 'Sin sesión'}
          </span>
          {esAdmin && onConfiguraciones && (
            <button
              type="button"
              onClick={onConfiguraciones}
              title="Configuraciones"
              className="flex h-8 w-8 items-center justify-center rounded-lg text-[#64748B] dark:text-[#94A3B8] transition-colors hover:bg-[#F1F5F9] dark:hover:bg-[#334155] hover:text-accent"
              aria-label="Abrir configuraciones"
            >
              ⚙
            </button>
          )}
          <a
            href="#configuracion"
            className="text-sm font-medium text-[#64748B] dark:text-[#94A3B8] transition-colors hover:text-accent"
          >
            Configuración
          </a>
        </div>

        {/* Mobile hamburger */}
        <button
          type="button"
          onClick={() => setMenuAbierto((v) => !v)}
          className="flex h-8 w-8 items-center justify-center rounded-lg text-[#4B5563] dark:text-[#CBD5E1] transition-colors hover:bg-[#F1F5F9] dark:hover:bg-[#334155] md:hidden"
          aria-label={menuAbierto ? 'Cerrar menú' : 'Abrir menú'}
          aria-expanded={menuAbierto}
        >
          {menuAbierto ? (
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="h-5 w-5">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          ) : (
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="h-5 w-5">
              <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          )}
        </button>
      </div>

      {/* Mobile menu panel */}
      {menuAbierto && (
        <div className="border-t border-[#E5E7EB] bg-white px-4 py-4 dark:border-[#1E293B] dark:bg-[#1E293B] md:hidden">
          <div className="flex flex-col gap-3">
            <div className="flex items-center gap-3">
              <CommandPalette />
              <DarkModeToggle />
            </div>
            <span
              className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium w-fit ${
                conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B] dark:bg-[#1E293B] dark:text-[#94A3B8]'
              }`}
            >
              <span
                aria-hidden="true"
                className={`h-1.5 w-1.5 rounded-full ${conSesion ? 'bg-green-500' : 'bg-[#94A3B8]'}`}
              />
              {conSesion ? 'Sesión activa' : 'Sin sesión'}
            </span>
            {esAdmin && onConfiguraciones && (
              <button
                type="button"
                onClick={() => { onConfiguraciones(); setMenuAbierto(false) }}
                className="flex items-center gap-2 text-sm font-medium text-[#4B5563] dark:text-[#CBD5E1]"
              >
                ⚙ Configuraciones
              </button>
            )}
            <a
              href="#configuracion"
              className="text-sm font-medium text-[#64748B] dark:text-[#94A3B8] transition-colors hover:text-accent"
              onClick={() => setMenuAbierto(false)}
            >
              Configuración
            </a>
          </div>
        </div>
      )}
    </header>
  )
}