import { render, screen } from '@testing-library/react';
import { ProgressBar } from '@/components/projects/ProgressBar';

describe('ProgressBar', () => {
  it('renders with correct progress value', () => {
    render(<ProgressBar value={50} />);
    const progressbar = screen.getByRole('progressbar');
    expect(progressbar).toHaveAttribute('aria-valuenow', '50');
    expect(progressbar).toHaveAttribute('aria-valuemin', '0');
    expect(progressbar).toHaveAttribute('aria-valuemax', '100');
  });

  it('renders with correct accessible label', () => {
    render(<ProgressBar value={75} />);
    const progressbar = screen.getByRole('progressbar');
    expect(progressbar).toHaveAttribute('aria-label', 'Progress: 75%');
  });

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

    rerender(<ProgressBar value={-50} />);
    progressbar = screen.getByRole('progressbar');
    expect(progressbar).toHaveAttribute('aria-valuenow', '0');
  });

  it('applies small size class when specified', () => {
    render(<ProgressBar value={50} size="sm" />);
    const progressbar = screen.getByRole('progressbar');
    expect(progressbar).toHaveClass('h-1');
  });

  it('applies default size class', () => {
    render(<ProgressBar value={50} />);
    const progressbar = screen.getByRole('progressbar');
    expect(progressbar).toHaveClass('h-2');
  });

  it('applies large size class when specified', () => {
    render(<ProgressBar value={50} size="lg" />);
    const progressbar = screen.getByRole('progressbar');
    expect(progressbar).toHaveClass('h-3');
  });

  it('applies custom className', () => {
    const { container } = render(<ProgressBar value={50} className="custom-class" />);
    expect(container.firstChild).toHaveClass('custom-class');
  });

  it('shows label when showLabel is true', () => {
    render(<ProgressBar value={75} showLabel />);
    expect(screen.getByText('Progress')).toBeInTheDocument();
    expect(screen.getByText('75%')).toBeInTheDocument();
  });

  it('does not show label by default', () => {
    render(<ProgressBar value={75} />);
    expect(screen.queryByText('Progress')).not.toBeInTheDocument();
  });

  it('applies default variant styles', () => {
    const { container } = render(<ProgressBar value={50} />);
    const bar = container.querySelector('[style*="width"]');
    expect(bar).toHaveClass('bg-primary');
  });

  it('applies success variant styles', () => {
    const { container } = render(<ProgressBar value={50} variant="success" />);
    const bar = container.querySelector('[style*="width"]');
    expect(bar).toHaveClass('bg-green-500');
  });

  it('applies warning variant styles', () => {
    const { container } = render(<ProgressBar value={50} variant="warning" />);
    const bar = container.querySelector('[style*="width"]');
    expect(bar).toHaveClass('bg-yellow-500');
  });

  it('applies error variant styles', () => {
    const { container } = render(<ProgressBar value={50} variant="error" />);
    const bar = container.querySelector('[style*="width"]');
    expect(bar).toHaveClass('bg-red-500');
  });

  it('uses custom aria-label when provided', () => {
    render(<ProgressBar value={50} aria-label="Custom label" />);
    const progressbar = screen.getByRole('progressbar');
    expect(progressbar).toHaveAttribute('aria-label', 'Custom label');
  });
});