re-xxm/reaction_board/web/static/views/home.js

import { api } from "../api.js";
import {
  emptyState, cover, sectionHeader, videoCard,
} from "../components.js";
import {
  escapeHtml, formatCount, formatDate, formatDelta, formatDateTime,
  formatPercent, formatScore,
} from "../format.js";

function statChip(label, value, tone = "") {
  return `<div class="live-chip ${tone}">
    <span>${escapeHtml(label)}</span><strong>${value}</strong>
  </div>`;
}

function heatStrip(items) {
  if (!items.length) return emptyState("暂无热度数据", "完成一次快照后这里会出现榜单。");
  return `<div class="heat-strip">
    ${items.map((item, index) => `
      <a class="heat-card" href="/video/${item.aid}">
        <span class="heat-rank">${index + 1}</span>
        ${cover(item, "heat-thumb")}
        <strong class="heat-title">${escapeHtml(item.title)}</strong>
        <span class="heat-meta">${escapeHtml(item.up_name || "未知 UP")} · ${formatCount(item.metrics?.view)} 播放</span>
        <span class="heat-score">热度 ${formatScore(item.heat)} · 前 ${Math.max(0, 100 - (item.heat_percentile || 0)).toFixed(0)}%</span>
      </a>`).join("")}
  </div>`;
}

function capacity(folders) {
  if (!folders.length) return "";
  return `<section class="panel capacity-panel">
    ${sectionHeader("年度收藏夹")}
    ${folders.map((folder) => `
      <div class="capacity-row">
        <div class="capacity-label">
          <span>${escapeHtml(folder.title || String(folder.year))}</span>
          <strong>${formatCount(folder.media_count)} / ${formatCount(folder.capacity)}</strong>
        </div>
        <div class="capacity-track"><span style="width:${Math.min(100, folder.ratio * 100)}%"
          class="${folder.warning ? "warning" : ""}"></span></div>
        ${folder.warning ? `<p class="warning-text">接近容量上限，请准备新建年度收藏夹。</p>` : ""}
      </div>`).join("")}
  </section>`;
}

export async function renderHome(root) {
  const [overview, added, published, heat, growth] = await Promise.all([
    api("/api/overview"),
    api("/api/videos", { sort: "added", within_days: 7, limit: 5 }),
    api("/api/videos", { sort: "published", within_days: 14, limit: 5 }),
    api("/api/videos", { sort: "heat", limit: 5 }),
    api("/api/videos", { sort: "growth", growth_days: 7, limit: 3 }),
  ]);

  const pending = overview.counts.candidates_pending || 0;
  const fans = overview.fans;
  const firstDay = overview.is_first_day;
  const addedLabel = firstDay
    ? formatCount(overview.initial_import_count)
    : formatCount(overview.added_today);
  const health = overview.snapshot_health || { total: 0, ok: 0, failed: 0 };
  const addedNote = firstDay
    ? `<p class="section-note">首次导入共 ${formatCount(overview.initial_import_count)} 条，
       按发布时间倒序展示。后续每日增量从下一次快照开始。</p>`
    : `<p class="section-note">按入库时间排序，展示最近 7 天新收录的视频。</p>`;

  root.innerHTML = `<section class="page home-page">
    <header class="page-head home-head">
      <div>
        <h1>最新动态</h1>
        <p class="page-sub">数据 ${escapeHtml(overview.data_date || "—")} ·
          采集 ${health.ok}/${health.total}${health.failed ? ` · 失败 ${health.failed}` : ""}</p>
      </div>
      <button class="icon-button" id="refresh-home" type="button" title="刷新">刷新</button>
    </header>

    <div class="live-strip">
      ${statChip(firstDay ? "首次导入" : "今日入库", escapeHtml(addedLabel), "accent")}
      ${statChip("播放增量", overview.view_delta_available ? formatDelta(overview.view_delta) : "—")}
      ${statChip("粉丝日增", fans?.delta_1d === null || fans?.delta_1d === undefined ? "—" : formatDelta(fans.delta_1d))}
      ${statChip("待确认候选", formatCount(pending), pending ? "warning" : "")}
    </div>

    ${pending ? `<a class="notice-row" href="/candidates">
      <strong>${formatCount(pending)} 条候选待确认</strong>
      <span>请在 Telegram 中处理 →</span>
    </a>` : ""}

    <section class="panel">
      <div class="section-head">
        <h2>最新入库</h2>
        <a class="text-link" href="/rank?scope=video&sort=added&within_days=7">查看全部</a>
      </div>
      ${addedNote}
      <div class="video-list">
        ${added.items.length ? added.items.map((item) => videoCard(item)).join("")
          : emptyState("最近 7 天没有新入库视频", "收藏夹同步或搜索确认后会出现在这里。")}
      </div>
    </section>

    <section class="panel">
      <div class="section-head">
        <h2>最近发布</h2>
        <a class="text-link" href="/rank?scope=video&sort=published&within_days=14">查看全部</a>
      </div>
      <p class="section-note">按视频发布时间排序，与入库时间无关。</p>
      <div class="video-list">
        ${published.items.length ? published.items.map((item) => videoCard(item)).join("")
          : emptyState("最近 14 天没有新发布视频", "搜索发现的新视频会逐步补充。")}
      </div>
    </section>

    <section class="panel">
      <div class="section-head">
        <h2>增长动态</h2>
        <a class="text-link" href="/rank?scope=video&sort=growth&growth_days=7">增长榜</a>
      </div>
      ${growth.available && growth.items.length
        ? `<div class="video-list">${growth.items.map((item, index) => videoCard(item, { rank: index + 1 })).join("")}</div>`
        : emptyState("需要至少 2 天快照", growth.reason || "当前只有 1 个数据点，明天开始显示播放增量。")}
    </section>

    <section class="panel">
      <div class="section-head">
        <h2>热度速览</h2>
        <a class="text-link" href="/rank?scope=video&sort=heat">完整榜单</a>
      </div>
      ${heatStrip(heat.items)}
    </section>

    ${capacity(overview.folders || [])}

    <section class="panel status-panel">
      ${sectionHeader("采集状态")}
      <div class="status-grid">
        <div><span>快照完成</span><strong>${overview.snapshot_completed_today ? "是" : "否"}</strong></div>
        <div><span>数据日期</span><strong>${escapeHtml(overview.data_date || "—")}</strong></div>
        <div><span>粉丝</span><strong>${formatCount(fans?.follower)}</strong></div>
        <div><span>7 日粉丝</span><strong>${fans?.delta_7d === null || fans?.delta_7d === undefined ? "—" : formatDelta(fans.delta_7d)}</strong></div>
        <div><span>最近快照</span><strong>${escapeHtml(formatDateTime(overview.tasks?.snapshot?.finished_at))}</strong></div>
        <div><span>最近发现</span><strong>${escapeHtml(formatDateTime(overview.tasks?.discovery?.finished_at))}</strong></div>
      </div>
      <a class="text-link" href="/system">查看系统状态 →</a>
    </section>
  </section>`;

  root.querySelector("#refresh-home")?.addEventListener("click", () => window.location.reload());
}