import React from 'react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import { cleanup, render, screen } from '@testing-library/react'
import StudioContentBrowser from './StudioContentBrowser'

const routerGet = vi.fn()
const routerReload = vi.fn()

vi.mock('@inertiajs/react', () => ({
  router: {
    get: routerGet,
    reload: routerReload,
  },
}))

vi.mock('../../utils/studioEvents', () => ({
  studioSurface: () => '/studio/artworks',
  trackStudioEvent: vi.fn(),
}))

vi.mock('./ConfirmDangerModal', () => ({
  default: () => null,
}))

describe('StudioContentBrowser filters', () => {
  afterEach(() => {
    cleanup()
    vi.clearAllMocks()
  })

  it('renders artwork filter dropdowns with NovaSelect instead of native selects', () => {
    const { container } = render(
      <StudioContentBrowser
        hideModuleFilter
        listing={{
          filters: {
            module: 'artworks',
            bucket: 'all',
            q: '',
            sort: 'updated_desc',
            content_type: 'all',
            category: 'all',
            tag: '',
          },
          items: [],
          meta: {
            current_page: 1,
            last_page: 1,
            per_page: 24,
            total: 0,
          },
          bucket_options: [
            { value: 'all', label: 'All' },
            { value: 'published', label: 'Published' },
          ],
          sort_options: [
            { value: 'updated_desc', label: 'Recently updated' },
            { value: 'views_desc', label: 'Most viewed' },
          ],
          advanced_filters: [
            {
              key: 'content_type',
              label: 'Content type',
              type: 'select',
              value: 'all',
              options: [
                { value: 'all', label: 'All content types' },
                { value: '3d', label: '3D' },
              ],
            },
            {
              key: 'category',
              label: 'Category',
              type: 'select',
              value: 'all',
              options: [
                { value: 'all', label: 'All categories' },
                { value: 'abstract', label: 'Abstract', content_type_slug: 'all' },
              ],
            },
            {
              key: 'tag',
              label: 'Tag',
              type: 'search',
              value: '',
              placeholder: 'Filter by tag',
            },
          ],
        }}
      />,
    )

    expect(container.querySelectorAll('select')).toHaveLength(0)
    expect(screen.getAllByRole('combobox')).toHaveLength(4)
    expect(screen.getByText('Status')).not.toBeNull()
    expect(screen.getByText('Sort')).not.toBeNull()
    expect(screen.getByText('Content type')).not.toBeNull()
    expect(screen.getByText('Category')).not.toBeNull()
  })
})