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

describe('Steps', () => {
  it('renders all step names', () => {
    render(React.createElement(Steps, { currentStep: 1 }));

    // Each step name appears twice: sr-only and visible label
    expect(screen.getAllByText('Service').length).toBeGreaterThan(0);
    expect(screen.getAllByText('Date & Time').length).toBeGreaterThan(0);
    expect(screen.getAllByText('Account').length).toBeGreaterThan(0);
    expect(screen.getAllByText('Payment').length).toBeGreaterThan(0);
    expect(screen.getAllByText('Done').length).toBeGreaterThan(0);
  });

  it('marks completed steps with check icon', () => {
    render(React.createElement(Steps, { currentStep: 3 }));
    
    // Step 1 and 2 are completed, should have check icons
    const checkIcons = document.querySelectorAll('.lucide-check');
    expect(checkIcons.length).toBe(2);
  });

  it('highlights current step', () => {
    render(React.createElement(Steps, { currentStep: 2 }));
    
    const currentStepIndicator = document.querySelector('[aria-current="step"]');
    expect(currentStepIndicator).toBeInTheDocument();
  });

  it('renders progress navigation', () => {
    render(React.createElement(Steps, { currentStep: 1 }));
    
    expect(screen.getByRole('list')).toBeInTheDocument();
    expect(screen.getAllByRole('listitem')).toHaveLength(5);
  });

  it('shows future steps as incomplete', () => {
    render(React.createElement(Steps, { currentStep: 2 }));
    
    // Steps 3, 4, 5 should not have check icons
    const listItems = screen.getAllByRole('listitem');
    expect(listItems.length).toBe(5);
  });

  it('handles first step correctly', () => {
    render(React.createElement(Steps, { currentStep: 1 }));
    
    // No completed steps
    const checkIcons = document.querySelectorAll('.lucide-check');
    expect(checkIcons.length).toBe(0);
    
    // Current step indicator
    const currentStepIndicator = document.querySelector('[aria-current="step"]');
    expect(currentStepIndicator).toBeInTheDocument();
  });

  it('handles last step correctly', () => {
    render(React.createElement(Steps, { currentStep: 5 }));
    
    // All previous steps completed
    const checkIcons = document.querySelectorAll('.lucide-check');
    expect(checkIcons.length).toBe(4);
    
    // Current step indicator for Done
    const currentStepIndicator = document.querySelector('[aria-current="step"]');
    expect(currentStepIndicator).toBeInTheDocument();
  });
});