// Language toggle for soleprint docs
// Include this script and add: <div id="lang-toggle"></div> in header

(function () {
  function setLang(lang) {
    localStorage.setItem("spr-docs-lang", lang);
    document.documentElement.lang = lang;
    document.querySelectorAll(".lang-toggle button").forEach((btn) => {
      btn.classList.toggle("active", btn.dataset.lang === lang);
    });
  }

  document.addEventListener("DOMContentLoaded", () => {
    const currentLang = localStorage.getItem("spr-docs-lang") || "en";

    // Inject toggle HTML
    const container = document.getElementById("lang-toggle");
    if (container) {
      container.className = "lang-toggle";

      const btnEn = document.createElement("button");
      btnEn.textContent = "EN";
      btnEn.dataset.lang = "en";
      btnEn.addEventListener("click", () => setLang("en"));

      const btnEs = document.createElement("button");
      btnEs.textContent = "ES";
      btnEs.dataset.lang = "es";
      btnEs.addEventListener("click", () => setLang("es"));

      container.appendChild(btnEn);
      container.appendChild(btnEs);
    }

    setLang(currentLang);
  });

  // Inject styles
  const style = document.createElement("style");
  style.textContent = `
        .lang-toggle { position: absolute; top: 1.5rem; right: 2rem; display: flex; border: 1px solid #888; border-radius: 4px; overflow: hidden; }
        .lang-toggle button { background: #1a1a1a; border: none; color: #888; padding: 0.4rem 0.8rem; font-family: inherit; font-size: 0.75rem; cursor: pointer; }
        .lang-toggle button:first-child { border-right: 1px solid #888; }
        .lang-toggle button:hover { background: #0a0a0a; color: #fff; }
        .lang-toggle button.active { background: var(--accent, #b91c1c); color: #fff; }
        header { position: relative; }
        .lang-en, .lang-es { display: none; }
        html[lang="en"] .lang-en { display: block; }
        html[lang="es"] .lang-es { display: block; }
        html[lang="en"] span.lang-en { display: inline; }
        html[lang="es"] span.lang-es { display: inline; }
    `;
  document.head.appendChild(style);
})();