<template>
  <div class="dashboard-page">
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">控制台</h1>
        <p class="page-desc">系统概览与数据统计</p>
      </div>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="dateShortcuts"
          value-format="YYYY-MM-DD"
          @change="handleDateChange"
        />
      </div>
    </div>

    <el-row :gutter="20" v-loading="loading">
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="stat-card" @click="navigateTo('/admin/knowledge-bases')">
          <div class="stat-content">
            <div class="stat-icon primary">
              <el-icon><FolderOpened /></el-icon>
            </div>
            <div class="stat-info">
              <span class="stat-value">{{ stats.knowledgeBases }}</span>
              <span class="stat-label">知识库总数</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="stat-card" @click="navigateTo('/kb')">
          <div class="stat-content">
            <div class="stat-icon success">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <span class="stat-value">{{ stats.totalDocuments }}</span>
              <span class="stat-label">文档总数</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="stat-card" @click="navigateTo('/monitoring')">
          <div class="stat-content">
            <div class="stat-icon warning">
              <el-icon><ChatDotSquare /></el-icon>
            </div>
            <div class="stat-info">
              <span class="stat-value">{{ stats.totalMessages.toLocaleString() }}</span>
              <span class="stat-label">总消息数</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon info">
              <el-icon><Monitor /></el-icon>
            </div>
            <div class="stat-info">
              <span class="stat-value">{{ stats.totalSessions }}</span>
              <span class="stat-label">会话总数</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="enhanced-stat-card" @click="navigateTo('/admin/monitoring/intent-rules')">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <div class="icon-wrapper primary">
                  <el-icon><Aim /></el-icon>
                </div>
                <span class="header-title">意图规则命中</span>
              </div>
              <el-tag type="primary" size="small" effect="plain">{{ (stats.intentRuleHitRate * 100).toFixed(1) }}%</el-tag>
            </div>
          </template>
          <div class="enhanced-content">
            <div class="enhanced-value">{{ stats.intentRuleHitCount }}</div>
            <div class="enhanced-label">命中次数</div>
            <div class="top-list" v-if="stats.topIntentRules && stats.topIntentRules.length > 0">
              <div class="top-item" v-for="rule in stats.topIntentRules.slice(0, 3)" :key="rule.ruleId">
                <span class="top-name">{{ rule.ruleName }}</span>
                <span class="top-count">{{ rule.hitCount }}次</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="enhanced-stat-card" @click="navigateTo('/admin/monitoring/prompt-templates')">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <div class="icon-wrapper success">
                  <el-icon><DocumentCopy /></el-icon>
                </div>
                <span class="header-title">Prompt 模板</span>
              </div>
              <el-tag type="success" size="small" effect="plain">使用中</el-tag>
            </div>
          </template>
          <div class="enhanced-content">
            <div class="enhanced-value">{{ stats.promptTemplateUsageCount }}</div>
            <div class="enhanced-label">使用次数</div>
            <div class="top-list" v-if="stats.topPromptTemplates && stats.topPromptTemplates.length > 0">
              <div class="top-item" v-for="tpl in stats.topPromptTemplates.slice(0, 3)" :key="tpl.templateId">
                <span class="top-name">{{ tpl.templateName }}</span>
                <span class="top-count">{{ tpl.usageCount }}次</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="enhanced-stat-card" @click="navigateTo('/admin/monitoring/script-flows')">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <div class="icon-wrapper warning">
                  <el-icon><Share /></el-icon>
                </div>
                <span class="header-title">话术流程</span>
              </div>
              <el-tag type="warning" size="small" effect="plain">{{ (stats.scriptFlowCompletionRate * 100).toFixed(1) }}%</el-tag>
            </div>
          </template>
          <div class="enhanced-content">
            <div class="enhanced-value">{{ stats.scriptFlowActivationCount }}</div>
            <div class="enhanced-label">激活次数</div>
            <div class="top-list" v-if="stats.topScriptFlows && stats.topScriptFlows.length > 0">
              <div class="top-item" v-for="flow in stats.topScriptFlows.slice(0, 3)" :key="flow.flowId">
                <span class="top-name">{{ flow.flowName }}</span>
                <span class="top-count">{{ flow.activationCount }}次</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="enhanced-stat-card" @click="navigateTo('/admin/monitoring/guardrails')">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <div class="icon-wrapper danger">
                  <el-icon><Warning /></el-icon>
                </div>
                <span class="header-title">护栏拦截</span>
              </div>
              <el-tag type="danger" size="small" effect="plain">{{ (stats.guardrailBlockRate * 100).toFixed(1) }}%</el-tag>
            </div>
          </template>
          <div class="enhanced-content">
            <div class="enhanced-value">{{ stats.guardrailBlockCount }}</div>
            <div class="enhanced-label">拦截次数</div>
            <div class="top-list" v-if="stats.topGuardrailWords && stats.topGuardrailWords.length > 0">
              <div class="top-item" v-for="word in stats.topGuardrailWords.slice(0, 3)" :key="word.word">
                <span class="top-name">{{ word.word }}</span>
                <span class="top-count">{{ word.hitCount }}次</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card shadow="hover" class="metric-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <div class="icon-wrapper primary">
                  <el-icon><Cpu /></el-icon>
                </div>
                <span class="header-title">Token 消耗统计</span>
              </div>
              <el-tag type="primary" size="small" effect="plain">实时</el-tag>
            </div>
          </template>
          <div class="metric-content">
            <div class="metric-main">
              <span class="metric-value primary">{{ formatNumber(stats.totalTokens) }}</span>
              <span class="metric-label">总消耗</span>
            </div>
            <div class="metric-divider"></div>
            <div class="metric-detail">
              <div class="detail-item">
                <span class="detail-label">输入</span>
                <span class="detail-value">{{ formatNumber(stats.promptTokens) }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">输出</span>
                <span class="detail-value">{{ formatNumber(stats.completionTokens) }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card shadow="hover" class="metric-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <div class="icon-wrapper success">
                  <el-icon><Timer /></el-icon>
                </div>
                <span class="header-title">响应时间统计</span>
              </div>
              <el-tag :type="stats.slowRequestsCount > 0 ? 'warning' : 'success'" size="small" effect="plain">
                {{ stats.slowRequestsCount }} 次超时
              </el-tag>
            </div>
          </template>
          <div class="metric-content">
            <div class="latency-grid">
              <div class="latency-item">
                <span class="metric-value success">{{ formatLatency(stats.avgLatencyMs) }}</span>
                <span class="metric-label">平均耗时</span>
              </div>
              <div class="latency-item">
                <span class="metric-value">{{ formatLatency(stats.lastLatencyMs) }}</span>
                <span class="metric-label">上次耗时</span>
              </div>
            </div>
            <div class="metric-divider"></div>
            <div class="latency-stats">
              <div class="stat-row">
                <div class="stat-col">
                  <span class="stat-label">P95</span>
                  <span class="stat-value">{{ formatLatency(stats.p95LatencyMs) }}</span>
                </div>
                <div class="stat-col">
                  <span class="stat-label">P99</span>
                  <span class="stat-value">{{ formatLatency(stats.p99LatencyMs) }}</span>
                </div>
              </div>
              <div class="stat-row">
                <div class="stat-col">
                  <span class="stat-label">最小</span>
                  <span class="stat-value">{{ formatLatency(stats.minLatencyMs) }}</span>
                </div>
                <div class="stat-col">
                  <span class="stat-label">最大</span>
                  <span class="stat-value">{{ formatLatency(stats.maxLatencyMs) }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card shadow="hover" class="metric-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <div class="icon-wrapper warning">
                  <el-icon><DataLine /></el-icon>
                </div>
                <span class="header-title">请求统计</span>
              </div>
              <el-tag type="info" size="small" effect="plain">阈值 {{ stats.latencyThresholdMs }}ms</el-tag>
            </div>
          </template>
          <div class="metric-content">
            <div class="requests-grid">
              <div class="request-item">
                <span class="metric-value primary">{{ stats.aiRequestsCount }}</span>
                <span class="metric-label">AI 请求</span>
              </div>
              <div class="request-item">
                <span class="metric-value" :class="{ danger: stats.errorRequestsCount > 0 }">{{ stats.errorRequestsCount }}</span>
                <span class="metric-label">错误</span>
              </div>
              <div class="request-item">
                <span class="metric-value" :class="{ warning: stats.slowRequestsCount > 0 }">{{ stats.slowRequestsCount }}</span>
                <span class="metric-label">超时</span>
              </div>
            </div>
            <div class="metric-divider"></div>
            <div class="rate-stats">
              <div class="rate-item">
                <span class="rate-label">错误率</span>
                <span class="rate-value" :class="{ danger: parseFloat(errorRate) > 5 }">{{ errorRate }}%</span>
              </div>
              <div class="rate-item">
                <span class="rate-label">超时率</span>
                <span class="rate-value" :class="{ warning: parseFloat(timeoutRate) > 10 }">{{ timeoutRate }}%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <div class="icon-wrapper info">
                  <el-icon><InfoFilled /></el-icon>
                </div>
                <span class="header-title">使用说明</span>
              </div>
            </div>
          </template>
          <div class="help-content">
            <div class="help-item" @click="navigateTo('/admin/knowledge-bases')">
              <div class="help-icon primary">
                <el-icon><FolderOpened /></el-icon>
              </div>
              <div class="help-text">
                <h4>知识库管理</h4>
                <p>上传文档并建立向量索引，支持 PDF、Word、TXT 等格式。</p>
              </div>
            </div>
            <div class="help-item" @click="navigateTo('/rag-lab')">
              <div class="help-icon success">
                <el-icon><Cpu /></el-icon>
              </div>
              <div class="help-text">
                <h4>RAG 实验室</h4>
                <p>测试检索增强生成效果，查看检索结果和 AI 响应。</p>
              </div>
            </div>
            <div class="help-item" @click="navigateTo('/monitoring')">
              <div class="help-icon warning">
                <el-icon><Monitor /></el-icon>
              </div>
              <div class="help-text">
                <h4>会话监控</h4>
                <p>实时监控用户会话，查看对话记录和系统响应。</p>
              </div>
            </div>
            <div class="help-item" @click="navigateTo('/admin/embedding')">
              <div class="help-icon info">
                <el-icon><Connection /></el-icon>
              </div>
              <div class="help-text">
                <h4>嵌入模型</h4>
                <p>配置文本嵌入模型，用于文档向量化。</p>
              </div>
            </div>
            <div class="help-item" @click="navigateTo('/admin/llm')">
              <div class="help-icon primary">
                <el-icon><ChatDotSquare /></el-icon>
              </div>
              <div class="help-text">
                <h4>LLM 配置</h4>
                <p>配置大语言模型，支持 OpenAI、DeepSeek、Ollama 等。</p>
              </div>
            </div>
            <div class="help-item" @click="navigateTo('/admin/prompt-templates')">
              <div class="help-icon success">
                <el-icon><DocumentCopy /></el-icon>
              </div>
              <div class="help-text">
                <h4>Prompt 模板</h4>
                <p>管理和配置提示词模板，优化 AI 响应效果。</p>
              </div>
            </div>
            <div class="help-item" @click="navigateTo('/admin/intent-rules')">
              <div class="help-icon warning">
                <el-icon><Aim /></el-icon>
              </div>
              <div class="help-text">
                <h4>意图规则</h4>
                <p>配置意图识别规则，实现智能对话路由。</p>
              </div>
            </div>
            <div class="help-item" @click="navigateTo('/admin/script-flows')">
              <div class="help-icon info">
                <el-icon><Share /></el-icon>
              </div>
              <div class="help-text">
                <h4>话术流程</h4>
                <p>设计和管理对话流程，实现多轮对话控制。</p>
              </div>
            </div>
            <div class="help-item" @click="navigateTo('/admin/guardrails')">
              <div class="help-icon danger">
                <el-icon><Warning /></el-icon>
              </div>
              <div class="help-text">
                <h4>输出护栏</h4>
                <p>配置敏感词过滤和内容审核规则，保障输出安全。</p>
              </div>
            </div>
            <div class="help-item" @click="navigateTo('/admin/metadata-schemas')">
              <div class="help-icon primary">
                <el-icon><Setting /></el-icon>
              </div>
              <div class="help-text">
                <h4>元数据配置</h4>
                <p>配置知识库、意图规则等的动态元数据字段定义。</p>
              </div>
            </div>
            <div class="help-item" @click="navigateTo('/admin/slot-definitions')">
              <div class="help-icon success">
                <el-icon><Grid /></el-icon>
              </div>
              <div class="help-text">
                <h4>槽位定义</h4>
                <p>定义槽位类型、提取策略、校验规则和追问提示。</p>
              </div>
            </div>
            <div class="help-item" @click="navigateTo('/admin/scene-slot-bundles')">
              <div class="help-icon warning">
                <el-icon><Collection /></el-icon>
              </div>
              <div class="help-text">
                <h4>场景槽位包</h4>
                <p>配置场景与槽位的映射关系，定义每个场景需要采集的槽位。</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { FolderOpened, Document, ChatDotSquare, Monitor, Cpu, InfoFilled, Connection, Timer, DataLine, Aim, DocumentCopy, Share, Warning, Setting, Grid, Collection } from '@element-plus/icons-vue'
import { getDashboardStats, type DashboardStats } from '@/api/dashboard'

const router = useRouter()

const loading = ref(false)
const dateRange = ref<[string, string] | null>(null)

const dateShortcuts = [
  {
    text: '今日',
    value: () => {
      const today = new Date()
      today.setHours(0, 0, 0, 0)
      return [today, new Date()]
    },
  },
  {
    text: '本周',
    value: () => {
      const today = new Date()
      const day = today.getDay() || 7
      const monday = new Date(today)
      monday.setDate(today.getDate() - day + 1)
      monday.setHours(0, 0, 0, 0)
      return [monday, new Date()]
    },
  },
  {
    text: '本月',
    value: () => {
      const today = new Date()
      const firstDay = new Date(today.getFullYear(), today.getMonth(), 1)
      return [firstDay, new Date()]
    },
  },
  {
    text: '最近7天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: '最近30天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 30)
      return [start, end]
    },
  },
]

const stats = reactive<DashboardStats>({
  knowledgeBases: 0,
  totalDocuments: 0,
  totalMessages: 0,
  totalSessions: 0,
  totalTokens: 0,
  promptTokens: 0,
  completionTokens: 0,
  aiRequestsCount: 0,
  avgLatencyMs: 0,
  lastLatencyMs: null,
  lastRequestTime: null,
  slowRequestsCount: 0,
  errorRequestsCount: 0,
  p95LatencyMs: 0,
  p99LatencyMs: 0,
  minLatencyMs: 0,
  maxLatencyMs: 0,
  latencyThresholdMs: 5000,
  intentRuleHitRate: 0,
  intentRuleHitCount: 0,
  topIntentRules: [],
  promptTemplateUsageCount: 0,
  topPromptTemplates: [],
  scriptFlowActivationCount: 0,
  scriptFlowCompletionRate: 0,
  topScriptFlows: [],
  guardrailBlockCount: 0,
  guardrailBlockRate: 0,
  topGuardrailWords: [],
})

const errorRate = computed(() => {
  if (stats.aiRequestsCount === 0) return '0.00'
  return ((stats.errorRequestsCount / stats.aiRequestsCount) * 100).toFixed(2)
})

const timeoutRate = computed(() => {
  if (stats.aiRequestsCount === 0) return '0.00'
  return ((stats.slowRequestsCount / stats.aiRequestsCount) * 100).toFixed(2)
})

const formatNumber = (num: number) => {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(2) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

const formatLatency = (ms: number | null | undefined) => {
  if (ms === null || ms === undefined) return '-'
  if (ms >= 1000) {
    return (ms / 1000).toFixed(2) + 's'
  }
  return ms.toFixed(0) + 'ms'
}

const navigateTo = (path: string) => {
  router.push(path)
}

const handleDateChange = () => {
  fetchStats()
}

const fetchStats = async () => {
  loading.value = true
  try {
    const params: any = {}
    if (dateRange.value && dateRange.value.length === 2) {
      params.start_date = dateRange.value[0]
      params.end_date = dateRange.value[1]
    }
    const res = await getDashboardStats(params)
    Object.assign(stats, res)
  } catch (error) {
    console.error('Failed to fetch dashboard stats:', error)
  } finally {
    loading.value = false
  }
}

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

<style scoped>
.dashboard-page {
  padding: 24px;
  min-height: calc(100vh - 60px);
}

.page-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}

.header-content {
  flex: 1;
}

.header-actions {
  flex-shrink: 0;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.page-desc {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.stat-card {
  animation: fadeInUp 0.5s ease-out;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-card:nth-child(1) { animation-delay: 0s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.2s; }
.stat-card:nth-child(4) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 22px;
}

.stat-icon.primary {
  background-color: var(--primary-lighter);
  color: var(--primary-color);
}

.stat-icon.success {
  background-color: #D1FAE5;
  color: #059669;
}

.stat-icon.warning {
  background-color: #FEF3C7;
  color: #D97706;
}

.stat-icon.info {
  background-color: #E0E7FF;
  color: #4F46E5;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.enhanced-stat-card {
  animation: fadeInUp 0.6s ease-out;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.enhanced-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-wrapper {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 18px;
}

.icon-wrapper.primary {
  background-color: var(--primary-lighter);
  color: var(--primary-color);
}

.icon-wrapper.success {
  background-color: #D1FAE5;
  color: #059669;
}

.icon-wrapper.warning {
  background-color: #FEF3C7;
  color: #D97706;
}

.icon-wrapper.danger {
  background-color: #FEE2E2;
  color: #DC2626;
}

.icon-wrapper.info {
  background-color: #E0E7FF;
  color: #4F46E5;
}

.header-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.enhanced-content {
  text-align: center;
}

.enhanced-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.enhanced-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  margin-bottom: 12px;
}

.top-list {
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
  margin-top: 8px;
}

.top-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}

.top-name {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: left;
}

.top-count {
  color: var(--text-primary);
  font-weight: 500;
  margin-left: 8px;
}

.metric-card {
  animation: fadeInUp 0.6s ease-out;
}

.metric-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.metric-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
}

.metric-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.metric-value.primary {
  color: var(--primary-color);
}

.metric-value.success {
  color: #059669;
}

.metric-value.warning {
  color: #D97706;
}

.metric-value.danger {
  color: #DC2626;
}

.metric-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.metric-divider {
  height: 1px;
  background-color: var(--border-light);
}

.metric-detail {
  display: flex;
  justify-content: space-around;
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.detail-label {
  font-size: 12px;
  color: var(--text-tertiary);
}

.detail-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.latency-grid {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
}

.latency-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.latency-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-row {
  display: flex;
  justify-content: space-around;
}

.stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.requests-grid {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
}

.request-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rate-stats {
  display: flex;
  justify-content: space-around;
}

.rate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rate-label {
  font-size: 12px;
  color: var(--text-tertiary);
}

.rate-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.rate-value.warning {
  color: #D97706;
}

.rate-value.danger {
  color: #DC2626;
}

.help-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.help-item {
  display: flex;
  gap: 14px;
  padding: 16px;
  background-color: var(--bg-tertiary);
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.help-item:hover {
  background-color: var(--primary-lighter);
}

.help-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 18px;
  flex-shrink: 0;
}

.help-icon.primary {
  background-color: var(--primary-lighter);
  color: var(--primary-color);
}

.help-icon.success {
  background-color: #D1FAE5;
  color: #059669;
}

.help-icon.warning {
  background-color: #FEF3C7;
  color: #D97706;
}

.help-icon.info {
  background-color: #E0E7FF;
  color: #4F46E5;
}

.help-icon.danger {
  background-color: #FEE2E2;
  color: #DC2626;
}

.help-text h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.help-text p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

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

@media (max-width: 768px) {
  .dashboard-page {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
  }

  .page-title {
    font-size: 20px;
  }

  .stat-value {
    font-size: 24px;
  }

  .help-content {
    grid-template-columns: 1fr;
  }

  .metric-value {
    font-size: 28px;
  }

  .enhanced-value {
    font-size: 28px;
  }
}
</style>
