import {
  FilesServiceAddServiceStep,
  FilesAddServicePaymentStep,
  FilesServiceDetailsStep,
} from './icons/FilesServiceIcons';

/**
 * استپر صفحه‌ی سرویس/تسویه — پورت tauri files/services/CustomizedStepper
 * (کانکتور بنفش، آیکون دایره‌ای هر گام، تیک سبز برای گام‌های کامل‌شده).
 */

// هر برچسب گام آیکون ثابت خودش را دارد تا در حالت payment-only هم درست بماند.
const ICON_BY_LABEL: Record<string, number> = {
  'ایجاد سرویس': 1,
  'ویرایش': 1,
  'پرداخت': 2,
  'جزییات': 3,
};

function StepIcon({ index, active, completed }: { index: number; active: boolean; completed: boolean }) {
  if (completed && !active) {
    // دایره سفید با تیک سبز (tauri ColorlibStepIconRoot completed state)
    return (
      <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--surface)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <svg width="32" height="32" viewBox="0 0 24 24" style={{ fill: 'var(--success)' }} xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
        </svg>
      </div>
    );
  }
  const shadow = active ? { boxShadow: '0 4px 10px 0 rgba(85, 89, 206, 0.25)', borderRadius: '50%' } : undefined;
  switch (index) {
    case 1: return <div style={shadow}><FilesServiceAddServiceStep active={active} /></div>;
    case 2: return <div style={shadow}><FilesAddServicePaymentStep active={active} /></div>;
    default: return <div style={shadow}><FilesServiceDetailsStep active={active} /></div>;
  }
}

export default function SessionStepper({ activeStep = 0, steps = [] }: { activeStep?: number; steps?: string[] }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', width: '100%', marginBottom: 24 }}>
      {steps.map((label, i) => (
        <div key={label} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
          {/* connector to previous step (tauri ColorlibConnector: top 22, h 3, marginX 40).
              صفحه RTL است و گامِ قبلی سمت راست می‌افتد؛ MUI در tauri این را خودش flip می‌کرد. */}
          {i > 0 && (
            <div
              data-testid={`step-connector-${i}`}
              style={{
                position: 'absolute', top: 22, left: 'calc(50% + 40px)', right: 'calc(-50% + 40px)',
                height: 3, borderRadius: 1,
                background: i <= activeStep ? 'linear-gradient(95deg, var(--primary) 0%, var(--primary) 100%)' : 'var(--surface-2)',
              }}
            />
          )}
          <StepIcon index={ICON_BY_LABEL[label] ?? i + 1} active={i === activeStep} completed={i < activeStep} />
          <span style={{ marginTop: 8, fontSize: '0.875rem', fontWeight: 600, color: 'var(--text)' }}>
            {label}
          </span>
        </div>
      ))}
    </div>
  );
}