'use client';

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

interface ProgressBarProps {
  currentStep: 1 | 2 | 3;
  totalSteps?: 3;
  className?: string;
}

const STEP_LABELS = ['01', '02', '03'];

export default function ProgressBar({ currentStep, className }: ProgressBarProps) {
  return (
    <div
      className={cn('flex items-center justify-center', className)}
      role="progressbar"
      aria-valuenow={currentStep}
      aria-valuemin={1}
      aria-valuemax={3}
    >
      <div className="flex items-center gap-0 w-full max-w-xs">
        {([1, 2, 3] as const).map((step) => {
          const isComplete = step < currentStep;
          const isActive = step === currentStep;
          const isUpcoming = step > currentStep;
          const showFilledLine = step < currentStep;

          return (
            <div key={step} className="flex items-center flex-1 last:flex-none">
              {/* Step circle */}
              <motion.div
                className={cn(
                  'relative flex items-center justify-center w-7 h-7 rounded-full text-[11px] font-semibold flex-shrink-0 transition-colors duration-300',
                  isComplete && 'bg-primary text-white',
                  isActive && 'bg-primary-dark text-white shadow-[0_0_0_3px_rgba(91,164,217,0.15)]',
                  isUpcoming && 'bg-surface-low text-outline border border-outline-variant/40',
                )}
              >
                {isComplete ? (
                  <motion.div
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    transition={{ type: 'spring', stiffness: 400, damping: 20 }}
                  >
                    <Check size={13} strokeWidth={2.5} />
                  </motion.div>
                ) : (
                  <span>{STEP_LABELS[step - 1]}</span>
                )}
              </motion.div>

              {/* Connector line — only between steps, fills only when step is complete */}
              {step < 3 && (
                <div className="flex-1 h-px mx-2 bg-outline-variant/25 relative overflow-hidden">
                  <motion.div
                    className="absolute inset-y-0 left-0 right-0 bg-primary"
                    initial={{ scaleX: 0 }}
                    animate={{ scaleX: showFilledLine ? 1 : 0 }}
                    transition={{
                      type: 'spring',
                      stiffness: 200,
                      damping: 25,
                    }}
                    style={{ transformOrigin: 'left' }}
                  />
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}
