---
export const prerender = true;


import { LinkPresets } from "@constants/link-presets";
import { LinkPreset } from "@/types/config";
import { siteConfig } from "@/config";
import I18nKey from "@i18n/i18nKey";
import { i18n } from "@i18n/translation";
import ImageWrapper from "@components/common/imageWrapper.astro";
import GridLayout from "@layouts/grid.astro";
import BackwardButton from "@components/backwardButton.astro";


const pageTitle = LinkPresets[LinkPreset.Anime].name;
const pageDescription = LinkPresets[LinkPreset.Anime].description;

// Bangumi API配置
const BANGUMI_USER_ID = siteConfig.bangumi?.userId || "";
const BANGUMI_API_BASE = "https://api.bgm.tv";

// 检查是否配置了有效的 Bangumi 用户 ID
const isBangumiConfigured = 
    BANGUMI_USER_ID && 
    BANGUMI_USER_ID !== "your-bangumi-id" && 
    BANGUMI_USER_ID !== "your-user-id";

// 获取单个条目相关人员信息
async function fetchSubjectPersons(subjectId: number) {
    if (!isBangumiConfigured) return [];
    try {
        const response = await fetch(
            `${BANGUMI_API_BASE}/v0/subjects/${subjectId}/persons`,
        );
        const data = await response.json();
        return Array.isArray(data) ? data : [];
    } catch (error) {
        console.error(`Error fetching subject ${subjectId} persons:`, error);
        return [];
    }
}

// 获取Bangumi收藏列表
async function fetchBangumiCollection(
    userId: string,
    subjectType: number,
    type: number,
) {
    if (!isBangumiConfigured) return null;
    try {
        let allData: any[] = [];
        let offset = 0;
        const limit = 50; // 每页获取的数量
        let hasMore = true;

        // 循环获取所有数据
        while (hasMore) {
            const response = await fetch(
                `${BANGUMI_API_BASE}/v0/users/${userId}/collections?subject_type=${subjectType}&type=${type}&limit=${limit}&offset=${offset}`,
            );
            if (!response.ok) {
                throw new Error(`Bangumi API error: ${response.status}`);
            }
            const data = await response.json();

            // 添加当前页数据到总数据中
            if (data.data && data.data.length > 0) {
                allData = [...allData, ...data.data];
            }
            if (!data.data || data.data.length < limit) {
                hasMore = false;
            } else {
                offset += limit;
            }
            // 防止请求过于频繁
            await new Promise((resolve) => setTimeout(resolve, 100));
        }
        return { data: allData };
    } catch (error) {
        console.error("Error fetching Bangumi data:", error);
        return null;
    }
}

// 获取Bangumi数据转换为页面所需格式
async function processBangumiData(data: any, status: string) {
    if (!data || !data.data) return [];

    // 为每个条目获取详细信息
    const detailedItems = await Promise.all(
        data.data.map(async (item: any) => {
            // 获取相关人员信息
            const subjectPersons = await fetchSubjectPersons(item.subject_id);
            // 获取年份信息
            const year = item.subject?.date || "Unknown";
            // 获取评分
            const rating = item.rate ? Number.parseFloat(item.rate.toFixed(1)) : 0;
            // 获取进度信息
            const progress = item.ep_status || 0;
            const totalEpisodes = item.subject?.eps || progress;
            // 从相关人员中获取制作方信息
            let studio = "Unknown";
            if (Array.isArray(subjectPersons)) {
                // 定义筛选优先级顺序
                const priorities = ["动画制作", "製作", "制作"];
                for (const relation of priorities) {
                    const match = subjectPersons.find(
                        (person) => person.relation === relation,
                    );
                    if (match?.name) {
                        studio = match.name;
                        break;
                    }
                }
            }

            return {
                title: item.subject?.name_cn || item.subject?.name || "Unknown Title",
                status: status,
                rating: rating,
                cover: item.subject?.images?.medium || "/assets/anime/default.webp",
                description: (
                    item.subject?.short_summary ||
                    item.subject?.name_cn ||
                    ""
                ).trimStart(),
                episodes: `${totalEpisodes} episodes`,
                year: year,
                genre: item.subject?.tags
                    ? item.subject.tags.slice(0, 3).map((tag: any) => tag.name)
                    : ["Unknown"],
                studio: studio,
                link: `https://bgm.tv/subject/${item.subject.id}` || "#",
                progress: progress,
                totalEpisodes: totalEpisodes,
                startDate: item.subject?.date || "",
                endDate: item.subject?.date || "",
            };
        }),
    );
    return detailedItems;
}

// 获取Bangumi番剧列表
const watchingData = await fetchBangumiCollection(BANGUMI_USER_ID, 2, 3);
const completedData = await fetchBangumiCollection(BANGUMI_USER_ID, 2, 2);

const watchingList = watchingData
    ? await processBangumiData(watchingData, "watching")
    : [];
const completedList = completedData
    ? await processBangumiData(completedData, "completed")
    : [];

const animeList = [...watchingList, ...completedList];

// 获取状态的翻译文本和样式
function getStatusInfo(status: string) {
    switch (status) {
        case "watching":
            return {
                text: i18n(I18nKey.animeStatusWatching),
                class:
                    "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300",
                icon: "▶",
            };
        case "completed":
            return {
                text: i18n(I18nKey.animeStatusCompleted),
                class:
                    "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
                icon: "✓",
            };
        case "planned":
            return {
                text: i18n(I18nKey.animeStatusPlanned),
                class:
                    "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
                icon: "⏰",
            };
        default:
            return {
                text: status,
                class: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
                icon: "?",
            };
    }
}

// 计算统计数据
const stats = {
    total: animeList.length,
    watching: animeList.filter((anime) => anime.status === "watching").length,
    completed: animeList.filter((anime) => anime.status === "completed").length,
    avgRating: (() => {
        const ratedAnime = animeList.filter((anime) => anime.rating > 0);
        if (ratedAnime.length === 0) return "0.0";
        return (
            ratedAnime.reduce((sum, anime) => sum + anime.rating, 0) /
            ratedAnime.length
        ).toFixed(1);
    })(),
};
---

<GridLayout title={pageTitle} description={pageDescription}>
    <div class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-32">
        <div class="card-base z-10 px-9 py-6 relative w-full">
            <BackwardButton currentPath={Astro.url.pathname} />
            <!-- 页面标题 -->
            <div class="relative w-full mb-8">
                <div class="mb-6">
                    <h1 class="text-4xl font-bold text-black/90 dark:text-white/90 mb-2">{i18n(I18nKey.animeTitle)}</h1>
                    <p class="text-black/75 dark:text-white/75">{pageDescription}</p>
                </div>
                <!-- 统计卡片 -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                    <div class="bg-linear-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-4">
                        <div class="flex items-center gap-3">
                            <div class="text-2xl">📊</div>
                            <div>
                                <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">{stats.total}</div>
                                <div class="text-sm text-blue-600/70 dark:text-blue-400/70">{i18n(I18nKey.animeTotal)}</div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-linear-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-lg p-4">
                        <div class="flex items-center gap-3">
                            <div class="text-2xl">▶️</div>
                            <div>
                                <div class="text-2xl font-bold text-green-600 dark:text-green-400">{stats.watching}</div>
                                <div class="text-sm text-green-600/70 dark:text-green-400/70">{i18n(I18nKey.animeWatching)}</div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-linear-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-lg p-4">
                        <div class="flex items-center gap-3">
                            <div class="text-2xl">✅</div>
                            <div>
                                <div class="text-2xl font-bold text-purple-600 dark:text-purple-400">{stats.completed}</div>
                                <div class="text-sm text-purple-600/70 dark:text-purple-400/70">{i18n(I18nKey.animeCompleted)}</div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-linear-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20 rounded-lg p-4">
                        <div class="flex items-center gap-3">
                            <div class="text-2xl">⭐</div>
                            <div>
                                <div class="text-2xl font-bold text-orange-600 dark:text-orange-400">{stats.avgRating}</div>
                                <div class="text-sm text-orange-600/70 dark:text-orange-400/70">{i18n(I18nKey.animeAvgRating)}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 动漫列表 -->
            <div class="mb-8">
                <h2 class="text-2xl font-bold text-black/90 dark:text-white/90 mb-4">
                    {i18n(I18nKey.animeList)}
                </h2>
                {!isBangumiConfigured ? (
                    <div class="text-center py-12">
                        <div class="text-5xl mb-4">😢</div>
                        <h3 class="text-xl font-medium text-black/80 dark:text-white/80 mb-2">
                            {i18n(I18nKey.animeEmpty)}
                        </h3>
                        <p class="text-black/60 dark:text-white/60">
                            Please configure your Bangumi account in the config file.
                        </p>
                    </div>
                ) : animeList.length > 0 ? (
                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 md:gap-6">
                        {animeList.map(anime => {
                            const statusInfo = getStatusInfo(anime.status);
                            const progressPercent = anime.totalEpisodes > 0 ? (anime.progress / anime.totalEpisodes) * 100 : 0;
                            return (
                                <div class="group relative bg-(--card-bg) border border-(--line-divider) rounded-(--radius-large) overflow-hidden transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
                                    <!-- 封面区域 - 竖屏比例 -->
                                    <div class="relative aspect-2/3 overflow-hidden">
                                        <a href={anime.link} target="_blank" rel="noopener noreferrer" class="block w-full h-full">
                                            <ImageWrapper
                                                src={anime.cover}
                                                alt={anime.title}
                                                class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                                                loading="lazy"
                                            />
                                            <div class="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                                <div class="absolute inset-0 flex items-center justify-center">
                                                    <div class="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center">
                                                        <svg class="w-6 h-6 text-gray-800 ml-1" fill="currentColor" viewBox="0 0 24 24">
                                                            <path d="M8 5v14l11-7z"/>
                                                        </svg>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 状态标签 -->
                                        <div class={`absolute top-2 left-2 px-2 py-1 rounded-md text-xs font-medium ${statusInfo.class}`}>
                                            <span class="mr-1">{statusInfo.icon}</span>
                                            <span>{statusInfo.text}</span>
                                        </div>
                                        <!-- 评分 -->
                                        <div class="absolute top-2 right-2 bg-black/70 text-white px-2 py-1 rounded-md text-xs font-medium flex items-center gap-1">
                                            <svg class="w-3 h-3 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                            </svg>
                                            <span>{anime.rating}</span>
                                        </div>
                                        <!-- 进度条 - 在封面底部 -->
                                        {anime.status === 'watching' && (
                                            <div class="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/80 to-transparent p-2">
                                                <div class="w-full bg-white/20 rounded-full h-1.5 mb-1">
                                                    <div class="bg-linear-to-r from-emerald-400 to-teal-400 h-1.5 rounded-full transition-all duration-300" style={`width: ${progressPercent}%`}></div>
                                                </div>
                                                <div class="text-white text-xs font-medium">
                                                    {anime.progress}/{anime.totalEpisodes} ({Math.round(progressPercent)}%)
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                    <!-- 内容区域 - 紧凑设计 -->
                                    <div class="p-3">
                                        <h3 class="text-sm font-bold text-black/90 dark:text-white/90 mb-1 line-clamp-2 leading-tight">{anime.title}</h3>
                                        <p class="text-black/60 dark:text-white/60 text-xs mb-2 line-clamp-2">{anime.description}</p>
                                        <!-- 详细信息 - 更紧凑 -->
                                        <div class="space-y-1 text-xs">
                                            <div class="flex justify-between">
                                                <span class="text-black/50 dark:text-white/50">{i18n(I18nKey.animeYear)}</span>
                                                <span class="text-black/70 dark:text-white/70">{anime.year}</span>
                                            </div>
                                            <div class="flex justify-between">
                                                <span class="text-black/50 dark:text-white/50">{i18n(I18nKey.animeStudio)}</span>
                                                <span class="text-black/70 dark:text-white/70 truncate ml-2">{anime.studio}</span>
                                            </div>
                                            <div class="flex flex-wrap gap-1 mt-2">
                                                {anime.genre.map(g => (
                                                    <span class="px-1.5 py-0.5 bg-(--btn-regular-bg) text-black/70 dark:text-white/70 rounded-sm text-xs">{g}</span>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                ) : (
                    <div class="text-center py-12">
                        <div class="text-5xl mb-4">😢</div>
                        <h3 class="text-xl font-medium text-black/80 dark:text-white/80 mb-2">
                            {i18n(I18nKey.animeEmpty)}
                        </h3>
                        <p class="text-black/60 dark:text-white/60">
                            {i18n(I18nKey.animeEmptyBangumi)}
                        </p>
                    </div>
                )}
            </div>
        </div>
    </div>
</GridLayout>