'use client'

import type { PipelineStep } from '@/app/(admin)/ai/ocr-pipeline/types'

interface KombiStepperProps {
  steps: PipelineStep[]
  currentStep: number
  onStepClick: (index: number) => void
}

export function KombiStepper({ steps, currentStep, onStepClick }: KombiStepperProps) {
  return (
    <div className="flex items-center gap-0.5 px-3 py-2.5 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-x-auto">
      {steps.map((step, index) => {
        const isActive = index === currentStep
        const isCompleted = step.status === 'completed'
        const isFailed = step.status === 'failed'
        const isSkipped = step.status === 'skipped'
        const isClickable = (index <= currentStep || isCompleted) && !isSkipped

        return (
          <div key={step.id} className="flex items-center flex-shrink-0">
            {index > 0 && (
              <div
                className={`h-0.5 w-4 mx-0.5 ${
                  isSkipped
                    ? 'bg-gray-200 dark:bg-gray-700 border-t border-dashed border-gray-400'
                    : index <= currentStep ? 'bg-teal-400' : 'bg-gray-300 dark:bg-gray-600'
                }`}
              />
            )}
            <button
              onClick={() => isClickable && onStepClick(index)}
              disabled={!isClickable}
              className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-all whitespace-nowrap ${
                isSkipped
                  ? 'bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-600 line-through'
                  : isActive
                    ? 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300 ring-2 ring-teal-400'
                    : isCompleted
                      ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
                      : isFailed
                        ? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
                        : 'text-gray-400 dark:text-gray-500'
              } ${isClickable ? 'cursor-pointer hover:opacity-80' : 'cursor-default'}`}
              title={step.name}
            >
              <span className="text-sm">
                {isSkipped ? '-' : isCompleted ? '\u2713' : isFailed ? '\u2717' : step.icon}
              </span>
              <span className="hidden lg:inline">{step.name}</span>
              <span className="lg:hidden">{index + 1}</span>
            </button>
          </div>
        )
      })}
    </div>
  )
}