import { useMutation, useQuery } from '@tanstack/react-query';
import {
  IconAlarm, IconBox, IconCalendar, IconClock, IconCopy,
  IconChevronRight, IconMapPin, IconSearch, IconTickCircle
} from '@douyinfe/semi-icons';
import { Button, Card, Descriptions, Empty, Input, List, Select, Table, Tag } from '@douyinfe/semi-ui';
import { FormEvent, lazy, Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { api } from '../../api/client';
import type { LatestTelemetryResponse, LatestTelemetryValue, QualityIssueRow, VehicleDetail, VehicleRealtimeRow } from '../../api/types';
import { usePlatformSession } from '../auth/AuthGate';
import { canAdminister, hasMenu } from '../auth/session';
import { LIVE_QUERY_POLICY, QUERY_MEMORY } from '../queryPolicy';
import { formatTelemetryTime, formatTelemetryValue, telemetryQualityColor, telemetryQualityLabel, telemetryValueTypeLabel } from '../domain/telemetry';
import { formatZhNumber, vehicleOperationStatusLabels } from '../domain/formatters';
import { protocolDisplayLabel, protocolSourceLabel } from '../domain/protocols';
import { isValidAMapCoordinate } from '../../integrations/amap';
import { FleetMap } from '../map/FleetMap';
import { InlineError, PageLoading } from '../shared/AsyncState';
import { MonitorReturnBar } from '../shared/MonitorReturnBar';
import { PlatformTime } from '../shared/PlatformTime';
import { ProtocolTag } from '../shared/ProtocolTag';
import { SegmentedTabs } from '../shared/SegmentedTabs';
import { VehicleSourceEvidencePanel } from '../shared/VehicleSourceEvidencePanel';
import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
import { WorkspaceMetricRail, type WorkspaceQueueMetricRailItem } from '../shared/WorkspaceMetricRail';
import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
import { WorkspaceSideSheet, type WorkspaceSideSheetBadgeColor } from '../shared/WorkspaceSideSheet';
import { monitorReturnFromParams, withMonitorReturn } from '../routing/monitorContext';
import { useMobileLayout } from '../hooks/useMobileLayout';

function fmt(value?: string) { return value?.trim() || '—'; }
function metric(value: number | undefined) { return Number.isFinite(value as number) ? formatZhNumber(value!, 1) : '—'; }
function availableMetric(value: number | undefined, available?: boolean) { return available === false ? '—' : metric(value); }
function issueTone(issue: QualityIssueRow) { return issue.severity === 'error' ? 'error' : 'warning'; }
function durationHours(seconds?: number | null) { return seconds == null ? '—' : `${formatZhNumber(seconds / 3600, 1)} 小时`; }
function localDateTime(value?: string) { return value ? value.slice(0, 16) : ''; }
const SINGLE_VEHICLE_REFRESH_MS = 10_000;
const VehicleSearch = lazy(() => import('./VehicleSearchWorkspace'));
const VehicleActions = lazy(() => import('./VehicleActions'));

function resetWorkspaceScroll(routeRoot?: HTMLElement | null) {
  const targets = new Set<Element | null>([
    routeRoot ?? null,
    routeRoot?.closest('.v2-content') ?? null,
    document.scrollingElement,
    document.documentElement,
    document.body,
    document.querySelector<HTMLElement>('.v2-shell'),
    document.querySelector<HTMLElement>('.v2-main')
  ]);
  for (const content of document.querySelectorAll<HTMLElement>('.v2-content')) targets.add(content);
  for (const target of targets) {
    if (!(target instanceof HTMLElement)) continue;
    target.scrollTop = 0;
    target.scrollLeft = 0;
    target.scrollTo?.({ top: 0, left: 0, behavior: 'auto' });
  }
}

function revealVehicleIdentity(root: HTMLElement | null) {
  resetWorkspaceScroll(root);
  if (!root) return;
  root.scrollTop = 0;
  root.scrollLeft = 0;
  root.focus({ preventScroll: true });
}

function eventTimeLabel(value?: string) {
  if (!value) return '—';
  const normalized = value.replace('T', ' ');
  return normalized.length >= 16 ? normalized.slice(5, 16) : normalized;
}

function Archive({ detail, editable, onUpdated }: { detail: VehicleDetail; editable: boolean; onUpdated: () => void }) {
  const profile = detail.profile;
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState({ brandName: '', modelName: '', vehicleType: '', companyName: '', operationStatus: 'unknown', accessProvider: '', firstAccessAt: '', runtimeHours: '' });
  const save = useMutation({
    mutationFn: () => api.updateVehicleProfile(detail.vin, {
      brandName: draft.brandName.trim(), modelName: draft.modelName.trim(), vehicleType: draft.vehicleType.trim(), companyName: draft.companyName.trim(),
      operationStatus: draft.operationStatus as NonNullable<typeof profile>['operationStatus'], accessProvider: draft.accessProvider.trim(), firstAccessAt: draft.firstAccessAt,
      runtimeSeconds: draft.runtimeHours.trim() === '' ? null : Math.round(Number(draft.runtimeHours) * 3600), version: profile?.version ?? 0
    }),
    onSuccess: () => { setEditing(false); onUpdated(); }
  });
  const startEditing = () => {
    setDraft({ brandName: profile?.brandName ?? '', modelName: profile?.modelName ?? '', vehicleType: profile?.vehicleType ?? '', companyName: profile?.companyName ?? '', operationStatus: profile?.operationStatus ?? 'unknown', accessProvider: profile?.accessProvider ?? '', firstAccessAt: localDateTime(profile?.firstAccessAt), runtimeHours: profile?.runtimeSeconds == null ? '' : String(profile.runtimeSeconds / 3600) });
    save.reset(); setEditing(true);
  };
  const submit = (event: FormEvent) => { event.preventDefault(); if (draft.runtimeHours === '' || Number.isFinite(Number(draft.runtimeHours))) save.mutate(); };
  return <Card className="v2-record-card v2-archive-card" bodyStyle={{ padding: 0 }}>
    <WorkspacePanelHeader
      title="车辆主档"
      description="身份、车型与运营属性"
      meta={`完整度 ${profile?.completeness ?? 0}%`}
      actions={editable && !editing ? <Button theme="borderless" size="small" onClick={startEditing}>维护档案</Button> : null}
    />
    {editing ? <form className="v2-profile-form" onSubmit={submit}>
      <label><span>车辆品牌</span><Input maxLength={128} value={draft.brandName} onChange={(value) => setDraft({ ...draft, brandName: value })} /></label>
      <label><span>车型</span><Input maxLength={128} value={draft.modelName} onChange={(value) => setDraft({ ...draft, modelName: value })} /></label>
      <label><span>车辆类型</span><Input maxLength={64} value={draft.vehicleType} onChange={(value) => setDraft({ ...draft, vehicleType: value })} /></label>
      <label><span>所属企业</span><Input maxLength={128} value={draft.companyName} onChange={(value) => setDraft({ ...draft, companyName: value })} /></label>
      <label><span>运营状态</span><Select value={draft.operationStatus} onChange={(value) => setDraft({ ...draft, operationStatus: String(value) })} optionList={Object.entries(vehicleOperationStatusLabels).map(([value, label]) => ({ value, label }))} /></label>
      <label><span>接入服务商</span><Input maxLength={128} value={draft.accessProvider} onChange={(value) => setDraft({ ...draft, accessProvider: value })} /></label>
      <label><span>首次接入</span><Input aria-label="首次接入" type="datetime-local" value={draft.firstAccessAt} onChange={(value) => setDraft({ ...draft, firstAccessAt: value })} /></label>
      <label><span>累计运行（小时）</span><Input type="number" min="0" step="0.1" value={draft.runtimeHours} onChange={(value) => setDraft({ ...draft, runtimeHours: value })} /></label>
      {save.isError ? <p>{save.error.message}</p> : null}<footer><Button theme="light" onClick={() => setEditing(false)}>取消</Button><Button theme="solid" htmlType="submit" loading={save.isPending}>保存档案</Button></footer>
    </form> : <><Descriptions className="v2-record-descriptions" align="left" size="small" data={[
      { key: '车辆品牌', value: fmt(profile?.brandName) },
      { key: '车型 / 类型', value: [profile?.modelName, profile?.vehicleType].filter(Boolean).join(' / ') || '—' },
      { key: '所属企业', value: fmt(profile?.companyName) },
      { key: '运营状态', value: <Tag color={profile?.operationStatus === 'active' ? 'green' : profile?.operationStatus === 'maintenance' ? 'orange' : 'grey'} type="light" size="small">{vehicleOperationStatusLabels[profile?.operationStatus ?? 'unknown']}</Tag> },
      { key: '接入服务商', value: fmt(profile?.accessProvider) },
      { key: '首次接入', value: fmt(profile?.firstAccessAt) },
      { key: '累计运行', value: durationHours(profile?.runtimeSeconds) }
    ]} /><p className="v2-record-note">身份字段来自网关；补充主档来源 {profile?.sourceSystem || '未配置'}{profile?.updatedAt ? ` · v${profile.version} · ${profile.updatedBy} 更新` : ''}</p></>}
  </Card>;
}

function Events({ detail }: { detail: VehicleDetail }) {
  const events = [
    ...detail.quality.items.slice(0, 3).map((item) => ({ tone: issueTone(item), title: item.severity === 'error' ? '质量异常' : '质量提醒', detail: item.detail, time: item.lastSeen })),
    ...detail.sourceStatus.slice(0, 3).map((item) => ({ tone: item.online ? 'success' : 'muted', title: item.online ? '数据上报' : '来源离线', detail: `${protocolDisplayLabel(item.protocol)} · ${item.online ? '当前在线' : '暂无在线数据'}`, time: item.lastSeen }))
  ].slice(0, 5);
  return <Card className="v2-record-card v2-events-card" bodyStyle={{ padding: 0 }}>
    <WorkspacePanelHeader
      title="最近事件"
      description="质量提醒与协议来源状态"
      meta={`${events.length} 条`}
      actions={<Link to={`/alerts?vin=${encodeURIComponent(detail.vin)}`}><Button theme="borderless" type="tertiary" size="small">查看全部</Button></Link>}
    />
    <List
      className="v2-event-list"
      dataSource={events}
      split={false}
      emptyContent={<Empty className="v2-event-empty" title="暂无可用事件证据" description="车辆产生质量提醒或来源状态变化后会显示在这里。" />}
      renderItem={(event, index) => <List.Item className={`v2-event-row is-${event.tone}`} key={`${event.title}-${event.time}-${index}`}>
        <span className="v2-event-icon">{event.tone === 'success' ? <IconTickCircle /> : <IconAlarm />}</span>
        <div><strong>{event.title}</strong><p>{event.detail}</p></div><time title={fmt(event.time)}>{eventTimeLabel(event.time)}</time>
      </List.Item>}
    />
  </Card>;
}

function TelemetryFieldCell({ item }: { item: LatestTelemetryValue }) {
  return <div className="v2-telemetry-field"><strong title={item.description}>{item.label}</strong><small title={item.sourceField}>{item.sourceField}</small></div>;
}

type TelemetryValuePresentation = {
  complex: boolean;
  preview: string;
  summary: string;
};

function tryParseTelemetryJSON(value: string) {
  const trimmed = value.trim();
  if (!(trimmed.startsWith('[') && trimmed.endsWith(']')) && !(trimmed.startsWith('{') && trimmed.endsWith('}'))) return undefined;
  try { return JSON.parse(trimmed) as unknown; } catch { return undefined; }
}

function telemetryValuePresentation(item: LatestTelemetryValue): TelemetryValuePresentation {
  const formatted = formatTelemetryValue(item.value, item.displayValue);
  const parsed = typeof item.value === 'string'
    ? tryParseTelemetryJSON(item.value)
    : typeof item.displayValue === 'string'
      ? tryParseTelemetryJSON(item.displayValue)
      : item.value;
  if (Array.isArray(parsed)) {
    return {
      complex: true,
      preview: parsed.slice(0, 3).map((value) => String(value)).join('，') || '空数组',
      summary: `${formatZhNumber(parsed.length)} 个值`
    };
  }
  if (parsed && typeof parsed === 'object') {
    const entries = Object.entries(parsed);
    return {
      complex: true,
      preview: entries.slice(0, 2).map(([key]) => key).join('，') || '空对象',
      summary: `${formatZhNumber(entries.length)} 个字段`
    };
  }
  const detail = String(formatted);
  return {
    complex: detail.length > 42,
    preview: detail.length > 54 ? `${detail.slice(0, 54)}…` : detail,
    summary: detail.length > 42 ? `${formatZhNumber(detail.length)} 个字符` : detail
  };
}

function telemetryValueDetail(item: LatestTelemetryValue) {
  const parsed = typeof item.value === 'string'
    ? tryParseTelemetryJSON(item.value)
    : typeof item.displayValue === 'string'
      ? tryParseTelemetryJSON(item.displayValue)
      : item.value;
  if (parsed && typeof parsed === 'object') return JSON.stringify(parsed, null, 2);
  return String(formatTelemetryValue(item.value, item.displayValue));
}

function TelemetryValueCell({ item, onInspect }: { item: LatestTelemetryValue; onInspect?: (item: LatestTelemetryValue) => void }) {
  const presentation = telemetryValuePresentation(item);
  if (presentation.complex) {
    if (!onInspect) {
      return <div className="v2-telemetry-value is-complex is-static"><strong>{presentation.summary}</strong><small>{presentation.preview}</small></div>;
    }
    return <div className="v2-telemetry-value is-complex"><Button
      className="v2-telemetry-value-trigger"
      theme="borderless"
      type="tertiary"
      aria-label={`查看 ${item.label} 完整数据`}
      onClick={() => onInspect?.(item)}
    >
      <span><strong>{presentation.summary}</strong><small>{presentation.preview}</small></span><IconChevronRight />
    </Button></div>;
  }
  return <div className="v2-telemetry-value"><strong>{presentation.summary}</strong>{item.unit ? <span>{item.unit}</span> : null}</div>;
}

function TelemetryQualityCell({ item }: { item: LatestTelemetryValue }) {
  return <div className="v2-telemetry-quality"><Tag color={telemetryQualityColor(item.quality)} type="light" size="small">{telemetryQualityLabel(item.quality)}</Tag><small title={item.qualityReason}>{item.qualityReason || '未提供质量说明'} · {formatZhNumber(item.freshnessSeconds, 0)}s</small></div>;
}

function TelemetryTimeCell({ item }: { item: LatestTelemetryValue }) {
  return <div className="v2-telemetry-time"><span><small>设备</small>{formatTelemetryTime(item.deviceTime)}</span><span><small>接收</small>{formatTelemetryTime(item.serverTime)}</span></div>;
}

function TelemetrySourceCell({ item }: { item: LatestTelemetryValue }) {
  return <div className="v2-telemetry-source"><ProtocolTag protocol={item.protocol} compact /><small title={item.sourceEndpoint}>{item.sourceEndpoint || '协议默认来源'}</small></div>;
}

function telemetryRowKey(item?: LatestTelemetryValue) {
  return [
    item?.protocol ?? '',
    item?.sourceEndpoint ?? '',
    item?.key || `${item?.category ?? ''}:${item?.sourceField ?? ''}`
  ].join('\u0000');
}

function TelemetryPanel({ data, pending, error }: { data?: LatestTelemetryResponse; pending: boolean; error?: string }) {
  const mobileLayout = useMobileLayout();
  const [selectedProtocol, setSelectedProtocol] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('vehicle');
  const [inspectedValue, setInspectedValue] = useState<LatestTelemetryValue>();
  const [copiedValue, setCopiedValue] = useState(false);
  const inspectedPresentation = useMemo(() => inspectedValue ? telemetryValuePresentation(inspectedValue) : undefined, [inspectedValue]);
  const inspectedDetail = useMemo(() => inspectedValue ? telemetryValueDetail(inspectedValue) : '', [inspectedValue]);
  const closeInspection = () => {
    setInspectedValue(undefined);
    setCopiedValue(false);
  };
  const indexed = useMemo(() => {
    const valuesByProtocolCategory = new Map<string, LatestTelemetryResponse['values']>();
    const sources = new Map<string, { protocol: string; endpoint?: string }>();
    const protocols: string[] = [];
    for (const value of data?.values ?? []) {
      if (!protocols.includes(value.protocol)) protocols.push(value.protocol);
      const categoryKey = `${value.protocol}\u0000${value.category}`;
      const values = valuesByProtocolCategory.get(categoryKey);
      if (values) values.push(value); else valuesByProtocolCategory.set(categoryKey, [value]);
      const sourceKey = `${value.protocol}\u0000${value.sourceEndpoint ?? ''}`;
      if (!sources.has(sourceKey)) sources.set(sourceKey, { protocol: value.protocol, endpoint: value.sourceEndpoint });
    }
    const order = ['GB32960', 'JT808', 'YUTONG_MQTT'];
    protocols.sort((left, right) => order.indexOf(left) - order.indexOf(right));
    return { valuesByProtocolCategory, protocols, sources: [...sources.values()] };
  }, [data]);
  const activeProtocol = indexed.protocols.includes(selectedProtocol) ? selectedProtocol : indexed.protocols[0] ?? '';
  const categoryLabels = new Map((data?.categories ?? []).map((category) => [category.key, category.label]));
  const categories = [...new Set((data?.values ?? []).filter((value) => value.protocol === activeProtocol).map((value) => value.category))]
    .map((key) => ({ key, label: categoryLabels.get(key) ?? key, count: indexed.valuesByProtocolCategory.get(`${activeProtocol}\u0000${key}`)?.length ?? 0 }));
  const activeCategory = indexed.valuesByProtocolCategory.has(`${activeProtocol}\u0000${selectedCategory}`) ? selectedCategory : categories[0]?.key ?? '';
  const visibleMetrics = indexed.valuesByProtocolCategory.get(`${activeProtocol}\u0000${activeCategory}`) ?? [];
  const columns = useMemo(() => [
    { title: '字段 / 协议映射', dataIndex: 'label', width: 260, render: (_: unknown, item: LatestTelemetryValue) => <TelemetryFieldCell item={item} /> },
    { title: '当前值', dataIndex: 'value', width: 170, render: (_: unknown, item: LatestTelemetryValue) => <TelemetryValueCell item={item} onInspect={setInspectedValue} /> },
    { title: '质量 / 新鲜度', dataIndex: 'quality', width: 170, render: (_: unknown, item: LatestTelemetryValue) => <TelemetryQualityCell item={item} /> },
    { title: '设备 / 接收时间', dataIndex: 'deviceTime', width: 230, render: (_: unknown, item: LatestTelemetryValue) => <TelemetryTimeCell item={item} /> },
    { title: '数据来源', dataIndex: 'protocol', width: 180, render: (_: unknown, item: LatestTelemetryValue) => <TelemetrySourceCell item={item} /> }
  ], []);
  const state = pending
    ? <div className="v2-telemetry-state" role="status"><strong>正在读取最新遥测</strong><span>按协议整理最新标量证据…</span></div>
    : error
      ? <div className="v2-telemetry-state is-error" role="alert"><strong>最新遥测不可用</strong><span>{error}</span></div>
      : visibleMetrics.length === 0
        ? <Empty className="v2-telemetry-empty" title="暂无可展示字段" description={`该协议最近 ${data?.scannedFrames ?? 0} 帧没有可展示的标量遥测。`} />
        : mobileLayout
          ? <List className="v2-telemetry-mobile-list" dataSource={visibleMetrics} split={false} renderItem={(item) => <List.Item className="v2-telemetry-mobile-item" key={telemetryRowKey(item)}>
            <header><TelemetryFieldCell item={item} /><TelemetryValueCell item={item} /></header>
            <div><TelemetryQualityCell item={item} /><TelemetryTimeCell item={item} /></div>
            <footer className="v2-telemetry-mobile-source">
              <TelemetrySourceCell item={item} />
              <Button className="v2-telemetry-mobile-action" theme="borderless" type="primary" size="small" icon={<IconChevronRight />} iconPosition="right" aria-label={`查看 ${item.label} 字段详情`} onClick={() => setInspectedValue(item)}>查看详情</Button>
            </footer>
          </List.Item>} />
          : <div className="v2-telemetry-table-wrap"><Table
            className="v2-telemetry-table"
            columns={columns}
            dataSource={visibleMetrics}
            rowKey={telemetryRowKey}
            pagination={false}
            scroll={{ x: 1010 }}
            empty={null}
          /></div>;
  return <Card className="v2-record-card v2-telemetry-card" bodyStyle={{ padding: 0 }}>
    <WorkspacePanelHeader
      title="实时遥测"
      description="按协议查看当前值、质量和来源"
      meta={`${data?.values.length ?? 0} 项`}
    />
    <div className="v2-telemetry-tabs">
      <SegmentedTabs className="v2-telemetry-protocols" variant="filled" ariaLabel="数据协议" value={activeProtocol} onChange={(protocol) => { setSelectedProtocol(protocol); setSelectedCategory('vehicle'); }} items={indexed.protocols.map((protocol) => ({ key: protocol, label: protocolDisplayLabel(protocol), count: (data?.values ?? []).filter((value) => value.protocol === protocol).length }))} />
      <SegmentedTabs className="v2-telemetry-categories" ariaLabel="字段分类" value={activeCategory} onChange={setSelectedCategory} items={categories} />
    </div>
    {state}
    <footer><b>来源</b>{indexed.sources.map((source) => <span key={`${source.protocol}-${source.endpoint ?? ''}`} title={source.endpoint}>{protocolDisplayLabel(source.protocol)}</span>)}<small>扫描 {data?.scannedFrames ?? 0} 帧 · 上海时间 {formatTelemetryTime(data?.asOf)}</small></footer>
    <WorkspaceSideSheet
      className="v2-telemetry-evidence-sidesheet"
      variant="detail"
      visible={!!inspectedValue}
      ariaLabel="遥测字段详情"
      placement={mobileLayout ? 'bottom' : 'right'}
      width={mobileLayout ? undefined : 520}
      height={mobileLayout ? 'min(88dvh, 780px)' : undefined}
      title={inspectedValue?.label}
      description={inspectedValue?.sourceField}
      badge={inspectedValue ? telemetryQualityLabel(inspectedValue.quality) : undefined}
      badgeColor={inspectedValue ? telemetryQualityColor(inspectedValue.quality) as WorkspaceSideSheetBadgeColor : 'grey'}
      summaryItems={inspectedValue ? [
        {
          label: '协议来源',
          value: <ProtocolTag className="v2-telemetry-detail-protocol" protocol={inspectedValue.protocol} compact />,
          detail: inspectedValue.sourceEndpoint || '协议默认来源',
          tone: 'primary'
        },
        {
          label: '完整值',
          value: inspectedPresentation?.summary || '—',
          detail: inspectedValue.unit ? `单位 ${inspectedValue.unit}` : '无单位'
        },
        {
          label: '数据质量',
          value: telemetryQualityLabel(inspectedValue.quality),
          detail: `${formatZhNumber(inspectedValue.freshnessSeconds, 0)}s · ${inspectedValue.qualityReason || '未提供说明'}`,
          tone: inspectedValue.quality === 'good' ? 'success' : inspectedValue.quality === 'stale' ? 'warning' : 'danger'
        }
      ] : []}
      footerNote="完整值按需渲染，不影响实时遥测刷新。"
      primaryAction={{ label: '完成', onClick: closeInspection }}
      onCancel={closeInspection}
    >
      {inspectedValue ? <div className="v2-telemetry-value-detail">
        <Descriptions
          className="v2-telemetry-value-meta"
          size="small"
          row
          data={[
            { key: '数据类型', value: telemetryValueTypeLabel(inspectedValue.valueType) },
            { key: '单位', value: inspectedValue.unit || '—' },
            { key: '设备时间', value: formatTelemetryTime(inspectedValue.deviceTime) },
            { key: '接收时间', value: formatTelemetryTime(inspectedValue.serverTime) },
            { key: '质量说明', value: inspectedValue.qualityReason || '未提供质量说明' }
          ]}
        />
        <section>
          <header><div><strong>完整数据</strong><small>{inspectedPresentation?.summary}</small></div><Button
            theme="light"
            icon={<IconCopy />}
            onClick={() => {
              void navigator.clipboard?.writeText(inspectedDetail);
              setCopiedValue(true);
            }}
          >{copiedValue ? '已复制' : '复制完整值'}</Button></header>
          <pre>{inspectedDetail}</pre>
        </section>
      </div> : null}
    </WorkspaceSideSheet>
  </Card>;
}

function CurrentVehicleAddress({ vehicle, fallback }: { vehicle?: VehicleRealtimeRow; fallback?: string }) {
  const coordinate = vehicle && vehicle.locationAvailable !== false && isValidAMapCoordinate(vehicle.longitude, vehicle.latitude)
    ? { longitude: Number(vehicle.longitude.toFixed(4)), latitude: Number(vehicle.latitude.toFixed(4)) }
    : undefined;
  const coordinateKey = coordinate ? `${coordinate.longitude.toFixed(4)},${coordinate.latitude.toFixed(4)}` : '';
  const [requestedKey, setRequestedKey] = useState('');
  const requested = requestedKey ? requestedKey.split(',').map(Number) : [];
  const address = useQuery({
    queryKey: ['vehicle-detail-address', requestedKey],
    enabled: requested.length === 2,
    queryFn: ({ signal }) => api.reverseGeocode(new URLSearchParams({
      longitude: requested[0].toFixed(4),
      latitude: requested[1].toFixed(4)
    }), signal),
    staleTime: 6 * 60 * 60_000,
    gcTime: QUERY_MEMORY.highVolumeGcTime,
    refetchOnWindowFocus: false,
    retry: 1
  });
  const moved = !!(coordinateKey && requestedKey && coordinateKey !== requestedKey);

  return <div className="v2-current-location">
    <span><IconMapPin /><small>当前位置</small><strong>{coordinate ? `${vehicle!.longitude.toFixed(6)}, ${vehicle!.latitude.toFixed(6)}` : '—'}</strong></span>
    <span className="v2-current-address"><small>地理位置</small>{!coordinate
      ? <strong>暂无有效实时坐标</strong>
      : !requestedKey
        ? <Button className="v2-current-address-action" theme="light" type="primary" size="small" aria-label="解析当前位置" icon={<IconMapPin />} onClick={() => setRequestedKey(coordinateKey)}>解析当前位置</Button>
        : address.isFetching && !address.data
          ? <strong>地址解析中…</strong>
          : address.isError
            ? <Button className="v2-current-address-action is-error" theme="light" type="danger" size="small" aria-label="地址解析失败，重试" onClick={() => void address.refetch()}>解析失败，重试</Button>
            : <strong title={address.data?.formattedAddress}>{address.data?.formattedAddress || fallback || '暂无地址结果'}</strong>}
      {moved ? <Button className="v2-current-address-action" theme="borderless" type="primary" size="small" aria-label="车辆已移动，更新地址" icon={<IconMapPin />} onClick={() => setRequestedKey(coordinateKey)}>车辆已移动 · 更新地址</Button> : null}
    </span>
  </div>;
}

const vehicleSectionIDs = {
  location: 'vehicle-location-panel',
  events: 'vehicle-events-panel',
  telemetry: 'vehicle-telemetry-panel',
  archive: 'vehicle-archive-panel'
} as const;

type VehicleSection = keyof typeof vehicleSectionIDs;

function VehicleRecordNavigation() {
  const jumpToSection = (section: VehicleSection) => {
    const target = document.getElementById(vehicleSectionIDs[section]);
    if (!target) return;
    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    target.focus({ preventScroll: true });
  };
  const navigationItems = [
    ['location', '实时位置', <IconMapPin />],
    ['events', '最近事件', <IconAlarm />],
    ['telemetry', '实时遥测', <IconClock />],
    ['archive', '车辆主档', <IconBox />]
  ] as const;
  return <Card className="v2-record-card v2-vehicle-record-nav" bodyStyle={{ padding: 0 }}>
    <WorkspacePanelHeader
      variant="compact"
      title="车辆视图"
      description="位置、事件、遥测与主档"
      actions={<nav className="v2-vehicle-section-nav" aria-label="单车详情导航">
        {navigationItems.map(([key, label, icon]) => <Button key={key} size="small" theme="borderless" type="tertiary" icon={icon} aria-label={`跳转到${label}`} onClick={() => jumpToSection(key)}>{label}</Button>)}
      </nav>}
    />
  </Card>;
}

function VehicleRecord({ detail, liveRealtime, telemetry, telemetryPending, telemetryError, monitorReturn, onUpdated }: { detail: VehicleDetail; liveRealtime?: VehicleRealtimeRow; telemetry?: LatestTelemetryResponse; telemetryPending: boolean; telemetryError?: string; monitorReturn: string; onUpdated: () => void }) {
  const { session } = usePlatformSession();
  const navigate = useNavigate();
  const mobileLayout = useMobileLayout();
  const recordRootRef = useRef<HTMLDivElement>(null);
  const [sourceEvidenceOpen, setSourceEvidenceOpen] = useState(false);
  const realtime = liveRealtime ?? detail.realtimeSummary;
  const identity = detail.identity;
  const hasLocation = !!(realtime && realtime.locationAvailable !== false && isValidAMapCoordinate(realtime.longitude, realtime.latitude));
  const mapVehicles = hasLocation && realtime ? [realtime] : [];
  const actions = [
    { key: 'switch', label: '切换车辆', icon: <IconSearch />, to: '/vehicles', type: 'primary' as const },
    ...(hasMenu(session, 'tracks') ? [{ key: 'tracks', label: '轨迹回放', icon: <IconMapPin />, to: withMonitorReturn(`/tracks?vin=${encodeURIComponent(detail.vin)}`, monitorReturn), type: 'tertiary' as const }] : []),
    ...(hasMenu(session, 'history') ? [{ key: 'history', label: '历史数据', icon: <IconCalendar />, to: withMonitorReturn(`/history?vin=${encodeURIComponent(detail.vin)}`, monitorReturn), type: 'tertiary' as const }] : []),
    ...(hasMenu(session, 'statistics') ? [{ key: 'statistics', label: '里程查询', icon: <IconClock />, to: withMonitorReturn(`/statistics?vins=${encodeURIComponent(detail.vin)}`, monitorReturn), type: 'tertiary' as const }] : []),
    ...(hasMenu(session, 'alerts') ? [{ key: 'alerts', label: '告警事件', icon: <IconAlarm />, to: `/alerts?vin=${encodeURIComponent(detail.vin)}`, type: 'tertiary' as const }] : [])
  ];
  const liveMetrics: WorkspaceQueueMetricRailItem[] = [
    {
      label: '速度',
      value: <>{availableMetric(realtime?.speedKmh, realtime?.speedAvailable)}<em className="v2-vehicle-live-unit">km/h</em></>,
      note: '实时车速',
      tone: 'primary',
      emphasis: 'primary'
    },
    {
      label: 'SOC',
      value: <>{availableMetric(realtime?.socPercent, realtime?.socAvailable)}<em className="v2-vehicle-live-unit">%</em></>,
      note: '剩余电量',
      tone: 'success',
      emphasis: 'secondary'
    },
    {
      label: '总里程',
      value: <>{availableMetric(realtime?.totalMileageKm, realtime?.mileageAvailable)}<em className="v2-vehicle-live-unit">km</em></>,
      note: <span className="v2-vehicle-live-action-note">推荐口径<IconChevronRight /></span>,
      emphasis: 'secondary',
      ariaLabel: '查看总里程全部来源',
      onClick: () => setSourceEvidenceOpen(true)
    },
    {
      label: '当日里程',
      value: <>{availableMetric(realtime?.todayMileageKm, realtime?.todayMileageAvailable)}<em className="v2-vehicle-live-unit">km</em></>,
      note: <span className="v2-vehicle-live-action-note">今日累计<IconChevronRight /></span>,
      tone: 'primary',
      emphasis: 'primary',
      ariaLabel: '查看当日里程全部来源',
      onClick: () => setSourceEvidenceOpen(true)
    },
    {
      label: '来源状态',
      value: <>{realtime?.onlineSourceCount ?? 0}<em className="v2-vehicle-live-unit">/ {detail.sourceStatus.length}</em></>,
      note: '在线来源 / 全部',
      tone: (realtime?.onlineSourceCount ?? 0) > 0 ? 'success' : 'neutral',
      emphasis: 'secondary'
    }
  ];
  useLayoutEffect(() => {
    const root = recordRootRef.current;
    if (!root) return;
    const scrollOwner = root.closest<HTMLElement>('.v2-content') ?? document.querySelector<HTMLElement>('.v2-content');
    let active = true;
    let resetFrame = 0;
    const timers: number[] = [];
    const revealIdentity = () => {
      if (active) revealVehicleIdentity(root);
    };
    const stopEntryGuard = () => {
      if (!active) return;
      active = false;
      window.cancelAnimationFrame(resetFrame);
      for (const timer of timers) window.clearTimeout(timer);
      resizeObserver?.disconnect();
      scrollOwner?.removeEventListener('scroll', restoreEntryPosition);
      for (const eventName of interactionEvents) window.removeEventListener(eventName, stopEntryGuard, true);
    };
    const restoreEntryPosition = () => {
      if (!active || !scrollOwner || scrollOwner.scrollTop === 0) return;
      window.cancelAnimationFrame(resetFrame);
      resetFrame = window.requestAnimationFrame(revealIdentity);
    };
    const interactionEvents = ['wheel', 'touchstart', 'pointerdown', 'keydown'] as const;
    for (const eventName of interactionEvents) window.addEventListener(eventName, stopEntryGuard, { capture: true, passive: true });
    scrollOwner?.addEventListener('scroll', restoreEntryPosition, { passive: true });
    const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(revealIdentity);
    resizeObserver?.observe(root);
    revealIdentity();
    const frame = window.requestAnimationFrame(revealIdentity);
    // Map tiles, source evidence and live data settle independently. Guard the
    // first viewport through those late layout changes, but yield immediately
    // as soon as the user starts scrolling or interacting.
    for (const delay of [80, 180, 360, 720, 1200, 1800, 2400, 3600, 5200]) timers.push(window.setTimeout(revealIdentity, delay));
    return () => {
      window.cancelAnimationFrame(frame);
      stopEntryGuard();
    };
  }, [detail.vin]);
  return <div ref={recordRootRef} className={`v2-vehicle-record-page v2-vehicle-record-v3${mobileLayout ? ' is-mobile-layout' : ''}`} tabIndex={-1} aria-label={`${fmt(identity?.plate || realtime?.plate)} 车辆档案`}>
    <MonitorReturnBar />
    <Card className="v2-identity-band v2-record-card v2-live-card v2-live-overview v2-vehicle-command-card" bodyStyle={{ padding: 0 }}>
      <WorkspaceCommandBar
        className="v2-vehicle-command-header v2-vehicle-record-command"
        ariaLabel="单车任务栏"
        title={<span className="v2-identity-primary">
          <span className="v2-plate"><IconBox />{fmt(identity?.plate || realtime?.plate)}</span>
          <Tag className={`v2-online-label ${realtime?.online ? 'is-online' : ''}`} color={realtime?.online ? 'green' : 'grey'} size="small">{realtime?.online ? '在线' : '离线'}</Tag>
        </span>}
        description={<span className="v2-identity-vin"><small>VIN</small><b>{detail.vin}</b><Button theme="borderless" aria-label="复制 VIN" title="复制 VIN" icon={<IconCopy />} onClick={() => navigator.clipboard?.writeText(detail.vin)} /></span>}
        meta={<span className="v2-identity-meta">
          <span className="v2-identity-model"><small>车辆品牌 / 车型</small><strong>{[detail.profile?.brandName, detail.profile?.modelName].filter(Boolean).join(' / ') || fmt(identity?.oem || realtime?.oem)}</strong></span>
          <span className="v2-identity-source-context"><small>可用数据来源</small><span className="v2-identity-sources">{detail.sources.length ? detail.sources.map((source) => <ProtocolTag key={source} protocol={source} compact />) : <Tag color="grey" type="light" size="small">暂无来源</Tag>}</span></span>
        </span>}
        actions={<Suspense fallback={null}><VehicleActions actions={actions} mobile={mobileLayout} onSelect={navigate} /></Suspense>}
      />
      <section className="v2-vehicle-live-section" aria-labelledby="vehicle-live-heading">
        <WorkspacePanelHeader
          title={<span id="vehicle-live-heading">最新上报</span>}
          description="关键运行指标与推荐数据来源"
          meta={<span className="v2-live-report-meta"><i className={realtime?.online ? 'is-online' : ''} />{realtime?.online ? '实时在线' : '当前离线'} · <IconClock /><PlatformTime value={realtime?.lastSeen || identity?.lastSeen} /></span>}
        />
        <WorkspaceMetricRail
          variant="queue"
          className="v2-vehicle-live-metric-rail"
          ariaLabel="车辆实时指标"
          items={liveMetrics}
          context={<span className="v2-vehicle-live-source-context">
            <small>推荐来源</small>
            <strong><ProtocolTag protocol={realtime?.primaryProtocol} className="v2-live-primary-protocol" compact /></strong>
            <em title={realtime?.locationSource}>{protocolSourceLabel(realtime?.locationSource) || '当前最优来源'}</em>
          </span>}
        />
        <CurrentVehicleAddress vehicle={realtime} fallback={identity?.locationText} />
      </section>
    </Card>

    <VehicleSourceEvidencePanel vin={detail.vin} open={sourceEvidenceOpen} onOpenChange={setSourceEvidenceOpen} />
    <VehicleRecordNavigation />

    <div className="v2-record-grid">
      <div id={vehicleSectionIDs.location} tabIndex={-1} className="v2-record-section-anchor v2-record-location-anchor">
        <Card className="v2-single-map-card" bodyStyle={{ padding: 0 }}>
          <WorkspacePanelHeader
            title="实时位置"
            description="定位点按车辆上报周期平滑移动"
            meta={realtime?.online ? '实时跟随' : '保留最后位置'}
          />
          <FleetMap vehicles={mapVehicles} selectedVin={hasLocation ? detail.vin : undefined} onSelect={() => undefined} />
          <footer><Button theme="borderless" type="tertiary" className="v2-map-source-link" title="展开全部位置来源" aria-label="查看全部位置来源" icon={<IconMapPin />} onClick={() => setSourceEvidenceOpen(true)}>{hasLocation && realtime ? `实时坐标 ${realtime.longitude.toFixed(6)}, ${realtime.latitude.toFixed(6)}` : '暂无有效实时坐标'}{identity?.locationText ? ` · 档案区域 ${identity.locationText}` : ''}</Button><span className="v2-map-update-time">更新时间：<PlatformTime value={realtime?.lastSeen} /></span></footer>
        </Card>
      </div>
      <div id={vehicleSectionIDs.events} tabIndex={-1} className="v2-record-section-anchor"><Events detail={detail} /></div>
      <div id={vehicleSectionIDs.telemetry} tabIndex={-1} className="v2-record-section-anchor"><TelemetryPanel data={telemetry} pending={telemetryPending} error={telemetryError} /></div>
      <div id={vehicleSectionIDs.archive} tabIndex={-1} className="v2-record-section-anchor"><Archive detail={detail} editable={canAdminister(session)} onUpdated={onUpdated} /></div>
    </div>
  </div>;
}

export default function VehiclePage() {
  const { vin } = useParams();
  const [searchParams] = useSearchParams();
  const monitorReturn = monitorReturnFromParams(searchParams);
  const query = useQuery({ queryKey: ['vehicle-detail', vin], enabled: !!vin, queryFn: ({ signal }) => api.vehicleDetail(new URLSearchParams({ keyword: vin!, limit: '20' }), signal), gcTime: QUERY_MEMORY.summaryGcTime });
  const resolvedVin = query.data?.lookupResolved ? query.data.vin : '';
  const realtime = useQuery({
    queryKey: ['vehicle-detail-realtime', resolvedVin],
    queryFn: ({ signal }) => api.vehicleRealtime(new URLSearchParams({ keywords: resolvedVin, limit: '1', offset: '0' }), signal),
    enabled: !!resolvedVin,
    staleTime: 5_000,
    gcTime: QUERY_MEMORY.highVolumeGcTime,
    refetchInterval: resolvedVin ? SINGLE_VEHICLE_REFRESH_MS : false,
    ...LIVE_QUERY_POLICY
  });
  const telemetry = useQuery({ queryKey: ['vehicle-latest-telemetry', vin], enabled: !!vin, queryFn: ({ signal }) => api.latestTelemetry(vin!, signal), staleTime: 10_000, gcTime: QUERY_MEMORY.summaryGcTime, refetchInterval: 20_000, ...LIVE_QUERY_POLICY });
  useEffect(() => {
    resetWorkspaceScroll();
    let trailingFrame = 0;
    const frame = window.requestAnimationFrame(() => {
      resetWorkspaceScroll();
      trailingFrame = window.requestAnimationFrame(() => resetWorkspaceScroll());
    });
    const shortTimer = window.setTimeout(resetWorkspaceScroll, 120);
    const settledTimer = window.setTimeout(resetWorkspaceScroll, 360);
    return () => {
      window.cancelAnimationFrame(frame);
      window.cancelAnimationFrame(trailingFrame);
      window.clearTimeout(shortTimer);
      window.clearTimeout(settledTimer);
    };
  }, [vin, resolvedVin]);
  if (!vin) return <Suspense fallback={<PageLoading />}><VehicleSearch /></Suspense>;
  if (query.isPending) return <PageLoading />;
  if (query.isError) return <div className="v2-page-error"><InlineError message={query.error instanceof Error ? query.error.message : '车辆档案加载失败'} onRetry={() => query.refetch()} /></div>;
  if (!query.data.lookupResolved) return <Card className="v2-not-found" bodyStyle={{ padding: 0 }}><Empty image={<IconSearch size="extra-large" />} title="未找到车辆" description={`没有匹配“${vin}”的车牌、VIN 或终端记录。`}><Link to="/vehicles"><Button theme="solid" icon={<IconSearch />}>重新查询</Button></Link></Empty></Card>;
  return <VehicleRecord detail={query.data} liveRealtime={realtime.data?.items[0]} telemetry={telemetry.data} telemetryPending={telemetry.isPending} telemetryError={telemetry.isError ? (telemetry.error instanceof Error ? telemetry.error.message : '请求失败') : undefined} monitorReturn={monitorReturn} onUpdated={() => { void query.refetch(); void realtime.refetch(); void telemetry.refetch(); }} />;
}