import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

import UploadModal from '@/components/UploadModal'

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

jest.mock('@/hooks/useCategoryData', () => ({
  useCategoryData: () => ({
    data: {
      categories: [],
      scenes: [],
      platforms: [],
      productCategories: [],
    },
    refreshCategories: jest.fn(),
    refreshScenes: jest.fn(),
  }),
}))

jest.mock('@/components/upload/ProductPackageUploader', () => ({
  __esModule: true,
  default: () => <div data-testid="product-package-uploader" />,
}))

jest.mock('@/components/upload/VideoScreenshotUploader', () => ({
  __esModule: true,
  default: () => <div data-testid="video-screenshot-uploader" />,
}))

jest.mock('@/components/upload/TaskPageUploader', () => ({
  __esModule: true,
  default: () => <div data-testid="task-page-uploader" />,
}))

describe('UploadModal - 任务-其他', () => {
  beforeEach(() => {
    jest.clearAllMocks()

    global.fetch = jest.fn().mockResolvedValue({
      ok: true,
      json: async () => ({
        materialTypes: ['3D场景', '任务-其他'],
      }),
    }) as any
  })

  test('3D场景公共上传面板应显示任务号与钉钉审批编号', async () => {
    render(<UploadModal onClose={jest.fn()} onSuccess={jest.fn()} />)

    expect(await screen.findByLabelText('任务号')).toBeInTheDocument()
    expect(screen.getByLabelText('钉钉审批编号')).toBeInTheDocument()
    expect(screen.getByLabelText('素材类型 *')).toHaveValue('3D场景')
  })

  test('任务-其他应使用公共上传面板形式，任务号与钉钉审批编号并列显示', async () => {
    const user = userEvent.setup()

    render(<UploadModal onClose={jest.fn()} onSuccess={jest.fn()} />)

    const materialTypeSelect = (await screen.findAllByRole('combobox'))[0]
    await user.selectOptions(materialTypeSelect, '任务-其他')

    await waitFor(() => {
      expect(screen.getByLabelText('任务号 *')).toBeInTheDocument()
    })

    expect(screen.getByLabelText('钉钉审批编号')).toBeInTheDocument()
    expect(screen.getByText('预览图片 *')).toBeInTheDocument()
    expect(screen.getByText('素材文件 *')).toBeInTheDocument()
    expect(screen.getByText('支持格式：压缩包（.zip / .rar / .7z）')).toBeInTheDocument()

    expect(screen.queryByLabelText('SPU型号 *')).not.toBeInTheDocument()
    expect(screen.queryByText('压缩包源文件 *')).not.toBeInTheDocument()
    expect(screen.queryByText('预览图 *')).not.toBeInTheDocument()
  })

  test('主素材区混合拖入有效与非法文件时应保留有效文件并提示被忽略项', async () => {
    const user = userEvent.setup()

    render(<UploadModal onClose={jest.fn()} onSuccess={jest.fn()} />)

    const materialTypeSelect = (await screen.findAllByRole('combobox'))[0]
    await user.selectOptions(materialTypeSelect, '任务-其他')

    const selectButton = await screen.findByRole('button', { name: '选择素材文件' })
    const dropZone = selectButton.closest('[aria-disabled]') as HTMLDivElement
    const zipFile = new File(['zip'], 'task-source.zip', { type: 'application/zip' })
    const invalidFile = new File(['text'], 'readme.txt', { type: 'text/plain' })

    fireEvent.drop(dropZone, {
      dataTransfer: {
        files: [zipFile, invalidFile],
        types: ['Files'],
        dropEffect: 'copy',
      },
    })

    expect(await screen.findByText('task-source.zip')).toBeInTheDocument()
    expect(screen.getByText(/readme\.txt/)).toBeInTheDocument()
  })
})