// LOBOR FX Home Page - Enhanced Global Language Selector
// Persistent language switching functionality

class LoborLanguageSelector {
  constructor() {
    this.currentLanguage = localStorage.getItem('loborLanguage') || 'es';
    this.languageMenuButton = null;
    this.languageDropdown = null;
    this.initialized = false;
    
    // Bind methods to preserve context
    this.toggleLanguageMenu = this.toggleLanguageMenu.bind(this);
    this.selectLanguage = this.selectLanguage.bind(this);
    this.handleOutsideClick = this.handleOutsideClick.bind(this);
    this.reinitialize = this.reinitialize.bind(this);
  }

  init() {
    if (this.initialized) {
      console.log('LanguageSelector already initialized, cleaning up first...');
      this.cleanup();
    }

    console.log('Initializing Enhanced Language Selector...');
    
    // Use MutationObserver to detect DOM changes
    this.observeDOM();
    
    setTimeout(() => {
      this.setupElements();
      this.attachEventListeners();
      this.applyCurrentLanguage();
      this.initialized = true;
      console.log('Language Selector initialized successfully');
    }, 300);
  }

  observeDOM() {
    // Create an observer to watch for DOM changes (page navigations)
    if (this.observer) {
      this.observer.disconnect();
    }
    
    this.observer = new MutationObserver((mutations) => {
      let shouldReinit = false;
      
      mutations.forEach((mutation) => {
        if (mutation.type === 'childList') {
          // Check if navigation elements were added/removed
          const hasLanguageElements = document.querySelector('#language-menu-button, .language-option');
          if (hasLanguageElements && !this.languageMenuButton) {
            shouldReinit = true;
          }
        }
      });
      
      if (shouldReinit) {
        console.log('DOM changes detected, reinitializing language selector...');
        setTimeout(this.reinitialize, 200);
      }
    });

    // Start observing
    this.observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  }

  reinitialize() {
    if (!this.initialized) {
      this.init();
    } else {
      this.setupElements();
      this.attachEventListeners();
      this.applyCurrentLanguage();
    }
  }

  setupElements() {
    // Desktop elements
    this.languageMenuButton = document.getElementById('language-menu-button');
    this.languageDropdown = document.getElementById('language-dropdown');
    
    console.log('Desktop - Language button found:', !!this.languageMenuButton);
    console.log('Desktop - Language dropdown found:', !!this.languageDropdown);
  }

  attachEventListeners() {
    // Remove existing listeners first
    this.removeEventListeners();

    // Desktop dropdown toggle
    if (this.languageMenuButton) {
      this.languageMenuButton.addEventListener('click', this.toggleLanguageMenu);
      console.log('Added click listener to desktop language button');
    }

    // Get all language options (both desktop and mobile)
    const allLanguageOptions = document.querySelectorAll('.language-option');
    console.log('Found language options:', allLanguageOptions.length);

    // Store references to remove listeners later
    this.languageOptions = Array.from(allLanguageOptions);

    // Add listeners to all language options
    this.languageOptions.forEach((option, index) => {
      // Add multiple event types for better compatibility
      option.addEventListener('click', this.selectLanguage, { passive: false });
      option.addEventListener('touchstart', this.selectLanguage, { passive: false });
      
      console.log(`Added listeners to language option ${index}:`, option.dataset.lang);
    });

    // Close dropdown when clicking outside (desktop only)
    document.addEventListener('click', this.handleOutsideClick);
    
    console.log('Event listeners attached successfully');
  }

  removeEventListeners() {
    if (this.languageMenuButton) {
      this.languageMenuButton.removeEventListener('click', this.toggleLanguageMenu);
    }

    if (this.languageOptions) {
      this.languageOptions.forEach(option => {
        option.removeEventListener('click', this.selectLanguage);
        option.removeEventListener('touchstart', this.selectLanguage);
      });
    }

    document.removeEventListener('click', this.handleOutsideClick);
  }

  toggleLanguageMenu(event) {
    event.preventDefault();
    event.stopPropagation();
    
    console.log('Toggle language menu clicked');
    
    if (this.languageDropdown) {
      const isHidden = this.languageDropdown.classList.contains('hidden');
      if (isHidden) {
        this.languageDropdown.classList.remove('hidden');
        console.log('Showing dropdown');
      } else {
        this.languageDropdown.classList.add('hidden');
        console.log('Hiding dropdown');
      }
    }
  }

  selectLanguage(event) {
    event.preventDefault();
    event.stopPropagation();
    
    let target = event.target;
    console.log('selectLanguage called, target:', target.tagName, target.textContent?.substring(0, 20));
    
    // Find the closest language-option element
    while (target && !target.classList.contains('language-option')) {
      target = target.parentElement;
      if (!target || target === document.body) {
        console.log('No language-option found in parent hierarchy');
        return;
      }
    }
    
    if (!target) {
      console.log('No target found');
      return;
    }
    
    const selectedLang = target.dataset.lang;
    console.log('Language selected:', selectedLang, 'Current:', this.currentLanguage);
    
    if (selectedLang && selectedLang !== this.currentLanguage) {
      this.currentLanguage = selectedLang;
      localStorage.setItem('loborLanguage', selectedLang);
      this.updateCurrentLanguageDisplay();
      this.switchPageLanguage();
      console.log('Language switched to:', this.currentLanguage);
      
      // Dispatch custom event for other components to listen
      window.dispatchEvent(new CustomEvent('languageChanged', { 
        detail: { language: selectedLang } 
      }));
    }
    
    // Close dropdown if it exists (desktop only)
    if (this.languageDropdown) {
      this.languageDropdown.classList.add('hidden');
    }
  }

  updateCurrentLanguageDisplay() {
    const currentLangElement = document.getElementById('current-language');
    if (currentLangElement) {
      currentLangElement.textContent = this.currentLanguage.toUpperCase();
      console.log('Updated language display to:', this.currentLanguage.toUpperCase());
    }
  }

  switchPageLanguage() {
    console.log('Switching page language to:', this.currentLanguage);
    
    const allSpanishContent = document.querySelectorAll('.es-content');
    const allEnglishContent = document.querySelectorAll('.en-content');
    
    console.log('Found Spanish elements:', allSpanishContent.length);
    console.log('Found English elements:', allEnglishContent.length);
    
    if (this.currentLanguage === 'es') {
      // Show Spanish content
      allSpanishContent.forEach((element, index) => {
        element.classList.remove('hidden');
      });
      // Hide English content
      allEnglishContent.forEach((element, index) => {
        element.classList.add('hidden');
      });
    } else {
      // Show English content
      allEnglishContent.forEach((element, index) => {
        element.classList.remove('hidden');
      });
      // Hide Spanish content
      allSpanishContent.forEach((element, index) => {
        element.classList.add('hidden');
      });
    }
    
    console.log('Language switch completed');
  }

  applyCurrentLanguage() {
    console.log('Applying current language:', this.currentLanguage);
    this.updateCurrentLanguageDisplay();
    this.switchPageLanguage();
  }

  handleOutsideClick(event) {
    if (this.languageDropdown && this.languageMenuButton && 
        !this.languageDropdown.contains(event.target) && 
        !this.languageMenuButton.contains(event.target)) {
      this.languageDropdown.classList.add('hidden');
    }
  }

  cleanup() {
    console.log('Cleaning up Language Selector...');
    
    this.removeEventListeners();
    
    if (this.observer) {
      this.observer.disconnect();
    }
    
    this.initialized = false;
  }
}

// Create and attach to global scope for persistence across page changes
if (!window.LoborLanguageSelector) {
  window.LoborLanguageSelector = new LoborLanguageSelector();
}

// Initialize when page loads
export function init() {
  console.log('Initializing Home page with global language selector...');
  
  // Initialize or reinitialize the global language selector
  window.LoborLanguageSelector.init();
  
  // Listen for language change events
  window.addEventListener('languageChanged', (event) => {
    console.log('Language changed event received:', event.detail.language);
  });
}

// Cleanup function
export function teardown() {
  console.log('Tearing down Home page...');
  // Don't cleanup the global selector, let it persist
}