import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import { OPT_DATA_INTEGRITY_ATTRIBUTION } from './fixtures/forensics'
import { PhaseBars } from './PhaseBars'

describe('PhaseBars', () => {
  it('renders all six bucket labels from the real attribution payload', () => {
    render(<PhaseBars attribution={OPT_DATA_INTEGRITY_ATTRIBUTION} />)
    for (const label of ['Fixer', 'Implement', 'gate0', 'Review', 'Idle', 'Other']) {
      expect(screen.getByText(label)).toBeInTheDocument()
    }
  })

  it('sorts rows by totalMs descending, with the largest bucket at 100% bar width', () => {
    const { container } = render(<PhaseBars attribution={OPT_DATA_INTEGRITY_ATTRIBUTION} />)
    const rows = container.querySelectorAll('.grid')
    expect(rows[0]).toHaveTextContent('Implement')
    const bar = rows[0]?.children[1]?.firstElementChild
    expect(bar).toHaveStyle({ width: '100%' })
    expect(rows[5]).toHaveTextContent('Other')
  })

  it('shows duration and share-of-total percent for each bucket', () => {
    render(<PhaseBars attribution={OPT_DATA_INTEGRITY_ATTRIBUTION} />)
    // llm-implement: 420_000ms of a 1_140_000ms total = 7m · 37%
    expect(screen.getByText('7m · 37%')).toBeInTheDocument()
  })
})