/**
 * Modern SaaS Header - Estilo Techwind
 * Navbar responsive con dropdown menus, theme switcher y animaciones
 */

import React, { useState, useEffect } from 'react'
import { useScrollSticky } from '../hooks/useScrollSticky'

const ModernSaasHeader: React.FC = () => {
  const isScrolled = useScrollSticky()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null)
  const [isDarkMode, setIsDarkMode] = useState(false)

  useEffect(() => {
    // Verificar el tema guardado en localStorage
    const savedTheme = localStorage.getItem('theme')
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    
    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
      setIsDarkMode(true)
      document.documentElement.classList.add('dark')
    } else {
      setIsDarkMode(false)
      document.documentElement.classList.remove('dark')
    }

    // Removed scroll listener - now handled by useScrollSticky hook
  }, [])

  const toggleTheme = () => {
    if (isDarkMode) {
      document.documentElement.classList.remove('dark')
      localStorage.setItem('theme', 'light')
      setIsDarkMode(false)
    } else {
      document.documentElement.classList.add('dark')
      localStorage.setItem('theme', 'dark')
      setIsDarkMode(true)
    }
  }

  const toggleDropdown = (menu: string) => {
    setActiveDropdown(activeDropdown === menu ? null : menu)
  }

  return (
    <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
      isScrolled 
        ? 'bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md' 
        : 'bg-transparent'
    }`}>
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-20">
          {/* Logo */}
          <a href="/" className="flex items-center space-x-1.5 group">
            <img 
              src="/logo_avanzacast.svg" 
              alt="AvanzaCast" 
              className="w-14 h-14 transition-transform duration-300 group-hover:scale-110"
            />
            <span className={`text-2xl transition-colors duration-300 ${
              isScrolled ? 'text-slate-900 dark:text-white' : 'text-slate-900 dark:text-white'
            }`} style={{ fontFamily: 'Requiner, sans-serif' }}>
              Avanza<span className="font-bold">Cast</span>
            </span>
          </a>

          {/* Desktop Menu */}
          <div className="hidden lg:flex items-center space-x-8">
            <a href="/" className={`font-medium transition-colors duration-300 ${
              isScrolled 
                ? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400' 
                : 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
            }`}>
              Inicio
            </a>

            {/* Características Dropdown */}
            <div className="relative group">
              <button className={`font-medium transition-colors duration-300 flex items-center ${
                isScrolled 
                  ? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400' 
                  : 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
              }`}>
                Características
                <i className="uil uil-angle-down ml-1 transition-transform group-hover:rotate-180 duration-300"></i>
              </button>
              <div className="absolute left-0 mt-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2">
                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-xl py-3 border border-slate-100 dark:border-slate-700">
                  <a href="#multistreaming" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
                    <div className="flex items-center">
                      <div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
                        <i className="uil uil-broadcast text-indigo-600"></i>
                      </div>
                      <span className="font-medium">Multistreaming</span>
                    </div>
                  </a>
                  <a href="#recording" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
                    <div className="flex items-center">
                      <div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
                        <i className="uil uil-video text-indigo-600"></i>
                      </div>
                      <span className="font-medium">Grabación en la Nube</span>
                    </div>
                  </a>
                  <a href="#studio" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
                    <div className="flex items-center">
                      <div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
                        <i className="uil uil-cube text-indigo-600"></i>
                      </div>
                      <span className="font-medium">Estudio Virtual</span>
                    </div>
                  </a>
                  <a href="#analytics" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
                    <div className="flex items-center">
                      <div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
                        <i className="uil uil-chart-line text-indigo-600"></i>
                      </div>
                      <span className="font-medium">Analytics</span>
                    </div>
                  </a>
                </div>
              </div>
            </div>

            <a href="#pricing" className={`font-medium transition-colors duration-300 ${
              isScrolled 
                ? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400' 
                : 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
            }`}>
              Precios
            </a>

            {/* Recursos Dropdown */}
            <div className="relative group">
              <button className={`font-medium transition-colors duration-300 flex items-center ${
                isScrolled 
                  ? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400' 
                  : 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
              }`}>
                Recursos
                <i className="uil uil-angle-down ml-1 transition-transform group-hover:rotate-180 duration-300"></i>
              </button>
              <div className="absolute left-0 mt-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2">
                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-xl py-3 border border-slate-100 dark:border-slate-700">
                  <a href="#blog" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
                    <div className="flex items-center">
                      <div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
                        <i className="uil uil-book-open text-indigo-600"></i>
                      </div>
                      <span className="font-medium">Blog</span>
                    </div>
                  </a>
                  <a href="#tutorials" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
                    <div className="flex items-center">
                      <div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
                        <i className="uil uil-graduation-cap text-indigo-600"></i>
                      </div>
                      <span className="font-medium">Tutoriales</span>
                    </div>
                  </a>
                  <a href="#help" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
                    <div className="flex items-center">
                      <div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
                        <i className="uil uil-question-circle text-indigo-600"></i>
                      </div>
                      <span className="font-medium">Centro de Ayuda</span>
                    </div>
                  </a>
                  <a href="#api" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
                    <div className="flex items-center">
                      <div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
                        <i className="uil uil-code-branch text-indigo-600"></i>
                      </div>
                      <span className="font-medium">API Docs</span>
                    </div>
                  </a>
                </div>
              </div>
            </div>

            <a href="#contact" className={`font-medium transition-colors duration-300 ${
              isScrolled 
                ? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400' 
                : 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
            }`}>
              Contacto
            </a>
          </div>

          {/* CTA Buttons */}
          <div className="hidden lg:flex items-center space-x-4">
            {/* Theme Switcher */}
            <button
              onClick={toggleTheme}
              className={`size-9 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center rounded-full transition-all ${
                isScrolled
                  ? 'bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700'
                  : 'bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700'
              }`}
              aria-label="Cambiar tema"
            >
              {isDarkMode ? (
                <i className={`uil uil-sun text-xl ${isScrolled ? 'text-yellow-500' : 'text-yellow-500'}`}></i>
              ) : (
                <i className={`uil uil-moon text-xl ${isScrolled ? 'text-slate-700' : 'text-slate-700'}`}></i>
              )}
            </button>

            <a href="/auth/login" className={`font-medium transition-colors duration-300 ${
              isScrolled 
                ? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600' 
                : 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
            }`}>
              Iniciar Sesión
            </a>
            <a href="/auth/register" className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-all duration-300 inline-flex items-center shadow-lg hover:shadow-xl font-medium">
              Empecemos
              <i className="uil uil-arrow-right ml-2"></i>
            </a>
          </div>

          {/* Mobile Menu Button */}
          <button 
            className={`lg:hidden transition-colors duration-300 ${
              isScrolled ? 'text-slate-700 dark:text-slate-300' : 'text-slate-700 dark:text-slate-300'
            }`}
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            <i className={`uil text-3xl transition-transform duration-300 ${isMobileMenuOpen ? 'uil-times rotate-90' : 'uil-bars'}`}></i>
          </button>
        </div>

        {/* Mobile Menu */}
        {isMobileMenuOpen && (
          <div className={`lg:hidden py-4 border-t transition-colors duration-300 ${
            isScrolled 
              ? 'border-slate-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md' 
              : 'border-slate-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md'
          }`}>
            <div className="space-y-4">
              <a href="/" className={`block py-2 font-medium transition-colors ${
                isScrolled 
                  ? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600' 
                  : 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
              }`}>
                Inicio
              </a>

              {/* Características Mobile */}
              <div>
                <button 
                  onClick={() => toggleDropdown('features')}
                  className={`flex items-center justify-between w-full py-2 font-medium transition-colors ${
                    isScrolled 
                      ? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600' 
                      : 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
                  }`}
                >
                  Características
                  <i className={`uil uil-angle-down transition-transform ${activeDropdown === 'features' ? 'rotate-180' : ''}`}></i>
                </button>
                {activeDropdown === 'features' && (
                  <div className="mt-2 ml-4 space-y-2">
                    <a href="#multistreaming" className={`block py-2 text-sm transition-colors ${
                      isScrolled 
                        ? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600' 
                        : 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
                    }`}>
                      <i className="uil uil-broadcast mr-2"></i>Multistreaming
                    </a>
                    <a href="#recording" className={`block py-2 text-sm transition-colors ${
                      isScrolled 
                        ? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600' 
                        : 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
                    }`}>
                      <i className="uil uil-video mr-2"></i>Grabación en la Nube
                    </a>
                    <a href="#studio" className={`block py-2 text-sm transition-colors ${
                      isScrolled 
                        ? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600' 
                        : 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
                    }`}>
                      <i className="uil uil-cube mr-2"></i>Estudio Virtual
                    </a>
                    <a href="#analytics" className={`block py-2 text-sm transition-colors ${
                      isScrolled 
                        ? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600' 
                        : 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
                    }`}>
                      <i className="uil uil-chart-line mr-2"></i>Analytics
                    </a>
                  </div>
                )}
              </div>

              <a href="#pricing" className={`block py-2 font-medium transition-colors ${
                isScrolled 
                  ? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600' 
                  : 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
              }`}>
                Precios
              </a>

              {/* Recursos Mobile */}
              <div>
                <button 
                  onClick={() => toggleDropdown('resources')}
                  className={`flex items-center justify-between w-full py-2 font-medium transition-colors ${
                    isScrolled 
                      ? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600' 
                      : 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
                  }`}
                >
                  Recursos
                  <i className={`uil uil-angle-down transition-transform ${activeDropdown === 'resources' ? 'rotate-180' : ''}`}></i>
                </button>
                {activeDropdown === 'resources' && (
                  <div className="mt-2 ml-4 space-y-2">
                    <a href="#blog" className={`block py-2 text-sm transition-colors ${
                      isScrolled 
                        ? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600' 
                        : 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
                    }`}>
                      <i className="uil uil-book-open mr-2"></i>Blog
                    </a>
                    <a href="#tutorials" className={`block py-2 text-sm transition-colors ${
                      isScrolled 
                        ? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600' 
                        : 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
                    }`}>
                      <i className="uil uil-graduation-cap mr-2"></i>Tutoriales
                    </a>
                    <a href="#help" className={`block py-2 text-sm transition-colors ${
                      isScrolled 
                        ? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600' 
                        : 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
                    }`}>
                      <i className="uil uil-question-circle mr-2"></i>Centro de Ayuda
                    </a>
                    <a href="#api" className={`block py-2 text-sm transition-colors ${
                      isScrolled 
                        ? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600' 
                        : 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
                    }`}>
                      <i className="uil uil-code-branch mr-2"></i>API Docs
                    </a>
                  </div>
                )}
              </div>

              <a href="#contact" className={`block py-2 font-medium transition-colors ${
                isScrolled 
                  ? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600' 
                  : 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
              }`}>
                Contacto
              </a>

              <div className="pt-4 space-y-2 border-t border-slate-200 dark:border-slate-700">
                {/* Theme Switcher Mobile */}
                <button
                  onClick={toggleTheme}
                  className={`w-full flex items-center justify-between px-4 py-3 rounded-lg transition-colors ${
                    isScrolled
                      ? 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300'
                      : 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300'
                  }`}
                >
                  <span className="font-medium">Tema</span>
                  {isDarkMode ? (
                    <i className="uil uil-sun text-xl text-yellow-500"></i>
                  ) : (
                    <i className={`uil uil-moon text-xl ${isScrolled ? 'text-slate-700' : 'text-slate-700'}`}></i>
                  )}
                </button>

                <a href="/auth/login" className={`block text-center px-5 py-3 border rounded-lg transition-colors font-medium ${
                  isScrolled
                    ? 'border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20'
                    : 'border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20'
                }`}>
                  Iniciar Sesión
                </a>
                <a href="/auth/register" className="block text-center px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors font-medium shadow-lg">
                  Empecemos
                </a>
              </div>
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}

export default ModernSaasHeader