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',
}

const stepOrder = ['connect', 'first_rule', 'see_results', 'auto_schedule']
const stepOrderShort = ['connect', 'see_results']

export function OnboardingProgress({ currentStep, completedSteps, totalSteps, onSkip }: OnboardingProgressProps) {
  const steps = totalSteps === 2 ? stepOrderShort : stepOrder
  const stepIndex = steps.indexOf(currentStep)
  const currentStepNumber = stepIndex >= 0 ? stepIndex + 1 : 1
  const progress = totalSteps > 0 ? (completedSteps.filter(s => steps.includes(s)).length / totalSteps) * 100 : 0

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

  return (
    <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 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 dark:text-slate-100">Getting started</p>
          <p className="text-xs text-slate-500 dark:text-slate-400">Step {currentStepNumber} of {totalSteps}</p>
        </div>
        <Button variant="ghost" size="sm" onClick={onSkip} className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300">
          <X className="w-4 h-4 mr-1" />
          I&apos;ll do this later
        </Button>
      </div>
      
      <div className="w-full h-2 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden mb-2">
        <div 
          className="h-full bg-primary-500 transition-all duration-300"
          style={{ width: `${Math.min(100, progress)}%` }}
        />
      </div>
      
      <div className="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
        {steps.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 dark:ring-primary-800' 
                    : 'bg-slate-200 dark:bg-slate-600 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 dark:text-slate-100 font-medium' : ''
              }`}>
                {stepLabels[step] || (step === 'see_results' ? 'Done' : step)}
              </span>
              {idx < steps.length - 1 && (
                <div className={`flex-1 h-0.5 mx-1 ${
                  isCompleted ? 'bg-green-500' : 'bg-slate-200 dark:bg-slate-600'
                }`} />
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}
