import { render, screen } from '@testing-library/react'
import {
  DocumentStatusBadge,
  DOCUMENT_STATUS_CONFIG,
  type DocumentStatus,
} from '../badge/DocumentStatusBadge'

describe('DocumentStatusBadge', () => {
  const cases: Array<{ status: DocumentStatus; label: string; tone: string }> = [
    { status: 'draft', label: 'Draft', tone: 'bg-gray-100' },
    { status: 'generating', label: 'Generating', tone: 'bg-amber-100' },
    { status: 'ready', label: 'Ready', tone: 'bg-green-100' },
    { status: 'error', label: 'Error', tone: 'bg-red-100' },
  ]

  it.each(cases)('renders $status with the spec label and tone', ({ status, label, tone }) => {
    render(<DocumentStatusBadge status={status} />)
    const badge = screen.getByText(label)
    expect(badge).toBeInTheDocument()
    expect(badge).toHaveClass(tone)
  })

  it('exposes the canonical config mapping (single source of truth)', () => {
    expect(DOCUMENT_STATUS_CONFIG.ready.label).toBe('Ready')
    expect(DOCUMENT_STATUS_CONFIG.generating.className).toContain('amber')
    expect(DOCUMENT_STATUS_CONFIG.error.className).toContain('red')
    expect(DOCUMENT_STATUS_CONFIG.draft.className).toContain('gray')
  })

  it('renders a status dot by default and omits it when showDot=false', () => {
    const { container, rerender } = render(<DocumentStatusBadge status="ready" />)
    expect(container.querySelector('span[aria-hidden="true"]')).not.toBeNull()

    rerender(<DocumentStatusBadge status="ready" showDot={false} />)
    expect(container.querySelector('span[aria-hidden="true"]')).toBeNull()
  })

  it('uses a pulsing dot for generating', () => {
    const { container } = render(<DocumentStatusBadge status="generating" />)
    const dot = container.querySelector('span[aria-hidden="true"]')
    expect(dot?.className).toContain('animate-pulse')
  })

  it('honors the size prop', () => {
    render(<DocumentStatusBadge status="ready" size="sm" />)
    expect(screen.getByText('Ready')).toHaveClass('px-2')
  })
})