'use client'

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

interface ProgressStepperProps {
  step: number
  basketItemsCount: number
  orientation?: 'horizontal' | 'vertical'
  onStepClick?: (step: number) => void
}

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

export function ProgressStepper({ step, basketItemsCount, orientation = 'horizontal', onStepClick }: ProgressStepperProps) {
  const progressPercent = ((step - 1) / 3) * 100

  if (orientation === 'vertical') {
    return (
      <div className="relative py-2">
        <div className="flex flex-col gap-6 relative">
          {/* Static Background Vertical Line */}
          <div className="absolute left-[19px] top-[20px] bottom-[20px] w-[2px] bg-slate-800 z-0 rounded-full" />

          {/* Animated Active Vertical Line */}
          <motion.div
            className="absolute left-[19px] top-[20px] w-[2px] bg-gradient-to-b from-blue-600 via-sky-400 to-cyan-400 z-0 rounded-full shadow-[0_0_12px_rgba(56,189,248,0.8)]"
            initial={{ height: '0%' }}
            animate={{ height: `${progressPercent * 0.75}%` }}
            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
            const isClickable = onStepClick && s < step

            return (
              <div 
                key={s} 
                onClick={() => isClickable && onStepClick(s)}
                className={`relative z-10 flex items-center gap-3 ${isClickable ? 'cursor-pointer group' : ''}`}
              >
                <motion.div
                  initial={false}
                  animate={{
                    scale: isActive ? 1.1 : 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 shrink-0 ${
                    isDone
                      ? 'bg-sky-500 text-slate-950 shadow-[0_0_15px_rgba(56,189,248,0.6)] border-2 border-sky-400 group-hover:scale-105'
                      : 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>

                <div className="flex flex-col">
                  <span
                    className={`text-xs font-bold 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>
                  {isClickable && (
                    <span className="text-[10px] text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity">
                      Zurück zu Schritt {s}
                    </span>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      </div>
    )
  }
  // Calculate progress percentage for active line (Step 1: 0%, Step 2: 33.3%, Step 3: 66.6%, Step 4: 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>
  )
}