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

describe('TimeDisplay', () => {
  it('should render time display', () => {
    render(<TimeDisplay currentTime={0} duration={0} />);

    expect(screen.getByRole('timer')).toBeInTheDocument();
  });

  it('should display formatted current time', () => {
    render(<TimeDisplay currentTime={65} duration={180} />);

    expect(screen.getByText('1:05')).toBeInTheDocument();
  });

  it('should display formatted duration', () => {
    render(<TimeDisplay currentTime={30} duration={180} />);

    expect(screen.getByText('3:00')).toBeInTheDocument();
  });

  it('should display both times with separator', () => {
    const { container } = render(
      <TimeDisplay currentTime={65} duration={180} />,
    );

    expect(screen.getByText('1:05')).toBeInTheDocument();
    expect(screen.getByText('3:00')).toBeInTheDocument();
    // Check that separator exists in the rendered HTML
    expect(container.textContent).toContain(' / ');
  });

  it('should use custom separator', () => {
    const { container } = render(
      <TimeDisplay currentTime={30} duration={180} separator=" - " />,
    );

    expect(screen.getByText('0:30')).toBeInTheDocument();
    expect(screen.getByText('3:00')).toBeInTheDocument();
    // Check that custom separator exists in the rendered HTML
    expect(container.textContent).toContain(' - ');
  });

  it('should hide separator when showSeparator is false', () => {
    const { container } = render(
      <TimeDisplay currentTime={30} duration={180} showSeparator={false} />,
    );

    expect(screen.getByText('0:30')).toBeInTheDocument();
    expect(screen.getByText('3:00')).toBeInTheDocument();
    // Check that separator is not in the rendered HTML
    expect(container.textContent).not.toContain(' / ');
  });

  it('should format zero time correctly', () => {
    render(<TimeDisplay currentTime={0} duration={0} />);

    expect(screen.getAllByText('0:00')).toHaveLength(2);
  });

  it('should format large durations correctly', () => {
    render(<TimeDisplay currentTime={3661} duration={7200} />);

    expect(screen.getByText('61:01')).toBeInTheDocument();
    expect(screen.getByText('120:00')).toBeInTheDocument();
  });

  it('should apply custom className', () => {
    const { container } = render(
      <TimeDisplay currentTime={30} duration={180} className="custom-class" />,
    );

    expect(container.firstChild).toHaveClass('custom-class');
  });

  it('should have accessible labels', () => {
    render(<TimeDisplay currentTime={65} duration={180} />);

    const timer = screen.getByRole('timer');
    expect(timer).toHaveAttribute('aria-live', 'polite');
    expect(timer).toHaveAttribute('aria-atomic', 'true');
  });

  it('should handle negative time', () => {
    render(<TimeDisplay currentTime={-10} duration={180} />);

    // formatTime should handle negative values and return '0:00'
    expect(screen.getByText('0:00')).toBeInTheDocument();
  });

  it('should handle NaN time', () => {
    render(<TimeDisplay currentTime={NaN} duration={180} />);

    // formatTime should handle NaN and return '0:00'
    expect(screen.getByText('0:00')).toBeInTheDocument();
  });

  it('should handle Infinity time', () => {
    render(<TimeDisplay currentTime={Infinity} duration={180} />);

    // formatTime should handle Infinity and return '0:00'
    expect(screen.getByText('0:00')).toBeInTheDocument();
  });
});
