<template>
  <div>
    <div class="page-head">
      <h1>数据概览</h1>
      <span v-if="stats" class="updated-at">更新于 {{ nowText }}</span>
    </div>

    <n-spin :show="!stats">
      <template v-if="stats">
        <!-- 统计卡片 -->
        <n-grid :cols="4" :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
          <n-gi v-for="item in statCards" :key="item.key" span="4 s:2 m:1">
            <n-card
              hoverable
              class="stat-card"
              :class="{ 'stat-card--alert': item.alert }"
              @click="item.to && navigateTo(item.to)"
            >
              <div class="stat-label">
                {{ item.label }}
                <n-tag v-if="item.badge" size="tiny" :type="item.badgeType || 'default'" :bordered="false" class="stat-badge">
                  {{ item.badge }}
                </n-tag>
              </div>
              <div class="stat-value">{{ item.value }}</div>
              <div class="stat-sub">{{ item.sub }}</div>
            </n-card>
          </n-gi>
        </n-grid>

        <!-- 近 7 天动态 + 待办 -->
        <n-grid :cols="3" :x-gap="16" :y-gap="16" responsive="screen" item-responsive style="margin-top: 24px">
          <n-gi span="3 s:3 m:1">
            <n-card title="近 7 天真实咨询">
              <template #header-extra>
                <span class="card-hint">仅统计用户提交</span>
              </template>
              <div class="trend-row"><span>总提交</span><strong>{{ stats.recent.submissions7d }}</strong></div>
              <div class="trend-row"><span>联系表单</span><strong>{{ stats.recent.contact7d }}</strong></div>
              <div class="trend-row"><span>定制咨询</span><strong>{{ stats.recent.customize7d }}</strong></div>
            </n-card>
          </n-gi>
          <n-gi span="3 s:3 m:1">
            <n-card title="最近提交" :segmented="{ content: true }">
              <template #header-extra>
                <n-button size="tiny" text @click="navigateTo('/admin/submissions')">查看全部 →</n-button>
              </template>
              <div v-if="!stats.recentSubmissions.length" class="empty">暂无提交</div>
              <div v-for="s in stats.recentSubmissions" :key="s.id" class="list-row">
                <n-tag size="tiny" :type="s.type === 'customize' ? 'warning' : 'default'" :bordered="false">
                  {{ s.type === 'customize' ? '定制' : '联系' }}
                </n-tag>
                <span class="list-title">#{{ s.id }}</span>
                <span class="list-meta">{{ fmtDate(s.createdAt) }}</span>
                <n-tag v-if="!s.read" size="tiny" type="error" :bordered="false">未读</n-tag>
              </div>
            </n-card>
          </n-gi>
          <n-gi span="3 s:3 m:1">
            <n-card title="最近评价" :segmented="{ content: true }">
              <template #header-extra>
                <n-button size="tiny" text @click="navigateTo('/admin/reviews')">查看全部 →</n-button>
              </template>
              <div v-if="!stats.recentReviews.length" class="empty">暂无评价</div>
              <div v-for="r in stats.recentReviews" :key="r.id" class="list-row">
                <span class="list-star">{{ '★'.repeat(r.rating || 5) }}</span>
                <span class="list-title">{{ r.author }}</span>
                <span class="list-meta">{{ fmtDate(r.createdAt) }}</span>
              </div>
            </n-card>
          </n-gi>
        </n-grid>

        <!-- 快捷操作 -->
        <h2 class="section-title">快捷操作</h2>
        <n-grid :cols="4" :x-gap="12" :y-gap="12" responsive="screen" item-responsive>
          <n-gi v-for="q in quickLinks" :key="q.to" span="4 s:2 m:1">
            <n-card hoverable size="small" class="quick-card" @click="navigateTo(q.to)">
              <div class="quick-title">{{ q.title }}</div>
              <div class="quick-desc">{{ q.desc }}</div>
            </n-card>
          </n-gi>
        </n-grid>
      </template>
    </n-spin>
  </div>
</template>

<script setup>
import { NCard, NGrid, NGi, NSpace, NSpin, NTag, NButton } from 'naive-ui'

definePageMeta({ layout: 'admin', middleware: 'admin' })

const { adminFetch } = useAdmin()
const stats = ref(null)
const nowText = ref('')

const statCards = computed(() => {
  if (!stats.value) return []
  const s = stats.value
  return [
    {
      key: 'articles', label: '文章总数', value: s.articles.total,
      sub: `新闻 ${s.articles.news} · 博客 ${s.articles.blog}`,
      to: '/admin/articles',
    },
    {
      key: 'submissions', label: '表单提交', value: s.submissions.total,
      sub: s.submissions.unread > 0 ? `${s.submissions.unread} 条未读` : '已全部查看',
      badge: s.submissions.unread > 0 ? `${s.submissions.unread} 未读` : null,
      badgeType: 'error',
      alert: s.submissions.unread > 0,
      to: '/admin/submissions',
    },
    { key: 'reviews', label: '客户评价', value: s.reviews, sub: '来自真实客户', to: '/admin/reviews' },
    { key: 'faqs', label: '常见问答', value: s.faqs, sub: 'FAQ 条目', to: '/admin/faqs' },
    { key: 'gallery', label: '旅拍照片', value: s.gallery, sub: '呼籁旅拍', to: '/admin/gallery' },
    { key: 'stories', label: '客户故事', value: s.stories, sub: '深度体验', to: '/admin/stories' },
    { key: 'productLines', label: '产品线', value: s.productLines, sub: '夏/秋/冬 + 营地课程', to: '/admin/products' },
    { key: 'siteContent', label: '站点配置', value: s.siteContent, sub: '可编辑配置项', to: '/admin/content/brand' },
  ]
})

const quickLinks = [
  { title: '产品线管理', desc: '所有产品线概览', to: '/admin/products' },
  { title: '文章管理', desc: '新闻 + 博客', to: '/admin/articles' },
  { title: '博客管理', desc: '品牌博客', to: '/admin/blogs' },
  { title: '客户评价', desc: '评价审核 / 排序', to: '/admin/reviews' },
  { title: 'FAQ 管理', desc: '常见问答维护', to: '/admin/faqs' },
  { title: '图库管理', desc: '旅拍照片', to: '/admin/gallery' },
  { title: '客户故事', desc: '深度体验稿件', to: '/admin/stories' },
  { title: '表单提交', desc: '联系 + 定制咨询', to: '/admin/submissions' },
  { title: '导航菜单', desc: '顶部和底部导航', to: '/admin/navigation' },
  { title: 'SEO 配置', desc: '页面标题和描述', to: '/admin/content/seo' },
  { title: '品牌信息', desc: '联系方式 / 悬浮按钮', to: '/admin/content/brand' },
  { title: '首页配置', desc: 'Hero / 栏目文案', to: '/admin/content/heroes' },
]

function fmtDate(iso) {
  if (!iso) return ''
  const d = new Date(iso)
  const today = new Date()
  const isSameDay = d.toDateString() === today.toDateString()
  if (isSameDay) return d.toTimeString().slice(0, 5)
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${m}-${day}`
}

onMounted(async () => {
  try {
    stats.value = await adminFetch('/api/admin/stats')
    nowText.value = new Date().toTimeString().slice(0, 5)
  } catch (e) { console.error('加载统计失败', e) }
})
</script>

<style scoped>
.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}
.page-head h1 {
  margin: 0;
  font-size: 24px;
  color: #111827;
  font-weight: 600;
}
.updated-at {
  font-size: 12px;
  color: #9ca3af;
}
.section-title {
  font-size: 18px;
  color: #111827;
  margin: 32px 0 16px;
  font-weight: 600;
}
.stat-card {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover {
  transform: translateY(-2px);
}
.stat-card--alert {
  border-color: #f87171;
}
.stat-label {
  font-size: 13px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stat-badge {
  margin-left: auto;
}
.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
  margin-top: 8px;
}
.stat-sub {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}
.trend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: #374151;
}
.trend-row + .trend-row {
  border-top: 1px dashed #e5e7eb;
}
.trend-row strong {
  color: #3a7d44;
  font-size: 16px;
}
.card-hint {
  font-size: 12px;
  color: #9ca3af;
}
.list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  color: #374151;
}
.list-row + .list-row {
  border-top: 1px dashed #e5e7eb;
}
.list-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-meta {
  color: #9ca3af;
  font-size: 12px;
}
.list-star {
  color: #f59e0b;
  font-size: 12px;
}
.empty {
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  padding: 16px 0;
}
.quick-card {
  cursor: pointer;
  transition: transform 0.15s;
}
.quick-card:hover {
  transform: translateY(-2px);
}
.quick-title {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}
.quick-desc {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}
</style>
