(() => {
  "use strict";

  const api = window.gsm3Api;
  const byId = (id) => document.getElementById(id);
  const views = {
    overview: ["NETWORK OVERVIEW", "网络概览"],
    profiles: ["CONFIGURATION", "Profiles"],
    web: ["SELF-HOSTED CONSOLE", "Web 控制台"],
    topology: ["LIVE TOPOLOGY", "拓扑与节点"],
    routes: ["ROUTING TABLE", "路由"],
    actions: ["RUNTIME RPC", "运行时操作"],
    security: ["ZERO TRUST", "Secure Mode"],
    diagnostics: ["DIAGNOSTICS", "诊断"],
  };
  const statusLabels = {
    unknown: "未知",
    stopped: "已停止",
    starting: "启动中",
    running: "运行中",
    stopping: "停止中",
    error: "异常",
  };
  const capabilityLabels = {
    supportsConfigFile: "配置文件",
    supportsJsonOutput: "JSON 输出",
    supportsSecureMode: "Secure Mode",
    supportsCredentials: "临时凭据",
    supportsAcl: "ACL",
  };

  let state = {
    profiles: [],
    selectedProfileId: "",
    snapshot: null,
    capabilities: null,
    installation: null,
    webStatus: null,
    activeView: "overview",
    unsubscribe: null,
    isBusy: false,
    confirmAction: null,
  };
  let activeModal = null;
  let securityUI = null;

  const setState = (patch) => {
    state = { ...state, ...patch };
  };

  const currentView = () => state.profiles.find((item) => item.profile?.id === state.selectedProfileId) || null;
  const currentProfile = () => currentView()?.profile || null;
  const currentInstance = () => currentView()?.instance || null;

  const createElement = (tag, options = {}) => {
    const element = document.createElement(tag);
    if (options.className) element.className = options.className;
    if (options.text !== undefined) element.textContent = String(options.text);
    if (options.title) element.title = options.title;
    return element;
  };

  const resetForm = (form) => {
    if (typeof form.reset === "function") {
      form.reset();
      return;
    }
    form.querySelectorAll("input, select, textarea").forEach((control) => {
      const type = String(control.type || "").toLowerCase();
      if (type === "checkbox" || type === "radio") {
        control.checked = typeof control.defaultChecked === "boolean"
          ? control.defaultChecked
          : control.hasAttribute("checked");
        return;
      }
      if (control.tagName === "SELECT") {
        const options = [...control.options];
        const defaultOption = options.find((option) => option.defaultSelected || option.hasAttribute("selected"));
        control.value = defaultOption?.value || options[0]?.value || "";
        return;
      }
      control.value = typeof control.defaultValue === "string" ? control.defaultValue : "";
    });
  };

  const announce = (message) => {
    byId("announcement").textContent = message;
  };

  const describeError = (error) => {
    if (error instanceof Error && error.message) return error.message;
    return "操作失败，请稍后重试";
  };

  const showError = (error, notify = true) => {
    const message = describeError(error);
    const banner = byId("errorBanner");
    banner.textContent = message;
    banner.hidden = false;
    announce(message);
    if (notify) api.notify("error", message);
  };

  const clearError = () => {
    const banner = byId("errorBanner");
    banner.hidden = true;
    banner.textContent = "";
  };

  const setBusy = (isBusy) => {
    setState({ isBusy });
    document.body.setAttribute("aria-busy", String(isBusy));
    document.querySelectorAll("button[data-runtime-control]").forEach((button) => {
      button.disabled = isBusy;
    });
    renderControls();
    renderWebStatus();
    securityUI?.render();
  };

  const formatBytes = (bytes) => {
    const value = Number(bytes || 0);
    if (!Number.isFinite(value) || value <= 0) return "0 B";
    const units = ["B", "KB", "MB", "GB", "TB"];
    const unitIndex = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);
    const normalized = value / (1024 ** unitIndex);
    return `${normalized.toFixed(normalized >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
  };

  const setView = (viewName) => {
    if (!Object.prototype.hasOwnProperty.call(views, viewName)) return;
    setState({ activeView: viewName });
    document.querySelectorAll("[data-view]").forEach((section) => {
      const isActive = section.dataset.view === viewName;
      section.hidden = !isActive;
      section.classList.toggle("is-active", isActive);
    });
    document.querySelectorAll("[data-view-target]").forEach((button) => {
      const isActive = button.dataset.viewTarget === viewName;
      button.classList.toggle("is-active", isActive);
      if (isActive) button.setAttribute("aria-current", "page");
      else button.removeAttribute("aria-current");
    });
    byId("activeViewEyebrow").textContent = views[viewName][0];
    byId("activeViewTitle").textContent = views[viewName][1];
  };

  const renderProfileSelect = () => {
    const select = byId("profileSelect");
    const options = state.profiles.map((item) => {
      const option = createElement("option", { text: item.profile.name });
      option.value = item.profile.id;
      return option;
    });
    if (options.length === 0) {
      const option = createElement("option", { text: "尚未创建 Profile" });
      option.value = "";
      options.push(option);
    }
    select.replaceChildren(...options);
    select.value = state.selectedProfileId;
    select.disabled = state.profiles.length === 0;
  };

  const makeStatusPill = (status) => {
    const pill = createElement("span", { className: "status-pill", text: statusLabels[status] || status || "未知" });
    pill.dataset.state = status || "unknown";
    return pill;
  };

  const makeRowButton = (label, action, profileId, className = "button button-quiet") => {
    const button = createElement("button", { className, text: label });
    button.type = "button";
    button.dataset.profileAction = action;
    button.dataset.profileId = profileId;
    return button;
  };

  const renderProfilesTable = () => {
    const body = byId("profilesTableBody");
    const rows = state.profiles.map((item) => {
      const profile = item.profile;
      const row = document.createElement("tr");
      const profileCell = document.createElement("td");
      const name = createElement("strong", { text: profile.name });
      const migrationLabel = profile.migration?.source === "tunnel-helper" ? " · 已迁移" : "";
      const detail = createElement("div", {
        className: "hint",
        text: `${profile.settings?.hostname || profile.id}${migrationLabel}`,
      });
      profileCell.append(name, detail);
      const networkCell = createElement("td", { text: profile.networkName });
      const statusCell = document.createElement("td");
      statusCell.append(makeStatusPill(item.instance?.status || "stopped"));
      const versionCell = createElement("td", { className: "mono", text: profile.capabilities?.version || "未检测" });
      const actionCell = createElement("td", { className: "align-right" });
      const actions = createElement("div", { className: "row-actions" });
      actions.append(
        makeRowButton("选择", "select", profile.id),
        makeRowButton("编辑", "edit", profile.id),
        makeRowButton("删除", "delete", profile.id, "button button-danger"),
      );
      actionCell.append(actions);
      row.append(profileCell, networkCell, statusCell, versionCell, actionCell);
      return row;
    });
    body.replaceChildren(...rows);
    byId("profilesEmpty").hidden = rows.length > 0;
  };

  const renderSummary = () => {
    const profile = currentProfile();
    const details = byId("profileSummary").querySelectorAll("dd");
    const values = profile
      ? [
          profile.name,
          profile.networkName,
          profile.capabilities?.version || "未检测",
          profile.settings?.rpcPortal || "自动分配",
        ]
      : ["—", "—", "—", "—"];
    details.forEach((detail, index) => { detail.textContent = values[index]; });
  };

  const renderCapabilities = () => {
    const capabilities = state.capabilities || currentProfile()?.capabilities || null;
    const container = byId("capabilityList");
    if (!capabilities) {
      container.replaceChildren(createElement("p", { className: "empty-state", text: "尚未完成能力检测" }));
      return;
    }
    const items = Object.entries(capabilityLabels).map(([key, label]) => {
      const item = createElement("span", { className: "capability-item", text: label });
      item.classList.toggle("is-supported", Boolean(capabilities[key]));
      return item;
    });
    container.replaceChildren(...items);
  };

  const renderSnapshot = () => {
    const snapshot = state.snapshot;
    const node = snapshot?.node || {};
    const traffic = snapshot?.traffic || {};
    byId("metricIpv4").textContent = node.virtualIpv4 || "—";
    byId("metricHostname").textContent = node.hostname || "等待节点信息";
    byId("metricPeers").textContent = String(snapshot?.peers?.length || 0);
    byId("metricDirectPeers").textContent = `${snapshot?.peers?.filter((peer) => peer.direct).length || 0} 个直连`;
    byId("metricRx").textContent = formatBytes(traffic.rxBytes);
    byId("metricTx").textContent = formatBytes(traffic.txBytes);
    byId("metricNat").textContent = node.natType ? `NAT ${node.natType}` : "NAT 未知";
    byId("snapshotFreshness").textContent = snapshot?.capturedAt
      ? `更新于 ${new Date(snapshot.capturedAt).toLocaleTimeString("zh-CN")}`
      : "尚无快照";

    renderPeers(snapshot?.peers || []);
    renderRoutes(snapshot?.routes || []);
    renderDiagnostics(snapshot);
  };

  const renderPeers = (peers) => {
    const rows = peers.map((peer) => {
      const row = document.createElement("tr");
      const cells = [
        peer.hostname || peer.id,
        peer.virtualIpv4 || "—",
        Number.isFinite(peer.latencyMs) ? `${peer.latencyMs} ms` : "—",
        peer.natType || "—",
        peer.tunnelProtocol || "—",
        peer.direct ? "直连" : "中继",
      ].map((value) => createElement("td", { text: value }));
      row.append(...cells);
      return row;
    });
    byId("peersTableBody").replaceChildren(...rows);
    byId("peersEmpty").hidden = rows.length > 0;
  };

  const renderRoutes = (routes) => {
    const rows = routes.map((route) => {
      const row = document.createElement("tr");
      const cells = [
        route.destination,
        route.nextHop || "—",
        route.interface || "—",
        route.metric ?? "—",
        route.proxy ? "代理" : "直达",
      ].map((value) => createElement("td", { text: value }));
      row.append(...cells);
      return row;
    });
    byId("routesTableBody").replaceChildren(...rows);
    byId("routesEmpty").hidden = rows.length > 0;
  };

  const renderDiagnostics = (snapshot = state.snapshot) => {
    const capabilities = state.capabilities || currentProfile()?.capabilities || {};
    const warnings = [
      ...(capabilities.compatibilityWarnings || []),
      ...(snapshot?.warnings || []),
      ...(snapshot?.error ? [snapshot.error] : []),
    ];
    const listItems = (warnings.length > 0 ? warnings : ["当前未发现兼容性提醒。"])
      .map((warning) => createElement("li", { text: warning }));
    byId("diagnosticWarnings").replaceChildren(...listItems);
    byId("rawSnapshot").textContent = JSON.stringify(snapshot || {}, null, 2);
    const warningBanner = byId("warningBanner");
    warningBanner.hidden = warnings.length === 0;
    warningBanner.textContent = warnings.length > 0 ? warnings[0] : "";
  };

  const renderControls = () => {
    const profile = currentProfile();
    const status = currentInstance()?.status || state.snapshot?.state || "stopped";
    const hasProfile = Boolean(profile);
    const statusPill = byId("instanceStatus");
    statusPill.textContent = hasProfile ? (statusLabels[status] || status) : "未选择";
    statusPill.dataset.state = hasProfile ? status : "unknown";
    byId("startButton").disabled = state.isBusy || !hasProfile || ["running", "starting", "stopping"].includes(status);
    byId("stopButton").disabled = state.isBusy || !hasProfile || ["stopped", "stopping", "starting"].includes(status);
    byId("restartButton").disabled = state.isBusy || !hasProfile || ["starting", "stopping"].includes(status);
    byId("editCurrentProfileButton").disabled = !hasProfile;
    byId("refreshCapabilitiesButton").disabled = state.isBusy || !hasProfile;

    const supportsActions = status === "running" && Boolean((state.capabilities || profile?.capabilities)?.supportsJsonOutput);
    document.querySelectorAll(".action-form input, .action-form select, .action-form button").forEach((control) => {
      control.disabled = state.isBusy || !supportsActions;
    });
  };

  const renderInstallation = () => {
    const status = state.installation;
    const installation = status?.installation || null;
    byId("installVersion").textContent = status?.recommendedVersion || "—";
    byId("installTarget").textContent = status
      ? `${status.platform}/${status.architecture}${status.artifactName ? ` · ${status.artifactName}` : ""}`
      : "—";
    byId("installDirectory").textContent = installation?.directory || "尚未安装";
    const stateTag = byId("installState");
    stateTag.textContent = installation ? `已安装 ${installation.version}` : status?.supported ? "可安装" : "不支持";
    const installButton = byId("installEasyTierButton");
    installButton.disabled = state.isBusy || !status?.supported;
    installButton.dataset.force = installation ? "true" : "false";
    installButton.textContent = installation ? "重新安装推荐版本" : "安装推荐版本";
    installButton.title = status?.unsupportedReason || "";
  };

  const renderWebStatus = () => {
    const web = state.webStatus;
    const instanceStatus = web?.instance?.status || "stopped";
    const statusPill = byId("webServiceStatus");
    statusPill.textContent = web?.configured ? (statusLabels[instanceStatus] || instanceStatus) : "未配置";
    statusPill.dataset.state = web?.configured ? instanceStatus : "unknown";
    byId("webServiceDescription").textContent = web
      ? `${web.version ? `EasyTier Web ${web.version}` : "EasyTier Web 程序未就绪"} · ${web.healthy ? "API 已响应" : "API 未响应"}`
      : "正在读取服务状态…";
    byId("webHealthTag").textContent = web?.healthy ? "API 正常" : instanceStatus === "running" ? "等待 API" : "未运行";
    byId("webConnectionUri").value = web?.configServerUri || "udp://127.0.0.1:22020/<用户名>";
    byId("webDatabasePath").textContent = web?.databasePath || "—";
    byId("webLogsDirectory").textContent = web?.logsDirectory || "—";

    const openButton = byId("webOpenButton");
    if (web?.managementUrl) {
      openButton.href = web.managementUrl;
      openButton.setAttribute("aria-disabled", "false");
      openButton.title = `打开 ${web.managementUrl}`;
    } else {
      openButton.removeAttribute("href");
      openButton.setAttribute("aria-disabled", "true");
      openButton.title = "请先保存 API Host";
    }

    const canManage = Boolean(web?.configured && web?.binaryAvailable);
    byId("webStartButton").disabled = state.isBusy || !canManage || ["running", "starting", "stopping"].includes(instanceStatus);
    byId("webStopButton").disabled = state.isBusy || !canManage || ["stopped", "stopping", "starting"].includes(instanceStatus);
    byId("webRestartButton").disabled = state.isBusy || !canManage || ["starting", "stopping"].includes(instanceStatus);
    document.querySelectorAll("#webSettingsForm input, #webSettingsForm select, #webSettingsForm button").forEach((control) => {
      control.disabled = state.isBusy;
    });

    const warnings = web?.warnings || [];
    byId("webWarnings").replaceChildren(...warnings.map((warning) => createElement("li", { text: warning })));
    byId("webWarningPanel").hidden = warnings.length === 0;
  };

  const populateWebForm = () => {
    const settings = state.webStatus?.settings;
    if (!settings) return;
    byId("webBinaryPath").value = settings.binaryPath || state.installation?.installation?.webEmbedPath || "easytier-web-embed";
    const apiServerAddress = settings.apiServerAddress || "127.0.0.1";
    byId("webApiServerAddress").value = apiServerAddress;
    byId("webApiServerPort").value = String(settings.apiServerPort || 11211);
    const apiHostName = apiServerAddress.includes(":") ? `[${apiServerAddress}]` : apiServerAddress;
    byId("webApiHost").value = settings.apiHost || `http://${apiHostName}:${settings.apiServerPort || 11211}`;
    byId("webConfigServerProtocol").value = settings.configServerProtocol || "udp";
    byId("webConfigServerPort").value = String(settings.configServerPort || 22020);
    byId("webAutoStart").checked = Boolean(settings.autoStart);
    byId("webDisableRegistration").checked = Boolean(settings.disableRegistration);
    byId("webAllowAutoCreateUser").checked = Boolean(settings.allowAutoCreateUser);
  };

  const renderAll = () => {
    renderProfileSelect();
    renderProfilesTable();
    renderSummary();
    renderCapabilities();
    renderSnapshot();
    renderControls();
    renderInstallation();
    renderWebStatus();
    securityUI?.render();
  };

  const updateViewInState = (nextView) => {
    const profiles = state.profiles.map((item) => item.profile.id === nextView.profile.id ? nextView : item);
    setState({ profiles });
  };

  const updateProfileAndSnapshot = (result) => {
    const existingView = currentView();
    if (existingView && result?.profile) {
      updateViewInState({ ...existingView, profile: result.profile });
      setState({ capabilities: result.profile.capabilities || state.capabilities });
    }
    if (result?.snapshot) setState({ snapshot: result.snapshot });
    renderAll();
  };

  const loadProfiles = async (preferredProfileId = state.selectedProfileId) => {
    clearError();
    const profiles = await api.getProfiles();
    const selectedProfileId = profiles.some((item) => item.profile.id === preferredProfileId)
      ? preferredProfileId
      : profiles[0]?.profile.id || "";
    setState({ profiles, selectedProfileId });
    if (!selectedProfileId) securityUI?.reset();
    renderAll();
    if (selectedProfileId) await selectProfile(selectedProfileId, false);
  };

  const loadWebConsole = async (populateForm = true) => {
    const [installation, webStatus] = await Promise.all([
      api.getInstallation(),
      api.getWebConsole(),
    ]);
    setState({ installation, webStatus });
    renderInstallation();
    renderWebStatus();
    if (populateForm) populateWebForm();
  };

  const selectProfile = async (profileId, refreshList = true) => {
    if (!profileId) return;
    clearError();
    if (state.unsubscribe) state.unsubscribe();
    setState({ selectedProfileId: profileId, snapshot: null, capabilities: null, unsubscribe: null });
    securityUI?.reset(profileId);
    renderAll();

    try {
      const [viewResult, capabilityResult, snapshotResult] = await Promise.allSettled([
        api.getProfile(profileId),
        api.getCapabilities(profileId),
        api.getSnapshot(profileId),
      ]);
      if (state.selectedProfileId !== profileId) return;
      if (viewResult.status === "fulfilled") updateViewInState(viewResult.value);
      if (capabilityResult.status === "fulfilled") setState({ capabilities: capabilityResult.value });
      if (snapshotResult.status === "fulfilled") setState({ snapshot: snapshotResult.value });
      renderAll();
      securityUI?.load(profileId).catch((error) => showError(error, false));

      const unsubscribe = await api.subscribe(
        profileId,
        (snapshot) => {
          if (state.selectedProfileId !== profileId) return;
          setState({ snapshot });
          const view = currentView();
          if (view?.instance && snapshot?.state && view.instance.status !== snapshot.state) {
            updateViewInState({
              ...view,
              instance: { ...view.instance, status: snapshot.state },
            });
          }
          renderAll();
        },
        (error) => {
          if (state.selectedProfileId === profileId) showError(error, false);
        },
      );
      if (state.selectedProfileId === profileId) setState({ unsubscribe });
      else unsubscribe();
      if (refreshList && viewResult.status !== "fulfilled") await loadProfiles(profileId);
    } catch (error) {
      showError(error);
    }
  };

  const runLifecycle = async (operation) => {
    const profileId = state.selectedProfileId;
    if (!profileId || state.isBusy) return;
    setBusy(true);
    clearError();
    try {
      const handlers = {
        start: () => api.startInstance(profileId),
        stop: () => api.stopInstance(profileId),
        restart: () => api.restartInstance(profileId),
      };
      const nextView = await handlers[operation]();
      updateViewInState(nextView);
      renderAll();
      const label = operation === "start" ? "启动" : operation === "stop" ? "停止" : "重启";
      api.notify("success", `${currentProfile()?.name || "EasyTier"} ${label}请求已完成`);
      announce(`${label}操作完成`);
      window.setTimeout(() => selectProfile(profileId, false), 500);
    } catch (error) {
      showError(error);
    } finally {
      setBusy(false);
    }
  };

  const installEasyTier = async () => {
    if (state.isBusy) return;
    setBusy(true);
    clearError();
    try {
      const force = byId("installEasyTierButton").dataset.force === "true";
      const result = await api.installRecommended(force);
      setState({ installation: result.installation, webStatus: result.web });
      populateWebForm();
      renderInstallation();
      renderWebStatus();
      api.notify("success", `EasyTier ${result.installation?.installation?.version || "推荐版本"} 已安装`);
      announce("EasyTier 推荐版本安装完成");
    } catch (error) {
      showError(error);
    } finally {
      setBusy(false);
    }
  };

  const saveWebSettings = async (event) => {
    event.preventDefault();
    if (state.isBusy) return;
    const form = event.currentTarget;
    const data = new FormData(form);
    const errorElement = byId("webSettingsError");
    if (!form.checkValidity()) {
      errorElement.textContent = "请检查 EasyTier Web 必填项、URL 与端口格式。";
      errorElement.hidden = false;
      form.reportValidity();
      return;
    }
    const settings = {
      binaryPath: String(data.get("binaryPath") || "").trim(),
      apiServerAddress: String(data.get("apiServerAddress") || "").trim(),
      apiServerPort: Number(data.get("apiServerPort")),
      apiHost: String(data.get("apiHost") || "").trim(),
      configServerProtocol: String(data.get("configServerProtocol") || "udp"),
      configServerPort: Number(data.get("configServerPort")),
      autoStart: data.get("autoStart") === "on",
      disableRegistration: data.get("disableRegistration") === "on",
      allowAutoCreateUser: data.get("allowAutoCreateUser") === "on",
    };

    errorElement.hidden = true;
    setBusy(true);
    clearError();
    try {
      const webStatus = await api.updateWebConsole(settings, true);
      setState({ webStatus });
      populateWebForm();
      renderWebStatus();
      api.notify("success", "EasyTier Web 配置已保存并应用");
      announce("EasyTier Web 配置已保存");
    } catch (error) {
      errorElement.textContent = describeError(error);
      errorElement.hidden = false;
    } finally {
      setBusy(false);
    }
  };

  const runWebLifecycle = async (operation) => {
    if (state.isBusy) return;
    setBusy(true);
    clearError();
    try {
      const handlers = {
        start: () => api.startWebConsole(),
        stop: () => api.stopWebConsole(),
        restart: () => api.restartWebConsole(),
      };
      const webStatus = await handlers[operation]();
      setState({ webStatus });
      renderWebStatus();
      const label = operation === "start" ? "启动" : operation === "stop" ? "停止" : "重启";
      api.notify("success", `EasyTier Web ${label}操作已完成`);
      announce(`EasyTier Web ${label}操作已完成`);
      window.setTimeout(() => loadWebConsole(false).catch((error) => showError(error, false)), 800);
    } catch (error) {
      showError(error);
    } finally {
      setBusy(false);
    }
  };

  const openModal = (modal) => {
    const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
    document.querySelector(".app-shell")?.setAttribute("inert", "");
    document.body.classList.add("modal-open");
    modal.hidden = false;
    activeModal = { modal, previousFocus };
    window.requestAnimationFrame(() => {
      modal.classList.add("is-visible");
      modal.querySelector("input:not([type='hidden']), button, select, textarea")?.focus();
    });
  };

  const closeModal = (modal) => {
    modal.classList.remove("is-visible");
    modal.querySelectorAll('input[type="password"]').forEach((input) => {
      input.value = "";
    });
    const previousFocus = activeModal?.modal === modal ? activeModal.previousFocus : null;
    if (activeModal?.modal === modal) activeModal = null;
    window.setTimeout(() => {
      modal.hidden = true;
      document.body.classList.remove("modal-open");
      document.querySelector(".app-shell")?.removeAttribute("inert");
      previousFocus?.focus();
    }, 160);
  };

  const openProfileModal = (profileId = "") => {
    const profile = state.profiles.find((item) => item.profile.id === profileId)?.profile || null;
    const form = byId("profileForm");
    resetForm(form);
    byId("profileFormError").hidden = true;
    byId("profileModalTitle").textContent = profile ? "编辑 Profile" : "新建 Profile";
    byId("profileId").value = profile?.id || "";
    byId("profileName").value = profile?.name || "";
    byId("profilePreset").value = profile?.preset || "game-node";
    byId("networkName").value = profile?.networkName || "";
    byId("hostname").value = profile?.settings?.hostname || "";
    byId("corePath").value = profile?.binary?.corePath || state.installation?.installation?.corePath || "easytier-core";
    byId("cliPath").value = profile?.binary?.cliPath || state.installation?.installation?.cliPath || "";
    byId("networkSecret").value = "";
    byId("networkSecret").required = !profile;
    byId("peerUris").value = (profile?.settings?.peers || []).map((peer) => peer.uri).join("\n");
    byId("autoStart").checked = Boolean(profile?.autoStart);
    openModal(byId("profileModal"));
  };

  const saveProfile = async (event) => {
    event.preventDefault();
    const form = event.currentTarget;
    const data = new FormData(form);
    const id = String(data.get("id") || "");
    const existing = state.profiles.find((item) => item.profile.id === id)?.profile || null;
    const requiredFields = [
      ["name", "Profile 名称"],
      ["networkName", "网络名称"],
      ["hostname", "节点主机名"],
      ["corePath", "easytier-core 路径"],
    ];
    const missingFields = requiredFields
      .filter(([key]) => !String(data.get(key) || "").trim())
      .map(([, label]) => label);
    const errorElement = byId("profileFormError");
    if (missingFields.length > 0) {
      errorElement.textContent = `请填写：${missingFields.join("、")}。`;
      errorElement.hidden = false;
      return;
    }

    const peers = String(data.get("peerUris") || "")
      .split(/\r?\n/)
      .map((uri) => uri.trim())
      .filter(Boolean)
      .map((uri) => existing?.settings?.peers?.find((peer) => peer.uri === uri) || { uri });
    const binary = {
      corePath: String(data.get("corePath")).trim(),
      ...(String(data.get("cliPath") || "").trim() ? { cliPath: String(data.get("cliPath")).trim() } : {}),
    };
    const profile = existing
      ? {
          ...existing,
          name: String(data.get("name")).trim(),
          preset: String(data.get("preset")),
          networkName: String(data.get("networkName")).trim(),
          autoStart: data.get("autoStart") === "on",
          binary,
          settings: { ...existing.settings, hostname: String(data.get("hostname")).trim(), peers },
        }
      : {
          name: String(data.get("name")).trim(),
          description: "",
          preset: String(data.get("preset")),
          networkName: String(data.get("networkName")).trim(),
          autoStart: data.get("autoStart") === "on",
          binary,
          settings: { hostname: String(data.get("hostname")).trim(), peers },
        };
    const networkSecret = String(data.get("networkSecret") || "");
    if (!existing && !networkSecret) {
      errorElement.textContent = "新建 Profile 时必须提供网络密钥。";
      errorElement.hidden = false;
      return;
    }
    const secrets = networkSecret ? { networkSecret } : {};

    errorElement.hidden = true;
    setBusy(true);
    try {
      const savedView = existing
        ? await api.updateProfile(existing.id, profile, secrets)
        : await api.createProfile(profile, secrets);
      closeModal(byId("profileModal"));
      api.notify("success", `Profile ${savedView.profile.name} 已保存`);
      await loadProfiles(savedView.profile.id);
    } catch (error) {
      errorElement.textContent = describeError(error);
      errorElement.hidden = false;
    } finally {
      setBusy(false);
    }
  };

  const openConfirm = ({ title, message, action, showDeleteInstance = false }) => {
    byId("confirmTitle").textContent = title;
    byId("confirmMessage").textContent = message;
    byId("deleteInstanceRow").hidden = !showDeleteInstance;
    byId("deleteManagedInstance").checked = true;
    setState({ confirmAction: action });
    openModal(byId("confirmModal"));
    byId("cancelConfirmButton").focus();
  };

  const deleteProfile = (profileId) => {
    const profile = state.profiles.find((item) => item.profile.id === profileId)?.profile;
    if (!profile) return;
    openConfirm({
      title: "删除 Profile",
      message: `将永久删除“${profile.name}”的配置。此操作不可撤销。`,
      showDeleteInstance: true,
      action: async () => {
        await api.deleteProfile(profileId, byId("deleteManagedInstance").checked);
        api.notify("success", `Profile ${profile.name} 已删除`);
        await loadProfiles("");
      },
    });
  };

  const runRuntimeAction = async (action) => {
    const profileId = state.selectedProfileId;
    if (!profileId || state.isBusy) return;
    setBusy(true);
    clearError();
    try {
      const result = await api.runAction(profileId, action);
      updateProfileAndSnapshot(result);
      api.notify("success", "EasyTier 运行时配置已更新");
    } catch (error) {
      showError(error);
    } finally {
      setBusy(false);
    }
  };

  const bindRuntimeForms = () => {
    ["connectorForm", "mappedListenerForm"].forEach((formId) => {
      byId(formId).addEventListener("submit", (event) => {
        event.preventDefault();
        const prefix = formId === "connectorForm" ? "connector" : "mapped-listener";
        const operation = event.submitter?.dataset.action || "add";
        const uri = String(new FormData(event.currentTarget).get("uri") || "").trim();
        if (uri) runRuntimeAction({ type: `${prefix}-${operation}`, uri });
      });
    });

    byId("portForwardForm").addEventListener("submit", (event) => {
      event.preventDefault();
      const data = new FormData(event.currentTarget);
      const operation = event.submitter?.dataset.action || "add";
      const id = String(data.get("id") || "").trim();
      if (!id) return;
      if (operation === "remove") runRuntimeAction({ type: "port-forward-remove", id });
      else runRuntimeAction({
        type: "port-forward-add",
        value: {
          id,
          proto: String(data.get("proto")),
          bindAddr: String(data.get("bindAddr") || "").trim(),
          dstAddr: String(data.get("dstAddr") || "").trim(),
        },
      });
    });

    byId("whitelistForm").addEventListener("submit", (event) => {
      event.preventDefault();
      const data = new FormData(event.currentTarget);
      const protocol = String(data.get("protocol"));
      const values = String(data.get("values") || "").split(",").map((value) => value.trim()).filter(Boolean);
      runRuntimeAction({ type: `${protocol}-whitelist-set`, values });
    });

    byId("loggerForm").addEventListener("submit", (event) => {
      event.preventDefault();
      const level = String(new FormData(event.currentTarget).get("level") || "info");
      runRuntimeAction({ type: "logger-set", value: { console: { level } } });
    });
  };

  const bindEvents = () => {
    document.querySelectorAll("[data-view-target]").forEach((button) => {
      button.addEventListener("click", () => setView(button.dataset.viewTarget));
    });
    byId("profileSelect").addEventListener("change", (event) => selectProfile(event.target.value));
    byId("createProfileButton").addEventListener("click", () => openProfileModal());
    byId("createProfileSecondaryButton").addEventListener("click", () => openProfileModal());
    byId("editCurrentProfileButton").addEventListener("click", () => openProfileModal(state.selectedProfileId));
    byId("profileForm").addEventListener("submit", saveProfile);
    document.querySelectorAll("[data-close-modal]").forEach((button) => {
      button.addEventListener("click", () => {
        const modal = button.closest(".modal-backdrop");
        if (!(modal instanceof HTMLElement)) return;
        if (modal === byId("credentialSecretModal")) securityUI?.clearSecret();
        closeModal(modal);
      });
    });
    byId("startButton").dataset.runtimeControl = "true";
    byId("stopButton").dataset.runtimeControl = "true";
    byId("restartButton").dataset.runtimeControl = "true";
    byId("startButton").addEventListener("click", () => runLifecycle("start"));
    byId("stopButton").addEventListener("click", () => runLifecycle("stop"));
    byId("restartButton").addEventListener("click", () => runLifecycle("restart"));
    byId("refreshButton").addEventListener("click", () => Promise.all([
      loadProfiles(state.selectedProfileId),
      loadWebConsole(false),
    ]).catch(showError));
    byId("webRefreshButton").addEventListener("click", () => loadWebConsole(true).catch(showError));
    byId("installEasyTierButton").addEventListener("click", installEasyTier);
    byId("webSettingsForm").addEventListener("submit", saveWebSettings);
    byId("webStartButton").addEventListener("click", () => runWebLifecycle("start"));
    byId("webStopButton").addEventListener("click", () => runWebLifecycle("stop"));
    byId("webRestartButton").addEventListener("click", () => runWebLifecycle("restart"));
    byId("webOpenButton").addEventListener("click", (event) => {
      if (event.currentTarget.getAttribute("aria-disabled") === "true") event.preventDefault();
    });
    byId("copyWebConnectionButton").addEventListener("click", async () => {
      try {
        await navigator.clipboard.writeText(byId("webConnectionUri").value);
        announce("Core 配置服务器 URI 已复制");
        api.notify("success", "Core 配置服务器 URI 已复制");
      } catch {
        showError(new Error("无法复制连接 URI，请检查浏览器权限"), false);
      }
    });
    byId("refreshCapabilitiesButton").addEventListener("click", async () => {
      if (!state.selectedProfileId) return;
      setBusy(true);
      try {
        const capabilities = await api.getCapabilities(state.selectedProfileId, true);
        setState({ capabilities });
        await loadProfiles(state.selectedProfileId);
        announce("能力检测已刷新");
      } catch (error) {
        showError(error);
      } finally {
        setBusy(false);
      }
    });
    byId("profilesTableBody").addEventListener("click", (event) => {
      const button = event.target.closest("[data-profile-action]");
      if (!button) return;
      const profileId = button.dataset.profileId;
      if (button.dataset.profileAction === "select") selectProfile(profileId);
      if (button.dataset.profileAction === "edit") openProfileModal(profileId);
      if (button.dataset.profileAction === "delete") deleteProfile(profileId);
    });
    byId("cancelConfirmButton").addEventListener("click", () => closeModal(byId("confirmModal")));
    byId("acceptConfirmButton").addEventListener("click", async () => {
      const action = state.confirmAction;
      if (!action) return;
      byId("acceptConfirmButton").disabled = true;
      try {
        await action();
        closeModal(byId("confirmModal"));
        setState({ confirmAction: null });
      } catch (error) {
        showError(error);
      } finally {
        byId("acceptConfirmButton").disabled = false;
      }
    });
    byId("copyDiagnosticsButton").addEventListener("click", async () => {
      try {
        await navigator.clipboard.writeText(byId("rawSnapshot").textContent || "{}");
        announce("诊断信息已复制");
        api.notify("success", "诊断信息已复制");
      } catch (error) {
        showError(new Error("无法复制诊断信息，请检查浏览器权限"), false);
      }
    });
    bindRuntimeForms();

    document.addEventListener("keydown", (event) => {
      if (!activeModal) {
        if (event.key === "Escape") api.closePlugin();
        return;
      }
      if (event.key === "Escape") {
        event.preventDefault();
        if (activeModal.modal === byId("credentialSecretModal")) securityUI?.clearSecret();
        if (activeModal.modal === byId("confirmModal")) closeModal(byId("confirmModal"));
        else closeModal(activeModal.modal);
        return;
      }
      if (event.key !== "Tab") return;
      const focusable = [...activeModal.modal.querySelectorAll("button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex='0']")];
      if (focusable.length === 0) return;
      const first = focusable[0];
      const last = focusable[focusable.length - 1];
      if (event.shiftKey && document.activeElement === first) {
        event.preventDefault();
        last.focus();
      } else if (!event.shiftKey && document.activeElement === last) {
        event.preventDefault();
        first.focus();
      }
    });
  };

  const initialize = async () => {
    securityUI = window.createEasyTierSecurityUI({
      api,
      byId,
      createElement,
      getContext: () => ({
        profileId: state.selectedProfileId,
        profile: currentProfile(),
        instance: currentInstance(),
        capabilities: state.capabilities || currentProfile()?.capabilities || null,
        isBusy: state.isBusy,
      }),
      updateProfileView: (view) => {
        updateViewInState(view);
        setState({ capabilities: view.profile?.capabilities || state.capabilities });
        renderAll();
      },
      resetForm,
      setBusy,
      showError,
      announce,
      openModal,
      openConfirm,
      notify: (type, message) => api.notify(type, message),
    });
    bindEvents();
    const requestedView = new URLSearchParams(window.location.search).get("view");
    if (requestedView && Object.prototype.hasOwnProperty.call(views, requestedView)) setView(requestedView);
    securityUI.bind();
    renderAll();
    try {
      await api.ready();
      byId("bridgeHealthDot").classList.add("is-online");
      byId("bridgeHealthText").textContent = "已连接 GSM3 面板";
      await Promise.all([loadProfiles(), loadWebConsole(true)]);
      api.notify("success", "EasyTier 管理控制台已就绪");
    } catch (error) {
      byId("bridgeHealthText").textContent = "面板认证失败";
      showError(error, false);
    }
  };

  initialize();
})();