const PERIOD_API = {
  today: "/api/today/top30",
  yesterday: "/api/yesterday/top30",
  daybefore: "/api/daybefore/top30",
};

const tableState = {
  today: { items: [], meta: {}, sortKey: "rank", sortDir: "asc" },
  yesterday: { items: [], meta: {}, sortKey: "rank", sortDir: "asc" },
  daybefore: { items: [], meta: {}, sortKey: "rank", sortDir: "asc" },
};

const PERIOD_LS_PREFIX = "ba_period_";
const PERIOD_TTL_MS = 4 * 60 * 60 * 1000;

let wecomPreviewData = null;
let currentView = "today";
const SORT_KEYS = {
  rank: (r) => Number(r.rank) || 0,
  symbol: (r) => String(r.symbol || ""),
  quote_volume: (r) => Number(r.quote_volume) || 0,
  price_change_pct: (r) => Number(r.price_change_pct) || 0,
  funding_rate: (r) => Number(r.funding_rate_pct) || 0,
  tags: (r) => {
    let s = 0;
    if (r.is_high_volume) s += 2;
    if (r.is_high_change) s += 1;
    return s;
  },
  total_quote_volume: (r) => Number(r.total_quote_volume) || 0,
  avg_change_pct: (r) => Number(r.avg_change_pct) || 0,
};

const TABLE_HEADER = `
  <thead><tr>
    <th class="sortable" data-sort="rank">排名</th>
    <th class="sortable" data-sort="symbol">合约</th>
    <th class="chart-col">日线图</th>
    <th class="sortable" data-sort="quote_volume">成交额 (USDT)</th>
    <th class="sortable" data-sort="price_change_pct">涨跌幅</th>
    <th class="funding-col">资金费率</th>
    <th class="sortable" data-sort="tags">标记</th>
  </tr></thead>`;

function formatPeriod(start, end) {
  const fmt = (s) => (s || "").replace("T", " ").slice(0, 16);
  return `${fmt(start)} ~ ${fmt(end)}`;
}

function tagText(row) {
  const t = [];
  if (row.is_high_volume) t.push("千万+");
  if (row.is_high_change) t.push("涨跌5%+");
  return t.join(" ") || "";
}

function renderTags(row) {
  const p = [];
  if (row.is_high_volume) p.push('<span class="tag tag-vol">千万+</span>');
  if (row.is_high_change) p.push('<span class="tag tag-chg">涨跌5%+</span>');
  return p.length ? p.join("") : "—";
}

function pctClass(pct) {
  if (pct > 0) return "pct-up";
  if (pct < 0) return "pct-down";
  return "";
}

function sortItems(items, key, dir, customKeys) {
  const getter = (customKeys || SORT_KEYS)[key] || SORT_KEYS.rank;
  return [...items].sort((a, b) => {
    const va = getter(a);
    const vb = getter(b);
    if (typeof va === "string") {
      return dir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
    }
    return dir === "asc" ? va - vb : vb - va;
  });
}

function ensurePeriodTable(periodId) {
  const wrap = document.getElementById(`${periodId}-table-wrap`);
  if (!wrap) return null;
  let table = wrap.querySelector(`table[data-table="${periodId}"]`);
  if (!table) {
    wrap.innerHTML = `<table data-table="${periodId}">${TABLE_HEADER}<tbody id="${periodId}-body"></tbody></table>`;
    table = wrap.querySelector("table");
    bindSortHandlers(table);
  }
  return document.getElementById(`${periodId}-body`);
}

function bindSortHandlers(table) {
  table.querySelectorAll("th.sortable").forEach((th) => {
    th.onclick = () => {
      const tableId = table.dataset.table;
      const key = th.dataset.sort;
      if (tableId && key) toggleSort(tableId, key);
    };
  });
}

function updateSortHeaders(tableId) {
  const table = document.querySelector(`table[data-table="${tableId}"]`);
  if (!table) return;
  const { sortKey, sortDir } = tableState[tableId] || { sortKey: "rank", sortDir: "asc" };
  table.querySelectorAll("th.sortable").forEach((th) => {
    th.classList.remove("sorted-asc", "sorted-desc");
    if (th.dataset.sort === sortKey) {
      th.classList.add(sortDir === "asc" ? "sorted-asc" : "sorted-desc");
    }
  });
}

function renderPeriodTable(periodId) {
  const tbody = ensurePeriodTable(periodId);
  if (!tbody) return;
  const state = tableState[periodId];
  const items = sortItems(state.items, state.sortKey, state.sortDir);

  if (!items.length) {
    tbody.innerHTML = '<tr><td colspan="7" class="loading">暂无数据</td></tr>';
    updateSortHeaders(periodId);
    return;
  }

  tbody.innerHTML = items
    .map((row, idx) => {
      const hl = row.is_high_volume || row.is_high_change ? " row-highlight" : "";
      const pct = row.price_change_pct ?? 0;
      const rank =
        state.sortKey === "rank" && state.sortDir === "asc" ? row.rank : idx + 1;
      return `<tr class="${hl}">
        <td class="rank">${rank}</td>
        <td class="symbol-cell"><strong>${row.symbol}</strong></td>
        <td class="chart-cell">
          <div class="mini-chart" data-symbol="${row.symbol}"><canvas></canvas><span class="chart-status"></span></div>
        </td>
        <td data-value="${row.quote_volume ?? 0}">${row.quote_volume_fmt || row.quote_volume}</td>
        <td class="${pctClass(pct)}" data-value="${pct}">${row.price_change_pct_fmt || pct.toFixed(2) + "%"}</td>
        <td class="funding-cell" data-value="${row.funding_rate_pct ?? 0}">
          <div class="funding-cell-inner">
            <span class="funding-rate-label ${pctClass(row.funding_rate_pct ?? 0)}">${row.funding_rate_fmt || "—"}</span>
            <div class="mini-funding-chart" data-symbol="${row.symbol}"><canvas></canvas></div>
          </div>
        </td>
        <td data-value="${tagText(row)}">${renderTags(row)}</td>
      </tr>`;
    })
    .join("");

  updateSortHeaders(periodId);
  if (currentView === periodId) {
    enqueueCharts(tbody);
    if (typeof enqueueFundingCharts === "function") enqueueFundingCharts(tbody);
  }
}

function setPeriodData(periodId, data) {
  tableState[periodId].items = data.items || [];
  tableState[periodId].meta = {
    period_start: data.period_start,
    period_end: data.period_end,
    updated_at: data.updated_at,
  };
  const pe = document.getElementById(`${periodId}-period`);
  const ue = document.getElementById(`${periodId}-updated`);
  if (pe) pe.textContent = formatPeriod(data.period_start, data.period_end);
  if (ue) ue.textContent = "更新: " + (data.updated_at || "").replace("T", " ").slice(0, 19);
  renderPeriodTable(periodId);
}

function loadPeriodFromLS(periodId) {
  try {
    const raw = localStorage.getItem(PERIOD_LS_PREFIX + periodId);
    if (!raw) return null;
    const obj = JSON.parse(raw);
    if (!obj?.data || Date.now() - (obj.ts || 0) > PERIOD_TTL_MS) return null;
    return obj.data;
  } catch {
    return null;
  }
}

function savePeriodToLS(periodId, data) {
  try {
    localStorage.setItem(
      PERIOD_LS_PREFIX + periodId,
      JSON.stringify({ ts: Date.now(), data })
    );
  } catch {
    /* quota */
  }
}

async function loadPeriod(periodId, force = false) {
  const tbody = ensurePeriodTable(periodId);
  if (!force) {
    const cached = loadPeriodFromLS(periodId);
    if (cached?.items?.length) {
      setPeriodData(periodId, cached);
      if (periodId === "today") {
        document.getElementById("status").textContent = "今日数据（浏览器缓存）";
      }
      return;
    }
  }
  if (tbody) tbody.innerHTML = '<tr><td colspan="7" class="loading">加载中…</td></tr>';
  try {
    const res = await fetch(PERIOD_API[periodId]);
    const data = await res.json();
    savePeriodToLS(periodId, data);
    setPeriodData(periodId, data);
    if (periodId === "today") {
      document.getElementById("status").textContent = force ? "今日数据已手动刷新" : "今日数据已加载";
    }
  } catch (e) {
    if (tbody) tbody.innerHTML = `<tr><td colspan="7" class="error">${e.message}</td></tr>`;
  }
}

function toggleSort(tableId, key) {
  const s = tableState[tableId];
  if (s.sortKey === key) s.sortDir = s.sortDir === "asc" ? "desc" : "asc";
  else {
    s.sortKey = key;
    s.sortDir = key === "symbol" ? "asc" : "desc";
  }
  renderPeriodTable(tableId);
}

function resetSort(tableId) {
  tableState[tableId].sortKey = "rank";
  tableState[tableId].sortDir = "asc";
  renderPeriodTable(tableId);
}

function exportPeriodCsv(periodId) {
  const state = tableState[periodId];
  if (!state.items.length) return alert("暂无数据");
  const items = sortItems(state.items, state.sortKey, state.sortDir);
  const header = ["排名", "合约", "成交额", "涨跌幅%", "资金费率%", "标记"];
  const rows = items.map((r, i) => [
    state.sortKey === "rank" && state.sortDir === "asc" ? r.rank : i + 1,
    r.symbol,
    r.quote_volume ?? "",
    r.price_change_pct ?? "",
    r.funding_rate_pct ?? "",
    tagText(r),
  ]);
  downloadCsv(`binance-${periodId}`, header, rows, state.meta.period_start);
}

function downloadCsv(name, header, rows, periodStart) {
  const esc = (v) => `"${String(v).replace(/"/g, '""')}"`;
  const csv = [header, ...rows].map((r) => r.map(esc).join(",")).join("\n");
  const blob = new Blob(["\ufeff" + csv], { type: "text/csv;charset=utf-8" });
  const a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.download = `${name}-${(periodStart || "").slice(0, 10)}.csv`;
  a.click();
}

function updateStatsHeader(payload) {
  const criteria = document.getElementById("stats-criteria");
  const summary = document.getElementById("stats-summary");
  const desc = document.getElementById("stats-desc");
  if (!payload) return;
  if (criteria) {
    criteria.textContent = payload.ok
      ? payload.period_label || "—"
      : "数据未就绪";
  }
  if (summary) {
    summary.textContent = payload.ok
      ? `共 ${payload.count} 个币种` +
        (payload.parts > 1 ? ` · 企微将分 ${payload.parts} 条发送` : "")
      : "";
  }
  if (desc && payload.message && !payload.ok) {
    desc.textContent = payload.message;
  }
}

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

function renderWecomPreview(payload) {
  const cards = document.getElementById("wecom-preview-cards");
  const meta = document.getElementById("wecom-preview-meta");
  if (!cards) return;
  wecomPreviewData = payload;
  updateStatsHeader(payload);
  if (!payload?.ok) {
    if (meta) meta.textContent = "";
    cards.innerHTML = `<p class="error">${escapeHtml(payload?.message || "无法生成预览")}</p>`;
    return;
  }
  if (meta) {
    meta.textContent =
      `昨日周期 ${payload.period_label || "—"} · 昨/今/前 = 排名+涨跌幅` +
      (payload.parts > 1 ? ` · 超长将分 ${payload.parts} 条企微消息` : "");
  }
  if (!payload.items?.length) {
    cards.innerHTML = '<p class="loading">暂无三日交集币种</p>';
    return;
  }
  cards.innerHTML = payload.items
    .map((it) => {
      const line = (label, row) => {
        if (!row?.rank) return `${label}—`;
        const pct = row.price_change_pct ?? 0;
        const pctStr = row.price_change_pct_fmt || `${pct.toFixed(2)}%`;
        return `${label}<strong>#${row.rank}</strong><span class="${pctClass(pct)}">${pctStr}</span>`;
      };
      return `
    <article class="wecom-card">
      <header class="wecom-card-head">
        <span class="wecom-seq">${it.rank}</span>
        <strong class="wecom-symbol">${it.symbol}</strong>
      </header>
      <p class="wecom-compact-line">${line("昨 ", it.yesterday)} ${line("今 ", it.today)} ${line("前 ", it.daybefore)}</p>
    </article>`;
    })
    .join("");
}

async function loadWecomPreview() {
  const cards = document.getElementById("wecom-preview-cards");
  if (cards) cards.innerHTML = '<p class="loading">生成预览…</p>';
  try {
    const res = await fetch("/api/push/preview");
    const data = await res.json();
    renderWecomPreview(data);
  } catch (e) {
    if (cards) cards.innerHTML = `<p class="error">${e.message}</p>`;
  }
}

async function testWecomPush() {
  const el = document.getElementById("push-status");
  if (el) el.textContent = "推送中…";
  try {
    const res = await fetch("/api/push/test", { method: "POST" });
    const data = await res.json();
    if (!res.ok) {
      const detail = data.detail;
      const msg =
        typeof detail === "string"
          ? detail
          : Array.isArray(detail)
            ? detail.map((x) => x.msg).join("; ")
            : data.message || res.statusText;
      throw new Error(msg);
    }
    if (el) el.textContent = data.message || "推送成功";
    await loadWecomPreview();
  } catch (e) {
    if (el) el.textContent = "推送失败";
    alert(e.message);
  }
}

async function loadStats() {
  await loadWecomPreview();
}

function exportStatsCsv() {
  const items = wecomPreviewData?.items;
  if (!items?.length) return alert("暂无数据");
  const header = [
    "合约",
    "今日排名", "今日涨跌%",
    "昨日排名", "昨日涨跌%",
    "前日排名", "前日涨跌%",
  ];
  const rows = items.map((r) => [
    r.symbol,
    r.today?.rank, r.today?.price_change_pct,
    r.yesterday?.rank, r.yesterday?.price_change_pct,
    r.daybefore?.rank, r.daybefore?.price_change_pct,
  ]);
  downloadCsv("binance-wecom-push", header, rows, wecomPreviewData?.period_label);
}

function switchView(view) {
  currentView = view;
  document.querySelectorAll(".nav-item").forEach((b) => {
    b.classList.toggle("active", b.dataset.view === view);
  });
  document.querySelectorAll(".view-panel").forEach((p) => {
    p.classList.toggle("active", p.id === `view-${view}`);
  });

  if (view === "stats") {
    if (!wecomPreviewData) loadStats();
    return;
  }

  const tbody = document.getElementById(`${view}-body`);
  if (tbody && tableState[view].items.length) {
    renderPeriodTable(view);
    enqueueCharts(tbody);
    if (typeof enqueueFundingCharts === "function") enqueueFundingCharts(tbody);
  } else if (!tableState[view].items.length) {
    loadPeriod(view);
  }
}

document.getElementById("main-nav").addEventListener("click", (e) => {
  const btn = e.target.closest(".nav-item");
  if (btn?.dataset.view) switchView(btn.dataset.view);
});

document.querySelectorAll("[data-export]").forEach((btn) => {
  btn.addEventListener("click", () => exportPeriodCsv(btn.dataset.export));
});
document.querySelectorAll("[data-reset]").forEach((btn) => {
  btn.addEventListener("click", () => resetSort(btn.dataset.reset));
});

document.getElementById("btn-refresh").addEventListener("click", async () => {
  document.getElementById("status").textContent = "刷新中…";
  await fetch("/api/refresh/today", { method: "POST" });
  await loadPeriod("today", true);
  if (currentView === "stats") await loadStats();
});

document.getElementById("btn-reload-stats")?.addEventListener("click", () => {
  wecomPreviewData = null;
  loadStats();
});
document.getElementById("btn-export-stats")?.addEventListener("click", exportStatsCsv);
document.getElementById("btn-push-test")?.addEventListener("click", testWecomPush);

loadPeriod("today");
loadPeriod("yesterday");
loadPeriod("daybefore");