import { motion } from 'framer-motion';
import { Check } from 'lucide-react';
import type { WizardStep } from '@/types/quote';
import { cn } from '@/lib/utils';

export interface WizardProgressProps {
  steps: WizardStep[];
  currentStep: number;
  onStepClick?: (stepIndex: number) => void;
}

export function WizardProgress({ steps, currentStep, onStepClick }: WizardProgressProps) {
  const isCompactMode = steps.length > 5;

  return (
    <nav aria-label="Progress" className="w-full">
      {/* Desktop stepper */}
      <ol className="flex items-start justify-between">
        {steps.map((step, index) => {
          const isCompleted = step.isComplete;
          const isCurrent = index === currentStep;
          const isClickable = isCompleted || index <= currentStep;
          const isLast = index === steps.length - 1;

          return (
            <li
              key={step.id}
              className={cn(
                'relative flex flex-col items-center',
                !isLast && 'flex-1'
              )}
            >
              {/* Connector line */}
              {!isLast && (
                <div
                  className="absolute top-[18px] left-[calc(50%+18px)] right-[calc(-50%+18px)] h-[2px] bg-gray-200"
                  aria-hidden="true"
                >
                  <motion.div
                    className="h-full bg-[#fe7400] origin-left"
                    initial={{ scaleX: 0 }}
                    animate={{ scaleX: isCompleted ? 1 : 0 }}
                    transition={{ duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] }}
                  />
                </div>
              )}

              <button
                type="button"
                onClick={() => isClickable && onStepClick?.(index)}
                disabled={!isClickable}
                className={cn(
                  'group relative z-10 flex flex-col items-center gap-2',
                  isClickable ? 'cursor-pointer' : 'cursor-not-allowed'
                )}
                aria-current={isCurrent ? 'step' : undefined}
              >
                {/* Step circle */}
                <motion.div
                  className={cn(
                    'relative flex items-center justify-center rounded-full transition-all duration-300',
                    isCompactMode ? 'h-7 w-7' : 'h-9 w-9',
                    isCompleted
                      ? 'bg-[#fe7400] shadow-[0_0_0_4px_rgba(254,116,0,0.1)]'
                      : isCurrent
                      ? 'bg-white border-[2.5px] border-[#fe7400] shadow-[0_0_0_4px_rgba(254,116,0,0.1)]'
                      : 'bg-white border-2 border-gray-200'
                  )}
                  whileHover={isClickable ? { scale: 1.08 } : {}}
                  whileTap={isClickable ? { scale: 0.95 } : {}}
                  layout
                >
                  {isCompleted ? (
                    <motion.div
                      initial={{ scale: 0 }}
                      animate={{ scale: 1 }}
                      transition={{ type: 'spring', stiffness: 300, damping: 20 }}
                    >
                      <Check className={cn(isCompactMode ? 'h-3.5 w-3.5' : 'h-4 w-4', 'text-white')} strokeWidth={3} />
                    </motion.div>
                  ) : (
                    <span
                      className={cn(
                        'font-bold',
                        isCompactMode ? 'text-xs' : 'text-sm',
                        isCurrent ? 'text-[#fe7400]' : 'text-gray-400'
                      )}
                      style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}
                    >
                      {index + 1}
                    </span>
                  )}
                </motion.div>

                {/* Step label */}
                <div className={cn(
                  'text-center max-w-[80px]',
                  isCompactMode && 'hidden sm:block'
                )}>
                  <span
                    className={cn(
                      'font-medium whitespace-nowrap leading-tight block',
                      isCompactMode ? 'text-[10px]' : 'text-[11px]',
                      isCurrent ? 'text-[#fe7400]' : isCompleted ? 'text-[#333d49]' : 'text-gray-400'
                    )}
                    style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}
                  >
                    {step.title}
                  </span>
                </div>
              </button>
            </li>
          );
        })}
      </ol>

      {/* Mobile step indicator for compact mode */}
      {isCompactMode && (
        <div className="sm:hidden mt-4 text-center">
          <span className="text-xs text-gray-400">
            Step {currentStep + 1} of {steps.length}
          </span>
          <span className="text-sm font-semibold text-[#333d49] ml-2">
            {steps[currentStep]?.title}
          </span>
        </div>
      )}
    </nav>
  );
}
