import { cleanup, fireEvent, render, screen } from '@testing-library/react';
import { afterEach, expect, test, vi } from 'vitest';
import { MobileFilterSheet, MobileFilterSheetSection } from './MobileFilterSheet';

afterEach(cleanup);

test('renders one shared Semi filter sheet with consistent title, section and actions', () => {
  const onCancel = vi.fn();
  const onReset = vi.fn();
  const onApply = vi.fn();
  render(<MobileFilterSheet
    className="test-filter-sheet"
    visible
    ariaLabel="测试筛选"
    dialogId="test-filter-dialog"
    closeLabel="关闭测试筛选"
    title="筛选车辆"
    description="按车辆和状态缩小范围"
    onCancel={onCancel}
    secondaryAction={{ label: '重置条件', onClick: onReset }}
    primaryAction={{ label: '应用并查询', onClick: onApply }}
  >
    <MobileFilterSheetSection ariaLabel="车辆条件" title="车辆范围" description="支持车牌或 VIN">
      <label>关键词<input aria-label="关键词" /></label>
    </MobileFilterSheetSection>
  </MobileFilterSheet>);

  const dialog = screen.getByRole('dialog', { name: '测试筛选' });
  expect(dialog).toHaveAttribute('id', 'test-filter-dialog');
  expect(dialog.closest('.semi-sidesheet')).toHaveClass('v2-workspace-filter-sidesheet', 'v2-mobile-filter-sheet', 'test-filter-sheet');
  expect(screen.getByText('按车辆和状态缩小范围')).toBeInTheDocument();
  expect(screen.getByText('筛选范围')).toBeInTheDocument();
  expect(screen.getByText('筛选条件仅在应用后更新当前结果')).toBeInTheDocument();
  expect(screen.getByRole('region', { name: '车辆条件' })).toHaveTextContent('支持车牌或 VIN');
  fireEvent.click(screen.getByRole('button', { name: '重置条件' }));
  expect(screen.getByRole('dialog', { name: '测试筛选' })).toBeInTheDocument();
  fireEvent.click(screen.getByRole('button', { name: '应用并查询' }));
  expect(onReset).toHaveBeenCalledTimes(1);
  expect(onApply).toHaveBeenCalledTimes(1);
  fireEvent.click(screen.getByRole('button', { name: '关闭测试筛选' }));
  expect(onCancel).toHaveBeenCalledTimes(1);
});
