import { render, screen, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import FilterPanel from './FilterPanel'

const props = {
  selectedMaterialType: '', setSelectedMaterialType: jest.fn(), selectedCategory: '', setSelectedCategory: jest.fn(),
  selectedScene: '', setSelectedScene: jest.fn(), selectedPlatform: '', setSelectedPlatform: jest.fn(),
  selectedLivePlatform: '', setSelectedLivePlatform: jest.fn(), liveDateFrom: '', setLiveDateFrom: jest.fn(), liveDateTo: '', setLiveDateTo: jest.fn(),
  selectedProductCategory: '', setSelectedProductCategory: jest.fn(), selectedMonth: '', setSelectedMonth: jest.fn(),
  sortBy: 'createdAt', setSortBy: jest.fn(), sortOrder: 'desc' as const, setSortOrder: jest.fn(),
  materialTypes: [{ value: '任务-详情', label: '任务-详情', count: 30 }],
  categories: Array.from({ length: 14 }, (_, index) => ({ id: String(index), name: `店铺${index}`, count: 30 - index })),
  scenes: [], platforms: [], productCategories: [], months: [{ value: '2026-09', label: '2026年9月', count: 20 }],
  totalMaterialsCount: 30, materialsCount: 30, isFilterCollapsed: false, setIsFilterCollapsed: jest.fn(), themeColor: '#1a1c1d',
}

beforeEach(() => jest.clearAllMocks())

test('长选项列表收起时仍展示已选项，展开后可切换，计数与年份月份语义保留', async () => {
  const user = userEvent.setup()
  render(<FilterPanel {...props} selectedCategory="店铺13" selectedMonth="2026-09" />)
  const shops = screen.getByRole('group', { name: '使用店铺' })
  expect(within(shops).getByRole('button', { name: '店铺13 17' })).toHaveAttribute('aria-pressed', 'true')
  expect(within(shops).queryByRole('button', { name: '店铺12 18' })).not.toBeInTheDocument()
  await user.click(within(shops).getByRole('button', { name: '更多 3' }))
  await user.click(within(shops).getByRole('button', { name: '店铺12 18' }))
  expect(props.setSelectedCategory).toHaveBeenCalledWith('店铺12')
  expect(screen.getByRole('button', { name: '9月 20' })).toHaveAttribute('aria-pressed', 'true')
  await user.click(screen.getByRole('button', { name: '2026年 20' }))
  expect(props.setSelectedMonth).toHaveBeenCalledWith('2026')
})

test('日历限制倒置范围，返回统一日期；直播日期和平台也计入收起后的条件数量', async () => {
  const user = userEvent.setup()
  const { rerender } = render(<FilterPanel {...props} liveDateFrom="2026-09-20" liveDateTo="2026-09-25" selectedLivePlatform="抖音" />)
  await user.click(screen.getByRole('button', { name: /直播结束日期/ }))
  expect(screen.getByRole('button', { name: '2026年9月19日' })).toBeDisabled()
  await user.click(screen.getByRole('button', { name: '2026年9月24日' }))
  expect(props.setLiveDateTo).toHaveBeenCalledWith('2026-09-24')
  rerender(<FilterPanel {...props} isFilterCollapsed liveDateFrom="2026-09-20" selectedLivePlatform="抖音" />)
  expect(screen.queryByRole('region', { name: '素材筛选条件' })).not.toBeInTheDocument()
  expect(screen.getByRole('button', { name: '展开更多筛选' })).toHaveTextContent('2')
})