import { useQuery } from '@tanstack/react-query';
import { IconArrowRight, IconBox, IconChevronRight, IconRefresh, IconSearch } from '@douyinfe/semi-icons';
import { Button, Card, Input, Table, Tag } from '@douyinfe/semi-ui';
import { type FormEvent, lazy, Suspense, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { api } from '../../api/client';
import type { Page, VehicleCoverageRow } from '../../api/types';
import { usePlatformSession } from '../auth/AuthGate';
import { canAdminister } from '../auth/session';
import { formatZhNumber } from '../domain/formatters';
import { useMobileLayout } from '../hooks/useMobileLayout';
import { QUERY_MEMORY, queryScopeKey, retainPreviousPageWithinScope } from '../queryPolicy';
import { PanelEmpty, PanelLoading } from '../shared/AsyncState';
import { MobileFilterToggle } from '../shared/MobileFilterToggle';
import { MobileFilterSheet, MobileFilterSheetSection } from '../shared/MobileFilterSheet';
import { ProtocolTag } from '../shared/ProtocolTag';
import { SegmentedTabs } from '../shared/SegmentedTabs';
import { TablePagination } from '../shared/TablePagination';
import { VehicleCandidateList } from '../shared/VehicleCandidateList';
import { mergeVehicleCandidates } from '../shared/vehicleCandidates';
import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
import { WorkspaceMetricRail, type WorkspaceQueueMetricRailItem } from '../shared/WorkspaceMetricRail';

const VehicleProfileSyncPanel = lazy(() => import('./VehicleProfileSyncPanel'));

type VehicleDirectoryView = 'all' | 'online' | 'offline' | 'multi';

const vehicleDirectoryViews = [
  { key: 'all', label: '全部车辆' },
  { key: 'online', label: '当前在线' },
  { key: 'offline', label: '当前离线' },
  { key: 'multi', label: '多源车辆' }
] satisfies { key: VehicleDirectoryView; label: string }[];

function applyDirectoryView(params: URLSearchParams, view: VehicleDirectoryView) {
  if (view === 'online' || view === 'offline') params.set('online', view);
  if (view === 'multi') params.set('coverage', 'multi');
}

function resetWorkspaceScroll() {
  const targets = [
    document.scrollingElement,
    document.documentElement,
    document.body,
    document.querySelector<HTMLElement>('.v2-shell'),
    document.querySelector<HTMLElement>('.v2-main'),
    document.querySelector<HTMLElement>('.v2-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 vehicleLastSeenLabel(value?: string) {
  if (!value) return '暂无上报时间';
  const normalized = value.replace('T', ' ');
  return normalized.length >= 16 ? `${normalized.slice(5, 16)} 更新` : normalized;
}

export default function VehicleSearchWorkspace() {
  const navigate = useNavigate();
  const { session } = usePlatformSession();
  const mobileLayout = useMobileLayout();
  const [keyword, setKeyword] = useState('');
  const [draftKeyword, setDraftKeyword] = useState('');
  const [page, setPage] = useState(1);
  const [syncOpen, setSyncOpen] = useState(false);
  const [candidatesOpen, setCandidatesOpen] = useState(false);
  const [filtersCollapsed, setFiltersCollapsed] = useState(mobileLayout);
  const [directoryView, setDirectoryView] = useState<VehicleDirectoryView>('all');
  const closeTimerRef = useRef<number>();
  const deferredKeyword = useDeferredValue(keyword.trim());
  const deferredDraftKeyword = useDeferredValue(draftKeyword.trim());
  const mobileFiltersOpen = mobileLayout && !filtersCollapsed;
  const pageSize = mobileLayout ? 8 : 10;
  const directoryScope = useMemo(() => queryScopeKey({ keyword: deferredKeyword, view: directoryView }), [deferredKeyword, directoryView]);
  const candidateParams = useMemo(() => {
    const params = new URLSearchParams({ limit: String(pageSize), offset: String((page - 1) * pageSize) });
    if (deferredKeyword) params.set('keyword', deferredKeyword);
    applyDirectoryView(params, directoryView);
    return params;
  }, [deferredKeyword, directoryView, page, pageSize]);
  const candidates = useQuery<Page<VehicleCoverageRow>>({
    queryKey: ['vehicle-directory', directoryScope, pageSize, page],
    queryFn: ({ signal }) => api.vehicleCoverage(candidateParams, signal),
    placeholderData: retainPreviousPageWithinScope<Page<VehicleCoverageRow>>(directoryScope),
    staleTime: 30_000,
    gcTime: QUERY_MEMORY.optionGcTime
  });
  const mobileCandidateParams = useMemo(() => {
    const params = new URLSearchParams({ limit: '6', offset: '0' });
    if (deferredDraftKeyword) params.set('keyword', deferredDraftKeyword);
    applyDirectoryView(params, directoryView);
    return params;
  }, [deferredDraftKeyword, directoryView]);
  const mobileCandidates = useQuery<Page<VehicleCoverageRow>>({
    queryKey: ['vehicle-mobile-candidates', queryScopeKey({ keyword: deferredDraftKeyword, view: directoryView })],
    queryFn: ({ signal }) => api.vehicleCoverage(mobileCandidateParams, signal),
    enabled: mobileFiltersOpen && Boolean(deferredDraftKeyword),
    staleTime: 30_000,
    gcTime: QUERY_MEMORY.optionGcTime
  });
  const options = useMemo(() => mergeVehicleCandidates(candidates.data?.items ?? []), [candidates.data?.items]);
  const mobileOptions = useMemo(() => mergeVehicleCandidates(mobileCandidates.data?.items ?? []).slice(0, 6), [mobileCandidates.data?.items]);
  const pageVehicles = useMemo(() => options.slice(0, pageSize), [options, pageSize]);
  const total = candidates.data?.total ?? 0;
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
  const onlineOnPage = useMemo(() => pageVehicles.filter((vehicle) => vehicle.online).length, [pageVehicles]);
  const multiSourceOnPage = useMemo(() => pageVehicles.filter((vehicle) => vehicle.protocols.length > 1).length, [pageVehicles]);
  const administrator = canAdminister(session);
  useEffect(() => () => window.clearTimeout(closeTimerRef.current), []);
  useEffect(() => {
    setFiltersCollapsed(mobileLayout);
    setCandidatesOpen(false);
  }, [mobileLayout]);
  const openCandidates = () => {
    window.clearTimeout(closeTimerRef.current);
    if (!mobileLayout) setCandidatesOpen(Boolean(keyword.trim()));
  };
  const closeCandidates = () => {
    window.clearTimeout(closeTimerRef.current);
    closeTimerRef.current = window.setTimeout(() => setCandidatesOpen(false), 140);
  };
  const openVehicle = (value: string) => {
    const normalized = value.trim();
    if (!normalized) return;
    setCandidatesOpen(false);
    if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
    resetWorkspaceScroll();
    navigate(`/vehicles/${encodeURIComponent(normalized)}`);
    window.queueMicrotask(resetWorkspaceScroll);
    window.requestAnimationFrame(resetWorkspaceScroll);
    window.setTimeout(resetWorkspaceScroll, 120);
  };
  const openMobileFilters = () => {
    setDraftKeyword(keyword);
    setCandidatesOpen(false);
    setFiltersCollapsed(false);
  };
  const closeMobileFilters = () => {
    setDraftKeyword(keyword);
    setCandidatesOpen(false);
    setFiltersCollapsed(true);
  };
  const applyMobileFilters = () => {
    setKeyword(draftKeyword.trim());
    setPage(1);
    setCandidatesOpen(false);
    setFiltersCollapsed(true);
  };
  const resetMobileDraft = () => {
    setDraftKeyword('');
    setCandidatesOpen(false);
  };
  const submit = (event: FormEvent) => {
    event.preventDefault();
    setCandidatesOpen(false);
    if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
  };
  const submitMobileFilters = (event: FormEvent) => {
    event.preventDefault();
    applyMobileFilters();
  };
  const selectDirectoryView = (nextView: VehicleDirectoryView) => {
    setDirectoryView(nextView);
    setPage(1);
    setCandidatesOpen(false);
  };
  const directoryViewLabel = vehicleDirectoryViews.find((item) => item.key === directoryView)?.label ?? '全部车辆';
  const vehicleScope = candidates.data ? `${candidates.data.total.toLocaleString('zh-CN')} 辆授权` : '授权范围';
  const mobileFilterSummary = deferredKeyword
    ? `${deferredKeyword}${directoryView === 'all' ? '' : ` · ${directoryViewLabel}`} · ${candidates.data ? `${candidates.data.total.toLocaleString('zh-CN')} 辆匹配` : '正在查找'}`
    : candidates.data
      ? directoryView === 'all' ? `${candidates.data.total.toLocaleString('zh-CN')} 辆授权车辆` : `${directoryViewLabel} · ${candidates.data.total.toLocaleString('zh-CN')} 辆`
      : '正在读取授权范围';
  const directoryMetrics: WorkspaceQueueMetricRailItem[] = [
    {
      label: deferredKeyword ? '匹配车辆' : directoryView === 'all' ? '授权车辆' : directoryViewLabel,
      value: <>{candidates.data ? formatZhNumber(total) : '—'}<i className="v2-vehicle-directory-unit">辆</i></>,
      note: deferredKeyword || directoryView !== 'all' ? '当前视图' : '账号范围',
      tone: 'primary',
      emphasis: 'primary'
    },
    {
      label: '本页在线',
      value: <>{candidates.data ? formatZhNumber(onlineOnPage) : '—'}<i className="v2-vehicle-directory-unit">辆</i></>,
      note: candidates.data ? `本页 ${formatZhNumber(pageVehicles.length)} 辆` : '正在读取',
      tone: 'success',
      emphasis: 'primary'
    },
    {
      label: '本页多源',
      value: <>{candidates.data ? formatZhNumber(multiSourceOnPage) : '—'}<i className="v2-vehicle-directory-unit">辆</i></>,
      note: '2+ 协议来源',
      tone: 'primary',
      emphasis: 'secondary'
    }
  ];
  const directoryTitle = deferredKeyword
    ? '匹配车辆'
    : directoryView === 'all'
      ? mobileLayout ? '授权车辆' : '授权车辆目录'
      : directoryViewLabel;
  const directoryDescription = deferredKeyword
    ? '按当前搜索条件展示，可直接进入车辆数字档案'
    : directoryView === 'all'
      ? '按照最新上报时间排列，分页浏览全部授权车辆'
      : `仅展示${directoryViewLabel}，按最新上报时间排列`;
  return <section className={`v2-vehicle-search-page v2-vehicle-directory-v3${syncOpen ? ' has-sync-panel' : ''}${!mobileLayout && candidatesOpen ? ' has-candidates' : ''}`}>
    <div className="v2-vehicle-discovery-shell">
      {!mobileLayout || administrator ? <WorkspaceCommandBar
        className={`v2-vehicle-command-bar${mobileLayout ? ' is-mobile-admin' : ''}`}
        ariaLabel={mobileLayout ? '车辆主档操作' : '查车操作'}
        eyebrow={mobileLayout ? '车辆治理' : undefined}
        icon={mobileLayout ? <IconBox /> : <IconSearch />}
        title={mobileLayout ? '车辆主档' : '查找车辆'}
        description={mobileLayout ? '批量维护品牌、车型与运营属性' : '车牌、VIN 或手机号快速查车'}
        status={mobileLayout ? undefined : candidates.isPending ? '正在读取授权范围' : vehicleScope}
        statusColor={candidates.isError ? 'red' : 'blue'}
        actions={<div className="v2-vehicle-command-actions">
          {!mobileLayout ? <SegmentedTabs
            className="v2-vehicle-directory-view-tabs"
            ariaLabel="车辆目录视图"
            value={directoryView}
            items={vehicleDirectoryViews}
            onChange={selectDirectoryView}
            variant="filled"
          /> : null}
          {administrator ? <Button theme="light" type="tertiary" icon={mobileLayout ? <IconBox /> : undefined} onClick={() => setSyncOpen((value) => !value)}>{syncOpen ? '收起同步' : mobileLayout ? '主档同步' : '批量同步主档'}</Button> : null}
        </div>}
      /> : null}
      {mobileLayout ? <div className="v2-vehicle-mobile-discovery">
        <MobileFilterToggle
          title="查找车辆"
          summary={mobileFilterSummary}
          expanded={mobileFiltersOpen}
          controls="v2-vehicle-mobile-filter-dialog"
          expandedLabel="关闭"
          collapsedLabel="查找"
          ariaLabel={`${mobileFiltersOpen ? '关闭' : '打开'}车辆搜索：${mobileFilterSummary}`}
          onToggle={mobileFiltersOpen ? closeMobileFilters : openMobileFilters}
        />
        <MobileFilterSheet
          className="v2-vehicle-mobile-filter-sidesheet"
          visible={mobileFiltersOpen}
          height="min(72dvh, 610px)"
          ariaLabel="车辆搜索"
          dialogId="v2-vehicle-mobile-filter-dialog"
          closeLabel="关闭车辆搜索"
          title="查找车辆"
          description="车牌优先，支持 VIN 与终端手机号"
          summaryItems={[
            {
              label: '授权范围',
              value: candidates.data ? `${candidates.data.total.toLocaleString('zh-CN')} 辆` : '读取中',
              detail: '当前账号可见',
              tone: 'primary'
            },
            {
              label: '当前条件',
              value: draftKeyword.trim() || '全部车辆',
              detail: draftKeyword.trim() ? '车牌 / VIN / 终端' : '浏览完整目录'
            },
            {
              label: '快速结果',
              value: deferredDraftKeyword ? mobileCandidates.isFetching ? '查找中' : `${mobileCandidates.data?.total ?? 0} 辆` : '待输入',
              detail: '最多展示 6 辆',
              tone: deferredDraftKeyword ? 'success' : 'neutral'
            }
          ]}
          onCancel={closeMobileFilters}
          secondaryAction={{ label: '重置范围', onClick: resetMobileDraft }}
          primaryAction={{ label: '应用搜索', onClick: applyMobileFilters }}
        >
          <form className="v2-vehicle-mobile-filter-form" onSubmit={submitMobileFilters}>
            <MobileFilterSheetSection ariaLabel="车辆搜索条件" title="车辆身份" description="输入关键词可直接打开候选车辆，或应用到下方目录。">
              <label>
                <span>车牌 / VIN / 终端手机号</span>
                <Input
                  aria-label="搜索车辆"
                  aria-controls="v2-vehicle-mobile-search-options"
                  aria-expanded={Boolean(deferredDraftKeyword)}
                  prefix={<IconSearch />}
                  showClear
                  value={draftKeyword}
                  onChange={setDraftKeyword}
                  placeholder="输入车牌 / VIN / 终端手机号"
                  autoComplete="off"
                />
              </label>
              {deferredDraftKeyword ? <VehicleCandidateList
                id="v2-vehicle-mobile-search-options"
                className="v2-vehicle-mobile-candidates"
                items={mobileOptions}
                loading={mobileCandidates.isFetching}
                loadingText="正在搜索授权车辆"
                error={mobileCandidates.isError ? (mobileCandidates.error instanceof Error ? mobileCandidates.error.message : '车辆候选加载失败') : undefined}
                onRetry={() => mobileCandidates.refetch()}
                emptyText="没有匹配的授权车辆"
                header="快速结果"
                meta={mobileCandidates.data ? `${mobileCandidates.data.total.toLocaleString('zh-CN')} 辆匹配` : '授权范围'}
                showProtocols
                layout="list"
                actionLabel="打开"
                onSelect={(vehicle) => openVehicle(vehicle.vin)}
              /> : <div className="v2-vehicle-mobile-filter-hint"><IconSearch /><span><strong>快速定位车辆</strong><small>输入完整或部分车牌即可查看候选。</small></span></div>}
            </MobileFilterSheetSection>
          </form>
        </MobileFilterSheet>
      </div> : <WorkspaceFilterPanel
        className="v2-vehicle-query-panel"
        title="车辆定位"
        description="车牌优先，VIN 辅助"
        mobileSummary={mobileFilterSummary}
        expanded
        status={deferredKeyword ? candidates.isFetching ? '正在查找' : `${options.length} 辆匹配` : vehicleScope}
        statusColor={deferredKeyword ? 'blue' : 'grey'}
        collapsedLabel="修改"
        onToggle={() => setFiltersCollapsed((value) => !value)}
      >
        <form className={`v2-vehicle-search-form${filtersCollapsed ? ' is-mobile-collapsed' : ''}`} onSubmit={submit}>
          <div className={`v2-vehicle-search-picker${candidatesOpen ? ' is-open' : ''}`}>
            <Input
              aria-label="搜索车辆"
              aria-controls="v2-vehicle-search-options"
              aria-expanded={candidatesOpen}
              prefix={<IconSearch />}
              value={keyword}
              onChange={(value) => { setKeyword(value); setPage(1); setCandidatesOpen(Boolean(value.trim())); }}
              onFocus={openCandidates}
              onBlur={closeCandidates}
              placeholder="输入车牌 / VIN / 终端手机号"
              autoComplete="off"
            />
          </div>
          <Button theme="solid" htmlType="submit" icon={<IconArrowRight />} iconPosition="right">查询车辆</Button>
          {candidatesOpen && deferredKeyword ? <VehicleCandidateList
            id="v2-vehicle-search-options"
            className="v2-vehicle-search-options"
            items={options}
            loading={candidates.isFetching}
            loadingText="正在搜索授权车辆"
            error={candidates.isError ? (candidates.error instanceof Error ? candidates.error.message : '车辆候选加载失败') : undefined}
            onRetry={() => candidates.refetch()}
            emptyText="没有匹配的授权车辆"
            header="车辆候选"
            meta="车牌优先 · VIN 辅助"
            showProtocols
            layout={mobileLayout ? 'list' : 'grid'}
            onSelect={(vehicle) => openVehicle(vehicle.vin)}
          /> : null}
        </form>
      </WorkspaceFilterPanel>}
      {mobileLayout ? <SegmentedTabs
        className="v2-vehicle-directory-view-tabs"
        ariaLabel="车辆目录视图"
        value={directoryView}
        items={vehicleDirectoryViews}
        onChange={selectDirectoryView}
        variant="filled"
      /> : null}
    </div>
    <Card className="v2-vehicle-recent-card" bodyStyle={{ padding: 0 }}>
      <WorkspaceMetricRail
        variant="queue"
        ariaLabel="车辆目录摘要"
        className="v2-vehicle-directory-metric-rail"
        items={directoryMetrics}
        context={<div className="v2-vehicle-directory-context">
          <span><h5>{directoryTitle}</h5><small>{directoryDescription}</small></span>
          <span className="v2-vehicle-directory-context-actions">
            <Tag color="blue" type="light" size="small">第 {page} / {totalPages} 页</Tag>
            <Button theme="borderless" type="tertiary" size="small" icon={<IconRefresh />} loading={candidates.isFetching} aria-label="刷新车辆目录" onClick={() => candidates.refetch()}>刷新</Button>
          </span>
        </div>}
      />
      {candidates.isFetching && !candidates.data
        ? <PanelLoading className="v2-vehicle-directory-loading" compact title="正在读取授权车辆" description="车辆目录返回后会自动显示。" />
        : candidates.isError
          ? <div className="v2-vehicle-recent-state is-error" role="alert"><span>{candidates.error instanceof Error ? candidates.error.message : '授权车辆加载失败'}</span><Button size="small" theme="light" onClick={() => candidates.refetch()}>重新加载</Button></div>
          : pageVehicles.length
            ? mobileLayout ? <div className="v2-vehicle-recent-grid" role="list" aria-label={deferredKeyword ? '匹配车辆' : '授权车辆目录'}>
              {pageVehicles.map((vehicle) => <div key={vehicle.vin} className={`v2-vehicle-recent-item-shell ${vehicle.online ? 'is-online' : 'is-offline'}`} role="listitem">
                <Button
                  className="v2-vehicle-recent-item"
                  theme="borderless"
                  type="tertiary"
                  aria-label={`打开 ${vehicle.plate || '未绑定车牌'} 车辆档案`}
                  onClick={() => openVehicle(vehicle.vin)}
                >
                  <span className="v2-vehicle-recent-identity">
                    <strong>{vehicle.plate || '未绑定车牌'}</strong>
                    <small>{vehicle.vin}</small>
                  </span>
                  <span className="v2-vehicle-recent-status">
                    <Tag color={vehicle.online ? 'green' : 'grey'} type="light" size="small">{vehicle.online ? '在线' : '离线'}</Tag>
                    <small>{vehicleLastSeenLabel(vehicle.lastSeen)}</small>
                  </span>
                  <span className="v2-vehicle-recent-protocols">{vehicle.protocols.slice(0, 2).map((protocol) => <ProtocolTag key={protocol} protocol={protocol} compact />)}</span>
                  <IconChevronRight className="v2-vehicle-recent-arrow" />
                </Button>
              </div>)}
            </div> : <Table
              className="v2-vehicle-directory-table"
              columns={[
                {
                  title: '车辆',
                  dataIndex: 'plate',
                  width: 220,
                  render: (_value: string, vehicle: VehicleCoverageRow) => <span className="v2-vehicle-directory-identity"><strong>{vehicle.plate || '未绑定车牌'}</strong><small>{vehicle.vin}</small></span>
                },
                {
                  title: '品牌 / 终端',
                  dataIndex: 'oem',
                  width: 260,
                  render: (_value: string, vehicle: VehicleCoverageRow) => <span className="v2-vehicle-directory-profile"><strong>{vehicle.oem || '品牌待维护'}</strong><small>{vehicle.phone || '暂无终端手机号'}</small></span>
                },
                {
                  title: '实时状态',
                  dataIndex: 'online',
                  width: 180,
                  render: (_value: boolean, vehicle: VehicleCoverageRow) => <span className="v2-vehicle-directory-status"><Tag color={vehicle.online ? 'green' : 'grey'} type="light" size="small">{vehicle.online ? '在线' : '离线'}</Tag><small>{vehicleLastSeenLabel(vehicle.lastSeen)}</small></span>
                },
                {
                  title: '协议来源',
                  dataIndex: 'protocols',
                  render: (protocols: string[]) => <span className="v2-vehicle-directory-protocols">{protocols.length ? protocols.slice(0, 3).map((protocol) => <ProtocolTag key={protocol} protocol={protocol} compact />) : <span>暂无来源</span>}</span>
                },
                {
                  title: '',
                  dataIndex: 'vin',
                  width: 116,
                  align: 'right',
                  render: () => <span className="v2-vehicle-directory-open" aria-hidden="true">查看档案<IconChevronRight /></span>
                }
              ]}
              dataSource={pageVehicles}
              rowKey="vin"
              onRow={(vehicle) => vehicle ? ({
                className: vehicle.online ? 'is-online' : 'is-offline',
                role: 'button',
                tabIndex: 0,
                'aria-label': `打开 ${vehicle.plate || vehicle.vin} 车辆档案`,
                'data-testid': `vehicle-directory-row-${vehicle.vin}`,
                onClick: () => openVehicle(vehicle.vin),
                onKeyDown: (event) => {
                  if (event.key !== 'Enter' && event.key !== ' ') return;
                  event.preventDefault();
                  openVehicle(vehicle.vin);
                }
              }) : ({})}
              pagination={false}
              loading={candidates.isFetching}
              empty={null}
            />
            : <PanelEmpty
                className="v2-vehicle-recent-empty"
                tone="primary"
                icon={<IconSearch />}
                title={deferredKeyword ? '没有匹配车辆' : '暂无授权车辆'}
                description={deferredKeyword ? '当前范围没有结果，可清除搜索返回完整车辆目录。' : '管理员分配车辆权限后会显示在这里。'}
                action={deferredKeyword
                  ? <Button theme="light" type="primary" icon={<IconRefresh />} onClick={() => { setKeyword(''); setDraftKeyword(''); setPage(1); setCandidatesOpen(false); }}>清除搜索</Button>
                  : <Button theme="light" type="primary" icon={<IconRefresh />} loading={candidates.isFetching} onClick={() => candidates.refetch()}>刷新车辆目录</Button>}
              />}
      {total > 0 ? <footer className="v2-vehicle-directory-pagination"><TablePagination page={page} totalPages={totalPages} info={`共 ${total.toLocaleString('zh-CN')} 辆 · 本页 ${pageVehicles.length.toLocaleString('zh-CN')} 辆`} disabled={candidates.isFetching} onPageChange={(next) => { setPage(next); setCandidatesOpen(false); }} /></footer> : null}
    </Card>
    {syncOpen ? <Suspense fallback={<Card className="v2-profile-sync-panel v2-profile-sync-loading" bodyStyle={{ padding: 0 }}><PanelLoading compact title="正在加载主档同步工具" description="同步配置就绪后会自动显示。" /></Card>}><VehicleProfileSyncPanel onClose={() => setSyncOpen(false)} /></Suspense> : null}
  </section>;
}