import { render, screen, fireEvent } from '@testing-library/react'
import { QualityBadge } from '../QualityBadge'
import { EnrichButton } from '../EnrichButton'
import { EnrichmentProgress } from '../EnrichmentProgress'

// ---------------------------------------------------------------------------
// QualityBadge
// ---------------------------------------------------------------------------

describe('QualityBadge', () => {
  it('renders grade A with correct label in title', () => {
    render(<QualityBadge quality={{ grade: 'A', score: 95 }} />)
    const badge = screen.getByTitle('Data quality: Excellent (95/100)')
    expect(badge).toBeInTheDocument()
    expect(badge).toHaveTextContent('A')
  })

  it('renders grade B with correct title', () => {
    render(<QualityBadge quality={{ grade: 'B', score: 80 }} />)
    expect(screen.getByTitle('Data quality: Good (80/100)')).toBeInTheDocument()
  })

  it('renders grade C with correct title', () => {
    render(<QualityBadge quality={{ grade: 'C', score: 65 }} />)
    expect(screen.getByTitle('Data quality: Fair (65/100)')).toBeInTheDocument()
  })

  it('renders grade D with correct title', () => {
    render(<QualityBadge quality={{ grade: 'D', score: 45 }} />)
    expect(screen.getByTitle('Data quality: Poor (45/100)')).toBeInTheDocument()
  })

  it('renders grade F with correct title', () => {
    render(<QualityBadge quality={{ grade: 'F', score: 20 }} />)
    expect(screen.getByTitle('Data quality: Incomplete (20/100)')).toBeInTheDocument()
  })

  it('does not show score by default', () => {
    render(<QualityBadge quality={{ grade: 'A', score: 95 }} />)
    expect(screen.queryByText('(95)')).not.toBeInTheDocument()
  })

  it('shows score when showScore is true', () => {
    render(<QualityBadge quality={{ grade: 'A', score: 95 }} showScore />)
    expect(screen.getByText('(95)')).toBeInTheDocument()
  })

  it('applies green styles for grade A', () => {
    render(<QualityBadge quality={{ grade: 'A', score: 95 }} />)
    const badge = screen.getByTitle('Data quality: Excellent (95/100)')
    expect(badge).toHaveClass('bg-green-100')
    expect(badge).toHaveClass('text-green-800')
  })

  it('applies red styles for grade F', () => {
    render(<QualityBadge quality={{ grade: 'F', score: 20 }} />)
    const badge = screen.getByTitle('Data quality: Incomplete (20/100)')
    expect(badge).toHaveClass('bg-red-100')
    expect(badge).toHaveClass('text-red-800')
  })

  it('applies yellow styles for grade C', () => {
    render(<QualityBadge quality={{ grade: 'C', score: 65 }} />)
    const badge = screen.getByTitle('Data quality: Fair (65/100)')
    expect(badge).toHaveClass('bg-yellow-100')
  })
})

// ---------------------------------------------------------------------------
// EnrichButton
// ---------------------------------------------------------------------------

describe('EnrichButton', () => {
  it('renders default label', () => {
    render(<EnrichButton onClick={jest.fn()} />)
    expect(screen.getByRole('button', { name: /enrich/i })).toBeInTheDocument()
  })

  it('renders custom label', () => {
    render(<EnrichButton onClick={jest.fn()} label="Run Enrichment" />)
    expect(screen.getByRole('button', { name: /run enrichment/i })).toBeInTheDocument()
  })

  it('shows Enriching... when isLoading is true', () => {
    render(<EnrichButton onClick={jest.fn()} isLoading />)
    expect(screen.getByText('Enriching...')).toBeInTheDocument()
  })

  it('is disabled when isLoading is true', () => {
    render(<EnrichButton onClick={jest.fn()} isLoading />)
    expect(screen.getByRole('button')).toBeDisabled()
  })

  it('calls onClick when clicked', () => {
    const onClick = jest.fn()
    render(<EnrichButton onClick={onClick} />)
    fireEvent.click(screen.getByRole('button'))
    expect(onClick).toHaveBeenCalledTimes(1)
  })

  it('does not call onClick when disabled', () => {
    const onClick = jest.fn()
    render(<EnrichButton onClick={onClick} isLoading />)
    fireEvent.click(screen.getByRole('button'))
    expect(onClick).not.toHaveBeenCalled()
  })

  it('applies sm size classes by default', () => {
    render(<EnrichButton onClick={jest.fn()} />)
    expect(screen.getByRole('button')).toHaveClass('px-3', 'py-1.5', 'text-xs')
  })

  it('applies md size classes when size is md', () => {
    render(<EnrichButton onClick={jest.fn()} size="md" />)
    expect(screen.getByRole('button')).toHaveClass('px-4', 'py-2', 'text-sm')
  })

  it('applies custom className', () => {
    render(<EnrichButton onClick={jest.fn()} className="my-custom-class" />)
    expect(screen.getByRole('button')).toHaveClass('my-custom-class')
  })
})

// ---------------------------------------------------------------------------
// EnrichmentProgress
// ---------------------------------------------------------------------------

describe('EnrichmentProgress', () => {
  const queueStatus = {
    pending: 3,
    processing: 1,
    completed: 12,
    failed: 0,
  }

  it('renders unavailable message when queueStatus is null', () => {
    render(<EnrichmentProgress queueStatus={null} />)
    expect(screen.getByText('Queue status unavailable')).toBeInTheDocument()
  })

  it('renders all four status counts', () => {
    render(<EnrichmentProgress queueStatus={queueStatus} />)
    expect(screen.getByText('3')).toBeInTheDocument()  // pending
    expect(screen.getByText('1')).toBeInTheDocument()  // processing
    expect(screen.getByText('12')).toBeInTheDocument() // completed
    expect(screen.getByText('0')).toBeInTheDocument()  // failed
  })

  it('renders all four status labels', () => {
    render(<EnrichmentProgress queueStatus={queueStatus} />)
    expect(screen.getByText('Pending')).toBeInTheDocument()
    expect(screen.getByText('Processing')).toBeInTheDocument()
    expect(screen.getByText('Completed')).toBeInTheDocument()
    expect(screen.getByText('Failed')).toBeInTheDocument()
  })

  it('does not render refresh button when onRefresh is not provided', () => {
    render(<EnrichmentProgress queueStatus={queueStatus} />)
    expect(screen.queryByText('Refresh')).not.toBeInTheDocument()
  })

  it('renders refresh button when onRefresh is provided', () => {
    render(<EnrichmentProgress queueStatus={queueStatus} onRefresh={jest.fn()} />)
    expect(screen.getByText('Refresh')).toBeInTheDocument()
  })

  it('calls onRefresh when refresh button is clicked', () => {
    const onRefresh = jest.fn()
    render(<EnrichmentProgress queueStatus={queueStatus} onRefresh={onRefresh} />)
    fireEvent.click(screen.getByText('Refresh'))
    expect(onRefresh).toHaveBeenCalledTimes(1)
  })

  it('disables refresh button when isLoading is true', () => {
    render(
      <EnrichmentProgress
        queueStatus={queueStatus}
        onRefresh={jest.fn()}
        isLoading
      />
    )
    expect(screen.getByText('Refresh').closest('button')).toBeDisabled()
  })
})