<template>
  <div class="page-container">
    <!-- Page Header -->
    <div class="dashboard__header">
      <h1 class="dashboard__title">{{ t('仪表盘') }}</h1>
      <p class="dashboard__subtitle">{{ t('欢迎回来，这是您的数据概览') }}</p>
    </div>

    <!-- Stats Cards -->
    <div class="dashboard__stats">
      <!-- Machine Card -->
      <div class="dashboard__card">
        <div class="dashboard__card-header">
          <span class="dashboard__card-label">{{ t('机器总数') }}</span>
          <svg class="dashboard__card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
            />
          </svg>
        </div>
        <div class="dashboard__card-value">{{ dashboardData?.machineTotal || 0 }}</div>
        <div class="dashboard__card-footer">
          <span class="dashboard__card-stat dashboard__card-stat--success">
            {{ t('已启用') }}: {{ dashboardData?.machineEnabled || 0 }}
          </span>
          <span class="dashboard__card-stat dashboard__card-stat--muted">
            {{ t('已禁用') }}: {{ (dashboardData?.machineTotal || 0) - (dashboardData?.machineEnabled || 0) }}
          </span>
        </div>
      </div>

      <!-- Camera Card -->
      <div class="dashboard__card">
        <div class="dashboard__card-header">
          <span class="dashboard__card-label">{{ t('摄像头总数') }}</span>
          <svg class="dashboard__card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
            />
          </svg>
        </div>
        <div class="dashboard__card-value">{{ dashboardData?.cameraTotal || 0 }}</div>
        <div class="dashboard__card-footer">
          <span class="dashboard__card-stat dashboard__card-stat--success">
            {{ t('在线') }}: {{ dashboardData?.cameraOnline || 0 }}
          </span>
          <span class="dashboard__card-stat dashboard__card-stat--muted">
            {{ t('离线') }}: {{ dashboardData?.cameraOffline || 0 }}
          </span>
        </div>
      </div>

      <!-- Channel Card -->
      <div class="dashboard__card">
        <div class="dashboard__card-header">
          <span class="dashboard__card-label">{{ t('通道总数') }}</span>
          <svg class="dashboard__card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
            />
          </svg>
        </div>
        <div class="dashboard__card-value">{{ dashboardData?.channelTotal || 0 }}</div>
        <div class="dashboard__card-footer">
          <span class="dashboard__card-stat dashboard__card-stat--muted">{{ t('可用通道数量') }}</span>
        </div>
      </div>

      <!-- Online Rate Card -->
      <div class="dashboard__card">
        <div class="dashboard__card-header">
          <span class="dashboard__card-label">{{ t('摄像头在线率') }}</span>
          <svg class="dashboard__card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
            />
          </svg>
        </div>
        <div class="dashboard__card-value dashboard__card-value--success">{{ onlineRate }}%</div>
        <div class="dashboard__card-footer">
          <span class="dashboard__card-stat dashboard__card-stat--muted">{{ t('系统运行正常') }}</span>
        </div>
      </div>
    </div>

    <!-- Quick Actions & System Info -->
    <div class="dashboard__grid">
      <!-- Quick Actions -->
      <div class="dashboard__section">
        <div class="dashboard__section-header">
          <h2 class="dashboard__section-title">{{ t('快捷操作') }}</h2>
          <button class="dashboard__refresh" @click="loadDashboardData">
            <svg
              class="dashboard__refresh-icon"
              :class="{ 'dashboard__refresh-icon--loading': loading }"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
              />
            </svg>
            {{ t('刷新数据') }}
          </button>
        </div>
        <div class="dashboard__actions">
          <button class="dashboard__action" @click="goTo('/camera')">
            <svg class="dashboard__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
              />
            </svg>
            <span>{{ t('摄像头管理') }}</span>
          </button>
          <button class="dashboard__action" @click="goTo('/machine')">
            <svg class="dashboard__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
              />
            </svg>
            <span>{{ t('机器管理') }}</span>
          </button>
          <button class="dashboard__action" @click="goTo('/stream-test')">
            <svg class="dashboard__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
              />
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
            <span>{{ t('Stream 测试') }}</span>
          </button>
          <button class="dashboard__action" @click="goTo('/stats')">
            <svg class="dashboard__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
              />
            </svg>
            <span>{{ t('观看统计') }}</span>
          </button>
        </div>
      </div>

      <!-- System Info -->
      <div class="dashboard__section">
        <div class="dashboard__section-header">
          <h2 class="dashboard__section-title">{{ t('系统信息') }}</h2>
        </div>
        <div class="dashboard__info">
          <div class="dashboard__info-item">
            <span class="dashboard__info-label">{{ t('系统状态') }}</span>
            <span class="dashboard__info-value">
              <span class="dashboard__badge dashboard__badge--success">{{ t('正常') }}</span>
            </span>
          </div>
          <div class="dashboard__info-item">
            <span class="dashboard__info-label">{{ t('数据更新时间') }}</span>
            <span class="dashboard__info-value">{{ lastUpdateTime }}</span>
          </div>
          <div class="dashboard__info-item">
            <span class="dashboard__info-label">{{ t('版本') }}</span>
            <span class="dashboard__info-value">v{{ version }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getDashboardStats } from '@/api/stats'
import type { DashboardStatsDTO } from '@/types'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const router = useRouter()
const loading = ref(false)
const dashboardData = ref<DashboardStatsDTO | null>(null)
const lastUpdate = ref<Date | null>(null)
const version = __APP_VERSION__

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.success) {
      dashboardData.value = res.data
      lastUpdate.value = new Date()
    } else {
      ElMessage.error(res.errMessage || t('获取统计数据失败'))
    }
  } catch (error) {
    console.error('Failed to load dashboard data:', error)
    ElMessage.error(t('获取统计数据失败'))
  } finally {
    loading.value = false
  }
}

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

<style lang="scss" scoped>
.dashboard {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  padding: 1rem;

  // Page Header
  &__header {
    margin-bottom: 2rem;
  }

  &__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 0.25rem 0;

    @media (min-width: 1024px) {
      font-size: 1.875rem;
    }
  }

  &__subtitle {
    color: #9ca3af;
    font-size: 0.875rem;
    margin: 0;

    @media (min-width: 1024px) {
      font-size: 1rem;
    }
  }

  // Stats Cards
  &__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;

    @media (min-width: 640px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 1024px) {
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }
  }

  &__card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 1.5rem;
    transition: box-shadow 150ms ease-in-out;

    &:hover {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
  }

  &__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  &__card-label {
    color: #6b7280;
    font-size: 0.875rem;
  }

  &__card-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #9ca3af;
  }

  &__card-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: #000000;

    &--success {
      color: #10b981;
    }
  }

  &__card-footer {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
  }

  &__card-stat {
    &--success {
      color: #10b981;
    }

    &--muted {
      color: #9ca3af;
    }
  }

  // Grid Layout
  &__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;

    @media (min-width: 1024px) {
      grid-template-columns: 2fr 1fr;
    }
  }

  // Section
  &__section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 1.5rem;
  }

  &__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }

  &__section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #000000;
    margin: 0;
  }

  // Refresh Button
  &__refresh {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 150ms ease-in-out;

    &:hover {
      color: #000000;
    }
  }

  &__refresh-icon {
    width: 1rem;
    height: 1rem;

    &--loading {
      animation: spin 1s linear infinite;
    }
  }

  // Quick Actions
  &__actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

    @media (min-width: 640px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  &__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 150ms ease-in-out;

    &:hover {
      background: #f3f4f6;
      border-color: #000000;
    }

    span {
      font-size: 0.875rem;
      color: #374151;
      font-weight: 500;
    }
  }

  &__action-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #6b7280;
  }

  // System Info
  &__info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  &__info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  &__info-label {
    color: #6b7280;
    font-size: 0.875rem;
  }

  &__info-value {
    color: #000000;
    font-size: 0.875rem;
    font-weight: 500;
  }

  // Badge
  &__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;

    &--success {
      background: #d1fae5;
      color: #065f46;
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
