<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            <el-icon><OfficeBuilding /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.tenantCount }}</div>
            <div class="stat-label">租户总数</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
            <el-icon><CircleCheck /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.activeTenants }}</div>
            <div class="stat-label">活跃租户</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.promptCount }}</div>
            <div class="stat-label">提示词模板</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
            <el-icon><Setting /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.configCount }}</div>
            <div class="stat-label">配置项总数</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>租户列表</span>
              <el-button type="primary" link @click="$router.push('/tenants')">
                查看全部 <el-icon><ArrowRight /></el-icon>
              </el-button>
            </div>
          </template>
          
          <el-table :data="tenants" style="width: 100%">
            <el-table-column prop="name" label="租户名称" />
            <el-table-column prop="domain" label="域名" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status === 'active' ? 'success' : 'danger'" size="small">
                  {{ row.status === 'active' ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          
          <div class="quick-actions">
            <el-button @click="$router.push('/tenants')">
              <el-icon><OfficeBuilding /></el-icon>
              管理租户
            </el-button>
            <el-button @click="$router.push('/prompts')">
              <el-icon><Document /></el-icon>
              管理提示词
            </el-button>
            <el-button @click="$router.push('/logs')">
              <el-icon><List /></el-icon>
              查看日志
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { OfficeBuilding, CircleCheck, Document, Setting, ArrowRight, List } from '@element-plus/icons-vue'
import api from '@/api'

const stats = ref({
  tenantCount: 0,
  activeTenants: 0,
  promptCount: 0,
  configCount: 0
})

const tenants = ref([])

onMounted(async () => {
  try {
    // 获取租户列表
    const res = await api.tenants.list({ page: 1, page_size: 5 })
    tenants.value = res.items
    stats.value.tenantCount = res.total
    stats.value.activeTenants = res.items.filter(t => t.status === 'active').length
    
    // 获取提示词数量
    const prompts = await api.prompts.list()
    stats.value.promptCount = prompts.length
    
    // 获取配置模板数量
    const configs = await api.configs.templates()
    stats.value.configCount = configs.length
  } catch (e) {
    console.error(e)
  }
})
</script>

<style lang="scss" scoped>
.dashboard {
  .stat-card {
    display: flex;
    align-items: center;
    padding: 20px;
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      
      .el-icon {
        font-size: 28px;
        color: #fff;
      }
    }
    
    .stat-content {
      .stat-value {
        font-size: 28px;
        font-weight: 600;
        color: #1a1a2e;
      }
      
      .stat-label {
        font-size: 14px;
        color: #666;
        margin-top: 4px;
      }
    }
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    
    .el-button {
      display: flex;
      flex-direction: column;
      height: auto;
      padding: 20px 30px;
      
      .el-icon {
        font-size: 24px;
        margin-bottom: 8px;
      }
    }
  }
}
</style>

