import { t, tf, el, apiGet, apiPost, assertSkillMutationOk, shortText, renderPageShell, rowActions } from "../core.js";

function skillsFold(summaryText, innerNodes) {
  const det = el("details", { class: "details plugins-fold" });
  det.appendChild(el("summary", { text: summaryText }));
  const inner = el("div", { class: "plugins-fold__inner" });
  inner.addEventListener("click", (e) => e.stopPropagation());
  (innerNodes || []).forEach((n) => inner.appendChild(n));
  det.appendChild(inner);
  return det;
}

async function renderSkills() {
  document.querySelectorAll("[data-skill-modal]").forEach((n) => n.remove());
  document.querySelectorAll("body > .row-actions__menu, body > .chat-sess-menu-pop.row-actions__menu").forEach((n) => n.remove());
  const SKILL_AUDIT_RETRYABLE_ONLY_KEY = "ops_admin_skill_audit_retryable_only";
  const status = el("div", { class: "muted", text: "" });
  const rowsState = { items: [] };
  const auditState = { items: [] };
  const nameInp = el("input", { class: "input", placeholder: t("skills.ph.name") });
  const descInp = el("input", { class: "input", placeholder: t("skills.ph.description") });
  const bodyInp = el("textarea", { class: "input", rows: "4", placeholder: t("skills.ph.body") });
  const regInp = el("input", { class: "input", placeholder: t("skills.ph.registry") });
  const localDirInp = el("input", { class: "input", placeholder: t("skills.ph.localDir") });
  const marketStatus = el("div", { class: "muted", text: "" });
  const skillModeStatus = el("div", { class: "muted", text: "" });
  const skillPromptModeCb = el("input", { type: "checkbox" });
  const marketQ = el("input", { class: "input", placeholder: t("skills.ph.marketSearch") });
  const marketLimitInp = el("input", {
    class: "input",
    placeholder: t("skills.ph.limit"),
    value: "40",
    style: "max-width:120px;",
  });
  const marketTbody = el("tbody");
  const marketDetailPre = el("pre", { class: "muted pre", text: "" });
  let marketItems = [];

  const loadSkillMode = async () => {
    try {
      const r = await apiGet("/admin/api/skills/mode");
      skillPromptModeCb.checked = !!r.prompt_in_system;
      skillModeStatus.textContent = "";
    } catch (e) {
      skillModeStatus.textContent = `mode: ${String(e && e.message ? e.message : e)}`;
    }
  };
  const saveSkillMode = async () => {
    skillModeStatus.textContent = `${t("chat.loading")}...`;
    try {
      const r = await apiPost("/admin/api/skills/mode", {
        prompt_in_system: !!skillPromptModeCb.checked,
        market_provider: "clawhub",
      });
      skillPromptModeCb.checked = !!r.prompt_in_system;
      skillModeStatus.textContent = `saved: prompt=${String(!!r.prompt_in_system)} market=clawhub`;
    } catch (e) {
      skillModeStatus.textContent = `mode: ${String(e && e.message ? e.message : e)}`;
    }
  };

  const loadMarket = async (q) => {
    const qq = String(q || "").trim();
    const lim = Math.max(1, Math.min(200, parseInt(String(marketLimitInp.value || "40"), 10) || 40));
    marketStatus.textContent = `${t("chat.loading")}...`;
    try {
      const resp = await apiGet(
        `/admin/api/skills/market/search?q=${encodeURIComponent(qq)}&limit=${encodeURIComponent(String(lim))}`,
      );
      marketItems = Array.isArray(resp.items) ? resp.items : [];
      marketStatus.textContent = `results: ${marketItems.length}`;
      repaintMarket();
    } catch (e) {
      marketItems = [];
      marketStatus.textContent = `${t("common.error")}: ${String(e && e.message ? e.message : e)}`;
      repaintMarket();
    }
  };

  const loadMarketDetail = async (slug) => {
    const s = String(slug || "").trim();
    if (!s) return;
    marketDetailPre.textContent = `${t("chat.loading")}...`;
    try {
      const resp = await apiGet(`/admin/api/skills/market/detail?slug=${encodeURIComponent(s)}`);
      marketDetailPre.textContent = JSON.stringify(resp.detail || {}, null, 2);
    } catch (e) {
      marketDetailPre.textContent = `${t("common.error")}: ${String(e && e.message ? e.message : e)}`;
    }
  };

  const installFromMarket = async (slug, version) => {
    const s = String(slug || "").trim();
    if (!s) return;
    marketStatus.textContent = `installing: ${s}...`;
    openSkillInstallModal(`Installing ${s}...`);
    try {
      const r = await apiPost("/admin/api/skills/market/install", {
        slug: s,
        version: version ? String(version) : undefined,
        overwrite: false,
      });
      assertSkillMutationOk(r, "Market install failed");
      status.textContent = `install-market success: ${JSON.stringify(r.result || {})}`;
      marketStatus.textContent = `installed: ${s}`;
      await refreshSkillsState();
      finishSkillInstallModal(true, `${s} installed successfully.`);
    } catch (e) {
      status.textContent = String(e && e.message ? e.message : e);
      marketStatus.textContent = `install failed: ${s}`;
      finishSkillInstallModal(false, `Install failed: ${String(e && e.message ? e.message : e)}`);
    }
  };

  const repaintMarket = () => {
    marketTbody.innerHTML = "";
    (marketItems || []).forEach((x) => {
      const slug = String(x.slug || "");
      const ver = String(x.version || "");
      const btnDetail = el("button", {
        class: "btn btn--small",
        text: t("skills.action.detail"),
        onclick: async () => await loadMarketDetail(slug),
      });
      const btnInstall = el("button", {
        class: "btn btn--small btn--primary",
        text: t("skills.action.install"),
        onclick: async () => await installFromMarket(slug, ver),
      });
      marketTbody.appendChild(
        el("tr", {}, [
          el("td", { text: slug }),
          el("td", { text: String(x.name || "") }),
          el("td", { text: ver }),
          el("td", { text: shortText(String(x.description || ""), 80) }),
          el("td", { class: "table__cell--actions", "data-copy-disabled": "1" }, [
            el("div", { class: "table__cell-actions" }, [btnInstall, btnDetail]),
          ]),
        ]),
      );
    });
  };

  const btnMarketSearch = el("button", {
    class: "btn",
    text: t("skills.action.search"),
    onclick: async () => await loadMarket(marketQ.value),
  });
  const btnMarketLatest = el("button", {
    class: "btn",
    text: t("skills.action.latest"),
    onclick: async () => await loadMarket(""),
  });

  // --- Binding ---
  const skillBindingState = { roles: [], names: [], mapping: {}, enabled: false };
  const skillBindingStatus = el("div", { class: "muted", text: "" });
  const skillBindingPersistHint = el("div", {
    class: "muted",
    style: "margin:6px 0;line-height:1.5;",
    text: t("skills.hint.bindingPersist"),
  });
  const skillBindingEnvHint = el("div", {
    class: "muted",
    style: "margin:6px 0;line-height:1.5;display:none;",
  });
  const skillEffectiveState = { items: [] };
  const skillBindingEnabledCb = el("input", { type: "checkbox" });
  const skillRoleSelect = el("select", { class: "input" }, []);
  const skillBindingListWrap = el("div");
  const skillBindingDashTbody = el("tbody");
  const skillEffectiveTbody = el("tbody");

  const renderSkillBindingDashboard = () => {
    skillBindingDashTbody.innerHTML = "";
    const roles = Array.isArray(skillBindingState.roles) ? skillBindingState.roles : [];
    const mapping = skillBindingState.mapping && typeof skillBindingState.mapping === "object" ? skillBindingState.mapping : {};
    roles.forEach((role) => {
      const direct = new Set(Array.isArray(mapping[role]) ? mapping[role].map((x) => String(x)) : []);
      const effective = new Set(Array.from(direct));
      skillBindingDashTbody.appendChild(
        el("tr", {}, [
          el("td", { text: role }),
          el("td", { text: String(direct.size) }),
          el("td", { text: String(effective.size) }),
        ]),
      );
    });
    if (!roles.length) {
      skillBindingDashTbody.appendChild(el("tr", {}, [el("td", { text: "-", colspan: "3" })]));
    }
  };

  const renderSkillEffectiveDashboard = () => {
    skillEffectiveTbody.innerHTML = "";
    const rows = Array.isArray(skillEffectiveState.items) ? skillEffectiveState.items : [];
    rows.forEach((x) => {
      const names = Array.isArray(x.names_preview)
        ? x.names_preview.map((v) => String(v || "").trim()).filter(Boolean)
        : [];
      const docsOnlyNames = Array.isArray(x.docs_only_names_preview)
        ? x.docs_only_names_preview.map((v) => String(v || "").trim()).filter(Boolean)
        : [];
      const previewText = names.slice(0, 6).join(", ");
      const namesCell = names.length
        ? el("details", {}, [
            el("summary", { text: previewText || "(empty)" }),
            el("div", { class: "muted u-mt-4 u-wrap-lh", text: names.join(", ") }),
          ])
        : el("span", { class: "muted", text: "-" });
      const docsOnlyCell = docsOnlyNames.length
        ? el("details", {}, [
            el("summary", { text: docsOnlyNames.slice(0, 4).join(", ") }),
            el("div", { class: "muted u-mt-4 u-wrap-lh", text: docsOnlyNames.join(", ") }),
          ])
        : el("span", { class: "muted", text: "-" });
      skillEffectiveTbody.appendChild(
        el("tr", {}, [
          el("td", { text: String(x.role || "") }),
          el("td", { text: String(x.total || 0) }),
          el("td", { text: String(x.workspace_total || 0) }),
          el("td", { text: String(x.workspace_direct || 0) }),
          el("td", { text: String(x.workspace_resolved_tool_match || 0) }),
          el("td", { text: String(x.workspace_docs_only || 0) }),
          el("td", { text: String(x.mcp_total || 0) }),
          el("td", { text: String(x.tool_total || 0) }),
          el("td", {}, [docsOnlyCell]),
          el("td", {}, [namesCell]),
        ]),
      );
    });
    if (!rows.length) {
      skillEffectiveTbody.appendChild(el("tr", {}, [el("td", { text: "-", colspan: "10" })]));
    }
  };

  const loadSkillEffective = async () => {
    try {
      const r = await apiGet("/admin/api/skills/effective");
      skillEffectiveState.items = Array.isArray(r.items) ? r.items : [];
      renderSkillEffectiveDashboard();
    } catch (e) {
      skillEffectiveState.items = [];
      renderSkillEffectiveDashboard();
      skillBindingStatus.textContent = `effective: ${String(e && e.message ? e.message : e)}`;
    }
  };

  const renderSkillBindingList = () => {
    const current = String(skillRoleSelect.value || "");
    const draft = skillBindingState.mapping;
    const existing = Array.isArray(draft[current]) ? draft[current].map((x) => String(x)) : [];
    const selected = new Set(existing);
    skillBindingListWrap.innerHTML = "";
    const skills =
      skillBindingState.names.length > 0
        ? skillBindingState.names
        : Array.isArray(rowsState.items)
          ? rowsState.items.map((x) => String(x.name || "").trim()).filter(Boolean)
          : [];
    if (!skills.length) {
      skillBindingListWrap.appendChild(el("div", { class: "muted", text: t("skills.hint.noSkills") }));
      return;
    }
    skills.forEach((nm) => {
      const cb = el("input", { type: "checkbox" });
      cb.checked = selected.has(nm);
      cb.addEventListener("change", () => {
        const prev = new Set(Array.isArray(draft[current]) ? draft[current].map((x) => String(x)) : []);
        if (cb.checked) prev.add(nm);
        else prev.delete(nm);
        draft[current] = Array.from(prev);
      });
      skillBindingListWrap.appendChild(el("label", { class: "row u-row-center" }, [cb, el("span", { text: nm })]));
    });
  };

  const applyBindingEnvHint = (r) => {
    if (r && r.enabled_env_present) {
      skillBindingEnvHint.style.display = "block";
      const stored = !!r.enabled_stored;
      const eff = !!r.enabled;
      skillBindingEnvHint.textContent = tf("skills.hint.bindingEnv", {
        stored: String(stored),
        effective: String(eff),
      });
    } else {
      skillBindingEnvHint.style.display = "none";
      skillBindingEnvHint.textContent = "";
    }
  };

  const loadSkillBinding = async () => {
    try {
      const r = await apiGet("/admin/api/skills/binding");
      skillBindingState.roles = Array.isArray(r.available_roles) ? r.available_roles : [];
      skillBindingState.names = (Array.isArray(r.installed_skills) ? r.installed_skills : [])
        .map((x) => String(x.name || "").trim())
        .filter(Boolean);
      skillBindingState.mapping = r.mapping && typeof r.mapping === "object" ? { ...r.mapping } : {};
      skillBindingState.enabled = !!r.enabled;
      skillBindingEnabledCb.checked = skillBindingState.enabled;
      applyBindingEnvHint(r);
      skillRoleSelect.innerHTML = "";
      skillBindingState.roles.forEach((role) => {
        skillRoleSelect.appendChild(el("option", { value: role, text: role }));
      });
      if (skillBindingState.roles.length && !skillRoleSelect.value) {
        skillRoleSelect.value = skillBindingState.roles[0];
      }
      renderSkillBindingList();
      renderSkillBindingDashboard();
      await loadSkillEffective();
      skillBindingStatus.textContent = "";
    } catch (e) {
      skillBindingStatus.textContent = `binding: ${String(e && e.message ? e.message : e)}`;
      skillBindingListWrap.innerHTML = "";
    }
  };
  skillRoleSelect.addEventListener("change", () => renderSkillBindingList());

  const btnSaveSkillBinding = el("button", {
    class: "btn btn--primary",
    text: t("skills.action.saveBinding"),
    onclick: async () => {
      try {
        const r = await apiPost("/admin/api/skills/binding", {
          enabled: !!skillBindingEnabledCb.checked,
          mapping: skillBindingState.mapping,
        });
        skillBindingState.mapping = r.mapping && typeof r.mapping === "object" ? { ...r.mapping } : {};
        skillBindingState.enabled = !!r.enabled;
        skillBindingEnabledCb.checked = skillBindingState.enabled;
        applyBindingEnvHint(r);
        skillBindingStatus.textContent = `saved: enabled=${String(r.enabled)}`;
        renderSkillBindingList();
        renderSkillBindingDashboard();
        await loadSkillEffective();
      } catch (e) {
        skillBindingStatus.textContent = String(e && e.message ? e.message : e);
      }
    },
  });

  // --- Diagnostics: internal tools ---
  const internalToolsState = { role: "", available_roles: [], tools: [], skipped_public: [], skipped_expert: [] };
  const lazyLoadState = { internalLoaded: false, llmLoaded: false, selfCheckLoaded: false, skillHealthLoaded: false };
  const internalToolsStatus = el("div", { class: "muted", text: "" });
  const internalRoleSelect = el("select", { class: "input" }, []);
  const internalToolsTbody = el("tbody");
  const internalSkippedPre = el("pre", { class: "muted pre", text: "" });

  const renderInternalTools = () => {
    internalToolsTbody.innerHTML = "";
    const rows = Array.isArray(internalToolsState.tools) ? internalToolsState.tools : [];
    rows.forEach((x) => {
      internalToolsTbody.appendChild(
        el("tr", {}, [
          el("td", { text: String(x.source || "") }),
          el("td", { text: String(x.name || "") }),
          el("td", { text: shortText(String(x.description || ""), 120) }),
          el("td", { text: String((Array.isArray(x.tags) ? x.tags.join(", ") : x.tags) || "") }),
          el("td", { text: String(x.read_only ? "1" : "0") }),
          el("td", { text: String(x.risk_level || "") }),
        ]),
      );
    });
    if (!rows.length) {
      internalToolsTbody.appendChild(el("tr", {}, [el("td", { text: "-", colspan: "6" })]));
    }
    internalSkippedPre.textContent = JSON.stringify(
      {
        skipped_public: Array.isArray(internalToolsState.skipped_public) ? internalToolsState.skipped_public : [],
        skipped_expert: Array.isArray(internalToolsState.skipped_expert) ? internalToolsState.skipped_expert : [],
      },
      null,
      2,
    );
  };

  const loadInternalToolsPreview = async (role) => {
    const r = String(role || internalRoleSelect.value || "").trim();
    if (!r) return;
    internalToolsStatus.textContent = `${t("chat.loading")}...`;
    try {
      const resp = await apiGet(`/admin/api/tools/internal/preview?role=${encodeURIComponent(r)}`);
      internalToolsState.role = String(resp.role || "");
      internalToolsState.available_roles = Array.isArray(resp.available_roles) ? resp.available_roles : [];
      internalToolsState.tools = Array.isArray(resp.tools) ? resp.tools : [];
      internalToolsState.skipped_public = Array.isArray(resp.skipped_public) ? resp.skipped_public : [];
      internalToolsState.skipped_expert = Array.isArray(resp.skipped_expert) ? resp.skipped_expert : [];
      internalToolsStatus.textContent = `role=${internalToolsState.role} tools=${internalToolsState.tools.length}`;
      renderInternalTools();
    } catch (e) {
      internalToolsState.tools = [];
      internalToolsStatus.textContent = `preview: ${String(e && e.message ? e.message : e)}`;
      renderInternalTools();
    }
  };

  const btnInternalPreview = el("button", {
    class: "btn btn--primary",
    text: t("skills.action.preview"),
    onclick: async () => await loadInternalToolsPreview(internalRoleSelect.value),
  });

  const internalToolsInner = [
    el("div", { class: "muted u-muted-block-lg", text: t("skills.hint.internalTools") }),
    internalToolsStatus,
    el("div", { class: "row u-row-wrap-mt" }, [
      el("label", { text: t("skills.label.role") }),
      internalRoleSelect,
      btnInternalPreview,
      el("button", {
        class: "btn",
        text: t("skills.action.clearCache"),
        onclick: async () => {
          try {
            await apiPost("/admin/api/tools/internal/reload", {});
            internalToolsStatus.textContent = "cache cleared";
            await loadInternalToolsPreview(internalRoleSelect.value);
          } catch (e) {
            internalToolsStatus.textContent = `reload: ${String(e && e.message ? e.message : e)}`;
          }
        },
      }),
    ]),
    el("div", { class: "table-wrap u-mt-8" }, [
      el("table", { class: "table table--compact" }, [
        el("thead", {}, [
          el("tr", {}, [
            el("th", { text: t("skills.col.source") }),
            el("th", { text: t("skills.col.name") }),
            el("th", { text: t("skills.col.description") }),
            el("th", { text: t("skills.col.tags") }),
            el("th", { text: t("skills.col.readOnly") }),
            el("th", { text: t("skills.col.risk") }),
          ]),
        ]),
        internalToolsTbody,
      ]),
    ]),
    el("div", { class: "muted u-mt-8", text: t("skills.hint.skippedModules") }),
    internalSkippedPre,
  ];
  const internalToolsBox = skillsFold(t("skills.fold.internalTools"), internalToolsInner);

  // --- Diagnostics: LLM tools ---
  const llmToolsState = { role: "", tools_raw: [], tools_wired: [], removed_mcp_names: [], meta: {} };
  const llmToolsStatus = el("div", { class: "muted", text: "" });
  const llmRoleSelect = el("select", { class: "input" }, []);
  const llmTracePlanCb = el("input", { type: "checkbox" });
  const llmToolsTbody = el("tbody");
  const llmRemovedPre = el("pre", { class: "muted pre", text: "" });
  const llmModeBadge = el("span", { class: "badge badge--mode-restricted", text: "restricted" });
  const llmDiffPre = el("pre", { class: "muted pre", text: "" });
  const llmDiffTbody = el("tbody");
  const llmDiffTableWrap = el("div", { class: "table-wrap u-mt-8" }, [
    el("table", { class: "table table--compact" }, [
      el("thead", {}, [
        el("tr", {}, [
          el("th", { text: t("skills.col.type") }),
          el("th", { text: t("skills.col.name") }),
          el("th", { text: t("skills.col.kind") }),
          el("th", { text: t("skills.col.details") }),
        ]),
      ]),
      llmDiffTbody,
    ]),
  ]);

  // --- Diagnostics: tools self-check ---
  const selfCheckStatus = el("div", { class: "muted", text: "" });
  const selfCheckSummary = el("div", { class: "muted", text: "" });
  const selfCheckTbody = el("tbody");
  const selfCheckState = { data: null };

  const renderSelfCheck = (data) => {
    const body = data && typeof data === "object" ? data : {};
    selfCheckState.data = body;
    const summary = body.summary && typeof body.summary === "object" ? body.summary : {};
    const rolesTotal = Number(body.roles_total || 0);
    const totalInternal = Number(summary.total_internal_tools || 0);
    const totalWired = Number(summary.total_wired_tools || 0);
    const items = Array.isArray(body.items) ? body.items : [];
    selfCheckSummary.textContent = `roles=${rolesTotal} internal=${totalInternal} wired=${totalWired}`;
    selfCheckTbody.innerHTML = "";
    items.forEach((x) => {
      const removedMcp = Number(x.removed_mcp_total || 0);
      const wired = Number(x.wired_count || 0);
      const mode = String(x.role_mode || "restricted");
      let health = "ok";
      if (mode === "forbidden" && wired === 0) health = "forbidden";
      else if (mode === "unrestricted") health = "unrestricted";
      else if (removedMcp > 0) health = "warning";
      const badgeCls =
        health === "warning"
          ? "badge badge--mode-restricted"
          : health === "forbidden"
            ? "badge badge--bad"
            : health === "unrestricted"
              ? "badge badge--mode-unrestricted"
              : "badge badge--ok";
      selfCheckTbody.appendChild(
        el("tr", {}, [
          el("td", { text: String(x.role || "") }),
          el("td", {}, [el("span", { class: badgeCls, text: health })]),
          el("td", { text: String(x.role_mode || "") }),
          el("td", { text: String(x.internal_count || 0) }),
          el("td", { text: String(x.raw_count || 0) }),
          el("td", { text: String(x.wired_count || 0) }),
          el("td", { text: String(x.removed_mcp_total || 0) }),
        ]),
      );
    });
    if (!items.length) selfCheckTbody.appendChild(el("tr", {}, [el("td", { text: "-", colspan: "8" })]));
  };

  const runSelfCheck = async () => {
    selfCheckStatus.textContent = `${t("chat.loading")}...`;
    try {
      const resp = await apiGet("/admin/api/tools/self-check");
      renderSelfCheck(resp);
      selfCheckStatus.textContent = "self-check complete";
    } catch (e) {
      selfCheckStatus.textContent = `self-check: ${String(e && e.message ? e.message : e)}`;
      renderSelfCheck({});
    }
  };

  const exportSelfCheckJson = () => {
    const data = selfCheckState.data;
    if (!data || typeof data !== "object") {
      selfCheckStatus.textContent = "no self-check data to export";
      return;
    }
    try {
      const blob = new Blob([`${JSON.stringify(data, null, 2)}\n`], { type: "application/json;charset=utf-8" });
      const url = URL.createObjectURL(blob);
      const ts = new Date().toISOString().replace(/[:.]/g, "-");
      const a = document.createElement("a");
      a.href = url;
      a.download = `tools-self-check-${ts}.json`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      selfCheckStatus.textContent = "self-check exported";
    } catch (e) {
      selfCheckStatus.textContent = `export failed: ${String(e && e.message ? e.message : e)}`;
    }
  };

  const selfCheckInner = [
    el("div", { class: "muted u-muted-block-lg", text: t("skills.hint.toolsSelfCheck") }),
    selfCheckStatus,
    el("div", { class: "row u-row-center-mt" }, [
      el("button", { class: "btn btn--primary", text: t("skills.action.runSelfCheck"), onclick: runSelfCheck }),
      el("button", { class: "btn", text: t("skills.action.exportSelfCheck"), onclick: exportSelfCheckJson }),
      selfCheckSummary,
    ]),
    el("div", { class: "table-wrap u-mt-8" }, [
      el("table", { class: "table table--compact" }, [
        el("thead", {}, [
          el("tr", {}, [
            el("th", { text: t("skills.col.role") }),
            el("th", { text: t("skills.col.health") }),
            el("th", { text: t("skills.col.mode") }),
            el("th", { text: t("skills.col.internal") }),
            el("th", { text: t("skills.col.raw") }),
            el("th", { text: t("skills.col.wired") }),
            el("th", { text: t("skills.col.removedMcp") }),
          ]),
        ]),
        selfCheckTbody,
      ]),
    ]),
  ];
  const selfCheckBox = skillsFold(t("skills.fold.toolsSelfCheck"), selfCheckInner);

  // --- Diagnostics: skills health ---
  const skillHealthStatus = el("div", { class: "muted", text: "" });
  const skillHealthSummary = el("div", { class: "muted", text: "" });
  const skillHealthClassifyTbody = el("tbody");
  const skillHealthExecTbody = el("tbody");
  const skillHealthFailedOnlyCb = el("input", { type: "checkbox" });
  const skillHealthState = { data: null };

  const renderSkillHealthExecRows = () => {
    const body = skillHealthState.data && typeof skillHealthState.data === "object" ? skillHealthState.data : {};
    const checks = Array.isArray(body.execution_checks) ? body.execution_checks : [];
    const failedOnly = !!skillHealthFailedOnlyCb.checked;
    skillHealthExecTbody.innerHTML = "";
    checks
      .filter((x) => (failedOnly ? !x.ok : true))
      .slice(0, 30)
      .forEach((x) => {
        const ok = !!x.ok;
        const code = String(x.error_code || "");
        const truncated = !!x.output_truncated;
        skillHealthExecTbody.appendChild(
          el("tr", {}, [
            el("td", { text: String(x.name || "") }),
            el("td", {}, [
              ok
                ? el("span", { class: "badge badge--ok", text: "ok" })
                : el("span", { class: "badge badge--bad", text: "fail" }),
            ]),
            el("td", { text: code || "-" }),
            el("td", { text: truncated ? "1" : "0" }),
            el("td", {}, [
              el("button", {
                class: "btn",
                text: t("skills.action.testRunArgs"),
                disabled: !String(x.name || "").trim(),
                onclick: () => {
                  const nm = String(x.name || "").trim();
                  if (!nm) return;
                  openSkillTestRunModal(nm);
                },
              }),
            ]),
          ]),
        );
      });
    if (!skillHealthExecTbody.children.length) {
      skillHealthExecTbody.appendChild(el("tr", {}, [el("td", { text: "-", colspan: "5" })]));
    }
  };

  const renderSkillHealthCheck = (data) => {
    const body = data && typeof data === "object" ? data : {};
    skillHealthState.data = body;
    const counts = body.classification_counts && typeof body.classification_counts === "object" ? body.classification_counts : {};
    const skillsTotal = Number(body.skills_total || 0);
    const execTotal = Number(body.executable_total || 0);
    const checked = Number(body.execution_checked_total || 0);
    skillHealthSummary.textContent = `skills=${skillsTotal} executable=${execTotal} checked=${checked}`;
    skillHealthClassifyTbody.innerHTML = "";
    const countRows = Object.entries(counts).sort((a, b) => Number(b[1] || 0) - Number(a[1] || 0));
    countRows.forEach(([k, v]) => {
      skillHealthClassifyTbody.appendChild(
        el("tr", {}, [el("td", { text: String(k || "") }), el("td", { text: String(Number(v || 0)) })]),
      );
    });
    if (!countRows.length) {
      skillHealthClassifyTbody.appendChild(el("tr", {}, [el("td", { text: "-", colspan: "2" })]));
    }
    renderSkillHealthExecRows();
  };
  skillHealthFailedOnlyCb.addEventListener("change", () => renderSkillHealthExecRows());

  const runSkillHealthCheck = async () => {
    skillHealthStatus.textContent = `${t("chat.loading")}...`;
    try {
      const resp = await apiGet("/admin/api/skills/self-check?include_execution=true");
      renderSkillHealthCheck(resp);
      skillHealthStatus.textContent = "skill self-check complete";
    } catch (e) {
      skillHealthStatus.textContent = `skill self-check: ${String(e && e.message ? e.message : e)}`;
      renderSkillHealthCheck({});
    }
  };

  const exportSkillHealthJson = () => {
    const data = skillHealthState.data;
    if (!data || typeof data !== "object") {
      skillHealthStatus.textContent = "no skills self-check data to export";
      return;
    }
    try {
      const blob = new Blob([`${JSON.stringify(data, null, 2)}\n`], { type: "application/json;charset=utf-8" });
      const url = URL.createObjectURL(blob);
      const ts = new Date().toISOString().replace(/[:.]/g, "-");
      const a = document.createElement("a");
      a.href = url;
      a.download = `skills-self-check-${ts}.json`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      skillHealthStatus.textContent = "skills self-check exported";
    } catch (e) {
      skillHealthStatus.textContent = `export failed: ${String(e && e.message ? e.message : e)}`;
    }
  };

  const skillHealthInner = [
    el("div", { class: "muted u-muted-block-lg", text: t("skills.hint.skillHealth") }),
    skillHealthStatus,
    el("div", { class: "row u-row-center-mt" }, [
      el("button", {
        class: "btn btn--primary",
        text: t("skills.action.runSkillHealth"),
        onclick: runSkillHealthCheck,
      }),
      el("button", {
        class: "btn",
        text: t("skills.action.exportSkillHealth"),
        onclick: exportSkillHealthJson,
      }),
      el("label", { class: "row u-row-center" }, [
        skillHealthFailedOnlyCb,
        el("span", { class: "muted", text: t("skills.action.failedOnly") }),
      ]),
      skillHealthSummary,
    ]),
    el("div", { class: "row", style: "gap:12px;align-items:flex-start;flex-wrap:wrap;margin-top:8px;" }, [
      el("div", { class: "table-wrap", style: "min-width:280px;flex:1;" }, [
        el("div", { class: "muted u-mb-6", text: "classification_counts" }),
        el("table", { class: "table table--compact" }, [
          el("thead", {}, [
            el("tr", {}, [el("th", { text: t("skills.col.code") }), el("th", { text: t("skills.col.count") })]),
          ]),
          skillHealthClassifyTbody,
        ]),
      ]),
      el("div", { class: "table-wrap", style: "min-width:360px;flex:2;" }, [
        el("div", { class: "muted u-mb-6", text: "execution_checks (top 30)" }),
        el("table", { class: "table table--compact" }, [
          el("thead", {}, [
            el("tr", {}, [
              el("th", { text: t("skills.col.skill") }),
              el("th", { text: t("skills.col.status") }),
              el("th", { text: t("skills.col.errorCode") }),
              el("th", { text: t("skills.col.outputTruncated") }),
              el("th", { text: t("skills.col.action") }),
            ]),
          ]),
          skillHealthExecTbody,
        ]),
      ]),
    ]),
  ];
  const skillHealthBox = skillsFold(t("skills.fold.health"), skillHealthInner);

  const _renderLLMToolRows = (tools) => {
    llmToolsTbody.innerHTML = "";
    const rows = Array.isArray(tools) ? tools : [];
    rows.forEach((ent) => {
      const fn = ent && typeof ent === "object" ? ent.function : null;
      const name = fn && typeof fn === "object" ? String(fn.name || "") : "";
      const desc = fn && typeof fn === "object" ? String(fn.description || "") : "";
      const params = fn && typeof fn === "object" ? fn.parameters : null;
      llmToolsTbody.appendChild(
        el("tr", {}, [
          el("td", { text: name }),
          el("td", { text: shortText(desc, 140) }),
          el("td", { text: name.startsWith("mcp__") ? "mcp" : "internal" }),
          el("td", { text: params ? shortText(JSON.stringify(params), 120) : "" }),
        ]),
      );
    });
    if (!rows.length) {
      llmToolsTbody.appendChild(el("tr", {}, [el("td", { text: "-", colspan: "4" })]));
    }
  };

  const loadLLMToolsPreview = async (role) => {
    const r = String(role || llmRoleSelect.value || "").trim();
    if (!r) return;
    llmToolsStatus.textContent = `${t("chat.loading")}...`;
    try {
      const resp = await apiGet(`/admin/api/tools/llm/preview?role=${encodeURIComponent(r)}`);
      llmToolsState.role = String(resp.role || "");
      llmToolsState.tools_raw = Array.isArray(resp.tools_raw) ? resp.tools_raw : [];
      llmToolsState.tools_wired = Array.isArray(resp.tools_wired) ? resp.tools_wired : [];
      llmToolsState.removed_mcp_names = Array.isArray(resp.removed_mcp_names) ? resp.removed_mcp_names : [];
      llmToolsState.meta = resp && typeof resp === "object" ? resp : {};
      const mode = String(resp.role_mode || "restricted");
      llmModeBadge.textContent = mode;
      llmModeBadge.className = `badge badge--mode-${mode}`;
      llmToolsStatus.textContent = `role=${llmToolsState.role} raw=${llmToolsState.tools_raw.length} wired=${llmToolsState.tools_wired.length} mcp_enabled=${String(!!resp.mcp_enabled)}`;
      llmRemovedPre.textContent = JSON.stringify(
        {
          removed_mcp_names: llmToolsState.removed_mcp_names,
          role_mode: resp.role_mode,
          skipped_public: resp.skipped_public || [],
          skipped_expert: resp.skipped_expert || [],
        },
        null,
        2,
      );
      const _toMap = (arr) => {
        const m = new Map();
        (Array.isArray(arr) ? arr : []).forEach((ent) => {
          const fn = ent && typeof ent === "object" ? ent.function : null;
          const nm = fn && typeof fn === "object" ? String(fn.name || "") : "";
          if (!nm) return;
          const desc = fn && typeof fn === "object" ? String(fn.description || "") : "";
          const params = fn && typeof fn === "object" ? fn.parameters : null;
          m.set(nm, { description: desc, parameters: params });
        });
        return m;
      };
      const rawMap = _toMap(llmToolsState.tools_raw);
      const wiredMap = _toMap(llmToolsState.tools_wired);
      const rawNames = Array.from(rawMap.keys());
      const wiredNames = Array.from(wiredMap.keys());
      const rawSet = new Set(rawNames);
      const wiredSet = new Set(wiredNames);
      const removed = rawNames.filter((n) => !wiredSet.has(n)).sort();
      const added = wiredNames.filter((n) => !rawSet.has(n)).sort();
      const changed = [];
      wiredNames.forEach((n) => {
        if (!rawSet.has(n)) return;
        const a = rawMap.get(n) || {};
        const b = wiredMap.get(n) || {};
        const d0 = String(a.description || "");
        const d1 = String(b.description || "");
        const p0 = a.parameters ? JSON.stringify(a.parameters) : "";
        const p1 = b.parameters ? JSON.stringify(b.parameters) : "";
        if (d0 !== d1 || p0 !== p1) changed.push(n);
      });
      llmDiffPre.textContent = JSON.stringify(
        {
          added,
          removed,
          changed,
          counts: {
            raw: rawNames.length,
            wired: wiredNames.length,
            added: added.length,
            removed: removed.length,
            changed: changed.length,
          },
        },
        null,
        2,
      );

      llmDiffTbody.innerHTML = "";
      const _kind = (nm) => (String(nm || "").startsWith("mcp__") ? "mcp" : "internal");
      const _pushRow = (tp, nm, detailEl) => {
        llmDiffTbody.appendChild(
          el("tr", {}, [
            el("td", { text: tp }),
            el("td", { text: nm }),
            el("td", { text: _kind(nm) }),
            el("td", {}, [detailEl]),
          ]),
        );
      };
      const _detailsCompare = (nm) => {
        const a = rawMap.get(nm) || {};
        const b = wiredMap.get(nm) || {};
        const d0 = String(a.description || "");
        const d1 = String(b.description || "");
        const p0 = a.parameters ? JSON.stringify(a.parameters, null, 2) : "";
        const p1 = b.parameters ? JSON.stringify(b.parameters, null, 2) : "";
        return el("details", {}, [
          el("summary", { class: "u-drag", text: "compare" }),
          el("div", { class: "muted u-mt-6" }, [el("div", { text: "raw.description" }), el("pre", { class: "muted pre", text: d0 })]),
          el("div", { class: "muted u-mt-6" }, [el("div", { text: "wired.description" }), el("pre", { class: "muted pre", text: d1 })]),
          el("div", { class: "muted u-mt-6" }, [el("div", { text: "raw.parameters" }), el("pre", { class: "muted pre", text: p0 })]),
          el("div", { class: "muted u-mt-6" }, [el("div", { text: "wired.parameters" }), el("pre", { class: "muted pre", text: p1 })]),
        ]);
      };
      added.forEach((nm) => _pushRow("added", nm, el("span", { class: "muted", text: "present in wired only" })));
      removed.forEach((nm) => _pushRow("removed", nm, el("span", { class: "muted", text: "present in raw only" })));
      changed.sort().forEach((nm) => _pushRow("changed", nm, _detailsCompare(nm)));
      if (!added.length && !removed.length && !changed.length) {
        llmDiffTbody.appendChild(el("tr", {}, [el("td", { text: "-", colspan: "4" })]));
      }

      _renderLLMToolRows(llmToolsState.tools_wired);
    } catch (e) {
      llmToolsState.tools_wired = [];
      llmToolsStatus.textContent = `preview: ${String(e && e.message ? e.message : e)}`;
      llmRemovedPre.textContent = "";
      llmDiffPre.textContent = "";
      llmDiffTbody.innerHTML = "";
      _renderLLMToolRows([]);
    }
  };

  const btnLLMPreview = el("button", {
    class: "btn btn--primary",
    text: t("skills.action.preview"),
    onclick: async () => await loadLLMToolsPreview(llmRoleSelect.value),
  });
  const loadExposureTraceSetting = async () => {
    try {
      const resp = await apiGet("/admin/api/tools/exposure-trace-setting");
      llmTracePlanCb.checked = !!(resp && resp.enabled);
    } catch (_) {
      llmTracePlanCb.checked = false;
    }
  };
  const saveExposureTraceSetting = async () => {
    try {
      const resp = await apiPost("/admin/api/tools/exposure-trace-setting", { enabled: !!llmTracePlanCb.checked });
      llmTracePlanCb.checked = !!(resp && resp.enabled);
      llmToolsStatus.textContent = `trace_exposure_plan=${llmTracePlanCb.checked ? "on" : "off"}`;
    } catch (e) {
      llmToolsStatus.textContent = `trace setting: ${String(e && e.message ? e.message : e)}`;
    }
  };
  const btnLLMToggle = el("button", {
    class: "btn",
    text: t("skills.action.toggleRawWired"),
    onclick: () => {
      const showing = String(btnLLMToggle.dataset.showing || "wired");
      const next = showing === "wired" ? "raw" : "wired";
      btnLLMToggle.dataset.showing = next;
      _renderLLMToolRows(next === "wired" ? llmToolsState.tools_wired : llmToolsState.tools_raw);
    },
  });

  const llmToolsInner = [
    el("div", { class: "muted u-muted-block-lg", text: t("skills.hint.llmTools") }),
    llmToolsStatus,
    el("div", { class: "row u-row-wrap-mt" }, [
      el("label", { text: t("skills.label.role") }),
      llmRoleSelect,
      btnLLMPreview,
      btnLLMToggle,
      el("button", {
        class: "btn",
        text: t("skills.action.clearCache"),
        onclick: async () => {
          try {
            await apiPost("/admin/api/tools/internal/reload", {});
            llmToolsStatus.textContent = "cache cleared";
            await loadLLMToolsPreview(llmRoleSelect.value);
          } catch (e) {
            llmToolsStatus.textContent = `reload: ${String(e && e.message ? e.message : e)}`;
          }
        },
      }),
      el("span", { class: "muted", text: "role_mode:" }),
      llmModeBadge,
      el("label", { class: "row u-row-center" }, [
        llmTracePlanCb,
        el("span", { class: "muted", text: t("skills.action.traceExposure") }),
      ]),
      el("button", {
        class: "btn",
        text: t("skills.action.saveTrace"),
        onclick: saveExposureTraceSetting,
      }),
    ]),
    el("div", { class: "table-wrap u-mt-8" }, [
      el("table", { class: "table table--compact" }, [
        el("thead", {}, [
          el("tr", {}, [
            el("th", { text: t("skills.col.name") }),
            el("th", { text: t("skills.col.description") }),
            el("th", { text: t("skills.col.kind") }),
            el("th", { text: t("skills.col.parameters") }),
          ]),
        ]),
        llmToolsTbody,
      ]),
    ]),
    el("div", { class: "muted u-mt-8", text: t("skills.hint.diffDiag") }),
    llmRemovedPre,
    el("div", { class: "muted u-mt-8", text: t("skills.hint.rawWiredDiff") }),
    llmDiffPre,
    llmDiffTableWrap,
  ];
  const llmToolsBox = skillsFold(t("skills.fold.llmTools"), llmToolsInner);

  // --- Installed table + audit + modals ---
  const tbody = el("tbody");
  const auditTbody = el("tbody");
  let skillTestRunName = "";

  const skillTestRunModal = el("div", { class: "session-monitor-modal u-hidden", "data-skill-modal": "testrun" });
  const skillTestRunTitle = el("div", { class: "card__title", text: t("skills.modal.testRun") });
  const skillTestRunArgs = el("textarea", {
    class: "input",
    rows: "8",
    style: "width:100%;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;",
    placeholder: "{}",
  });
  const skillInstallModal = el("div", { class: "session-monitor-modal u-hidden", "data-skill-modal": "install" });
  const skillInstallTitle = el("div", { class: "card__title", text: t("skills.modal.install") });
  const skillInstallMsg = el("div", { class: "muted", style: "line-height:1.5;" });

  const closeSkillInstallModal = () => {
    skillInstallModal.classList.add("u-hidden");
    skillInstallModal.style.display = "";
  };
  const openSkillInstallModal = (msg) => {
    skillInstallTitle.textContent = t("skills.modal.install");
    skillInstallMsg.textContent = String(msg || "");
    if (skillInstallModal.parentNode !== document.body) document.body.appendChild(skillInstallModal);
    skillInstallModal.classList.remove("u-hidden");
    skillInstallModal.style.display = "";
  };
  const finishSkillInstallModal = (ok, msg) => {
    skillInstallTitle.textContent = ok ? t("skills.modal.installOk") : t("skills.modal.installFail");
    skillInstallMsg.textContent = String(msg || "");
    setTimeout(() => {
      closeSkillInstallModal();
    }, 1200);
  };
  skillInstallModal.addEventListener("click", (e) => {
    if (e.target === skillInstallModal) closeSkillInstallModal();
  });
  skillInstallModal.appendChild(
    el("div", { class: "card session-monitor-modal__card", style: "width:min(560px,96vw);" }, [
      skillInstallTitle,
      skillInstallMsg,
      el("div", { class: "row u-row-end" }, [
        el("button", { class: "btn", text: t("skills.action.close"), onclick: closeSkillInstallModal }),
      ]),
    ]),
  );

  const closeSkillTestRunModal = () => {
    skillTestRunModal.classList.add("u-hidden");
    skillTestRunModal.style.display = "";
    skillTestRunName = "";
  };
  const openSkillTestRunModal = (name) => {
    skillTestRunName = String(name || "");
    skillTestRunTitle.textContent = tf("skills.modal.testRunNamed", { name: skillTestRunName });
    skillTestRunArgs.value = "{}";
    if (skillTestRunModal.parentNode !== document.body) document.body.appendChild(skillTestRunModal);
    skillTestRunModal.classList.remove("u-hidden");
    skillTestRunModal.style.display = "";
    setTimeout(() => skillTestRunArgs.focus(), 0);
  };
  skillTestRunModal.addEventListener("click", (e) => {
    if (e.target === skillTestRunModal) closeSkillTestRunModal();
  });
  const skillTestRunRunBtn = el("button", {
    class: "btn btn--primary",
    text: t("skills.action.run"),
    onclick: async () => {
      if (!skillTestRunName) return;
      let args = {};
      try {
        const raw = String(skillTestRunArgs.value || "").trim();
        args = raw ? JSON.parse(raw) : {};
      } catch (e) {
        status.textContent = `invalid json: ${String(e && e.message ? e.message : e)}`;
        return;
      }
      try {
        const r = await apiPost("/admin/api/skills/test-run", { name: skillTestRunName, args });
        status.textContent = `test-run: ${skillTestRunName} => ${JSON.stringify((r && r.result) || {}, null, 0)}`;
        closeSkillTestRunModal();
      } catch (e) {
        status.textContent = `test-run: ${String(e && e.message ? e.message : e)}`;
      }
    },
  });
  const skillTestRunCancelBtn = el("button", {
    class: "btn",
    text: t("skills.action.cancel"),
    onclick: closeSkillTestRunModal,
  });
  skillTestRunModal.appendChild(
    el("div", { class: "card session-monitor-modal__card", style: "width:min(760px,96vw);" }, [
      skillTestRunTitle,
      el("div", { class: "muted", style: "margin-bottom:8px;", text: t("skills.hint.testRunArgs") }),
      skillTestRunArgs,
      el("div", { class: "row u-row-end" }, [skillTestRunCancelBtn, skillTestRunRunBtn]),
    ]),
  );

  const retryableOnlyCb = el("input", { type: "checkbox" });
  const retryableOnlyStored = String(localStorage.getItem(SKILL_AUDIT_RETRYABLE_ONLY_KEY) || "")
    .trim()
    .toLowerCase();
  retryableOnlyCb.checked = retryableOnlyStored
    ? retryableOnlyStored !== "0" && retryableOnlyStored !== "false"
    : true;

  const _parseSourceFromAudit = (it) => {
    const d = it && typeof it.detail === "object" ? it.detail : {};
    const s = String(d.source || "").trim().toLowerCase();
    if (s === "local" || s === "registry" || s === "auto") return s;
    return "";
  };
  const _parseRetryTargetFromAudit = (it) => {
    const d = it && typeof it.detail === "object" ? it.detail : {};
    const inputTarget = String(d.input_target || "").trim();
    if (inputTarget) return inputTarget;
    return String((it && it.target_id) || "").trim();
  };
  const _isRetryableAudit = (it) => {
    const action = String((it && it.action) || "").trim().toLowerCase();
    if (action !== "skill_install_failed") return false;
    const src = _parseSourceFromAudit(it);
    const target = _parseRetryTargetFromAudit(it);
    return Boolean(src && target);
  };

  const loadRows = async () => {
    const data = await apiGet("/admin/api/skills");
    rowsState.items = Array.isArray(data.items) ? data.items : [];
  };
  const loadAudits = async () => {
    const data = await apiGet("/admin/api/admin-audit?limit=80");
    const items = Array.isArray(data.items) ? data.items : [];
    auditState.items = items.filter((x) => String(x.action || "").startsWith("skill_")).slice(0, 20);
  };

  const updateInstalledFoldTitle = () => {
    if (foldInstalledSummary) {
      foldInstalledSummary.textContent = tf("skills.fold.installed", { n: (rowsState.items || []).length });
    }
  };
  let foldInstalledSummary = null;

  const repaint = () => {
    const rows = rowsState.items || [];
    tbody.innerHTML = "";
    rows.forEach((x) => {
      const name = String(x.name || "");
      const enabled = !!x.enabled;
      const executable = !!x.executable;
      const runtime = x && typeof x.runtime === "object" ? x.runtime : null;
      const runtimeType = runtime && typeof runtime.type === "string" ? String(runtime.type) : "";
      const runtimeEntry = runtime && typeof runtime.entry === "string" ? String(runtime.entry) : "";
      const actions = rowActions("⋯", [
        {
          label: enabled ? t("skills.action.disable") : t("skills.action.enable"),
          onClick: async () => {
            await apiPost(enabled ? "/admin/api/skills/disable" : "/admin/api/skills/enable", { name });
            status.textContent = `${enabled ? "Disabled" : "Enabled"}: ${name}`;
            await loadRows();
            repaint();
          },
        },
        {
          label: t("skills.action.testRun"),
          disabled: !executable,
          onClick: () => openSkillTestRunModal(name),
        },
        {
          label: t("skills.action.repairDeps"),
          onClick: async () => {
            status.textContent = `repair deps: ${name}...`;
            const r = await apiPost("/admin/api/skills/repair-deps", { name });
            assertSkillMutationOk(r, "Repair deps failed");
            status.textContent = `repair deps: ${JSON.stringify((r && r.result) || {}, null, 0)}`;
            await loadRows();
            await loadAudits();
            repaint();
          },
        },
        {
          label: t("skills.action.uninstall"),
          danger: true,
          onClick: async () => {
            if (!confirm(tf("skills.confirm.uninstall", { name }))) return;
            status.textContent = `uninstalling: ${name}...`;
            const r = await apiPost("/admin/api/skills/uninstall", { name });
            assertSkillMutationOk(r, "Uninstall failed");
            status.textContent = `uninstall success: ${JSON.stringify((r && r.result) || {}, null, 0)}`;
            await loadRows();
            await loadAudits();
            repaint();
          },
        },
      ]);
      tbody.appendChild(
        el("tr", {}, [
          el("td", { text: name }),
          el("td", { text: String(x.description || "") }),
          el("td", { text: String(x.enabled ? "1" : "0") }),
          el("td", {}, [
            executable
              ? el("span", { class: "badge badge--ok", text: `${runtimeType || "runtime"}` })
              : el("span", { class: "muted", text: "docs-only" }),
          ]),
          el("td", { text: executable ? `${runtimeEntry}` : "-" }),
          el("td", { text: String(x.skill_dir || "") }),
          el("td", { class: "table__cell--actions", "data-copy-disabled": "1" }, [
            el("div", { class: "table__cell-actions" }, [actions]),
          ]),
        ]),
      );
    });
    updateInstalledFoldTitle();

    auditTbody.innerHTML = "";
    const auditRows = (auditState.items || []).filter((x) => (!retryableOnlyCb.checked ? true : _isRetryableAudit(x)));
    for (const x of auditRows) {
      const src = _parseSourceFromAudit(x);
      const isRetryable = _isRetryableAudit(x);
      const retryBtn = el("button", {
        class: "btn",
        text: t("skills.action.retry"),
        disabled: !isRetryable,
        onclick: async () => {
          try {
            const target = _parseRetryTargetFromAudit(x);
            if (!src || !target || !isRetryable) {
              status.textContent = "retry skipped: missing source/target";
              return;
            }
            const r = await apiPost("/admin/api/skills/retry-install", { source: src, target });
            assertSkillMutationOk(r, "Retry install failed");
            status.textContent = `retry: ${JSON.stringify(r.result || {})}`;
            await loadRows();
            await loadAudits();
            repaint();
          } catch (e) {
            status.textContent = String(e && e.message ? e.message : e);
          }
        },
      });
      auditTbody.appendChild(
        el("tr", {}, [
          el("td", { text: String(x.timestamp || "") }),
          el("td", { text: String(x.action || "") }),
          el("td", { text: String(x.target_id || "") }),
          el("td", { text: String(x.status || "") }),
          el("td", { text: shortText(JSON.stringify(x.detail || {}), 180) }),
          el("td", {}, [retryBtn]),
        ]),
      );
    }
  };

  const refreshSkillsState = async () => {
    await Promise.all([loadRows(), loadAudits(), loadSkillBinding()]);
    repaint();
    renderSkillBindingList();
  };

  try {
    await Promise.all([loadRows(), loadAudits(), loadSkillBinding(), loadSkillMode()]);
    const rolesForPreview = (
      Array.isArray(skillBindingState.roles) && skillBindingState.roles.length
        ? skillBindingState.roles
        : ["generalist", "ops", "memory"]
    ).map((x) => String(x));
    internalRoleSelect.innerHTML = "";
    rolesForPreview.forEach((role) => internalRoleSelect.appendChild(el("option", { value: role, text: role })));
    internalRoleSelect.value = rolesForPreview.includes("generalist") ? "generalist" : rolesForPreview[0];
    internalToolsStatus.textContent = t("skills.hint.expandToLoad");
    llmRoleSelect.innerHTML = "";
    rolesForPreview.forEach((role) => llmRoleSelect.appendChild(el("option", { value: role, text: role })));
    llmRoleSelect.value = internalRoleSelect.value;
    llmToolsStatus.textContent = t("skills.hint.expandToLoad");
    selfCheckStatus.textContent = t("skills.hint.expandToSelfCheck");
    skillHealthStatus.textContent = t("skills.hint.expandToSelfCheck");
  } catch (e) {
    return el("div", { class: "card" }, [
      el("div", { class: "card__title", text: t("skills.title") }),
      el("div", { class: "muted", text: String(e && e.message ? e.message : e) }),
    ]);
  }
  repaint();

  const btnCreate = el("button", {
    class: "btn btn--primary",
    text: t("skills.action.create"),
    onclick: async () => {
      try {
        const r = await apiPost("/admin/api/skills/create", {
          name: String(nameInp.value || "").trim(),
          description: String(descInp.value || "").trim(),
          body_markdown: String(bodyInp.value || ""),
        });
        assertSkillMutationOk(r, "Create skill failed");
        status.textContent = `create: ${JSON.stringify(r.result || {})}`;
        await loadRows();
        await loadAudits();
        repaint();
      } catch (e) {
        status.textContent = String(e && e.message ? e.message : e);
      }
    },
  });
  const btnInstallRegistry = el("button", {
    class: "btn",
    text: t("skills.action.installRegistry"),
    onclick: async () => {
      const prev = btnInstallRegistry.textContent;
      btnInstallRegistry.disabled = true;
      btnInstallRegistry.textContent = t("skills.action.installing");
      status.textContent = "installing from registry...";
      openSkillInstallModal("Installing skill from registry...");
      try {
        const r = await apiPost("/admin/api/skills/install-registry", {
          archive_url: String(regInp.value || "").trim(),
        });
        assertSkillMutationOk(r, "Registry install failed");
        status.textContent = `install-registry success: ${JSON.stringify(r.result || {})}`;
        await refreshSkillsState();
        finishSkillInstallModal(true, "Registry skill installed successfully.");
      } catch (e) {
        status.textContent = String(e && e.message ? e.message : e);
        finishSkillInstallModal(false, `Install failed: ${String(e && e.message ? e.message : e)}`);
      } finally {
        btnInstallRegistry.disabled = false;
        btnInstallRegistry.textContent = prev;
      }
    },
  });
  const btnInstallLocal = el("button", {
    class: "btn",
    text: t("skills.action.installLocal"),
    onclick: async () => {
      const prev = btnInstallLocal.textContent;
      btnInstallLocal.disabled = true;
      btnInstallLocal.textContent = t("skills.action.installing");
      status.textContent = "installing from local dir...";
      openSkillInstallModal("Installing skill from local directory...");
      try {
        const r = await apiPost("/admin/api/skills/install", {
          source_dir: String(localDirInp.value || "").trim(),
        });
        assertSkillMutationOk(r, "Local install failed");
        status.textContent = `install-local success: ${JSON.stringify(r.result || {})}`;
        await refreshSkillsState();
        finishSkillInstallModal(true, "Local skill installed successfully.");
      } catch (e) {
        status.textContent = String(e && e.message ? e.message : e);
        finishSkillInstallModal(false, `Install failed: ${String(e && e.message ? e.message : e)}`);
      } finally {
        btnInstallLocal.disabled = false;
        btnInstallLocal.textContent = prev;
      }
    },
  });
  const btnRefresh = el("button", {
    class: "btn",
    text: t("skills.action.refresh"),
    onclick: async () => {
      try {
        await refreshSkillsState();
        status.textContent = "refreshed";
      } catch (e) {
        status.textContent = String(e && e.message ? e.message : e);
      }
    },
  });
  const btnRepairDepsAll = el("button", {
    class: "btn",
    text: t("skills.action.repairAllDeps"),
    onclick: async () => {
      const prev = btnRepairDepsAll.textContent;
      btnRepairDepsAll.disabled = true;
      btnRepairDepsAll.textContent = t("skills.action.repairing");
      try {
        const r = await apiPost("/admin/api/skills/repair-deps-all", {});
        const s = r && typeof r.summary === "object" ? r.summary : {};
        status.textContent = `repair all deps: total=${Number(s.total || 0)} ok=${Number(s.ok_count || 0)} warn=${Number(s.warn_count || 0)} fail=${Number(s.fail_count || 0)}`;
        await refreshSkillsState();
      } catch (e) {
        status.textContent = `repair all deps failed: ${String(e && e.message ? e.message : e)}`;
      } finally {
        btnRepairDepsAll.disabled = false;
        btnRepairDepsAll.textContent = prev;
      }
    },
  });
  retryableOnlyCb.addEventListener("change", () => {
    localStorage.setItem(SKILL_AUDIT_RETRYABLE_ONLY_KEY, retryableOnlyCb.checked ? "1" : "0");
    repaint();
  });

  const docsHint = el("div", { class: "muted", style: "margin-bottom:10px;line-height:1.5;" }, [
    el("div", { text: t("skills.docsTitle") }),
    el("div", { text: t("skills.docsTroubleshooting") }),
    el("div", { text: t("skills.docsTraceTaxonomy") }),
  ]);

  internalToolsBox.addEventListener("toggle", async () => {
    if (!internalToolsBox.open || lazyLoadState.internalLoaded) return;
    lazyLoadState.internalLoaded = true;
    await loadInternalToolsPreview(internalRoleSelect.value);
  });
  llmToolsBox.addEventListener("toggle", async () => {
    if (!llmToolsBox.open || lazyLoadState.llmLoaded) return;
    lazyLoadState.llmLoaded = true;
    await Promise.all([loadExposureTraceSetting(), loadLLMToolsPreview(llmRoleSelect.value)]);
  });
  selfCheckBox.addEventListener("toggle", async () => {
    if (!selfCheckBox.open || lazyLoadState.selfCheckLoaded) return;
    lazyLoadState.selfCheckLoaded = true;
    await runSelfCheck();
  });
  skillHealthBox.addEventListener("toggle", async () => {
    if (!skillHealthBox.open || lazyLoadState.skillHealthLoaded) return;
    lazyLoadState.skillHealthLoaded = true;
    await runSkillHealthCheck();
  });

  // --- Page folds ---
  const foldMode = skillsFold(t("skills.fold.mode"), [
    el("div", { class: "muted", text: t("skills.fold.modeHint") }),
    el("div", { class: "row", style: "gap:8px;align-items:center;flex-wrap:wrap;" }, [
      el("label", { class: "row u-row-center" }, [
        skillPromptModeCb,
        el("span", { text: t("skills.label.promptMode") }),
      ]),
      el("button", { class: "btn btn--primary", text: t("skills.action.save"), onclick: saveSkillMode }),
      skillModeStatus,
    ]),
    docsHint,
  ]);

  const foldMarket = skillsFold(t("skills.fold.market"), [
    el("div", { class: "row u-row-wrap-mb" }, [marketQ, marketLimitInp, btnMarketSearch, btnMarketLatest]),
    marketStatus,
    el("div", { class: "u-h-8" }),
    el("div", { class: "table-wrap" }, [
      el("table", { class: "table table--compact" }, [
        el("thead", {}, [
          el("tr", {}, [
            el("th", { text: t("skills.col.slug") }),
            el("th", { text: t("skills.col.name") }),
            el("th", { text: t("skills.col.version") }),
            el("th", { text: t("skills.col.description") }),
            el("th", { text: t("skills.col.action") }),
          ]),
        ]),
        marketTbody,
      ]),
    ]),
    el("div", { class: "u-h-8" }),
    el("div", { class: "muted", text: t("skills.action.detail") }),
    marketDetailPre,
  ]);

  const foldLocalRegistry = skillsFold(t("skills.fold.localRegistry"), [
    el("div", { class: "muted", style: "margin-bottom:8px;line-height:1.5;" }, [
      el("div", { text: t("skills.hintLocalDir") }),
      el("div", { text: t("skills.hintRegistry") }),
    ]),
    el("div", { class: "row u-row-wrap-mb" }, [regInp, btnInstallRegistry]),
    el("div", { class: "row u-row-wrap-mb" }, [localDirInp, btnInstallLocal]),
  ]);

  const foldCreate = skillsFold(t("skills.fold.create"), [
    el("div", { class: "row u-row-wrap-mb" }, [nameInp, descInp]),
    el("div", { style: "margin-bottom:8px;" }, [bodyInp]),
    el("div", { class: "row u-row-wrap-mb" }, [btnCreate]),
  ]);

  const foldInstall = skillsFold(t("skills.fold.install"), [
    el("div", { class: "muted", text: t("skills.fold.installHint") }),
    foldMarket,
    foldLocalRegistry,
    foldCreate,
  ]);
  foldMarket.open = true;

  const foldAudit = skillsFold(t("skills.fold.audit"), [
    el("div", { class: "row", style: "gap:8px;align-items:center;" }, [
      el("label", { class: "row u-row-center" }, [
        retryableOnlyCb,
        el("span", { class: "muted", text: t("skills.action.retryableOnly") }),
      ]),
    ]),
    el("div", { class: "table-wrap" }, [
      el("table", { class: "table table--compact" }, [
        el("thead", {}, [
          el("tr", {}, [
            el("th", { text: t("skills.col.timestamp") }),
            el("th", { text: t("skills.col.action") }),
            el("th", { text: t("skills.col.target") }),
            el("th", { text: t("skills.col.status") }),
            el("th", { text: t("skills.col.detail") }),
            el("th", { text: t("skills.col.retry") }),
          ]),
        ]),
        auditTbody,
      ]),
    ]),
  ]);

  const foldInstalled = skillsFold(tf("skills.fold.installed", { n: (rowsState.items || []).length }), [
    el("div", { class: "row u-row-wrap-mb" }, [btnRefresh, btnRepairDepsAll]),
    status,
    el("div", { class: "table-wrap" }, [
      el("table", { class: "table table--compact" }, [
        el("thead", {}, [
          el("tr", {}, [
            el("th", { text: t("skills.col.name") }),
            el("th", { text: t("skills.col.description") }),
            el("th", { text: t("skills.col.enabled") }),
            el("th", { text: t("skills.col.kind") }),
            el("th", { text: t("skills.col.runtimeEntry") }),
            el("th", { text: t("skills.col.path") }),
            el("th", { class: "table__cell--actions", text: t("skills.col.action") }),
          ]),
        ]),
        tbody,
      ]),
    ]),
    foldAudit,
  ]);
  foldInstalled.open = true;
  foldInstalledSummary = foldInstalled.querySelector("summary");

  const foldEffective = skillsFold(t("skills.fold.effective"), [
    el("div", { class: "table-wrap" }, [
      el("table", { class: "table table--compact" }, [
        el("thead", {}, [
          el("tr", {}, [
            el("th", { text: t("skills.col.role") }),
            el("th", { text: t("skills.col.totalEffective") }),
            el("th", { text: t("skills.col.workspace") }),
            el("th", { text: t("skills.col.directBind") }),
            el("th", { text: t("skills.col.workspaceResolved") }),
            el("th", { text: t("skills.col.workspaceDocsOnly") }),
            el("th", { text: t("skills.col.mcpConverted") }),
            el("th", { text: t("skills.col.otherTools") }),
            el("th", { text: t("skills.col.docsOnlyNames") }),
            el("th", { text: t("skills.col.namesPreview") }),
          ]),
        ]),
        skillEffectiveTbody,
      ]),
    ]),
  ]);

  const foldBindingDash = skillsFold(t("skills.fold.bindingDash"), [
    el("div", { class: "table-wrap" }, [
      el("table", { class: "table table--compact" }, [
        el("thead", {}, [
          el("tr", {}, [
            el("th", { text: t("skills.col.role") }),
            el("th", { text: t("skills.col.directSkills") }),
            el("th", { text: t("skills.col.effective") }),
          ]),
        ]),
        skillBindingDashTbody,
      ]),
    ]),
    foldEffective,
  ]);

  const foldBinding = skillsFold(t("skills.fold.binding"), [
    el("div", { class: "muted", text: t("skills.fold.bindingHint") }),
    skillBindingStatus,
    skillBindingPersistHint,
    skillBindingEnvHint,
    el("label", { class: "row", style: "gap:8px;align-items:center;margin-top:6px;" }, [
      skillBindingEnabledCb,
      el("span", { text: t("skills.label.enableBinding") }),
    ]),
    el("div", { class: "row u-row-wrap-mt" }, [
      el("label", { text: t("skills.label.role") }),
      skillRoleSelect,
      btnSaveSkillBinding,
    ]),
    skillBindingListWrap,
    foldBindingDash,
  ]);

  const foldDiagnostics = skillsFold(t("skills.fold.diagnostics"), [
    skillHealthBox,
    selfCheckBox,
    internalToolsBox,
    llmToolsBox,
  ]);

  return renderPageShell(
    {
      title: t("skills.title"),
      subtitle: t("skills.subtitle"),
      sections: [
        { id: "skills-mode", label: t("skills.toc.mode") },
        { id: "skills-install", label: t("skills.toc.install") },
        { id: "skills-installed", label: t("skills.toc.installed") },
        { id: "skills-binding", label: t("skills.toc.binding") },
        { id: "skills-diagnostics", label: t("skills.toc.diagnostics") },
      ],
    },
    [
      el("div", { class: "page-grid page-grid--single" }, [
        el("div", { id: "skills-mode" }, [foldMode]),
        el("div", { id: "skills-install" }, [foldInstall]),
        el("div", { id: "skills-installed" }, [foldInstalled]),
        el("div", { id: "skills-binding" }, [foldBinding]),
        el("div", { id: "skills-diagnostics" }, [foldDiagnostics]),
      ]),
    ],
  );
}

export { skillsFold, renderSkills };