import { Button } from '@/components/ui/button'
import { X, Check } from 'lucide-react'

interface OnboardingProgressProps {
  currentStep: string
  completedSteps: string[]
  totalSteps: number
  onSkip: () => void
}

const stepLabels: Record<string, string> = {
  'not_started': 'Not started',
  'connect': 'Connect email',
  'first_rule': 'Create first rule',
  'see_results': 'See results',
  'auto_schedule': 'Enable automation',
  'completed': 'Completed',
}

export function OnboardingProgress({ currentStep, completedSteps, totalSteps, onSkip }: OnboardingProgressProps) {
  const stepIndex = ['connect', 'first_rule', 'see_results', 'auto_schedule'].indexOf(currentStep)
  const currentStepNumber = stepIndex >= 0 ? stepIndex + 1 : 0
  const progress = totalSteps > 0 ? (completedSteps.length / totalSteps) * 100 : 0

  if (currentStep === 'completed' || currentStep === 'not_started') {
    return null
  }

  return (
    <div className="bg-white border border-slate-200 rounded-lg p-4 shadow-sm">
      <div className="flex items-center justify-between mb-3">
        <div>
          <p className="text-sm font-semibold text-slate-900">Getting started</p>
          <p className="text-xs text-slate-500">Step {currentStepNumber} of {totalSteps}</p>
        </div>
        <Button variant="ghost" size="sm" onClick={onSkip} className="text-slate-500 hover:text-slate-700">
          <X className="w-4 h-4 mr-1" />
          Skip
        </Button>
      </div>
      
      {/* Progress bar */}
      <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden mb-2">
        <div 
          className="h-full bg-primary-500 transition-all duration-300"
          style={{ width: `${progress}%` }}
        />
      </div>
      
      {/* Step indicators */}
      <div className="flex items-center gap-2 text-xs text-slate-500">
        {['connect', 'first_rule', 'see_results', 'auto_schedule'].map((step, idx) => {
          const isCompleted = completedSteps.includes(step)
          const isCurrent = currentStep === step
          
          return (
            <div key={step} className="flex items-center gap-1 flex-1 min-w-0">
              <div className={`flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center ${
                isCompleted 
                  ? 'bg-green-500 text-white' 
                  : isCurrent 
                    ? 'bg-primary-500 text-white ring-2 ring-primary-200' 
                    : 'bg-slate-200 text-slate-400'
              }`}>
                {isCompleted ? (
                  <Check className="w-3 h-3" />
                ) : (
                  <span className="text-xs font-semibold">{idx + 1}</span>
                )}
              </div>
              <span className={`truncate hidden sm:inline ${
                isCurrent ? 'text-slate-900 font-medium' : ''
              }`}>
                {stepLabels[step] || step}
              </span>
              {idx < 3 && (
                <div className={`flex-1 h-0.5 mx-1 ${
                  isCompleted ? 'bg-green-500' : 'bg-slate-200'
                }`} />
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}
