<template>
  <div class="dashboard-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="stat-card machines" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon :size="40"><Monitor /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ dashboardData?.machineTotal || 0 }}
              </div>
              <div class="stat-label">机器总数</div>
            </div>
          </div>
          <div class="stat-footer">
            <span class="online">已启用: {{ dashboardData?.machineEnabled || 0 }}</span>
            <span class="offline">
              已禁用: {{ (dashboardData?.machineTotal || 0) - (dashboardData?.machineEnabled || 0) }}
            </span>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="stat-card cameras" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon :size="40"><VideoCamera /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ dashboardData?.cameraTotal || 0 }}
              </div>
              <div class="stat-label">摄像头总数</div>
            </div>
          </div>
          <div class="stat-footer">
            <span class="online">在线: {{ dashboardData?.cameraOnline || 0 }}</span>
            <span class="offline">离线: {{ dashboardData?.cameraOffline || 0 }}</span>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="stat-card channels" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon :size="40"><Connection /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">
                {{ dashboardData?.channelTotal || 0 }}
              </div>
              <div class="stat-label">通道总数</div>
            </div>
          </div>
          <div class="stat-footer">
            <span>可用通道数量</span>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="stat-card status" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon :size="40"><CircleCheck /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value online-rate">{{ onlineRate }}%</div>
              <div class="stat-label">摄像头在线率</div>
            </div>
          </div>
          <div class="stat-footer">
            <span>系统运行正常</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作 -->
    <el-row :gutter="20" class="quick-actions">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
              <el-button type="primary" link :icon="Refresh" @click="loadDashboardData">刷新数据</el-button>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="8" :md="6">
              <el-button class="action-btn" @click="goTo('/camera')">
                <el-icon :size="24"><VideoCamera /></el-icon>
                <span>摄像头管理</span>
              </el-button>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-button class="action-btn" @click="goTo('/machine')">
                <el-icon :size="24"><Monitor /></el-icon>
                <span>机器管理</span>
              </el-button>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-button class="action-btn" @click="goTo('/stream-test')">
                <el-icon :size="24"><VideoPlay /></el-icon>
                <span>Stream 测试</span>
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统信息 -->
    <el-row :gutter="20" class="system-info">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
            </div>
          </template>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="系统状态">
              <el-tag type="success">正常</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="数据更新时间">
              {{ lastUpdateTime }}
            </el-descriptions-item>
            <el-descriptions-item label="版本">v1.0.0</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

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

const router = useRouter()
const loading = ref(false)
const dashboardData = 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 (!dashboardData.value || !dashboardData.value.cameraTotal) return 0
  return Math.round((dashboardData.value.cameraOnline / dashboardData.value.cameraTotal) * 100)
})

function goTo(path: string) {
  router.push(path)
}

async function loadDashboardData() {
  loading.value = true
  try {
    const res = await getDashboardStats()
    if (res.code === 200) {
      dashboardData.value = res.data
      lastUpdate.value = new Date()
    } else {
      ElMessage.error(res.message || '获取统计数据失败')
    }
  } catch (error) {
    console.error('Failed to load dashboard data:', error)
    ElMessage.error('获取统计数据失败')
  } finally {
    loading.value = false
  }
}

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

<style lang="scss" scoped>
.dashboard-container {
  // padding: 20px;
}

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

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

.stat-card {
  height: 160px;

  .stat-content {
    display: flex;
    align-items: center;
    padding: 10px 0;
  }

  .stat-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
  }

  .stat-info {
    flex: 1;
  }

  .stat-value {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2;

    &.online-rate {
      color: #67c23a;
    }
  }

  .stat-label {
    font-size: 14px;
    color: #909399;
    margin-top: 5px;
  }

  .stat-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid #ebeef5;
    font-size: 12px;
    color: #909399;

    .online {
      color: #67c23a;
    }
    .offline {
      color: #909399;
    }
  }

  &.machines .stat-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
  }

  &.cameras .stat-icon {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
  }

  &.channels .stat-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
  }

  &.status .stat-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
  }
}

.quick-actions {
  margin-bottom: 20px;

  .action-btn {
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;

    span {
      font-size: 14px;
    }
  }
}

.system-info {
  margin-bottom: 20px;
}

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