document.addEventListener("DOMContentLoaded", () => {
  const $ = (id) => document.getElementById(id);

  const domainInput = $("domain");
  const aliasInput = $("alias");
  const usernameInput = $("username");
  const passwordInput = $("password");
  const autoSubmitSelect = $("autoSubmit");
  const enabledCheckbox = $("enabled");
  const delayMsInput = $("delayMs");
  const usernameSelectorInput = $("usernameSelector");
  const passwordSelectorInput = $("passwordSelector");
  const submitSelectorInput = $("submitSelector");
  const addBtn = $("addBtn");
  const configList = $("configList");
  const addSection = $("addSection");
  const listSection = $("listSection");
  const fillCurrentBtn = $("fillCurrent");
  const fillDomainBtn = $("fillDomain");
  const exportBtn = $("exportBtn");
  const importBtn = $("importBtn");
  const importFile = $("importFile");
  const toast = $("toast");

  // 锁定界面
  const lockScreen = $("lockScreen");
  const mainContainer = $("mainContainer");
  const lockTitle = $("lockTitle");
  const lockHint = $("lockHint");
  const lockPassword = $("lockPassword");
  const lockPasswordConfirm = $("lockPasswordConfirm");
  const lockConfirmGroup = $("lockConfirmGroup");
  const lockSubmitBtn = $("lockSubmitBtn");
  const lockWarn = $("lockWarn");
  const lockBtn = $("lockBtn");

  // 环境栏
  const envSelect = $("envSelect");
  const envManageBtn = $("envManageBtn");
  const envManageModal = $("envManageModal");
  const envManageList = $("envManageList");
  const envManageWarn = $("envManageWarn");
  const envManageClose = $("envManageClose");
  const envManageAdd = $("envManageAdd");
  const envModal = $("envModal");
  const envModalTitle = $("envModalTitle");
  const envNameInput = $("envNameInput");
  const presetEnvTags = $("presetEnvTags");
  const envModalWarn = $("envModalWarn");
  const envModalCancel = $("envModalCancel");
  const envModalConfirm = $("envModalConfirm");

  const pwdModal = $("pwdModal");
  const modalTitle = $("modalTitle");
  const encryptToggle = $("encryptToggle");
  const encryptToggleGroup = $("encryptToggleGroup");
  const pwdFields = $("pwdFields");
  const confirmGroup = $("confirmGroup");
  const modalPwd = $("modalPwd");
  const modalPwdConfirm = $("modalPwdConfirm");
  const modalWarn = $("modalWarn");
  const modalCancel = $("modalCancel");
  const modalConfirm = $("modalConfirm");
  const strengthBlock = $("strengthBlock");
  const strengthBar = $("strengthBar");
  const strengthLabel = $("strengthLabel");
  const crackTime = $("crackTime");

  let editingId = null;
  // modal 确认后的回调
  let modalResolve = null;

  // ---------- 口令强度 / 破解时间估算 ----------
  // 假设攻击者使用 GPU 集群（PBKDF2-SHA256 10 万次迭代，约 1000 万次/秒，即 10^7 次/秒）
  // 这是中等规模攻击者的合理估算（数十块高端 GPU）
  const ATTACK_RATE = 1e7;

  function estimateStrength(pwd) {
    if (!pwd) return { entropy: 0, seconds: 0, level: "empty", label: "尚未输入" };
    let pool = 0;
    if (/[a-z]/.test(pwd)) pool += 26;
    if (/[A-Z]/.test(pwd)) pool += 26;
    if (/[0-9]/.test(pwd)) pool += 10;
    if (/[^a-zA-Z0-9]/.test(pwd)) pool += 32; // 符号集估算
    if (pool === 0) pool = 1;
    const entropy = pwd.length * Math.log2(pool);
    const combinations = Math.pow(2, entropy);
    // 平均破解时间 = 一半的搜索空间
    const seconds = combinations / 2 / ATTACK_RATE;
    let level, label;
    if (seconds < 1) { level = "very-weak"; label = "极弱"; }
    else if (seconds < 3600) { level = "weak"; label = "弱"; }
    else if (seconds < 86400 * 30) { level = "medium"; label = "中"; }
    else if (seconds < 86400 * 365 * 1000) { level = "strong"; label = "强"; }
    else { level = "very-strong"; label = "极强"; }
    return { entropy, seconds, level, label };
  }

  function formatTime(seconds) {
    if (seconds < 1) return "瞬间破解";
    if (seconds < 60) return `约 ${Math.round(seconds)} 秒`;
    if (seconds < 3600) return `约 ${Math.round(seconds / 60)} 分钟`;
    if (seconds < 86400) return `约 ${Math.round(seconds / 3600)} 小时`;
    if (seconds < 86400 * 30) return `约 ${Math.round(seconds / 86400)} 天`;
    if (seconds < 86400 * 365) return `约 ${Math.round(seconds / 86400 / 30)} 个月`;
    const years = seconds / 86400 / 365;
    if (years < 1000) return `约 ${Math.round(years)} 年`;
    if (years < 1e6) return `约 ${Math.round(years / 1000)} 千年`;
    if (years < 1e9) return `约 ${Math.round(years / 1e6)} 百万年`;
    if (years < 1e12) return `约 ${Math.round(years / 1e9)} 亿年`;
    return `约 ${(years / 1e12).toExponential(2)} 万亿年`;
  }

  function updateStrength(pwd) {
    const { entropy, seconds, level, label } = estimateStrength(pwd);
    // 5 档进度条宽度，对数缩放避免弱口令条太短看不见
    const widthMap = {
      "empty": 0,
      "very-weak": 15,
      "weak": 30,
      "medium": 55,
      "strong": 80,
      "very-strong": 100,
    };
    strengthBar.style.width = widthMap[level] + "%";
    strengthBar.className = "strength-bar-fg " + level;
    strengthLabel.textContent = pwd ? `强度：${label}（熵 ${entropy.toFixed(1)} bits）` : "尚未输入";
    crackTime.textContent = pwd ? `破解时间：${formatTime(seconds)}` : "";
  }

  modalPwd.addEventListener("input", () => updateStrength(modalPwd.value));

  // ---------- Web Crypto 工具：AES-GCM + PBKDF2 ----------
  const enc = new TextEncoder();
  const dec = new TextDecoder();

  function bufToBase64(buf) {
    const bytes = new Uint8Array(buf);
    let bin = "";
    for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
    return btoa(bin);
  }

  function base64ToBuf(b64) {
    const bin = atob(b64);
    const bytes = new Uint8Array(bin.length);
    for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
    return bytes.buffer;
  }

  async function deriveKey(password, salt, iterations) {
    const keyMaterial = await crypto.subtle.importKey(
      "raw",
      enc.encode(password),
      { name: "PBKDF2" },
      false,
      ["deriveKey"]
    );
    return crypto.subtle.deriveKey(
      { name: "PBKDF2", salt, iterations, hash: "SHA-256" },
      keyMaterial,
      { name: "AES-GCM", length: 256 },
      false,
      ["encrypt", "decrypt"]
    );
  }

  async function encryptConfigs(configs, password) {
    const salt = crypto.getRandomValues(new Uint8Array(16));
    const iv = crypto.getRandomValues(new Uint8Array(12));
    const iterations = 100000;
    const key = await deriveKey(password, salt, iterations);
    const plaintext = enc.encode(JSON.stringify(configs));
    const ciphertext = await crypto.subtle.encrypt(
      { name: "AES-GCM", iv },
      key,
      plaintext
    );
    return {
      algorithm: "AES-GCM",
      iv: bufToBase64(iv),
      ciphertext: bufToBase64(ciphertext),
      kdf: {
        algorithm: "PBKDF2",
        iterations,
        hash: "SHA-256",
        salt: bufToBase64(salt)
      }
    };
  }

  async function decryptConfigs(cipher, password) {
    const salt = new Uint8Array(base64ToBuf(cipher.kdf.salt));
    const iv = new Uint8Array(base64ToBuf(cipher.iv));
    const iterations = cipher.kdf.iterations || 100000;
    const key = await deriveKey(password, salt, iterations);
    const plainBuf = await crypto.subtle.decrypt(
      { name: "AES-GCM", iv },
      key,
      base64ToBuf(cipher.ciphertext)
    );
    return JSON.parse(dec.decode(plainBuf));
  }

  // ---------- 口令 modal ----------
  // mode: "export" 显示加密勾选 + 两次口令； "import" 仅显示一次口令
  function openPwdModal(mode) {
    return new Promise((resolve) => {
      modalResolve = resolve;
      if (mode === "export") {
        modalTitle.textContent = "加密导出";
        encryptToggleGroup.style.display = "";
        confirmGroup.style.display = "";
        encryptToggle.checked = true;
        pwdFields.classList.remove("hidden");
        modalPwd.value = "";
        modalPwdConfirm.value = "";
        modalWarn.textContent = "口令将用于 AES-GCM 加密，无法找回，请妥善保存";
      } else {
        modalTitle.textContent = "输入解密口令";
        encryptToggleGroup.style.display = "none";
        confirmGroup.style.display = "none";
        pwdFields.classList.remove("hidden");
        modalPwd.value = "";
        modalPwdConfirm.value = "";
        modalWarn.textContent = "请输入导出时设置的口令";
      }
      pwdModal.classList.add("show");
      setTimeout(() => modalPwd.focus(), 0);
    });
  }

  function closePwdModal() {
    pwdModal.classList.remove("show");
    modalPwd.value = "";
    modalPwdConfirm.value = "";
    modalResolve = null;
    updateStrength("");
  }

  encryptToggle.addEventListener("change", () => {
    if (encryptToggle.checked) {
      pwdFields.classList.remove("hidden");
      updateStrength(modalPwd.value);
    } else {
      pwdFields.classList.add("hidden");
      updateStrength("");
    }
  });

  modalCancel.addEventListener("click", () => {
    if (modalResolve) modalResolve(null);
    closePwdModal();
  });

  modalConfirm.addEventListener("click", () => {
    if (!modalResolve) return;
    const mode = (modalTitle.textContent.includes("导出")) ? "export" : "import";
    if (mode === "export") {
      if (encryptToggle.checked) {
        const p1 = modalPwd.value;
        const p2 = modalPwdConfirm.value;
        if (!p1) {
          modalWarn.textContent = "口令不能为空";
          return;
        }
        if (p1 !== p2) {
          modalWarn.textContent = "两次口令不一致";
          return;
        }
        modalResolve({ encrypt: true, password: p1 });
      } else {
        modalResolve({ encrypt: false, password: null });
      }
    } else {
      const p = modalPwd.value;
      if (!p) {
        modalWarn.textContent = "口令不能为空";
        return;
      }
      modalResolve({ encrypt: true, password: p });
    }
    closePwdModal();
  });

  modalPwd.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      if (confirmGroup.style.display === "none") {
        modalConfirm.click();
      } else if (modalPwdConfirm.value === "") {
        modalPwdConfirm.focus();
      } else {
        modalConfirm.click();
      }
    }
  });

  modalPwdConfirm.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      modalConfirm.click();
    }
  });

  function showToast(msg) {
    toast.textContent = msg;
    toast.classList.add("show");
    setTimeout(() => toast.classList.remove("show"), 2000);
  }

  document.querySelectorAll(".toggle-pwd").forEach((btn) => {
    btn.addEventListener("click", () => {
      const target = $(btn.dataset.target);
      if (target.type === "password") {
        target.type = "text";
        btn.textContent = "隐藏";
      } else {
        target.type = "password";
        btn.textContent = "显示";
      }
    });
  });

  // 表单内容实时保存为草稿，关闭弹窗后不丢失
  const draftFields = [
    domainInput, aliasInput, usernameInput, passwordInput, autoSubmitSelect,
    usernameSelectorInput, passwordSelectorInput, submitSelectorInput,
    enabledCheckbox, delayMsInput,
  ];
  draftFields.forEach((el) => {
    el.addEventListener("input", saveDraft);
    el.addEventListener("change", saveDraft);
  });

  // ---------- 环境数据层（委托给 env-store.js 全局 EnvStore） ----------
  const {
    loadEnvironments,
    saveEnvironments,
    getActiveEnv,
    setActiveEnv,
    createEnvironment,
    renameEnvironment,
    deleteEnvironment,
    loadConfigs,
    saveConfigs,
    loadAllConfigs,
    genId,
    genCfgId,
  } = EnvStore;
  // isDomainMatch 由 utils.js 提供（全局函数）

  // 草稿：弹窗关闭后保留未提交的表单内容
  const DRAFT_KEY = "formDraft";

  function saveDraft() {
    const draft = {
      domain: domainInput.value,
      alias: aliasInput.value,
      username: usernameInput.value,
      password: passwordInput.value,
      autoSubmit: autoSubmitSelect.value,
      usernameSelector: usernameSelectorInput.value,
      passwordSelector: passwordSelectorInput.value,
      submitSelector: submitSelectorInput.value,
      enabled: enabledCheckbox.checked,
      delayMs: delayMsInput.value,
      editingId: editingId,
    };
    chrome.storage.local.set({ [DRAFT_KEY]: draft });
  }

  async function loadDraft() {
    const data = await chrome.storage.local.get(DRAFT_KEY);
    const draft = data[DRAFT_KEY];
    if (!draft) return;
    domainInput.value = draft.domain || "";
    aliasInput.value = draft.alias || "";
    usernameInput.value = draft.username || "";
    passwordInput.value = draft.password || "";
    autoSubmitSelect.value = draft.autoSubmit || "true";
    usernameSelectorInput.value = draft.usernameSelector || "";
    passwordSelectorInput.value = draft.passwordSelector || "";
    submitSelectorInput.value = draft.submitSelector || "";
    enabledCheckbox.checked = draft.enabled !== false;
    delayMsInput.value = draft.delayMs || "";
    editingId = draft.editingId || null;
    addBtn.textContent = editingId ? "更新配置" : "添加配置";
  }

  function clearDraft() {
    chrome.storage.local.remove(DRAFT_KEY);
  }

  // ---------- 环境栏渲染与交互 ----------
  let envModalResolve = null;
  // mode: "create" | "rename"
  function openEnvModal(mode, currentName = "") {
    return new Promise((resolve) => {
      envModalResolve = resolve;
      if (mode === "create") {
        envModalTitle.textContent = "新建环境";
        envNameInput.value = "";
        presetEnvTags.style.display = "flex";
      } else {
        envModalTitle.textContent = "重命名环境";
        envNameInput.value = currentName;
        presetEnvTags.style.display = "flex";
      }
      envModalWarn.style.display = "none";
      envModalWarn.textContent = "";
      envModal.classList.add("show");
      setTimeout(() => {
        envNameInput.focus();
        envNameInput.select();
      }, 0);
    });
  }

  function closeEnvModal() {
    envModal.classList.remove("show");
    envNameInput.value = "";
    envModalWarn.style.display = "none";
    envModalResolve = null;
  }

  presetEnvTags.querySelectorAll(".preset-tag").forEach((tag) => {
    tag.addEventListener("click", () => {
      envNameInput.value = tag.dataset.name;
      envNameInput.focus();
    });
  });

  envModalCancel.addEventListener("click", () => {
    if (envModalResolve) envModalResolve(null);
    closeEnvModal();
  });

  envModalConfirm.addEventListener("click", async () => {
    if (!envModalResolve) return;
    const name = envNameInput.value.trim();
    if (!name) {
      envModalWarn.textContent = "环境名称不能为空";
      envModalWarn.style.display = "block";
      return;
    }
    if (name.length > 20) {
      envModalWarn.textContent = "名称过长（最多 20 字符）";
      envModalWarn.style.display = "block";
      return;
    }
    envModalResolve(name);
    closeEnvModal();
  });

  envNameInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      envModalConfirm.click();
    }
  });

  async function renderEnvSelect() {
    const { environments, activeEnvId } = await loadEnvironments();
    envSelect.innerHTML = "";
    environments.forEach((env) => {
      const opt = document.createElement("option");
      opt.value = env.id;
      opt.textContent = `${env.name} (${env.configs?.length || 0})`;
      if (env.id === activeEnvId) opt.selected = true;
      envSelect.appendChild(opt);
    });
  }

  envSelect.addEventListener("change", async () => {
    await setActiveEnv(envSelect.value);
    resetForm();
    await renderConfigList();
    showToast("已切换环境");
  });

  // ---------- 环境管理对话框 ----------
  function openEnvManageModal() {
    envManageWarn.textContent = "";
    envManageWarn.style.display = "none";
    renderEnvManageList();
    envManageModal.classList.add("show");
  }

  function closeEnvManageModal() {
    envManageModal.classList.remove("show");
  }

  async function renderEnvManageList() {
    const { environments, activeEnvId } = await loadEnvironments();
    envManageList.innerHTML = "";

    if (environments.length === 0) {
      envManageList.innerHTML = '<div class="env-manage-empty">暂无环境</div>';
      return;
    }

    environments.forEach((env) => {
      const row = document.createElement("div");
      row.className = "env-manage-row" + (env.id === activeEnvId ? " active" : "");

      const nameSpan = document.createElement("span");
      nameSpan.className = "env-manage-name";
      const cnt = env.configs?.length || 0;
      const activeMark = env.id === activeEnvId ? '<span class="env-manage-active-mark">当前</span>' : "";
      nameSpan.innerHTML = `${escapeHtml(env.name)} <span class="env-manage-count">(${cnt})</span> ${activeMark}`;

      const actions = document.createElement("div");
      actions.className = "env-manage-actions";

      const editBtn = document.createElement("button");
      editBtn.className = "btn-edit";
      editBtn.textContent = "重命名";
      editBtn.addEventListener("click", async () => {
        const newName = await openEnvModal("rename", env.name);
        if (!newName) return;
        try {
          await renameEnvironment(env.id, newName);
          await renderEnvManageList();
          await renderEnvSelect();
          showToast("已重命名");
        } catch (err) {
          showToast(err.message || "重命名失败");
        }
      });

      const delBtn = document.createElement("button");
      delBtn.className = "btn-danger";
      delBtn.textContent = "删除";
      delBtn.addEventListener("click", async () => {
        if (environments.length <= 1) {
          showToast("至少保留一个环境");
          return;
        }
        const cnt2 = env.configs?.length || 0;
        const msg = cnt2 > 0
          ? `环境「${env.name}」下有 ${cnt2} 条配置，确认删除？（将一并删除这些配置）`
          : `确认删除环境「${env.name}」？`;
        if (!confirm(msg)) return;
        try {
          await deleteEnvironment(env.id);
          await renderEnvManageList();
          await renderEnvSelect();
          resetForm();
          await renderConfigList();
          showToast("已删除环境");
        } catch (err) {
          showToast(err.message || "删除失败");
        }
      });

      actions.appendChild(editBtn);
      actions.appendChild(delBtn);
      row.appendChild(nameSpan);
      row.appendChild(actions);
      envManageList.appendChild(row);
    });
  }

  envManageBtn.addEventListener("click", openEnvManageModal);
  envManageClose.addEventListener("click", closeEnvManageModal);

  envManageAdd.addEventListener("click", async () => {
    const name = await openEnvModal("create");
    if (!name) return;
    try {
      await createEnvironment(name);
      await renderEnvManageList();
      await renderEnvSelect();
      resetForm();
      await renderConfigList();
      showToast(`已创建环境「${name}」`);
    } catch (err) {
      showToast(err.message || "创建失败");
    }
  });


  async function renderConfigList() {
    const configs = await loadConfigs();
    configList.innerHTML = "";

    // 配置为 0：禁用导出，列表在前；非 0：启用导出，添加表单在前
    const isEmpty = configs.length === 0;
    exportBtn.disabled = isEmpty;
    exportBtn.classList.toggle("btn-disabled", isEmpty);
    const parent = addSection.parentElement;
    if (isEmpty) {
      // 空状态：add-section 在上，list-section 在下（已是默认顺序，确保如此）
      if (parent.children[0] !== addSection) parent.insertBefore(addSection, listSection);
    } else {
      // 非空：list-section 在上，add-section 在下
      if (parent.children[0] !== listSection) parent.insertBefore(listSection, addSection);
    }

    if (isEmpty) {
      configList.innerHTML = `
        <div class="empty-state">
          <div class="empty-icon">
            <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="5" width="18" height="14" rx="2"/>
              <path d="M3 10h18"/>
              <circle cx="7" cy="14.5" r="0.6" fill="currentColor"/>
              <path d="M11 14.5h6"/>
            </svg>
          </div>
          <div class="empty-text">暂无配置</div>
          <div class="empty-sub">在上方填写域名 / 用户名 / 密码后点击「添加配置」</div>
        </div>
      `;
      return;
    }

    configs.forEach((cfg) => {
      const item = document.createElement("div");
      item.className = "config-item" + (cfg.enabled === false ? " config-disabled" : "");

      const info = document.createElement("div");
      info.className = "config-info";
      const displayName = escapeHtml(cfg.alias || cfg.domain);
      const showDomain = cfg.alias ? escapeHtml(cfg.domain) : "";
      const enabledTag = cfg.enabled === false
        ? '<span class="tag-disabled">已禁用</span>'
        : "";
      const delayTag = cfg.delayMs && Number(cfg.delayMs) > 300
        ? `<span class="tag-delay">延迟 ${cfg.delayMs}ms</span>`
        : "";
      info.innerHTML = `
        <div class="config-domain">${displayName} ${enabledTag} ${delayTag}</div>
        ${showDomain ? `<div class="config-domain-sub">${showDomain}</div>` : ""}
        <div class="config-detail">用户: ${escapeHtml(cfg.username)} | 自动提交: ${cfg.autoSubmit ? "是" : "否"}</div>
      `;

      const actions = document.createElement("div");
      actions.className = "config-actions";

      // 启用/禁用切换按钮（不删除配置）
      const toggleBtn = document.createElement("button");
      toggleBtn.className = "btn-toggle";
      toggleBtn.textContent = cfg.enabled === false ? "启用" : "禁用";
      toggleBtn.title = cfg.enabled === false ? "点击启用此配置" : "点击禁用此配置";
      toggleBtn.addEventListener("click", async () => {
        const updated = configs.map((c) =>
          c.id === cfg.id ? { ...c, enabled: c.enabled === false } : c
        );
        await saveConfigs(updated);
        renderConfigList();
        renderEnvSelect();
        if (envManageModal.classList.contains("show")) renderEnvManageList();
        showToast(cfg.enabled === false ? "已启用" : "已禁用");
      });

      const editBtn = document.createElement("button");
      editBtn.className = "btn-edit";
      editBtn.textContent = "编辑";
      editBtn.addEventListener("click", () => {
        editingId = cfg.id;
        domainInput.value = cfg.domain;
        aliasInput.value = cfg.alias || "";
        usernameInput.value = cfg.username;
        passwordInput.value = cfg.password;
        autoSubmitSelect.value = String(cfg.autoSubmit);
        usernameSelectorInput.value = cfg.usernameSelector || "";
        passwordSelectorInput.value = cfg.passwordSelector || "";
        submitSelectorInput.value = cfg.submitSelector || "";
        enabledCheckbox.checked = cfg.enabled !== false;
        delayMsInput.value = cfg.delayMs || "";
        addBtn.textContent = "更新配置";
        saveDraft();
        domainInput.focus();
      });

      const delBtn = document.createElement("button");
      delBtn.className = "btn-danger";
      delBtn.textContent = "删除";
      delBtn.addEventListener("click", async () => {
        const updated = configs.filter((c) => c.id !== cfg.id);
        await saveConfigs(updated);
        showToast("已删除");
        renderConfigList();
        renderEnvSelect();
        if (envManageModal.classList.contains("show")) renderEnvManageList();
        if (editingId === cfg.id) {
          resetForm();
        }
      });

      actions.appendChild(toggleBtn);
      actions.appendChild(editBtn);
      actions.appendChild(delBtn);
      item.appendChild(info);
      item.appendChild(actions);
      configList.appendChild(item);
    });
  }

  function resetForm() {
    editingId = null;
    domainInput.value = "";
    aliasInput.value = "";
    usernameInput.value = "";
    passwordInput.value = "";
    autoSubmitSelect.value = "true";
    usernameSelectorInput.value = "";
    passwordSelectorInput.value = "";
    submitSelectorInput.value = "";
    enabledCheckbox.checked = true;
    delayMsInput.value = "";
    addBtn.textContent = "添加配置";
    clearDraft();
  }

  function escapeHtml(str) {
    const div = document.createElement("div");
    div.textContent = str;
    return div.innerHTML;
  }

  addBtn.addEventListener("click", async () => {
    const domain = domainInput.value.trim();
    const username = usernameInput.value.trim();
    const password = passwordInput.value;

    if (!domain || !username || !password) {
      showToast("域名、用户名、密码不能为空");
      return;
    }

    const config = {
      domain,
      alias: aliasInput.value.trim() || null,
      username,
      password,
      autoSubmit: autoSubmitSelect.value === "true",
      usernameSelector: usernameSelectorInput.value.trim() || null,
      passwordSelector: passwordSelectorInput.value.trim() || null,
      submitSelector: submitSelectorInput.value.trim() || null,
      enabled: enabledCheckbox.checked,
      delayMs: delayMsInput.value ? Number(delayMsInput.value) : null,
    };

    const configs = await loadConfigs();

    if (editingId) {
      const idx = configs.findIndex((c) => c.id === editingId);
      if (idx !== -1) {
        config.id = editingId;
        configs[idx] = config;
      }
      showToast("配置已更新");
    } else {
      config.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
      configs.push(config);
      showToast("配置已添加");
    }

    await saveConfigs(configs);
    resetForm();
    renderConfigList();
    renderEnvSelect();
    if (envManageModal.classList.contains("show")) renderEnvManageList();
  });

  fillCurrentBtn.addEventListener("click", async () => {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    if (!tab) {
      showToast("无法获取当前标签页");
      return;
    }

    // 跨所有环境查找匹配的配置
    const allConfigs = await loadAllConfigs();
    const matched = allConfigs.filter((c) => isDomainMatch(tab.url, c.domain));

    if (matched.length === 0) {
      showToast("当前域名无匹配配置");
      return;
    }

    if (matched.length === 1) {
      try {
        const resp = await chrome.tabs.sendMessage(tab.id, {
          action: "manualFill",
          config: matched[0],
        });
        if (resp && resp.success) {
          showToast("已填充，请确认");
        } else {
          showToast("已发送但未找到登录表单，请确认页面已加载完成");
        }
      } catch (err) {
        // content script 未注入：常见于安装扩展前已打开的页面
        if (/Could not establish connection|Receiving end does not exist/i.test(err.message)) {
          showToast("页面未注入脚本，请刷新页面后重试");
        } else {
          showToast("发送失败：" + (err.message || err));
        }
      }
      return;
    }

    // 多个环境命中：发到 content.js 由它弹选择菜单
    try {
      await chrome.tabs.sendMessage(tab.id, {
        action: "manualFillMulti",
        configs: matched,
        tabUrl: tab.url,
      });
      showToast(`命中 ${matched.length} 个环境配置，请在页面选择`);
    } catch (err) {
      if (/Could not establish connection|Receiving end does not exist/i.test(err.message)) {
        showToast("页面未注入脚本，请刷新页面后重试");
      } else {
        showToast("发送失败：" + (err.message || err));
      }
    }
  });

  fillDomainBtn.addEventListener("click", async () => {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    if (!tab || !tab.url) {
      showToast("无法获取当前标签页");
      return;
    }
    try {
      const hostname = new URL(tab.url).hostname;
      if (!hostname) {
        showToast("当前页面无有效域名");
        return;
      }
      domainInput.value = hostname;
      saveDraft();
      showToast(`已填入: ${hostname}`);
    } catch {
      showToast("无法解析当前页面 URL");
    }
  });

  // 导出配置：导出整个 environments 结构（含环境名）
  exportBtn.addEventListener("click", async () => {
    const { environments } = await loadEnvironments();
    const totalConfigs = environments.reduce((s, e) => s + (e.configs?.length || 0), 0);
    if (totalConfigs === 0) {
      showToast("暂无配置可导出");
      return;
    }
    const choice = await openPwdModal("export");
    if (!choice) {
      showToast("已取消导出");
      return;
    }
    const stamp = new Date().toISOString().replace(/[:T]/g, "").slice(0, 15);
    let payload;
    let filename;
    if (choice.encrypt) {
      const cipher = await encryptConfigs(environments, choice.password);
      payload = {
        app: "AutoLoginManager",
        version: 3,
        exportedAt: new Date().toISOString(),
        encrypted: true,
        cipher,
      };
      filename = `auto-login-configs-${stamp}.enc.json`;
    } else {
      payload = {
        app: "AutoLoginManager",
        version: 3,
        exportedAt: new Date().toISOString(),
        encrypted: false,
        environments,
      };
      filename = `auto-login-configs-${stamp}.json`;
    }
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    showToast(`已导出 ${environments.length} 个环境 / ${totalConfigs} 条配置${choice.encrypt ? "（加密）" : ""}`);
  });

  // 导入配置：兼容 v1(数组) / v2(configs) / v3(environments)，加密则弹口令 modal
  importBtn.addEventListener("click", () => importFile.click());

  importFile.addEventListener("change", async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    try {
      const text = await file.text();
      const data = JSON.parse(text);
      let incomingEnvironments = null;
      let incomingConfigs = null;

      // 1. v1: 直接数组格式
      if (Array.isArray(data)) {
        incomingConfigs = data;
      }
      // 2. 加密格式
      else if (data?.encrypted === true && data?.cipher) {
        const choice = await openPwdModal("import");
        if (!choice) {
          showToast("已取消导入");
          importFile.value = "";
          return;
        }
        try {
          const decrypted = await decryptConfigs(data.cipher, choice.password);
          // 解密后可能是 v3 (environments) 或 v1 (configs)
          if (Array.isArray(decrypted)) {
            incomingConfigs = decrypted;
          } else if (Array.isArray(decrypted?.environments)) {
            incomingEnvironments = decrypted.environments;
          } else if (Array.isArray(decrypted?.configs)) {
            incomingConfigs = decrypted.configs;
          } else {
            showToast("解密后内容格式无效");
            importFile.value = "";
            return;
          }
        } catch (err) {
          showToast("解密失败：口令错误或文件损坏");
          importFile.value = "";
          return;
        }
      }
      // 3. v3 明文：含 environments
      else if (Array.isArray(data?.environments)) {
        incomingEnvironments = data.environments;
      }
      // 4. v2 明文：含 configs
      else if (Array.isArray(data?.configs)) {
        incomingConfigs = data.configs;
      } else {
        showToast("文件格式无效");
        importFile.value = "";
        return;
      }

      const { environments: existingEnvs, activeEnvId } = await loadEnvironments();

      // 分支 A：导入 v3 环境结构 —— 按"环境名"匹配，已存在的环境跳过，新的环境整批导入
      if (incomingEnvironments) {
        const existingNames = new Set(existingEnvs.map((e) => e.name));
        let addedEnvs = 0;
        let addedCfgs = 0;
        let skippedCfgs = 0;
        for (const env of incomingEnvironments) {
          if (!env || !env.name) {
            skippedCfgs += (env?.configs?.length) || 0;
            continue;
          }
          if (existingNames.has(env.name)) {
            // 同名环境：跳过整个环境
            skippedCfgs += (env.configs?.length) || 0;
            continue;
          }
          existingNames.add(env.name);
          const newEnv = {
            id: genId(),
            name: env.name,
            configs: [],
          };
          for (const cfg of (env.configs || [])) {
            if (!cfg || !cfg.domain || !cfg.username || !cfg.password) {
              skippedCfgs++;
              continue;
            }
            newEnv.configs.push({
              id: cfg.id || genCfgId(),
              domain: cfg.domain,
              alias: cfg.alias || null,
              username: cfg.username,
              password: cfg.password,
              autoSubmit: cfg.autoSubmit !== false,
              usernameSelector: cfg.usernameSelector || null,
              passwordSelector: cfg.passwordSelector || null,
              submitSelector: cfg.submitSelector || null,
              enabled: cfg.enabled !== false,
              delayMs: cfg.delayMs || null,
            });
            addedCfgs++;
          }
          existingEnvs.push(newEnv);
          addedEnvs++;
        }
        await saveEnvironments(existingEnvs, activeEnvId);
        await renderEnvSelect();
        await renderConfigList();
        showToast(`已导入 ${addedEnvs} 个环境 / ${addedCfgs} 条配置，跳过 ${skippedCfgs} 条（同名或无效）`);
        return;
      }

      // 分支 B：导入 v1/v2 配置数组 —— 合并到当前激活环境，相同 domain 跳过
      const curEnv = existingEnvs.find((e) => e.id === activeEnvId) || existingEnvs[0];
      const seenDomains = new Set(curEnv.configs.map((c) => c.domain));
      let added = 0;
      let skipped = 0;
      for (const cfg of incomingConfigs) {
        if (!cfg || !cfg.domain || !cfg.username || !cfg.password) {
          skipped++;
          continue;
        }
        if (seenDomains.has(cfg.domain)) {
          skipped++;
          continue;
        }
        seenDomains.add(cfg.domain);
        curEnv.configs.push({
          id: cfg.id || genCfgId(),
          domain: cfg.domain,
          alias: cfg.alias || null,
          username: cfg.username,
          password: cfg.password,
          autoSubmit: cfg.autoSubmit !== false,
          usernameSelector: cfg.usernameSelector || null,
          passwordSelector: cfg.passwordSelector || null,
          submitSelector: cfg.submitSelector || null,
          enabled: cfg.enabled !== false,
          delayMs: cfg.delayMs || null,
        });
        added++;
      }
      await saveEnvironments(existingEnvs);
      await renderConfigList();
      showToast(`已导入 ${added} 条到当前环境，跳过 ${skipped} 条（重复或无效）`);
    } catch (err) {
      showToast("导入失败：" + (err.message || "解析错误"));
    } finally {
      importFile.value = "";
    }
  });

  // ---------- 消息发送工具：带重试 + 上下文失效检测 ----------
  // MV3 service worker 可能刚休眠唤醒 / 刚加载，首次 sendMessage 会失败
  // "Could not establish connection. Receiving end does not exist." 属于此类
  function sendMessage(message, retries = 3) {
    return new Promise((resolve, reject) => {
      let attempt = 0;
      const trySend = () => {
        attempt++;
        // 扩展上下文已失效（扩展被重载/更新），刷新页面恢复
        if (!chrome.runtime?.id) {
          location.reload();
          reject(new Error("扩展已重新加载，正在刷新面板…"));
          return;
        }
        chrome.runtime.sendMessage(message, (resp) => {
          const err = chrome.runtime.lastError;
          if (err) {
            // 接收端不存在：SW 还没注册 listener，等 200ms 重试
            if (attempt < retries && /Receiving end does not exist/i.test(err.message)) {
              setTimeout(trySend, 200 * attempt);
              return;
            }
            reject(new Error(err.message));
            return;
          }
          resolve(resp);
        });
      };
      trySend();
    });
  }

  // ---------- 锁定 / 解锁 ----------
  let lockMode = "setup"; // "setup" | "unlock"

  function showLockScreen(mode) {
    lockMode = mode;
    lockScreen.style.display = "flex";
    mainContainer.style.display = "none";
    lockPassword.value = "";
    lockPasswordConfirm.value = "";
    lockWarn.textContent = "";
    lockWarn.style.display = "none";

    if (mode === "setup") {
      lockTitle.textContent = "设置口令";
      lockHint.textContent = "口令用于加密存储所有配置，忘记将无法恢复";
      lockConfirmGroup.style.display = "block";
      lockSubmitBtn.textContent = "设置口令并进入";
    } else {
      lockTitle.textContent = "已锁定";
      lockHint.textContent = "请输入口令查看已加密的配置";
      lockConfirmGroup.style.display = "none";
      lockSubmitBtn.textContent = "解锁";
    }
    setTimeout(() => lockPassword.focus(), 50);
  }

  function showMainUI() {
    lockScreen.style.display = "none";
    mainContainer.style.display = "flex";
  }

  async function initLockState() {
    try {
      const resp = await sendMessage({ action: "getVaultStatus" });
      if (!resp.hasVault) {
        showLockScreen("setup");
      } else if (!resp.unlocked) {
        showLockScreen("unlock");
      } else {
        showMainUI();
        loadDraft();
        renderEnvSelect();
        renderConfigList();
      }
    } catch (err) {
      console.warn("[AutoLogin] 获取锁状态失败:", err);
      lockWarn.textContent = "无法连接后台服务，请尝试刷新面板或重新加载扩展";
      lockWarn.style.display = "block";
      showLockScreen("setup");
    }
  }

  lockSubmitBtn.addEventListener("click", async () => {
    const pwd = lockPassword.value;
    if (!pwd) {
      lockWarn.textContent = "请输入口令";
      lockWarn.style.display = "block";
      return;
    }
    if (lockMode === "setup") {
      if (pwd.length < 6) {
        lockWarn.textContent = "口令至少 6 位";
        lockWarn.style.display = "block";
        return;
      }
      if (pwd !== lockPasswordConfirm.value) {
        lockWarn.textContent = "两次输入的口令不一致";
        lockWarn.style.display = "block";
        return;
      }
      try {
        await sendMessage({ action: "setupVault", password: pwd });
        showToast("口令已设置，配置已加密存储");
        showMainUI();
        loadDraft();
        renderEnvSelect();
        renderConfigList();
      } catch (err) {
        lockWarn.textContent = "设置失败：" + (err.message || err);
        lockWarn.style.display = "block";
      }
    } else {
      try {
        const resp = await sendMessage({ action: "unlock", password: pwd });
        if (resp.success) {
          showToast("已进入");
          showMainUI();
          loadDraft();
          renderEnvSelect();
          renderConfigList();
        } else {
          lockWarn.textContent = resp.error || "进入失败";
          lockWarn.style.display = "block";
        }
      } catch (err) {
        lockWarn.textContent = "进入失败：" + (err.message || err);
        lockWarn.style.display = "block";
      }
    }
  });

  lockPassword.addEventListener("keydown", (e) => {
    if (e.key === "Enter") lockSubmitBtn.click();
  });
  lockPasswordConfirm.addEventListener("keydown", (e) => {
    if (e.key === "Enter") lockSubmitBtn.click();
  });

  lockBtn.addEventListener("click", async () => {
    if (!confirm("确认锁定？锁定后需重新输入口令才能查看配置。")) return;
    await sendMessage({ action: "lock" });
    showLockScreen("unlock");
    showToast("已锁定");
  });

  // 用户在弹窗内的操作视为活动，通知 background 重置自动锁定计时
  document.addEventListener("click", () => {
    if (lockScreen.style.display === "none") {
      sendMessage({ action: "ping" }, 1).catch(() => {});
    }
  });

  initLockState();
});