import { render, screen } from '@testing-library/react'
import { StepIndicator } from '../StepIndicator'

const steps = [
  { label: 'Account', description: 'Set up your account' },
  { label: 'Profile', description: 'Complete your profile' },
  { label: 'Review', description: 'Review and confirm' },
]

describe('StepIndicator', () => {
  it('renders all step labels', () => {
    render(<StepIndicator steps={steps} currentIndex={0} />)
    expect(screen.getByText('Account')).toBeInTheDocument()
    expect(screen.getByText('Profile')).toBeInTheDocument()
    expect(screen.getByText('Review')).toBeInTheDocument()
  })

  it('renders step numbers for non-completed steps', () => {
    render(<StepIndicator steps={steps} currentIndex={0} />)
    // Step 1 is active (no check icon), steps 2 and 3 are upcoming
    expect(screen.getByText('2')).toBeInTheDocument()
    expect(screen.getByText('3')).toBeInTheDocument()
  })

  it('renders as an ordered list', () => {
    render(<StepIndicator steps={steps} currentIndex={0} />)
    expect(screen.getByRole('list')).toBeInTheDocument()
    expect(screen.getAllByRole('listitem')).toHaveLength(3)
  })

  it('applies active styles to the current step label', () => {
    render(<StepIndicator steps={steps} currentIndex={1} />)
    const profileLabel = screen.getByText('Profile')
    expect(profileLabel).toHaveClass('text-primary')
  })

  it('applies completed styles to past step labels', () => {
    render(<StepIndicator steps={steps} currentIndex={2} />)
    const accountLabel = screen.getByText('Account')
    expect(accountLabel).toHaveClass('text-gray-600')
    const profileLabel = screen.getByText('Profile')
    expect(profileLabel).toHaveClass('text-gray-600')
  })

  it('applies upcoming styles to future step labels', () => {
    render(<StepIndicator steps={steps} currentIndex={0} />)
    const reviewLabel = screen.getByText('Review')
    expect(reviewLabel).toHaveClass('text-gray-400')
  })

  it('does not render a connector after the last step', () => {
    const { container } = render(<StepIndicator steps={steps} currentIndex={0} />)
    // Connectors are h-0.5 divs between steps; should be n-1 = 2 connectors
    const connectors = container.querySelectorAll('.h-0\\.5')
    expect(connectors.length).toBe(steps.length - 1)
  })

  it('completed step connectors have primary color', () => {
    const { container } = render(<StepIndicator steps={steps} currentIndex={2} />)
    const connectors = container.querySelectorAll('.h-0\\.5')
    // Both connectors (between steps 1-2 and 2-3) should be completed
    connectors.forEach((connector) => {
      expect(connector).toHaveClass('bg-primary')
    })
  })

  it('incomplete step connectors have gray color', () => {
    const { container } = render(<StepIndicator steps={steps} currentIndex={0} />)
    const connectors = container.querySelectorAll('.h-0\\.5')
    connectors.forEach((connector) => {
      expect(connector).toHaveClass('bg-gray-200')
    })
  })

  it('applies custom className', () => {
    const { container } = render(
      <StepIndicator steps={steps} currentIndex={0} className="my-wizard" />
    )
    expect(container.firstChild).toHaveClass('my-wizard')
  })

  it('renders correctly with a single step', () => {
    render(<StepIndicator steps={[{ label: 'Only Step' }]} currentIndex={0} />)
    expect(screen.getByText('Only Step')).toBeInTheDocument()
    // No connector for a single step
    const { container } = render(
      <StepIndicator steps={[{ label: 'Only Step' }]} currentIndex={0} />
    )
    expect(container.querySelectorAll('.h-0\\.5')).toHaveLength(0)
  })

  it('renders with currentIndex at last step', () => {
    render(<StepIndicator steps={steps} currentIndex={2} />)
    // "Review" should be active
    expect(screen.getByText('Review')).toHaveClass('text-primary')
  })
})