// Language toggle functionality for the website

let currentLanguage = 'en';
let languageToggle;
let mobileLangToggle;
let languageDropdown;

// Language translations
const translations = {
  en: {
    // Navigation
    aboutUs: 'About Us',
    services: 'Services',
    caseStudies: 'Case Studies',
    blog: 'Blog',
    payment: 'Payment',
    contactUs: 'Contact Us',
    
    // Common elements that might be translated
    learnMore: 'Learn More',
    getStarted: 'Get Started',
    readMore: 'Read More',
    contactNow: 'Contact Now',
    schedule: 'Schedule',
    consultation: 'Consultation'
  },
  es: {
    // Navigation
    aboutUs: 'Acerca de Nosotros',
    services: 'Servicios',
    caseStudies: 'Casos de Estudio',
    blog: 'Blog',
    payment: 'Pago',
    contactUs: 'Contáctanos',
    
    // Common elements
    learnMore: 'Saber Más',
    getStarted: 'Comenzar',
    readMore: 'Leer Más',
    contactNow: 'Contactar Ahora',
    schedule: 'Programar',
    consultation: 'Consulta'
  }
};

function updateLanguageDisplay(lang) {
  const currentLangSpan = document.getElementById('currentLang');
  const mobileLangSpan = document.getElementById('mobileLang');
  
  if (currentLangSpan) {
    currentLangSpan.textContent = lang.toUpperCase();
  }
  
  if (mobileLangSpan) {
    mobileLangSpan.textContent = lang.toUpperCase();
  }
}

function translateNavigation(lang) {
  const navTranslations = translations[lang];
  
  // Update navigation links
  const navLinks = document.querySelectorAll('nav a');
  navLinks.forEach(link => {
    const href = link.getAttribute('href');
    
    if (href === '/about') {
      link.textContent = navTranslations.aboutUs;
    } else if (href === '/services') {
      link.textContent = navTranslations.services;
    } else if (href === '/case-studies') {
      link.textContent = navTranslations.caseStudies;
    } else if (href === '/blog') {
      link.textContent = navTranslations.blog;
    } else if (href === '/payment') {
      link.textContent = navTranslations.payment;
    } else if (href === '/contact') {
      link.textContent = navTranslations.contactUs;
    }
  });
}

function translateCommonElements(lang) {
  const commonTranslations = translations[lang];
  
  // Update common buttons and links by their text content
  const buttons = document.querySelectorAll('button, a');
  buttons.forEach(element => {
    const text = element.textContent.trim();
    
    // Check for common phrases and translate them
    if (text.includes('Learn More') && lang === 'es') {
      element.textContent = element.textContent.replace('Learn More', commonTranslations.learnMore);
    } else if (text.includes('Saber Más') && lang === 'en') {
      element.textContent = element.textContent.replace('Saber Más', commonTranslations.learnMore);
    }
    
    if (text.includes('Get Started') && lang === 'es') {
      element.textContent = element.textContent.replace('Get Started', commonTranslations.getStarted);
    } else if (text.includes('Comenzar') && lang === 'en') {
      element.textContent = element.textContent.replace('Comenzar', commonTranslations.getStarted);
    }
    
    if (text.includes('Contact Now') && lang === 'es') {
      element.textContent = element.textContent.replace('Contact Now', commonTranslations.contactNow);
    } else if (text.includes('Contactar Ahora') && lang === 'en') {
      element.textContent = element.textContent.replace('Contactar Ahora', commonTranslations.contactNow);
    }
  });
}

function switchLanguage(newLang) {
  currentLanguage = newLang;
  
  // Update the language display
  updateLanguageDisplay(newLang);
  
  // Translate navigation
  translateNavigation(newLang);
  
  // Translate common elements
  translateCommonElements(newLang);
  
  // Store language preference
  localStorage.setItem('preferredLanguage', newLang);
  
  // Hide dropdown
  if (languageDropdown) {
    languageDropdown.classList.add('hidden');
  }
  
  // Add visual feedback
  const toggleButton = document.getElementById('languageToggle');
  if (toggleButton) {
    toggleButton.style.transform = 'scale(0.95)';
    setTimeout(() => {
      toggleButton.style.transform = 'scale(1)';
    }, 150);
  }
}

function toggleLanguageDropdown() {
  if (languageDropdown) {
    languageDropdown.classList.toggle('hidden');
  }
}

function handleLanguageSelection(event) {
  const lang = event.target.closest('button').getAttribute('data-lang');
  if (lang && lang !== currentLanguage) {
    switchLanguage(lang);
  }
}

function handleMobileLanguageToggle() {
  // Simple toggle between EN and ES for mobile
  const newLang = currentLanguage === 'en' ? 'es' : 'en';
  switchLanguage(newLang);
}

function handleClickOutside(event) {
  if (languageDropdown && !languageDropdown.contains(event.target) && 
      !languageToggle?.contains(event.target)) {
    languageDropdown.classList.add('hidden');
  }
}

function loadSavedLanguage() {
  const savedLang = localStorage.getItem('preferredLanguage');
  if (savedLang && savedLang !== currentLanguage) {
    switchLanguage(savedLang);
  }
}

function init() {
  languageToggle = document.getElementById('languageToggle');
  mobileLangToggle = document.getElementById('mobileLangToggle');
  languageDropdown = document.getElementById('languageDropdown');
  
  // Load saved language preference
  loadSavedLanguage();
  
  // Desktop language toggle
  if (languageToggle) {
    languageToggle.addEventListener('click', toggleLanguageDropdown);
  }
  
  // Mobile language toggle
  if (mobileLangToggle) {
    mobileLangToggle.addEventListener('click', handleMobileLanguageToggle);
  }
  
  // Language selection in dropdown
  if (languageDropdown) {
    languageDropdown.addEventListener('click', handleLanguageSelection);
  }
  
  // Close dropdown when clicking outside
  document.addEventListener('click', handleClickOutside);
  
  // Prevent dropdown from closing when clicking inside it
  if (languageDropdown) {
    languageDropdown.addEventListener('click', function(event) {
      event.stopPropagation();
    });
  }
}

function teardown() {
  if (languageToggle) {
    languageToggle.removeEventListener('click', toggleLanguageDropdown);
  }
  
  if (mobileLangToggle) {
    mobileLangToggle.removeEventListener('click', handleMobileLanguageToggle);
  }
  
  if (languageDropdown) {
    languageDropdown.removeEventListener('click', handleLanguageSelection);
  }
  
  document.removeEventListener('click', handleClickOutside);
}

export { init, teardown };