<script setup lang="ts">
/**
 * 视频列表：标题/分类/发布状态。
 */
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useDialog, useToast } from '@wot-ui/ui'
import AppNavbar from '@/components/layout/AppNavbar.vue'
import AppPageShell from '@/components/layout/AppPageShell.vue'
import AdminStatusBadge from '../../components/AdminStatusBadge.vue'
import { useAdminGuard } from '../../composables/useAdminGuard'
import { adminDelete, adminList, normalizeAdminList, type VideoItem } from '@/api'

const toast = useToast()
const dialog = useDialog()
const { guardAdmin } = useAdminGuard()
const loading = ref(false)
const list = ref<VideoItem[]>([])

async function load() {
  if (!guardAdmin()) return
  loading.value = true
  try {
    list.value = normalizeAdminList(await adminList('videos')) as VideoItem[]
  }
  catch (e: unknown) {
    toast.error(e instanceof Error ? e.message : '加载失败')
  }
  finally {
    loading.value = false
  }
}

onShow(load)

function goCreate() {
  uni.navigateTo({ url: '/subPackages/admin/pages/videos/form?mode=create' })
}
function goEdit(item: VideoItem) {
  uni.navigateTo({ url: `/subPackages/admin/pages/videos/form?mode=edit&id=${item.id}` })
}
function onDelete(item: VideoItem) {
  dialog.confirm({ title: '确认删除', msg: `确定删除「${item.title}」吗？` }).then(async () => {
    try {
      await adminDelete('videos', item.id)
      toast.success('已删除')
      load()
    }
    catch (e: unknown) {
      toast.error(e instanceof Error ? e.message : '删除失败')
    }
  }).catch(() => {})
}
</script>

<template>
  <AppPageShell admin>
    <AppNavbar title="视频列表" show-back />
    <view class="page-pad">
      <view v-for="item in list" :key="String(item.id)" class="admin-card row" @click="goEdit(item)">
        <view class="main">
          <view class="title-row">
            <text class="title">{{ item.title }}</text>
            <AdminStatusBadge
              :value="item.isPublished"
              :map="{ '1': '已发布', '0': '草稿', true: '已发布', false: '草稿' }"
            />
          </view>
          <text class="sub text-art-muted">{{ item.categoryName || '未分类' }} · {{ item.createdAt || '' }}</text>
        </view>
        <wd-button size="small" type="warning" plain @click.stop="onDelete(item)">删除</wd-button>
      </view>
      <wd-loading v-if="loading" />
      <wd-empty v-if="!loading && !list.length" description="暂无视频" />
    </view>
    <view class="fab" @click="goCreate"><wd-icon name="plus" size="24px" color="#fff" /></view>
  </AppPageShell>
</template>

<style scoped lang="scss">
.page-pad { padding: 24rpx 32rpx 120rpx; }
.row { padding: 24rpx 28rpx; margin-bottom: 16rpx; display: flex; align-items: center; gap: 16rpx; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
.title-row { display: flex; align-items: center; gap: 12rpx; }
.title { flex: 1; font-size: 30rpx; color: rgb(var(--art-text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub { font-size: 24rpx; }
.fab {
  position: fixed; right: 40rpx; bottom: calc(40rpx + env(safe-area-inset-bottom));
  width: 96rpx; height: 96rpx; border-radius: 50%;
  background: rgb(var(--art-accent)); display: flex; align-items: center; justify-content: center; z-index: 100;
}
</style>
