import { Radar } from 'react-chartjs-2'
import type { ChartOptions } from 'chart.js'
import type { Band, SubScores } from '../../lib/api'
import { DRIVER_META } from '../../lib/demo/enterprises'
import './chartSetup'

/** The five risk families as a radar — shows the *shape* of the stress, not just its size. */
export function SubScoreRadar({ sub, band, height = 230 }: { sub: SubScores; band: Band; height?: number }) {
  const colour = band === 'RED' ? '#c0392b' : band === 'WATCH' ? '#e8a020' : '#1e7a46'

  const data = {
    labels: DRIVER_META.map((d) => d.label),
    datasets: [
      {
        label: 'Sub-score',
        data: DRIVER_META.map((d) => sub[d.key]),
        borderColor: colour,
        backgroundColor: `${colour}22`,
        borderWidth: 2,
        pointBackgroundColor: colour,
        pointRadius: 3,
      },
    ],
  }

  const options: ChartOptions<'radar'> = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: { legend: { display: false } },
    scales: {
      r: {
        beginAtZero: true,
        suggestedMax: 30,
        angleLines: { color: '#e8eeea' },
        grid: { color: '#e8eeea' },
        pointLabels: { font: { size: 10 } },
        ticks: { display: false },
      },
    },
  }

  return (
    <div style={{ height }}>
      <Radar data={data} options={options} />
    </div>
  )
}