import React from 'react';
import { useScrollEffects } from '../../hooks/useScrollEffects';
import { mergeClasses as cn } from '../../styles/designSystem';
import { Logo } from './navbar/Logo';
import { NavLinks } from './navbar/NavLinks';
import { ActionButtons } from './navbar/ActionButtons';
import { MobileMenuButton } from './navbar/MobileMenuButton';
import { MobileMenu } from './MobileMenu';
import type { Translation } from '../../types/i18n';

interface ModernNavigationProps {
  translations: Translation['navigation'];
  languageSwitcher: React.ReactElement;
}

export const ModernNavigation: React.FC<ModernNavigationProps> = ({ 
  translations, 
  languageSwitcher 
}) => {
  const { scrolled } = useScrollEffects();
  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);

  // Fermer le menu mobile lors du redimensionnement
  React.useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 768) {
        setMobileMenuOpen(false);
      }
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // Empêcher le scroll du body quand le menu mobile est ouvert
  React.useEffect(() => {
    if (mobileMenuOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }

    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [mobileMenuOpen]);

  return (
    <>
      {/* Navigation Bar */}
      <nav 
        className={cn(
          'fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-out',
          // Background adaptatif selon le scroll
          scrolled 
            ? 'bg-banquise-blue-dark/95 backdrop-blur-xl shadow-2xl border-b border-banquise-blue-lightest/30' 
            : 'bg-banquise-blue-dark/90 backdrop-blur-lg shadow-xl border-b border-banquise-blue-lightest/20',
          // Animation de hauteur
          'will-change-auto'
        )}
      >
        <div className="max-w-7xl mx-auto">
          <div className={cn(
            'flex justify-between items-center px-4 sm:px-6 lg:px-8 transition-all duration-300',
            scrolled ? 'h-16' : 'h-18 lg:h-20'
          )}>
            
            {/* Logo Section */}
            <Logo scrolled={scrolled} />

            {/* Navigation Links (Desktop) */}
            <NavLinks 
              translations={translations}
              scrolled={scrolled}
              className="flex-1 justify-center ml-8"
            />

            {/* Action Buttons (Desktop) */}
            <ActionButtons 
              scrolled={scrolled}
              languageSwitcher={languageSwitcher}
            />

            {/* Mobile Menu Button */}
            <MobileMenuButton
              isOpen={mobileMenuOpen}
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            />
          </div>
        </div>

        {/* Effet de bordure dégradée moderne */}
        <div className="absolute bottom-0 left-0 right-0">
          <div className="h-px bg-gradient-to-r from-transparent via-banquise-blue-lightest/40 to-transparent" />
          <div className="h-px bg-gradient-to-r from-transparent via-banquise-blue-light/20 to-transparent blur-sm" />
        </div>

        {/* Effet de glow subtil */}
        <div className={cn(
          'absolute inset-0 pointer-events-none transition-opacity duration-500',
          'bg-gradient-to-b from-banquise-blue-light/5 to-transparent',
          scrolled ? 'opacity-60' : 'opacity-100'
        )} />
      </nav>

      {/* Spacer pour compenser la navbar fixed */}
      <div className={cn(
        'transition-all duration-300',
        scrolled ? 'h-16' : 'h-18 lg:h-20'
      )} />

      {/* Menu Mobile */}
      <MobileMenu
        isOpen={mobileMenuOpen}
        onClose={() => setMobileMenuOpen(false)}
        translations={translations}
      />
    </>
  );
};