import { Check } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { AIWizardPhase } from '@/types'

const STEPS = [
  { key: 'foundation', label: 'Foundation' },
  { key: 'scaffolding', label: 'Scaffold' },
  { key: 'detailing', label: 'Detail' },
  { key: 'reviewing', label: 'Review' },
] as const

const PHASE_ORDER: Record<string, number> = {
  foundation: 0,
  scaffolding: 1,
  generating: 1,
  detailing: 2,
  reviewing: 3,
  completed: 4,
  error: -1,
}

interface WizardStepIndicatorProps {
  phase: AIWizardPhase
}

export function WizardStepIndicator({ phase }: WizardStepIndicatorProps) {
  const currentIndex = PHASE_ORDER[phase] ?? 0

  return (
    <div className="flex items-center gap-1 px-2">
      {STEPS.map((step, i) => {
        const isCompleted = currentIndex > i
        const isCurrent = currentIndex === i

        return (
          <div key={step.key} className="flex items-center gap-1">
            {i > 0 && (
              <div
                className={cn(
                  'h-px w-4 sm:w-6',
                  isCompleted ? 'bg-primary' : 'bg-border'
                )}
              />
            )}
            <div className="flex items-center gap-1.5">
              <div
                className={cn(
                  'flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-medium',
                  isCompleted && 'bg-primary text-white',
                  isCurrent && 'bg-primary/20 text-primary ring-1 ring-primary/40',
                  !isCompleted && !isCurrent && 'bg-accent text-muted-foreground'
                )}
              >
                {isCompleted ? <Check className="h-3 w-3" /> : i + 1}
              </div>
              <span
                className={cn(
                  'hidden text-xs sm:inline',
                  isCurrent ? 'font-medium text-foreground' : 'text-muted-foreground'
                )}
              >
                {step.label}
              </span>
            </div>
          </div>
        )
      })}
    </div>
  )
}
