'use client'

import React from 'react'
import { motion } from 'framer-motion'
import { Check } from 'lucide-react'

interface ProgressStepperProps {
  step: number
  basketItemsCount: number
}

const STEP_LABELS = ['Kunde', 'Modell', 'Software', 'Abschluss']

export function ProgressStepper({ step, basketItemsCount }: ProgressStepperProps) {
  // Calculate progress percentage for active line (Step 1: 0%, Step 2: 33.3%, Step 3: 66.6%, Step 4: 100%)
  const progressPercent = ((step - 1) / 3) * 100

  return (
    <div className="max-w-xl mx-auto mb-10 px-4">
      <div className="flex justify-between relative">
        {/* Static Background Line */}
        <div className="absolute top-[20px] left-[10%] right-[10%] h-[2px] bg-slate-800 z-0 rounded-full" />

        {/* Animated Active Line (bg-sky-500) */}
        <motion.div
          className="absolute top-[20px] left-[10%] h-[2px] bg-gradient-to-r from-blue-600 via-sky-400 to-cyan-400 z-0 rounded-full shadow-[0_0_12px_rgba(56,189,248,0.8)]"
          initial={{ width: '0%' }}
          animate={{ width: `${progressPercent * 0.8}%` }}
          transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
        />

        {[1, 2, 3, 4].map(s => {
          const isDone = step > s
          const isActive = step === s

          return (
            <div key={s} className="relative z-10 flex flex-col items-center gap-2">
              <motion.div
                initial={false}
                animate={{
                  scale: isActive ? 1.15 : 1,
                }}
                transition={{ type: 'spring', stiffness: 300, damping: 20 }}
                className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-300 ${
                  isDone
                    ? 'bg-sky-500 text-slate-950 shadow-[0_0_15px_rgba(56,189,248,0.6)] border-2 border-sky-400'
                    : isActive
                    ? 'bg-slate-950 border-2 border-sky-400 text-sky-400 shadow-[0_0_20px_rgba(56,189,248,0.7)]'
                    : 'bg-slate-900 border-2 border-slate-800 text-slate-500'
                }`}
              >
                {isDone ? <Check className="w-5 h-5 stroke-[3]" /> : s}
              </motion.div>

              <span
                className={`text-xs font-semibold tracking-wide transition-colors duration-300 flex items-center gap-1.5 ${
                  isActive || isDone ? 'text-sky-300' : 'text-slate-500'
                }`}
              >
                {STEP_LABELS[s - 1]}
                {s === 3 && basketItemsCount > 0 && (
                  <span className="bg-sky-500 text-slate-950 text-[10px] w-4 h-4 rounded-full flex items-center justify-center font-extrabold shadow-sm">
                    {basketItemsCount}
                  </span>
                )}
              </span>
            </div>
          )
        })}
      </div>
    </div>
  )
}