import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'

import { PhaseProgress } from '../phase-progress'

const phases = [
  { key: 'a', label: 'Alpha' },
  { key: 'b', label: 'Beta' },
  { key: 'c', label: 'Gamma' },
]

describe('PhaseProgress', () => {
  it('renders one dot per phase plus n-1 connectors', () => {
    const { container } = render(
      <PhaseProgress phases={phases} currentPhase="b" status="running" />
    )
    expect(container.querySelectorAll('[data-slot="phase-progress-dot"]').length).toBe(3)
    expect(container.querySelectorAll('[data-slot="phase-progress-connector"]').length).toBe(2)
  })

  it('marks earlier phases completed and later phases pending while running', () => {
    const { container } = render(
      <PhaseProgress phases={phases} currentPhase="b" status="running" />
    )
    const dots = container.querySelectorAll('[data-slot="phase-progress-dot"]')
    expect(dots[0]?.getAttribute('data-state')).toBe('completed')
    expect(dots[1]?.getAttribute('data-state')).toBe('current-running')
    expect(dots[1]?.getAttribute('aria-current')).toBe('step')
    expect(dots[2]?.getAttribute('data-state')).toBe('pending')
  })

  it('marks all phases completed when status=completed (no current step indicator)', () => {
    const { container } = render(
      <PhaseProgress phases={phases} currentPhase="b" status="completed" />
    )
    const dots = container.querySelectorAll('[data-slot="phase-progress-dot"]')
    for (const d of dots) {
      expect(d.getAttribute('data-state')).toBe('completed')
      expect(d.getAttribute('aria-current')).toBeNull()
    }
    const connectors = container.querySelectorAll('[data-slot="phase-progress-connector"]')
    for (const c of connectors) {
      expect(c.getAttribute('data-state')).toBe('completed')
    }
  })

  it('marks the current phase as failed for status=failed', () => {
    const { container } = render(<PhaseProgress phases={phases} currentPhase="c" status="failed" />)
    const dots = container.querySelectorAll('[data-slot="phase-progress-dot"]')
    expect(dots[2]?.getAttribute('data-state')).toBe('current-failed')
  })

  it('marks the current phase as cancelled for status=cancelled', () => {
    const { container } = render(
      <PhaseProgress phases={phases} currentPhase="a" status="cancelled" />
    )
    const dots = container.querySelectorAll('[data-slot="phase-progress-dot"]')
    expect(dots[0]?.getAttribute('data-state')).toBe('current-cancelled')
  })

  it('treats unknown current phase as pending while running', () => {
    const { container } = render(
      <PhaseProgress phases={phases} currentPhase="missing" status="running" />
    )
    const dots = container.querySelectorAll('[data-slot="phase-progress-dot"]')
    for (const d of dots) {
      expect(d.getAttribute('data-state')).toBe('pending')
    }
  })

  it('marks all phases completed when run is completed even with unknown current phase', () => {
    const { container } = render(
      <PhaseProgress phases={phases} currentPhase="unknown" status="completed" />
    )
    const dots = container.querySelectorAll('[data-slot="phase-progress-dot"]')
    for (const d of dots) {
      expect(d.getAttribute('data-state')).toBe('completed')
    }
  })

  it('queued status leaves the current phase pending', () => {
    const { container } = render(<PhaseProgress phases={phases} currentPhase="a" status="queued" />)
    const dots = container.querySelectorAll('[data-slot="phase-progress-dot"]')
    expect(dots[0]?.getAttribute('data-state')).toBe('pending')
  })

  it('forwards className and extra props', () => {
    const { container } = render(
      <PhaseProgress
        phases={phases}
        currentPhase="a"
        status="running"
        className="custom-pp"
        data-testid="pp"
      />
    )
    const root = container.querySelector('[data-slot="phase-progress"]')
    expect(root?.className).toContain('custom-pp')
    expect(root?.getAttribute('data-testid')).toBe('pp')
    expect(root?.getAttribute('data-status')).toBe('running')
  })
})
