import { formatCurrency, formatPercent } from '@/lib/format'
import { heatmapLegendBounds, HEATMAP_LOW_HEX, HEATMAP_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)

  function formatBound(value: number): string {
    if (bounds.unit === 'percent') return formatPercent(value, value % 1 === 0 ? 0 : 1)
    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_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>
  )
}