'use client'

import { cn } from '@/lib/utils'
import { DESIGN_PHASES, designPhases, type DesignPhase, type PhaseStatus } from '@/types/design-thinking'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

interface PhaseIndicatorCompactProps {
  currentPhase: DesignPhase
  phaseStatuses?: Record<DesignPhase, PhaseStatus>
  onPhaseClick?: (phase: DesignPhase) => void
  className?: string
}

export function PhaseIndicatorCompact({
  currentPhase,
  phaseStatuses,
  onPhaseClick,
  className
}: PhaseIndicatorCompactProps) {
  const currentIndex = DESIGN_PHASES.indexOf(currentPhase)
  const currentPhaseData = designPhases.find(p => p.id === currentPhase)

  return (
    <TooltipProvider>
      <div className={cn('flex items-center gap-1', className)}>
        {/* Mini progress dots */}
        <div className="flex items-center gap-0.5 mr-2">
          {DESIGN_PHASES.map((phase, index) => {
            const status = phaseStatuses?.[phase]
            const isCurrent = index === currentIndex
            const isCompleted = status === 'completed' || index < currentIndex

            return (
              <Tooltip key={phase}>
                <TooltipTrigger asChild>
                  <button
                    onClick={() => onPhaseClick?.(phase)}
                    className={cn(
                      'w-2 h-2 rounded-full transition-all',
                      isCurrent && 'w-3 h-3 bg-brand animate-pulse',
                      isCompleted && !isCurrent && 'bg-emerald-500',
                      !isCompleted && !isCurrent && 'bg-muted-foreground/30'
                    )}
                  />
                </TooltipTrigger>
                <TooltipContent side="bottom" className="text-xs">
                  {designPhases.find(p => p.id === phase)?.label}
                </TooltipContent>
              </Tooltip>
            )
          })}
        </div>

        {/* Current phase badge */}
        <Tooltip>
          <TooltipTrigger asChild>
            <button
              onClick={() => onPhaseClick?.(currentPhase)}
              className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-brand/10 text-brand text-sm font-medium hover:bg-brand/20 transition-colors"
            >
              <span>{currentPhaseData?.icon}</span>
              <span className="hidden sm:inline">{currentPhaseData?.label}</span>
            </button>
          </TooltipTrigger>
          <TooltipContent side="bottom" className="max-w-xs">
            <p className="font-medium">{currentPhaseData?.label}</p>
            <p className="text-xs text-muted-foreground">{currentPhaseData?.shortDescription}</p>
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}