import { ReactNode } from 'react'
import type { PlanWarning } from '@/types'
import { useTranslation, toTranslationParams, type TranslationKey } from '@/i18n'
import { formatDateForDisplay } from '@/utils/dates'

// The three `PlanWarning` kinds the backend can emit
// (`allocation_service.py`'s `_sgi_risk_warnings`, `_age4_warnings`,
// `_vacation_expiry_warnings`). `kind` -> title, `messageKey` -> the body
// template. The backend's own `message_key` is already `f"planWarnings.
// {kind}"`, i.e. a real translation key — routed through a lookup anyway
// (like `SurplusAdviceTip`'s `SURPLUS_ADVICE_BODY_KEYS`) so an unrecognised
// kind (a newer backend rule this catalogue hasn't caught up with) falls
// back to the raw value instead of rendering a missing-key placeholder.
const PLAN_WARNING_TITLE_KEYS: Record<string, TranslationKey> = {
  sgi_risk: 'planWarnings.sgiRiskTitle',
  days_lost_at_age_4: 'planWarnings.daysLostAtAge4Title',
  vacation_expiring: 'planWarnings.vacationExpiringTitle',
}

const PLAN_WARNING_BODY_KEYS: Record<string, TranslationKey> = {
  'planWarnings.sgi_risk': 'planWarnings.sgi_risk',
  'planWarnings.days_lost_at_age_4': 'planWarnings.days_lost_at_age_4',
  'planWarnings.vacation_expiring': 'planWarnings.vacation_expiring',
}

// `data` fields that carry an ISO-8601 date and must go through
// `formatDateForDisplay` before interpolation — a raw ISO string is never
// shown to the user.
const DATE_FIELDS_BY_KIND: Record<string, readonly string[]> = {
  sgi_risk: ['week_start'],
  days_lost_at_age_4: ['fourth_birthday'],
  vacation_expiring: [],
}

export interface PlanWarningCardProps {
  warning: PlanWarning
  /** Resolves a parent uuid to a display name (never a raw uuid) —
   * `Dashboard.tsx`'s `nameForAdvice`, which already falls back to
   * `planResults.unknownParent`. */
  nameFor: (uuid: string) => string
  /** Position in the warnings list — only used for the test id. */
  index: number
}

/**
 * One plan-proposal warning rendered in the same visual as a backend
 * `TipCard` (same `tip-card` classes) so the dashboard reads as one system,
 * but with the danger-ink dot (`var(--c-danger)`, the same colour
 * `KeyFigures`/`Age4Bars`/`YearRows` already use for at-risk figures) —
 * warnings are risks, not suggestions. No dismiss: it is derived from the
 * plan and goes away when the plan changes.
 */
export function PlanWarningCard({ warning, nameFor, index }: PlanWarningCardProps): ReactNode {
  const { t, locale } = useTranslation()
  const titleKey = PLAN_WARNING_TITLE_KEYS[warning.kind]
  const bodyKey = PLAN_WARNING_BODY_KEYS[warning.messageKey]
  const title = titleKey ? t(titleKey) : warning.kind

  let body = warning.messageKey
  if (bodyKey) {
    const params = toTranslationParams(warning.data)
    const uuid = warning.data.parent_personal_data_uuid
    if (typeof uuid === 'string') {
      params.parent_name = nameFor(uuid)
    }
    for (const field of DATE_FIELDS_BY_KIND[warning.kind] ?? []) {
      const raw = warning.data[field]
      if (typeof raw === 'string') {
        params[field] = formatDateForDisplay(raw, locale)
      }
    }
    body = t(bodyKey, params)
  }

  return (
    <div
      className="tip-card tip-card--danger"
      role="article"
      aria-label={t('tip.aria', { title })}
      data-testid={`dashboard-plan-warning-${index}`}
    >
      <div className="tip-card__header">
        <h4 className="tip-card__title">{title}</h4>
      </div>
      <p className="tip-card__body">{body}</p>
    </div>
  )
}