// ========== 代理切换逻辑 ==========
const els = {
  profileSelect: document.getElementById("profileSelect"),
  applyBtn: document.getElementById("applyBtn"),
  pacBlock: document.getElementById("pacBlock"),
  pacUrl: document.getElementById("pacUrl"),
  savePac: document.getElementById("savePac"),
  customBlock: document.getElementById("customBlock"),
  customScheme: document.getElementById("customScheme"),
  customHost: document.getElementById("customHost"),
  customPort: document.getElementById("customPort"),
  customBypass: document.getElementById("customBypass"),
  saveCustom: document.getElementById("saveCustom"),
  // resetBtn: document.getElementById("resetBtn"),
};

// 下拉箭头展开/收起状态同步
function bindSelectOpenState(selectEl) {
  if (!selectEl) return;
  const wrapper = selectEl.closest(".select");
  if (!wrapper) return;
  // 点击时认为打开
  selectEl.addEventListener("mousedown", () => wrapper.classList.add("open"));
  // 获得焦点也可视为打开
  selectEl.addEventListener("focus", () => wrapper.classList.add("open"));
  // 失焦或变更后关闭
  selectEl.addEventListener("blur", () => wrapper.classList.remove("open"));
  selectEl.addEventListener("change", () => wrapper.classList.remove("open"));
}

bindSelectOpenState(els.profileSelect);
bindSelectOpenState(els.customScheme);

init();

async function init() {
  const state = await sendMessage({ type: "getState" });
  const profiles = state.profiles || [];
  const activeProfileId = state.activeProfileId || "direct";

  // 填充下拉
  els.profileSelect.innerHTML = "";
  for (const p of profiles) {
    const opt = document.createElement("option");
    opt.value = p.id;
    opt.textContent = p.name;
    if (p.id === activeProfileId) opt.selected = true;
    els.profileSelect.appendChild(opt);
  }

  toggleBlocks();

  // 回填 PAC、自定义
  const pacProfile = profiles.find((p) => p.id === "pac");
  if (els.pacUrl) els.pacUrl.value = pacProfile?.pacUrl || "";

  const customProfile = profiles.find((p) => p.id === "custom");
  if (customProfile) {
    if (els.customScheme)
      els.customScheme.value = customProfile.scheme || "http";
    if (els.customHost) els.customHost.value = customProfile.host || "";
    if (els.customPort) els.customPort.value = customProfile.port || "";
    if (els.customBypass)
      els.customBypass.value = (customProfile.bypassList || []).join(", ");
  }
}

els.profileSelect?.addEventListener("change", toggleBlocks);

function toggleBlocks() {
  const mode = els.profileSelect?.value;
  const isPac = mode === "pac";
  const isCustom = mode === "custom";
  if (els.pacBlock) els.pacBlock.style.display = isPac ? "block" : "none";
  if (els.customBlock)
    els.customBlock.style.display = isCustom ? "block" : "none";
}

els.applyBtn?.addEventListener("click", async () => {
  const profileId = els.profileSelect.value;
  if (profileId === "custom") {
    await sendMessage({
      type: "updateCustomProxy",
      scheme: els.customScheme?.value,
      host: els.customHost?.value.trim(),
      port: Number(els.customPort?.value) || 0,
      bypassList: (els.customBypass?.value || "")
        .split(",")
        .map((s) => s.trim())
        .filter(Boolean),
    });
  }
  await sendMessage({ type: "applyProfileById", profileId });
  window.close();
});

els.savePac?.addEventListener("click", async () => {
  const pacUrl = (els.pacUrl?.value || "").trim();
  await sendMessage({ type: "updatePacUrl", pacUrl });
});

els.saveCustom?.addEventListener("click", async () => {
  await sendMessage({
    type: "updateCustomProxy",
    scheme: els.customScheme?.value,
    host: els.customHost?.value.trim(),
    port: Number(els.customPort?.value) || 0,
    bypassList: (els.customBypass?.value || "")
      .split(",")
      .map((s) => s.trim())
      .filter(Boolean),
  });
});

// 重置按钮已移除，如需恢复可取消上方注释并启用以下代码
// els.resetBtn?.addEventListener("click", async () => {
//   await sendMessage({ type: "resetProfiles" });
//   await init();
// });

function sendMessage(msg) {
  return new Promise((resolve) => chrome.runtime.sendMessage(msg, resolve));
}