---
// LanguageToggle — idle-hydrated, full-guide-only locale control.
//
// The guide server-renders both locales. This leaf owns the persisted locale
// and announces changes so selector islands can rebuild their active panels
// from collection data without knowing about this control's markup.
---

<div class="lang-switch" aria-label="Language" data-language-toggle>
  <button class="active" data-lang="en" aria-pressed="true">EN</button>
  <span>/</span>
  <button data-lang="pt" aria-pressed="false">PT</button>
</div>

<script>
  type Language = 'en' | 'pt';

  function setup(root: HTMLElement) {
    const buttons = root.querySelectorAll<HTMLButtonElement>('[data-lang]');

    function renderLanguage(next: Language) {
      document.documentElement.lang = next === 'pt' ? 'pt-BR' : 'en';
      buttons.forEach((button) => {
        const isActive = button.dataset.lang === next;
        button.classList.toggle('active', isActive);
        button.setAttribute('aria-pressed', String(isActive));
      });
      document.querySelectorAll<HTMLElement>('[data-language-content]').forEach((node) => {
        node.hidden = node.dataset.languageContent !== next;
      });
      window.dispatchEvent(
        new CustomEvent('ai-for-dummies:languagechange', { detail: { language: next } }),
      );
    }

    function selectLanguage(value: string | undefined): Language {
      return value === 'pt' ? 'pt' : 'en';
    }

    buttons.forEach((button) => {
      button.addEventListener('click', () => {
        const language = selectLanguage(button.dataset.lang);
        renderLanguage(language);
        try {
          localStorage.setItem('ai-for-dummies-language', language);
        } catch {
          // Preview environments can disable storage.
        }
      });
    });

    let savedLanguage = 'en';
    try {
      savedLanguage = localStorage.getItem('ai-for-dummies-language') || 'en';
    } catch {
      // Preview environments can disable storage.
    }
    renderLanguage(selectLanguage(savedLanguage));
  }

  document.querySelectorAll<HTMLElement>('[data-language-toggle]').forEach((root) => {
    if ('requestIdleCallback' in window) {
      window.requestIdleCallback(() => setup(root));
    } else {
      setTimeout(() => setup(root), 0);
    }
  });
</script>