/**
 * 实例数据看板:拉 /api/instance/dashboard 渲染只读表格.
 * 各区块无数据时不展示;有数据按表格展示.
 */
(function (global) {
  const SECTION_ORDER = ["orders", "keys", "strategy", "options", "hedge_plan"];
  let loading = false;
  let timer = null;

  function root() {
    const active = document.querySelector('.embed-tab-pane.is-active-pane [data-inst-dashboard="1"]');
    if (active) return active;
    return document.getElementById("instance-dashboard");
  }

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

  function fmtNum(v) {
    if (v == null || v === "") return "—";
    const n = Number(v);
    if (!Number.isFinite(n)) return escapeHtml(v);
    return String(n);
  }

  function fmtPnl(v) {
    if (v == null || v === "") return "—";
    const n = Number(v);
    if (!Number.isFinite(n)) return "—";
    const cls = n > 0 ? "pos-pnl-profit" : n < 0 ? "pos-pnl-loss" : "";
    const sign = n > 0 ? "+" : "";
    return '<span class="' + cls + '">' + sign + n.toFixed(2) + "U</span>";
  }

  function goTab(tab) {
    if (!tab) return;
    if (global.InstanceEmbed && typeof global.InstanceEmbed.loadTab === "function") {
      global.InstanceEmbed.loadTab(tab);
      return;
    }
    const pathMap = {
      trade: "/trade",
      key_monitor: "/key_monitor",
      strategy: "/strategy",
      options: "/options",
      hedge_plan: "/hedge-plan",
    };
    const path = pathMap[tab] || "/" + tab;
    location.href = path;
  }

  function tableWrap(headers, rowsHtml) {
    return (
      '<div class="inst-dash-table-wrap">' +
      '<table class="inst-dash-table">' +
      "<thead><tr>" +
      headers.map(function (h) {
        return "<th>" + escapeHtml(h) + "</th>";
      }).join("") +
      "</tr></thead>" +
      "<tbody>" +
      rowsHtml +
      "</tbody></table></div>"
    );
  }

  function rowClickAttrs(tab) {
    return ' class="inst-dash-row" data-dash-tab="' + escapeHtml(tab || "") + '" role="link" tabindex="0"';
  }

  function renderOrdersTable(items) {
    const rows = items
      .map(function (it) {
        return (
          "<tr" +
          rowClickAttrs(it.tab || "trade") +
          ">" +
          "<td>" +
          escapeHtml(it.symbol || "-") +
          "</td>" +
          "<td>" +
          escapeHtml(it.direction_label || it.direction || "-") +
          "</td>" +
          "<td>" +
          escapeHtml(it.subtitle || "—") +
          "</td>" +
          "<td>" +
          fmtNum(it.entry) +
          "</td>" +
          "<td>" +
          fmtNum(it.stop_loss) +
          "</td>" +
          "<td>" +
          fmtNum(it.take_profit) +
          "</td>" +
          "</tr>"
        );
      })
      .join("");
    return tableWrap(["合约", "方向", "类型", "入场", "止损", "止盈"], rows);
  }

  function renderKeysTable(items) {
    const rows = items
      .map(function (it) {
        return (
          "<tr" +
          rowClickAttrs(it.tab || "key_monitor") +
          ">" +
          "<td>" +
          escapeHtml(it.symbol || "-") +
          "</td>" +
          "<td>" +
          escapeHtml(it.direction_label || it.direction || "-") +
          "</td>" +
          "<td>" +
          escapeHtml(it.subtitle || "—") +
          "</td>" +
          "<td>" +
          fmtNum(it.upper) +
          "</td>" +
          "<td>" +
          fmtNum(it.lower) +
          "</td>" +
          "</tr>"
        );
      })
      .join("");
    return tableWrap(["合约", "方向", "信号", "上沿", "下沿"], rows);
  }

  function renderStrategyTable(items) {
    const rows = items
      .map(function (it) {
        const kindLabel = it.kind === "roll" ? "顺势加仓" : it.kind === "trend" ? "趋势回调" : "策略";
        return (
          "<tr" +
          rowClickAttrs(it.tab || "strategy") +
          ">" +
          "<td>" +
          escapeHtml(kindLabel) +
          "</td>" +
          "<td>" +
          escapeHtml(it.symbol || "-") +
          "</td>" +
          "<td>" +
          escapeHtml(it.direction_label || it.direction || "-") +
          "</td>" +
          "<td>" +
          escapeHtml(it.status || "—") +
          "</td>" +
          "<td>" +
          fmtNum(it.entry) +
          "</td>" +
          "</tr>"
        );
      })
      .join("");
    return tableWrap(["类型", "合约", "方向", "状态", "入场"], rows);
  }

  function renderOptionsTable(items) {
    const rows = items
      .map(function (it) {
        const opt =
          String(it.opt_type || "").toUpperCase() === "C"
            ? "Call"
            : String(it.opt_type || "").toUpperCase() === "P"
              ? "Put"
              : it.opt_type || "—";
        return (
          "<tr" +
          rowClickAttrs(it.tab || "options") +
          ">" +
          "<td>" +
          escapeHtml(it.inst_id || it.title || "-") +
          "</td>" +
          "<td>" +
          escapeHtml(opt) +
          "</td>" +
          "<td>" +
          fmtNum(it.pos) +
          "</td>" +
          "<td>" +
          fmtPnl(it.pnl) +
          "</td>" +
          "</tr>"
        );
      })
      .join("");
    return tableWrap(["合约", "类型", "张数", "盈亏"], rows);
  }

  function renderHedgeTable(items) {
    const rows = items
      .map(function (it) {
        return (
          "<tr" +
          rowClickAttrs(it.tab || "hedge_plan") +
          ">" +
          "<td>#" +
          escapeHtml(it.id != null ? it.id : "—") +
          "</td>" +
          "<td>" +
          escapeHtml(it.underlying || "-") +
          "</td>" +
          "<td>" +
          escapeHtml(it.plan_type || "—") +
          "</td>" +
          "<td>" +
          escapeHtml(it.status || "—") +
          "</td>" +
          "<td>" +
          escapeHtml(it.subtitle || "—") +
          "</td>" +
          "</tr>"
        );
      })
      .join("");
    return tableWrap(["ID", "标的", "计划类型", "状态", "说明"], rows);
  }

  function renderTable(key, items) {
    if (key === "orders") return renderOrdersTable(items);
    if (key === "keys") return renderKeysTable(items);
    if (key === "strategy") return renderStrategyTable(items);
    if (key === "options") return renderOptionsTable(items);
    if (key === "hedge_plan") return renderHedgeTable(items);
    return "";
  }

  function sectionHasData(sec) {
    if (!sec) return false;
    const count = Number(sec.count);
    if (Number.isFinite(count) && count > 0) return true;
    return Array.isArray(sec.items) && sec.items.length > 0;
  }

  function renderSection(key, sec) {
    if (!sectionHasData(sec)) return "";
    const items = sec.items || [];
    const count = Number(sec.count) || items.length;
    return (
      '<section class="inst-dash-section" data-dash-section="' +
      escapeHtml(key) +
      '">' +
      '<div class="inst-dash-section-head">' +
      "<h3>" +
      escapeHtml(sec.title || key) +
      ' <span class="inst-dash-count">' +
      count +
      "</span></h3>" +
      '<button type="button" class="btn-sm inst-dash-goto" data-dash-tab="' +
      escapeHtml(sec.tab || "") +
      '">打开</button>' +
      "</div>" +
      renderTable(key, items) +
      "</section>"
    );
  }

  function bindClicks(el) {
    if (!el) return;
    el.querySelectorAll("[data-dash-tab]").forEach(function (node) {
      const handler = function () {
        goTab(node.getAttribute("data-dash-tab"));
      };
      node.addEventListener("click", handler);
      node.addEventListener("keydown", function (ev) {
        if (ev.key === "Enter" || ev.key === " ") {
          ev.preventDefault();
          handler();
        }
      });
    });
  }

  async function load(opts) {
    const el = root();
    if (!el) return;
    const status = el.querySelector("#inst-dash-status") || document.getElementById("inst-dash-status");
    const sections = el.querySelector("#inst-dash-sections") || document.getElementById("inst-dash-sections");
    const updated = el.querySelector("#inst-dash-updated") || document.getElementById("inst-dash-updated");
    if (loading) return;
    loading = true;
    if (status && !(opts && opts.silent)) status.textContent = "加载中…";
    try {
      const res = await fetch("/api/instance/dashboard", { credentials: "same-origin" });
      const data = await res.json().catch(function () {
        return {};
      });
      if (!res.ok || !data.ok) {
        throw new Error(data.msg || res.statusText || "加载失败");
      }
      if (updated) updated.textContent = "更新 " + (data.updated_at || "—");
      if (sections) {
        const html = SECTION_ORDER.map(function (k) {
          return renderSection(k, data[k]);
        }).join("");
        sections.innerHTML =
          html || '<p class="inst-dash-empty muted">当前无活跃监控与持仓</p>';
        bindClicks(sections);
      }
      if (status) status.textContent = "";
    } catch (e) {
      if (status) status.textContent = e.message || "加载失败";
    } finally {
      loading = false;
    }
  }

  function stopAuto() {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  }

  function startAuto() {
    stopAuto();
    timer = setInterval(function () {
      const el = root();
      if (!el) return;
      const pane = el.closest(".embed-tab-pane");
      if (pane && !pane.classList.contains("is-active-pane")) return;
      load({ silent: true });
    }, 15000);
  }

  function init(force) {
    const el = root();
    if (!el) return;
    if (!force && el.getAttribute("data-dash-booted") === "1") {
      load({ silent: true });
      startAuto();
      return;
    }
    el.setAttribute("data-dash-booted", "1");
    const btn = el.querySelector("#inst-dash-refresh") || document.getElementById("inst-dash-refresh");
    if (btn && !btn.getAttribute("data-bound")) {
      btn.setAttribute("data-bound", "1");
      btn.addEventListener("click", function () {
        load({});
      });
    }
    load({});
    startAuto();
  }

  function refreshSoft(opts) {
    load(Object.assign({ silent: true }, opts || {}));
  }

  global.InstanceDashboard = {
    init: init,
    refreshSoft: refreshSoft,
    load: load,
    stopAuto: stopAuto,
  };
})(window);