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

import AiJobProgress from '@/Components/Ai/AiJobProgress';

describe('AiJobProgress', () => {
  it('shows spinner and "Generating drafts..." when not complete', () => {
    render(
      <AiJobProgress
        aiJob={{
          status: 'processing',
          completed_recommendations: 2,
          total_recommendations: 5,
          progress_percent: 40,
        }}
      />,
    );

    expect(screen.getByText(/Generating\.\.\. \(2 of 5 drafts\)/)).toBeInTheDocument();
    // Loader2 has animate-spin class
    const spinner = document.querySelector('.animate-spin');
    expect(spinner).toBeInTheDocument();
  });

  it('shows checkmark and "All drafts generated!" when complete', () => {
    render(
      <AiJobProgress
        aiJob={{
          status: 'completed',
          completed_recommendations: 5,
          total_recommendations: 5,
          progress_percent: 100,
        }}
      />,
    );

    expect(screen.getByText('All drafts generated!')).toBeInTheDocument();
    // No spinner present when complete
    const spinner = document.querySelector('.animate-spin');
    expect(spinner).not.toBeInTheDocument();
  });

  it('progress bar is green-themed when complete', () => {
    const { container } = render(
      <AiJobProgress
        aiJob={{
          status: 'completed',
          completed_recommendations: 5,
          total_recommendations: 5,
          progress_percent: 100,
        }}
      />,
    );

    const progressBar = container.querySelector('[role="progressbar"]') as HTMLElement;
    expect(progressBar.className).toContain('bg-green-100');
  });

  it('progress bar is blue-themed when in progress', () => {
    const { container } = render(
      <AiJobProgress
        aiJob={{
          status: 'processing',
          completed_recommendations: 2,
          total_recommendations: 5,
          progress_percent: 40,
        }}
      />,
    );

    const progressBar = container.querySelector('[role="progressbar"]') as HTMLElement;
    expect(progressBar.className).toContain('bg-blue-100');
  });

  it('shows count "2/5" when in progress', () => {
    render(
      <AiJobProgress
        aiJob={{
          status: 'processing',
          completed_recommendations: 2,
          total_recommendations: 5,
          progress_percent: 40,
        }}
      />,
    );

    expect(screen.getByText('2/5')).toBeInTheDocument();
  });
});