(function () {
  "use strict";

  const status = document.getElementById("status");
  const toggle = document.getElementById("toggle");
  let activeTabId = null;
  let currentEnabled = false;
  let busy = false;

  function render(enabled) {
    currentEnabled = enabled;
    toggle.disabled = busy || activeTabId === null;
    toggle.setAttribute("aria-pressed", String(enabled));
    toggle.textContent = enabled ? "Restore Cyrillic" : "Enable Glagolitic";
    status.textContent = enabled ? "Glagolitic is on for this tab." : "Cyrillic is unchanged in this tab.";
  }

  function showUnavailable() {
    activeTabId = null;
    currentEnabled = false;
    toggle.disabled = true;
    toggle.setAttribute("aria-pressed", "false");
    toggle.textContent = "Unavailable on this page";
    status.textContent = "Firefox protects this page from extensions.";
  }

  async function askBackground(type, extra = {}) {
    return browser.runtime.sendMessage({ type, ...extra });
  }

  toggle.addEventListener("click", async () => {
    if (busy || activeTabId === null) {
      return;
    }

    const targetEnabled = !currentEnabled;
    busy = true;
    toggle.disabled = true;
    status.textContent = "Updating tab…";
    try {
      const response = await askBackground("glagolify:set-tab-enabled", {
        tabId: activeTabId,
        enabled: targetEnabled
      });
      if (!response || !response.available) {
        showUnavailable();
        return;
      }
      render(response.enabled === true);
    } catch (error) {
      showUnavailable();
    } finally {
      busy = false;
      if (activeTabId !== null) {
        toggle.disabled = false;
      }
    }
  });

  async function initialize() {
    try {
      const tabs = await browser.tabs.query({ active: true, currentWindow: true });
      if (!tabs[0] || typeof tabs[0].id !== "number") {
        showUnavailable();
        return;
      }

      activeTabId = tabs[0].id;
      const response = await askBackground("glagolify:get-tab-state", {
        tabId: activeTabId
      });
      if (!response || !response.available) {
        showUnavailable();
        return;
      }
      render(response.enabled === true);
    } catch (error) {
      showUnavailable();
    }
  }

  initialize();
})();