/* eslint-disable @next/next/no-img-element, jsx-a11y/alt-text */
import { fireEvent, render, screen, waitFor } from '@testing-library/react'

import BatchFileList from './BatchFileList'
import { BatchVideoList } from './SpecialBatchUploadUI'

function createPngFile(name: string, width = 1920, height = 1080) {
  const bytes = new Uint8Array(24)
  bytes.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])
  const view = new DataView(bytes.buffer)
  view.setUint32(16, width)
  view.setUint32(20, height)
  return new File([bytes], name, { type: 'image/png' })
}

jest.mock('next/image', () => ({
  __esModule: true,
  default: (props: any) => {
    const { fill, unoptimized, sizes, ...rest } = props
    return <img {...rest} />
  },
}))

test('无法从视频文件名确认 SPU 时直接显示可恢复的填写提示', () => {
  render(
    <BatchFileList
      batchFiles={[{
        id: 'video-missing-spu',
        file: new File(['video'], '抖音素材-624-456.mp4', { type: 'video/mp4' }),
        expanded: true,
        productModel: '',
        categoryName: '通用',
        sceneName: '通用',
        platformName: '',
        productCategoryName: '',
      }]}
      materialType="抖音-千川素材"
      categories={[]}
      scenes={[]}
      platforms={[]}
      productCategories={[]}
      renderer=""
      batchPreviewDragging={{}}
      onToggleExpand={jest.fn()}
      onDelete={jest.fn()}
      onUpdateProductModel={jest.fn()}
      onUpdatePreviewImage={jest.fn()}
      onRemovePreviewImage={jest.fn()}
      onUpdateCategory={jest.fn()}
      onUpdateScene={jest.fn()}
      onUpdatePlatform={jest.fn()}
      onUpdateProductCategory={jest.fn()}
      onUpdateRenderer={jest.fn()}
      onExitBatchMode={jest.fn()}
      onPreviewDragEnter={jest.fn()}
      onPreviewDragLeave={jest.fn()}
      onValidationError={jest.fn()}
    />,
  )

  expect(screen.getByText(/未识别到 SPU，请填写/)).toBeInTheDocument()
  const input = screen.getByRole('textbox', { name: 'SPU型号 *' })
  expect(input).toHaveAttribute('aria-invalid', 'true')
  expect(input).toHaveAccessibleDescription(/文件名不是完整、合规的 SPU/)
})

test('用户输入只自动转大写，非法字符保留并显示错误', () => {
  const onUpdateProductModel = jest.fn()
  render(
    <BatchVideoList
      files={[{
        file: new File(['video'], 'video.mp4', { type: 'video/mp4' }),
        productModel: 'DF-A3DZ0008 中文',
      }]}
      productCategories={[]}
      onUpdateProductModel={onUpdateProductModel}
      onUpdatePreviewImage={jest.fn()}
      onRemovePreviewImage={jest.fn()}
      onDelete={jest.fn()}
    />,
  )

  const input = screen.getByRole('textbox', { name: /SPU型号/ })
  expect(input).toHaveValue('DF-A3DZ0008 中文')
  expect(input).toHaveAttribute('aria-invalid', 'true')
  expect(input).toHaveAccessibleDescription(/只能使用字母、数字/)

  fireEvent.change(input, { target: { value: 'df-a3dz0008 中文' } })
  expect(onUpdateProductModel).toHaveBeenCalledWith(0, 'df-a3dz0008 中文')
})

test('批量视频的每个文件都提供独立的选填预览图入口', async () => {
  const onUpdatePreviewImage = jest.fn().mockResolvedValue(undefined)
  render(
    <BatchFileList
      batchFiles={[{
        id: 'video-1',
        file: new File(['video'], 'SPU001.mp4', { type: 'video/mp4' }),
        expanded: true,
        productModel: 'SPU001',
        categoryName: '通用',
        sceneName: '通用',
        platformName: '',
        productCategoryName: '',
      }]}
      materialType="淘系-逛逛视频"
      categories={[]}
      scenes={[]}
      platforms={[]}
      productCategories={[]}
      renderer=""
      batchPreviewDragging={{}}
      onToggleExpand={jest.fn()}
      onDelete={jest.fn()}
      onUpdateProductModel={jest.fn()}
      onUpdatePreviewImage={onUpdatePreviewImage}
      onRemovePreviewImage={jest.fn()}
      onUpdateCategory={jest.fn()}
      onUpdateScene={jest.fn()}
      onUpdatePlatform={jest.fn()}
      onUpdateProductCategory={jest.fn()}
      onUpdateRenderer={jest.fn()}
      onExitBatchMode={jest.fn()}
      onPreviewDragEnter={jest.fn()}
      onPreviewDragLeave={jest.fn()}
      onValidationError={jest.fn()}
    />,
  )

  expect(screen.getByText('视频预览图')).toBeInTheDocument()
  expect(screen.getByText('（选填）')).toBeInTheDocument()
  expect(screen.queryByText('预览图片 *')).not.toBeInTheDocument()

  const input = screen.getByLabelText(/视频预览图/) as HTMLInputElement
  const cover = createPngFile('SPU001-cover.png')
  fireEvent.change(input, { target: { files: [cover] } })

  await waitFor(() => expect(onUpdatePreviewImage).toHaveBeenCalledWith(0, cover))
})

test('淘系-逛逛视频专用批量列表也提供独立的选填预览图入口', async () => {
  const onUpdatePreviewImage = jest.fn().mockResolvedValue(undefined)
  render(
    <BatchVideoList
      files={[{
        file: new File(['video'], 'SPU002.mp4', { type: 'video/mp4' }),
        productModel: 'SPU002',
      }]}
      productCategories={[]}
      onUpdateProductModel={jest.fn()}
      onUpdatePreviewImage={onUpdatePreviewImage}
      onRemovePreviewImage={jest.fn()}
      onValidationError={jest.fn()}
      onDelete={jest.fn()}
    />,
  )

  expect(screen.getByText('视频预览图')).toBeInTheDocument()
  expect(screen.getByText('（选填）')).toBeInTheDocument()

  const input = screen.getByLabelText(/视频预览图/) as HTMLInputElement
  const cover = createPngFile('SPU002-cover.png')
  fireEvent.change(input, { target: { files: [cover] } })

  await waitFor(() => expect(onUpdatePreviewImage).toHaveBeenCalledWith(0, cover))
})

test('通用和专用批量入口都在创建预览前拒绝超大像素图片', async () => {
  const hugeCover = createPngFile('huge-cover.png', 10_000, 7_000)
  const generalUpdate = jest.fn()
  const generalError = jest.fn()
  const generalView = render(
    <BatchFileList
      batchFiles={[{
        id: 'video-huge-general',
        file: new File(['video'], 'SPU-HUGE-1.mp4', { type: 'video/mp4' }),
        expanded: true,
        productModel: 'SPU-HUGE-1',
        categoryName: '通用',
        sceneName: '通用',
        platformName: '',
        productCategoryName: '',
      }]}
      materialType="淘系-逛逛视频"
      categories={[]}
      scenes={[]}
      platforms={[]}
      productCategories={[]}
      renderer=""
      batchPreviewDragging={{}}
      onToggleExpand={jest.fn()}
      onDelete={jest.fn()}
      onUpdateProductModel={jest.fn()}
      onUpdatePreviewImage={generalUpdate}
      onRemovePreviewImage={jest.fn()}
      onUpdateCategory={jest.fn()}
      onUpdateScene={jest.fn()}
      onUpdatePlatform={jest.fn()}
      onUpdateProductCategory={jest.fn()}
      onUpdateRenderer={jest.fn()}
      onExitBatchMode={jest.fn()}
      onPreviewDragEnter={jest.fn()}
      onPreviewDragLeave={jest.fn()}
      onValidationError={generalError}
    />,
  )

  fireEvent.change(screen.getByLabelText(/视频预览图/), {
    target: { files: [hugeCover] },
  })
  await waitFor(() => expect(generalError).toHaveBeenLastCalledWith(
    expect.stringContaining('像素总量超过 60,000,000'),
  ))
  expect(generalUpdate).not.toHaveBeenCalled()
  generalView.unmount()

  const specialUpdate = jest.fn()
  const specialError = jest.fn()
  render(
    <BatchVideoList
      files={[{
        file: new File(['video'], 'SPU-HUGE-2.mp4', { type: 'video/mp4' }),
        productModel: 'SPU-HUGE-2',
      }]}
      productCategories={[]}
      onUpdateProductModel={jest.fn()}
      onUpdatePreviewImage={specialUpdate}
      onRemovePreviewImage={jest.fn()}
      onValidationError={specialError}
      onDelete={jest.fn()}
    />,
  )

  fireEvent.change(screen.getByLabelText(/视频预览图/), {
    target: { files: [hugeCover] },
  })
  await waitFor(() => expect(specialError).toHaveBeenLastCalledWith(
    expect.stringContaining('像素总量超过 60,000,000'),
  ))
  expect(specialUpdate).not.toHaveBeenCalled()
})

test('上传期间锁定通用批量视频的元数据和删除操作', () => {
  render(
    <BatchFileList
      batchFiles={[{
        id: 'video-disabled-1',
        file: new File(['video'], 'SPU003.mp4', { type: 'video/mp4' }),
        expanded: true,
        productModel: 'SPU003',
        categoryName: '通用',
        sceneName: '通用',
        platformName: '',
        productCategoryName: '',
      }]}
      materialType="淘系-逛逛视频"
      categories={[]}
      scenes={[]}
      platforms={[]}
      productCategories={[]}
      renderer=""
      disabled
      batchPreviewDragging={{}}
      onToggleExpand={jest.fn()}
      onDelete={jest.fn()}
      onUpdateProductModel={jest.fn()}
      onUpdatePreviewImage={jest.fn()}
      onRemovePreviewImage={jest.fn()}
      onUpdateCategory={jest.fn()}
      onUpdateScene={jest.fn()}
      onUpdatePlatform={jest.fn()}
      onUpdateProductCategory={jest.fn()}
      onUpdateRenderer={jest.fn()}
      onExitBatchMode={jest.fn()}
      onPreviewDragEnter={jest.fn()}
      onPreviewDragLeave={jest.fn()}
      onValidationError={jest.fn()}
    />,
  )

  expect(screen.getByRole('textbox', { name: 'SPU型号 *' })).toBeDisabled()
  expect(screen.getByRole('button', { name: '删除' })).toBeDisabled()
  expect(screen.getByRole('button', { name: '退出批量模式' })).toBeDisabled()
  expect(screen.getByLabelText(/视频预览图/)).toBeDisabled()
})

test('上传期间锁定专用批量视频的 SPU、品类和删除操作', () => {
  render(
    <BatchVideoList
      files={[{
        file: new File(['video'], 'SPU004.mp4', { type: 'video/mp4' }),
        productModel: 'SPU004',
        productCategoryName: '沙发',
      }]}
      productCategories={[{ id: 'category-1', name: '沙发' }]}
      disabled
      onUpdateProductModel={jest.fn()}
      onUpdateProductCategory={jest.fn()}
      onUpdatePreviewImage={jest.fn()}
      onRemovePreviewImage={jest.fn()}
      onValidationError={jest.fn()}
      onDelete={jest.fn()}
    />,
  )

  expect(screen.getByPlaceholderText('SPU型号')).toBeDisabled()
  expect(screen.getByRole('combobox', { name: '品类（可选）' })).toBeDisabled()
  expect(screen.getByRole('button', { name: '删除' })).toBeDisabled()
  expect(screen.getByLabelText(/视频预览图/)).toBeDisabled()
})