const $ = id => document.getElementById(id);
let tab = null;
let host = "";

const render = async () => {
  const d = await chrome.storage.local.get(["meta", "allowlist"]);
  const m = d.meta || {};
  const allow = d.allowlist || [];
  $("net").textContent = "Network rules: " + (m.network || 0) + (m.networkTotal > m.network ? " of " + m.networkTotal : "");
  $("cos").textContent = "Cosmetic: " + (m.generic || 0) + " generic, " + (m.specific || 0) + " site-specific";
  $("js").textContent = "Scriptlets: " + (m.scriptlets || 0);
  $("updated").textContent = "Updated: " + (m.updated ? new Date(m.updated).toLocaleString() : "never");
  $("err").textContent = m.error || "";
  if (host) {
    const off = allow.includes(host);
    $("site").textContent = host + (off ? " (disabled)" : "");
    $("toggle").textContent = off ? "Enable on this site" : "Disable on this site";
    $("toggle").hidden = false;
  }
};

$("toggle").addEventListener("click", async () => {
  await chrome.runtime.sendMessage({ cmd: "toggle", host });
  if (tab) chrome.tabs.reload(tab.id);
  await render();
});

$("update").addEventListener("click", async e => {
  e.target.disabled = true;
  e.target.textContent = "Updating...";
  await chrome.runtime.sendMessage({ cmd: "update" });
  await render();
  e.target.disabled = false;
  e.target.textContent = "Update lists now";
});

(async () => {
  [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  try {
    const u = new URL(tab.url);
    if (/^https?:$/.test(u.protocol)) host = u.hostname.replace(/^www\./, "");
  } catch (e) {}
  await render();
})();