import { cn } from '@/lib/utils'

interface ConfidenceIndicatorProps {
  tier: string
  score: number
  className?: string
}

const TIER_CONFIG = {
  guided: {
    color: 'bg-emerald-400',
    label: 'Proven path',
    description: 'FlowPilot is following a known resolution path with high confidence.',
  },
  exploring: {
    color: 'bg-amber-400',
    label: 'Investigating',
    description: 'FlowPilot is narrowing down the issue based on your responses.',
  },
  discovery: {
    color: 'bg-violet-400',
    label: 'New territory',
    description: 'FlowPilot is exploring this issue — your responses help build the knowledge base.',
  },
} as const

export function ConfidenceIndicator({ tier, score, className }: ConfidenceIndicatorProps) {
  const config = TIER_CONFIG[tier as keyof typeof TIER_CONFIG] ?? TIER_CONFIG.discovery

  return (
    <div className={cn('group relative inline-flex items-center gap-2', className)}>
      <span className={cn('h-2 w-2 rounded-full', config.color)} />
      <span className="font-sans text-xs text-xs text-muted-foreground">{config.label}</span>

      {/* Tooltip */}
      <div className="pointer-events-none absolute left-0 top-full z-50 mt-2 w-56 rounded-lg border border-border bg-card p-3 opacity-0 shadow-lg transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
        <p className="text-xs text-muted-foreground">{config.description}</p>
        <p className="mt-1 font-sans text-xs text-[0.625rem] text-text-muted">
          Confidence: {Math.round(score * 100)}%
        </p>
      </div>
    </div>
  )
}