---
import Layout from "@layouts/Layout.astro";
import TitleBar from "@components/TitleBar.astro";
import { format } from "date-fns";
import { zhCN } from "date-fns/locale";
import MetadataRow from "@components/InfoPage/MetadataRow.astro";
import { getAllSnapshots } from "src/db/snapshots/getAllSnapshots";
import { getAidFromBV } from "src/db/bilibili_metadata/getAidFromBV";
import { getVideoMetadata } from "src/db/bilibili_metadata/getVideoMetadata";
import { aidExists as idExists } from "src/db/bilibili_metadata/aidExists";

const { id } = Astro.params;

async function getVideoAid(id: string) {
    if (id.startsWith("av")) {
        return parseInt(id.slice(2));
    } else if (id.startsWith("BV")) {
        return getAidFromBV(id);
    }
    return parseInt(id);
}

if (!id) {
    Astro.response.status = 404;
    return new Response(null, { status: 404 });
}
const aid = await getVideoAid(id);
if (!aid || isNaN(aid)) {
    Astro.response.status = 404;
    return new Response(null, { status: 404 });
}
const aidExists = await idExists(aid);
if (!aidExists) {
    Astro.response.status = 404;
    return new Response(null, { status: 404 });
}
const videoInfo = await getVideoMetadata(aid);
const snapshots = await getAllSnapshots(aid);
---

<Layout>
    <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">
            <h1 class="text-2xl font-medium ml-2 mb-4">
                视频信息: <a href={`https://www.bilibili.com/video/av${aid}`} class="underline">av{aid}</a>
            </h1>

            <div class="mb-6">
                <h2 class="px-2 mb-2 text-xl font-medium">基本信息</h2>
                <div class="overflow-x-auto max-w-full px-2">
                    <table class="table-fixed">
                        <tbody>
                            <MetadataRow title="ID" description={videoInfo?.id} />
                            <MetadataRow title="av 号" description={videoInfo?.aid} />
                            <MetadataRow title="BV 号" description={videoInfo?.bvid} />
                            <MetadataRow title="标题" description={videoInfo?.title} />
                            <MetadataRow title="描述" description={videoInfo?.description} />
                            <MetadataRow title="UID" description={videoInfo?.uid} />
                            <MetadataRow title="标签" description={videoInfo?.tags} />
                            <MetadataRow
                                title="发布时间"
                                description={format(new Date(videoInfo?.published_at), "yyyy-MM-dd HH:mm:ss", {
                                    locale: zhCN,
                                })}
                            />
                            <MetadataRow title="时长 (秒)" description={videoInfo?.duration} />
                            <MetadataRow
                                title="创建时间"
                                description={format(new Date(videoInfo?.created_at), "yyyy-MM-dd HH:mm:ss", {
                                    locale: zhCN,
                                })}
                            />
                            <MetadataRow title="封面" description={videoInfo?.cover_url} />
                        </tbody>
                    </table>
                </div>
            </div>

            <div>
                <h2 class="px-2 mb-2 text-xl font-medium">播放量历史数据</h2>
                {
                    snapshots && snapshots.length > 0 ? (
                        <div class="overflow-x-auto px-2">
                            <table class="table-auto w-full">
                                <thead>
                                    <tr>
                                        <th class="border dark:border-zinc-500 px-4 py-2 font-medium">创建时间</th>
                                        <th class="border dark:border-zinc-500 px-4 py-2 font-medium">观看</th>
                                        <th class="border dark:border-zinc-500 px-4 py-2 font-medium">硬币</th>
                                        <th class="border dark:border-zinc-500 px-4 py-2 font-medium">点赞</th>
                                        <th class="border dark:border-zinc-500 px-4 py-2 font-medium">收藏</th>
                                        <th class="border dark:border-zinc-500 px-4 py-2 font-medium">分享</th>
                                        <th class="border dark:border-zinc-500 px-4 py-2 font-medium">弹幕</th>
                                        <th class="border dark:border-zinc-500 px-4 py-2 font-medium">评论</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {snapshots.map((snapshot) => (
                                        <tr>
                                            <td class="border dark:border-zinc-500 px-4 py-2">
                                                {format(new Date(snapshot.created_at), "yyyy-MM-dd HH:mm:ss", {
                                                    locale: zhCN,
                                                })}
                                            </td>
                                            <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.views}</td>
                                            <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.coins}</td>
                                            <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.likes}</td>
                                            <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.favorites}</td>
                                            <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.shares}</td>
                                            <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.danmakus}</td>
                                            <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.replies}</td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    ) : (
                        <p>暂无历史数据。</p>
                    )
                }
            </div>
        </div>
    </main>
</Layout>