import React from 'react'
import { render, screen } from '@testing-library/react'
import { PipelineProgress } from '../../components/PipelineProgress'

describe('PipelineProgress', () => {
  it('renders nothing when currentStep is 0', () => {
    const { container } = render(<PipelineProgress currentStep={0} />)
    expect(container).toBeEmptyDOMElement()
  })

  it('renders all 4 stage labels when currentStep >= 1', () => {
    render(<PipelineProgress currentStep={1} />)
    
    expect(screen.getByText('Extracting keywords...')).toBeInTheDocument()
    expect(screen.getByText('Retrieving documents...')).toBeInTheDocument()
    expect(screen.getByText('Filtering relevance...')).toBeInTheDocument()
    expect(screen.getByText('Generating answer...')).toBeInTheDocument()
  })

  it('marks stages as completed when currentStep > their index', () => {
    render(<PipelineProgress currentStep={3} />)
    
    expect(screen.getByTestId('stage-1-completed')).toBeInTheDocument()
    expect(screen.getByTestId('stage-2-completed')).toBeInTheDocument()
    expect(screen.getByTestId('stage-3-active')).toBeInTheDocument()
    expect(screen.getByTestId('stage-4-pending')).toBeInTheDocument()
  })

  it('shows active stage with animated indicator when currentStep matches', () => {
    render(<PipelineProgress currentStep={2} />)
    
    const activeIndicator = screen.getByTestId('stage-2-active')
    expect(activeIndicator).toBeInTheDocument()
    expect(activeIndicator).toHaveClass('animate-spin')
  })

  it('shows all stages as completed when currentStep is 4', () => {
    render(<PipelineProgress currentStep={4} />)
    
    expect(screen.getByTestId('stage-1-completed')).toBeInTheDocument()
    expect(screen.getByTestId('stage-2-completed')).toBeInTheDocument()
    expect(screen.getByTestId('stage-3-completed')).toBeInTheDocument()
    expect(screen.getByTestId('stage-4-completed')).toBeInTheDocument()
    
    expect(screen.queryByTestId(/stage-\d+-active/)).not.toBeInTheDocument()
    expect(screen.queryByTestId(/stage-\d+-pending/)).not.toBeInTheDocument()
  })

  it('uses correct stage label text', () => {
    render(<PipelineProgress currentStep={1} />)
    
    expect(screen.getByText('Extracting keywords...')).toBeInTheDocument()
    expect(screen.getByText('Retrieving documents...')).toBeInTheDocument()
    expect(screen.getByText('Filtering relevance...')).toBeInTheDocument()
    expect(screen.getByText('Generating answer...')).toBeInTheDocument()
  })

  it('shows stage 1 as active when currentStep is 1', () => {
    render(<PipelineProgress currentStep={1} />)
    
    expect(screen.getByTestId('stage-1-active')).toBeInTheDocument()
    expect(screen.getByTestId('stage-1-active')).toHaveClass('animate-spin')
    expect(screen.getByTestId('stage-2-pending')).toBeInTheDocument()
    expect(screen.getByTestId('stage-3-pending')).toBeInTheDocument()
    expect(screen.getByTestId('stage-4-pending')).toBeInTheDocument()
  })

  it('applies correct text colors for each stage state', () => {
    render(<PipelineProgress currentStep={2} />)
    
    const stage1Label = screen.getByText('Extracting keywords...')
    expect(stage1Label).toHaveClass('text-gray-600')
    
    const stage2Label = screen.getByText('Retrieving documents...')
    expect(stage2Label).toHaveClass('text-blue-600')
    
    const stage3Label = screen.getByText('Filtering relevance...')
    expect(stage3Label).toHaveClass('text-gray-400')
    
    const stage4Label = screen.getByText('Generating answer...')
    expect(stage4Label).toHaveClass('text-gray-400')
  })

  it('shows completed stages with CheckCircle icon', () => {
    render(<PipelineProgress currentStep={4} />)
    
    const completedIcons = screen.getAllByTestId(/stage-\d+-completed/)
    completedIcons.forEach((icon) => {
      expect(icon).toBeInTheDocument()
    })
  })

  it('shows pending stages with Circle icon', () => {
    render(<PipelineProgress currentStep={1} />)
    
    const pendingIcons = screen.getAllByTestId(/stage-\d+-pending/)
    expect(pendingIcons).toHaveLength(3)
  })

  it('renders main container with correct testid', () => {
    render(<PipelineProgress currentStep={1} />)
    
    expect(screen.getByTestId('pipeline-progress')).toBeInTheDocument()
  })
})
