import { cn } from '@/lib/utils'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import type { HeatmapMode } from '@/lib/colors'

interface HeatmapModeToggleProps {
  mode: HeatmapMode
  onChange: (mode: HeatmapMode) => void
}

const MODE_LABELS: Record<HeatmapMode, { label: string; tip: string }> = {
  relative: {
    label: 'Costo relativo (%)',
    tip: 'Colorea cada actividad en función de su % del costo total. Útil para ver proporciones.',
  },
  absolute: {
    label: 'Costo absoluto',
    tip: 'Colorea según el costo esperado en la moneda del proceso. Útil para comparar magnitudes reales.',
  },
}

export function HeatmapModeToggle({ mode, onChange }: HeatmapModeToggleProps) {
  return (
    <div className="inline-flex rounded-lg border border-slate-200 bg-slate-50 p-0.5 text-xs">
      {(['relative', 'absolute'] as HeatmapMode[]).map((m) => {
        const { label, tip } = MODE_LABELS[m]
        return (
          <Tooltip key={m}>
            <TooltipTrigger asChild>
              <button
                onClick={() => onChange(m)}
                className={cn(
                  'px-3 py-1.5 rounded-md font-medium transition-all',
                  mode === m
                    ? 'bg-white text-slate-800 shadow-sm'
                    : 'text-slate-500 hover:text-slate-700'
                )}
              >
                {label}
              </button>
            </TooltipTrigger>
            <TooltipContent side="bottom" className="max-w-52 text-xs">
              {tip}
            </TooltipContent>
          </Tooltip>
        )
      })}
    </div>
  )
}