/**
 * Language Selector Component
 * Simple icon-based selector for all devices
 */

(function() {
  const supportedLanguages = [
    { code: 'en', name: 'English', flag: '🇬🇧' },
    { code: 'de', name: 'Deutsch', flag: '🇩🇪' },
    { code: 'fr', name: 'Français', flag: '🇫🇷' },
    { code: 'mi', name: 'Te Reo Māori', flag: '🇳🇿', disabled: true, tooltip: 'Planned' }
  ];

  function createLanguageSelector() {
    const container = document.getElementById('language-selector-container');
    if (!container) return;

    const currentLang = (window.I18n && window.I18n.currentLang) || 'en';

    const selectorHTML = `
      <!-- Language icon buttons (all devices) -->
      <div class="flex gap-1">
        ${supportedLanguages.map(lang => `
          <button
            data-lang="${lang.code}"
            class="language-icon-btn w-11 h-11 flex items-center justify-center rounded-lg border-2 transition-all ${
              lang.code === currentLang
                ? 'border-blue-600 bg-blue-50'
                : 'border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50'
            } ${lang.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
            aria-label="${lang.disabled ? lang.name + ' (' + lang.tooltip + ')' : 'Switch to ' + lang.name}"
            title="${lang.name}${lang.disabled ? ' (' + lang.tooltip + ')' : ''}"
            ${lang.disabled ? 'disabled' : ''}
          >
            <span class="text-2xl" role="img" aria-label="${lang.name} flag">${lang.flag}</span>
          </button>
        `).join('')}
      </div>
    `;

    container.innerHTML = selectorHTML;

    // Add event listeners
    attachEventListeners(currentLang);
  }

  function attachEventListeners(currentLang) {
    // Icon buttons
    const iconButtons = document.querySelectorAll('.language-icon-btn:not([disabled])');
    iconButtons.forEach(button => {
      button.addEventListener('click', function() {
        const selectedLang = this.getAttribute('data-lang');
        if (window.I18n) {
          window.I18n.setLanguage(selectedLang);
        }

        // Update active state
        document.querySelectorAll('.language-icon-btn').forEach(btn => {
          if (!btn.disabled) {
            btn.classList.remove('border-blue-600', 'bg-blue-50');
            btn.classList.add('border-gray-300', 'bg-white');
          }
        });
        this.classList.remove('border-gray-300', 'bg-white');
        this.classList.add('border-blue-600', 'bg-blue-50');
      });
    });
  }

  // Initialize when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', createLanguageSelector);
  } else {
    createLanguageSelector();
  }

  // Re-initialize when language changes (to update active state)
  if (window.I18n) {
    const originalSetLanguage = window.I18n.setLanguage;
    window.I18n.setLanguage = function(lang) {
      originalSetLanguage.call(window.I18n, lang);
      createLanguageSelector(); // Refresh selector with new active language
    };
  }
})();