<template>
  <v-row dense class="fleet-kpi-strip">
    <v-col v-for="item in items" :key="item.key" cols="6" sm="3">
      <v-sheet rounded="lg" border class="pa-3 fleet-kpi-card" :class="`fleet-kpi-card--${item.key}`">
        <div class="d-flex align-center justify-space-between mb-1">
          <span class="text-caption text-medium-emphasis text-uppercase">{{ item.label }}</span>
          <v-chip
            v-if="item.delta != null"
            size="x-small"
            :color="deltaColor(item.delta)"
            variant="tonal"
            label
          >
            {{ formatDelta(item.delta, item.unit) }}
          </v-chip>
        </div>
        <div class="d-flex align-end ga-2 mb-2">
          <span class="text-h5 font-weight-bold" :class="valueColor(item)">
            {{ formatValue(item.current, item.unit) }}
          </span>
          <span v-if="item.threshold != null" class="text-caption text-medium-emphasis pb-1">
            阈值 {{ item.threshold }}%
          </span>
        </div>
        <v-progress-linear
          v-if="item.unit === '%' && item.current != null"
          :model-value="item.current"
          :color="barColor(item)"
          height="6"
          rounded
          bg-opacity="0.15"
        />
        <v-progress-linear
          v-else-if="item.max != null && item.current != null && item.max > 0"
          :model-value="(item.current / item.max) * 100"
          color="success"
          height="6"
          rounded
          bg-opacity="0.15"
        />
        <div class="text-caption text-medium-emphasis mt-2">
          区间 {{ fmtRange(item) }} · 均 {{ formatValue(item.avg, item.unit) }}
        </div>
      </v-sheet>
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
import { formatDelta } from '@/utils/fleetTrendAnalytics'
import type { FleetMetricKey } from '@/utils/fleetTrendAnalytics'

export interface FleetKpiItem {
  key: FleetMetricKey
  label: string
  unit: '%' | '台'
  current: number | null
  delta: number | null
  min: number | null
  max: number | null
  avg: number | null
  threshold?: number
}

defineProps<{
  items: FleetKpiItem[]
}>()

function formatValue(v: number | null, unit: string): string {
  if (v == null) return '—'
  return unit === '%' ? `${v}%` : `${v} 台`
}

function fmtRange(item: FleetKpiItem): string {
  if (item.min == null || item.max == null) return '—'
  if (item.unit === '%') return `${item.min}–${item.max}%`
  return `${item.min}–${item.max} 台`
}

function deltaColor(delta: number): string {
  if (delta > 0) return 'warning'
  if (delta < 0) return 'success'
  return 'default'
}

function valueColor(item: FleetKpiItem): string {
  if (item.unit !== '%' || item.current == null || item.threshold == null) return ''
  if (item.current >= item.threshold) return 'text-error'
  if (item.current >= item.threshold - 10) return 'text-warning'
  return 'text-success'
}

function barColor(item: FleetKpiItem): string {
  if (item.current == null || item.threshold == null) return 'primary'
  if (item.current >= item.threshold) return 'error'
  if (item.current >= item.threshold - 10) return 'warning'
  return 'primary'
}
</script>

<style scoped>
.fleet-kpi-card {
  border-left-width: 3px !important;
  border-left-style: solid !important;
}
.fleet-kpi-card--cpu {
  border-left-color: rgb(var(--v-theme-primary)) !important;
}
.fleet-kpi-card--mem {
  border-left-color: rgb(var(--v-theme-warning)) !important;
}
.fleet-kpi-card--disk {
  border-left-color: #9c27b0 !important;
}
.fleet-kpi-card--online {
  border-left-color: rgb(var(--v-theme-success)) !important;
}
</style>
