/**
 * 策略说明：三所 MD + 开仓检查清单 JSON。
 */
(function () {
  const page = document.getElementById("page-strategy");
  if (!page) return;

  const tabsEl = document.getElementById("strategy-tabs");
  const statusEl = document.getElementById("strategy-load-status");
  const docBody = document.getElementById("strategy-doc-body");
  const docSource = document.getElementById("strategy-doc-source");
  const checklistTitle = document.getElementById("strategy-checklist-title");
  const checklistBody = document.getElementById("strategy-checklist-body");
  const footnotesEl = document.getElementById("strategy-checklist-footnotes");
  const printTitle = document.getElementById("strategy-print-title");
  const printMeta = document.getElementById("strategy-print-meta");
  const printHeader = document.getElementById("strategy-print-header");
  const btnPrint = document.getElementById("strategy-btn-print");
  const btnDownload = document.getElementById("strategy-btn-download");

  let activeKey = "binance";
  let tabsMeta = [];
  let cache = {};
  let bound = false;

  async function apiFetch(url, opts) {
    const r = await fetch(url, { credentials: "same-origin", ...(opts || {}) });
    const ct = (r.headers.get("content-type") || "").toLowerCase();
    if (ct.includes("application/json")) {
      const data = await r.json();
      if (!r.ok) throw new Error((data && data.msg) || r.statusText || "请求失败");
      return data;
    }
    if (!r.ok) throw new Error(r.statusText || "请求失败");
    return r;
  }

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

  function renderTabs() {
    if (!tabsEl) return;
    tabsEl.innerHTML = tabsMeta
      .map(
        (t) =>
          `<button type="button" class="strategy-tab${t.key === activeKey ? " is-active" : ""}" role="tab" aria-selected="${t.key === activeKey}" data-key="${esc(t.key)}">${esc(t.label)}</button>`
      )
      .join("");
    tabsEl.querySelectorAll(".strategy-tab").forEach((btn) => {
      btn.addEventListener("click", () => {
        const key = btn.getAttribute("data-key");
        if (!key || key === activeKey) return;
        activeKey = key;
        renderTabs();
        void loadExchange(key);
      });
    });
  }

  function renderChecklist(checklist) {
    const cl = checklist || {};
    if (checklistTitle) {
      checklistTitle.textContent = cl.title || "开仓检查清单";
    }
    if (!checklistBody) return;
    const groups = cl.groups || [];
    if (!groups.length) {
      checklistBody.innerHTML = '<p class="strategy-empty">暂无检查清单</p>';
    } else {
      checklistBody.innerHTML = groups
        .map((grp) => {
          const items = (grp.items || [])
            .map((item) => `<li><span class="strategy-check-box" aria-hidden="true">☐</span>${esc(item)}</li>`)
            .join("");
          return `<div class="strategy-check-group"><h4>${esc(grp.title || "")}</h4><ul>${items}</ul></div>`;
        })
        .join("");
    }
    if (footnotesEl) {
      const notes = cl.footnotes || [];
      footnotesEl.innerHTML = notes.map((n) => `<li>${esc(n)}</li>`).join("");
      footnotesEl.classList.toggle("hidden", !notes.length);
    }
  }

  function renderPayload(data) {
    if (docBody) docBody.innerHTML = data.strategy_html || "";
    if (docSource) {
      const ver = data.version ? ` · ${data.version}` : "";
      docSource.textContent = `文档：${data.md_source || ""}${ver}`;
    }
    renderChecklist(data.checklist);
    if (printTitle) printTitle.textContent = data.title || data.label || "";
    if (printMeta) {
      const ver = data.version ? ` · ${data.version}` : "";
      printMeta.textContent = `${data.label || activeKey}${ver}`;
    }
    if (printHeader) printHeader.classList.remove("hidden");
  }

  async function loadExchange(key) {
    if (statusEl) statusEl.textContent = "加载中…";
    try {
      let data = cache[key];
      if (!data) {
        data = await apiFetch(`/api/strategy/${encodeURIComponent(key)}`);
        cache[key] = data;
      }
      renderPayload(data);
      if (statusEl) statusEl.textContent = "";
    } catch (e) {
      if (statusEl) statusEl.textContent = String(e);
      if (docBody) docBody.innerHTML = "";
      if (checklistBody) checklistBody.innerHTML = "";
    }
  }

  async function loadMeta() {
    const meta = await apiFetch("/api/strategy/meta");
    tabsMeta = meta.exchanges || [];
    if (tabsMeta.length && !tabsMeta.some((t) => t.key === activeKey)) {
      activeKey = tabsMeta[0].key;
    }
    renderTabs();
  }

  function bindActions() {
    if (bound) return;
    bound = true;
    if (btnPrint) {
      btnPrint.addEventListener("click", () => {
        document.body.classList.add("hub-strategy-printing");
        window.print();
        window.addEventListener(
          "afterprint",
          () => document.body.classList.remove("hub-strategy-printing"),
          { once: true }
        );
      });
    }
    if (btnDownload) {
      btnDownload.addEventListener("click", () => {
        window.location.href = `/api/strategy/${encodeURIComponent(activeKey)}/export`;
      });
    }
  }

  async function init() {
    bindActions();
    try {
      await loadMeta();
      await loadExchange(activeKey);
    } catch (e) {
      if (statusEl) statusEl.textContent = String(e);
    }
  }

  function destroy() {
    /* 保留 cache，切页再进更快 */
  }

  window.hubStrategyPage = { init, destroy };
})();