<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-categories/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>Slug</th><th>排序</th><th class="text-right">操作</th></tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.id" class="group">
            <td class="font-mono text-xs text-white/40">#{{ item.id }}</td>
            <td class="text-white">{{ item.name }}</td>
            <td class="text-xs font-mono text-art-muted">{{ item.slug }}</td>
            <td class="text-art-muted">{{ item.sortOrder }}</td>
            <td class="text-right">
              <router-link :to="`/admin/video-categories/${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 v-if="list.length === 0" class="p-12 text-center text-art-muted">暂无分类</div>
    </div>
  </div>
</template>

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

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

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

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