<template>
  <div
    class="v-row"
    :class="rowClass"
    @click="onRowClick"
    @dblclick="onRowDblClick"
  >
    <span class="v-row__accent" :class="accentTone" />

    <div class="v-row__main">
      <span class="live-dot" :class="accentTone" />
      <div class="v-row__identity">
        <span class="name" :title="vehicle.name">{{ vehicle.name }}</span>
        <span class="id">{{ vehicle.id }}{{ missionIdSuffix }}</span>
      </div>

      <span class="mg-pill v-row__status" :class="statusPillClass">{{ statusDisplayLabel }}</span>

      <div class="v-row__battery" :class="batteryTone" :title="`电量 ${batteryPct}%`">
        <div class="bat-track"><div class="bat-fill" :style="{ width: `${batteryPct}%` }" /></div>
        <span class="bat-pct">{{ batteryPct }}%</span>
      </div>

      <span class="v-row__meta mono" :title="vehicle.ip ?? ''">{{ vehicle.ip ?? '—' }}</span>
      <span class="v-row__meta" :class="latencyClass">{{ latencyLabel }}</span>
      <span class="v-row__meta" :class="faultClass">{{ faultLabel }}</span>
      <span class="v-row__meta muted">{{ vehicle.group ?? '—' }}</span>

      <div class="v-row__flags">
        <span v-if="vehicle.isAlarmActive" class="flag bad">报警</span>
        <span v-if="vehicle.reachable === false" class="flag bad">不可达</span>
      </div>
    </div>

    <div class="v-row__tools" @click.stop>
      <VehicleMaintenanceSelect
        :vehicle="vehicle"
        :can-write="canWrite"
        @changed="emit('maintenanceChanged')"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { VehicleCardModel } from '@/types/car'
import { openOnboardWeb } from '@/api/vehicleOps'
import {
  useVehicleCardState,
  type VehicleCardStateOptions
} 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 stateOpts: VehicleCardStateOptions = { vehicle: () => props.vehicle }

const {
  stateLabel,
  batteryPct,
  batteryTone,
  statusPill,
  missionIdSuffix,
  statusDisplayLabel,
  accentTone,
  latencyLabel,
  latencyClass,
  faultLabel,
  faultClass
} = useVehicleCardState(stateOpts)

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

const statusPillClass = computed(() => {
  switch (accentTone.value) {
    case 'tone-success':
      return 'is-success'
    case 'tone-danger':
      return 'is-danger'
    case 'tone-warning':
      return 'is-warning'
    case 'tone-info':
      return 'is-info'
    default:
      return 'is-idle'
  }
})

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

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

<style scoped>
.v-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px 8px 14px;
  border-radius: 12px;
  background: rgba(var(--mg-bg-card-rgb, 38, 24, 78), 0.55);
  border: 1px solid rgba(var(--mg-accent-rgb, 196, 181, 253), 0.18);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.v-row:hover {
  background: rgba(var(--mg-bg-card-hi-rgb, 58, 38, 110), 0.65);
  border-color: rgba(var(--mg-accent-rgb, 196, 181, 253), 0.38);
}

.v-row.is-selected {
  border-color: rgba(var(--mg-primary-hover-rgb, 139, 92, 246), 0.75);
  box-shadow: 0 0 0 1px rgba(var(--mg-primary-hover-rgb, 139, 92, 246), 0.4);
}

.v-row__accent {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: rgba(var(--mg-accent-rgb, 196, 181, 253), 0.5);
}

.v-row__accent.tone-success { background: var(--mg-status-success, #22c55e); }
.v-row__accent.tone-warning { background: var(--mg-status-warning, #f59e0b); }
.v-row__accent.tone-danger  { background: var(--mg-status-danger, #ef4444); }
.v-row__accent.tone-info    { background: var(--mg-status-info, #3b82f6); }

.v-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.5);
}

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

.v-row__identity {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 100px;
  max-width: 180px;
}

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

.id {
  font-size: 11px;
  color: var(--mg-text-muted, rgba(255, 255, 255, 0.5));
  font-family: var(--mg-font-mono, ui-monospace, monospace);
  flex-shrink: 0;
}

.v-row__status {
  font-size: 10px;
  flex-shrink: 0;
}

.v-row__battery {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 72px;
  flex-shrink: 0;
}

.bat-track {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.bat-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--mg-status-success, #22c55e);
}

.v-row__battery.tone-warning .bat-fill { background: var(--mg-status-warning, #f59e0b); }
.v-row__battery.tone-danger  .bat-fill { background: var(--mg-status-danger, #ef4444); }

.bat-pct {
  font-size: 10px;
  font-family: var(--mg-font-mono, ui-monospace, monospace);
  color: var(--mg-text-muted, rgba(255, 255, 255, 0.65));
  min-width: 28px;
}

.v-row__meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--mg-text-light, #fff);
  min-width: 48px;
  white-space: nowrap;
}

.v-row__meta.mono {
  font-family: var(--mg-font-mono, ui-monospace, monospace);
  font-weight: 500;
  min-width: 88px;
}

.v-row__meta.muted {
  color: var(--mg-text-muted, rgba(255, 255, 255, 0.55));
  font-weight: 500;
}

.v-row__meta.val-danger { color: var(--mg-status-danger, #ef4444); }
.v-row__meta.val-warn   { color: var(--mg-status-warning, #f59e0b); }

.v-row__flags {
  display: flex;
  gap: 4px;
}

.flag {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.flag.bad {
  color: var(--mg-status-danger, #b91c1c);
  background: rgba(var(--mg-status-danger-rgb, 185, 28, 28), 0.12);
  border: 1px solid rgba(var(--mg-status-danger-rgb, 185, 28, 28), 0.28);
}

.v-row__tools {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .v-row__meta.muted,
  .v-row__flags { display: none; }
}
</style>
