<template>
  <div class="w-full space-y-6">
    <!-- Top Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      <div class="admin-card p-6 flex items-center gap-4 group">
        <div class="w-12 h-12 rounded-lg bg-blue-500/10 text-blue-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform duration-300">📝</div>
        <div>
          <h3 class="text-sm font-medium text-art-muted">总文章数</h3>
          <p class="text-2xl font-semibold text-white mt-1">{{ stats.posts || 0 }}</p>
        </div>
      </div>
      <div class="admin-card p-6 flex items-center gap-4 group">
        <div class="w-12 h-12 rounded-lg bg-green-500/10 text-green-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform duration-300">👥</div>
        <div>
          <h3 class="text-sm font-medium text-art-muted">今日访客 (UV)</h3>
          <p class="text-2xl font-semibold text-white mt-1">{{ todayUV }}</p>
        </div>
      </div>
      <div class="admin-card p-6 flex items-center gap-4 group">
        <div class="w-12 h-12 rounded-lg bg-purple-500/10 text-purple-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform duration-300">📩</div>
        <div>
          <h3 class="text-sm font-medium text-art-muted">合作咨询</h3>
          <p class="text-2xl font-semibold text-white mt-1">{{ stats.inquiryCount || 0 }}</p>
        </div>
      </div>
      <div class="admin-card p-6 flex items-center gap-4 group">
        <div class="w-12 h-12 rounded-lg bg-yellow-500/10 text-yellow-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform duration-300">🎨</div>
        <div>
          <h3 class="text-sm font-medium text-art-muted">作品展示</h3>
          <p class="text-2xl font-semibold text-white mt-1">{{ stats.works || '-' }}</p>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Recent Activities -->
      <div class="admin-card p-6">
        <div class="flex items-center justify-between mb-6">
          <h3 class="text-sm font-medium text-art-muted uppercase tracking-wider">最近日志</h3>
          <router-link to="/admin/logs" class="text-xs text-art-accent hover:underline">查看全部</router-link>
        </div>
        <div class="space-y-3">
          <div v-for="log in operationLogs" :key="log.id" class="flex items-start gap-4 p-3 rounded-lg hover:bg-white/5 transition-colors border border-transparent hover:border-white/5">
            <div class="w-8 h-8 rounded-full bg-art-accent/10 flex items-center justify-center text-art-accent text-xs font-bold shrink-0">
              {{ log.method }}
            </div>
            <div class="flex-1 min-w-0">
              <div class="flex justify-between items-start mb-1">
                <span class="text-sm font-medium text-white truncate">{{ log.username }}</span>
                <span class="text-xs text-white/40 whitespace-nowrap">{{ formatDate(log.createdAt) }}</span>
              </div>
              <p class="text-xs text-art-muted truncate font-mono bg-white/5 px-1.5 py-0.5 rounded inline-block">{{ log.path }}</p>
            </div>
          </div>
          <div v-if="operationLogs.length === 0" class="text-center text-art-muted text-sm py-8">暂无日志</div>
        </div>
      </div>

      <!-- Blog Updates -->
      <div class="admin-card p-6">
        <div class="flex items-center justify-between mb-6">
          <h3 class="text-sm font-medium text-art-muted uppercase tracking-wider">博文动态</h3>
          <router-link to="/admin/posts" class="text-xs text-art-accent hover:underline">管理文章</router-link>
        </div>
        <div class="space-y-3">
          <div v-for="post in recentPosts" :key="post.id" class="flex items-start gap-4 p-3 rounded-lg hover:bg-white/5 transition-colors border border-transparent hover:border-white/5">
            <div class="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-400 text-sm shrink-0">
              📝
            </div>
            <div class="flex-1 min-w-0">
              <div class="flex justify-between items-start mb-1">
                <span class="text-sm font-medium text-white truncate hover:text-art-accent transition-colors cursor-pointer">{{ post.title }}</span>
                <span class="text-xs text-white/40 whitespace-nowrap">{{ formatDate(post.date) }}</span>
              </div>
              <div class="flex items-center gap-2 mt-2">
                <span class="px-2 py-0.5 rounded text-[10px] bg-white/5 text-white/60 border border-white/5">{{ post.categoryName || post.category?.name || '未分类' }}</span>
                <span class="text-[10px] text-white/40 flex items-center gap-1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                  {{ post.readCount || 0 }}
                </span>
              </div>
            </div>
          </div>
          <div v-if="recentPosts.length === 0" class="text-center text-art-muted text-sm py-8">暂无动态</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { getDashboardStats, getOperationLogs, getAdminPosts } from '../../../services/api'

const stats = ref<any>({})
const operationLogs = ref<any[]>([])
const recentPosts = ref<any[]>([])

const todayUV = computed(() => {
  if (!stats.value.uvTrend || stats.value.uvTrend.length === 0) return 0
  return stats.value.uvTrend[stats.value.uvTrend.length - 1].value
})

const formatDate = (dateStr: string) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

const loadData = async () => {
  try {
    const [statsData, logsData, postsData] = await Promise.all([
      getDashboardStats(),
      getOperationLogs(1, 5),
      getAdminPosts(1, 5)
    ])
    
    stats.value = statsData
    operationLogs.value = logsData.list
    // fetchPosts 现在返回 PaginationResponse<Post>，需要取 .list
    const postsList = 'list' in postsData ? postsData.list : []
    recentPosts.value = postsList.slice(0, 5)
    
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
/* Styles handled by Tailwind utility classes */
</style>
