import { IconLoading } from '../icons';
import styles from './Steps.module.scss';

export type StepStatus = 'idle' | 'active' | 'completed';

export interface StepItem {
  /** Step label text */
  label: string;
  /** Count to display in parentheses */
  count?: number;
  /** Step status */
  status: StepStatus;
}

export interface StepsProps {
  /** Header text displayed above the steps */
  header?: string;
  /** Array of step items */
  steps: StepItem[];
  /** Additional CSS classes */
  className?: string;
}

const CheckDoubleIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M1.5 12.5L5.57 16.57L6.98 15.16L2.91 11.09L1.5 12.5ZM8.4 16.57L17.57 7.39L16.16 5.98L7 15.15L4.08 12.23L2.67 13.64L8.4 16.57ZM12.21 14.37L13.62 15.78L22.78 6.62L21.37 5.21L12.21 14.37Z"
      fill="currentColor"
    />
  </svg>
);

const ChevronRight = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M6 12L10 8L6 4"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const SyncIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M12 4V1L8 5L12 9V6C15.31 6 18 8.69 18 12C18 13.01 17.75 13.97 17.3 14.8L18.76 16.26C19.54 15.03 20 13.57 20 12C20 7.58 16.42 4 12 4ZM12 18C8.69 18 6 15.31 6 12C6 10.99 6.25 10.03 6.7 9.2L5.24 7.74C4.46 8.97 4 10.43 4 12C4 16.42 7.58 20 12 20V23L16 19L12 15V18Z"
      fill="currentColor"
    />
  </svg>
);

export const Steps = ({
  header = 'Sync in progress',
  steps,
  className = '',
}: StepsProps) => {
  const containerClassName = [styles.container, className].filter(Boolean).join(' ');

  return (
    <div className={containerClassName}>
      <div className={styles.header}>
        <span className={styles.headerIcon}><SyncIcon /></span>
        <span className={styles.headerText}>{header}</span>
      </div>
      <div className={styles.stepsRow}>
        {steps.map((step, index) => (
          <div key={index} className={styles.stepGroup}>
            {index > 0 && (
              <span className={styles.chevron}>
                <ChevronRight />
              </span>
            )}
            <div className={`${styles.step} ${styles[step.status]}`}>
              <span className={styles.stepIndicator}>
                {step.status === 'idle' && <span className={styles.emptyCircle} />}
                {step.status === 'active' && <IconLoading size={14} />}
                {step.status === 'completed' && (
                  <span className={styles.completedIcon}><CheckDoubleIcon /></span>
                )}
              </span>
              <span className={styles.stepLabel}>
                {step.label}
                {step.count !== undefined && ` (${step.count})`}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};