import { IconCopy } from '@douyinfe/semi-icons';
import { Button, Card, Form, Select, Space, Table, Tag, Toast } from '@douyinfe/semi-ui';
import { useEffect, useMemo, useState } from 'react';
import { api } from '../api/client';
import type { VehicleCoverageRow, VehicleCoverageSummary } from '../api/types';
import { DataEmpty } from '../components/DataEmpty';
import { PageHeader } from '../components/PageHeader';
import { SourceStatusTags } from '../components/SourceStatusTags';
import { StatusTag } from '../components/StatusTag';
import { buildAppHash } from '../domain/appRoute';
import { buildCsv, downloadCsv, type CsvColumn } from '../domain/csvExport';
import { summarizeVehicleService, type VehicleServiceVerdict } from '../domain/vehicleService';

function vehicleServiceStatus(row: VehicleCoverageRow) {
  if (row.serviceStatus) {
    return {
      label: row.serviceStatus.title,
      color: row.serviceStatus.severity === 'ok' ? 'green' as const : row.serviceStatus.severity === 'error' ? 'red' as const : 'orange' as const
    };
  }
  const verdict = summarizeVehicleService({
    bindingStatus: row.bindingStatus,
    sourceCount: row.sourceCount,
    onlineSourceCount: row.onlineSourceCount,
    missingProtocols: row.missingProtocols,
    mileageDeltaKm: row.sourceConsistency?.mileageDeltaKm
  });
  return { label: verdict.status, color: verdict.color };
}

function rowServiceVerdict(row: VehicleCoverageRow): VehicleServiceVerdict {
  return summarizeVehicleService({
    bindingStatus: row.bindingStatus,
    sourceCount: row.sourceCount,
    onlineSourceCount: row.onlineSourceCount,
    missingProtocols: row.missingProtocols,
    mileageDeltaKm: row.sourceConsistency?.mileageDeltaKm
  });
}

function sourceEvidenceText(row: VehicleCoverageRow) {
  return `${row.onlineSourceCount}/${row.sourceCount} 来源在线`;
}

function primaryRowProtocol(row: VehicleCoverageRow, fallbackProtocol?: string) {
  return (fallbackProtocol || row.sourceStatus?.find((source) => source.online)?.protocol || row.protocols?.[0] || '').trim();
}

function rowWorkflowFilters(row: VehicleCoverageRow, fallbackProtocol?: string) {
  return {
    keyword: row.vin,
    ...(primaryRowProtocol(row, fallbackProtocol) ? { protocol: primaryRowProtocol(row, fallbackProtocol) } : {})
  };
}

function vehicleArchiveCompleteness(row: VehicleCoverageRow) {
  const fields = [row.vin, row.plate, row.phone, row.oem];
  const completed = fields.filter((item) => Boolean(String(item ?? '').trim())).length;
  return { completed, total: fields.length, label: `${completed}/${fields.length}` };
}

function vehicleArchiveMissingLabels(row: VehicleCoverageRow) {
  return [
    { value: row.vin, label: '缺VIN' },
    { value: row.plate, label: '缺车牌' },
    { value: row.phone, label: '缺手机号' },
    { value: row.oem, label: '缺OEM' }
  ].filter((item) => !String(item.value ?? '').trim()).map((item) => item.label);
}

const coverageLabel: Record<string, string> = {
  single: '单源',
  multi: '多源'
};

const serviceStatusLabel: Record<string, string> = {
  healthy: '服务正常',
  degraded: '来源不完整',
  offline: '车辆离线',
  no_data: '暂无来源证据',
  identity_required: '身份未绑定'
};

const onlineLabel: Record<string, string> = {
  online: '在线',
  offline: '离线'
};

const bindingStatusLabel: Record<string, string> = {
  bound: '已绑定',
  unbound: '未绑定'
};

const archiveStatusLabel: Record<string, string> = {
  complete: '完整',
  incomplete: '不完整'
};
const archiveMissingLabel: Record<string, string> = {
  plate: '缺车牌',
  phone: '缺手机号',
  oem: '缺OEM'
};

function sourceDiagnosisText(row: VehicleCoverageRow) {
  const parts = [sourceEvidenceText(row)];
  if ((row.missingProtocols ?? []).length > 0) {
    parts.push(`缺 ${row.missingProtocols.join('、')}`);
  } else if (row.sourceCount > 0) {
    parts.push('来源完整');
  } else {
    parts.push('暂无来源');
  }
  return parts.join('，');
}

const vehicleExportColumns: CsvColumn<VehicleCoverageRow>[] = [
  { title: 'VIN', value: (row) => row.vin },
  { title: '车牌', value: (row) => row.plate },
  { title: '手机号', value: (row) => row.phone },
  { title: 'OEM', value: (row) => row.oem },
  { title: '来源', value: (row) => row.protocols?.join('|') },
  { title: '缺失来源', value: (row) => row.missingProtocols?.join('|') },
  { title: '车辆覆盖', value: (row) => sourceEvidenceText(row) },
  { title: '服务状态', value: (row) => vehicleServiceStatus(row).label },
  { title: '诊断摘要', value: (row) => sourceDiagnosisText(row) },
  { title: '档案完整度', value: (row) => vehicleArchiveCompleteness(row).label },
  { title: '档案缺项', value: (row) => vehicleArchiveMissingLabels(row).join('|') },
  { title: '在线', value: (row) => row.online ? '在线' : '离线' },
  { title: '最后在线', value: (row) => row.lastSeen },
  { title: '绑定状态', value: (row) => row.bindingStatus },
  { title: '来源一致性', value: (row) => row.sourceConsistency?.title ?? '' }
];

function exportFileName(filters: Record<string, string>) {
  const keyword = filters.keyword?.trim() || 'all';
  const protocol = filters.protocol?.trim() || 'all-source';
  return `vehicle-coverage-${keyword}-${protocol}.csv`;
}

type VehicleActionQueueItem = {
  label: string;
  count: number;
  filters: Record<string, string>;
  color: 'orange' | 'red';
  priority: 'P0' | 'P1';
  detail: string;
};

function vehicleFilterSummary(filters: Record<string, string>) {
  return [
    filters.keyword ? `关键词：${filters.keyword}` : '',
    filters.protocol ? `数据通道：${filters.protocol}` : '',
    filters.coverage ? `车辆覆盖：${coverageLabel[filters.coverage] ?? filters.coverage}` : '',
    filters.missingProtocol ? `缺失来源：${filters.missingProtocol}` : '',
    filters.serviceStatus ? `服务状态：${serviceStatusLabel[filters.serviceStatus] ?? filters.serviceStatus}` : '',
    filters.online ? `在线：${onlineLabel[filters.online] ?? filters.online}` : '',
    filters.bindingStatus ? `绑定：${bindingStatusLabel[filters.bindingStatus] ?? filters.bindingStatus}` : '',
    filters.archiveStatus ? `档案：${archiveStatusLabel[filters.archiveStatus] ?? filters.archiveStatus}` : '',
    filters.archiveMissing ? `档案缺项：${archiveMissingLabel[filters.archiveMissing] ?? filters.archiveMissing}` : ''
  ].filter(Boolean);
}

function vehicleGovernanceSummaryText({
  filters,
  summary,
  actionQueue
}: {
  filters: Record<string, string>;
  summary: VehicleCoverageSummary | null;
  actionQueue: VehicleActionQueueItem[];
}) {
  const archiveMissing = (summary?.archiveMissingFields ?? [])
    .filter((item) => item.count > 0)
    .map((item) => `${item.title} ${item.count.toLocaleString()}`)
    .join('、') || '-';
  const missingSources = (summary?.missingSources ?? [])
    .filter((item) => item.count > 0)
    .map((item) => `${item.protocol} ${item.count.toLocaleString()}`)
    .join('、') || '-';
  const actions = actionQueue.length > 0
    ? actionQueue.map((item) => `[${item.priority}] ${item.label} ${item.count.toLocaleString()}：${item.detail}`).join('\n')
    : '暂无处置项';
  return [
    '【车辆治理摘要】',
    `当前筛选：${vehicleFilterSummary(filters).join('；') || '全部车辆'}`,
    `车辆总数：${(summary?.totalVehicles ?? 0).toLocaleString()}，在线：${(summary?.onlineVehicles ?? 0).toLocaleString()}`,
    `单源：${(summary?.singleSourceVehicles ?? 0).toLocaleString()}，多源：${(summary?.multiSourceVehicles ?? 0).toLocaleString()}，暂无来源：${(summary?.noDataVehicles ?? 0).toLocaleString()}`,
    `待绑定：${(summary?.unboundVehicles ?? 0).toLocaleString()}，档案不完整：${(summary?.archiveIncompleteVehicles ?? 0).toLocaleString()}`,
    `档案缺项：${archiveMissing}`,
    `缺失来源：${missingSources}`,
    '处置队列：',
    actions
  ].join('\n');
}

function appURL(hash: string) {
  return `${window.location.origin}${window.location.pathname}${hash}`;
}

function vehicleDispatchListText({
  filters,
  rows,
  total
}: {
  filters: Record<string, string>;
  rows: VehicleCoverageRow[];
  total: number;
}) {
  const lines = [
    '【车辆处置清单】',
    `当前筛选：${vehicleFilterSummary(filters).join('；') || '全部车辆'}`,
    `当前页：${rows.length.toLocaleString()} 辆 / 总计 ${total.toLocaleString()} 辆`,
    ''
  ];
  rows.forEach((row, index) => {
    const action = vehicleActionRecommendation(row);
    const status = vehicleServiceStatus(row);
    const protocol = primaryRowProtocol(row, filters.protocol);
    const identity = [
      row.plate ? `车牌 ${row.plate}` : '车牌 -',
      row.vin ? `VIN ${row.vin}` : 'VIN -',
      row.phone ? `手机号 ${row.phone}` : '手机号 -',
      row.oem ? `OEM ${row.oem}` : 'OEM -'
    ].join(' / ');
    lines.push(
      `${index + 1}. ${identity}`,
      `   状态：${status.label}；在线：${row.online ? '在线' : '离线'}；来源：${sourceDiagnosisText(row)}；最后时间：${row.lastSeen || '-'}`,
      `   建议动作：${action.label}`,
      `   车辆服务：${appURL(buildAppHash({ page: 'detail', keyword: row.vin, protocol }))}`,
      `   实时监控：${appURL(buildAppHash({ page: 'realtime', keyword: row.vin, protocol }))}`,
      `   轨迹回放：${appURL(buildAppHash({ page: 'history', keyword: row.vin, protocol }))}`,
      `   告警事件：${appURL(buildAppHash({ page: 'alert-events', keyword: row.vin, protocol }))}`
    );
  });
  return lines.join('\n');
}

function vehicleIdentityMaintenanceText({
  filters,
  rows,
  total
}: {
  filters: Record<string, string>;
  rows: VehicleCoverageRow[];
  total: number;
}) {
  const maintenanceRows = rows.filter((row) => row.bindingStatus !== 'bound' || vehicleArchiveMissingLabels(row).length > 0);
  const lines = [
    '【车辆身份维护清单】',
    `当前筛选：${vehicleFilterSummary(filters).join('；') || '全部车辆'}`,
    `当前页待维护：${maintenanceRows.length.toLocaleString()} 辆 / 当前筛选 ${total.toLocaleString()} 辆`,
    ''
  ];
  maintenanceRows.forEach((row, index) => {
    const missingLabels = vehicleArchiveMissingLabels(row);
    const lookupKeys = [
      row.vin ? `vin=${row.vin}` : '',
      row.plate ? `plate=${row.plate}` : '',
      row.phone ? `phone=${row.phone}` : '',
      row.oem ? `oem=${row.oem}` : ''
    ].filter(Boolean).join('；') || '暂无可用关联键';
    const action = row.bindingStatus !== 'bound'
      ? '先维护 vehicle_identity_binding 的车牌/手机号到 VIN 映射，再复核实时来源是否归并到车辆服务。'
      : `补齐档案字段：${missingLabels.join('、')}`;
    lines.push(
      `${index + 1}. ${row.plate || '-'} / ${row.vin || '-'} / ${row.phone || '-'} / ${row.oem || '-'}`,
      `   状态：${vehicleServiceStatus(row).label}；绑定：${row.bindingStatus === 'bound' ? '已绑定' : '未绑定'}；档案缺项：${missingLabels.join('、') || '无'}`,
      `   关联键：${lookupKeys}`,
      `   建议动作：${action}`,
      `   车辆服务：${appURL(buildAppHash({ page: 'detail', keyword: row.vin, protocol: primaryRowProtocol(row, filters.protocol) }))}`
    );
  });
  return lines.join('\n');
}

function vehicleCustomerLookupText({
  filters,
  rows,
  total,
  summary
}: {
  filters: Record<string, string>;
  rows: VehicleCoverageRow[];
  total: number;
  summary: VehicleCoverageSummary | null;
}) {
  const serviceMode = filters.keyword?.trim() ? '单车服务' : '车辆池';
  const scopeHash = buildAppHash({ page: 'vehicles', keyword: filters.keyword, protocol: filters.protocol, filters });
  const singleVehicleFilters = filters.keyword?.trim()
    ? { keyword: filters.keyword.trim(), ...(filters.protocol ? { protocol: filters.protocol } : {}) }
    : {};
  const mapFilters = { ...filters, online: filters.online || 'online' };
  const lines = [
    '【客户查车路径】',
    `服务模式：${serviceMode}`,
    `当前筛选：${vehicleFilterSummary(filters).join('；') || '全部车辆'}`,
    `当前页：${rows.length.toLocaleString()} 辆 / 当前筛选 ${total.toLocaleString()} 辆`,
    `在线车辆：${(summary?.onlineVehicles ?? 0).toLocaleString()}；待绑定：${(summary?.unboundVehicles ?? 0).toLocaleString()}；暂无来源：${(summary?.noDataVehicles ?? 0).toLocaleString()}；档案不完整：${(summary?.archiveIncompleteVehicles ?? 0).toLocaleString()}`,
    '',
    serviceMode === '单车服务'
      ? '推荐路径：先看车辆档案和实时监控，再按需要进入轨迹回放、统计查询、历史数据导出。'
      : '推荐路径：先筛在线/离线/无来源/待绑定车辆，再进入地图态势或导出处置清单。',
    `车辆服务：${appURL(scopeHash)}`,
    `实时监控：${appURL(buildAppHash({ page: 'realtime', ...singleVehicleFilters }))}`,
    `车辆地图：${appURL(buildAppHash({ page: 'map', keyword: filters.keyword, protocol: filters.protocol, filters: mapFilters }))}`,
    `轨迹回放：${appURL(buildAppHash({ page: 'history', ...singleVehicleFilters, filters: { tab: 'location' } }))}`,
    `统计查询：${appURL(buildAppHash({ page: 'mileage', ...singleVehicleFilters }))}`,
    `历史数据：${appURL(buildAppHash({ page: 'history', ...singleVehicleFilters, filters: { tab: 'raw', includeFields: 'true' } }))}`
  ];
  return lines.join('\n');
}

function vehicleCustomerServicePackageText({
  filters,
  rows,
  total,
  summary
}: {
  filters: Record<string, string>;
  rows: VehicleCoverageRow[];
  total: number;
  summary: VehicleCoverageSummary | null;
}) {
  const scope = filters.keyword?.trim() ? `单车 ${filters.keyword.trim()}` : '当前车辆池';
  const singleVehicleFilters = filters.keyword?.trim()
    ? { keyword: filters.keyword.trim(), ...(filters.protocol ? { protocol: filters.protocol } : {}) }
    : {};
  const mapFilters = { ...filters, online: filters.online || 'online' };
  const pageVerdicts = currentPageVerdictStats(rows).map((item) => `${item.status} ${item.count.toLocaleString()}`).join('；') || '-';
  const pageActions = currentPageActionStats(rows).map((item) => `${item.label} ${item.count.toLocaleString()}`).join('；') || '-';
  const missingSources = (summary?.missingSources ?? [])
    .filter((item) => item.count > 0)
    .map((item) => `${item.protocol} ${item.count.toLocaleString()}`)
    .join('；') || '-';
  return [
    '【客户车辆服务交付包】',
    `服务范围：${scope}`,
    `当前筛选：${vehicleFilterSummary(filters).join('；') || '全部车辆'}`,
    `车辆规模：当前页 ${rows.length.toLocaleString()} 辆 / 当前筛选 ${total.toLocaleString()} 辆`,
    `服务概览：在线 ${(summary?.onlineVehicles ?? 0).toLocaleString()}；单源 ${(summary?.singleSourceVehicles ?? 0).toLocaleString()}；多源 ${(summary?.multiSourceVehicles ?? 0).toLocaleString()}；暂无来源 ${(summary?.noDataVehicles ?? 0).toLocaleString()}`,
    `档案状态：待绑定 ${(summary?.unboundVehicles ?? 0).toLocaleString()}；档案不完整 ${(summary?.archiveIncompleteVehicles ?? 0).toLocaleString()}`,
    `当前页判读：${pageVerdicts}`,
    `建议动作：${pageActions}`,
    `缺失来源：${missingSources}`,
    '',
    '客户入口：',
    `车辆地图：${appURL(buildAppHash({ page: 'map', keyword: filters.keyword, protocol: filters.protocol, filters: mapFilters }))}`,
    `实时监控：${appURL(buildAppHash({ page: 'realtime', ...singleVehicleFilters, filters: filters.keyword?.trim() ? undefined : { ...filters, online: filters.online || 'online' } }))}`,
    `轨迹回放：${appURL(buildAppHash({ page: 'history', ...singleVehicleFilters, filters: { tab: 'location' } }))}`,
    `统计查询：${appURL(buildAppHash({ page: 'mileage', ...singleVehicleFilters }))}`,
    `告警通知：${appURL(buildAppHash({ page: 'alert-events', ...singleVehicleFilters, filters }))}`,
    `历史数据导出：${appURL(buildAppHash({ page: 'history', ...singleVehicleFilters, filters: { tab: 'raw', includeFields: 'true' } }))}`,
    '',
    '交付口径：',
    '1. 客户先看地图与实时状态，判断车辆是否在线和位置是否可信',
    '2. 单车问题进入轨迹回放和统计查询，确认时间窗内发生了什么',
    '3. 异常车辆进入告警通知，带上原始记录和历史数据作为证据',
    '4. 对外交付时优先使用车辆口径，协议来源只作为证据说明'
  ].join('\n');
}

type VehicleActionRecommendation = {
  label: string;
  color: 'green' | 'orange' | 'red';
  filters: Record<string, string> | null;
};

type PageVerdictStat = {
  status: string;
  count: number;
  color: 'green' | 'orange' | 'red';
  risk: string;
  nextStep: string;
};

function vehicleActionRecommendation(row: VehicleCoverageRow): VehicleActionRecommendation {
  const verdict = summarizeVehicleService({
    bindingStatus: row.bindingStatus,
    sourceCount: row.sourceCount,
    onlineSourceCount: row.onlineSourceCount,
    missingProtocols: row.missingProtocols,
    mileageDeltaKm: row.sourceConsistency?.mileageDeltaKm
  });
  if (row.bindingStatus !== 'bound') {
    return { label: '维护身份绑定', color: verdict.color, filters: { bindingStatus: 'unbound' } };
  }
  if ((row.missingProtocols ?? []).length > 0) {
    return { label: `补齐 ${row.missingProtocols.join('、')} 来源`, color: verdict.color, filters: { missingProtocol: row.missingProtocols[0] } };
  }
  if (row.sourceCount <= 0) {
    return { label: '确认平台转发配置', color: verdict.color, filters: { serviceStatus: 'no_data' } };
  }
  if (row.onlineSourceCount <= 0) {
    return { label: '排查离线链路', color: verdict.color, filters: { online: 'offline' } };
  }
  return { label: '持续观察', color: verdict.color, filters: null };
}

function currentPageVerdictStats(rows: VehicleCoverageRow[]): PageVerdictStat[] {
  const stats = new Map<string, PageVerdictStat>();
  for (const row of rows) {
    const verdict = rowServiceVerdict(row);
    const current = stats.get(verdict.status);
    if (current) {
      current.count += 1;
      continue;
    }
    stats.set(verdict.status, {
      status: verdict.status,
      count: 1,
      color: verdict.color,
      risk: verdict.risk,
      nextStep: verdict.nextStep
    });
  }
  const order = ['不可服务', '降级可服务', '可服务'];
  return [...stats.values()].sort((left, right) => order.indexOf(left.status) - order.indexOf(right.status));
}

function currentPageActionStats(rows: VehicleCoverageRow[]) {
  const stats = new Map<string, { label: string; count: number; color: 'green' | 'orange' | 'red'; filters: Record<string, string> | null }>();
  for (const row of rows) {
    const action = vehicleActionRecommendation(row);
    const current = stats.get(action.label);
    if (current) {
      current.count += 1;
      continue;
    }
    stats.set(action.label, { label: action.label, count: 1, color: action.color, filters: action.filters });
  }
  return [...stats.values()].sort((left, right) => right.count - left.count);
}

function sourceConsistencyAction(row: VehicleCoverageRow, onFilter: (filters: Record<string, string>) => void) {
  const consistency = row.sourceConsistency;
  if (!consistency) {
    return <Tag color="grey">未诊断</Tag>;
  }
  const color = consistency.severity === 'ok' ? 'green' as const : consistency.severity === 'error' ? 'red' as const : 'orange' as const;
  const label = consistency.title || consistency.status;
  if ((consistency.missingProtocols ?? []).length > 0) {
    return (
      <Button
        size="small"
        theme="light"
        type={color === 'red' ? 'danger' : color === 'orange' ? 'warning' : 'primary'}
        onClick={() => onFilter({ serviceStatus: 'degraded', missingProtocol: consistency.missingProtocols[0] })}
      >
        {label}
      </Button>
    );
  }
  return <Tag color={color}>{label}</Tag>;
}

async function copyText(value: string, label: string) {
  try {
    await navigator.clipboard.writeText(value);
    Toast.success(`已复制${label}`);
  } catch {
    Toast.error(`复制${label}失败`);
  }
}

async function copyVehicleShareURL() {
  await copyText(`${window.location.origin}${window.location.pathname}${window.location.hash}`, '筛选链接');
}

export function Vehicles({
  onOpenVehicle,
  onOpenQuality,
  onOpenMap,
  onOpenRealtime,
  onOpenHistory,
  onOpenMileage,
  onFiltersChange,
  initialFilters = {}
}: {
  onOpenVehicle: (vin: string, protocol?: string) => void;
  onOpenQuality?: (filters: Record<string, string>) => void;
  onOpenMap?: (filters: Record<string, string>) => void;
  onOpenRealtime?: (filters: Record<string, string>) => void;
  onOpenHistory?: (filters: Record<string, string>) => void;
  onOpenMileage?: (filters: Record<string, string>) => void;
  onFiltersChange?: (filters: Record<string, string>) => void;
  initialFilters?: Record<string, string>;
}) {
  const [rows, setRows] = useState<VehicleCoverageRow[]>([]);
  const [summary, setSummary] = useState<VehicleCoverageSummary | null>(null);
  const [loading, setLoading] = useState(true);
  const [filters, setFilters] = useState<Record<string, string>>(initialFilters);
  const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
  const resultSummary = useMemo<Array<{ label: string; value: string; filters: Record<string, string> }>>(() => {
    const items: Array<{ label: string; value: string; filters: Record<string, string> }> = [
      { label: '过滤车辆', value: (summary?.totalVehicles ?? pagination.total).toLocaleString(), filters: {} },
      { label: '在线车辆', value: (summary?.onlineVehicles ?? 0).toLocaleString(), filters: { online: 'online' } },
      { label: '单源车辆', value: (summary?.singleSourceVehicles ?? 0).toLocaleString(), filters: { coverage: 'single' } },
      { label: '多源车辆', value: (summary?.multiSourceVehicles ?? 0).toLocaleString(), filters: { coverage: 'multi' } },
      { label: '暂无来源车辆', value: (summary?.noDataVehicles ?? 0).toLocaleString(), filters: { serviceStatus: 'no_data' } },
      { label: '待绑定', value: (summary?.unboundVehicles ?? 0).toLocaleString(), filters: { bindingStatus: 'unbound' } },
      { label: '档案不完整', value: (summary?.archiveIncompleteVehicles ?? 0).toLocaleString(), filters: { archiveStatus: 'incomplete' } }
    ];
    for (const field of summary?.archiveMissingFields ?? []) {
      if (field.count <= 0) continue;
      items.push({
        label: field.title,
        value: field.count.toLocaleString(),
        filters: { archiveMissing: field.field }
      });
    }
    for (const source of summary?.missingSources ?? []) {
      if (source.count <= 0) continue;
      items.push({
        label: `缺 ${source.protocol}`,
        value: source.count.toLocaleString(),
        filters: { missingProtocol: source.protocol }
      });
    }
    return items;
  }, [pagination.total, summary]);
  const actionQueue = useMemo<VehicleActionQueueItem[]>(() => {
    const items: VehicleActionQueueItem[] = [];
    const unboundCount = summary?.unboundVehicles ?? 0;
    if (unboundCount > 0) {
      items.push({
        label: '维护身份绑定',
        count: unboundCount,
        filters: { bindingStatus: 'unbound' },
        color: 'orange',
        priority: 'P0',
        detail: '已有数据但无法归并到 VIN，先补绑定再看跨来源服务。'
      });
    }
    const noDataCount = summary?.noDataVehicles ?? 0;
    if (noDataCount > 0) {
      items.push({
        label: '确认平台转发',
        count: noDataCount,
        filters: { serviceStatus: 'no_data' },
        color: 'orange',
        priority: 'P0',
        detail: '车辆没有任何来源证据，优先确认平台转发、端口和订阅配置。'
      });
    }
    const archiveIncompleteCount = summary?.archiveIncompleteVehicles ?? 0;
    if (archiveIncompleteCount > 0) {
      items.push({
        label: '完善车辆档案',
        count: archiveIncompleteCount,
        filters: { archiveStatus: 'incomplete' },
        color: 'orange',
        priority: 'P1',
        detail: '车辆缺少车牌、手机号或 OEM 等基础档案，影响后续运营查询和治理。'
      });
    }
    for (const field of summary?.archiveMissingFields ?? []) {
      if (field.count <= 0) continue;
      items.push({
        label: `补齐${field.title}`,
        count: field.count,
        filters: { archiveMissing: field.field },
        color: 'orange',
        priority: 'P1',
        detail: `${field.title}会影响车辆档案检索、绑定确认和运营侧筛选。`
      });
    }
    for (const source of summary?.missingSources ?? []) {
      if (source.count <= 0) continue;
      items.push({
        label: `补齐 ${source.protocol} 来源`,
        count: source.count,
        filters: { missingProtocol: source.protocol },
        color: 'orange',
        priority: 'P1',
        detail: `${source.protocol} 来源缺失会降低跨来源定位、里程和实时判断可信度。`
      });
    }
    return items;
  }, [summary]);
  const filterSummary = vehicleFilterSummary(filters);
  const pageVerdictStats = useMemo(() => currentPageVerdictStats(rows), [rows]);
  const pageActionStats = useMemo(() => currentPageActionStats(rows), [rows]);
  const serviceScopeFilters = useMemo(() => {
    const nextFilters: Record<string, string> = {};
    if (filters.keyword?.trim()) nextFilters.keyword = filters.keyword.trim();
    if (filters.protocol?.trim()) nextFilters.protocol = filters.protocol.trim();
    return nextFilters;
  }, [filters.keyword, filters.protocol]);

  const load = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
    setLoading(true);
    const params = new URLSearchParams({ limit: String(pageSize), offset: String((page - 1) * pageSize) });
    if (values?.keyword) params.set('keyword', values.keyword);
    if (values?.protocol) params.set('protocol', values.protocol);
    if (values?.coverage) params.set('coverage', values.coverage);
    if (values?.missingProtocol) params.set('missingProtocol', values.missingProtocol);
    if (values?.online) params.set('online', values.online);
    if (values?.bindingStatus) params.set('bindingStatus', values.bindingStatus);
    if (values?.archiveStatus) params.set('archiveStatus', values.archiveStatus);
    if (values?.archiveMissing) params.set('archiveMissing', values.archiveMissing);
    if (values?.serviceStatus) params.set('serviceStatus', values.serviceStatus);
    const summaryParams = new URLSearchParams(params);
    summaryParams.delete('limit');
    summaryParams.delete('offset');
    Promise.all([api.vehicleCoverage(params), api.vehicleCoverageSummary(summaryParams)])
      .then(([nextPage, nextSummary]) => {
        setRows(nextPage.items);
        setSummary(nextSummary);
        setPagination({ currentPage: page, pageSize, total: nextPage.total });
      })
      .catch((error: Error) => Toast.error(error.message))
      .finally(() => setLoading(false));
  };

  const applyFilters = (nextFilters: Record<string, string>) => {
    setFilters(nextFilters);
    onFiltersChange?.(nextFilters);
    load(nextFilters, 1, pagination.pageSize);
  };
  const exportVehicles = () => {
    if (rows.length === 0) {
      Toast.warning('当前没有可导出的车辆结果');
      return;
    }
    downloadCsv(exportFileName(filters), buildCsv(vehicleExportColumns, rows));
    Toast.success(`已导出 ${rows.length} 条车辆结果`);
  };
  const copyGovernanceSummary = () => {
    copyText(vehicleGovernanceSummaryText({ filters, summary, actionQueue }), '治理摘要');
  };
  const copyDispatchList = () => {
    if (rows.length === 0) {
      Toast.warning('当前没有可复制的车辆处置清单');
      return;
    }
    copyText(vehicleDispatchListText({ filters, rows, total: pagination.total }), '车辆处置清单');
  };
  const copyIdentityMaintenanceList = () => {
    const maintenanceRows = rows.filter((row) => row.bindingStatus !== 'bound' || vehicleArchiveMissingLabels(row).length > 0);
    if (maintenanceRows.length === 0) {
      Toast.warning('当前页没有需要维护身份或档案的车辆');
      return;
    }
    copyText(vehicleIdentityMaintenanceText({ filters, rows, total: pagination.total }), '车辆身份维护清单');
  };
  const copyCustomerLookupPath = () => {
    copyText(vehicleCustomerLookupText({ filters, rows, total: pagination.total, summary }), '客户查车路径');
  };
  const copyCustomerServicePackage = () => {
    copyText(vehicleCustomerServicePackageText({ filters, rows, total: pagination.total, summary }), '客户车辆服务交付包');
  };
  const customerLookupSteps = [
    {
      label: '车辆身份',
      value: filters.keyword?.trim() || 'VIN / 车牌 / 手机号',
      detail: '确认车辆归属、车牌、手机号和 OEM，客户问题先落到一辆车。'
    },
    {
      label: '在线状态',
      value: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 在线`,
      detail: '判断车辆是否仍在上报，离线车辆进入断链和来源证据排查。'
    },
    {
      label: '轨迹与位置',
      value: filters.keyword?.trim() ? '可回放' : '先选车辆',
      detail: '单车进入轨迹回放，车辆池进入地图态势查看位置分布。'
    },
    {
      label: '数据交付',
      value: `${rows.length.toLocaleString()} 当前页`,
      detail: '导出车辆清单，再进入历史页交付轨迹、RAW 和字段证据。'
    }
  ];
  const serviceDeskActions = useMemo(() => [
    {
      label: '实时监控',
      value: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 在线`,
      detail: '查看车辆在线、速度、最后上报和来源状态。',
      color: 'green' as const,
      disabled: !onOpenRealtime,
      onClick: () => onOpenRealtime?.({ ...serviceScopeFilters, online: 'online' })
    },
    {
      label: '车辆地图',
      value: '地图态势',
      detail: '把当前筛选车辆带入实时地图，优先看位置分布。',
      color: 'blue' as const,
      disabled: !onOpenMap,
      onClick: () => onOpenMap?.({ ...serviceScopeFilters, online: 'online' })
    },
    {
      label: '轨迹回放',
      value: filters.keyword?.trim() ? '单车轨迹' : '选择车辆',
      detail: filters.keyword?.trim() ? '按当前车辆进入历史轨迹复盘。' : '先选择车辆后进入精确轨迹回放。',
      color: filters.keyword?.trim() ? 'blue' as const : 'grey' as const,
      disabled: !onOpenHistory || !filters.keyword?.trim(),
      onClick: () => onOpenHistory?.({ ...serviceScopeFilters, tab: 'location' })
    },
    {
      label: '统计查询',
      value: filters.keyword?.trim() ? '区间核对' : '车辆口径',
      detail: filters.keyword?.trim() ? '按当前车辆核对区间里程、日里程和统计结果。' : '输入车辆后查看时间窗统计结果。',
      color: filters.keyword?.trim() ? 'green' as const : 'grey' as const,
      disabled: !onOpenMileage || !filters.keyword?.trim(),
      onClick: () => onOpenMileage?.(serviceScopeFilters)
    },
    {
      label: '数据导出',
      value: `${rows.length.toLocaleString()} 当前页`,
      detail: '导出当前页车辆清单，后续可继续导出轨迹和原始记录。',
      color: rows.length > 0 ? 'blue' as const : 'grey' as const,
      disabled: rows.length === 0,
      onClick: exportVehicles
    }
  ], [exportVehicles, filters.keyword, onOpenHistory, onOpenMap, onOpenMileage, onOpenRealtime, rows.length, serviceScopeFilters, summary?.onlineVehicles]);
  const primaryAction = actionQueue[0];
  const vehicleAssetTasks = [
    {
      title: '最近上报',
      value: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 在线`,
      detail: '按最近仍在上报的车辆进入实时监控和地图态势。',
      action: '只看在线',
      color: 'green' as const,
      onClick: () => applyFilters({ ...filters, online: 'online' })
    },
    {
      title: '待关注车辆',
      value: `${((summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0)).toLocaleString()} 待处理`,
      detail: '无来源、未绑定或来源缺失的车辆先进入处置队列。',
      action: '查看异常',
      color: ((summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0)) > 0 ? 'orange' as const : 'green' as const,
      onClick: () => applyFilters(primaryAction ? { ...filters, ...primaryAction.filters } : { ...filters, serviceStatus: 'degraded' })
    },
    {
      title: '身份待维护',
      value: `${(summary?.unboundVehicles ?? 0).toLocaleString()} 未绑定`,
      detail: '复制当前页身份维护清单，用于补齐车牌、手机号、VIN 和 OEM。',
      action: '维护清单',
      color: (summary?.unboundVehicles ?? 0) > 0 || (summary?.archiveIncompleteVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const,
      onClick: copyIdentityMaintenanceList
    },
    {
      title: '报表导出',
      value: `${rows.length.toLocaleString()} 当前页`,
      detail: '导出车辆资产清单，后续按车辆进入轨迹、统计和历史证据。',
      action: '导出车辆',
      color: rows.length > 0 ? 'blue' as const : 'grey' as const,
      onClick: exportVehicles
    }
  ];
  const vehicleAssetOperations = [
    {
      title: '资产健康',
      value: `${(summary?.totalVehicles ?? pagination.total).toLocaleString()} 车辆`,
      detail: '当前筛选车辆池，可继续按车牌、手机号、OEM、在线状态和服务状态缩小范围。',
      action: '查看车辆池',
      color: 'blue' as const,
      onClick: () => applyFilters(filters)
    },
    {
      title: '在线车辆',
      value: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 在线`,
      detail: '优先进入仍在上报的车辆，查看实时位置、最后时间和来源证据。',
      action: '打开实时',
      color: (summary?.onlineVehicles ?? 0) > 0 ? 'green' as const : 'orange' as const,
      onClick: () => onOpenRealtime?.({ ...serviceScopeFilters, online: 'online' })
    },
    {
      title: '待处理',
      value: `${((summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0)).toLocaleString()} 待处理`,
      detail: '无来源和未绑定车辆优先处理，否则客户无法稳定查车、看位置和出报表。',
      action: '异常优先',
      color: ((summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0)) > 0 ? 'orange' as const : 'green' as const,
      onClick: () => applyFilters(primaryAction ? { ...filters, ...primaryAction.filters } : { ...filters, serviceStatus: 'no_data' })
    },
    {
      title: '服务交付',
      value: `${rows.length.toLocaleString()} 当前页`,
      detail: '把当前车辆池打包成客户能用的地图、实时、轨迹、统计、告警和导出入口。',
      action: '复制交付包',
      color: rows.length > 0 ? 'blue' as const : 'grey' as const,
      onClick: copyCustomerServicePackage
    }
  ];
  const vehicleDecisionItems = [
    {
      title: '在线车辆',
      value: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 辆`,
      detail: '先看当前仍在上报的车辆，直接进入地图和实时状态。',
      color: 'green' as const,
      primaryAction: '实时监控',
      secondaryAction: '车辆地图',
      onPrimary: () => onOpenRealtime?.({ ...serviceScopeFilters, online: 'online' }),
      onSecondary: () => onOpenMap?.({ ...serviceScopeFilters, online: 'online' }),
      disabled: !onOpenRealtime
    },
    {
      title: '异常车辆',
      value: `${(summary?.noDataVehicles ?? 0).toLocaleString()} 无来源`,
      detail: primaryAction ? primaryAction.detail : '当前没有必须立即处理的车辆服务事项。',
      color: (summary?.noDataVehicles ?? 0) > 0 || primaryAction ? 'orange' as const : 'green' as const,
      primaryAction: primaryAction?.label ?? '查看结果',
      secondaryAction: '告警事件',
      onPrimary: () => primaryAction ? applyFilters({ ...filters, ...primaryAction.filters }) : applyFilters(filters),
      onSecondary: () => onOpenQuality?.(serviceScopeFilters),
      disabled: !primaryAction
    },
    {
      title: '单车服务',
      value: filters.keyword?.trim() || '输入车辆',
      detail: filters.keyword?.trim() ? '当前已进入单车范围，可查看车辆详情、轨迹和里程。' : '输入 VIN、车牌或手机号后进入完整车辆服务。',
      color: filters.keyword?.trim() ? 'blue' as const : 'grey' as const,
      primaryAction: '车辆详情',
      secondaryAction: '轨迹回放',
      onPrimary: () => filters.keyword?.trim() && onOpenVehicle(filters.keyword.trim(), filters.protocol),
      onSecondary: () => onOpenHistory?.({ ...serviceScopeFilters, tab: 'location' }),
      disabled: !filters.keyword?.trim()
    },
    {
      title: '数据交付',
      value: `${rows.length.toLocaleString()} 当前页`,
      detail: '导出当前车辆清单，继续进入历史页交付轨迹、RAW 和字段证据。',
      color: rows.length > 0 ? 'blue' as const : 'grey' as const,
      primaryAction: '导出清单',
      secondaryAction: '历史导出',
      onPrimary: exportVehicles,
      onSecondary: () => onOpenHistory?.({ ...serviceScopeFilters, tab: 'raw', includeFields: 'true' }),
      disabled: rows.length === 0
    }
  ];
  const servicePackageItems = [
    {
      label: '车辆地图',
      value: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 在线`,
      detail: '先看当前筛选车辆的位置分布和在线状态。',
      color: 'blue' as const,
      action: '打开地图',
      disabled: !onOpenMap,
      onClick: () => onOpenMap?.({ ...serviceScopeFilters, online: 'online' })
    },
    {
      label: '轨迹回放',
      value: filters.keyword?.trim() ? '单车时间线' : '先选车辆',
      detail: filters.keyword?.trim() ? '按当前车辆回放定位轨迹和断点。' : '客户追问某车时，从车辆列表进入单车回放。',
      color: filters.keyword?.trim() ? 'green' as const : 'grey' as const,
      action: '回放轨迹',
      disabled: !onOpenHistory || !filters.keyword?.trim(),
      onClick: () => onOpenHistory?.({ ...serviceScopeFilters, tab: 'location' })
    },
    {
      label: '统计查询',
      value: filters.keyword?.trim() ? '区间复核' : '单车后可用',
      detail: '核对时间窗里程、日里程和累计口径，支撑 BI 与客户问询。',
      color: filters.keyword?.trim() ? 'orange' as const : 'grey' as const,
      action: '统计查询',
      disabled: !onOpenMileage || !filters.keyword?.trim(),
      onClick: () => onOpenMileage?.(serviceScopeFilters)
    },
    {
      label: '告警通知',
      value: `${(summary?.noDataVehicles ?? 0).toLocaleString()} 无来源`,
      detail: '异常车辆进入告警闭环，确认责任方、通知渠道和证据。',
      color: (summary?.noDataVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const,
      action: '查看告警',
      disabled: !onOpenQuality,
      onClick: () => onOpenQuality?.(serviceScopeFilters)
    },
    {
      label: '历史导出',
      value: `${rows.length.toLocaleString()} 当前页`,
      detail: '对外交付车辆清单、轨迹、RAW 和字段证据。',
      color: rows.length > 0 ? 'blue' as const : 'grey' as const,
      action: '导出清单',
      disabled: rows.length === 0,
      onClick: exportVehicles
    }
  ];
  const vehicleCustomerQuestions = [
    {
      question: '客户要找某辆车怎么办？',
      answer: filters.keyword?.trim() ? filters.keyword.trim() : '先输入 VIN/车牌/手机号',
      evidence: filters.keyword?.trim() ? '已进入单车范围' : `当前筛选 ${pagination.total.toLocaleString()} 辆`,
      action: '聚焦找车',
      color: filters.keyword?.trim() ? 'green' as const : 'blue' as const,
      disabled: false,
      onClick: () => document.querySelector<HTMLInputElement>('input[name="keyword"]')?.focus()
    },
    {
      question: '现在有哪些车在线？',
      answer: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 辆在线`,
      evidence: filters.online === 'online' ? '已筛在线车辆' : '可切换到在线车辆池',
      action: '只看在线',
      color: (summary?.onlineVehicles ?? 0) > 0 ? 'green' as const : 'orange' as const,
      disabled: false,
      onClick: () => applyFilters({ ...filters, online: 'online' })
    },
    {
      question: '哪些车暂时不能服务？',
      answer: `${((summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0)).toLocaleString()} 辆待处理`,
      evidence: `无来源 ${(summary?.noDataVehicles ?? 0).toLocaleString()} / 待绑定 ${(summary?.unboundVehicles ?? 0).toLocaleString()}`,
      action: '异常车辆',
      color: (summary?.noDataVehicles ?? 0) > 0 || (summary?.unboundVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const,
      disabled: false,
      onClick: () => primaryAction ? applyFilters({ ...filters, ...primaryAction.filters }) : applyFilters({ ...filters, serviceStatus: 'no_data' })
    },
    {
      question: '车辆清单能交付吗？',
      answer: rows.length > 0 ? `${rows.length.toLocaleString()} 辆当前页` : '暂无可交付车辆',
      evidence: `筛选总计 ${pagination.total.toLocaleString()} 辆`,
      action: '复制交付包',
      color: rows.length > 0 ? 'blue' as const : 'grey' as const,
      disabled: false,
      onClick: () => copyCustomerServicePackage()
    }
  ];
  const customerVehicleServiceItems = [
    {
      title: '车辆池',
      value: `${(summary?.totalVehicles ?? pagination.total).toLocaleString()} 车辆`,
      detail: '按 VIN、车牌、手机号、OEM 和服务状态找到客户要看的车。',
      action: '找车',
      color: 'blue' as const,
      disabled: false,
      onClick: () => document.querySelector<HTMLInputElement>('input[name="keyword"]')?.focus()
    },
    {
      title: '实时地图',
      value: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 在线`,
      detail: '直接查看当前在线车辆的位置分布、最后上报和在线状态。',
      action: '打开地图',
      color: (summary?.onlineVehicles ?? 0) > 0 ? 'green' as const : 'orange' as const,
      disabled: !onOpenMap,
      onClick: () => onOpenMap?.({ ...serviceScopeFilters, online: 'online' })
    },
    {
      title: '轨迹回放',
      value: filters.keyword?.trim() ? '单车时间窗' : '先选车辆',
      detail: filters.keyword?.trim() ? '围绕当前车辆复盘历史位置和断点。' : '先选中一辆车，再进入时间窗轨迹回放。',
      action: '回放',
      color: filters.keyword?.trim() ? 'green' as const : 'grey' as const,
      disabled: !onOpenHistory || !filters.keyword?.trim(),
      onClick: () => onOpenHistory?.({ ...serviceScopeFilters, tab: 'location' })
    },
    {
      title: '统计查询',
      value: filters.keyword?.trim() ? '区间统计' : '单车后可用',
      detail: '按车辆和时间窗核对里程、位置和业务统计口径。',
      action: '查询统计',
      color: filters.keyword?.trim() ? 'orange' as const : 'grey' as const,
      disabled: !onOpenMileage || !filters.keyword?.trim(),
      onClick: () => onOpenMileage?.(serviceScopeFilters)
    },
    {
      title: '告警通知',
      value: `${((summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0)).toLocaleString()} 待处理`,
      detail: '把不可服务车辆、离线断链和身份缺口进入告警处置。',
      action: '查看告警',
      color: ((summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0)) > 0 ? 'orange' as const : 'green' as const,
      disabled: !onOpenQuality,
      onClick: () => onOpenQuality?.(serviceScopeFilters)
    }
  ];
  const totalVehicleCount = summary?.totalVehicles ?? pagination.total;
  const onlineRate = totalVehicleCount > 0 ? `${(((summary?.onlineVehicles ?? 0) / totalVehicleCount) * 100).toFixed(1)}%` : '-';
  const currentPageServiceableCount = rows.filter((row) => row.bindingStatus === 'bound' && row.sourceCount > 0).length;
  const pendingVehicleCount = (summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0);
  const fleetCommandItems = [
    {
      label: '在线率',
      value: onlineRate,
      detail: `${(summary?.onlineVehicles ?? 0).toLocaleString()} / ${totalVehicleCount.toLocaleString()} 辆在线，先进入地图看车辆分布。`,
      action: '车辆地图',
      color: (summary?.onlineVehicles ?? 0) > 0 ? 'green' as const : 'orange' as const,
      disabled: !onOpenMap,
      onClick: () => onOpenMap?.({ ...serviceScopeFilters, online: 'online' })
    },
    {
      label: '可服务车辆',
      value: `${currentPageServiceableCount.toLocaleString()} 辆`,
      detail: '当前页可归并到车辆服务的车辆，可直接查看实时状态和来源证据。',
      action: '实时监控',
      color: currentPageServiceableCount > 0 ? 'blue' as const : 'orange' as const,
      disabled: !onOpenRealtime,
      onClick: () => onOpenRealtime?.({ ...serviceScopeFilters, online: 'online' })
    },
    {
      label: '待处理车辆',
      value: `${pendingVehicleCount.toLocaleString()} 辆`,
      detail: '无来源或未绑定车辆优先进入告警闭环，避免客户查不到车。',
      action: '告警通知',
      color: pendingVehicleCount > 0 ? 'orange' as const : 'green' as const,
      disabled: !onOpenQuality,
      onClick: () => onOpenQuality?.(serviceScopeFilters)
    },
    {
      label: '当前交付',
      value: `${rows.length.toLocaleString()} 辆`,
      detail: '把当前筛选结果导出为车辆清单，再按时间窗交付轨迹和历史证据。',
      action: '数据导出',
      color: rows.length > 0 ? 'blue' as const : 'grey' as const,
      disabled: rows.length === 0,
      onClick: exportVehicles
    },
    {
      label: '轨迹复盘',
      value: filters.keyword?.trim() ? '单车可回放' : '先选车辆',
      detail: filters.keyword?.trim() ? '当前已进入单车范围，可直接复盘历史轨迹。' : '先锁定 VIN、车牌或手机号，再进入轨迹回放。',
      action: '轨迹回放',
      color: filters.keyword?.trim() ? 'green' as const : 'grey' as const,
      disabled: !onOpenHistory || !filters.keyword?.trim(),
      onClick: () => onOpenHistory?.({ ...serviceScopeFilters, tab: 'location' })
    }
  ];
  const amapServiceFoundationItems = [
    {
      title: '实时看车',
      value: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 在线`,
      detail: '打开车辆地图，先看车辆是否仍在上报、位置是否有效、是否需要调度。',
      action: '打开地图',
      color: (summary?.onlineVehicles ?? 0) > 0 ? 'green' as const : 'orange' as const,
      disabled: !onOpenMap,
      onClick: () => onOpenMap?.({ ...serviceScopeFilters, online: 'online' })
    },
    {
      title: '轨迹复盘',
      value: filters.keyword?.trim() ? '单车可回放' : '先选车辆',
      detail: filters.keyword?.trim() ? '按当前车辆进入轨迹回放，解释时间窗内怎么跑。' : '从车辆池先锁定 VIN、车牌或手机号，再回放轨迹。',
      action: '回放轨迹',
      color: filters.keyword?.trim() ? 'green' as const : 'grey' as const,
      disabled: !onOpenHistory || !filters.keyword?.trim(),
      onClick: () => onOpenHistory?.({ ...serviceScopeFilters, tab: 'location' })
    },
    {
      title: '围栏告警',
      value: `${pendingVehicleCount.toLocaleString()} 待处理`,
      detail: '围绕车辆位置、断链、身份缺口和后续围栏规则，把异常转成通知闭环。',
      action: '告警通知',
      color: pendingVehicleCount > 0 ? 'orange' as const : 'green' as const,
      disabled: !onOpenQuality,
      onClick: () => onOpenQuality?.(serviceScopeFilters)
    },
    {
      title: '数据交付',
      value: `${rows.length.toLocaleString()} 当前页`,
      detail: '把车辆清单、地图筛选、轨迹证据和历史数据导出给客户或运营人员。',
      action: '导出清单',
      color: rows.length > 0 ? 'blue' as const : 'grey' as const,
      disabled: rows.length === 0,
      onClick: exportVehicles
    }
  ];

  useEffect(() => {
    setFilters(initialFilters);
    load(initialFilters, 1, pagination.pageSize);
  }, [JSON.stringify(initialFilters)]);

  const columns = useMemo(
    () => [
      { title: 'VIN', dataIndex: 'vin', width: 190 },
      { title: '车牌', dataIndex: 'plate', width: 120 },
      { title: '手机号', dataIndex: 'phone', width: 130 },
      { title: 'OEM', dataIndex: 'oem', width: 120 },
      {
        title: '档案完整度',
        width: 190,
        render: (_: unknown, row: VehicleCoverageRow) => {
          const archive = vehicleArchiveCompleteness(row);
          const missingLabels = vehicleArchiveMissingLabels(row);
          return (
            <Space spacing={4} wrap>
              <Tag color={archive.completed === archive.total ? 'green' : 'orange'}>{archive.label}</Tag>
              {missingLabels.map((label) => (
                <Tag key={label} color="orange">{label}</Tag>
              ))}
            </Space>
          );
        }
      },
      {
        title: '车辆服务状态',
        width: 130,
        render: (_: unknown, row: VehicleCoverageRow) => {
          const status = vehicleServiceStatus(row);
          return <Tag color={status.color}>{status.label}</Tag>;
        }
      },
      {
        title: '来源证据',
        width: 300,
        render: (_: unknown, row: VehicleCoverageRow) => (
          <SourceStatusTags sourceStatus={row.sourceStatus} protocols={row.protocols} lastSeen={row.lastSeen} />
        )
      },
      {
        title: '缺失来源',
        width: 220,
        render: (_: unknown, row: VehicleCoverageRow) => (
          <Space spacing={4} wrap>
            {(row.missingProtocols ?? []).length > 0
              ? row.missingProtocols.map((protocol) => (
                <Button
                  key={protocol}
                  size="small"
                  theme="light"
                  type="warning"
                  onClick={() => applyFilters({ ...filters, missingProtocol: protocol })}
                >
                  缺 {protocol}
                </Button>
              ))
              : <Tag color="green">完整</Tag>}
          </Space>
        )
      },
      {
        title: '来源一致性',
        width: 140,
        render: (_: unknown, row: VehicleCoverageRow) => sourceConsistencyAction(row, (nextFilters) => applyFilters({ ...filters, ...nextFilters }))
      },
      { title: '诊断摘要', width: 240, render: (_: unknown, row: VehicleCoverageRow) => sourceDiagnosisText(row) },
      {
        title: '建议动作',
        width: 180,
        render: (_: unknown, row: VehicleCoverageRow) => {
          const action = vehicleActionRecommendation(row);
          if (action.filters) {
            return (
              <Button size="small" theme="light" type={action.color === 'red' ? 'danger' : 'warning'} onClick={() => applyFilters({ ...filters, ...action.filters })}>
                {action.label}
              </Button>
            );
          }
          return <Tag color={action.color}>{action.label}</Tag>;
        }
      },
      { title: '证据覆盖', width: 120, render: (_: unknown, row: VehicleCoverageRow) => sourceEvidenceText(row) },
      { title: '在线', width: 90, render: (_: unknown, row: VehicleCoverageRow) => <StatusTag status={row.online ? 'ok' : 'offline'} /> },
      { title: '最后在线', dataIndex: 'lastSeen', width: 170 },
      { title: '绑定', width: 90, render: (_: unknown, row: VehicleCoverageRow) => <Tag color={row.bindingStatus === 'bound' ? 'green' : 'orange'}>{row.bindingStatus === 'bound' ? '已绑定' : '未绑定'}</Tag> },
      {
        title: '操作',
        width: 300,
        render: (_: unknown, row: VehicleCoverageRow) => (
          <Space wrap>
            <Button disabled={!row.vin || !onOpenRealtime} onClick={() => onOpenRealtime?.(rowWorkflowFilters(row, filters.protocol))}>实时</Button>
            <Button disabled={!row.vin || !onOpenHistory} onClick={() => onOpenHistory?.(rowWorkflowFilters(row, filters.protocol))}>轨迹</Button>
            <Button onClick={() => onOpenVehicle(row.vin, primaryRowProtocol(row, filters.protocol))}>服务</Button>
            <Button disabled={!row.vin || !onOpenQuality} onClick={() => onOpenQuality?.(rowWorkflowFilters(row, filters.protocol))}>告警</Button>
          </Space>
        )
      }
    ],
    [filters, onOpenHistory, onOpenQuality, onOpenRealtime, onOpenVehicle]
  );

  return (
    <div className="vp-page">
      <PageHeader title="车辆服务" description="围绕车辆完成实时监控、地图查看、轨迹回放、统计查询和数据导出，协议来源只作为证据过滤条件" />
      <section className="vp-fleet-command-center" aria-label="客户车队指挥台">
        <div className="vp-fleet-command-copy">
          <Space wrap>
            <Tag color="blue">客户车队指挥台</Tag>
            <Tag color={filters.keyword?.trim() ? 'green' : 'grey'}>{filters.keyword?.trim() ? '单车服务' : '车辆池'}</Tag>
            <Tag color={pendingVehicleCount > 0 ? 'orange' : 'green'}>{pendingVehicleCount.toLocaleString()} 待处理</Tag>
          </Space>
          <strong>从车辆池直接判断运营状态：哪些车在线、哪些车可服务、哪些车要回放、统计、导出或触发告警。</strong>
          <span>
            车队指挥台把实时地图、轨迹回放、里程统计、历史导出和告警通知放在同一组入口里；协议来源只保留为证据和筛选条件。
          </span>
        </div>
        <div className="vp-fleet-command-grid">
          {fleetCommandItems.map((item) => (
            <button
              key={item.label}
              type="button"
              className="vp-fleet-command-item"
              disabled={item.disabled}
              onClick={item.onClick}
              aria-label={`客户车队指挥台 ${item.label} ${item.value} ${item.action}`}
            >
              <Tag color={item.color}>{item.label}</Tag>
              <strong>{item.value}</strong>
              <span>{item.detail}</span>
              <em>{item.action}</em>
            </button>
          ))}
        </div>
      </section>
      <section className="vp-vehicle-amap-foundation" aria-label="高德地图车辆服务底座">
        <div className="vp-vehicle-amap-foundation-summary">
          <Space wrap>
            <Tag color="blue">高德地图车辆服务底座</Tag>
            <Tag color={filters.keyword?.trim() ? 'green' : 'grey'}>{filters.keyword?.trim() ? '单车地图' : '车辆池地图'}</Tag>
          </Space>
          <strong>用地图把车辆监控、轨迹回放、围栏告警、统计查询和历史导出串成客户能理解的一条服务路径。</strong>
          <span>车辆列表只负责锁定服务对象；地图能力负责解释位置、路线、区域、时间窗和异常通知。</span>
        </div>
        <div className="vp-vehicle-amap-foundation-grid">
          {amapServiceFoundationItems.map((item) => (
            <button
              key={item.title}
              type="button"
              className="vp-vehicle-amap-foundation-item"
              disabled={item.disabled}
              onClick={item.onClick}
              aria-label={`高德地图车辆服务底座 ${item.title} ${item.value} ${item.action}`}
            >
              <Tag color={item.color}>{item.title}</Tag>
              <strong>{item.value}</strong>
              <span>{item.detail}</span>
              <em>{item.action}</em>
            </button>
          ))}
        </div>
      </section>
      <section className="vp-customer-vehicle-service-hub" aria-label="客户车辆服务台">
        <div className="vp-customer-vehicle-service-summary">
          <Space wrap>
            <Tag color="blue">客户车辆服务台</Tag>
            <Tag color={filters.keyword?.trim() ? 'green' : 'grey'}>{filters.keyword?.trim() ? '单车服务' : '车辆池服务'}</Tag>
          </Space>
          <strong>{filters.keyword?.trim() || `${(summary?.totalVehicles ?? pagination.total).toLocaleString()} 辆车`}</strong>
          <span>三个接入源最终服务同一辆车，客户从这里进入找车、实时、轨迹、统计、导出和告警。</span>
        </div>
        <div className="vp-customer-vehicle-service-grid">
          {customerVehicleServiceItems.map((item) => (
            <button
              key={item.title}
              type="button"
              className="vp-customer-vehicle-service-item"
              disabled={item.disabled}
              onClick={item.onClick}
              aria-label={`客户车辆服务台 ${item.title} ${item.value} ${item.action}`}
            >
              <Tag color={item.color}>{item.title}</Tag>
              <strong>{item.value}</strong>
              <span>{item.detail}</span>
              <em>{item.action}</em>
            </button>
          ))}
        </div>
      </section>
      <section className="vp-vehicle-asset-console" aria-label="车辆资产运营台">
        <div className="vp-vehicle-asset-console-summary">
          <Space wrap>
            <Tag color="blue">车辆资产运营台</Tag>
            <Tag color={filters.keyword?.trim() ? 'green' : 'grey'}>{filters.keyword?.trim() ? '单车范围' : '车辆池'}</Tag>
            <Tag color={((summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0)) > 0 ? 'orange' : 'green'}>
              {((summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0)).toLocaleString()} 待处理
            </Tag>
          </Space>
          <strong>像车队资产系统一样，先判断车辆能不能服务，再进入地图、实时、轨迹、统计、导出和告警。</strong>
          <span>车辆中心面向客户运营：先看资产健康和在线车辆，再处理异常车辆，最后形成可交付的车辆服务包。</span>
        </div>
        <div className="vp-vehicle-asset-console-grid">
          {vehicleAssetOperations.map((item) => (
            <button
              key={item.title}
              type="button"
              className="vp-vehicle-asset-console-item"
              onClick={item.onClick}
              aria-label={`车辆资产运营台 ${item.title} ${item.value} ${item.action}`}
            >
              <Tag color={item.color}>{item.title}</Tag>
              <strong>{item.value}</strong>
              <span>{item.detail}</span>
              <em>{item.action}</em>
            </button>
          ))}
        </div>
      </section>
      <Card bordered title="车辆服务台">
        <div className="vp-vehicle-service-desk">
          <div className="vp-vehicle-service-summary">
            <Space wrap>
              <Tag color="blue">客户视角</Tag>
              <Tag color={filters.keyword?.trim() ? 'green' : 'grey'}>{filters.keyword?.trim() ? '单车服务' : '车辆池'}</Tag>
            </Space>
            <strong>{filters.keyword?.trim() || '全部车辆'}</strong>
            <span>
              当前筛选覆盖 {(summary?.totalVehicles ?? pagination.total).toLocaleString()} 辆车，在线 {(summary?.onlineVehicles ?? 0).toLocaleString()} 辆。
              客户先看车辆能不能服务，再进入地图、轨迹、里程和导出。
            </span>
            <Space wrap>
              <Button size="small" theme="solid" type="primary" disabled={!onOpenRealtime} onClick={() => onOpenRealtime?.({ ...serviceScopeFilters, online: 'online' })}>查看在线车辆</Button>
              <Button size="small" disabled={!onOpenMap} onClick={() => onOpenMap?.({ ...serviceScopeFilters, online: 'online' })}>打开地图</Button>
              <Button size="small" onClick={copyDispatchList}>复制服务清单</Button>
            </Space>
          </div>
          <div className="vp-vehicle-service-grid">
            {serviceDeskActions.map((item) => (
              <button
                key={item.label}
                className="vp-vehicle-service-action"
                type="button"
                disabled={item.disabled}
                onClick={item.onClick}
              >
                <Tag color={item.color}>{item.label}</Tag>
                <strong>{item.value}</strong>
                <span>{item.detail}</span>
              </button>
            ))}
          </div>
        </div>
      </Card>
      <Card bordered title="客户查车路径" style={{ marginTop: 16 }}>
        <div className="vp-vehicle-lookup-strip">
          <div className="vp-vehicle-lookup-head">
            <div>
              <Space wrap>
                <Tag color={filters.keyword?.trim() ? 'green' : 'blue'}>{filters.keyword?.trim() ? '单车服务' : '车辆池服务'}</Tag>
                <Tag color="grey">{vehicleFilterSummary(filters).join(' / ') || '全部车辆'}</Tag>
              </Space>
              <strong>{filters.keyword?.trim() ? '围绕一辆车完成监控、回放、统计和导出' : '从车辆池筛出客户要看的车，再进入单车服务'}</strong>
              <span>客户侧只关心车辆服务结果，接入来源只作为证据参与筛选和可信度判断。</span>
            </div>
            <Space wrap>
              <Button size="small" theme="solid" type="primary" disabled={!onOpenMap} onClick={() => onOpenMap?.({ ...serviceScopeFilters, online: 'online' })}>查看地图</Button>
              <Button size="small" disabled={!onOpenHistory || !filters.keyword?.trim()} onClick={() => onOpenHistory?.({ ...serviceScopeFilters, tab: 'location' })}>轨迹回放</Button>
              <Button size="small" icon={<IconCopy />} onClick={copyCustomerLookupPath}>复制客户查车路径</Button>
            </Space>
          </div>
          <div className="vp-vehicle-lookup-grid">
            {customerLookupSteps.map((step) => (
              <div key={step.label} className="vp-vehicle-lookup-item">
                <Tag color="blue">{step.label}</Tag>
                <strong>{step.value}</strong>
                <span>{step.detail}</span>
              </div>
            ))}
          </div>
        </div>
      </Card>
      <Card bordered title="车辆资产作业栏" style={{ marginTop: 16 }}>
        <div className="vp-vehicle-asset-board">
          <div className="vp-vehicle-asset-summary">
            <Space wrap>
              <Tag color="blue">资产管理</Tag>
              <Tag color={filters.keyword?.trim() ? 'green' : 'grey'}>{filters.keyword?.trim() ? '单车' : '车辆池'}</Tag>
            </Space>
            <strong>像车队资产系统一样，把车辆清单直接转成最近上报、待关注、身份维护和报表导出。</strong>
            <span>车辆中心不只是查表，客户要能从这里直接完成看车、筛异常、维护身份和导出车辆报表。</span>
          </div>
          <div className="vp-vehicle-asset-grid">
            {vehicleAssetTasks.map((item) => (
              <button
                key={item.title}
                type="button"
                className="vp-vehicle-asset-item"
                onClick={item.onClick}
                aria-label={`车辆资产作业 ${item.title} ${item.action}`}
              >
                <Tag color={item.color}>{item.title}</Tag>
                <strong>{item.value}</strong>
                <span>{item.detail}</span>
                <em>{item.action}</em>
              </button>
            ))}
          </div>
        </div>
      </Card>
      <Card bordered title="车辆客户常问" style={{ marginTop: 16 }}>
        <div className="vp-vehicle-question-board">
          <div className="vp-vehicle-question-summary">
            <Space wrap>
              <Tag color="blue">客户问题</Tag>
              <Tag color={filters.keyword?.trim() ? 'green' : 'grey'}>{filters.keyword?.trim() ? '单车范围' : '车辆池'}</Tag>
              <Tag color={(summary?.noDataVehicles ?? 0) > 0 || (summary?.unboundVehicles ?? 0) > 0 ? 'orange' : 'green'}>
                {((summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0)).toLocaleString()} 辆待处理
              </Tag>
            </Space>
            <strong>把车辆池问题翻译成找车、在线、异常和交付动作</strong>
            <span>客户从车辆池开始时，不需要先理解数据源；先定位车辆、确认在线、处理不可服务车辆，再交付车辆清单。</span>
          </div>
          <div className="vp-vehicle-question-grid">
            {vehicleCustomerQuestions.map((item) => (
              <button
                key={item.question}
                type="button"
                className="vp-vehicle-question-item"
                disabled={item.disabled}
                onClick={item.onClick}
                aria-label={`车辆客户常问 ${item.question} ${item.action}`}
              >
                <Tag color={item.color}>{item.question}</Tag>
                <strong>{item.answer}</strong>
                <span>{item.evidence}</span>
                <em>{item.action}</em>
              </button>
            ))}
          </div>
        </div>
      </Card>
      <Card bordered title="车辆服务决策板" style={{ marginTop: 16 }}>
        <div className="vp-vehicle-decision-grid">
          {vehicleDecisionItems.map((item) => (
            <div key={item.title} className="vp-vehicle-decision-item">
              <div className="vp-vehicle-decision-head">
                <Tag color={item.color}>{item.title}</Tag>
                <strong>{item.value}</strong>
              </div>
              <span>{item.detail}</span>
              <Space wrap>
                <Button
                  size="small"
                  theme="solid"
                  type="primary"
                  disabled={item.disabled}
                  aria-label={`车辆服务决策 ${item.title} ${item.primaryAction}`}
                  onClick={item.onPrimary}
                >
                  {item.primaryAction}
                </Button>
                <Button
                  size="small"
                  theme="light"
                  type="primary"
                  disabled={item.title === '单车服务' && item.disabled}
                  aria-label={`车辆服务决策 ${item.title} ${item.secondaryAction}`}
                  onClick={item.onSecondary}
                >
                  {item.secondaryAction}
                </Button>
              </Space>
            </div>
          ))}
        </div>
      </Card>
      <Card bordered title="客户车辆服务交付包" style={{ marginTop: 16 }}>
        <div className="vp-vehicle-package-board">
          <div className="vp-vehicle-package-summary">
            <Space wrap>
              <Tag color="blue">客户交付</Tag>
              <Tag color={filters.keyword?.trim() ? 'green' : 'grey'}>{filters.keyword?.trim() ? '单车包' : '车辆池包'}</Tag>
            </Space>
            <strong>{filters.keyword?.trim() || `${(summary?.totalVehicles ?? pagination.total).toLocaleString()} 辆车`}</strong>
            <span>
              把车辆地图、实时监控、轨迹回放、统计查询、告警通知和历史导出放在同一份服务包里，客户不用理解 GB32960、808 或 MQTT 的差异。
            </span>
            <Space wrap>
              <Button size="small" theme="solid" type="primary" icon={<IconCopy />} onClick={copyCustomerServicePackage}>复制交付包</Button>
              <Button size="small" disabled={!onOpenMap} onClick={() => onOpenMap?.({ ...serviceScopeFilters, online: 'online' })}>查看地图</Button>
              <Button size="small" disabled={!onOpenQuality} onClick={() => onOpenQuality?.(serviceScopeFilters)}>告警通知</Button>
            </Space>
          </div>
          <div className="vp-vehicle-package-grid">
            {servicePackageItems.map((item) => (
              <button
                key={item.label}
                type="button"
                className="vp-vehicle-package-item"
                disabled={item.disabled}
                aria-label={`客户车辆服务交付 ${item.label} ${item.action}`}
                onClick={item.onClick}
              >
                <Tag color={item.color}>{item.label}</Tag>
                <strong>{item.value}</strong>
                <span>{item.detail}</span>
                <em>{item.action}</em>
              </button>
            ))}
          </div>
        </div>
      </Card>
      <Card bordered>
        <Form key={JSON.stringify(filters)} initValues={filters} layout="horizontal" onSubmit={(values) => {
          const nextFilters = values as Record<string, string>;
          applyFilters(nextFilters);
        }}>
          <Form.Input field="keyword" label="关键词" placeholder="VIN / 车牌 / 手机号 / OEM" style={{ width: 260 }} />
          <Form.Select field="protocol" label="证据来源" placeholder="全部来源" style={{ width: 180 }}>
            <Select.Option value="GB32960">GB32960</Select.Option>
            <Select.Option value="JT808">JT808</Select.Option>
            <Select.Option value="YUTONG_MQTT">YUTONG_MQTT</Select.Option>
          </Form.Select>
          <Form.Select field="coverage" label="车辆覆盖" placeholder="全部" style={{ width: 130 }}>
            <Select.Option value="single">单源</Select.Option>
            <Select.Option value="multi">多源</Select.Option>
          </Form.Select>
          <Form.Select field="missingProtocol" label="缺失来源" placeholder="全部" style={{ width: 170 }} data-testid="missing-protocol-filter">
            <Select.Option value="GB32960">缺 GB32960</Select.Option>
            <Select.Option value="JT808">缺 JT808</Select.Option>
            <Select.Option value="YUTONG_MQTT">缺 YUTONG_MQTT</Select.Option>
          </Form.Select>
          <Form.Select field="serviceStatus" label="服务状态" placeholder="全部" style={{ width: 150 }} data-testid="service-status-filter">
            <Select.Option value="healthy">服务正常</Select.Option>
            <Select.Option value="degraded">来源不完整</Select.Option>
            <Select.Option value="offline">车辆离线</Select.Option>
            <Select.Option value="no_data">暂无来源证据</Select.Option>
            <Select.Option value="identity_required">身份未绑定</Select.Option>
          </Form.Select>
          <Form.Select field="online" label="在线" placeholder="全部" style={{ width: 130 }}>
            <Select.Option value="online">在线</Select.Option>
            <Select.Option value="offline">离线</Select.Option>
          </Form.Select>
          <Form.Select field="bindingStatus" label="绑定" placeholder="全部" style={{ width: 130 }}>
            <Select.Option value="bound">已绑定</Select.Option>
            <Select.Option value="unbound">未绑定</Select.Option>
          </Form.Select>
          <Form.Select field="archiveStatus" label="档案" placeholder="全部" style={{ width: 130 }}>
            <Select.Option value="complete">完整</Select.Option>
            <Select.Option value="incomplete">不完整</Select.Option>
          </Form.Select>
          <Form.Select field="archiveMissing" label="档案缺项" placeholder="全部" style={{ width: 140 }}>
            <Select.Option value="plate">缺车牌</Select.Option>
            <Select.Option value="phone">缺手机号</Select.Option>
            <Select.Option value="oem">缺OEM</Select.Option>
          </Form.Select>
          <Space>
            <Button htmlType="submit" theme="solid" type="primary">查询</Button>
            <Button icon={<IconCopy />} onClick={copyVehicleShareURL}>复制筛选链接</Button>
            <Button onClick={() => {
              applyFilters({});
            }}>重置</Button>
          </Space>
        </Form>
      </Card>
      {filterSummary.length > 0 ? (
        <Card bordered title="当前车辆筛选" style={{ marginTop: 16 }}>
          <Space wrap>
            {filterSummary.map((item) => (
              <Tag key={item} color="blue">{item}</Tag>
            ))}
            <Button size="small" onClick={() => applyFilters({})}>清空筛选</Button>
          </Space>
        </Card>
      ) : null}
      <Card
        bordered
        title={(
          <Space>
            <span>当前车辆结果</span>
            <Button size="small" theme="light" onClick={copyGovernanceSummary}>复制治理摘要</Button>
            <Button size="small" theme="light" onClick={copyDispatchList}>复制当前页处置清单</Button>
            <Button size="small" theme="light" onClick={copyIdentityMaintenanceList}>复制身份维护清单</Button>
          </Space>
        )}
        style={{ marginTop: 16 }}
      >
        {rows.length > 0 ? (
          <div className="vp-current-service-board">
            <div>
              <div className="vp-current-service-title">当前页服务判读</div>
              <div className="vp-current-service-grid">
                {pageVerdictStats.map((item) => (
                  <div key={item.status} className="vp-current-service-item">
                    <Space spacing={6} wrap>
                      <Tag color={item.color}>{item.status}</Tag>
                      <Tag color="grey">{item.count.toLocaleString()} 辆</Tag>
                    </Space>
                    <div className="vp-current-service-risk">{item.risk}</div>
                    <div className="vp-current-service-next">{item.nextStep}</div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="vp-current-service-title">建议下一步</div>
              <div className="vp-current-action-list">
                {pageActionStats.map((item) => (
                  item.filters ? (
                    <Button
                      key={item.label}
                      size="small"
                      theme="light"
                      type={item.color === 'red' ? 'danger' : 'warning'}
                      onClick={() => applyFilters({ ...filters, ...item.filters })}
                    >
                      {item.label} {item.count.toLocaleString()}
                    </Button>
                  ) : (
                    <Tag key={item.label} color={item.color}>{item.label} {item.count.toLocaleString()}</Tag>
                  )
                ))}
              </div>
            </div>
          </div>
        ) : null}
        <div className="vp-result-summary-grid">
          {resultSummary.map((item) => (
            <button
              key={item.label}
              className="vp-result-summary-item vp-result-summary-button"
              type="button"
              aria-label={`${item.label} ${item.value}`}
              onClick={() => applyFilters({ ...filters, ...item.filters })}
            >
              <div className="vp-result-summary-value">{item.value}</div>
              <div className="vp-result-summary-label">{item.label}</div>
            </button>
          ))}
        </div>
      </Card>
      {actionQueue.length > 0 ? (
        <Card bordered title="处置队列" style={{ marginTop: 16 }}>
          <div className="vp-action-grid">
            {actionQueue.map((item) => (
              <div key={`${item.label}-${item.count}`} className="vp-action-item">
                <div>
                  <Space spacing={6} wrap>
                    <Tag color={item.priority === 'P0' ? 'red' : 'orange'}>{item.priority}</Tag>
                    <Tag color={item.color}>{item.label} {item.count.toLocaleString()}</Tag>
                  </Space>
                  <div style={{ marginTop: 8 }}>{item.detail}</div>
                </div>
                <Button size="small" theme="light" type={item.color === 'red' ? 'danger' : 'warning'} onClick={() => applyFilters({ ...filters, ...item.filters })}>
                  {item.label} {item.count.toLocaleString()}
                </Button>
              </div>
            ))}
          </div>
        </Card>
      ) : null}
      <Card bordered style={{ marginTop: 16 }}>
        {rows.length === 0 && !loading ? (
          <DataEmpty />
        ) : (
          <>
            <div className="vp-table-toolbar">
              <Space wrap>
                <Tag color="blue">当前页 {rows.length.toLocaleString()} 辆</Tag>
                <Tag color="grey">总计 {pagination.total.toLocaleString()} 辆</Tag>
                <Button size="small" onClick={exportVehicles}>导出车辆当前页 CSV</Button>
              </Space>
            </div>
            <Table
              loading={loading}
              rowKey="vin"
              dataSource={rows}
              columns={columns}
              pagination={{
                currentPage: pagination.currentPage,
                pageSize: pagination.pageSize,
                total: pagination.total,
                showSizeChanger: true,
                onPageChange: (page) => load(filters, page, pagination.pageSize),
                onPageSizeChange: (pageSize) => load(filters, 1, pageSize)
              }}
            />
          </>
        )}
      </Card>
    </div>
  );
}