<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 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <div
          v-for="page in adminPages"
          :key="page.path"
          class="group cursor-pointer"
          @click="navigateToPage(page.path)"
        >
          <UCard
            class="transition-all duration-200 hover:shadow-lg group-hover:scale-105"
          >
            <div class="flex flex-col items-center p-6 text-center">
              <div
                class="mb-4 flex h-16 w-16 items-center justify-center rounded-full 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="h-8 w-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="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
              >
                {{ page.title }}
              </h3>

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

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

<style scoped></style>
