<template>
  <section class="page-section block">
    <div class="max-w-6xl mx-auto pb-12 md:pb-20">
      <button @click="router.push('/videos')" class="mb-8 text-art-muted hover:text-white flex items-center gap-2 text-sm">
        <Icon name="arrow-left" :size="16" /> 返回视频
      </button>

      <div v-if="loading" class="flex justify-center py-20"><div class="animate-spin h-10 w-10 border-t-2 border-art-accent rounded-full"></div></div>
      <div v-else-if="error" class="text-red-400 text-center py-12">{{ error }}</div>

      <template v-else-if="album">
        <div class="mb-10">
          <div v-if="album.cover" class="aspect-[21/9] rounded-xl overflow-hidden mb-6 max-h-80">
            <img :src="album.cover" class="w-full h-full object-cover" alt="" />
          </div>
          <h1 class="font-serif text-4xl text-white mb-3">{{ album.name }}</h1>
          <p class="text-art-muted max-w-2xl">{{ album.description }}</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          <div
            v-for="video in videos"
            :key="video.id"
            class="group cursor-pointer rounded-xl overflow-hidden border border-white/10 hover:border-art-accent/40 transition-colors"
            @click="router.push(`/videos/${video.id}`)"
          >
            <div class="aspect-video relative bg-black/40">
              <img v-if="video.cover" :src="video.cover" class="w-full h-full object-cover" alt="" />
              <div class="absolute inset-0 flex items-center justify-center">
                <Icon name="play" :size="24" class="text-white opacity-70 group-hover:opacity-100" />
              </div>
            </div>
            <div class="p-4"><h3 class="text-white text-sm font-medium line-clamp-2">{{ video.title }}</h3></div>
          </div>
        </div>
        <div v-if="videos.length === 0" class="text-center py-12 text-art-muted">专辑内暂无视频</div>
      </template>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { fetchVideoAlbum, fetchAlbumVideos, type VideoAlbum, type VideoItem } from '../services/api'
import Icon from '../components/Icon.vue'

const route = useRoute()
const router = useRouter()
const loading = ref(true)
const error = ref('')
const album = ref<VideoAlbum | null>(null)
const videos = ref<VideoItem[]>([])

/** 加载专辑详情及专辑内视频列表 */
const load = async () => {
  loading.value = true
  error.value = ''
  try {
    const id = Number(route.params.id)
    album.value = await fetchVideoAlbum(id)
    videos.value = await fetchAlbumVideos(id)
  } catch {
    error.value = '加载专辑失败'
  } finally {
    loading.value = false
  }
}

onMounted(load)
watch(() => route.params.id, load)
</script>
