import React, { useState } from 'react'
import { NavLink } from 'react-router-dom'
import { XMarkIcon } from '@heroicons/react/24/outline'

interface SidebarProps {
  isOpen: boolean
  onToggle: () => void
}

export default function Sidebar({ isOpen, onToggle }: SidebarProps) {
  const [currentMenu, setCurrentMenu] = useState<string>('')

  const toggleMenu = (value: string) => {
    setCurrentMenu((oldValue) => (oldValue === value ? '' : value))
  }

  return (
    <>
      {isOpen && <div className="fixed inset-0 z-40 bg-black/60 lg:hidden" onClick={onToggle}></div>}

      <nav role="navigation" aria-label="Menú lateral" className={`fixed top-0 bottom-0 z-50 h-full w-[260px] transition-all duration-300 ${isOpen ? 'left-0' : '-left-[260px]'} lg:left-0`}>
        <div className="h-full bg-white">
          <div className="flex items-center justify-between px-4 py-3">
            <div className="main-logo flex items-center shrink-0">
              <span className="text-2xl font-semibold text-accent">AvanzaCast</span>
            </div>
              <button type="button" aria-label="Cerrar menú" className="collapse-icon p-2 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary" onClick={onToggle}><XMarkIcon className="w-5 h-5" aria-hidden /></button>
          </div>

          <div className="p-4">
            <ul className="space-y-2">
              <li className="nav-item">
                <NavLink to="/landing" className="w-full block text-left font-semibold focus:outline-none focus:ring-2 focus:ring-primary rounded-md px-2 py-2">Página pública</NavLink>
              </li>
              <hr className="my-2 border-t" />
              <li className={`nav-item`}>
                <NavLink to="/broadcasts" className={({isActive}) => `w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary rounded-md px-2 py-2 ${isActive ? 'font-medium active' : ''}`} end>Transmisiones</NavLink>
              </li>
              <h2 className="mt-4 mb-2 uppercase text-xs font-extrabold">Streaming</h2>
              <li className={`nav-item`}>
                <NavLink to="/studio" className={({isActive}) => `w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary rounded-md px-2 py-2 ${isActive ? 'font-medium active' : ''}`}>Estudio Virtual</NavLink>
              </li>
              <li className="nav-item">
                <button className="w-full text-left rounded-md px-2 py-2" onClick={() => toggleMenu('streams')}>Transmisiones</button>
                {currentMenu === 'streams' && (
                  <ul className="pl-4 mt-2 space-y-1 text-sm" role="menu" aria-label="Submenú Transmisiones">
                    <li role="none"><NavLink role="menuitem" to="/streams" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary">Todas</NavLink></li>
                    <li role="none"><NavLink role="menuitem" to="/streams/create" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary">Nueva Transmisión</NavLink></li>
                    <li role="none"><NavLink role="menuitem" to="/streams/scheduled" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary">Programadas</NavLink></li>
                    <li role="none"><NavLink role="menuitem" to="/streams/history" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary">Historial</NavLink></li>
                  </ul>
                )}
              </li>

              <li className="nav-item mt-4">
                <NavLink to="/analytics" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary rounded-md px-2 py-2">Analytics</NavLink>
              </li>

              <h2 className="mt-6 mb-2 uppercase text-xs font-extrabold">Configuración</h2>
              <li className="nav-item">
                <NavLink to="/platforms" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary rounded-md px-2 py-2">Plataformas</NavLink>
              </li>
              <li className="nav-item">
                <NavLink to="/settings" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary rounded-md px-2 py-2">Configuración</NavLink>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </>
  )
}