import { useQuery } from '@tanstack/react-query';
import { IconArrowRight, IconBox, IconChevronRight, IconRefresh, IconSearch } from '@douyinfe/semi-icons';
import { Button, Card, Empty, 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 { ProtocolTag } from '../shared/ProtocolTag';
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 { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';

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

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 [page, setPage] = useState(1);
  const [syncOpen, setSyncOpen] = useState(false);
  const [candidatesOpen, setCandidatesOpen] = useState(false);
  const [filtersCollapsed, setFiltersCollapsed] = useState(mobileLayout);
  const closeTimerRef = useRef<number>();
  const deferredKeyword = useDeferredValue(keyword.trim());
  const pageSize = mobileLayout ? 8 : 10;
  const directoryScope = useMemo(() => queryScopeKey({ keyword: deferredKeyword }), [deferredKeyword]);
  const candidateParams = useMemo(() => {
    const params = new URLSearchParams({ limit: String(pageSize), offset: String((page - 1) * pageSize) });
    if (deferredKeyword) params.set('keyword', deferredKeyword);
    return params;
  }, [deferredKeyword, 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 options = useMemo(() => mergeVehicleCandidates(candidates.data?.items ?? []), [candidates.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);
    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 submit = (event: FormEvent) => {
    event.preventDefault();
    setCandidatesOpen(false);
    if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
  };
  const vehicleScope = candidates.data ? `${candidates.data.total.toLocaleString('zh-CN')} 辆授权` : '授权范围';
  return <section className={`v2-vehicle-search-page v2-vehicle-directory-v3${syncOpen ? ' has-sync-panel' : ''}${candidatesOpen ? ' has-candidates' : ''}`}>
    <div className="v2-vehicle-discovery-shell">
      {!mobileLayout || administrator ? <WorkspaceCommandBar
        className={`v2-vehicle-command-bar${mobileLayout ? ' is-mobile-admin' : ''}`}
        ariaLabel={mobileLayout ? '车辆主档操作' : '查车操作'}
        title={mobileLayout ? '车辆主档' : '车辆快速定位'}
        description={mobileLayout ? '批量维护品牌、车型与运营属性' : '车牌、VIN 或手机号快速查车'}
        status={mobileLayout ? undefined : candidates.isPending ? '正在读取授权范围' : vehicleScope}
        statusColor={candidates.isError ? 'red' : 'blue'}
        actions={administrator ? <Button theme="light" type="tertiary" icon={mobileLayout ? <IconBox /> : undefined} onClick={() => setSyncOpen((value) => !value)}>{syncOpen ? '收起同步' : mobileLayout ? '主档同步' : '批量同步主档'}</Button> : null}
      /> : null}
      <WorkspaceFilterPanel
        className="v2-vehicle-query-panel"
        title={mobileLayout ? '车辆筛选' : '车辆定位'}
        description="车牌优先，VIN 辅助"
        mobileSummary={deferredKeyword ? `正在查找 ${deferredKeyword}` : candidates.data ? `${candidates.data.total.toLocaleString('zh-CN')} 辆授权车辆` : '正在读取授权范围'}
        expanded={!filtersCollapsed}
        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>
    </div>
    <Card className="v2-vehicle-recent-card" bodyStyle={{ padding: 0 }}>
      <WorkspacePanelHeader
        title={deferredKeyword ? '匹配车辆' : mobileLayout ? '授权车辆' : '授权车辆目录'}
        description={deferredKeyword ? '按当前搜索条件展示，可直接进入车辆数字档案' : '按照最新上报时间排列，分页浏览全部授权车辆'}
        meta={<span className="v2-vehicle-directory-summary">
          <Tag color={deferredKeyword ? 'blue' : 'grey'} type="light" size="small">{candidates.data ? `本页 ${formatZhNumber(pageVehicles.length)} 辆` : '授权范围'}</Tag>
          {candidates.data ? <Tag className="is-secondary" color="green" type="light" size="small">本页在线 {formatZhNumber(onlineOnPage)}</Tag> : null}
          {candidates.data ? <Tag className="is-secondary" color="blue" type="light" size="small">多源车辆 {formatZhNumber(multiSourceOnPage)}</Tag> : null}
        </span>}
        actions={<Button theme="borderless" type="tertiary" size="small" icon={<IconRefresh />} loading={candidates.isFetching} onClick={() => candidates.refetch()}>刷新</Button>}
      />
      {candidates.isFetching && !candidates.data
        ? <div className="v2-vehicle-recent-state" role="status"><span className="v2-spinner" /><span>正在读取授权车辆…</span></div>
        : 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" 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: (vehicleVin: string) => <Button className="v2-vehicle-directory-open" theme="borderless" type="primary" size="small" icon={<IconChevronRight />} iconPosition="right" aria-label={`打开 ${vehicleVin} 车辆档案`} onClick={(event) => { event.stopPropagation(); openVehicle(vehicleVin); }}>查看档案</Button>
                }
              ]}
              dataSource={pageVehicles}
              rowKey="vin"
              onRow={(vehicle) => vehicle ? ({
                tabIndex: 0,
                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}
            />
            : <Empty className="v2-vehicle-recent-empty" title={deferredKeyword ? '没有匹配车辆' : '暂无授权车辆'} description={deferredKeyword ? '调整车牌、VIN 或手机号后重试。' : '管理员分配车辆权限后会显示在这里。'} />}
      {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 }}><span role="status"><span className="v2-spinner" />正在加载主档同步工具…</span></Card>}><VehicleProfileSyncPanel onClose={() => setSyncOpen(false)} /></Suspense> : null}
  </section>;
}
