<template>
  <div class="ppt-templates-container">
    <h1 class="page-title">PPT 模板</h1>

    <div class="action-bar">
      <button class="btn-primary" @click="router.push('/admin/ppt-templates/create')">
        <span class="btn-icon">➕</span>
        新建模板
      </button>
    </div>

    <div class="table-container">
      <table class="admin-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>Slug</th>
            <th>类型</th>
            <th>默认</th>
            <th>排序</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="t in templates" :key="t.id">
            <td class="table-cell">{{ t.id }}</td>
            <td class="table-cell">{{ t.name }}</td>
            <td class="table-cell font-mono text-sm">{{ t.slug }}</td>
            <td class="table-cell">
              <span v-if="t.isSystem" class="badge-system">系统默认</span>
              <span v-else class="text-white/50">自定义</span>
            </td>
            <td class="table-cell">{{ t.isDefault ? '是' : '否' }}</td>
            <td class="table-cell">{{ t.sortOrder }}</td>
            <td class="table-cell">
              <span :class="t.isActive ? 'text-green-400' : 'text-red-400'">
                {{ t.isActive ? '启用' : '禁用' }}
              </span>
            </td>
            <td class="table-cell actions">
              <button class="btn-edit" title="编辑" @click="router.push(`/admin/ppt-templates/${t.id}/edit`)">
                ✏️
              </button>
              <button
                v-if="!t.isSystem"
                class="btn-delete"
                title="删除"
                @click="handleDelete(t.id)"
              >
                🗑️
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <div v-if="!templates.length && !loading" class="empty-state">
        <p>暂无模板</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useToast } from '../../composables/useToast'
import { deletePptTemplate, fetchAdminPptTemplates, type PptTemplateApiItem } from '../../services/api'
import { parsePptTemplateConfig } from '../../config/pptTemplateDefaults'

const router = useRouter()
const toast = useToast()
const templates = ref<PptTemplateApiItem[]>([])
const loading = ref(false)

const loadTemplates = async () => {
  loading.value = true
  try {
    const list = await fetchAdminPptTemplates()
    templates.value = list.map((t) => ({
      ...t,
      config: parsePptTemplateConfig(t.config),
    }))
  } catch (err) {
    console.error(err)
    toast.error('加载模板失败')
  } finally {
    loading.value = false
  }
}

const handleDelete = async (id: number) => {
  if (!confirm('确定删除该模板？')) return
  try {
    await deletePptTemplate(id)
    toast.success('已删除')
    await loadTemplates()
  } catch (err: unknown) {
    console.error(err)
    toast.error(err instanceof Error ? err.message : '删除失败')
  }
}

onMounted(() => {
  void loadTemplates()
})
</script>

<style scoped>
.ppt-templates-container {
  width: 100%;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff;
}

.action-bar {
  margin-bottom: 1.5rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #d4b383;
  color: #1a1a1a;
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
}

.table-container {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-table th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
  color: #d4b383;
}

.table-cell {
  color: rgba(255, 255, 255, 0.85);
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.btn-edit,
.btn-delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.7;
}

.btn-edit:hover,
.btn-delete:hover {
  opacity: 1;
}

.badge-system {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: rgba(212, 179, 131, 0.2);
  color: #d4b383;
  font-size: 0.75rem;
}

.empty-state {
  padding: 3rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
</style>
