import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Bars3Icon, SunIcon, BellIcon, UserCircleIcon, XMarkIcon } from '@heroicons/react/24/outline'

interface HeaderProps {
  onToggleSidebar?: () => void
  onNavigate?: (path: string) => void
}

export default function Header({ onToggleSidebar }: HeaderProps) {
  const [searchQuery, setSearchQuery] = useState('')
  const [showNotifications, setShowNotifications] = useState(false)
  const [showProfile, setShowProfile] = useState(false)
  const navigate = useNavigate()

  return (
    <header className="sticky top-0 z-40 bg-white border-b border-white-light shadow-sm" role="banner" aria-label="Barra superior">
      <div className="relative flex w-full items-center px-4 py-2">
        <div className="horizontal-logo flex lg:hidden justify-between items-center">
            <div className="main-logo flex items-center shrink-0">
            <span className="text-2xl font-semibold align-middle text-accent">AvanzaCast</span>
          </div>
        </div>

        <button
          type="button"
          aria-label="Abrir menú lateral"
          title="Abrir menú lateral"
          className="collapse-icon flex-none hover:text-primary flex lg:hidden p-2 rounded-md bg-white-light/40 focus:outline-none focus:ring-2 focus:ring-primary"
          onClick={onToggleSidebar}
        >
          <Bars3Icon className="w-5 h-5" aria-hidden />
        </button>

        <div className="sm:ltr:mr-auto sm:rtl:ml-auto hidden sm:block">
          <form className="relative" action="#" method="GET" role="search" aria-label="Buscar en AvanzaCast">
            <div className="relative">
              <label htmlFor="search" className="sr-only">Buscar</label>
              <input
                id="search"
                name="q"
                type="text"
                className="form-input ltr:pl-9 rtl:pr-9 ltr:sm:pr-4 rtl:sm:pl-4 peer sm:bg-transparent bg-gray-100 placeholder:tracking-widest focus:outline-none focus:ring-2 focus:ring-primary rounded-md py-2 px-3"
                placeholder="Buscar..."
                aria-label="Buscar"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          </form>
        </div>

        <div className="ltr:ml-auto rtl:mr-auto flex items-center space-x-1.5 lg:space-x-2">
          <button
            type="button"
            aria-label="Ir en vivo"
            onClick={() => navigate('/studio')}
            className="btn btn-gradient !mt-0 border-0 uppercase focus:outline-none focus:ring-2 focus:ring-primary px-3 py-1.5 text-sm">
            <span className="flex items-center">
              <span className="w-2 h-2 bg-white rounded-full animate-pulse ltr:mr-2" aria-hidden></span>
              Ir en Vivo
            </span>
          </button>

          <button type="button" aria-label="Cambiar tema" title="Cambiar tema" className="p-2 rounded-md bg-white-light/40 focus:outline-none focus:ring-2 focus:ring-primary">
            <SunIcon className="w-5 h-5" aria-hidden />
          </button>

          <div className="relative">
            <button
              type="button"
              aria-label="Notificaciones"
              aria-expanded={showNotifications}
              className="relative flex items-center p-2 rounded-full bg-white-light/40 focus:outline-none focus:ring-2 focus:ring-primary"
              onClick={() => setShowNotifications(!showNotifications)}
            >
              <BellIcon className="w-5 h-5" aria-hidden />
              <span className="absolute top-0 right-0 w-2 h-2 rounded-full bg-danger" aria-hidden></span>
              <span className="sr-only">Tienes notificaciones</span>
            </button>

            {showNotifications && (
              <div role="dialog" aria-label="Panel de notificaciones" className="absolute top-full right-0 mt-2 w-80 bg-white rounded shadow-lg z-50 overflow-hidden">
                <div className="px-4 py-3 border-b border-white-light">
                  <h5 className="font-semibold">Notificaciones</h5>
                </div>
                <div className="p-4 text-center text-sm">No hay notificaciones nuevas</div>
              </div>
            )}
          </div>

          <div className="relative">
            <button
              type="button"
              aria-label="Abrir menú de usuario"
              aria-expanded={showProfile}
              className="flex items-center space-x-2 p-2 rounded-full bg-white-light/40 focus:outline-none focus:ring-2 focus:ring-primary"
              onClick={() => setShowProfile(!showProfile)}
            >
              <div className="h-9 w-9 rounded-full bg-accent flex items-center justify-center text-white font-semibold"><UserCircleIcon className="w-5 h-5" /></div>
              <div className="hidden md:block">
                <h4 className="text-xs font-semibold">Usuario</h4>
                <span className="text-[10px] text-white-dark">Free Plan</span>
              </div>
            </button>

            {showProfile && (
              <div role="menu" aria-label="Menú de usuario" className="absolute top-full right-0 mt-2 w-56 bg-white rounded shadow-lg z-50 overflow-hidden">
                <ul className="py-2" role="none">
                  <li role="none">
                    <button role="menuitem" className="w-full text-left px-4 py-2 hover:bg-white-light focus:outline-none focus:ring-2 focus:ring-primary" onClick={() => navigate('/profile')}>Perfil</button>
                  </li>
                  <li role="none">
                    <button role="menuitem" className="w-full text-left px-4 py-2 hover:bg-white-light focus:outline-none focus:ring-2 focus:ring-primary" onClick={() => navigate('/settings')}>Configuración</button>
                  </li>
                  <li role="none" className="border-t border-white-light">
                    <button role="menuitem" className="w-full text-left px-4 py-2 text-danger hover:bg-white-light focus:outline-none focus:ring-2 focus:ring-primary" onClick={() => navigate('/auth/login')}>Cerrar Sesión</button>
                  </li>
                </ul>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  )
}
