import React, { useState, useEffect, useMemo } from 'react';
import { Menu, X } from 'lucide-react';
import OptimizedImage from './OptimizedImage';
import LanguageToggle from './LanguageToggle';
import { useLanguage } from '../contexts/LanguageContext';
import { useBackdropFilter } from '../utils/performance';
import { SCROLL_THRESHOLD, SECTIONS } from '../constants/common';
import { NavItem, HeaderState } from '../types/common';
import { smoothScrollTo } from '../utils/scrollOptimization';

const Header: React.FC = (): JSX.Element => {
  const [headerState, setHeaderState] = useState<HeaderState>({
    isScrolled: false,
    isMobileMenuOpen: false,
    activeSection: '',
    isHovering: null,
  });

  // Hook para backdrop-filter optimizado
  const headerBackdropStyles = useBackdropFilter(20);
  
  // Hook de idioma
  const { t } = useLanguage();

  const navItems: NavItem[] = useMemo(() => [
    { name: t('nav.home'), href: '#home' },
    { name: t('nav.services'), href: '#services' },
    { name: t('nav.portfolio'), href: '#portfolio' },
    { name: t('nav.clients'), href: '#clients' },
    { name: t('nav.about'), href: '#about' },
    { name: t('nav.contact'), href: '#contact' },
  ], [t]);

  // Scroll effect and active section detection
  useEffect(() => {
    const handleScroll = (): void => {
      const servicesSection = document.getElementById('services');
      if (servicesSection) {
        const servicesTop = servicesSection.offsetTop;
        const scrollThreshold = servicesTop - SCROLL_THRESHOLD;
        setHeaderState((prev) => ({
          ...prev,
          isScrolled: window.scrollY >= scrollThreshold,
        }));
      }

      // Detect active section
      // Aumentar el threshold para mejor detección
      const scrollPosition = window.scrollY + 150;

      // Si estamos en la parte superior (home), no mostrar ninguna sección activa
      if (window.scrollY < 100) {
        setHeaderState((prev) => ({ ...prev, activeSection: 'home' }));
      } else {
        // Solo detectar sección activa si hemos scrolleado
        for (const sectionId of SECTIONS) {
          const section = document.getElementById(sectionId);
          if (section) {
            const sectionTop = section.offsetTop;
            const sectionBottom = sectionTop + section.offsetHeight;

            if (
              scrollPosition >= sectionTop &&
              scrollPosition < sectionBottom
            ) {
              setHeaderState((prev) => ({ ...prev, activeSection: sectionId }));
              break;
            }
          }
        }
      }
    };

    // Listener para navegación directa
    const handleDirectNavigation = (event: CustomEvent): void => {
      const { section } = event.detail;
      if (section && SECTIONS.includes(section)) {
        setHeaderState((prev) => ({ 
          ...prev, 
          activeSection: section, 
        }));
      }
    };

    // Ejecutar handleScroll inmediatamente para establecer el estado inicial
    handleScroll();

    window.addEventListener('scroll', handleScroll);
    window.addEventListener('directNavigation', handleDirectNavigation as EventListener);
    
    return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('directNavigation', handleDirectNavigation as EventListener);
    };
  }, []);

  // Función de scroll suave optimizada
  const scrollToSection = async (href: string): Promise<void> => {
    const sectionId = href.replace('#', '');
    
    // Usar la utilidad optimizada de scroll
    await smoothScrollTo(sectionId, {
      behavior: 'smooth',
      block: 'start',
      offset: 80, // Offset para header fijo
    });
    
    // Forzar actualización inmediata de la sección activa
    setTimeout(() => {
      setHeaderState((prev) => ({ ...prev, activeSection: sectionId }));
    }, 50);
    
    // Disparar evento de navegación directa después del scroll
    setTimeout(() => {
      window.dispatchEvent(
        new CustomEvent('directNavigation', {
          detail: { section: sectionId },
        }),
      );
    }, 500); // Tiempo reducido para mejor UX
    setHeaderState((prev) => ({ ...prev, isMobileMenuOpen: false }));
  };

  const getNavItemClasses = (item: NavItem, isMobile = false): string => {
    const sectionId = item.href.replace('#', '');
    const isActive = sectionId === headerState.activeSection;
    const isHovered = headerState.isHovering === item.name;

    return `
      relative group transition-all duration-500 ease-out
      ${
  isMobile
    ? 'text-white hover:text-white text-sm sm:text-base font-medium px-4 sm:px-5 py-3 sm:py-3.5 rounded-3xl text-left w-full justify-start hover:bg-white/10 flex items-center'
    : 'text-white/90 hover:text-white text-nav font-medium tracking-wide px-4 py-2.5 rounded-2xl'
}
      hover:scale-105 hover:shadow-lg hover:shadow-white/10
      focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-transparent
      ${isActive ? 'text-white bg-white/20 shadow-lg shadow-white/10' : ''}
      ${isHovered ? 'bg-white/20 shadow-lg shadow-white/10' : ''}
    `;
  };

  const handleMobileMenuToggle = (): void => {
    setHeaderState((prev) => ({
      ...prev,
      isMobileMenuOpen: !prev.isMobileMenuOpen,
    }));
  };

  const handleNavItemHover = (itemName: string | null): void => {
    setHeaderState((prev) => ({ ...prev, isHovering: itemName }));
  };

  const handleNavItemKeyDown = (e: React.KeyboardEvent, href: string): void => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      scrollToSection(href);
    }
  };

  return (
    <header
      className={`fixed top-4 z-50 transition-all duration-700 ease-out left-8 right-8 bg-white/10 backdrop-blur-xl rounded-3xl shadow-2xl shadow-black/20 border border-white/20 header-expand ${
        headerState.isMobileMenuOpen ? 'expanded' : 'closed'
      }`}
      style={{
        ...headerBackdropStyles,
        willChange: 'transform, left, right, height',
        border: 'none',
        outline: 'none',
      }}
    >
      {/* iOS 26 Background decorative elements */}
      <div className='absolute inset-0 pointer-events-none overflow-hidden rounded-3xl'>
        <div className='absolute top-0 left-1/4 w-64 h-64 bg-gradient-to-br from-brandeis-500/12 to-rose-500/12 rounded-full blur-3xl animate-pulse opacity-0 lg:opacity-100 transition-opacity duration-300' />
        <div
          className='absolute bottom-0 right-1/4 w-48 h-48 bg-gradient-to-tl from-rose-500/12 to-brandeis-500/12 rounded-full blur-2xl animate-pulse opacity-0 lg:opacity-100 transition-opacity duration-300'
          style={{ animationDelay: '1s' }}
        />
      </div>

      <div className='relative z-10 transition-all duration-700 ease-out max-w-7xl mx-auto px-6 sm:px-8 lg:px-8'>
        <div className='flex items-center transition-all duration-700 ease-out justify-between h-16 sm:h-18 lg:h-20 header-container'>
          {/* Mobile Menu Button - iOS 26 style */}
          <button
            onClick={handleMobileMenuToggle}
            className={`lg:hidden p-3 sm:p-4 text-white hover:text-white/90 transition-all duration-500 ease-out flex items-center justify-center rounded-3xl hover:bg-white/15 hover:scale-110 hover:shadow-lg hover:shadow-white/10 ${
              headerState.isMobileMenuOpen ? 'bg-white/20 shadow-lg shadow-white/10' : ''
            }`}
            aria-label='Abrir menú'
          >
            {headerState.isMobileMenuOpen ? (
              <X className='w-6 h-6 sm:w-7 sm:h-7 text-white transition-transform duration-300 ease-out' />
            ) : (
              <Menu className='w-6 h-6 sm:w-7 sm:h-7 text-white transition-transform duration-300 ease-out' />
            )}
          </button>

          {/* Left side - Navigation - iOS 26 style - OPTIMIZED FOR CLS */}
          <div className='flex items-center flex-1 opacity-0 lg:opacity-100 transition-opacity duration-300 header-nav'>
            <nav className='flex items-center space-x-2 transition-all duration-700 ease-out opacity-100'>
              {navItems.map((item) => {
                const sectionId = item.href.replace('#', '');

                // Solo ocultar el elemento actual cuando estamos scrolleados
                if (sectionId === headerState.activeSection) {
                  return null;
                }

                return (
                  <button
                    key={item.name}
                    onClick={() => scrollToSection(item.href)}
                    onMouseEnter={() => handleNavItemHover(item.name)}
                    onMouseLeave={() => handleNavItemHover(null)}
                    onKeyDown={(e) => handleNavItemKeyDown(e, item.href)}
                    className={getNavItemClasses(item)}
                    aria-label={`Navegar a ${item.name}`}
                  >
                    {item.name}
                  </button>
                );
              })}
              {/* Language Toggle */}
              <div className='ml-4'>
                <LanguageToggle />
              </div>
            </nav>
          </div>

          {/* Right side - Logo (Desktop) - iOS 26 style - OPTIMIZED FOR CLS */}
          <div className='flex items-center justify-end flex-1'>
            <div
              className='flex items-center cursor-pointer group opacity-100 scale-100 header-logo'
              style={{
                transition: 'all 0.8s cubic-bezier(0.16, 1, 0.3, 1)',
                transform: 'scale(1) translateY(0)',
                // Reserve space to prevent layout shift
                minWidth: '56px',
                minHeight: '56px',
              }}
              onClick={() => scrollToSection('#home')}
            >
              <div className='h-8 sm:h-10 lg:h-14 w-auto relative'>
                <div className='absolute inset-0 bg-white/5 rounded-2xl blur-xl group-hover:bg-white/10 group-hover:blur-2xl transition-all duration-700 ease-out'></div>
                <OptimizedImage
                  src='/logo.svg'
                  webpSrc='/logo.svg'
                  alt='HanjoAudio Logo'
                  className='h-full w-auto relative z-10 group-hover:scale-105 transition-all duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)] drop-shadow-lg'
                  width={56}
                  height={56}
                  loading='eager'
                  sizes='56px'
                  srcSet='/logo.svg 1x'
                />
              </div>
            </div>
          </div>

          {/* Mobile Logo - Right side - iOS 26 style */}
          <div
            className='lg:hidden flex items-center pr-0 opacity-100 scale-100'
            style={{
              transition: 'all 0.8s cubic-bezier(0.16, 1, 0.3, 1)',
              transform: 'scale(1) translateY(0)',
            }}
          >
            <div
              className='flex items-center cursor-pointer group'
              onClick={() => scrollToSection('#home')}
            >
              <div className='h-8 sm:h-10 w-auto relative'>
                <div className='absolute inset-0 bg-white/5 rounded-2xl blur-xl group-hover:bg-white/10 group-hover:blur-2xl transition-all duration-700 ease-out'></div>
                <OptimizedImage
                  src='/logo.svg'
                  webpSrc='/logo.svg'
                  alt='HanjoAudio Logo'
                  className='h-full w-auto relative z-10 group-hover:scale-105 transition-all duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)] drop-shadow-lg'
                  width={40}
                  height={40}
                  loading='eager'
                  sizes='40px'
                  srcSet='/logo.svg 1x'
                />
              </div>
            </div>
          </div>
        </div>

        {/* Mobile Menu Items - Optimizado con menos elementos DOM */}
        {headerState.isMobileMenuOpen && (
          <div className='lg:hidden flex flex-col items-stretch gap-3 sm:gap-4 pb-6 mt-4 px-2 overflow-hidden'>
            <div className='relative z-10 w-full'>
              {navItems
                .filter(item => {
                  const sectionId = item.href.replace('#', '');
                  return sectionId !== headerState.activeSection && 
                         !(sectionId === 'home' && window.scrollY < SCROLL_THRESHOLD);
                })
                .map((item, index) => (
                  <button
                    key={item.name}
                    onClick={() => scrollToSection(item.href)}
                    onMouseEnter={() => handleNavItemHover(item.name)}
                    onMouseLeave={() => handleNavItemHover(null)}
                    className={`${getNavItemClasses(item, true)} mobile-menu-item`}
                    style={{
                      animationDelay: `${index * 100}ms`,
                      transform: 'translateY(0)',
                      transition: 'all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
                    }}
                  >
                    {item.name}
                  </button>
                ))}
              {/* Language Toggle for Mobile - Simplificado */}
              <div className='mt-4 px-4'>
                <LanguageToggle />
              </div>
            </div>
          </div>
        )}
      </div>
    </header>
  );
};

export default Header;