<template>
  <article
    class="v-card"
    :class="cardClass"
    @click="onCardClick"
    @dblclick="onCardDblClick"
  >
    <!-- 顶栏：状态色带 + 车名 -->
    <header class="v-card__banner" :class="accentTone">
      <div class="v-card__banner-glow" aria-hidden="true" />
      <div class="v-card__banner-row">
        <div class="v-card__live">
          <span class="live-dot" />
          <span>{{ statusPill.label }}</span>
        </div>
        <div class="v-card__tools" @click.stop>
          <VehicleMaintenanceSelect
            :vehicle="vehicle"
            :can-write="canWrite"
            @changed="emit('maintenanceChanged')"
          />
        </div>
      </div>
      <div class="v-card__identity">
        <h3 class="v-card__name" :title="vehicle.name">{{ vehicle.name }}</h3>
        <span class="v-card__id">{{ vehicle.id }}{{ missionIdSuffix }}</span>
        <span v-if="vehicle.group" class="v-card__fleet">{{ vehicle.group }}</span>
      </div>
    </header>

    <!-- 主体：环形电量 + 指标格 -->
    <div class="v-card__body">
      <div class="v-card__ring" :class="batteryTone" :title="`电量 ${batteryPct}%`">
        <svg viewBox="0 0 88 88" class="ring-svg" aria-hidden="true">
          <circle class="ring-track" cx="44" cy="44" r="36" />
          <circle
            class="ring-progress"
            cx="44"
            cy="44"
            r="36"
            :stroke-dasharray="ringCircumference"
            :stroke-dashoffset="ringOffset"
          />
        </svg>
        <div class="ring-center">
          <span class="ring-label">电量</span>
          <span class="ring-pct">{{ batteryPct }}%</span>
        </div>
      </div>

      <dl class="v-card__grid">
        <div class="cell">
          <dt>IP</dt>
          <dd class="mono">{{ vehicle.ip ?? '—' }}</dd>
        </div>
        <div class="cell">
          <dt>延迟</dt>
          <dd :class="latencyClass">{{ latencyLabel }}</dd>
        </div>
        <div class="cell">
          <dt>故障率</dt>
          <dd :class="faultClass">{{ faultLabel }}</dd>
        </div>
        <div class="cell">
          <dt>运行状态</dt>
          <dd>{{ runtimeStatusLabel }}</dd>
        </div>
        <div class="cell cell--wide">
          <dt>资源</dt>
          <dd class="resource-line">
            <span :class="cpuChipClass">CPU {{ cpuLabel }}</span>
            <span class="sep">·</span>
            <span :class="memChipClass">内存 {{ memLabel }}</span>
          </dd>
        </div>
      </dl>
    </div>

    <!-- 底栏：连通性指示灯 -->
    <footer class="v-card__dock">
      <div class="dock-signals">
        <span class="signal" :class="vehicle.isAlarmActive ? 'is-bad' : 'is-ok'">
          <el-icon><Warning /></el-icon>
          {{ vehicle.isAlarmActive ? '报警' : '无报警' }}
        </span>
        <span class="signal" :class="vehicle.reachable === false ? 'is-bad' : 'is-ok'">
          <el-icon><Connection /></el-icon>
          {{ vehicle.reachable === false ? '不可达' : '在线' }}
        </span>
      </div>
      <span class="dock-action">
        双击打开车载界面
        <el-icon><Right /></el-icon>
      </span>
    </footer>
  </article>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Warning, Connection, Right } from '@element-plus/icons-vue'
import type { VehicleCardModel } from '@/types/car'
import { openOnboardWeb } from '@/api/vehicleOps'
import { useVehicleCardState } from '@/composables/useVehicleCardState'
import VehicleMaintenanceSelect from '@/components/fleet/VehicleMaintenanceSelect.vue'

const props = defineProps<{
  vehicle: VehicleCardModel
  selected?: boolean
  canWrite?: boolean
}>()

const emit = defineEmits<{
  select: [id: string]
  maintenanceChanged: []
}>()

const RING_R = 36
const ringCircumference = 2 * Math.PI * RING_R

const {
  batteryPct,
  batteryTone,
  statusPill,
  missionIdSuffix,
  runtimeStatusLabel,
  accentTone,
  latencyLabel,
  latencyClass,
  faultLabel,
  faultClass,
  cpuLabel,
  memLabel,
  cpuChipClass,
  memChipClass
} = useVehicleCardState({ vehicle: () => props.vehicle })

const ringOffset = computed(() =>
  ringCircumference * (1 - batteryPct.value / 100)
)

const cardClass = computed(() => ({
  'is-selected': props.selected,
  'is-alarm': props.vehicle.isAlarmActive,
  'is-unreachable': props.vehicle.reachable === false,
  [statusPill.value.tone]: true
}))

function onCardClick() {
  emit('select', props.vehicle.id)
}

function onCardDblClick(e: MouseEvent) {
  const target = e.target as HTMLElement
  if (target.closest('.v-card__tools')) return
  openOnboardWeb(props.vehicle.onboardUrl, props.vehicle.ip)
}
</script>

<style scoped>
/* ── 全新车辆卡片：顶栏色带 + 环形电量 + 指标格 + 底栏信号 ── */
.v-card {
  --vc-radius: 16px;
  display: flex;
  flex-direction: column;
  align-self: start;
  height: auto;
  min-height: 220px;
  border-radius: var(--vc-radius);
  overflow: hidden;
  cursor: pointer;
  background: rgba(var(--mg-bg-card-rgb, 38, 24, 78), 0.92);
  border: 1px solid var(--mg-glass-border, rgba(var(--mg-accent-rgb, 196, 181, 253), 0.22));
  box-shadow: var(--mg-glass-shadow, 0 10px 28px rgba(var(--mg-shadow-rgb, 8, 2, 24), 0.5));
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.v-card:hover {
  transform: translateY(-4px);
  border-color: var(--mg-glass-border-hi, rgba(var(--mg-primary-hover-rgb, 139, 92, 246), 0.55));
  box-shadow: var(--mg-glass-shadow-hi, 0 16px 40px rgba(var(--mg-primary-rgb, 124, 58, 237), 0.32));
}

.v-card.is-selected {
  border-color: rgba(var(--mg-primary-hover-rgb, 139, 92, 246), 0.9);
  box-shadow: 0 0 0 2px rgba(var(--mg-primary-hover-rgb, 139, 92, 246), 0.45);
}

/* ── 顶栏 ── */
.v-card__banner {
  position: relative;
  padding: 12px 14px 14px;
  background: linear-gradient(
    125deg,
    rgba(var(--mg-primary-hover-rgb, 139, 92, 246), 0.55) 0%,
    rgba(var(--mg-primary-rgb, 124, 58, 237), 0.35) 55%,
    rgba(var(--mg-bg-card-darker-rgb, 20, 12, 48), 0.2) 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.v-card__banner.tone-danger {
  background: linear-gradient(125deg, rgba(var(--mg-status-danger-rgb, 239, 68, 68), 0.45), rgba(var(--mg-bg-card-darker-rgb, 20, 12, 48), 0.5));
}
.v-card__banner.tone-warning {
  background: linear-gradient(125deg, rgba(var(--mg-status-warning-rgb, 245, 158, 11), 0.4), rgba(var(--mg-primary-rgb, 124, 58, 237), 0.3));
}
.v-card__banner.tone-success {
  background: linear-gradient(125deg, rgba(var(--mg-status-success-rgb, 34, 197, 94), 0.28), rgba(var(--mg-primary-rgb, 124, 58, 237), 0.38));
}
.v-card__banner.tone-info {
  background: linear-gradient(125deg, rgba(var(--mg-status-info-rgb, 59, 130, 246), 0.35), rgba(var(--mg-primary-rgb, 124, 58, 237), 0.35));
}

.v-card__banner-glow {
  position: absolute;
  top: -30px;
  right: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.v-card__banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.v-card__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.3px;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  animation: pulse 2s ease-in-out infinite;
}

.tone-success .live-dot { background: var(--mg-status-success, #22c55e); box-shadow: 0 0 8px var(--mg-status-success, #22c55e); }
.tone-danger .live-dot  { background: var(--mg-status-danger, #ef4444); box-shadow: 0 0 8px var(--mg-status-danger, #ef4444); }
.tone-warning .live-dot { background: var(--mg-status-warning, #f59e0b); box-shadow: 0 0 8px var(--mg-status-warning, #f59e0b); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(0.85); }
}

.v-card__tools {
  display: flex;
  align-items: center;
}

.v-card__identity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.v-card__name {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.v-card__id {
  font-family: var(--mg-font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
}

.v-card__fleet {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.8);
}

/* ── 主体 ── */
.v-card__body {
  display: flex;
  gap: 14px;
  padding: 14px;
  align-items: center;
}

.v-card__ring {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

.ring-svg {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: rgba(var(--mg-accent-rgb, 196, 181, 253), 0.18);
  stroke-width: 6;
}

.ring-progress {
  fill: none;
  stroke: var(--mg-status-success, #22c55e);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  filter: drop-shadow(0 0 4px rgba(var(--mg-status-success-rgb, 34, 197, 94), 0.45));
}

.v-card__ring.tone-warning .ring-progress {
  stroke: var(--mg-status-warning, #f59e0b);
  filter: drop-shadow(0 0 4px rgba(var(--mg-status-warning-rgb, 245, 158, 11), 0.45));
}
.v-card__ring.tone-danger .ring-progress {
  stroke: var(--mg-status-danger, #ef4444);
  filter: drop-shadow(0 0 4px rgba(var(--mg-status-danger-rgb, 239, 68, 68), 0.45));
}

.ring-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.ring-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--mg-text-dim, rgba(var(--mg-accent-rgb, 196, 181, 253), 0.95));
  letter-spacing: 1px;
  line-height: 1;
}

.ring-pct {
  font-family: var(--mg-font-mono, ui-monospace, monospace);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--mg-text-light, #1a0f3d);
}

.v-card__ring.tone-warning .ring-pct {
  color: var(--mg-status-warning, #f59e0b);
}
.v-card__ring.tone-danger .ring-pct {
  color: var(--mg-status-danger, #ef4444);
}

.v-card__grid {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cell {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--mg-veil-1, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--mg-veil-border, rgba(255, 255, 255, 0.07));
}

.cell--wide {
  grid-column: 1 / -1;
}

.cell dt {
  margin: 0 0 3px;
  font-size: 10px;
  color: var(--mg-text-muted, rgba(255, 255, 255, 0.5));
  font-weight: 500;
}

.cell dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--mg-text-light, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell dd.mono {
  font-family: var(--mg-font-mono, ui-monospace, monospace);
  font-weight: 600;
  font-size: 12px;
}

.cell dd.val-danger { color: var(--mg-status-danger, #ef4444); }
.cell dd.val-warn   { color: var(--mg-status-warning, #f59e0b); }
.cell dd.val-ok     { color: var(--mg-status-success, #22c55e); }

.resource-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.resource-line .sep {
  opacity: 0.35;
  font-weight: 400;
}

/* ── 底栏 ── */
.v-card__dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--mg-veil-2, rgba(0, 0, 0, 0.22));
  border-top: 1px solid var(--mg-veil-border, rgba(255, 255, 255, 0.06));
}

.dock-signals {
  display: flex;
  gap: 10px;
}

.signal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mg-text-muted, rgba(255, 255, 255, 0.55));
}

.signal .el-icon { font-size: 13px; }

.signal.is-ok  { color: var(--mg-status-success, #22c55e); }
.signal.is-bad { color: var(--mg-status-danger, #ef4444); }

.dock-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--mg-text-dim, rgba(255, 255, 255, 0.45));
  letter-spacing: 0.2px;
  transition: color 0.15s;
}

.v-card:hover .dock-action {
  color: var(--mg-primary, #7c3aed);
}
</style>
