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

describe('ProgressBar', () => {
  it('renders with default props', () => {
    render(<ProgressBar />)
    const bar = screen.getByRole('progressbar')
    expect(bar).toBeInTheDocument()
  })

  it('sets aria-valuenow to the clamped value', () => {
    render(<ProgressBar value={42} />)
    const bar = screen.getByRole('progressbar')
    expect(bar).toHaveAttribute('aria-valuenow', '42')
  })

  it('always sets aria-valuemin=0 and aria-valuemax=100', () => {
    render(<ProgressBar value={50} />)
    const bar = screen.getByRole('progressbar')
    expect(bar).toHaveAttribute('aria-valuemin', '0')
    expect(bar).toHaveAttribute('aria-valuemax', '100')
  })

  it('clamps value above 100 to 100', () => {
    render(<ProgressBar value={150} />)
    const bar = screen.getByRole('progressbar')
    expect(bar).toHaveAttribute('aria-valuenow', '100')
  })

  it('clamps value below 0 to 0', () => {
    render(<ProgressBar value={-10} />)
    const bar = screen.getByRole('progressbar')
    expect(bar).toHaveAttribute('aria-valuenow', '0')
  })

  it('omits aria-valuenow when indeterminate', () => {
    render(<ProgressBar indeterminate />)
    const bar = screen.getByRole('progressbar')
    expect(bar).not.toHaveAttribute('aria-valuenow')
  })

  it('renders label text above the bar', () => {
    render(<ProgressBar label="Upload progress" value={60} />)
    expect(screen.getByText('Upload progress')).toBeInTheDocument()
  })

  it('does not render label element when label is omitted', () => {
    render(<ProgressBar value={60} />)
    expect(screen.queryByText('Upload progress')).not.toBeInTheDocument()
  })

  it('applies variant class to fill', () => {
    const { container } = render(<ProgressBar variant="success" value={50} />)
    const fill = container.querySelector('.fill')
    expect(fill).toHaveClass('success')
  })

  it('applies error variant class to fill', () => {
    const { container } = render(<ProgressBar variant="error" value={50} />)
    const fill = container.querySelector('.fill')
    expect(fill).toHaveClass('error')
  })

  it('applies sm size class to track', () => {
    render(<ProgressBar size="sm" value={50} />)
    const track = screen.getByRole('progressbar')
    expect(track).toHaveClass('sm')
  })

  it('applies md size class to track by default', () => {
    render(<ProgressBar value={50} />)
    const track = screen.getByRole('progressbar')
    expect(track).toHaveClass('md')
  })

  it('applies indeterminate class to fill when indeterminate', () => {
    const { container } = render(<ProgressBar indeterminate />)
    const fill = container.querySelector('.fill')
    expect(fill).toHaveClass('indeterminate')
  })

  it('sets fill width style matching value', () => {
    const { container } = render(<ProgressBar value={75} />)
    const fill = container.querySelector('.fill') as HTMLElement
    expect(fill.style.width).toBe('75%')
  })

  it('does not set width style when indeterminate', () => {
    const { container } = render(<ProgressBar indeterminate />)
    const fill = container.querySelector('.fill') as HTMLElement
    expect(fill.style.width).toBe('')
  })

  it('passes through className to the track', () => {
    render(<ProgressBar className="custom-class" value={30} />)
    const bar = screen.getByRole('progressbar')
    expect(bar).toHaveClass('custom-class')
  })
})
