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

describe('AgentStatusIndicator', () => {
  it('renders idle status with correct color', () => {
    const { container } = render(<AgentStatusIndicator status="idle" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('bg-yellow-500');
  });

  it('renders active status with correct color', () => {
    const { container } = render(<AgentStatusIndicator status="active" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('bg-green-500');
  });

  it('renders working status with animation', () => {
    const { container } = render(<AgentStatusIndicator status="working" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('bg-green-500');
    expect(indicator).toHaveClass('animate-pulse');
  });

  it('renders pending status with correct color', () => {
    const { container } = render(<AgentStatusIndicator status="pending" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('bg-gray-400');
  });

  it('renders error status with correct color', () => {
    const { container } = render(<AgentStatusIndicator status="error" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('bg-red-500');
  });

  it('renders terminated status with correct color', () => {
    const { container } = render(<AgentStatusIndicator status="terminated" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('bg-gray-600');
  });

  it('applies small size by default', () => {
    const { container } = render(<AgentStatusIndicator status="active" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('h-2', 'w-2');
  });

  it('applies medium size when specified', () => {
    const { container } = render(<AgentStatusIndicator status="active" size="md" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('h-3', 'w-3');
  });

  it('applies large size when specified', () => {
    const { container } = render(<AgentStatusIndicator status="active" size="lg" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('h-4', 'w-4');
  });

  it('shows label when showLabel is true', () => {
    render(<AgentStatusIndicator status="active" showLabel />);
    expect(screen.getByText('Active')).toBeInTheDocument();
  });

  it('does not show label by default', () => {
    render(<AgentStatusIndicator status="active" />);
    expect(screen.queryByText('Active')).not.toBeInTheDocument();
  });

  it('has accessible status role and label', () => {
    render(<AgentStatusIndicator status="active" />);
    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Status: Active');
  });

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