// ---------- 6c. Subscriptions ----------
PAGES.subscriptions = async () => {
  const ws = document.getElementById("workspace");
  ws.innerHTML = `
    <div class="card p-4">
      <div class="flex gap-2 flex-wrap items-center">
        <input id="sb-site" placeholder="site_code" class="border border-slate-200 rounded px-3 py-1.5 text-sm w-32 mono"/>
        <input id="sb-q" placeholder="target_code / 栏目名" class="border border-slate-200 rounded px-3 py-1.5 text-sm w-72"/>
        <button onclick="loadSubscriptions()" class="bg-[#1D4ED8] hover:bg-blue-700 text-white text-sm rounded px-4 py-1.5">刷新</button>
        <button onclick="go('registry')" class="text-sm rounded px-4 py-1.5 border border-slate-200 hover:bg-slate-50">去栏目目录</button>
      </div>
    </div>
    <div id="sb-results"></div>`;
  loadSubscriptions();
};
const SUBS_STATE = { page: 1, pageSize: 20, rows: [] };

async function loadSubscriptions() {
  const qs = new URLSearchParams({ limit: "500" });
  [["site","sb-site"],["q","sb-q"]].forEach(([k,id]) => {
    const v = document.getElementById(id).value.trim();
    if (v) qs.set(k, v);
  });
  const box = document.getElementById("sb-results");
  box.innerHTML = `<div class="text-slate-400 text-sm">加载中…</div>`;
  try {
    const { items } = await api("/api/subscriptions?" + qs);
    SUBS_STATE.rows = items;
    SUBS_STATE.page = 1;
    _renderSubsTable();
  } catch (e) {
    box.innerHTML = `<div class="card p-6 text-sm text-red-600">加载失败：${esc(e.message)}</div>`;
  }
}

function _renderSubsTable() {
  const { rows, page, pageSize } = SUBS_STATE;
  const total = rows.length;
  const slice = rows.slice((page - 1) * pageSize, page * pageSize);
  document.getElementById("sb-results").innerHTML = card({
    title: "栏目订阅",
    body: `
      <table class="w-full text-sm">
        <thead class="bg-slate-50 text-slate-500 text-xs uppercase">
          <tr>
            <th class="text-left px-4 py-2">站点</th>
            <th class="text-left px-4 py-2">栏目</th>
            <th class="text-left px-4 py-2">target</th>
            <th class="text-left px-4 py-2">channel_path</th>
            <th class="px-4 py-2">分类</th>
            <th class="px-4 py-2">状态</th>
          </tr>
        </thead>
        <tbody>
          ${slice.map(row => `
            <tr class="border-t border-slate-100 hover:bg-slate-50/60">
              <td class="px-4 py-2 text-xs"><div>${esc(row.site_name || "")}</div><div class="mono text-slate-500">${esc(row.site_code || "")}</div></td>
              <td class="px-4 py-2 text-xs"><div>${esc(row.column_name || "—")}</div><div class="mono text-slate-500">${esc(row.column_id || "")}</div></td>
              <td class="px-4 py-2 text-xs"><div class="mono">${esc(row.target_code || "")}</div><div class="text-slate-500">${esc(row.target_name || "—")}</div></td>
              <td class="px-4 py-2 text-xs text-slate-500 max-w-[300px] truncate" title="${esc(row.channel_path || row.column_path || "")}">${esc(row.channel_path || row.column_path || "—")}</td>
              <td class="px-4 py-2 text-center text-xs">${row.content_category ? pill(row.content_category, "blue") : "—"}</td>
              <td class="px-4 py-2 text-center">${row.enabled ? pill("启用", "green") : pill("停用", "slate")}</td>
            </tr>`).join("") || `<tr><td colspan="6" class="p-8 text-center text-slate-400">暂无已订阅栏目</td></tr>`}
        </tbody>
      </table>
      <div id="sb-pager"></div>`
  });
  renderPager({
    container: document.getElementById("sb-pager"),
    total, page, pageSize,
    summary: `共 ${total} 条订阅`,
    onPage: p => { SUBS_STATE.page = p; _renderSubsTable(); },
  });
}
