import { IconArrowDown, IconArrowUp, IconClose, IconDownload, IconInfoCircle, IconRefresh, IconSearch, IconSetting } from '@douyinfe/semi-icons';
import { Button, ButtonGroup, Card, DatePicker, Input, Progress, Spin, Switch, Table, Tag, TextArea } from '@douyinfe/semi-ui';
import { useQuery } from '@tanstack/react-query';
import { type CSSProperties, FormEvent, type KeyboardEvent, memo, type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { api, type MileageQuery } from '../../api/client';
import type { DailyMileageRow, HydrogenDailyEvidence, MileageStatistics, Page, VehicleRow } from '../../api/types';
import { createMileageExportStream, type MileageExportStream } from '../domain/mileageExport';
import { formatZhNumber } from '../domain/formatters';
import { InlineError, PanelEmpty, PanelLoading } from '../shared/AsyncState';
import { MonitorReturnBar } from '../shared/MonitorReturnBar';
import { MobileFilterToggle } from '../shared/MobileFilterToggle';
import { MobileFilterSheet, MobileFilterSheetSection } from '../shared/MobileFilterSheet';
import { TablePagination } from '../shared/TablePagination';
import { VehicleCandidateList } from '../shared/VehicleCandidateList';
import { mergeVehicleCandidates } from '../shared/vehicleCandidates';
import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
import { WorkspaceMetricRail, type WorkspaceQueueMetricRailItem } from '../shared/WorkspaceMetricRail';
import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
import { QUERY_MEMORY, retainPreviousPageWithinScope } from '../queryPolicy';
import { monitorReturnFromParams, preserveMonitorReturn } from '../routing/monitorContext';
import { preserveVehicleReturn, vehicleReturnFromParams } from '../routing/vehicleContext';
import { useMobileLayout } from '../hooks/useMobileLayout';
import { usePlatformSession } from '../auth/AuthGate';

const DAY = 86_400_000;
const DETAIL_LIMIT = 10_000;
const MAX_MILEAGE_VEHICLES = 50_000;
const LEGACY_URL_VEHICLE_LIMIT = 20;
const BATCH_RESOLVE_SIZE = 200;
const PAGE_SIZE = 20;
const EXPORT_VEHICLE_PAGE_SIZE = 2_000;
const EXPORT_VIN_BATCH_SIZE = 50;
const EXPORT_QUERY_TARGET_ROWS = 8_000;
const EXPORT_MAX_DAYS_PER_QUERY = 31;
const MAX_MILEAGE_RANGE_DAYS = 366;
const CURRENT_DAY_REFRESH_MS = 60_000;

type VehicleOption = Pick<VehicleRow, 'vin' | 'plate'> & { brandName?: string; modelName?: string };
type MileageProtocol = 'GB32960' | 'JT808' | 'YUTONG_MQTT';
type MileageSourceOption = { protocol: MileageProtocol; label: string; mileageType: string; enabled: boolean };
type Criteria = { vehicles: VehicleOption[]; dateFrom: string; dateTo: string; sources: MileageSourceOption[] };
type ExportProgress = { label: string; completed?: number; total?: number };
type MetricView = 'mileage' | 'hydrogen';
type HydrogenMatrixMetric = 'consumption' | 'pureElectric' | 'pureHydrogen' | 'rate';
type MatrixMetric = 'mileage' | HydrogenMatrixMetric;

const HYDROGEN_MATRIX_METRICS: Array<{ key: HydrogenMatrixMetric; label: string }> = [
  { key: 'consumption', label: '用氢量' },
  { key: 'pureElectric', label: '纯电里程' },
  { key: 'pureHydrogen', label: '纯氢里程' },
  { key: 'rate', label: '百公里氢耗' }
];
const DEFAULT_HYDROGEN_MATRIX_METRICS: HydrogenMatrixMetric[] = ['consumption', 'rate'];
const MATRIX_METRIC_META: Record<MatrixMetric, { label: string; unit: string; width: number }> = {
  mileage: { label: '里程', unit: 'km', width: 92 },
  consumption: { label: '用氢量', unit: 'kg', width: 88 },
  pureElectric: { label: '纯电里程', unit: 'km', width: 96 },
  pureHydrogen: { label: '纯氢里程', unit: 'km', width: 96 },
  rate: { label: '百公里氢耗', unit: 'kg/100km', width: 112 }
};

const SOURCE_STORAGE_KEY = 'vehicle-platform:mileage-source-strategy';
const DEFAULT_SOURCES: MileageSourceOption[] = [
  { protocol: 'GB32960', label: '国标 GB32960', mileageType: '仪表盘里程', enabled: true },
  { protocol: 'JT808', label: '交通部 JT/T 808', mileageType: 'GPS 里程', enabled: true },
  { protocol: 'YUTONG_MQTT', label: '宇通 MQTT', mileageType: '仪表盘里程', enabled: true }
];

function localDate(value = new Date()) {
  const offset = value.getTimezoneOffset() * 60_000;
  return new Date(value.getTime() - offset).toISOString().slice(0, 10);
}

function defaultWindow(days = 7, endOffsetDays = 0) {
  const end = new Date(Date.now() - endOffsetDays * DAY);
  return { dateFrom: localDate(new Date(end.getTime() - (days - 1) * DAY)), dateTo: localDate(end) };
}

function isSameRange(criteria: Pick<Criteria, 'dateFrom' | 'dateTo'>, range: { dateFrom: string; dateTo: string }) {
  return criteria.dateFrom === range.dateFrom && criteria.dateTo === range.dateTo;
}

function MileageRangeShortcuts({
  value,
  ranges,
  onChange
}: {
  value: Pick<Criteria, 'dateFrom' | 'dateTo'>;
  ranges: Array<{ label: string; range: { dateFrom: string; dateTo: string } }>;
  onChange: (range: { dateFrom: string; dateTo: string }) => void;
}) {
  return <div className="v2-mileage-ranges">
    <span>快捷日期</span>
    <ButtonGroup aria-label="快捷日期范围">
      {ranges.map(({ label, range }) => {
        const active = isSameRange(value, range);
        return <Button
          key={label}
          theme={active ? 'solid' : 'light'}
          htmlType="button"
          aria-pressed={active}
          onClick={() => onChange(range)}
        >
          {label}
        </Button>;
      })}
    </ButtonGroup>
  </div>;
}

export function mileageRangeContainsDate(
  range: { dateFrom: string; dateTo: string },
  date = localDate()
) {
  return Boolean(range.dateFrom && range.dateTo && range.dateFrom <= date && range.dateTo >= date);
}

function formatKm(value?: number | null) {
  if (value == null || !Number.isFinite(value)) return '—';
  return formatZhNumber(value, 1);
}

function inclusiveDays(dateFrom: string, dateTo: string) {
  const from = Date.parse(`${dateFrom}T00:00:00Z`);
  const to = Date.parse(`${dateTo}T00:00:00Z`);
  return Number.isFinite(from) && Number.isFinite(to) && to >= from ? Math.round((to - from) / DAY) + 1 : 0;
}

function mileageDateRangeError(criteria: Pick<Criteria, 'dateFrom' | 'dateTo'>) {
  if (!criteria.dateFrom || !criteria.dateTo) return '请选择完整的开始和结束日期';
  const days = inclusiveDays(criteria.dateFrom, criteria.dateTo);
  if (!days) return '结束日期不能早于开始日期';
  if (days > MAX_MILEAGE_RANGE_DAYS) return `单次最多查询 ${MAX_MILEAGE_RANGE_DAYS} 个自然日，请缩小日期范围`;
  return '';
}

function datePickerRange(dateValue?: Date | Date[] | string | string[], formattedValue?: string | string[] | Date | Date[]) {
  const values = Array.isArray(formattedValue) && formattedValue.length === 2
    ? formattedValue
    : Array.isArray(dateValue) && dateValue.length === 2 ? dateValue : [];
  if (values.length !== 2) return;
  const normalized = values.map((value) => {
    if (value instanceof Date) return localDate(value);
    if (typeof value === 'number') return localDate(new Date(value));
    return String(value).slice(0, 10);
  });
  if (normalized.some((value) => !/^\d{4}-\d{2}-\d{2}$/.test(value))) return;
  return { dateFrom: normalized[0], dateTo: normalized[1] };
}

function mileageQuery(criteria: Criteria, offset = 0): MileageQuery {
  const query: MileageQuery = {
    dateFrom: criteria.dateFrom,
    dateTo: criteria.dateTo,
    protocols: criteria.sources.filter((source) => source.enabled).map((source) => source.protocol)
  };
  if (criteria.vehicles.length) query.vins = criteria.vehicles.map((vehicle) => vehicle.vin);
  else query.vehicleScope = 'bound';
  if (offset >= 0) {
    query.deduplicate = true;
    query.limit = DETAIL_LIMIT;
    query.offset = offset;
  }
  return query;
}

export function mileageExportDateWindows(dateFrom: string, dateTo: string, vehicleCount: number) {
  const start = new Date(`${dateFrom}T00:00:00Z`);
  const end = new Date(`${dateTo}T00:00:00Z`);
  if (!Number.isFinite(start.getTime()) || !Number.isFinite(end.getTime()) || start > end) return [];
  const daysPerQuery = Math.max(1, Math.min(EXPORT_MAX_DAYS_PER_QUERY, Math.floor(EXPORT_QUERY_TARGET_ROWS / Math.max(1, vehicleCount))));
  const windows: Array<{ dateFrom: string; dateTo: string }> = [];
  for (let cursor = start; cursor <= end;) {
    const windowEnd = new Date(Math.min(end.getTime(), cursor.getTime() + (daysPerQuery - 1) * DAY));
    windows.push({ dateFrom: cursor.toISOString().slice(0, 10), dateTo: windowEnd.toISOString().slice(0, 10) });
    cursor = new Date(windowEnd.getTime() + DAY);
  }
  return windows;
}

function mileageRouteParams(criteria: Criteria) {
  const params = new URLSearchParams({ dateFrom: criteria.dateFrom, dateTo: criteria.dateTo });
  params.set('protocols', criteria.sources.filter((source) => source.enabled).map((source) => source.protocol).join(','));
  if (criteria.vehicles.length <= LEGACY_URL_VEHICLE_LIMIT) params.set('vins', criteria.vehicles.map((vehicle) => vehicle.vin).join(','));
  return params;
}

function initialCriteria(searchParams: URLSearchParams): Criteria {
  const defaults = defaultWindow();
  const vins = (searchParams.get('vins') ?? '').split(',').map((vin) => vin.trim()).filter(Boolean).slice(0, LEGACY_URL_VEHICLE_LIMIT);
  const requestedProtocols = (searchParams.get('protocols') ?? '').split(',').filter((protocol): protocol is MileageProtocol => DEFAULT_SOURCES.some((source) => source.protocol === protocol));
  let sources = DEFAULT_SOURCES.map((source) => ({ ...source }));
  if (requestedProtocols.length) {
    sources = [...requestedProtocols.map((protocol) => ({ ...DEFAULT_SOURCES.find((source) => source.protocol === protocol)!, enabled: true })), ...DEFAULT_SOURCES.filter((source) => !requestedProtocols.includes(source.protocol)).map((source) => ({ ...source, enabled: false }))];
  } else {
    try {
      const stored = JSON.parse(window.localStorage.getItem(SOURCE_STORAGE_KEY) ?? '[]') as Partial<MileageSourceOption>[];
      const normalized = stored.flatMap((item) => {
        const source = DEFAULT_SOURCES.find((candidate) => candidate.protocol === item.protocol);
        return source ? [{ ...source, enabled: item.enabled !== false }] : [];
      });
      if (normalized.length === DEFAULT_SOURCES.length && normalized.some((source) => source.enabled)) sources = normalized;
    } catch { /* retain safe defaults */ }
  }
  return {
    vehicles: vins.map((vin) => ({ vin, plate: '' })),
    dateFrom: searchParams.get('dateFrom') ?? defaults.dateFrom,
    dateTo: searchParams.get('dateTo') ?? defaults.dateTo,
    sources
  };
}

function SourceStrategy({ value, onChange }: { value: MileageSourceOption[]; onChange: (sources: MileageSourceOption[]) => void }) {
  const [open, setOpen] = useState(false);
  const mobileLayout = useMobileLayout();
  const rootRef = useRef<HTMLDivElement>(null);
  const popoverRef = useRef<HTMLDivElement>(null);
  const enabled = value.filter((source) => source.enabled);
  const primarySource = enabled[0];
  const focusTrigger = () => rootRef.current?.querySelector<HTMLButtonElement>('.v2-mileage-source-trigger')?.focus();
  const closeDesktopPanel = () => {
    setOpen(false);
    window.requestAnimationFrame(focusTrigger);
  };
  const update = (sources: MileageSourceOption[]) => {
    onChange(sources);
    try { window.localStorage.setItem(SOURCE_STORAGE_KEY, JSON.stringify(sources)); } catch { /* preference persistence is optional */ }
  };
  const move = (index: number, direction: -1 | 1) => {
    const target = index + direction;
    if (target < 0 || target >= value.length) return;
    const next = [...value];
    [next[index], next[target]] = [next[target], next[index]];
    update(next);
  };
  const toggle = (protocol: MileageProtocol) => {
    const current = value.find((source) => source.protocol === protocol);
    if (current?.enabled && enabled.length === 1) return;
    update(value.map((source) => source.protocol === protocol ? { ...source, enabled: !source.enabled } : source));
  };

  useEffect(() => {
    if (!open || mobileLayout) return;
    popoverRef.current?.focus();
    const closeOnOutsideClick = (event: MouseEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
    };
    const closeOnEscape = (event: globalThis.KeyboardEvent) => {
      if (event.key !== 'Escape') return;
      event.preventDefault();
      setOpen(false);
      focusTrigger();
    };
    document.addEventListener('mousedown', closeOnOutsideClick);
    document.addEventListener('keydown', closeOnEscape);
    return () => {
      document.removeEventListener('mousedown', closeOnOutsideClick);
      document.removeEventListener('keydown', closeOnEscape);
    };
  }, [mobileLayout, open]);

  const sourceList = <div className="v2-mileage-source-list">{value.map((source, index) => <Card key={source.protocol} className={`v2-mileage-source-card${source.enabled ? '' : ' is-disabled'}`} bodyStyle={{ padding: 0 }}>
    <Switch className="v2-mileage-source-switch" checked={source.enabled} aria-label={`${source.enabled ? '禁用' : '启用'} ${source.label}`} onChange={() => toggle(source.protocol)} />
    <div className="v2-mileage-source-copy"><strong>{source.label}</strong><small><Tag color="blue" type="light" size="small">{source.mileageType}</Tag><code>{source.protocol}</code></small></div>
    <Tag className="v2-mileage-source-priority" color={source.enabled ? 'blue' : 'grey'} type="light" size="small">{source.enabled ? `优先级 ${enabled.findIndex((item) => item.protocol === source.protocol) + 1}` : '已禁用'}</Tag>
    <div className="v2-mileage-source-order"><Button theme="borderless" aria-label={`上移 ${source.label}`} icon={<IconArrowUp />} disabled={index === 0} onClick={() => move(index, -1)} /><Button theme="borderless" aria-label={`下移 ${source.label}`} icon={<IconArrowDown />} disabled={index === value.length - 1} onClick={() => move(index, 1)} /></div>
  </Card>)}</div>;

  return <div ref={rootRef} className="v2-mileage-source-strategy">
    <Button
      className="v2-mileage-source-trigger"
      theme="light"
      icon={<IconSetting />}
      aria-label={`数据源策略，${primarySource?.protocol ?? '未配置'} 优先，${enabled.length}/3 已启用`}
      aria-haspopup="dialog"
      aria-expanded={open}
      aria-controls="v2-mileage-source-strategy"
      title={`当前优先：${primarySource?.label ?? '未配置'}`}
      onClick={() => setOpen((current) => !current)}
    >
      <span>数据源</span><em>{primarySource?.protocol ?? '未配置'} 优先</em><b>{enabled.length}/3</b>
    </Button>
    {!mobileLayout && open ? <div
      ref={popoverRef}
      id="v2-mileage-source-strategy"
      className="v2-mileage-source-popover"
      role="dialog"
      aria-modal="false"
      aria-labelledby="v2-mileage-source-popover-title"
      tabIndex={-1}
    >
      <header className="v2-mileage-source-popover-header">
        <span className="v2-mileage-source-popover-icon" aria-hidden="true"><IconSetting /></span>
        <div>
          <strong id="v2-mileage-source-popover-title">数据源策略</strong>
          <small>排序决定同车同日的里程取值优先级</small>
        </div>
        <Tag color={enabled.length === 3 ? 'green' : 'blue'} type="light" size="small">{enabled.length}/3 已启用</Tag>
        <Button theme="borderless" aria-label="关闭数据源策略" icon={<IconClose />} onClick={closeDesktopPanel} />
      </header>
      <div className="v2-mileage-source-popover-summary" aria-live="polite">
        <span><small>当前首选</small><strong>{primarySource?.protocol ?? '未配置'}</strong><em>{primarySource?.mileageType ?? '至少保留一个来源'}</em></span>
        <p><IconInfoCircle />首选无有效增量时，自动尝试下一来源</p>
      </div>
      {sourceList}
      <footer className="v2-mileage-source-popover-footer">
        <span>更改即时生效，并保存在此浏览器</span>
        <Button theme="borderless" type="tertiary" onClick={closeDesktopPanel}>收起</Button>
      </footer>
    </div> : null}
    {mobileLayout ? <WorkspaceSideSheet
      className="v2-mileage-source-sidesheet"
      visible={open}
      ariaLabel="数据源策略配置"
      closeLabel="关闭数据源策略"
      dialogId="v2-mileage-source-strategy"
      placement="bottom"
      height="min(58dvh, 500px)"
      title="数据源策略"
      description="同车同日优先采用靠前且有有效增量的里程来源"
      badge={`${enabled.length}/3 已启用`}
      badgeColor={enabled.length === 3 ? 'green' : 'blue'}
      summaryItems={[
        { label: '当前首选', value: primarySource?.protocol ?? '未配置', detail: primarySource?.mileageType ?? '至少保留一个来源', tone: 'primary' },
        { label: '启用来源', value: `${enabled.length} / 3`, detail: enabled.map((source) => source.protocol).join(' · '), tone: enabled.length === 3 ? 'success' : 'neutral' },
        { label: '统计口径', value: '单车单日', detail: '仅采用一个优先来源' }
      ]}
      onCancel={() => setOpen(false)}
      footerNote="首选来源为 0、其他来源有有效增量时会自动降级；全部为 0 时仍按优先级选择。"
      primaryAction={{ label: '完成', onClick: () => setOpen(false) }}
    >
      {sourceList}
    </WorkspaceSideSheet> : null}
  </div>;
}

export function parseMileageVehicleIdentifiers(value: string) {
  const ignoredHeaders = new Set(['车牌', '车牌号', '车牌号码', 'vin', 'vin码', '车架号', '车辆识别代号', '序号', '备注']);
  const identifiers: string[] = [];
  const seen = new Set<string>();
  for (const raw of value.split(/[\s,，、;；|]+/u)) {
    const identifier = raw.trim();
    const key = identifier.toLocaleUpperCase();
    if (!identifier || ignoredHeaders.has(key.toLocaleLowerCase()) || seen.has(key)) continue;
    seen.add(key);
    identifiers.push(key);
    if (identifiers.length === MAX_MILEAGE_VEHICLES) break;
  }
  return identifiers;
}

function isVIN(value: string) {
  return /^[A-HJ-NPR-Z0-9]{17}$/i.test(value);
}

async function resolveMileageVehicles(identifiers: string[]) {
  const vehicles: VehicleOption[] = [];
  const missing: string[] = [];
  const seenVINs = new Set<string>();
  const plates = identifiers.filter((identifier) => !isVIN(identifier));
  for (const vin of identifiers.filter(isVIN)) {
    const normalized = vin.toLocaleUpperCase();
    if (!seenVINs.has(normalized)) {
      seenVINs.add(normalized);
      vehicles.push({ vin: normalized, plate: '' });
    }
  }
  for (let start = 0; start < plates.length; start += BATCH_RESOLVE_SIZE * 4) {
    const group = Array.from({ length: 4 }, (_, index) => plates.slice(start + index * BATCH_RESOLVE_SIZE, start + (index + 1) * BATCH_RESOLVE_SIZE)).filter((batch) => batch.length);
    const pages = await Promise.all(group.map((keywords) => api.vehicleServiceOverviews({ keywords, limit: BATCH_RESOLVE_SIZE, offset: 0 })));
    pages.forEach((page, pageIndex) => {
      const keywords = group[pageIndex];
      keywords.forEach((keyword, index) => {
        const match = page.items[index];
        const vin = match?.vin?.trim().toLocaleUpperCase();
        if (!vin) {
          missing.push(keyword);
          return;
        }
        if (!seenVINs.has(vin)) {
          seenVINs.add(vin);
          vehicles.push({ vin, plate: match.plate || keyword });
        }
      });
    });
  }
  return { vehicles, missing };
}

function MileageBatchVehicleDialog({ visible, value, mobile, onApply, onClose }: { visible: boolean; value: VehicleOption[]; mobile: boolean; onApply: (vehicles: VehicleOption[], feedback: string) => void; onClose: () => void }) {
  const [draft, setDraft] = useState('');
  const [resolving, setResolving] = useState(false);
  const [error, setError] = useState('');
  const identifiers = useMemo(() => parseMileageVehicleIdentifiers(draft), [draft]);
  const apply = async () => {
    if (!identifiers.length || resolving) return;
    setResolving(true);
    setError('');
    try {
      const resolved = await resolveMileageVehicles(identifiers);
      const merged = [...value];
      const seen = new Set(value.map((vehicle) => vehicle.vin));
      for (const vehicle of resolved.vehicles) if (!seen.has(vehicle.vin)) { seen.add(vehicle.vin); merged.push(vehicle); }
      const added = merged.length - value.length;
      onApply(merged, resolved.missing.length
        ? `已新增 ${added.toLocaleString('zh-CN')} 辆，${resolved.missing.length.toLocaleString('zh-CN')} 项未识别`
        : `已新增 ${added.toLocaleString('zh-CN')} 辆，重复项已自动去除`);
      onClose();
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : '批量车牌解析失败，请稍后重试');
    } finally {
      setResolving(false);
    }
  };
  return <WorkspaceSideSheet
    className="v2-monitor-batch-sidesheet v2-mileage-batch-sidesheet"
    variant="editor"
    visible={visible}
    ariaLabel="批量添加里程查询车辆"
    closeLabel="关闭批量添加车辆"
    dialogId="v2-mileage-batch-search"
    placement={mobile ? 'bottom' : 'right'}
    width={mobile ? undefined : 520}
    height={mobile ? 'min(86dvh, 700px)' : undefined}
    title="批量添加车辆"
    description="直接粘贴 Excel 单列、多列或文本中的车牌 / VIN"
    icon={<IconSearch />}
    badge={`${identifiers.length.toLocaleString('zh-CN')} 项`}
    badgeColor={identifiers.length ? 'blue' : 'grey'}
    summaryItems={[
      { label: '已解析', value: identifiers.length.toLocaleString('zh-CN'), detail: '车牌与 VIN 可混合', tone: identifiers.length ? 'primary' : 'neutral' },
      { label: '重复处理', value: '自动去重', detail: '含已有车辆与重复行', tone: 'success' },
      { label: '单次容量', value: '50,000 辆', detail: '查询使用 POST 请求体' }
    ]}
    footerNote="支持换行、Tab、空格、中英文逗号、分号、顿号和竖线。"
    secondaryActions={[{ label: '取消', onClick: onClose }]}
    primaryAction={{ label: `解析并添加（${identifiers.length.toLocaleString('zh-CN')}）`, loading: resolving, disabled: !identifiers.length, onClick: apply }}
    onCancel={onClose}
  >
    <div className="v2-batch-search-dialog">
      <label htmlFor="mileage-batch-vehicles">从 Excel 复制后直接粘贴，无需整理格式</label>
      <TextArea id="mileage-batch-vehicles" autoFocus value={draft} onChange={setDraft} autosize={{ minRows: 8, maxRows: 14 }} resize="vertical" placeholder={'车牌\tVIN\n粤A12345\tLTEST000000000001\n粤B67890'} />
      <div className="v2-batch-search-summary" role="status"><span>已解析 <strong>{identifiers.length.toLocaleString('zh-CN')}</strong> 项，重复项已去除</span><em>最多 50,000 辆</em></div>
      {error ? <p className="v2-mileage-batch-error" role="alert">{error}</p> : null}
    </div>
  </WorkspaceSideSheet>;
}

function VehicleMultiSelect({ value, onChange }: { value: VehicleOption[]; onChange: (vehicles: VehicleOption[]) => void }) {
  const [search, setSearch] = useState('');
  const [debounced, setDebounced] = useState('');
  const [open, setOpen] = useState(false);
  const [batchOpen, setBatchOpen] = useState(false);
  const [batchFeedback, setBatchFeedback] = useState('');
  const mobile = useMobileLayout();
  const closeTimerRef = useRef<number>();
  useEffect(() => { const timer = window.setTimeout(() => setDebounced(search.trim()), 220); return () => window.clearTimeout(timer); }, [search]);
  useEffect(() => () => window.clearTimeout(closeTimerRef.current), []);
  const openPicker = () => {
    window.clearTimeout(closeTimerRef.current);
    setOpen(true);
  };
  const closePicker = () => {
    window.clearTimeout(closeTimerRef.current);
    closeTimerRef.current = window.setTimeout(() => setOpen(false), 120);
  };
  const candidateParams = useMemo(() => {
    const params = new URLSearchParams({ limit: '12', offset: '0' });
    if (debounced) params.set('keyword', debounced);
    return params;
  }, [debounced]);
  const candidates = useQuery({
    queryKey: ['mileage-vehicle-options', candidateParams.toString()],
    queryFn: ({ signal }) => api.vehicles(candidateParams, signal),
    enabled: open,
    staleTime: 30_000,
    gcTime: QUERY_MEMORY.optionGcTime
  });
  const selected = useMemo(() => new Set(value.map((vehicle) => vehicle.vin)), [value]);
  const options = useMemo(() => mergeVehicleCandidates(candidates.data?.items ?? []), [candidates.data?.items]);

  const add = (vehicle: VehicleRow) => {
    if (selected.has(vehicle.vin) || value.length >= MAX_MILEAGE_VEHICLES) return;
    onChange([...value, { vin: vehicle.vin, plate: vehicle.plate }]);
    setSearch('');
  };

  const visibleVehicles = value.slice(0, 3);

  return <div className="v2-mileage-vehicle-field">
    <span>车牌</span>
    <div className={`v2-mileage-multiselect${open ? ' is-open' : ''}`}>
      <IconSearch />
      <div className="v2-mileage-selection">
        {visibleVehicles.map((vehicle) => <Tag
          key={vehicle.vin}
          className="v2-mileage-chip"
          color="blue"
          type="light"
          closable
          onClose={(_, event) => {
            event.stopPropagation();
            onChange(value.filter((item) => item.vin !== vehicle.vin));
          }}
        >
          {vehicle.plate || vehicle.vin}
        </Tag>)}
        {value.length > visibleVehicles.length ? <Tag className="v2-mileage-chip is-overflow" color="blue" type="light">+{(value.length - visibleVehicles.length).toLocaleString('zh-CN')} 辆</Tag> : null}
        <Input borderless value={search} onFocus={openPicker} onBlur={closePicker} onChange={(next) => { setSearch(next); setOpen(true); }} placeholder={value.length ? '继续添加车牌' : '输入车牌搜索，可多选'} aria-label="搜索车牌" />
      </div>
      <button className="v2-mileage-batch-trigger" type="button" aria-expanded={batchOpen} aria-controls="v2-mileage-batch-search" onClick={() => { setOpen(false); setBatchOpen(true); }}>批量粘贴</button>
      {open ? <VehicleCandidateList
        className="v2-mileage-options"
        items={options}
        loading={candidates.isLoading}
        error={candidates.isError ? (candidates.error instanceof Error ? candidates.error.message : '车牌候选加载失败') : undefined}
        onRetry={() => candidates.refetch()}
        emptyText="没有匹配的车牌"
        selectedVins={selected}
        disableSelected
        header="车牌候选"
        meta={`${value.length.toLocaleString('zh-CN')} 已选`}
        showProtocols
        onSelect={add}
      /> : null}
    </div>
    <small>{batchFeedback || '支持 Excel 粘贴与常见分隔符，最多 50,000 辆'}</small>
    <MileageBatchVehicleDialog visible={batchOpen} value={value} mobile={mobile} onClose={() => setBatchOpen(false)} onApply={(vehicles, feedback) => { onChange(vehicles); setBatchFeedback(feedback); }} />
  </div>;
}

function MetricViewSwitch({ value, onChange }: { value: MetricView; onChange: (value: MetricView) => void }) {
  return <div className="v2-mileage-view-switch" role="group" aria-label="数据视图">
    <span>
      <strong>{value === 'mileage' ? '里程视图' : '氢耗视图'}</strong>
      <small>{value === 'mileage' ? '只看车辆行驶里程' : '按纯氢里程计算百公里氢耗'}</small>
    </span>
    <ButtonGroup aria-label="切换里程或氢耗视图">
      <Button theme={value === 'mileage' ? 'solid' : 'light'} aria-pressed={value === 'mileage'} onClick={() => onChange('mileage')}>里程</Button>
      <Button theme={value === 'hydrogen' ? 'solid' : 'light'} aria-pressed={value === 'hydrogen'} onClick={() => onChange('hydrogen')}>氢耗</Button>
    </ButtonGroup>
  </div>;
}

function HydrogenMetricSelector({ value, onChange }: { value: HydrogenMatrixMetric[]; onChange: (value: HydrogenMatrixMetric[]) => void }) {
  const selected = new Set(value);
  return <div className="v2-mileage-metric-selector" role="group" aria-label="日期子列">
    <span><strong>日期子列</strong><small>里程固定展示</small></span>
    <Tag color="blue" type="light" size="small">里程</Tag>
    {HYDROGEN_MATRIX_METRICS.map((metric) => {
      const active = selected.has(metric.key);
      return <Button
        key={metric.key}
        size="small"
        theme={active ? 'solid' : 'light'}
        aria-pressed={active}
        onClick={() => onChange(active ? value.filter((item) => item !== metric.key) : [...value, metric.key])}
      >
        {metric.label}
      </Button>;
    })}
  </div>;
}

function SummaryRail({ data, criteria, fleetTotal, loading, view, unavailable = false }: { data?: MileageStatistics; criteria: Criteria; fleetTotal?: number; loading: boolean; view: MetricView; unavailable?: boolean }) {
  const days = inclusiveDays(criteria.dateFrom, criteria.dateTo);
  const scopeVehicleCount = criteria.vehicles.length || fleetTotal || 0;
  const measuredVehicleCount = data?.vehicleCount ?? 0;
  const coveragePercent = scopeVehicleCount ? Math.round(measuredVehicleCount / scopeVehicleCount * 100) : 0;
  const pending = loading || unavailable;
  const summaryRange = criteria.dateFrom.slice(0, 4) === criteria.dateTo.slice(0, 4)
    ? `${criteria.dateFrom.replace(/-/g, '/')} — ${criteria.dateTo.slice(5).replace('-', '/')}`
    : `${criteria.dateFrom.replace(/-/g, '/')} — ${criteria.dateTo.replace(/-/g, '/')}`;
  const withUnit = (value: string | number, unit: string) => <>{value}<i className="v2-mileage-summary-unit"> {unit}</i></>;
  const items: WorkspaceQueueMetricRailItem[] = view === 'mileage' ? [{
      label: '区间总里程',
      value: pending ? '—' : withUnit(formatKm(data?.periodMileageKm), 'km'),
      note: unavailable ? '汇总暂不可用' : loading ? '正在计算区间汇总' : `${data?.recordCount ?? 0} 条有效车辆日`,
      tone: 'primary',
      emphasis: 'primary'
    },
    {
      label: '日均里程',
      value: pending ? '—' : withUnit(formatKm(data?.averageDailyMileageKm), 'km'),
      note: unavailable ? '日均里程暂不可用' : loading ? '正在计算每日均值' : `${days} 个自然日`,
      tone: 'primary',
      emphasis: 'primary'
    },
    {
      label: '有里程车辆',
      value: pending ? '—' : withUnit(`${measuredVehicleCount} / ${scopeVehicleCount}`, '辆'),
      note: unavailable ? '覆盖情况暂不可用' : loading ? '正在按新筛选范围查询' : `${coveragePercent}% 覆盖 · 未上报不计为 0`,
      tone: 'success',
      emphasis: 'primary'
    }] : [{
      label: '氢耗匹配纯氢里程',
      value: pending ? '—' : withUnit(formatKm(data?.hydrogenMatchedMileageKm), 'km'),
      note: unavailable ? '里程汇总暂不可用' : loading ? '正在汇总车辆日纯氢里程' : '纯氢里程＝总里程－纯电模式里程',
      tone: 'success',
      emphasis: 'primary'
    }, {
      label: '区间氢耗',
      value: pending || !data?.hydrogenDataDays ? '—' : withUnit(formatKm(data.periodHydrogenConsumptionKg), 'kg'),
      note: unavailable
        ? '氢耗汇总暂不可用'
        : loading
          ? '正在汇总质量下降'
          : data?.hydrogenDataDays
            ? `${formatKm(data.hydrogenConsumptionKgPer100Km)} kg/100km · ${data.hydrogenDataDays} 个有效车辆日`
            : '暂无通过质量校验的氢耗数据',
      tone: 'warning',
      emphasis: 'primary'
    }, {
      label: '百公里纯氢耗',
      value: pending || !data?.hydrogenDataDays ? '—' : withUnit(formatKm(data.hydrogenConsumptionKgPer100Km), 'kg/100km'),
      note: unavailable ? '氢耗效率暂不可用' : loading ? '正在计算氢耗效率' : `${data?.hydrogenDataDays ?? 0} 个有效车辆日`,
      tone: 'warning',
      emphasis: 'primary'
    }];
  return <WorkspaceMetricRail
    variant="queue"
    className="v2-mileage-summary"
    ariaLabel="里程查询统计信息"
    items={items}
    context={<span className="v2-mileage-summary-window">
      <small>统计窗口</small>
      <strong>{days} 天</strong>
      <em>{summaryRange}</em>
    </span>}
  />;
}

type HydrogenDayMetric = {
  consumptionKg: number;
  rateKgPer100Km?: number;
  socBalancedKg?: number;
  socBalancedRateKgPer100Km?: number;
  evidenceAvailable: boolean;
  qualityStatus?: string;
  algorithmVersion?: string;
};

type VehicleMileageMatrix = VehicleOption & {
  days: Map<string, number>;
  pureElectricDays: Map<string, number>;
  pureHydrogenDays: Map<string, number>;
  hydrogenDays: Map<string, HydrogenDayMetric>;
  sources: Map<string, string>;
  totalMileageKm?: number;
  totalPureElectricMileageKm?: number;
  totalPureHydrogenMileageKm?: number;
  totalHydrogenConsumptionKg?: number;
  totalHydrogenRateKgPer100Km?: number;
};

function rangeDates(dateFrom: string, dateTo: string) {
  const dates: string[] = [];
  const cursor = new Date(`${dateFrom}T00:00:00Z`);
  const end = new Date(`${dateTo}T00:00:00Z`);
  while (cursor <= end && dates.length < MAX_MILEAGE_RANGE_DAYS) {
    dates.push(cursor.toISOString().slice(0, 10));
    cursor.setUTCDate(cursor.getUTCDate() + 1);
  }
  return dates;
}

function dateLabel(date: string) {
  const [, month, day] = date.split('-');
  return `${Number(month)}/${Number(day)}`;
}

function MileageMatrixGuide({
  rows,
  view,
  hydrogenMetrics,
  onHydrogenMetricsChange
}: {
  rows: VehicleMileageMatrix[];
  view: MetricView;
  hydrogenMetrics: HydrogenMatrixMetric[];
  onHydrogenMetricsChange: (value: HydrogenMatrixMetric[]) => void;
}) {
  const vehiclesWithMileage = rows.filter((row) => row.days.size > 0).length;
  if (view === 'hydrogen') return <aside id="v2-mileage-matrix-guide" className="v2-mileage-matrix-guide is-hydrogen has-metric-selector" role="note" aria-label="氢耗矩阵读表说明">
    <div className="v2-mileage-matrix-guide-toolbar">
      <span className="v2-mileage-matrix-guide-title"><IconInfoCircle /><strong>本页 {vehiclesWithMileage} / {rows.length} 辆有数据</strong></span>
      <HydrogenMetricSelector value={hydrogenMetrics} onChange={onHydrogenMetricsChange} />
    </div>
    <div className="v2-mileage-metric-logic" aria-label="指标取值逻辑">
      <span><strong>里程</strong> 当日末累计里程－同源日基线</span>
      <span><strong>用氢量</strong> 有效工作段剩余氢量下降分段累计，加氢与噪声跳过</span>
      <span><strong>纯电里程</strong> 总里程－纯氢里程</span>
      <span><strong>纯氢里程</strong> 运行模式 0x02 的相邻里程差累计</span>
      <span><strong>百公里氢耗</strong> 有效用氢量÷纯氢里程×100</span>
      <span><strong>—</strong> 无有效数据或不满足计算条件</span>
    </div>
  </aside>;
  return <aside id="v2-mileage-matrix-guide" className="v2-mileage-matrix-guide" role="note" aria-label="里程矩阵读表说明">
    <span className="v2-mileage-matrix-guide-title is-desktop-guide"><IconInfoCircle /><strong>本页 {vehiclesWithMileage} / {rows.length} 辆有数据</strong></span>
    <span className="is-desktop-guide"><Tag color="blue" type="light" size="small">0 km</Tag>已上报、无里程增量</span>
    <span className="is-desktop-guide"><Tag color="grey" type="light" size="small">—</Tag>无可用里程</span>
    <span className="is-desktop-guide"><Tag color="blue" type="light" size="small">色阶</Tag>颜色越深、里程越高</span>
    <span className="is-desktop-guide is-mobile-hint">左右滑动查看日期 · 车牌与总里程固定</span>
    <span className="v2-mileage-matrix-guide-mobile" aria-label="移动端里程矩阵读表说明">
      <span className="is-mobile-hint"><IconInfoCircle /><strong>本页 {vehiclesWithMileage}/{rows.length} 辆有数据</strong> · 左右滑动日期</span>
      <span aria-label="0 公里表示已上报、无里程增量"><Tag color="blue" type="light" size="small">0 km</Tag>无增量</span>
      <span aria-label="横线表示无可用里程"><Tag color="grey" type="light" size="small">—</Tag>无数据</span>
      <span aria-label="颜色越深、里程越高"><Tag color="blue" type="light" size="small">色阶</Tag>深色更高</span>
    </span>
  </aside>;
}

function scrollMileageMatrixFromKeyboard(event: KeyboardEvent<HTMLDivElement>) {
  if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
  const scroller = event.currentTarget.querySelector<HTMLElement>('.semi-table-body');
  if (!scroller || scroller.scrollWidth <= scroller.clientWidth) return;
  const maximum = scroller.scrollWidth - scroller.clientWidth;
  const next = scroller.scrollLeft + (event.key === 'ArrowRight' ? 96 : -96);
  scroller.scrollLeft = Math.max(0, Math.min(maximum, next));
  event.preventDefault();
}

function matrixDailyMetricValue(row: VehicleMileageMatrix, date: string, metric: MatrixMetric) {
  switch (metric) {
    case 'mileage': return row.days.get(date);
    case 'consumption': return row.hydrogenDays.get(date)?.consumptionKg;
    case 'pureElectric': return row.pureElectricDays.get(date);
    case 'pureHydrogen': return row.pureHydrogenDays.get(date);
    case 'rate': return row.hydrogenDays.get(date)?.rateKgPer100Km;
  }
}

function matrixTotalMetricValue(row: VehicleMileageMatrix, metric: MatrixMetric) {
  switch (metric) {
    case 'mileage': return row.totalMileageKm;
    case 'consumption': return row.totalHydrogenConsumptionKg;
    case 'pureElectric': return row.totalPureElectricMileageKm;
    case 'pureHydrogen': return row.totalPureHydrogenMileageKm;
    case 'rate': return row.totalHydrogenRateKgPer100Km;
  }
}

function MatrixMetricHeader({ metric }: { metric: MatrixMetric }) {
  const meta = MATRIX_METRIC_META[metric];
  return <span className="v2-mileage-metric-header"><strong>{meta.label}</strong><small>{meta.unit}</small></span>;
}

function MatrixMetricValue({ value, metric, onEvidence }: { value?: number; metric: MatrixMetric; onEvidence?: () => void }) {
  if (value == null || !Number.isFinite(value)) return <>—</>;
  const content = <strong>{formatKm(value)} {MATRIX_METRIC_META[metric].unit}</strong>;
  if (!onEvidence) return content;
  return <button className="v2-hydrogen-evidence-trigger" type="button" title="查看计算公式、区间和原始报文标识" onClick={onEvidence}>{content}<small>可溯源</small></button>;
}

const MileageTable = memo(function MileageTable({ rows, dates, scrollRef, view, hydrogenMetrics, onOpenEvidence }: { rows: VehicleMileageMatrix[]; dates: string[]; scrollRef: RefObject<HTMLDivElement>; view: MetricView; hydrogenMetrics: HydrogenMatrixMetric[]; onOpenEvidence: (row: VehicleMileageMatrix, date: string) => void }) {
  const { columns, tableWidth } = useMemo(() => {
    let maxDailyMileage = 1;
    for (const row of rows) {
      for (const mileage of row.days.values()) maxDailyMileage = Math.max(maxDailyMileage, mileage);
    }
    const metrics: MatrixMetric[] = view === 'hydrogen' ? ['mileage', ...hydrogenMetrics] : ['mileage'];
    const metricsWidth = metrics.reduce((sum, metric) => sum + MATRIX_METRIC_META[metric].width, 0);
    return {
      columns: [
        { title: '车牌', dataIndex: 'plate', className: 'is-plate', width: 120, render: (_value: string, row: VehicleMileageMatrix) => <strong>{row.plate || '未绑定'}</strong> },
        ...dates.map((date) => ({
          title: dateLabel(date),
          dataIndex: `date:${date}`,
          className: 'is-date-group',
          onHeaderCell: () => ({ title: date, 'aria-label': `${date} 指标分组` }),
          children: metrics.map((metric) => {
            const meta = MATRIX_METRIC_META[metric];
            return {
              title: <MatrixMetricHeader metric={metric} />,
              dataIndex: `${date}:${metric}`,
              className: `is-number is-date is-metric-${metric}`,
              width: meta.width,
              onHeaderCell: () => ({ 'aria-label': `${date} ${meta.label} ${meta.unit}` }),
              onCell: (row?: VehicleMileageMatrix) => {
                const value = row ? matrixDailyMetricValue(row, date, metric) : undefined;
                const mileage = row?.days.get(date);
                const source = row?.sources.get(date);
                const intensity = metric === 'mileage' && mileage && mileage > 0 ? .035 + mileage / maxDailyMileage * .13 : 0;
                return {
                  className: `is-number is-date is-metric-${metric}${value != null ? ' is-daily' : ' is-empty'}`,
                  title: value != null ? `${meta.label} ${formatKm(value)} ${meta.unit} · 来源：${source || '—'}` : `${meta.label}无可用数据`,
                  'aria-label': value != null
                    ? `${date}，${meta.label} ${formatKm(value)} ${meta.unit}，来源 ${source || '未知'}`
                    : `${date}，${meta.label}无可用数据`,
                  style: intensity ? { backgroundColor: `rgba(37, 99, 235, ${intensity.toFixed(3)})` } : undefined
                };
              },
              render: (_value: unknown, row: VehicleMileageMatrix) => {
                const traceable = (metric === 'consumption' || metric === 'rate') && row.hydrogenDays.get(date)?.evidenceAvailable;
                return <MatrixMetricValue value={matrixDailyMetricValue(row, date, metric)} metric={metric} onEvidence={traceable ? () => onOpenEvidence(row, date) : undefined} />;
              }
            };
          })
        })),
        {
          title: '区间合计',
          dataIndex: 'period',
          className: 'is-total is-total-group',
          children: metrics.map((metric) => {
            const meta = MATRIX_METRIC_META[metric];
            return {
              title: <MatrixMetricHeader metric={metric} />,
              dataIndex: `period:${metric}`,
              className: `is-number is-total is-metric-${metric}`,
              width: meta.width,
              onHeaderCell: () => ({ 'aria-label': `区间${meta.label} ${meta.unit}` }),
              onCell: (row?: VehicleMileageMatrix) => {
                const value = row ? matrixTotalMetricValue(row, metric) : undefined;
                return {
                  className: `is-number is-period is-total is-metric-${metric}${value == null ? ' is-empty' : ''}`,
                  'aria-label': value == null
                    ? metric === 'mileage' ? '区间总里程，无可用里程' : `区间${meta.label}，无可用数据`
                    : `区间${meta.label}，${formatKm(value)} ${meta.unit}`
                };
              },
              render: (_value: unknown, row: VehicleMileageMatrix) => <MatrixMetricValue value={matrixTotalMetricValue(row, metric)} metric={metric} />
            };
          })
        }
      ],
      tableWidth: 120 + (dates.length + 1) * metricsWidth
    };
  }, [dates, hydrogenMetrics, onOpenEvidence, rows, view]);
  return <div
    className={`v2-mileage-table-wrap${view === 'hydrogen' ? ' is-hydrogen-view' : ''}`}
    ref={scrollRef}
    role="region"
    aria-label={`车辆每日${view === 'mileage' ? '里程' : '氢耗'}矩阵，可横向滚动查看日期`}
    aria-describedby="v2-mileage-matrix-guide"
    tabIndex={0}
    onKeyDown={scrollMileageMatrixFromKeyboard}
    style={{ '--v2-mileage-mobile-table-width': `${Math.max(556, tableWidth)}px` } as CSSProperties}
  >
      <Table className="v2-mileage-table" columns={columns} dataSource={rows} rowKey="vin" pagination={false} scroll={{ x: Math.max(556, tableWidth) }} />
    </div>;
});

type HydrogenEvidenceTarget = { vin: string; plate: string; date: string };

function evidenceNumber(value?: number | null, digits = 3) {
  if (value == null || !Number.isFinite(value)) return '—';
  return value.toLocaleString('zh-CN', { minimumFractionDigits: digits, maximumFractionDigits: digits });
}

function HydrogenEvidenceSheet({ target, onClose }: { target?: HydrogenEvidenceTarget; onClose: () => void }) {
  const evidence = useQuery<HydrogenDailyEvidence>({
    queryKey: ['hydrogen-daily-evidence', target?.vin, target?.date],
    queryFn: ({ signal }) => api.hydrogenDailyEvidence(target!.vin, target!.date, signal),
    enabled: Boolean(target),
    staleTime: CURRENT_DAY_REFRESH_MS,
    gcTime: QUERY_MEMORY.summaryGcTime
  });
  const data = evidence.data;
  return <WorkspaceSideSheet
    className="v2-hydrogen-evidence-sheet"
    variant="detail"
    visible={Boolean(target)}
    ariaLabel="氢耗计算溯源"
    closeLabel="关闭氢耗计算溯源"
    dialogId="v2-hydrogen-evidence-sheet"
    title={`${target?.plate || target?.vin || '车辆'} · ${target?.date || ''}`}
    description="每日结果、计算参数、有效区间及原始报文标识"
    icon={<IconInfoCircle />}
    badge={data?.qualityStatus || '读取中'}
    badgeColor={data?.qualityStatus === 'OK' ? 'green' : data?.qualityStatus === 'SUSPECT' ? 'orange' : 'grey'}
    width="min(760px, 94vw)"
    summaryItems={data ? [
      { label: '物理耗氢', value: `${evidenceNumber(data.rawConsumptionKg)} kg`, detail: 'NIST压力—质量差分段累计', tone: 'primary' },
      { label: 'SOC平衡氢耗', value: data.socBalancedConsumptionKg == null ? '未计算' : `${evidenceNumber(data.socBalancedConsumptionKg)} kg`, detail: data.parameters.batteryCapacityKWh > 0 ? `电池 ${evidenceNumber(data.parameters.batteryCapacityKWh, 2)} kWh` : '缺少经确认的电池容量', tone: 'warning' },
      { label: '混动里程', value: `${evidenceNumber(data.mixedMileageKm)} km`, detail: `${data.validSegmentCount} 个有效区间`, tone: 'success' }
    ] : []}
    footerNote="物理耗氢与SOC修正值分开保存；点击区间中的报文ID可复制后到原始报文查询中检索。"
    primaryAction={{ label: '关闭', onClick: onClose }}
    onCancel={onClose}
  >
    {evidence.isLoading ? <PanelLoading title="正在读取计算证据" description="加载每日参数与区间明细。" /> : null}
    {evidence.error ? <InlineError message={evidence.error instanceof Error ? evidence.error.message : '氢耗计算证据加载失败'} onRetry={() => evidence.refetch()} /> : null}
    {data ? <div className="v2-hydrogen-evidence-content">
      <section>
        <header><strong>计算公式与口径</strong><Tag color="blue" type="light" size="small">{data.algorithmVersion}</Tag></header>
        <code>m = P × 1000 × 0.00201588 × V ÷ (8.314472 × Tₖ × Zₙᵢₛₜ)</code>
        <code>区间物理耗氢 = 起始质量 − 结束质量</code>
        <code>SOC平衡氢耗 = 物理耗氢 + 电池容量 × (起始SOC − 结束SOC) ÷ 100 ÷ {evidenceNumber(data.parameters.hydrogenEnergyKWhPerKg, 1)}</code>
        <p>{data.qualityReason || '数据通过完整性、运行状态、加氢、充电、异常跳变和端点中位数校验。'}</p>
      </section>
      <section>
        <header><strong>参数与质量计数</strong></header>
        <dl className="v2-hydrogen-evidence-parameters">
          <div><dt>上电稳定</dt><dd>{data.parameters.powerOnDelaySeconds}s</dd></div>
          <div><dt>下电提前</dt><dd>{data.parameters.powerOffLeadSeconds}s</dd></div>
          <div><dt>加氢识别</dt><dd>+{data.parameters.refuelRiseMpa}MPa / {data.parameters.refuelSustainSeconds}s</dd></div>
          <div><dt>纯电异常</dt><dd>-{data.parameters.pureElectricDropMpa}MPa / {data.parameters.pureElectricWindowSeconds}s</dd></div>
          <div><dt>样本</dt><dd>{data.sampleCount}</dd></div>
          <div><dt>加氢 / 充电</dt><dd>{data.refuelCount} / {data.chargeCount}</dd></div>
          <div><dt>无效区间</dt><dd>{data.invalidSegmentCount}</dd></div>
          <div><dt>计算时间</dt><dd>{data.calculatedAt}</dd></div>
        </dl>
      </section>
      <section>
        <header><strong>区间计算证据</strong><small>{data.intervals.length} 个区间</small></header>
        <div className="v2-hydrogen-evidence-intervals">
          {data.intervals.map((interval) => <article key={`${interval.index}-${interval.startTime}`} className={`is-${interval.qualityStatus.toLowerCase()}`}>
            <header><span><Tag color={interval.type === 'MIXED' ? 'green' : 'blue'} type="light" size="small">{interval.type === 'MIXED' ? '混动' : '纯电'}</Tag><strong>区间 {interval.index}</strong></span><Tag color={interval.qualityStatus === 'OK' ? 'green' : 'orange'} type="light" size="small">{interval.qualityStatus}</Tag></header>
            <p>{interval.startTime} → {interval.endTime} · {interval.sampleCount} 条样本</p>
            <div className="v2-hydrogen-evidence-metrics">
              <span><small>压力</small><strong>{evidenceNumber(interval.startPressureMpa)} → {evidenceNumber(interval.endPressureMpa)} MPa</strong></span>
              <span><small>温度</small><strong>{evidenceNumber(interval.startTemperatureC, 1)} → {evidenceNumber(interval.endTemperatureC, 1)} ℃</strong></span>
              <span><small>质量</small><strong>{evidenceNumber(interval.startMassKg)} → {evidenceNumber(interval.endMassKg)} kg</strong></span>
              <span><small>物理耗氢</small><strong>{evidenceNumber(interval.rawHydrogenConsumptionKg)} kg</strong></span>
              <span><small>SOC</small><strong>{evidenceNumber(interval.startSocPercent, 1)} → {evidenceNumber(interval.endSocPercent, 1)} %</strong></span>
              <span><small>区间里程</small><strong>{evidenceNumber(interval.mileageKm)} km</strong></span>
              <span><small>电池折氢</small><strong>{evidenceNumber(interval.batteryEquivalentKg)} kg</strong></span>
              <span><small>SOC平衡氢耗</small><strong>{evidenceNumber(interval.socBalancedConsumptionKg)} kg</strong></span>
            </div>
            <div className="v2-hydrogen-evidence-events">
              <button type="button" onClick={() => navigator.clipboard?.writeText(interval.startEventId)}><small>起始报文</small><code>{interval.startEventId || '—'}</code></button>
              <button type="button" onClick={() => navigator.clipboard?.writeText(interval.endEventId)}><small>结束报文</small><code>{interval.endEventId || '—'}</code></button>
            </div>
            {interval.qualityReason ? <p className="is-reason">{interval.qualityReason}</p> : null}
          </article>)}
        </div>
      </section>
    </div> : null}
  </WorkspaceSideSheet>;
}

export default function StatisticsPage() {
  const { session } = usePlatformSession();
  const [searchParams, setSearchParams] = useSearchParams();
  const monitorReturn = monitorReturnFromParams(searchParams);
  const vehicleReturn = vehicleReturnFromParams(searchParams);
  const mobileLayout = useMobileLayout();
  const [draft, setDraft] = useState<Criteria>(() => initialCriteria(searchParams));
  const [criteria, setCriteria] = useState<Criteria>(() => initialCriteria(searchParams));
  const [page, setPage] = useState(1);
  const [isExporting, setIsExporting] = useState(false);
  const [exportFeedback, setExportFeedback] = useState('');
  const [exportProgress, setExportProgress] = useState<ExportProgress>();
  const [validationError, setValidationError] = useState('');
  const [filtersCollapsed, setFiltersCollapsed] = useState(true);
  const [metricView, setMetricView] = useState<MetricView>('mileage');
  const [hydrogenMatrixMetrics, setHydrogenMatrixMetrics] = useState<HydrogenMatrixMetric[]>(DEFAULT_HYDROGEN_MATRIX_METRICS);
  const [hydrogenEvidenceTarget, setHydrogenEvidenceTarget] = useState<HydrogenEvidenceTarget>();
  const hydrogenViewAllowed = session.role !== 'customer' && session.userType !== 'customer';
  const mobileFiltersOpen = mobileLayout && !filtersCollapsed;
  const exportControllerRef = useRef<AbortController | null>(null);
  const pageRef = useRef<HTMLDivElement>(null);
  const tableScrollRef = useRef<HTMLDivElement>(null);
  const openHydrogenEvidence = useCallback((row: VehicleMileageMatrix, date: string) => {
    setHydrogenEvidenceTarget({ vin: row.vin, plate: row.plate, date });
  }, []);
  const mountedRef = useRef(true);
  useEffect(() => {
    mountedRef.current = true;
    return () => {
      mountedRef.current = false;
      exportControllerRef.current?.abort();
    };
  }, []);
  useEffect(() => {
    if (!hydrogenViewAllowed && metricView !== 'mileage') setMetricView('mileage');
  }, [hydrogenViewAllowed, metricView]);
  useEffect(() => {
    const page = pageRef.current;
    if (!page) return;
    const redirectWheelToTable = (event: WheelEvent) => {
      if (window.matchMedia('(max-width: 680px)').matches || event.ctrlKey || event.shiftKey || Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
      if (event.target instanceof Element && event.target.closest('input,button,select,textarea,[role="dialog"],[role="listbox"]')) return;
      const scroller = tableScrollRef.current;
      if (!scroller) return;
      const maxScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
      const nextScrollTop = Math.max(0, Math.min(maxScrollTop, scroller.scrollTop + event.deltaY));
      if (nextScrollTop === scroller.scrollTop) return;
      scroller.scrollTop = nextScrollTop;
      event.preventDefault();
    };
    page.addEventListener('wheel', redirectWheelToTable, { passive: false });
    return () => page.removeEventListener('wheel', redirectWheelToTable);
  }, []);
  const hasVehicles = criteria.vehicles.length > 0;
  const criteriaError = mileageDateRangeError(criteria);
  const fleetParams = useMemo(() => new URLSearchParams({ limit: String(PAGE_SIZE), offset: String((page - 1) * PAGE_SIZE), bindingStatus: 'bound' }), [page]);
  const fleetVehicles = useQuery({
    queryKey: ['mileage-fleet-page', fleetParams.toString()],
    queryFn: ({ signal }) => api.vehicleCoverage(fleetParams, signal),
    enabled: !hasVehicles,
    staleTime: 60_000,
    gcTime: QUERY_MEMORY.summaryGcTime
  });
  const displayVehicles = useMemo<VehicleOption[]>(() => hasVehicles
    ? criteria.vehicles.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
    : (fleetVehicles.data?.items ?? []).map((vehicle) => ({ vin: vehicle.vin, plate: vehicle.plate })), [criteria.vehicles, fleetVehicles.data?.items, hasVehicles, page]);
  const statisticsQuery = useMemo(() => mileageQuery(criteria, -1), [criteria]);
  const statisticsScope = JSON.stringify(statisticsQuery);
  const rowsCriteria = useMemo(() => ({ ...criteria, vehicles: displayVehicles }), [criteria, displayVehicles]);
  const rowsQuery = useMemo(() => mileageQuery(rowsCriteria, 0), [rowsCriteria]);
  const currentDayRange = !criteriaError && mileageRangeContainsDate(criteria);
  const currentDayRefreshInterval = currentDayRange ? CURRENT_DAY_REFRESH_MS : false;
  const statistics = useQuery({
    queryKey: ['mileage-statistics', statisticsScope],
    queryFn: ({ signal }) => api.mileageStatistics(statisticsQuery, signal),
    enabled: !criteriaError,
    staleTime: CURRENT_DAY_REFRESH_MS,
    gcTime: QUERY_MEMORY.summaryGcTime,
    refetchInterval: currentDayRefreshInterval,
    refetchIntervalInBackground: false
  });
  const mileage = useQuery<Page<DailyMileageRow>>({
    queryKey: ['daily-mileage-query', statisticsScope, rowsQuery],
    queryFn: ({ signal }) => api.dailyMileage(rowsQuery, signal),
    enabled: !criteriaError && displayVehicles.length > 0,
    staleTime: CURRENT_DAY_REFRESH_MS,
    gcTime: QUERY_MEMORY.highVolumeGcTime,
    placeholderData: retainPreviousPageWithinScope<Page<DailyMileageRow>>(statisticsScope, 2),
    refetchInterval: currentDayRefreshInterval,
    refetchIntervalInBackground: false
  });
  const dates = useMemo(() => criteriaError ? [] : rangeDates(criteria.dateFrom, criteria.dateTo), [criteria.dateFrom, criteria.dateTo, criteriaError]);
  const mileageByVin = useMemo(() => {
    const index = new Map<string, {
      plate: string;
      days: Map<string, number>;
      pureElectricDays: Map<string, number>;
      pureHydrogenDays: Map<string, number>;
      hydrogenDays: Map<string, HydrogenDayMetric>;
      sources: Map<string, string>;
    }>();
    for (const row of mileage.data?.items ?? []) {
      let entry = index.get(row.vin);
      if (!entry) {
        entry = { plate: row.plate || '', days: new Map(), pureElectricDays: new Map(), pureHydrogenDays: new Map(), hydrogenDays: new Map(), sources: new Map() };
        index.set(row.vin, entry);
      } else if (!entry.plate && row.plate) entry.plate = row.plate;
      entry.days.set(row.date, row.dailyMileageKm);
      const pureHydrogenMileage = Math.max(0, Math.min(row.dailyMileageKm, row.pureHydrogenMileageKm ?? 0));
      entry.pureHydrogenDays.set(row.date, pureHydrogenMileage);
      entry.pureElectricDays.set(row.date, Math.max(0, row.dailyMileageKm - pureHydrogenMileage));
      if (row.hydrogenConsumptionKg != null) {
        entry.hydrogenDays.set(row.date, {
          consumptionKg: row.hydrogenConsumptionKg,
          rateKgPer100Km: row.hydrogenConsumptionKgPer100Km ?? undefined,
          socBalancedKg: row.hydrogenSocBalancedKg ?? undefined,
          socBalancedRateKgPer100Km: row.hydrogenSocBalancedKgPer100Km ?? undefined,
          evidenceAvailable: row.hydrogenEvidenceAvailable === true,
          qualityStatus: row.hydrogenQualityStatus,
          algorithmVersion: row.hydrogenAlgorithmVersion
        });
      }
      entry.sources.set(row.date, row.source);
    }
    return index;
  }, [mileage.data?.items]);
  const rankingByVin = useMemo(() => new Map((statistics.data?.ranking ?? []).map((row) => [row.vin, row])), [statistics.data?.ranking]);
  const matrixRows = useMemo(() => displayVehicles.map((vehicle) => {
    const daily = mileageByVin.get(vehicle.vin);
    const ranking = rankingByVin.get(vehicle.vin);
    const days = daily?.days ?? new Map<string, number>();
    const pureElectricDays = daily?.pureElectricDays ?? new Map<string, number>();
    const pureHydrogenDays = daily?.pureHydrogenDays ?? new Map<string, number>();
    const hydrogenDays = daily?.hydrogenDays ?? new Map<string, HydrogenDayMetric>();
    const sources = daily?.sources ?? new Map<string, string>();
    let dailyTotal = 0;
    let hydrogenTotal = 0;
    let hydrogenRatedMileage = 0;
    let pureElectricTotal = 0;
    let pureHydrogenTotal = 0;
    for (const value of days.values()) dailyTotal += value;
    for (const value of pureElectricDays.values()) pureElectricTotal += value;
    for (const value of pureHydrogenDays.values()) pureHydrogenTotal += value;
    for (const [date, value] of hydrogenDays) {
      const matchedMileage = pureHydrogenDays.get(date) ?? 0;
      if (matchedMileage <= 0) continue;
      hydrogenTotal += value.consumptionKg;
      hydrogenRatedMileage += matchedMileage;
    }
    return {
      ...vehicle,
      plate: vehicle.plate || daily?.plate || ranking?.plate || '',
      days,
      pureElectricDays,
      pureHydrogenDays,
      hydrogenDays,
      sources,
      totalMileageKm: days.size ? ranking?.mileageKm ?? dailyTotal : undefined,
      totalPureElectricMileageKm: pureElectricDays.size ? pureElectricTotal : undefined,
      totalPureHydrogenMileageKm: pureHydrogenDays.size ? pureHydrogenTotal : undefined,
      totalHydrogenConsumptionKg: hydrogenDays.size ? hydrogenTotal : undefined,
      totalHydrogenRateKgPer100Km: hydrogenDays.size && hydrogenRatedMileage > 0 ? hydrogenTotal * 100 / hydrogenRatedMileage : undefined
    };
  }), [displayVehicles, mileageByVin, rankingByVin]);
  const totalVehicles = hasVehicles ? criteria.vehicles.length : fleetVehicles.data?.total ?? 0;
  const totalPages = Math.max(1, Math.ceil(totalVehicles / PAGE_SIZE));
  const applyDraft = () => {
    const error = mileageDateRangeError(draft);
    setValidationError(error);
    if (error) return;
    setPage(1); setExportFeedback(''); setCriteria(draft); setSearchParams(preserveVehicleReturn(preserveMonitorReturn(mileageRouteParams(draft), monitorReturn), vehicleReturn), { replace: true }); setFiltersCollapsed(true);
  };
  const resetDraft = () => {
    setDraft(initialCriteria(new URLSearchParams()));
    setValidationError('');
  };
  const submit = (event: FormEvent) => { event.preventDefault(); applyDraft(); };
  const setRange = (range: { dateFrom: string; dateTo: string }) => { const next = { ...draft, ...range }; setPage(1); setExportFeedback(''); setValidationError(''); setDraft(next); setCriteria(next); setSearchParams(preserveVehicleReturn(preserveMonitorReturn(mileageRouteParams(next), monitorReturn), vehicleReturn), { replace: true }); setFiltersCollapsed(true); };
  const closeMobileFilters = () => {
    setDraft(criteria);
    setValidationError('');
    setFiltersCollapsed(true);
  };
  const toggleFilters = () => {
    if (!mobileLayout) {
      setFiltersCollapsed((value) => !value);
      return;
    }
    if (mobileFiltersOpen) {
      closeMobileFilters();
      return;
    }
    setDraft(criteria);
    setValidationError('');
    setFiltersCollapsed(false);
  };
  const todayRange = defaultWindow(1);
  const yesterdayRange = defaultWindow(1, 1);
  const sevenDayRange = defaultWindow(7);
  const thirtyDayRange = defaultWindow(30);
  const ninetyDayRange = defaultWindow(90);
  const quickRanges = [
    { label: '今天', range: todayRange },
    { label: '昨天', range: yesterdayRange },
    { label: '近 7 天', range: sevenDayRange },
    { label: '近 30 天', range: thirtyDayRange },
    { label: '近 90 天', range: ninetyDayRange }
  ];
  const refreshing = statistics.isFetching || mileage.isFetching || fleetVehicles.isFetching;
  const resultsLoading = fleetVehicles.isLoading || mileage.isLoading || mileage.isPlaceholderData;
  // Fleet statistics are supplementary to the paged mileage matrix. A large
  // authorized fleet may time out while the current page of vehicle rows is
  // still available, so keep the summary-level unavailable state from hiding
  // otherwise usable daily mileage data.
  const resultsError = mileage.error ?? (!hasVehicles ? fleetVehicles.error : undefined);
  const exportPercent = exportProgress?.total
    ? Math.min(100, Math.round((exportProgress.completed ?? 0) / exportProgress.total * 100))
    : undefined;

  const exportExcel = async () => {
    if (exportControllerRef.current || !totalVehicles || criteriaError) return;
    const controller = new AbortController();
    exportControllerRef.current = controller;
    const reportProgress = (progress: ExportProgress) => {
      if (mountedRef.current && !controller.signal.aborted) setExportProgress(progress);
    };
    setIsExporting(true);
    setExportFeedback('');
    let exportStream: MileageExportStream | undefined;
    try {
      let vehicles: VehicleOption[];
      if (criteria.vehicles.length) {
        const archiveByVIN = new Map<string, VehicleOption>();
        reportProgress({ label: '正在读取车辆档案', completed: 0, total: criteria.vehicles.length });
        for (let start = 0; start < criteria.vehicles.length; start += BATCH_RESOLVE_SIZE) {
          const batch = criteria.vehicles.slice(start, start + BATCH_RESOLVE_SIZE);
          const result = await api.vehicleCoverage(new URLSearchParams({
            keywords: batch.map((vehicle) => vehicle.vin).join(','),
            limit: String(batch.length),
            offset: '0',
            bindingStatus: 'bound'
          }), controller.signal);
          for (const vehicle of result.items) archiveByVIN.set(vehicle.vin, {
            vin: vehicle.vin,
            plate: vehicle.plate,
            brandName: vehicle.brandName,
            modelName: vehicle.modelName
          });
          reportProgress({ label: '正在读取车辆档案', completed: Math.min(start + batch.length, criteria.vehicles.length), total: criteria.vehicles.length });
        }
        vehicles = criteria.vehicles.map((vehicle) => ({ ...vehicle, ...archiveByVIN.get(vehicle.vin), vin: vehicle.vin }));
      } else {
        vehicles = [];
        let offset = 0;
        reportProgress({ label: '正在读取车辆档案', completed: 0, total: totalVehicles });
        while (offset < totalVehicles) {
          const result = await api.vehicleCoverage(new URLSearchParams({ limit: String(EXPORT_VEHICLE_PAGE_SIZE), offset: String(offset), bindingStatus: 'bound' }), controller.signal);
          vehicles.push(...result.items.map((vehicle) => ({
            vin: vehicle.vin,
            plate: vehicle.plate,
            brandName: vehicle.brandName,
            modelName: vehicle.modelName
          })));
          reportProgress({ label: '正在读取车辆档案', completed: vehicles.length, total: result.total });
          if (!result.items.length) break;
          offset += result.items.length;
          if (offset >= result.total) break;
        }
      }
      const plateByVin = new Map(vehicles.filter((vehicle) => vehicle.plate).map((vehicle) => [vehicle.vin, vehicle.plate]));
      exportStream = createMileageExportStream({
        dateFrom: criteria.dateFrom,
        dateTo: criteria.dateTo,
        dates,
        sources: criteria.sources.filter((source) => source.enabled),
        exportedAt: new Date()
      }, controller.signal);
      const vehicleBatches = criteria.vehicles.length
        ? Array.from({ length: Math.ceil(vehicles.length / EXPORT_VIN_BATCH_SIZE) }, (_, index) => vehicles.slice(index * EXPORT_VIN_BATCH_SIZE, (index + 1) * EXPORT_VIN_BATCH_SIZE))
        : [[] as VehicleOption[]];
      const exportWindows = vehicleBatches.flatMap((vehicleBatch, batchIndex) => mileageExportDateWindows(
        criteria.dateFrom,
        criteria.dateTo,
        vehicleBatch.length || vehicles.length
      ).map((window) => ({ vehicleBatch, batchIndex, window })));
      let completedWindows = 0;
      for (const { vehicleBatch, batchIndex, window } of exportWindows) {
        let offset = 0;
        const batchLabel = vehicleBatches.length > 1 ? ` · 车辆批次 ${batchIndex + 1}/${vehicleBatches.length}` : '';
        const mileageLabel = `正在读取里程数据（${window.dateFrom} 至 ${window.dateTo}${batchLabel}）`;
        reportProgress({ label: mileageLabel, completed: completedWindows, total: exportWindows.length });
        while (true) {
          const query = mileageQuery({ ...criteria, ...window, vehicles: vehicleBatch }, offset);
          const result = await api.dailyMileage(query, controller.signal);
          for (const row of result.items) if (row.plate) plateByVin.set(row.vin, row.plate);
          exportStream.appendRows(result.items);
          offset += result.items.length;
          if (!result.items.length || offset >= result.total) break;
        }
        completedWindows++;
        reportProgress({ label: mileageLabel, completed: completedWindows, total: exportWindows.length });
      }
      vehicles = vehicles.map((vehicle) => ({ ...vehicle, plate: vehicle.plate || plateByVin.get(vehicle.vin) || '' }));
      reportProgress({ label: '正在后台生成 Excel 文件' });
      await exportStream.finish(vehicles);
      exportStream = undefined;
      if (mountedRef.current) setExportFeedback(`已导出 ${vehicles.length} 辆车`);
    } catch (error) {
      if (mountedRef.current) {
        setExportFeedback(controller.signal.aborted
          ? '已取消导出'
          : error instanceof Error ? `导出失败：${error.message}` : '导出失败，请稍后重试');
      }
    } finally {
      exportStream?.dispose();
      if (exportControllerRef.current === controller) exportControllerRef.current = null;
      if (mountedRef.current) {
        setIsExporting(false);
        setExportProgress(undefined);
      }
    }
  };

  const cancelExport = () => {
    if (!exportControllerRef.current || exportControllerRef.current.signal.aborted) return;
    setExportProgress({ label: '正在取消导出' });
    exportControllerRef.current.abort();
  };

  const rangeSummary = criteria.vehicles.length ? `已选 ${criteria.vehicles.length} 辆 · ${inclusiveDays(criteria.dateFrom, criteria.dateTo)} 天` : `全部车辆 · ${inclusiveDays(criteria.dateFrom, criteria.dateTo)} 天`;
  const filterForm = <form className="v2-mileage-filter" onSubmit={submit}>
    <VehicleMultiSelect value={draft.vehicles} onChange={(vehicles) => setDraft((current) => ({ ...current, vehicles }))} />
    <label className="v2-mileage-date-field">
      <span id="v2-mileage-date-range-label">日期范围</span>
      <DatePicker
        className="v2-mileage-date-range"
        type="dateRange"
        density="compact"
        format="yyyy-MM-dd"
        value={[draft.dateFrom, draft.dateTo]}
        placeholder={['开始日期', '结束日期']}
        showClear={false}
        onChangeWithDateFirst
        aria-labelledby="v2-mileage-date-range-label"
        onChange={(value, formattedValue) => {
          const range = datePickerRange(value, formattedValue);
          if (range) setDraft((current) => ({ ...current, ...range }));
        }}
      />
    </label>
    <Button className="v2-primary-button v2-mileage-inline-submit" theme="solid" htmlType="submit">查询</Button>
    <SourceStrategy value={draft.sources} onChange={(sources) => setDraft((current) => ({ ...current, sources }))} />
    <MileageRangeShortcuts value={draft} ranges={quickRanges} onChange={setRange} />
  </form>;
  const filterValidation = validationError || criteriaError ? <p className="v2-mileage-validation" role="alert">{validationError || criteriaError}</p> : null;

  return <div className="v2-mileage-page" ref={pageRef}>
    <MonitorReturnBar />
    <div className="v2-mileage-discovery-shell">
      {mobileLayout ? <div className="v2-mileage-mobile-discovery">
        <MobileFilterToggle
          title="里程范围"
          summary={rangeSummary}
          expanded={mobileFiltersOpen}
          controls="v2-mileage-filter-panel"
          expandedLabel="关闭"
          collapsedLabel="修改"
          onToggle={toggleFilters}
        />
        {hydrogenViewAllowed ? <MetricViewSwitch value={metricView} onChange={setMetricView} /> : null}
        <SummaryRail data={statistics.data} criteria={criteria} fleetTotal={fleetVehicles.data?.total} loading={statistics.isLoading} view={metricView} unavailable={statistics.isError} />
        <MobileFilterSheet
          className="v2-mileage-filter-sidesheet"
          visible={mobileFiltersOpen}
          height="min(82dvh, 690px)"
          ariaLabel="里程范围筛选"
          dialogId="v2-mileage-filter-panel"
          closeLabel="关闭里程范围筛选"
          title="里程范围"
          description="选择车辆、自然日与数据源"
          onCancel={closeMobileFilters}
          secondaryAction={{ label: '重置条件', onClick: resetDraft }}
          primaryAction={{ label: '应用并查询', onClick: applyDraft }}
        >
          <MobileFilterSheetSection ariaLabel="里程查询条件" title="查询范围" description="支持批量粘贴最多 50,000 辆，按自然日比较优先数据源">
            {filterForm}
          </MobileFilterSheetSection>
          {filterValidation}
        </MobileFilterSheet>
      </div> : <WorkspaceFilterPanel
        className="v2-mileage-query-panel"
        title="里程范围"
        description="车牌、自然日与里程数据源策略"
        mobileSummary={rangeSummary}
        expanded={!filtersCollapsed}
        status={`${criteria.vehicles.length ? `${criteria.vehicles.length} 辆` : '全部授权车辆'} · ${inclusiveDays(criteria.dateFrom, criteria.dateTo)} 天`}
        statusColor={criteria.vehicles.length ? 'blue' : 'grey'}
        collapsedLabel="修改"
        onToggle={toggleFilters}
      >
        {filterForm}
        {filterValidation}
        {hydrogenViewAllowed ? <MetricViewSwitch value={metricView} onChange={setMetricView} /> : null}
        <SummaryRail data={statistics.data} criteria={criteria} fleetTotal={fleetVehicles.data?.total} loading={statistics.isLoading} view={metricView} unavailable={statistics.isError} />
      </WorkspaceFilterPanel>}
    </div>
    <Card className="v2-mileage-results" bodyStyle={{ padding: 0 }}>
      <WorkspacePanelHeader
        eyebrow={metricView === 'mileage' ? '每日里程' : '每日氢耗'}
        tone={metricView === 'mileage' ? 'primary' : 'health'}
        title={metricView === 'mileage' ? '车辆每日里程' : '车辆每日氢耗'}
        description={`${criteria.dateFrom} 至 ${criteria.dateTo}`}
        meta={<span className="v2-workspace-result-meta"><Tag color="blue" type="light" size="small">{hasVehicles ? `${totalVehicles} 辆` : `${displayVehicles.length} / ${totalVehicles} 辆`}</Tag><span>{dates.length} 个自然日</span></span>}
        actionsClassName="v2-mileage-result-actions"
        actions={<><Button className="is-refresh" theme="borderless" aria-label="刷新里程数据" icon={<IconRefresh />} onClick={() => { statistics.refetch(); mileage.refetch(); if (!hasVehicles) fleetVehicles.refetch(); }} disabled={refreshing}>{refreshing ? '更新中' : '刷新'}</Button><Button theme="light" aria-label={isExporting ? '取消导出' : '导出 Excel'} icon={isExporting ? <IconClose /> : <IconDownload />} onClick={isExporting ? cancelExport : exportExcel} disabled={!totalVehicles || Boolean(criteriaError)}>{isExporting ? '取消导出' : '导出 Excel'}</Button></>}
      />
      {exportProgress ? <div className="v2-mileage-export-progress" role="progressbar" aria-label={exportProgress.label} aria-valuemin={0} aria-valuemax={100} aria-valuenow={exportPercent}>
        <span><strong>{exportProgress.label}</strong><small>{exportPercent == null ? '处理中' : `${exportPercent}%`}</small></span>
        {exportPercent == null
          ? <Spin className="v2-mileage-export-spinner" size="small" />
          : <Progress className="v2-mileage-export-bar" percent={exportPercent} showInfo={false} size="small" strokeLinecap="round" aria-label={`${exportProgress.label} ${exportPercent}%`} />}
      </div> : null}
      {resultsError ? <InlineError message={resultsError instanceof Error ? resultsError.message : '里程数据加载失败'} onRetry={() => { statistics.refetch(); mileage.refetch(); if (!hasVehicles) fleetVehicles.refetch(); }} /> : null}
      {!resultsError && !resultsLoading && displayVehicles.length ? <MileageMatrixGuide rows={matrixRows} view={metricView} hydrogenMetrics={hydrogenMatrixMetrics} onHydrogenMetricsChange={setHydrogenMatrixMetrics} /> : null}
      {!resultsError && (resultsLoading ? <PanelLoading className="v2-mileage-loading" title={`正在查询${metricView === 'mileage' ? '里程' : '氢耗'}`} description="新筛选范围返回前不会展示上一范围的数据。" /> : displayVehicles.length ? <MileageTable rows={matrixRows} dates={dates} scrollRef={tableScrollRef} view={metricView} hydrogenMetrics={hydrogenMatrixMetrics} onOpenEvidence={openHydrogenEvidence} /> : null)}
      {!resultsError && !resultsLoading && !displayVehicles.length ? <PanelEmpty className="v2-mileage-empty" title="当前没有可展示的车辆" description="选择车牌或调整车辆授权范围后重试。" /> : null}
      <footer>{totalVehicles > PAGE_SIZE ? <TablePagination page={page} totalPages={totalPages} info={`${hasVehicles ? '已选择' : '共'} ${totalVehicles.toLocaleString('zh-CN')} 辆 · 每页 ${PAGE_SIZE} 辆${exportFeedback ? ` · ${exportFeedback}` : ''}`} disabled={mileage.isFetching || (!hasVehicles && fleetVehicles.isFetching)} onPageChange={setPage} /> : <span className="v2-table-pagination-info">{hasVehicles ? '已选择' : '共'} {totalVehicles.toLocaleString('zh-CN')} 辆车辆{exportFeedback ? ` · ${exportFeedback}` : ''}</span>}</footer>
    </Card>
    <HydrogenEvidenceSheet target={hydrogenEvidenceTarget} onClose={() => setHydrogenEvidenceTarget(undefined)} />
    <footer className="v2-mileage-evidence"><span>数据更新时间：{statistics.data?.asOf || '—'}</span><span>来源优先级：{criteria.sources.filter((source) => source.enabled).map((source) => source.protocol).join(' ＞ ')}</span><span>当前筛选复用 1 分钟 · 离开后释放明细</span></footer>
  </div>;
}