// @vitest-environment jsdom

import React from 'react';
import {
  afterAll,
  afterEach,
  beforeAll,
  describe,
  expect,
  expectTypeOf,
  it,
  vi,
} from 'vitest';
import {
  DetailRecordFilterBar,
  DetailRecordFooter,
  DetailRecordTable,
  type DetailRecordColumn,
} from '../../src/prototypes/vehicle-management/components/DetailRecordPrimitives';
import { DetailInsuranceRecordsTab } from '../../src/prototypes/vehicle-management/components/DetailInsuranceRecordsTab';
import {
  DetailAccidentRecordsTab,
  DetailAnnualReviewRecordsTab,
  DetailLeaseRecordsTab,
  DetailMovementRecordsTab,
  DetailTransferRecordsTab,
  DetailViolationRecordsTab,
} from '../../src/prototypes/vehicle-management/components/DetailRecordTabs';
import { DetailFaultRecordsTab } from '../../src/prototypes/vehicle-management/components/DetailFaultRecordsTab';
import vehicles from '../../src/prototypes/vehicle-management/data/vehicles.json';
import type { VehicleRecord } from '../../src/prototypes/vehicle-management/types';
import {
  buttonByName,
  click,
  renderReact,
  type RenderReactResult,
} from './detailTestUtils';

interface FixtureRow {
  id: string;
  code: string;
  status: string;
}

const renderCode = vi.fn((row: FixtureRow) => (
  <span data-record-code>{`编号：${row.code}`}</span>
));
const renderStatus = vi.fn((row: FixtureRow) => (
  <strong data-record-status>{`状态标签：${row.status || '—'}`}</strong>
));

const columns: DetailRecordColumn<FixtureRow>[] = [
  {
    key: 'code',
    label: '编号',
    width: 128,
    className: 'code',
    render: renderCode,
  },
  {
    key: 'status',
    label: '状态',
    render: renderStatus,
  },
];

let rendered: RenderReactResult | undefined;
const actEnvironment = globalThis as typeof globalThis & {
  IS_REACT_ACT_ENVIRONMENT?: boolean;
};
const originalActEnvironment = actEnvironment.IS_REACT_ACT_ENVIRONMENT;

beforeAll(() => {
  actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
});

afterAll(() => {
  if (originalActEnvironment === undefined) {
    Reflect.deleteProperty(actEnvironment, 'IS_REACT_ACT_ENVIRONMENT');
  } else {
    actEnvironment.IS_REACT_ACT_ENVIRONMENT = originalActEnvironment;
  }
});

afterEach(async () => {
  await rendered?.unmount();
  rendered = undefined;
  vi.clearAllMocks();
});

describe('DetailRecordTable', () => {
  it('keeps width numeric and render required in the column type', () => {
    type Column = DetailRecordColumn<FixtureRow>;
    type HasRequiredRenderer = Column extends {
      render: (row: FixtureRow) => React.ReactNode;
    } ? true : false;

    expectTypeOf<Column['width']>().toEqualTypeOf<number | undefined>();
    expectTypeOf<Column['render']>().toEqualTypeOf<
      (row: FixtureRow) => React.ReactNode
    >();
    expectTypeOf<HasRequiredRenderer>().toEqualTypeOf<true>();
  });

  it('renders a named vm table with scoped headers, column widths, and cell renderers', async () => {
    const rows: FixtureRow[] = [
      { id: 'row-1', code: 'REC-001', status: '正常' },
      { id: 'row-2', code: 'REC-002', status: '' },
    ];
    rendered = await renderReact(
      <DetailRecordTable
        title="测试记录"
        columns={columns}
        rows={rows}
      />,
    );

    const table = rendered.container.querySelector<HTMLTableElement>('table');
    const card = rendered.container.querySelector<HTMLElement>('.va-record-table-card');
    const tableWrap = card?.querySelector<HTMLElement>('.va-table-wrap');
    const headers = Array.from(table?.querySelectorAll('th') ?? []);
    const bodyRows = Array.from(table?.querySelectorAll('tbody tr') ?? []);

    expect(card?.classList.contains('vm-table-card')).toBe(true);
    expect(tableWrap?.classList.contains('vm-table-wrap')).toBe(true);
    expect(tableWrap?.classList.contains('vm-table-wrap--wide')).toBe(true);
    expect(table?.classList.contains('vm-table')).toBe(true);
    expect(table?.classList.contains('va-record-table')).toBe(true);
    expect(table?.querySelector('caption')?.textContent).toBe('测试记录');
    expect(headers.map((header) => header.textContent?.trim())).toEqual(['编号', '状态']);
    expect(headers.every((header) => header.scope === 'col')).toBe(true);
    expect(headers[0].style.minWidth).toBe('128px');
    expect(bodyRows[0].querySelector('[data-record-code]')?.textContent).toBe('编号：REC-001');
    expect(bodyRows[0].querySelector('[data-record-status]')?.textContent).toBe('状态标签：正常');
    expect(bodyRows[1].querySelector('[data-record-status]')?.textContent).toBe('状态标签：—');
    expect(bodyRows[0].querySelector('td')?.classList.contains('code')).toBe(true);
    expect(renderCode).toHaveBeenCalledTimes(2);
    expect(renderCode).toHaveBeenNthCalledWith(1, rows[0]);
    expect(renderCode).toHaveBeenNthCalledWith(2, rows[1]);
    expect(renderStatus).toHaveBeenCalledTimes(2);
  });

  it('renders a clear status fallback instead of a malformed table with no columns', async () => {
    rendered = await renderReact(
      <DetailRecordTable<FixtureRow>
        title="动态记录"
        columns={[]}
        rows={[{ id: 'row-1', code: 'REC-001', status: '正常' }]}
      />,
    );

    const status = rendered.container.querySelector<HTMLElement>('[role="status"]');

    expect(rendered.container.querySelector('table')).toBeNull();
    expect(status?.textContent?.trim()).toBe('暂无可显示字段');
    expect(status?.closest('.va-record-table-card')).not.toBeNull();
  });

  it('renders one spanning empty cell with the default text', async () => {
    rendered = await renderReact(
      <DetailRecordTable title="空记录" columns={columns} rows={[]} />,
    );

    const cells = rendered.container.querySelectorAll<HTMLTableCellElement>('tbody td');
    const emptyCell = cells.item(0);

    expect(cells).toHaveLength(1);
    expect(emptyCell.colSpan).toBe(columns.length);
    expect(emptyCell.textContent).toBe('暂无数据');
  });
});

describe('DetailRecordFooter', () => {
  it('wraps the common pagination with its total and named navigation', async () => {
    rendered = await renderReact(
      <DetailRecordFooter
        page={1}
        pageSize={10}
        total={21}
        onPageChange={vi.fn()}
        onPageSizeChange={vi.fn()}
      />,
    );

    const footer = rendered.container.querySelector('.vm-table-footer--compact');
    const navigation = footer?.querySelector<HTMLElement>(
      '[role="navigation"][aria-label="表格分页"]',
    );

    expect(footer?.classList.contains('vm-table-footer')).toBe(true);
    expect(footer?.classList.contains('va-record-footer')).toBe(true);
    expect(navigation).not.toBeNull();
    expect(navigation?.textContent?.replace(/\s+/g, ' ').trim()).toContain('共 21 条');
    expect(buttonByName(navigation as HTMLElement, '上一页').disabled).toBe(true);
    expect(buttonByName(navigation as HTMLElement, '下一页').disabled).toBe(false);
  });
});

describe('DetailRecordFilterBar', () => {
  it('is a named region with a visible header, V2 actions, and expanded controlled content', async () => {
    rendered = await renderReact(
      <DetailRecordFilterBar title="记录" onQuery={vi.fn()} onReset={vi.fn()}>
        <label>
          状态
          <input name="status" />
        </label>
      </DetailRecordFilterBar>,
    );

    const region = rendered.container.querySelector<HTMLElement>(
      'section[role="region"][aria-label="记录筛选"]',
    );
    const content = region?.querySelector<HTMLElement>('.va-record-filter__content');
    const toggle = buttonByName(region as HTMLElement, '收起筛选');
    const reset = buttonByName(region as HTMLElement, '重置');
    const query = buttonByName(region as HTMLElement, '查询');
    const input = region?.querySelector<HTMLInputElement>('input[name="status"]');

    expect(region?.querySelector('.va-record-filter__header h3')?.textContent).toBe('记录筛选');
    expect(region?.classList.contains('is-expanded')).toBe(true);
    expect(content?.hidden).toBe(false);
    expect(content?.id).toBeTruthy();
    expect(toggle.getAttribute('aria-controls')).toBe(content?.id);
    expect(toggle.getAttribute('aria-expanded')).toBe('true');
    expect(toggle.classList.contains('v2-btn--ghost')).toBe(true);
    expect(toggle.classList.contains('v2-btn--lg')).toBe(true);
    expect(input).not.toBeNull();
    expect(input?.labels?.item(0)?.textContent?.trim()).toBe('状态');
    expect(reset.type).toBe('button');
    expect(reset.classList.contains('v2-btn--secondary')).toBe(true);
    expect(reset.classList.contains('v2-btn--lg')).toBe(true);
    expect(query.type).toBe('button');
    expect(query.classList.contains('v2-btn--primary')).toBe(true);
    expect(query.classList.contains('v2-btn--lg')).toBe(true);
  });

  it('calls query before hiding the content and can reopen it', async () => {
    let region: HTMLElement | null = null;
    const onQuery = vi.fn(() => {
      expect(region?.classList.contains('is-expanded')).toBe(true);
    });
    rendered = await renderReact(
      <DetailRecordFilterBar title="记录" onQuery={onQuery} onReset={vi.fn()}>
        <input aria-label="编号" />
      </DetailRecordFilterBar>,
    );
    region = rendered.container.querySelector<HTMLElement>('.va-record-filter');
    const content = region?.querySelector<HTMLElement>('.va-record-filter__content');
    const query = buttonByName(region as HTMLElement, '查询');

    query.focus();
    expect(document.activeElement).toBe(query);
    await click(query);

    expect(onQuery).toHaveBeenCalledOnce();
    expect(region?.classList.contains('is-expanded')).toBe(false);
    expect(content?.hidden).toBe(true);
    const reopen = buttonByName(region as HTMLElement, '展开筛选');
    expect(reopen.getAttribute('aria-expanded')).toBe('false');
    expect(document.activeElement).toBe(reopen);
    expect(reopen.closest('[hidden]')).toBeNull();

    await click(reopen);

    expect(region?.classList.contains('is-expanded')).toBe(true);
    expect(content?.hidden).toBe(false);
    expect(buttonByName(region as HTMLElement, '收起筛选').getAttribute('aria-expanded')).toBe('true');
  });

  it('calls reset before hiding the content in a fresh render', async () => {
    let region: HTMLElement | null = null;
    const onReset = vi.fn(() => {
      expect(region?.classList.contains('is-expanded')).toBe(true);
    });
    rendered = await renderReact(
      <DetailRecordFilterBar title="记录" onQuery={vi.fn()} onReset={onReset}>
        <input aria-label="编号" />
      </DetailRecordFilterBar>,
    );
    region = rendered.container.querySelector<HTMLElement>('.va-record-filter');
    const content = region?.querySelector<HTMLElement>('.va-record-filter__content');
    const reset = buttonByName(region as HTMLElement, '重置');

    reset.focus();
    expect(document.activeElement).toBe(reset);
    await click(reset);

    expect(onReset).toHaveBeenCalledOnce();
    expect(region?.classList.contains('is-expanded')).toBe(false);
    expect(content?.hidden).toBe(true);
    const reopen = buttonByName(region as HTMLElement, '展开筛选');
    expect(reopen.getAttribute('aria-expanded')).toBe('false');
    expect(document.activeElement).toBe(reopen);
    expect(reopen.closest('[hidden]')).toBeNull();
  });
});

function tableHeaders(root: ParentNode): string[] {
  return Array.from(root.querySelectorAll('th'), (cell) => cell.textContent?.trim() ?? '');
}

describe('vehicle detail record contracts', () => {
  it('renders the approved headers and filters for lease through annual review', async () => {
    const onToast = vi.fn();
    const cases = [
      {
        element: (
          <DetailLeaseRecordsTab
            onToast={onToast}
            rows={[{
              id: 'lease-1',
              plateNo: '粤A00001',
              contractNo: 'HT-001',
              projectName: '示例项目',
              customerName: '示例客户',
              businessType: '租赁',
              deliveryDate: '2026-01-01',
              deliveryPerson: '张三',
              returnDate: '',
              returnPerson: '',
            }]}
          />
        ),
        headers: ['合同编码', '项目名称', '客户名称', '业务类型', '交车日期', '交车人', '还车日期', '还车人'],
        filters: ['合同编码', '项目名称', '客户名称', '业务类型'],
      },
      {
        element: (
          <DetailAccidentRecordsTab
            onToast={onToast}
            rows={[{
              id: 'accident-1',
              accidentCode: 'ACC-001',
              accidentTime: '2026-01-02 10:00',
              accidentLocation: '示例地点',
              accidentType: '追尾',
              customerName: '示例客户',
              accidentLevel: '一般',
              ourDamageAmount: 100,
              theirDamageAmount: 200,
              responsibility: '我方全责',
              status: '已结案',
              closedTime: '2026-01-03 10:00',
            }]}
          />
        ),
        headers: ['事故编码', '事故时间', '事故地点', '事故类型', '客户名称', '我方定损金额', '对方定损金额', '责任划分', '事故状态', '结案时间'],
        filters: ['事故时间', '客户名称', '事故等级', '事故状态'],
      },
      {
        element: (
          <DetailViolationRecordsTab
            onToast={onToast}
            rows={[{
              id: 'violation-1',
              violationTime: '2026-01-04',
              violationLocation: '示例地点',
              violationBehavior: '违反禁令标志',
              pointsDeducted: 1,
              fineAmount: 100,
              paymentStatus: '已缴费',
              processed: '已处理',
              collectionUnit: '示例单位',
              customerName: '示例客户',
            }]}
          />
        ),
        headers: ['违法时间', '违法地点', '违法行为', '扣分', '罚款金额', '缴费状态', '是否处理', '采集单位'],
        filters: ['违法时间', '客户名称', '缴费状态', '是否处理'],
      },
      {
        element: (
          <DetailMovementRecordsTab
            onToast={onToast}
            rows={[{
              id: 'movement-1',
              startDate: '2026-01-05',
              estimatedEndDate: '2026-01-06',
              status: '已完成',
              destinationType: '维修站',
              destinationName: '示例维修站',
              movementType: '年审',
              estimatedMileageKm: 10,
              startMileageKm: 100,
              startBatteryKwh: 80,
              startHydrogenPct: 70,
              endMileageKm: 110,
              endBatteryKwh: 75,
              endHydrogenPct: 65,
              createdBy: '张三',
              createdAt: '2026-01-05 09:00',
            }]}
          />
        ),
        headers: ['异动开始日期', '异动预计结束日期', '异动状态', '异动目的地', '目的地名称', '异动类型', '预计异动里程 (km)', '异动开始里程 (km)', '异动开始电量 (kWh)', '异动开始氢量', '异动结束里程 (km)', '异动结束电量 (kWh)', '异动结束氢量', '创建人', '创建时间'],
        filters: ['异动开始日期', '异动目的地', '异动类型'],
      },
      {
        element: (
          <DetailTransferRecordsTab
            onToast={onToast}
            rows={[{
              id: 'transfer-1',
              transferDate: '2026-01-07',
              transferOutPerson: '张三',
              recipientPerson: '李四',
              departureArea: '出发区域',
              receivingArea: '接收区域',
              transferMethod: '自驾',
              departureParking: '出发停车场',
              receivingParking: '接收停车场',
              receiveDate: '2026-01-07',
            }]}
          />
        ),
        headers: ['调拨日期', '调出人', '接收人', '出发区域', '接收区域', '调拨方式', '出发停车场', '接收停车场', '接收日期'],
        filters: ['调拨日期', '调出人', '接收人'],
      },
      {
        element: (
          <DetailAnnualReviewRecordsTab
            onToast={onToast}
            rows={[{
              id: 'annual-1',
              inspectionValidUntil: '2027-01-01',
              inspectionStation: '检测站',
              inspectionCost: 280,
              m2Station: '二保站',
              m2Cost: 180,
              zbStation: '',
              zbCost: null,
              executor: '张三',
              executeTime: '2026-01-08 10:00',
            }]}
          />
        ),
        headers: ['检验有效期至', '检测服务站名称', '检测费用', '二保服务站名称', '二保费用', '整备服务站名称', '整备费用', '办理人', '完成时间'],
        filters: ['完成时间', '检验有效期', '办理人'],
      },
    ];

    for (const recordCase of cases) {
      rendered = await renderReact(recordCase.element);
      expect(tableHeaders(rendered.container)).toEqual(recordCase.headers);
      for (const label of recordCase.filters) {
        expect(rendered.container.textContent).toContain(label);
      }
      expect(buttonByName(rendered.container, '查询')).toBeTruthy();
      expect(buttonByName(rendered.container, '重置')).toBeTruthy();
      await rendered.unmount();
      rendered = undefined;
    }
  });

  it('renders the insurance overview, reference history fields, and file actions', async () => {
    const onToast = vi.fn();
    rendered = await renderReact(
      <DetailInsuranceRecordsTab
        record={vehicles[0] as VehicleRecord}
        insurance={{ compulsory: '2027-06-30', commercial: '2027-07-31' }}
        rows={[{
          id: 'insurance-1',
          vehicleId: String(vehicles[0].id),
          insuranceType: '交强险',
          expireDate: '2027-06-30',
          purchasedAt: '2026-06-30',
          fileName: '交强险保单.pdf',
          fileUrl: '/files/policy.pdf',
        }]}
        onToast={onToast}
      />,
    );

    expect(
      Array.from(rendered.container.querySelectorAll('.va-insurance-type strong'), (node) => node.textContent),
    ).toEqual(['交强险', '商业险', '超赔险', '驾意险', '货物险']);
    expect(rendered.container.textContent).toContain('保单号');
    expect(rendered.container.textContent).toContain('保险公司');
    expect(rendered.container.textContent).toContain('到期日期');
    expect(rendered.container.textContent).toContain('保费');
    expect(tableHeaders(rendered.container)).toEqual([
      '保险导入时间',
      '操作人',
      '类型',
      '保单号',
      '保险状态',
      '保险公司',
      '付款时间',
      '到期日期',
      '保单文件',
    ]);
    expect(rendered.container.textContent).toContain('—');

    await click(buttonByName(rendered.container, '预览'));
    await click(buttonByName(rendered.container, '下载'));

    expect(onToast).toHaveBeenNthCalledWith(1, '预览保单文件（原型演示）：交强险保单.pdf');
    expect(onToast).toHaveBeenNthCalledWith(2, '已开始下载：交强险保单.pdf（原型演示）');
  });

  it('renders the complete fault contract and global view/edit actions', async () => {
    const onView = vi.fn();
    const onEdit = vi.fn();
    const record = vehicles[0] as VehicleRecord;
    const row = {
      id: 'fault-1',
      plateNo: record.plateNo,
      faultNo: 'GZ-001',
      resolutionStatus: '已解决',
      brand: record.brand,
      model: record.model,
      operateCompany: record.operateCompany,
      faultLevel: 'L2',
      faultType: '冷机故障',
      faultDescription: '制冷异常',
      reportedAt: '2026-01-01 10:00',
      resolvedAt: '2026-01-01 12:00',
      aiMatched: true,
      lastOperator: '张三',
    };
    rendered = await renderReact(
      <DetailFaultRecordsTab
        record={record}
        rows={[row]}
        onViewFaultDetail={onView}
        onEditFaultRecord={onEdit}
      />,
    );

    expect(tableHeaders(rendered.container)).toEqual([
      '故障编号',
      '解决情况',
      '车牌号',
      '车辆品牌',
      '车辆型号',
      '运营公司',
      '故障等级',
      '故障类型',
      '故障描述',
      '上报时间',
      '解决时间',
      'AI匹配状态',
      '最后操作人',
      '操作',
    ]);
    for (const label of ['上报时间', '故障编号', '故障等级', '故障类型', '解决情况', 'AI匹配状态']) {
      expect(rendered.container.textContent).toContain(label);
    }

    await click(buttonByName(rendered.container, '查看'));
    await click(buttonByName(rendered.container, '编辑'));
    expect(onView).toHaveBeenCalledWith(record, row);
    expect(onEdit).toHaveBeenCalledWith(record, row);
  });
});