// web_proxy toggle — popup logic.
//
// Lee y escribe el estado en chrome.storage.local. El service worker
// (background.js) reacciona a cada cambio y reconfigura el proxy real, de modo
// que el popup nunca llama directamente a chrome.proxy.

const DEFAULT_STATE = {
  enabled: false,
  activeProxy: "capture",
  proxies: [
    {
      id: "capture",
      name: "Captura web_proxy",
      scheme: "http",
      host: "127.0.0.1",
      port: 8889,
    },
  ],
};

async function getState() {
  const r = await chrome.storage.local.get("state");
  return r.state || structuredClone(DEFAULT_STATE);
}

async function setState(state) {
  await chrome.storage.local.set({ state });
}

function newId() {
  return "p" + Math.random().toString(36).slice(2, 9);
}

function render(state) {
  const toggle = document.getElementById("toggle");
  const status = document.getElementById("status");
  toggle.checked = !!state.enabled;

  const active = state.proxies.find((p) => p.id === state.activeProxy);
  if (state.enabled && active) {
    status.textContent = `Capturando via ${active.host}:${active.port}`;
    status.style.color = "var(--green)";
  } else {
    status.textContent = "Captura desactivada";
    status.style.color = "var(--muted)";
  }

  const list = document.getElementById("proxy-list");
  list.innerHTML = "";
  for (const p of state.proxies) {
    const li = document.createElement("li");

    const radio = document.createElement("input");
    radio.type = "radio";
    radio.name = "active";
    radio.checked = p.id === state.activeProxy;
    radio.addEventListener("change", async () => {
      const s = await getState();
      s.activeProxy = p.id;
      await setState(s);
      render(s);
    });

    const meta = document.createElement("div");
    meta.className = "meta";
    const name = document.createElement("div");
    name.className = "name";
    name.textContent = p.name || p.id;
    const addr = document.createElement("div");
    addr.className = "addr";
    addr.textContent = `${p.scheme}://${p.host}:${p.port}`;
    meta.append(name, addr);

    li.append(radio, meta);

    // El proxy de captura por defecto no se puede borrar.
    if (p.id !== "capture") {
      const del = document.createElement("button");
      del.className = "del";
      del.textContent = "✕";
      del.title = "Eliminar";
      del.addEventListener("click", async () => {
        const s = await getState();
        s.proxies = s.proxies.filter((x) => x.id !== p.id);
        if (s.activeProxy === p.id) {
          s.activeProxy = s.proxies[0] ? s.proxies[0].id : "capture";
        }
        await setState(s);
        render(s);
      });
      li.append(del);
    }

    list.append(li);
  }
}

async function init() {
  const state = await getState();
  render(state);

  document.getElementById("toggle").addEventListener("change", async (e) => {
    const s = await getState();
    s.enabled = e.target.checked;
    await setState(s);
    render(s);
  });

  document.getElementById("f-add").addEventListener("click", async () => {
    const name = document.getElementById("f-name").value.trim();
    const scheme = document.getElementById("f-scheme").value;
    const host = document.getElementById("f-host").value.trim();
    const port = parseInt(document.getElementById("f-port").value, 10);
    if (!host || !port) return;
    const s = await getState();
    s.proxies.push({
      id: newId(),
      name: name || `${host}:${port}`,
      scheme,
      host,
      port,
    });
    await setState(s);
    document.getElementById("f-name").value = "";
    document.getElementById("f-host").value = "";
    document.getElementById("f-port").value = "";
    render(s);
  });
}

init();