(function (global) {
  function fmtPnl(v) {
    if (v == null || v === "") return "—";
    const n = Number(v);
    if (!Number.isFinite(n)) return "—";
    return (n > 0 ? "+" : "") + n.toFixed(2) + " U";
  }

  function renderCard(row) {
    const snap = row.snapshot || {};
    const inst = snap.instance || {};
    const pnl = (snap.pnl && snap.pnl.unrealized_usdt != null)
      ? snap.pnl.unrealized_usdt
      : snap.upl_total_usdc;
    const brief = snap.positions_brief || snap.positions || [];
    const online = !!row.online;
    const status = online
      ? '<span class="status-on">在线</span>'
      : '<span class="status-off">离线</span>';
    const mode = inst.mode || "—";
    const err = row.error ? '<div class="muted">错误: ' + escapeHtml(row.error) + "</div>" : "";
    let rows = "";
    (brief || []).slice(0, 6).forEach(function (p) {
      rows +=
        "<tr><td>" +
        escapeHtml(p.inst_id || "") +
        "</td><td>" +
        escapeHtml(String(p.sheets != null ? p.sheets : "")) +
        "</td><td>" +
        escapeHtml(fmtPnl(p.pnl_usdt)) +
        "</td></tr>";
    });
    if (!rows) rows = '<tr><td colspan="3" class="muted">暂无持仓</td></tr>';
    return (
      '<article class="card">' +
      "<h3>" +
      escapeHtml(row.name || "") +
      "</h3>" +
      "<div>" +
      status +
      " · " +
      escapeHtml(mode) +
      " · 浮盈 " +
      escapeHtml(fmtPnl(pnl)) +
      "</div>" +
      '<div class="muted">拉取: ' +
      escapeHtml(row.pulled_at || "") +
      "</div>" +
      err +
      "<table><thead><tr><th>合约</th><th>张</th><th>盈亏</th></tr></thead><tbody>" +
      rows +
      "</tbody></table>" +
      '<p><a class="btn" href="/desk?id=' +
      encodeURIComponent(row.id) +
      '">内嵌打开</a> ' +
      '<button type="button" class="btn" data-open-tab="' +
      encodeURIComponent(row.id) +
      '">新标签</button></p>' +
      "</article>"
    );
  }

  function escapeHtml(s) {
    return String(s)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;");
  }

  async function refresh() {
    const status = document.getElementById("overview-status");
    const grid = document.getElementById("overview-grid");
    if (!grid) return;
    if (status) status.textContent = "刷新中…";
    try {
      const r = await fetch("/api/overview");
      const d = await r.json();
      if (!d.ok) throw new Error(d.msg || "失败");
      const list = d.instances || [];
      if (!list.length) {
        grid.innerHTML = '<p class="muted">暂无启用实例,请先到「实例」添加.</p>';
      } else {
        grid.innerHTML = list.map(renderCard).join("");
        grid.querySelectorAll("[data-open-tab]").forEach(function (btn) {
          btn.addEventListener("click", async function () {
            const id = btn.getAttribute("data-open-tab");
            const rr = await fetch("/api/instances/" + id + "/open_url");
            const dd = await rr.json();
            if (dd.ok && dd.url) window.open(dd.url, "_blank", "noopener");
            else alert(dd.msg || "无法打开");
          });
        });
      }
      if (status) status.textContent = "已更新 · 共 " + list.length + " 台";
    } catch (e) {
      if (status) status.textContent = e.message || "加载失败";
    }
  }

  function boot() {
    const btn = document.getElementById("btn-refresh");
    if (btn) btn.addEventListener("click", refresh);
    refresh();
    setInterval(refresh, 10000);
  }

  global.HubOverview = { boot: boot, refresh: refresh };
})(window);