<template>
  <div class="admin-home">
    <!-- 欢迎横幅 -->
    <div class="welcome-banner">
      <div class="welcome-left">
        <h2 class="welcome-title">🎛️ 平台管理中心</h2>
        <p class="welcome-sub">欢迎回来，{{ adminName }}，今日数据已更新</p>
      </div>
      <div class="welcome-right">
        <a-space>
          <a-tag color="red" style="font-size:13px;padding:4px 12px">超级管理员</a-tag>
          <a-button size="small" @click="loadStats" :loading="loadingStats">
            <template #icon><ReloadOutlined /></template>
            刷新数据
          </a-button>
        </a-space>
      </div>
    </div>

    <!-- 核心数据统计 -->
    <a-row :gutter="[16, 16]">
      <a-col :xs="12" :sm="12" :md="6" v-for="stat in coreStats" :key="stat.label">
        <div class="stat-block" :class="stat.color" @click="navigateTo(stat.to)" :style="{ cursor: stat.to ? 'pointer' : 'default' }">
          <div class="stat-block-header">
            <span class="stat-block-icon">{{ stat.icon }}</span>
            <span class="stat-block-label">{{ stat.label }}</span>
          </div>
          <div class="stat-block-value">
            <template v-if="loadingStats">
              <a-skeleton-input :active="true" size="small" style="width:60px" />
            </template>
            <template v-else>{{ stat.value }}</template>
          </div>
          <div class="stat-block-desc">{{ stat.desc }}</div>
        </div>
      </a-col>
    </a-row>

    <!-- 待办事项 + 快速入口 -->
    <a-row :gutter="[16, 16]">
      <!-- 待处理事项 -->
      <a-col :xs="24" :md="12">
        <div class="panel">
          <div class="panel-header">
            <span class="panel-title">🔔 待处理事项</span>
          </div>
          <div class="todo-list">
            <div
              v-for="todo in todoItems"
              :key="todo.label"
              class="todo-item"
              :class="{ 'todo-item-urgent': todo.urgent }"
              @click="navigateTo(todo.to)"
            >
              <div class="todo-dot" :class="todo.dotColor"></div>
              <div class="todo-content">
                <span class="todo-label">{{ todo.label }}</span>
                <a-tag :color="todo.tagColor" style="margin-left:8px">
                  <template v-if="loadingStats">...</template>
                  <template v-else>{{ todo.value }}</template>
                </a-tag>
              </div>
              <RightOutlined class="todo-arrow" />
            </div>
            <div v-if="!loadingStats && todoItems.every(t => t.value === 0)" class="todo-empty">
              🎉 暂无待处理事项，一切正常！
            </div>
          </div>
        </div>
      </a-col>

      <!-- 快速导航 -->
      <a-col :xs="24" :md="12">
        <div class="panel">
          <div class="panel-header">
            <span class="panel-title">⚡ 快速入口</span>
          </div>
          <div class="quick-grid">
            <div
              v-for="item in quickLinks"
              :key="item.to"
              class="quick-card"
              @click="navigateTo(item.to)"
            >
              <div class="quick-icon" :style="{ background: item.bg }">{{ item.icon }}</div>
              <div class="quick-label">{{ item.label }}</div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ReloadOutlined, RightOutlined } from '@ant-design/icons-vue'
import { getUserInfo } from '@/api/layout'
import { getToken } from '@/utils/token-util'
import { pageAppProductAll } from '@/api/app/appProduct'
import { pageUsers } from '@/api/system/user'
import { listAppArticle as listCmsArticle } from '@/api/app/article'
import { pageGitAccounts } from '@/api/developer'

definePageMeta({ layout: 'admin' })
useHead({ title: '平台管理首页' })

const adminName = ref('管理员')
const loadingStats = ref(false)

const coreStats = reactive([
  { icon: '📦', label: '应用总数', value: 0, desc: '全平台应用', color: 'blue', to: '/admin/apps' },
  { icon: '👥', label: '用户总数', value: 0, desc: '注册用户', color: 'green', to: '/admin/users' },
  { icon: '⏳', label: '待审核应用', value: 0, desc: '等待审核中', color: 'orange', to: '/admin/app-review' },
  { icon: '🛒', label: '上架应用', value: 0, desc: '市场在售', color: 'purple', to: '/admin/market' },
])

const todoItems = reactive([
  { label: '待审核应用', value: 0, to: '/admin/app-review', tagColor: 'orange', dotColor: 'dot-orange', urgent: false },
  { label: '待审核Git账号', value: 0, to: '/admin/git-review', tagColor: 'cyan', dotColor: 'dot-cyan', urgent: false },
  { label: '草稿文章', value: 0, to: '/admin/articles', tagColor: 'blue', dotColor: 'dot-blue', urgent: false },
  { label: '冻结用户', value: 0, to: '/admin/users', tagColor: 'red', dotColor: 'dot-red', urgent: false },
])

const ANNOUNCE_MODEL = 'announcement'

const quickLinks = [
  { to: '/admin/app-review', icon: '🔍', label: '应用审核', bg: '#fff7ed' },
  { to: '/admin/git-review', icon: '🔧', label: 'Git 审核', bg: '#ecfdf5' },
  { to: '/admin/apps', icon: '📦', label: '应用管理', bg: '#eff6ff' },
  { to: '/admin/market', icon: '🛒', label: '应用市场', bg: '#faf5ff' },
  { to: '/admin/users', icon: '👥', label: '用户管理', bg: '#f0fdf4' },
  { to: '/admin/developers', icon: '🧑‍💻', label: '开发者', bg: '#f0f9ff' },
  { to: '/admin/tickets', icon: '🎫', label: '工单处理', bg: '#fdf4ff' },
  { to: '/admin/articles', icon: '📝', label: '文章管理', bg: '#fefce8' },
  { to: '/admin/article-categories', icon: '🗂️', label: '文章分类', bg: '#ecfeff' },
  { to: '/admin/announcements', icon: '📢', label: '公告管理', bg: '#fff1f2' },
  { to: '/admin/settings', icon: '⚙️', label: '平台设置', bg: '#f9fafb' },
]

async function loadStats() {
  loadingStats.value = true
  try {
    const [appsRes, usersRes, pendingRes, marketRes, draftRes, frozenRes, gitPendingRes] = await Promise.allSettled([
      pageAppProductAll({ current: 1, size: 1 }),
      pageUsers({ page: 1, limit: 1 }),
      pageAppProductAll({ current: 1, size: 1, publishStatus: 'pending_review' }),
      pageAppProductAll({ current: 1, size: 1, publishStatus: 'published' }),
      listCmsArticle({ status: 1 }),
      pageUsers({ page: 1, limit: 1, status: 1 }),
      pageGitAccounts({ page: 1, size: 1, status: 'pending' }),
    ])

    coreStats[0].value = appsRes.status === 'fulfilled' ? appsRes.value?.count || 0 : 0
    coreStats[1].value = usersRes.status === 'fulfilled' ? usersRes.value?.count || 0 : 0
    coreStats[2].value = pendingRes.status === 'fulfilled' ? pendingRes.value?.count || 0 : 0
    coreStats[3].value = marketRes.status === 'fulfilled' ? marketRes.value?.count || 0 : 0

    const pendingCount = pendingRes.status === 'fulfilled' ? pendingRes.value?.count || 0 : 0
    const draftCount = draftRes.status === 'fulfilled'
      ? (draftRes.value || []).filter(item => (item.model || '').trim() !== ANNOUNCE_MODEL).length
      : 0
    const frozenCount = frozenRes.status === 'fulfilled' ? frozenRes.value?.count || 0 : 0
    const gitPendingCount = gitPendingRes.status === 'fulfilled' ? (gitPendingRes.value as any)?.data?.data?.total || 0 : 0

    todoItems[0].value = pendingCount
    todoItems[0].urgent = pendingCount > 0
    todoItems[1].value = gitPendingCount
    todoItems[1].urgent = gitPendingCount > 0
    todoItems[2].value = draftCount
    todoItems[3].value = frozenCount
  } catch { /* ignore */ } finally {
    loadingStats.value = false
  }
}

onMounted(async () => {
  const token = getToken()
  if (!token) return
  // 并发加载用户信息和统计数据
  Promise.allSettled([
    getUserInfo().then(me => {
      adminName.value = me?.nickname?.trim() || me?.username?.trim() || '管理员'
    }),
    loadStats(),
  ])
})
</script>

<style scoped>
.admin-home {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 欢迎横幅 */
.welcome-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1a0f0f 0%, #3d1515 100%);
  border-radius: 14px;
  padding: 24px 28px;
  color: #fff;
  flex-wrap: wrap;
  gap: 12px;
}
.welcome-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.welcome-sub { font-size: 14px; color: rgba(255,255,255,0.7); margin: 0; }

/* 核心统计块 */
.stat-block {
  padding: 18px 20px;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.2s;
}
.stat-block:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.stat-block.blue { background: #eff6ff; border-color: #dbeafe; }
.stat-block.green { background: #f0fdf4; border-color: #bbf7d0; }
.stat-block.orange { background: #fff7ed; border-color: #fed7aa; }
.stat-block.purple { background: #faf5ff; border-color: #e9d5ff; }

.stat-block-header { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.stat-block-icon { font-size: 18px; }
.stat-block-label { font-size: 13px; color: rgba(0,0,0,0.55); }
.stat-block-value { font-size: 32px; font-weight: 800; color: rgba(0,0,0,0.85); line-height: 1.1; margin-bottom: 4px; }
.stat-block-desc { font-size: 12px; color: rgba(0,0,0,0.4); }

/* Panel */
.panel { background: #fff; border: 1px solid #f0f0f0; border-radius: 12px; overflow: hidden; }
.panel-header { padding: 14px 18px; border-bottom: 1px solid #f5f5f5; }
.panel-title { font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.85); }

/* 待办 */
.todo-list { padding: 8px 0; }
.todo-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; cursor: pointer; transition: background 0.15s;
}
.todo-item:hover { background: #f9fafb; }
.todo-item-urgent .todo-label { font-weight: 600; }
.todo-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-orange { background: #f97316; }
.dot-blue { background: #3b82f6; }
.dot-cyan { background: #06b6d4; }
.dot-red { background: #ef4444; }
.todo-content { flex: 1; display: flex; align-items: center; }
.todo-label { font-size: 14px; color: rgba(0,0,0,0.75); }
.todo-arrow { font-size: 11px; color: rgba(0,0,0,0.3); }
.todo-empty { text-align: center; padding: 20px 0; color: rgba(0,0,0,0.4); font-size: 14px; }

/* 快速入口九宫格 */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #f5f5f5;
}
.quick-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 18px 12px; background: #fff;
  cursor: pointer; transition: background 0.15s;
}
.quick-card:hover { background: #f9fafb; }
.quick-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.quick-label { font-size: 13px; color: rgba(0,0,0,0.75); font-weight: 500; }
</style>
