<template>
  <div class="sino-page">
    <div class="stats-grid">
      <div v-for="item in statItems" :key="item.key" class="stat-card">
        <div class="stat-label">{{ item.label }}</div>
        <div class="stat-value">{{ item.value }}</div>
      </div>
    </div>

    <div class="sino-card">
      <div class="card-header">使用说明</div>
      <div class="card-body">
        <p>1. 先在「渠道主体」录入企微主体信息。</p>
        <p>2. 在「渠道账号」添加发送/接收账号。</p>
        <p>3. 在「会话/群聊」维护业务群并绑定发送账号。</p>
        <p>4. 在「发送记录」查看业务系统调用发送 API 的结果。</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getDashboardStats } from '@/api/dashboard'

interface Stats {
  subjectCount: number
  accountCount: number
  conversationCount: number
  sentToday: number
}

const stats = reactive<Stats>({
  subjectCount: 0,
  accountCount: 0,
  conversationCount: 0,
  sentToday: 0,
})

const statItems = computed(() => [
  { key: 'subjectCount', label: '渠道主体', value: stats.subjectCount },
  { key: 'accountCount', label: '渠道账号', value: stats.accountCount },
  { key: 'conversationCount', label: '会话/群聊', value: stats.conversationCount },
  { key: 'sentToday', label: '今日发送', value: stats.sentToday },
])

async function loadStats() {
  try {
    const res: any = await getDashboardStats()
    Object.assign(stats, res.data || {})
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}

onMounted(loadStats)
</script>

<style scoped>
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
}

.stat-label {
  font-size: 13px;
  color: #64748B;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #0F172A;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #E2E8F0;
  font-size: 16px;
  font-weight: 600;
  color: #0F172A;
}

.card-body {
  padding: 20px;
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
}

.card-body p {
  margin: 0 0 8px;
}

.card-body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>
