import { api } from "../api.js";
import {
  avatar, badge, emptyState, sectionHeader, videoCard,
} from "../components.js";
import { barChart, lineChart, themeColor } from "../charts.js";
import {
  escapeAttr, escapeHtml, formatCount, formatDate, formatPercent,
} from "../format.js";
import { replaceQuery } from "../router.js";

const SORTS = [
  ["view", "播放"], ["efficiency", "内容效率"], ["latest", "最新发布"],
  ["interaction", "互动率"],
];

function sortedVideos(videos, sort) {
  const items = [...videos];
  if (sort === "latest") {
    items.sort((a, b) => b.pubdate - a.pubdate);
  } else if (sort === "interaction") {
    items.sort((a, b) => (b.interaction_rate || 0) - (a.interaction_rate || 0));
  } else if (sort === "efficiency") {
    items.sort((a, b) => (b.efficiency || 0) - (a.efficiency || 0));
  } else {
    items.sort((a, b) => (b.metrics?.view || 0) - (a.metrics?.view || 0));
  }
  return items;
}

export async function renderUp(root, { params, query }) {
  const mid = Number(params[0]);
  const sort = query.get("sort") || "view";
  const up = await api(`/api/ups/${mid}`);
  const videos = sortedVideos(up.videos || [], sort);
  const topForBar = [...(up.videos || [])]
    .sort((a, b) => (b.metrics?.view || 0) - (a.metrics?.view || 0))
    .slice(0, 12);

  root.innerHTML = `<section class="page up-page">
    <header class="page-head">
      <a class="back-link" href="/ups">← 返回 UP 榜</a>
      <a class="button ghost" href="${escapeAttr(up.space_url)}" target="_blank" rel="noreferrer">B 站空间</a>
    </header>

    <div class="detail-hero compact-hero">
      <div class="up-hero-head">
        ${avatar(up, "hero-avatar")}
        <div class="detail-hero-body">
          <h1>${escapeHtml(up.up_name || `UP ${mid}`)}</h1>
          <div class="detail-meta">
            <span>mid ${up.up_mid}</span>
            <span>首RE时间 ${escapeHtml(formatDate(up.first_pubdate))}</span>
            ${up.blacklisted ? badge("黑名单 · 仅影响发现", "warning") : ""}
          </div>
          <p class="section-note">最近发布 ${escapeHtml(formatDate(up.latest_pubdate))}</p>
        </div>
      </div>
    </div>

    <div class="mini-stats up-stats">
      <div><span>视频数</span><strong>${formatCount(up.video_count)}</strong></div>
      <div><span>总时长</span><strong>${up.content_hours == null ? "—" : `${formatCount(up.content_hours)} 小时`}</strong></div>
      <div><span>播放/小时</span><strong>${formatCount(up.views_per_hour)}</strong></div>
      <div><span>总播放</span><strong>${formatCount(up.total_views)}</strong></div>
      <div><span>平均播放</span><strong>${formatCount(up.avg_views)}</strong></div>
      <div><span>总互动</span><strong>${formatCount(up.total_interactions)}</strong></div>
      <div><span>平均互动率</span><strong>${formatPercent(up.avg_interaction)}</strong></div>
      <div><span>粉丝（入库时）</span><strong>${formatCount(up.up_follower)}</strong></div>
      <div><span>当前粉丝</span><strong>${formatCount(up.follower_latest)}</strong></div>
    </div>

    <section class="panel chart-panel">
      ${sectionHeader("该 UP 视频总播放趋势")}
      ${up.series?.dates?.length ? `<div class="chart" id="up-trend"></div>` : emptyState("暂无趋势", "该 UP 还没有成功快照。")}
      <p class="section-note">按该 UP 全部视频的每日播放合计绘制；缺失日期断开。</p>
    </section>

    ${videos.length > 1 ? `<section class="panel chart-panel">
      ${sectionHeader("单视频播放对比")}
      ${topForBar.length ? `<div class="chart chart-tall" id="up-bars"></div>` : emptyState("暂无视频数据")}
    </section>` : ""}

    <section class="panel">
      <div class="section-head">
        <h2>视频列表</h2>
        <select class="select" id="up-sort">
          ${SORTS.map(([value, label]) => `<option value="${value}" ${sort === value ? "selected" : ""}>${label}</option>`).join("")}
        </select>
      </div>
      <div class="video-list">
        ${videos.length ? videos.map((item) => videoCard(item)).join("") : emptyState("没有视频")}
      </div>
    </section>
  </section>`;

  const trendElement = root.querySelector("#up-trend");
  if (trendElement) {
    lineChart(trendElement, {
      dates: up.series.dates,
      values: up.series.views,
      name: "总播放",
      color: themeColor("accent"),
      scale: true,
    });
  }
  const barsElement = root.querySelector("#up-bars");
  if (barsElement) {
    barChart(barsElement, {
      labels: topForBar.map((item) => (item.title || `#${item.aid}`).slice(0, 12)),
      values: topForBar.map((item) => item.metrics?.view || 0),
      name: "播放",
      color: themeColor("blue"),
    });
  }
  root.querySelector("#up-sort")?.addEventListener("change", (event) => {
    replaceQuery({ sort: event.target.value });
  });
}