import React, { useEffect } from 'react';
import banquiseServer from '../../assets/banquise_server.svg';
import { URLS, SITE_CONFIG } from '../../shared/constants';
import type { IMobileMenuProps } from '../../shared/types';
import { COMPONENTS, GRADIENTS, TYPOGRAPHY } from '../../styles/design-system';

export const MobileMenu: React.FC<IMobileMenuProps> = ({ isOpen, onClose }) => {
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }

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

  return (
    <div className={`md:hidden fixed inset-0 z-[100] transition-all duration-300 ${isOpen ? 'visible' : 'invisible'}`}>
      {/* Overlay */}
      <div 
        className={`absolute inset-0 bg-gradient-to-br from-black/70 via-banquise-blue-dark/50 to-black/70 backdrop-blur-md transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
        onClick={onClose}
      />
      
      {/* Menu mobile */}
      <div className={`absolute top-0 right-0 h-full w-72 max-w-[85vw] bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/98 to-banquise-blue-dark/95 backdrop-blur-2xl shadow-2xl transition-transform duration-300 border-l border-banquise-blue-lightest/20 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
        
        {/* Header */}
        <div className="flex items-center justify-between p-4 sm:p-6 pt-6 sm:pt-8 border-b border-banquise-blue-lightest/20 bg-gradient-to-r from-banquise-blue-dark/50 to-transparent">
          <div className="flex items-center space-x-3">
            <div className="relative">
              <div className="absolute inset-0 bg-banquise-blue-light/20 rounded-full blur-md"></div>
              <img 
                src={banquiseServer}
                alt="Logo" 
                className="h-8 sm:h-10 w-auto relative z-10" 
                style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.6))' }} 
              />
            </div>
            <div>
              <span className={`text-base sm:text-lg font-bold ${TYPOGRAPHY.special.lightHeading}`}>
                {SITE_CONFIG.name}
              </span>
              <p className="text-banquise-blue-lightest/70 text-xs">Menu Navigation</p>
            </div>
          </div>
          
          <button 
            className="group relative p-3 bg-white/10 hover:bg-white/20 rounded-xl transition-all duration-200 hover:scale-105 active:scale-95"
            onClick={onClose}
            aria-label="Fermer"
          >
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="text-white">
              <path d="M15 5L5 15M5 5L15 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </button>
        </div>

        {/* Navigation */}
        <div className="flex flex-col justify-start px-6 py-8 space-y-6 overflow-y-auto" style={{ height: 'calc(100vh - 120px)' }}>
          
          {/* Navigation Links */}
          <div className="space-y-3">
            <a href="#services" className={COMPONENTS.navigation.mobileItem} onClick={onClose}>
              <div className="flex items-center space-x-4">
                <div className={`${COMPONENTS.icons.small} ${GRADIENTS.primary} group-hover:scale-110 transition-transform duration-200`}>
                  <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                  </svg>
                </div>
                <div>
                  <span className="font-semibold text-lg">Nos Services</span>
                  <p className="text-white/60 text-sm">Découvrir notre offre</p>
                </div>
              </div>
              <svg className="w-5 h-5 ml-auto opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </a>

            <a href="#about" className={COMPONENTS.navigation.mobileItem} onClick={onClose}>
              <div className="flex items-center space-x-4">
                <div className={`${COMPONENTS.icons.small} ${GRADIENTS.primary} group-hover:scale-110 transition-transform duration-200`}>
                  <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <div>
                  <span className="font-semibold text-lg">À propos</span>
                  <p className="text-white/60 text-sm">En savoir plus sur nous</p>
                </div>
              </div>
              <svg className="w-5 h-5 ml-auto opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </a>

            <a href={URLS.social.discord} className={COMPONENTS.navigation.mobileItem} onClick={onClose}>
              <div className="flex items-center space-x-4">
                <div className={`${COMPONENTS.icons.small} ${GRADIENTS.discord} group-hover:scale-110 transition-transform duration-200`}>
                  <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
                  </svg>
                </div>
                <div>
                  <span className="font-semibold text-lg">Discord</span>
                  <p className="text-white/60 text-sm">Rejoindre la communauté</p>
                </div>
              </div>
              <svg className="w-5 h-5 ml-auto opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
              </svg>
            </a>
          </div>

          {/* CTA Button */}
          <div className="pt-6 border-t border-banquise-blue-lightest/20">
            <a 
              href={URLS.services.auth}
              target="_blank"
              rel="noopener noreferrer"
              className={`w-full ${COMPONENTS.buttons.base} ${GRADIENTS.primary} py-4 px-6 text-lg shadow-xl border border-banquise-blue-lightest/20`}
              onClick={onClose}
            >
              <svg className="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
              </svg>
              Se connecter
            </a>
          </div>
        </div>

        {/* Footer */}
        <div className="absolute bottom-6 left-6 right-6">
          <div className="text-center py-4 border-t border-banquise-blue-lightest/20">
            <p className="text-white/50 text-sm">
              © 2024 {SITE_CONFIG.name}
            </p>
          </div>
        </div>

        {/* Effet glassmorphism */}
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-banquise-blue-dark/20 pointer-events-none"></div>
      </div>
    </div>
  );
};