SkinbaseNova/resources/js/components/admin/AdminUploadQueue.test.jsx

import React from 'react'
import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
import { render, screen, waitFor, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import AdminUploadQueue from './AdminUploadQueue'

function makePendingUpload(overrides = {}) {
  return {
    id: '11111111-1111-1111-1111-111111111111',
    title: 'Neon Skyline',
    type: 'image',
    description: 'A glowing city at dusk.',
    preview_url: '/api/admin/uploads/11111111-1111-1111-1111-111111111111/preview',
    preview_lg_url: '/api/admin/uploads/11111111-1111-1111-1111-111111111111/preview',
    tags: ['neon', 'city'],
    categories: ['Photography'],
    user: { id: 7, name: 'Mira', username: 'mira' },
    ...overrides,
  }
}

function makePendingArtwork(overrides = {}) {
  return {
    id: 88,
    title: 'Forest Spirit',
    type: 'artwork',
    description: 'A mossy guardian in fog.',
    preview_url: 'https://files.skinbase.org/artworks/md/aa/bb/aabb.webp',
    preview_lg_url: 'https://files.skinbase.org/artworks/lg/aa/bb/aabb.webp',
    tags: ['forest', 'spirit'],
    categories: ['Illustration'],
    user: { id: 9, name: 'Kai', username: 'kai' },
    ...overrides,
  }
}

function mockQueue({ uploads = [], artworks = [] } = {}) {
  window.axios.get.mockImplementation((url) => {
    if (String(url).includes('/api/admin/artwork-review/pending')) {
      return Promise.resolve({ data: { data: artworks } })
    }

    return Promise.resolve({ data: { data: uploads } })
  })
}

describe('AdminUploadQueue', () => {
  beforeEach(() => {
    window.axios = {
      get: vi.fn(),
      post: vi.fn(),
    }
  })

  afterEach(() => {
    vi.restoreAllMocks()
  })

  it('renders pending list with accessible controls', async () => {
    const upload = makePendingUpload()
    mockQueue({ uploads: [upload] })

    render(<AdminUploadQueue />)

    expect(screen.getByRole('heading', { name: 'Pending Upload Moderation' })).not.toBeNull()

    const item = await screen.findByRole('listitem', { name: `Pending upload ${upload.id}` })
    expect(within(item).getByText('Neon Skyline')).not.toBeNull()
    expect(within(item).getByText('A glowing city at dusk.')).not.toBeNull()
    expect(within(item).getByText('neon')).not.toBeNull()
    expect(within(item).getByRole('img', { name: 'Neon Skyline' })).not.toBeNull()
    expect(within(item).getByRole('textbox', { name: `Moderation note for ${upload.id}` })).not.toBeNull()
    expect(within(item).getByRole('button', { name: `Approve upload ${upload.id}` })).not.toBeNull()
    expect(within(item).getByRole('button', { name: `Reject upload ${upload.id}` })).not.toBeNull()
  })

  it('approves upload and removes it from queue', async () => {
    const upload = makePendingUpload()
    mockQueue({ uploads: [upload] })
    window.axios.post.mockResolvedValueOnce({ data: { success: true } })

    render(<AdminUploadQueue />)

    const item = await screen.findByRole('listitem', { name: `Pending upload ${upload.id}` })
    await userEvent.click(within(item).getByRole('button', { name: `Approve upload ${upload.id}` }))

    await waitFor(() => {
      expect(screen.queryByRole('listitem', { name: `Pending upload ${upload.id}` })).toBeNull()
    })

    expect(window.axios.post).toHaveBeenCalledWith(`/api/admin/uploads/${upload.id}/approve`, { note: '' })
  })

  it('rejects upload with note and removes it from queue', async () => {
    const upload = makePendingUpload({ id: '22222222-2222-2222-2222-222222222222', title: 'Retro Pack' })
    mockQueue({ uploads: [upload] })
    window.axios.post.mockResolvedValueOnce({ data: { success: true } })

    render(<AdminUploadQueue />)

    const item = await screen.findByRole('listitem', { name: `Pending upload ${upload.id}` })

    await userEvent.type(
      within(item).getByRole('textbox', { name: `Moderation note for ${upload.id}` }),
      'Needs better quality screenshots'
    )

    await userEvent.click(within(item).getByRole('button', { name: `Reject upload ${upload.id}` }))

    await waitFor(() => {
      expect(screen.queryByRole('listitem', { name: `Pending upload ${upload.id}` })).toBeNull()
    })

    expect(window.axios.post).toHaveBeenCalledWith(`/api/admin/uploads/${upload.id}/reject`, {
      note: 'Needs better quality screenshots',
    })
  })

  it('shows API failure message and keeps item when moderation action fails', async () => {
    const upload = makePendingUpload({ id: '33333333-3333-3333-3333-333333333333' })
    mockQueue({ uploads: [upload] })
    window.axios.post.mockRejectedValueOnce({
      response: { data: { message: 'Moderation API failed.' } },
    })

    render(<AdminUploadQueue />)

    const item = await screen.findByRole('listitem', { name: `Pending upload ${upload.id}` })
    await userEvent.click(within(item).getByRole('button', { name: `Approve upload ${upload.id}` }))

    const alert = await screen.findByRole('alert')
    expect(alert.textContent).toContain('Moderation API failed.')
    expect(screen.getByRole('listitem', { name: `Pending upload ${upload.id}` })).not.toBeNull()
  })

  it('opens a details popup with title, description, tags and preview', async () => {
    const upload = makePendingUpload()
    mockQueue({ uploads: [upload] })

    render(<AdminUploadQueue />)

    const item = await screen.findByRole('listitem', { name: `Pending upload ${upload.id}` })
    await userEvent.click(within(item).getByRole('button', { name: `Open details for ${upload.id}` }))

    const dialog = await screen.findByRole('dialog', { name: 'Details for Neon Skyline' })
    expect(within(dialog).getByText('A glowing city at dusk.')).not.toBeNull()
    expect(within(dialog).getByText('Photography')).not.toBeNull()
    expect(within(dialog).getByText('neon')).not.toBeNull()
    expect(within(dialog).getByRole('img', { name: 'Neon Skyline' })).not.toBeNull()
    expect(within(dialog).getByRole('button', { name: `Approve upload ${upload.id}` })).not.toBeNull()
    expect(within(dialog).getByRole('button', { name: `Reject upload ${upload.id}` })).not.toBeNull()
  })

  it('approves artwork review items from the details popup', async () => {
    const artwork = makePendingArtwork()
    mockQueue({ artworks: [artwork] })
    window.axios.post.mockResolvedValueOnce({ data: { success: true } })

    render(<AdminUploadQueue />)

    const item = await screen.findByRole('listitem', { name: `Pending upload ${artwork.id}` })
    expect(within(item).getByText('Forest Spirit')).not.toBeNull()
    expect(within(item).getByText('forest')).not.toBeNull()
    expect(within(item).getByRole('img', { name: 'Forest Spirit' })).not.toBeNull()

    await userEvent.click(within(item).getByRole('button', { name: `Open details for ${artwork.id}` }))
    const dialog = await screen.findByRole('dialog', { name: 'Details for Forest Spirit' })
    await userEvent.click(within(dialog).getByRole('button', { name: `Approve upload ${artwork.id}` }))

    await waitFor(() => {
      expect(screen.queryByRole('listitem', { name: `Pending upload ${artwork.id}` })).toBeNull()
    })

    expect(window.axios.post).toHaveBeenCalledWith(`/api/admin/artwork-review/${artwork.id}/approve`, { note: '' })
  })

  it('shows empty state when no pending uploads exist', async () => {
    mockQueue()

    render(<AdminUploadQueue />)

    const empty = await screen.findByText('No pending uploads.')
    expect(empty).not.toBeNull()
    expect(screen.queryAllByRole('listitem').length).toBe(0)
  })
})