<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/videos/create')" class="admin-btn-primary">+ 新建视频</button>
    </div>
    <div class="admin-card overflow-hidden">
      <table class="admin-table">
        <thead>
          <tr><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="text-white">{{ item.title }}</td>
            <td class="text-art-muted">{{ item.categoryName || '-' }}</td>
            <td><span :class="item.isPublished ? 'text-green-400' : 'text-red-400'">{{ item.isPublished ? '已发布' : '草稿' }}</span></td>
            <td class="text-xs text-art-muted">{{ item.createdAt }}</td>
            <td class="text-right">
              <router-link :to="`/admin/videos/${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 { getAdminVideos, deleteVideo, type VideoItem } from '../../services/api'
import { useToast } from '../../composables/useToast'

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

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

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