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

const STEPS = ['ایجاد سرویس', 'پرداخت', 'جزییات'];

describe('SessionStepper', () => {
  it('برچسب همه گام‌ها و یک کانکتور به‌ازای هر گام غیر از اولی', () => {
    render(<SessionStepper steps={STEPS} activeStep={0} />);
    STEPS.forEach((l) => expect(screen.getByText(l)).toBeInTheDocument());
    expect(screen.getByTestId('step-connector-1')).toBeInTheDocument();
    expect(screen.getByTestId('step-connector-2')).toBeInTheDocument();
    expect(screen.queryByTestId('step-connector-0')).not.toBeInTheDocument();
  });

  it('کانکتور سمت گامِ قبلی (راست در RTL) کشیده می‌شود، نه بیرون از لبه چپ', () => {
    render(<SessionStepper steps={STEPS} activeStep={0} />);
    const c = screen.getByTestId('step-connector-2');
    // RTL: امتداد به سمت راست (گام قبلی) → left مثبت از مرکز، right منفی
    expect(c.style.left).toBe('calc(50% + 40px)');
    expect(c.style.right).toBe('calc(-50% + 40px)');
  });

  it('کانکتور گام‌های طی‌شده بنفش و بقیه خاکستری', () => {
    render(<SessionStepper steps={STEPS} activeStep={1} />);
    // رنگ‌ها از توکن‌های تم می‌آیند تا در دارک‌مود هم درست باشند
    expect(screen.getByTestId('step-connector-1').style.background).toContain('var(--primary)');
    expect(screen.getByTestId('step-connector-2').style.background).toContain('var(--surface-2)');
  });

  it('استپر خالی: بدون کرش و بدون کانکتور', () => {
    const { container } = render(<SessionStepper steps={[]} activeStep={0} />);
    expect(container.querySelectorAll('[data-testid^="step-connector"]').length).toBe(0);
  });
});