<template>
  <div class="page-container">
    <!-- 刷新按钮 -->
    <el-card class="filter-card" shadow="hover">
      <el-form inline>
        <el-form-item label="统计概览">
          <span class="update-time">更新时间: {{ lastUpdateTime }}</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Refresh" :loading="loading" @click="loadStats">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 总体统计 -->
    <el-row :gutter="20" class="summary-cards">
      <el-col :xs="12" :sm="6">
        <el-card shadow="hover" class="summary-card machines">
          <el-statistic title="机器总数" :value="statsData?.machineTotal || 0">
            <template #prefix>
              <el-icon>
                <Monitor />
              </el-icon>
            </template>
          </el-statistic>
          <div class="stat-detail">已启用: {{ statsData?.machineEnabled || 0 }}</div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6">
        <el-card shadow="hover" class="summary-card cameras">
          <el-statistic title="摄像头总数" :value="statsData?.cameraTotal || 0">
            <template #prefix>
              <el-icon>
                <VideoCamera />
              </el-icon>
            </template>
          </el-statistic>
          <div class="stat-detail">
            <span class="online">在线: {{ statsData?.cameraOnline || 0 }}</span>
            <span class="offline">离线: {{ statsData?.cameraOffline || 0 }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6">
        <el-card shadow="hover" class="summary-card channels">
          <el-statistic title="通道总数" :value="statsData?.channelTotal || 0">
            <template #prefix>
              <el-icon>
                <Connection />
              </el-icon>
            </template>
          </el-statistic>
          <div class="stat-detail">可用通道数量</div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6">
        <el-card shadow="hover" class="summary-card rate">
          <el-statistic title="摄像头在线率" :value="onlineRate" suffix="%">
            <template #prefix>
              <el-icon>
                <CircleCheck />
              </el-icon>
            </template>
          </el-statistic>
          <div class="stat-detail">系统运行状态</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 统计图表占位 -->
    <el-card class="chart-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>统计详情</span>
        </div>
      </template>
      <el-empty description="详细统计功能开发中...">
        <template #image>
          <el-icon :size="60" style="color: #c0c4cc">
            <TrendCharts />
          </el-icon>
        </template>
      </el-empty>
    </el-card>

    <!-- 设备状态概览 -->
    <el-row :gutter="20">
      <el-col :xs="24" :lg="12">
        <el-card class="status-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>摄像头状态分布</span>
            </div>
          </template>
          <div class="status-chart">
            <div class="status-item online">
              <div class="status-bar" :style="{ width: getStatusWidth('online') + '%' }"></div>
              <div class="status-info">
                <span class="status-label">在线</span>
                <span class="status-value">{{ statsData?.cameraOnline || 0 }}</span>
              </div>
            </div>
            <div class="status-item offline">
              <div class="status-bar" :style="{ width: getStatusWidth('offline') + '%' }"></div>
              <div class="status-info">
                <span class="status-label">离线</span>
                <span class="status-value">{{ statsData?.cameraOffline || 0 }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :lg="12">
        <el-card class="status-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>机器状态分布</span>
            </div>
          </template>
          <div class="status-chart">
            <div class="status-item enabled">
              <div class="status-bar" :style="{ width: getMachineStatusWidth('enabled') + '%' }"></div>
              <div class="status-info">
                <span class="status-label">已启用</span>
                <span class="status-value">{{ statsData?.machineEnabled || 0 }}</span>
              </div>
            </div>
            <div class="status-item disabled">
              <div class="status-bar" :style="{ width: getMachineStatusWidth('disabled') + '%' }"></div>
              <div class="status-info">
                <span class="status-label">已禁用</span>
                <span class="status-value">
                  {{ (statsData?.machineTotal || 0) - (statsData?.machineEnabled || 0) }}
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, Monitor, VideoCamera, Connection, CircleCheck, TrendCharts } from '@element-plus/icons-vue'
import { getDashboardStats } from '@/api/stats'
import type { DashboardStatsDTO } from '@/types'

const loading = ref(false)
const statsData = ref<DashboardStatsDTO | null>(null)
const lastUpdate = ref<Date | null>(null)

const lastUpdateTime = computed(() => {
  if (!lastUpdate.value) return '-'
  return lastUpdate.value.toLocaleString('zh-CN')
})

const onlineRate = computed(() => {
  if (!statsData.value || !statsData.value.cameraTotal) return 0
  return Math.round((statsData.value.cameraOnline / statsData.value.cameraTotal) * 100)
})

function getStatusWidth(type: 'online' | 'offline'): number {
  if (!statsData.value || !statsData.value.cameraTotal) return 0
  const value = type === 'online' ? statsData.value.cameraOnline : statsData.value.cameraOffline
  return Math.round((value / statsData.value.cameraTotal) * 100)
}

function getMachineStatusWidth(type: 'enabled' | 'disabled'): number {
  if (!statsData.value || !statsData.value.machineTotal) return 0
  const value =
    type === 'enabled' ? statsData.value.machineEnabled : statsData.value.machineTotal - statsData.value.machineEnabled
  return Math.round((value / statsData.value.machineTotal) * 100)
}

async function loadStats() {
  loading.value = true
  try {
    const res = await getDashboardStats()
    if (res.success) {
      statsData.value = res.data
      lastUpdate.value = new Date()
    } else {
      ElMessage.error(res.errMessage || '获取统计数据失败')
    }
  } catch (error) {
    console.error('Failed to load stats:', error)
    ElMessage.error('获取统计数据失败')
  } finally {
    loading.value = false
  }
}

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

<style lang="scss" scoped>
.page-container {
}

.filter-card {
  margin-bottom: 20px;

  .update-time {
    color: #909399;
    font-size: 14px;
  }
}

.summary-cards {
  margin-bottom: 20px;

  .el-col {
    margin-bottom: 15px;
  }

  .summary-card {
    text-align: center;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
    }

    &.machines::before {
      background: linear-gradient(90deg, #667eea, #764ba2);
    }

    &.cameras::before {
      background: linear-gradient(90deg, #11998e, #38ef7d);
    }

    &.channels::before {
      background: linear-gradient(90deg, #f093fb, #f5576c);
    }

    &.rate::before {
      background: linear-gradient(90deg, #4facfe, #00f2fe);
    }

    :deep(.el-statistic__head) {
      font-size: 14px;
    }

    :deep(.el-statistic__content) {
      font-size: 28px;
    }

    .stat-detail {
      margin-top: 10px;
      font-size: 12px;
      color: #909399;

      .online {
        color: #67c23a;
        margin-right: 10px;
      }

      .offline {
        color: #909399;
      }
    }
  }
}

.chart-card {
  margin-bottom: 20px;
}

.status-card {
  margin-bottom: 20px;

  .status-chart {
    padding: 10px 0;
  }

  .status-item {
    margin-bottom: 15px;

    &:last-child {
      margin-bottom: 0;
    }

    .status-bar {
      height: 24px;
      border-radius: var(--radius-base);
      transition: width 0.3s ease;
      min-width: 20px;
    }

    &.online .status-bar {
      background: linear-gradient(90deg, #67c23a, #85ce61);
    }

    &.offline .status-bar {
      background: linear-gradient(90deg, #909399, #a6a9ad);
    }

    &.enabled .status-bar {
      background: linear-gradient(90deg, #409eff, #66b1ff);
    }

    &.disabled .status-bar {
      background: linear-gradient(90deg, #e6a23c, #ebb563);
    }

    .status-info {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      font-size: 13px;
    }

    .status-label {
      color: #606266;
    }

    .status-value {
      color: #303133;
      font-weight: 500;
    }
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
