import { api } from "../api.js";
import { emptyState, mediaCard } from "../components.js";
import {
  escapeAttr, escapeHtml, formatCount, formatDate, formatDelta,
  formatDuration, formatPercent, formatScore,
} from "../format.js";

function statChip(label, value, { href = null, tone = "" } = {}) {
  const inner = `<span>${escapeHtml(label)}</span><strong>${value}</strong>`;
  if (href) {
    return `<a class="live-chip ${tone}" href="${escapeAttr(href)}">${inner}</a>`;
  }
  return `<div class="live-chip ${tone}">${inner}</div>`;
}

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

function publishedCard(item) {
  return mediaCard(item, {
    meta: `${escapeHtml(item.up_name || "未知 UP")} · ${escapeHtml(formatDate(item.pubdate))} · ${escapeHtml(formatDuration(item.duration))}`,
    highlight: `${formatCount(item.metrics?.view)} 播放 · 互动 ${formatPercent(item.interaction_rate)}`,
  });
}

function growthCard(item, index) {
  const delta = item.growth?.delta;
  const deltaText = delta === null || delta === undefined ? "" : ` · ${formatDelta(delta)}`;
  return mediaCard(item, {
    rank: index + 1,
    meta: `${escapeHtml(item.up_name || "未知 UP")} · ${escapeHtml(formatDate(item.pubdate))} · ${escapeHtml(formatDuration(item.duration))}`,
    highlight: `${formatCount(item.metrics?.view)} 播放${deltaText}`,
  });
}

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

  const fans = overview.fans;
  const firstDay = overview.is_first_day;
  const addedLabel = firstDay
    ? formatCount(overview.initial_import_count)
    : formatCount(overview.added_today);
  const activeCount = overview.counts?.active || 0;

  root.innerHTML = `<section class="page home-page">
    <header class="page-head home-head">
      <div>
        <h1>最新动态</h1>
        <p class="page-sub">收录视频 ${formatCount(activeCount)}</p>
      </div>
      <button class="icon-button" id="refresh-home" type="button" title="刷新">刷新</button>
    </header>

    <div class="live-strip">
      ${statChip(firstDay ? "首次导入" : "今日入库", escapeHtml(addedLabel), {
        href: "/videos?sort=added&within_days=7", tone: "accent",
      })}
      ${statChip("播放增量", overview.view_delta_available ? formatDelta(overview.view_delta) : "—", {
        href: "/videos?sort=growth&growth_days=1",
      })}
      ${statChip("7 日粉丝变化", fans?.delta_7d === null || fans?.delta_7d === undefined ? "—" : formatDelta(fans.delta_7d), {
        href: "/fans",
      })}
      ${statChip("数据日期", escapeHtml(overview.data_date || "—"))}
    </div>

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

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

    <section class="panel">
      <div class="section-head">
        <h2>热度速览</h2>
        <a class="text-link" href="/videos?sort=heat">完整榜单</a>
      </div>
      ${heatGrid(heat.items)}
    </section>
  </section>`;

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