import { describe, it, expect } from 'vitest'
import { render, screen } from '../../test/utils'
import { StatusBadge } from '../StatusBadge'
import type { JobStatus } from '../../types/api'

describe('StatusBadge', () => {
  it('renders created status correctly', () => {
    render(<StatusBadge status="created" />)
    
    const badge = screen.getByText('Created')
    expect(badge).toBeInTheDocument()
    expect(badge).toHaveClass('bg-gray-100', 'text-gray-800')
  })

  it('renders pending_qc status correctly', () => {
    render(<StatusBadge status="pending_qc" />)
    
    const badge = screen.getByText('Pending QC')
    expect(badge).toBeInTheDocument()
    expect(badge).toHaveClass('bg-yellow-100', 'text-yellow-800')
  })

  it('renders completed status correctly', () => {
    render(<StatusBadge status="completed" />)
    
    const badge = screen.getByText('Completed')
    expect(badge).toBeInTheDocument()
    expect(badge).toHaveClass('bg-green-100', 'text-green-800')
  })

  it('renders rejected status correctly', () => {
    render(<StatusBadge status="rejected" />)
    
    const badge = screen.getByText('Rejected')
    expect(badge).toBeInTheDocument()
    expect(badge).toHaveClass('bg-red-100', 'text-red-800')
  })

  it('renders ai_processing status correctly', () => {
    render(<StatusBadge status="ai_processing" />)
    
    const badge = screen.getByText('AI Processing')
    expect(badge).toBeInTheDocument()
    expect(badge).toHaveClass('bg-purple-100', 'text-purple-800')
  })

  it('renders translating status correctly', () => {
    render(<StatusBadge status="translating" />)
    
    const badge = screen.getByText('Translating')
    expect(badge).toBeInTheDocument()
    expect(badge).toHaveClass('bg-blue-100', 'text-blue-800')
  })

  it('renders tts_generating status correctly', () => {
    render(<StatusBadge status="tts_generating" />)
    
    const badge = screen.getByText('Generating Audio')
    expect(badge).toBeInTheDocument()
    expect(badge).toHaveClass('bg-indigo-100', 'text-indigo-800')
  })

  it('handles unknown status gracefully', () => {
    const unknownStatus = 'unknown_status' as JobStatus
    render(<StatusBadge status={unknownStatus} />)
    
    const badge = screen.getByText('unknown status')
    expect(badge).toBeInTheDocument()
    expect(badge).toHaveClass('bg-gray-100', 'text-gray-800')
  })

  it('has correct badge styling', () => {
    render(<StatusBadge status="created" />)
    
    const badge = screen.getByText('Created')
    expect(badge).toHaveClass(
      'inline-flex',
      'items-center',
      'px-2.5',
      'py-0.5',
      'rounded-full',
      'text-xs',
      'font-medium'
    )
  })
})