import React from 'react'

export default function UploadStepper({ steps = [], activeStep = 1, highestUnlockedStep = 1, onStepClick }) {
  const safeActive = Math.max(1, Math.min(steps.length || 1, activeStep))

  return (
    <nav aria-label="Upload steps" className="rounded-xl ring-1 ring-white/10 bg-slate-900/70 px-3 py-3 sm:px-4">
      <ol className="flex flex-nowrap items-center gap-3 overflow-x-auto sm:gap-4">
        {steps.map((step, index) => {
          const number = index + 1
          const isActive = number === safeActive
          const isComplete = number < safeActive
          const isLocked = number > highestUnlockedStep
          const canNavigate = number < safeActive && !isLocked

          const baseBtn = 'inline-flex items-center gap-2 rounded-full border px-2.5 py-1.5 text-xs sm:px-3'
          const stateClass = isActive
            ? 'border-sky-300/80 bg-sky-500/30 text-white shadow-[0_8px_24px_rgba(14,165,233,0.12)]'
            : isComplete
              ? 'border-emerald-300/30 bg-emerald-500/15 text-emerald-100 hover:bg-emerald-500/25'
              : isLocked
                ? 'cursor-default border-white/10 bg-white/5 text-white/40'
                : 'border-white/10 bg-white/5 text-white/80 hover:bg-white/10'

          const circleClass = isComplete
            ? 'border-emerald-300/60 bg-emerald-500/20 text-emerald-100'
            : isActive
              ? 'border-sky-300/60 bg-sky-500/30 text-white'
              : 'border-white/20 bg-white/5 text-white/80'

          return (
            <li key={step.key} className="flex-shrink-0 flex items-center gap-3">
              <button
                type="button"
                onClick={() => canNavigate && onStepClick?.(number)}
                disabled={isLocked}
                aria-disabled={isLocked ? 'true' : 'false'}
                aria-current={isActive ? 'step' : undefined}
                className={`${baseBtn} ${stateClass} flex-shrink-0`}
              >
                <span className={`grid h-5 w-5 place-items-center rounded-full border text-[11px] ${circleClass}`}>
                  {isComplete ? '✓' : number}
                </span>
                <span className="whitespace-nowrap pr-3">{step.label}</span>
              </button>
              {index < steps.length - 1 && <span className="text-white/50 mx-1 select-none">→</span>}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}