const REFRESH_MS = 60_000;

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

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

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

function renderTable(tbody, items) {
  if (!items || !items.length) {
    tbody.innerHTML = '<tr><td colspan="5" class="loading">暂无数据</td></tr>';
    return;
  }
  tbody.innerHTML = items
    .map((row) => {
      const highlight =
        row.is_high_volume || row.is_high_change ? " row-highlight" : "";
      const pct = row.price_change_pct ?? 0;
      return `<tr class="${highlight}">
        <td class="rank">${row.rank}</td>
        <td><strong>${row.symbol}</strong></td>
        <td>${row.quote_volume_fmt || row.quote_volume}</td>
        <td class="${pctClass(pct)}">${row.price_change_pct_fmt || pct.toFixed(2) + "%"}</td>
        <td>${renderTags(row)}</td>
      </tr>`;
    })
    .join("");
}

async function loadYesterday() {
  const body = document.getElementById("yesterday-body");
  body.innerHTML = '<tr><td colspan="5" class="loading">加载中…</td></tr>';
  try {
    const res = await fetch("/api/yesterday/top30");
    const data = await res.json();
    document.getElementById("yesterday-period").textContent = formatPeriod(
      data.period_start,
      data.period_end
    );
    document.getElementById("yesterday-updated").textContent =
      "更新: " + (data.updated_at || "").replace("T", " ").slice(0, 19);
    renderTable(body, data.items);
  } catch (e) {
    body.innerHTML = `<tr><td colspan="5" class="error">加载失败: ${e.message}</td></tr>`;
  }
}

async function loadToday() {
  const body = document.getElementById("today-body");
  try {
    const res = await fetch("/api/today/top30");
    const data = await res.json();
    document.getElementById("today-period").textContent = formatPeriod(
      data.period_start,
      data.period_end
    );
    document.getElementById("today-updated").textContent =
      "更新: " + (data.updated_at || "").replace("T", " ").slice(0, 19);
    renderTable(body, data.items);
    document.getElementById("status").textContent = "今日数据已刷新";
  } catch (e) {
    body.innerHTML = `<tr><td colspan="5" class="error">加载失败: ${e.message}</td></tr>`;
    document.getElementById("status").textContent = e.message;
  }
}

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

loadYesterday();
loadToday();
setInterval(loadToday, REFRESH_MS);