import React from 'react';
import { motion } from 'framer-motion';

const steps = [
  { id: 1, label: 'Profil' },
  { id: 2, label: 'Dopasowanie' },
  { id: 3, label: 'Dokumenty' },
  { id: 4, label: 'Generowanie' },
  { id: 5, label: 'Recenzja (Critic)' }
];

interface Props {
  activeStep: number;
}

const ProgressStepper: React.FC<Props> = ({ activeStep }) => {
  return (
    <div className="stepper" style={{ position: 'relative', paddingBottom: '1rem' }}>
        <div style={{ position: 'absolute', top: '15px', left: '10%', right: '10%', height: '3px', background: 'rgba(255,255,255,0.05)', zIndex: 0, borderRadius: '4px' }}>
            {/* Animowany background progress bar z rozświetleniem */}
            <motion.div 
               initial={{ width: 0 }}
               animate={{ width: `${((activeStep - 1) / (steps.length - 1)) * 100}%` }}
               transition={{ duration: 0.6, ease: 'easeOut' }}
               style={{ 
                   height: '100%', 
                   background: 'linear-gradient(90deg, var(--accent-blue), #60A5FA)', 
                   borderRadius: '4px',
                   boxShadow: '0 0 10px rgba(59, 130, 246, 0.4)'
               }}
            />
        </div>
        
      {steps.map((step, index) => {
        const isCompleted = activeStep > step.id;
        const isActive = activeStep === step.id;
        
        return (
          <motion.div 
              key={step.id} 
              className={`step ${isActive ? 'active' : ''} ${isCompleted ? 'completed' : ''}`}
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
              style={{ zIndex: 1, position: 'relative' }}
          >
            <motion.div 
               className="step-circle"
               animate={isActive ? { 
                   scale: [1, 1.1, 1], 
                   boxShadow: ["0 0 0px rgba(59,130,246,0)", "0 0 20px rgba(59,130,246,0.6)", "0 0 0px rgba(59,130,246,0)"],
                   borderColor: 'var(--accent-blue)',
                   background: 'rgba(59,130,246,0.15)'
               } : { 
                   scale: 1, 
                   boxShadow: isCompleted ? "0 0 10px rgba(16,185,129,0.3)" : "none",
                   background: isCompleted ? 'var(--accent-green)' : 'var(--bg-card)',
                   borderColor: isCompleted ? 'var(--accent-green)' : 'var(--border-subtle)'
               }}
               transition={{ duration: isActive ? 2 : 0.3, repeat: isActive ? Infinity : 0 }}
               style={{
                   width: '32px', height: '32px', display: 'flex', alignItems: 'center', justifyContent: 'center',
                   borderRadius: '50%', fontWeight: 800, fontSize: '0.9rem', marginBottom: '0.6rem',
                   color: isActive ? 'var(--accent-blue)' : (isCompleted ? '#000' : 'var(--text-muted)')
               }}
            >
              {isCompleted ? '✓' : step.id}
            </motion.div>
            <motion.span 
              className="step-label"
              animate={{ color: isActive ? '#fff' : (isCompleted ? 'var(--accent-green)' : 'var(--text-muted)') }}
              style={{ 
                  fontWeight: isActive ? 800 : (isCompleted ? 600 : 500), 
                  textShadow: isActive ? '0 0 8px rgba(255,255,255,0.4)' : 'none',
                  fontSize: '0.85rem'
              }}
            >
              {step.label}
            </motion.span>
          </motion.div>
        );
      })}
    </div>
  );
};

export default ProgressStepper;