popup.js

// Popup UI logic - global and per-site protection controls.

import {
  getActiveTab,
  getHostnameFromUrl,
  isHostAllowlisted,
  isHostTemporarilyEnabled,
  loadDomainSettings,
  setTemporaryOverride,
} from "./popup-settings.js";

/**
 * Initialize popup UI and event handlers.
 */
(async function init() {
  const protectionStateText = document.getElementById("protectionStateText");
  const statusDot = document.getElementById("statusDot");
  const statusText = document.getElementById("statusText");
  const installHint = document.getElementById("installHint");
  const installHintBaseText =
    "Please install Redactosaurus on your computer to enable protection.";
  const domainHint = document.getElementById("domainHint");
  const siteHost = document.getElementById("siteHost");
  const siteStatus = document.getElementById("siteStatus");
  const siteToggle = document.getElementById("siteToggle");
  const siteToggleSection = document.getElementById("siteToggleSection");

  const activeTab = await getActiveTab();
  const tabId = activeTab?.id;
  const currentHost = getHostnameFromUrl(activeTab?.url || "");

  let serviceEnabled = false;
  let nativeHostAvailable = true;
  let nativeHostError = null;
  let hasConfiguredDomains = true;
  let allowlisted = false;
  let temporarilyEnabled = false;
  let matchedAllowlistDomain = null;
  let serviceRefreshTimer = null;

  async function loadSiteDomainState() {
    const domains = await loadDomainSettings();
    hasConfiguredDomains = domains.allowedDomains.length > 0;

    if (!currentHost) {
      allowlisted = false;
      temporarilyEnabled = false;
      matchedAllowlistDomain = null;
      return;
    }

    if (!hasConfiguredDomains) {
      allowlisted = false;
      temporarilyEnabled = false;
      matchedAllowlistDomain = null;
      return;
    }

    allowlisted = isHostAllowlisted(currentHost, domains.allowedDomains);
    temporarilyEnabled = isHostTemporarilyEnabled(
      currentHost,
      domains.temporaryEnabledDomains,
    );
    matchedAllowlistDomain =
      domains.allowedDomains.find(
        (domain) =>
          currentHost === domain || currentHost.endsWith(`.${domain}`),
      ) || null;

    if (allowlisted) {
      temporarilyEnabled = false;
    }
  }

  function renderSiteState() {
    if (!currentHost) {
      siteHost.textContent = "Unavailable on this page";
      siteStatus.textContent = "Open any regular website tab to use site controls.";
      siteToggleSection.style.display = "none";
      return;
    }

    siteHost.textContent = currentHost;

    if (!hasConfiguredDomains) {
      siteStatus.textContent = "Please add at least one domain to protect.";
      siteToggleSection.style.display = "none";
      return;
    }

    if (allowlisted) {
      siteStatus.textContent = matchedAllowlistDomain
        ? `Included by allowlist (${matchedAllowlistDomain})`
        : "Included by allowlist";
      siteToggleSection.style.display = "none";
      return;
    }

    siteToggleSection.style.display = "flex";
    siteToggle.disabled = nativeHostAvailable === false;
    siteToggle.checked = temporarilyEnabled;
    siteStatus.textContent = temporarilyEnabled
      ? "Temporarily enabled for this site"
      : "Not in default domain list";
  }

  function render() {
    if (nativeHostAvailable === false) {
      protectionStateText.textContent = "Unavailable";
      statusDot.className = "status-dot inactive";
      statusText.textContent = "Protection Unavailable";
      installHint.textContent = nativeHostError
        ? `${installHintBaseText} Details: ${nativeHostError}`
        : installHintBaseText;
      installHint.style.display = "block";
      domainHint.style.display = "none";
    } else if (!hasConfiguredDomains) {
      protectionStateText.textContent = "Off";
      statusDot.className = "status-dot inactive";
      statusText.textContent = "Protection Disabled";
      installHint.style.display = "none";
      domainHint.style.display = "block";
    } else {
      installHint.style.display = "none";
      domainHint.style.display = "none";
      protectionStateText.textContent = serviceEnabled ? "On" : "Off";

      if (serviceEnabled) {
        statusDot.className = "status-dot active";
        statusText.textContent = "Protection Active";
      } else {
        statusDot.className = "status-dot inactive";
        statusText.textContent = "Protection Disabled";
      }
    }

    renderSiteState();
  }

  // Load current service state from storage.
  const stored = await chrome.storage.local.get([
    "serviceEnabled",
    "nativeHostAvailable",
    "nativeHostError",
  ]);
  serviceEnabled = stored.serviceEnabled === true;
  nativeHostAvailable = stored.nativeHostAvailable === false ? false : true;
  nativeHostError =
    typeof stored.nativeHostError === "string" && stored.nativeHostError
      ? stored.nativeHostError
      : null;

  const refreshServiceState = async () => {
    try {
      const refreshedStatus = await chrome.runtime.sendMessage({
        type: "SERVICE_STATE_REFRESH",
      });
      if (refreshedStatus?.ok) {
        if (typeof refreshedStatus.enabled === "boolean") {
          serviceEnabled = refreshedStatus.enabled;
        }
        if (typeof refreshedStatus.available === "boolean") {
          nativeHostAvailable = refreshedStatus.available;
        }
        nativeHostError =
          typeof refreshedStatus.error === "string" && refreshedStatus.error
            ? refreshedStatus.error
            : null;
      }
    } catch {
      // Best effort only.
    }
  };

  // Force a fresh protection-state sync when popup opens.
  await refreshServiceState();

  // Refresh allowed domains from native config when popup opens.
  try {
    await chrome.runtime.sendMessage({ type: "DOMAINS_REFRESH" });
  } catch {
    // Best effort only.
  }

  await loadSiteDomainState();
  render();
  serviceRefreshTimer = setInterval(() => {
    void (async () => {
      await refreshServiceState();
      await loadSiteDomainState();
      render();
    })();
  }, 2000);

  chrome.storage.onChanged.addListener((changes, area) => {
    if (area !== "local") return;

    if (changes.serviceEnabled) {
      serviceEnabled = changes.serviceEnabled.newValue === true;
    }

    if (changes.nativeHostAvailable) {
      nativeHostAvailable =
        changes.nativeHostAvailable.newValue === false ? false : true;
    }

    if (changes.nativeHostError) {
      nativeHostError =
        typeof changes.nativeHostError.newValue === "string" &&
        changes.nativeHostError.newValue
          ? changes.nativeHostError.newValue
          : null;
    }

    if (changes.allowedDomains || changes.temporaryEnabledDomains) {
      void (async () => {
        await loadSiteDomainState();
        render();
      })();
      return;
    }

    render();
  });

  // Temporary override for unlisted site.
  siteToggle.addEventListener("change", async () => {
    if (
      !currentHost ||
      allowlisted ||
      nativeHostAvailable === false ||
      !hasConfiguredDomains
    ) {
      siteToggle.checked = temporarilyEnabled;
      return;
    }

    temporarilyEnabled = siteToggle.checked;
    await setTemporaryOverride(currentHost, temporarilyEnabled);

    if (tabId) {
      chrome.tabs
        .sendMessage(tabId, { type: "PII_SITE_SETTINGS_UPDATED" })
        .catch(() => {});
    }

    await loadSiteDomainState();
    render();
  });

  window.addEventListener("unload", () => {
    if (serviceRefreshTimer) {
      clearInterval(serviceRefreshTimer);
      serviceRefreshTimer = null;
    }
  });
})();