import { formatCurrency } from '@/lib/format'
import { heatmapLegendBounds, HEATMAP_LOW_HEX, HEATMAP_MID_HEX, HEATMAP_HIGH_MID_HEX, HEATMAP_HIGH_HEX } from '@/lib/colors'
import type { HeatmapMode } from '@/lib/colors'
import type { ActivitySimResult } from '@/domain/types'

interface HeatmapLegendProps {
  perActivity: ActivitySimResult[]
  mode: HeatmapMode
  currency: string
}

export function HeatmapLegend({ perActivity, mode, currency }: HeatmapLegendProps) {
  const bounds = heatmapLegendBounds(perActivity, mode)

  // En modo percentile los extremos son rango (0 = más barata, 100 = más cara), no costo
  // literal — el percentil no es lineal respecto al costo real.
  function formatBound(value: number): string {
    if (bounds.unit === 'rank') return `P${Math.round(value)}`
    return formatCurrency(value, currency)
  }

  return (
    <div className="flex items-center gap-3 mt-3">
      <span className="text-xs text-slate-500 shrink-0">Bajo costo</span>
      <div className="flex-1 h-3 rounded-full" style={{
        background: `linear-gradient(to right, ${HEATMAP_LOW_HEX}, ${HEATMAP_MID_HEX}, ${HEATMAP_HIGH_MID_HEX}, ${HEATMAP_HIGH_HEX})`
      }} />
      <span className="text-xs text-slate-500 shrink-0">Alto costo</span>
      <div className="h-4 border-l border-slate-200 mx-1" />
      <div className="flex items-center gap-4 text-xs text-slate-400 font-mono">
        <span>{formatBound(bounds.min)}</span>
        <span>{formatBound(bounds.mid)}</span>
        <span>{formatBound(bounds.max)}</span>
      </div>
    </div>
  )
}