<script lang="ts" setup>
const router = useRouter()
const loginState = useLoginState()

// 检查用户权限
if (loginState.user.auth_code !== 2) {
  throw createError({
    statusCode: 403,
    statusMessage: '无权访问管理页面',
  })
}

useHead({
  title: '管理中心',
})

const adminPages = [
  {
    title: '用户管理',
    description: '管理系统用户、权限和服务配额',
    icon: 'i-tabler-users',
    path: '/generation/admin/users',
    color: 'blue',
  },
  {
    title: '数字人定制管理',
    description: '管理用户提交的数字人定制请求',
    icon: 'i-tabler-user-cog',
    path: '/generation/admin/digital-human-train',
    color: 'amber',
  },
  {
    title: '片头片尾管理',
    description: '管理用户提交的片头片尾制作请求',
    icon: 'i-tabler-movie',
    path: '/generation/admin/materials',
    color: 'green',
  },
]

const navigateToPage = (path: string) => {
  router.push(path)
}
</script>

<template>
  <div>
    <div class="p-4 pb-0">
      <BubbleTitle
        title="管理中心"
        subtitle="Administrator Panel"
      />
      <GradientDivider />
    </div>

    <div class="p-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div
          v-for="page in adminPages"
          :key="page.path"
          class="group cursor-pointer"
          @click="navigateToPage(page.path)"
        >
          <UCard
            class="hover:shadow-lg transition-all duration-200 group-hover:scale-105"
            :ui="{
              ring: 'ring-1 ring-gray-200 dark:ring-gray-700 group-hover:ring-gray-300 dark:group-hover:ring-gray-600',
            }"
          >
            <div class="flex flex-col items-center text-center p-6">
              <div
                class="w-16 h-16 rounded-full flex items-center justify-center mb-4 transition-colors"
                :class="{
                  'bg-blue-100 dark:bg-blue-900/30': page.color === 'blue',
                  'bg-amber-100 dark:bg-amber-900/30': page.color === 'amber',
                  'bg-green-100 dark:bg-green-900/30': page.color === 'green',
                }"
              >
                <UIcon
                  :name="page.icon"
                  class="w-8 h-8"
                  :class="{
                    'text-blue-600 dark:text-blue-400': page.color === 'blue',
                    'text-amber-600 dark:text-amber-400':
                      page.color === 'amber',
                    'text-green-600 dark:text-green-400':
                      page.color === 'green',
                  }"
                />
              </div>

              <h3
                class="text-lg font-semibold text-gray-900 dark:text-white mb-2"
              >
                {{ page.title }}
              </h3>

              <p
                class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed"
              >
                {{ page.description }}
              </p>

              <div
                class="mt-4 flex items-center text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors"
              >
                <span>进入管理</span>
                <UIcon
                  name="i-heroicons-arrow-right"
                  class="ml-1 w-4 h-4"
                />
              </div>
            </div>
          </UCard>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
