---
import Layout from "@layouts/Layout.astro";
import TitleBar from "@components/TitleBar.astro";
import { format } from "date-fns";
import StatRow from "@components/VideoInfoPage/StatRow.astro";

const { id } = Astro.params;

if (!id) {
	Astro.response.status = 404;
	return new Response(null, { status: 404 });
}

const backendURL = import.meta.env.BACKEND_URL;
const res = await fetch(backendURL + `video/${id}/info`);
const data = await res.json();
---

<Layout title={`${data.title ?? data.bvid} - 视频信息`}>
	<TitleBar />
	<main class="flex flex-col items-center min-h-screen gap-8 mt-10 md:mt-6 relative z-0 overflow-x-auto pb-8">
		<div class="w-full lg:max-w-4xl lg:mx-auto lg:p-6 px-4">
			<h2 class="text-lg md:text-2xl mb-2">
                <a href={`https://www.bilibili.com/video/${data.bvid}`}>{data.title}</a>
            </h2>
			<p
				class="text-sm md:text-base font-normal text-on-surface-variant
                dark:text-dark-on-surface-variant mb-4"
			>
				<span>{data.bvid} · av{data.aid}</span><br />
				<span>
					发布于
					{format(new Date(data.pubdate * 1000), "yyyy-MM-dd HH:mm:ss")}
				</span><br />
				<span>播放：{(data.stat?.view ?? 0).toLocaleString()}</span> ·
				<span>弹幕：{(data.stat?.danmaku ?? 0).toLocaleString()}</span>
                <br/>
                <span>分区: {data.tname}, tid{data.tid} · v2: {data.tname_v2}, tid{data.tid_v2}</span>
			</p>
			<img src={data.pic} referrerpolicy="no-referrer" class="rounded-lg" />

			<h3 class="font-medium text-lg mt-6 mb-1">简介</h3>
			<pre
				class="max-w-full wrap-anywhere break-all text-on-surface-variant
                text-sm md:text-base whitespace-pre-wrap dark:text-dark-on-surface-variant
                font-zh">{data.desc}</pre>

			<div class="mb-6 mt-4">
				<h2 class="mb-2 text-xl font-medium">统计数据</h2>
				<div class="flex flex-col gap-1">
					<StatRow title="播放" description={data.stat?.view} />
					<StatRow title="点赞" description={data.stat?.like} />
					<StatRow title="收藏" description={data.stat?.favorite} />
					<StatRow title="硬币" description={data.stat?.coin} />
					<StatRow title="评论" description={data.stat?.reply} />
					<StatRow title="弹幕" description={data.stat?.danmaku} />
					<StatRow title="分享" description={data.stat?.share} />
				</div>
			</div>
		</div>
	</main>
</Layout>
