<template>
  <div class="w-full animate-reveal">
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-2xl font-serif italic text-white">视频专辑</h1>
      <button @click="router.push('/admin/video-albums/create')" class="admin-btn-primary">+ 新建专辑</button>
    </div>
    <div class="admin-card overflow-hidden">
      <table class="admin-table">
        <thead>
          <tr><th>ID</th><th>名称</th><th>分类</th><th>视频数</th><th>最新视频更新</th><th>状态</th><th class="text-right">操作</th></tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.id">
            <td class="font-mono text-xs text-white/40">#{{ item.id }}</td>
            <td class="text-white">{{ item.name }}</td>
            <td class="text-art-muted">{{ item.categoryName || '-' }}</td>
            <td class="text-art-muted">{{ item.videoCount ?? 0 }}</td>
            <td class="text-xs text-art-muted">{{ item.latestVideoUpdatedAt || '-' }}</td>
            <td><span :class="item.isActive ? 'text-green-400' : 'text-red-400'">{{ item.isActive ? '启用' : '禁用' }}</span></td>
            <td class="text-right">
              <router-link :to="`/admin/video-albums/${item.id}/edit`" class="admin-btn-secondary py-1 px-3 text-xs mr-2">编辑</router-link>
              <button @click="handleDelete(item.id)" class="admin-btn-danger py-1 px-3 text-xs">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getAdminVideoAlbums, deleteVideoAlbum, type VideoAlbum } from '../../services/api'
import { useToast } from '../../composables/useToast'

const router = useRouter()
const toast = useToast()
const list = ref<VideoAlbum[]>([])

onMounted(async () => {
  try { list.value = await getAdminVideoAlbums() } catch { toast.error('加载失败') }
})

const handleDelete = async (id: number) => {
  if (!confirm('确定删除？')) return
  try {
    await deleteVideoAlbum(id)
    list.value = list.value.filter(i => i.id !== id)
    toast.success('已删除')
  } catch { toast.error('删除失败') }
}
</script>
