'use client'

import { useI18n } from '@/components/providers/i18n-provider'
import { TimeSeriesChart } from '@/components/charts/time-series'
import { CHART_COLORS } from '@/lib/ui/state-styles'
import type { RiskOutlookPoint } from '@/lib/services/prevention-service'

/** The national risk outlook: worst-case and average projected risk over the horizon. */
export function RiskOutlookChart({ points }: { points: RiskOutlookPoint[] }) {
  const { t, n } = useI18n()

  const data = points.map((point) => ({
    ts: point.ts,
    peakRisk: point.peakRisk,
    meanRisk: point.meanRisk,
  }))

  // The alerting threshold is drawn as a marker so the curve can be read against the
  // number that actually triggers an escalation, not just against itself.
  const crossing = points.find((point) => point.peakRisk >= 70)

  return (
    <TimeSeriesChart
      data={data}
      height={250}
      yDomain={[0, 100]}
      ariaLabel={t('commandCenter.riskForecast')}
      valueFormatter={(value) => `${n(value, { maximumFractionDigits: 0 })}%`}
      markers={
        crossing
          ? [{ x: crossing.ts, label: t('alerts.rules'), color: CHART_COLORS.danger }]
          : undefined
      }
      series={[
        {
          key: 'peakRisk',
          label: t('grid.columns.peakRisk'),
          color: CHART_COLORS.danger,
          type: 'area',
        },
        {
          key: 'meanRisk',
          label: t('common.riskScore'),
          color: CHART_COLORS.secondary,
          type: 'line',
          strokeDasharray: '5 4',
        },
      ]}
    />
  )
}