import { useState } from 'react'
import { Tooltip } from './ChartFrame'
import { useWidth } from './useWidth'

const STEPS = ['var(--color-seq-100)', 'var(--color-seq-200)', 'var(--color-seq-300)', 'var(--color-seq-400)', 'var(--color-seq-500)', 'var(--color-seq-600)', 'var(--color-seq-700)']

/** Grid of counts in one hue, light to dark; empty cells stay near the surface. */
export function Heatmap({ grid, rowLabels, colLabels, ariaLabel, describe }: { grid: number[][]; rowLabels: string[]; colLabels: string[]; ariaLabel: string; describe: (row: number, col: number, value: number) => string }) {
  const [ref, width] = useWidth<HTMLDivElement>()
  const [hover, setHover] = useState<{ r: number; c: number } | null>(null)
  const max = Math.max(1, ...grid.flat())
  const step = (value: number) => (value === 0 ? 'var(--color-line-soft)' : STEPS[Math.min(STEPS.length - 1, Math.floor((value / max) * (STEPS.length - 1)))])
  const labelW = 34
  const cell = Math.max(10, Math.floor((width - labelW) / colLabels.length))
  const height = rowLabels.length * cell + 18

  return (
    <div ref={ref} className="relative" onPointerLeave={() => setHover(null)}>
      <svg width={width} height={height} role="img" aria-label={ariaLabel} className="block">
        {rowLabels.map((label, r) => (
          <text key={label} x={labelW - 6} y={r * cell + cell / 2} dy="0.32em" textAnchor="end" fontSize={10} fill="var(--color-chart-label)">
            {label}
          </text>
        ))}
        {colLabels.map((label, c) =>
          c % 3 === 0 ? (
            <text key={c} x={labelW + c * cell + cell / 2} y={rowLabels.length * cell + 12} textAnchor="middle" fontSize={10} fill="var(--color-chart-label)">
              {label}
            </text>
          ) : null,
        )}
        {grid.map((row, r) =>
          row.map((value, c) => (
            <rect
              key={`${r}-${c}`}
              x={labelW + c * cell + 1}
              y={r * cell + 1}
              width={cell - 2}
              height={cell - 2}
              rx={2}
              fill={step(value)}
              stroke={hover?.r === r && hover.c === c ? 'var(--color-ink)' : 'none'}
              strokeWidth={1.5}
              tabIndex={value ? 0 : -1}
              aria-label={describe(r, c, value)}
              onPointerEnter={() => setHover({ r, c })}
              onFocus={() => setHover({ r, c })}
              className="outline-none"
            />
          )),
        )}
      </svg>
      <div className="mt-2 flex items-center gap-2 text-3xs text-muted" aria-hidden>
        <span>Fewer</span>
        {STEPS.map((color) => (
          <i key={color} className="h-2.5 w-5 rounded-[2px]" style={{ background: color }} />
        ))}
        <span>More ({max} max)</span>
      </div>
      {hover && (
        <Tooltip x={labelW + hover.c * cell + cell} y={hover.r * cell} containerWidth={width} title={describe(hover.r, hover.c, grid[hover.r][hover.c]).split(':')[0]} rows={[{ label: grid[hover.r][hover.c] === 1 ? 'incident' : 'incidents', value: String(grid[hover.r][hover.c]) }]} />
      )}
    </div>
  )
}