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

const steps = [
  { id: 1, label: 'Step 1' },
  { id: 2, label: 'Step 2' },
  { id: 3, label: 'Step 3' },
];

describe('StepIndicator', () => {
  it('renders all steps', () => {
    render(<StepIndicator steps={steps} currentStep={1} />);
    expect(screen.getByText('Step 1')).toBeInTheDocument();
    expect(screen.getByText('Step 2')).toBeInTheDocument();
    expect(screen.getByText('Step 3')).toBeInTheDocument();
  });

  it('shows step numbers', () => {
    render(<StepIndicator steps={steps} currentStep={1} />);
    expect(screen.getByText('1')).toBeInTheDocument();
    expect(screen.getByText('2')).toBeInTheDocument();
    expect(screen.getByText('3')).toBeInTheDocument();
  });

  it('highlights current step', () => {
    render(<StepIndicator steps={steps} currentStep={2} />);
    const step2Circle = screen.getByText('2').closest('div');
    expect(step2Circle).toHaveClass('bg-blue-600');
  });

  it('shows checkmark for completed steps', () => {
    const { container } = render(<StepIndicator steps={steps} currentStep={3} />);
    const checkmarks = container.querySelectorAll('svg');
    // Steps 1 and 2 should show checkmarks
    expect(checkmarks.length).toBe(2);
  });

  it('applies pending style to future steps', () => {
    render(<StepIndicator steps={steps} currentStep={1} />);
    const step3Circle = screen.getByText('3').closest('div');
    expect(step3Circle).toHaveClass('bg-gray-200');
  });

  it('shows connectors between steps by default', () => {
    const { container } = render(<StepIndicator steps={steps} currentStep={1} />);
    const connectors = container.querySelectorAll('.w-16');
    expect(connectors.length).toBe(2);
  });

  it('hides connectors when showConnectors is false', () => {
    const { container } = render(<StepIndicator steps={steps} currentStep={1} showConnectors={false} />);
    const connectors = container.querySelectorAll('.w-16');
    expect(connectors.length).toBe(0);
  });

  it('applies completed style to connector before current step', () => {
    const { container } = render(<StepIndicator steps={steps} currentStep={2} />);
    const connectors = container.querySelectorAll('.w-16');
    expect(connectors[0]).toHaveClass('bg-blue-600');
    expect(connectors[1]).toHaveClass('bg-gray-200');
  });

  it('applies blue color by default', () => {
    render(<StepIndicator steps={steps} currentStep={1} />);
    const currentStep = screen.getByText('1').closest('div');
    expect(currentStep).toHaveClass('bg-blue-600');
  });

  it('applies brand color', () => {
    render(<StepIndicator steps={steps} currentStep={1} color="brand" />);
    const currentStep = screen.getByText('1').closest('div');
    expect(currentStep).toHaveClass('bg-brand-600');
  });

  it('applies green color', () => {
    render(<StepIndicator steps={steps} currentStep={1} color="green" />);
    const currentStep = screen.getByText('1').closest('div');
    expect(currentStep).toHaveClass('bg-green-600');
  });

  it('applies purple color', () => {
    render(<StepIndicator steps={steps} currentStep={1} color="purple" />);
    const currentStep = screen.getByText('1').closest('div');
    expect(currentStep).toHaveClass('bg-purple-600');
  });

  it('applies custom className', () => {
    const { container } = render(<StepIndicator steps={steps} currentStep={1} className="custom-class" />);
    expect(container.firstChild).toHaveClass('custom-class');
  });

  it('centers steps', () => {
    const { container } = render(<StepIndicator steps={steps} currentStep={1} />);
    expect(container.firstChild).toHaveClass('flex', 'items-center', 'justify-center');
  });

  it('applies active text color to current step label', () => {
    render(<StepIndicator steps={steps} currentStep={2} />);
    const step2Label = screen.getByText('Step 2');
    expect(step2Label).toHaveClass('text-blue-600');
  });

  it('applies pending text color to future step labels', () => {
    render(<StepIndicator steps={steps} currentStep={1} />);
    const step3Label = screen.getByText('Step 3');
    expect(step3Label).toHaveClass('text-gray-400');
  });

  it('applies active text color to completed step labels', () => {
    render(<StepIndicator steps={steps} currentStep={3} />);
    const step1Label = screen.getByText('Step 1');
    expect(step1Label).toHaveClass('text-blue-600');
  });

  it('handles single step', () => {
    const singleStep = [{ id: 1, label: 'Only Step' }];
    render(<StepIndicator steps={singleStep} currentStep={1} />);
    expect(screen.getByText('Only Step')).toBeInTheDocument();
    expect(screen.getByText('1')).toBeInTheDocument();
  });

  it('renders step circles with correct size', () => {
    render(<StepIndicator steps={steps} currentStep={1} />);
    const stepCircle = screen.getByText('1').closest('div');
    expect(stepCircle).toHaveClass('w-8', 'h-8');
  });

  it('renders step circles as rounded', () => {
    render(<StepIndicator steps={steps} currentStep={1} />);
    const stepCircle = screen.getByText('1').closest('div');
    expect(stepCircle).toHaveClass('rounded-full');
  });

  it('handles string IDs', () => {
    const stepsWithStringIds = [
      { id: 'first', label: 'First' },
      { id: 'second', label: 'Second' },
    ];
    render(<StepIndicator steps={stepsWithStringIds} currentStep={1} />);
    expect(screen.getByText('First')).toBeInTheDocument();
    expect(screen.getByText('Second')).toBeInTheDocument();
  });
});
