/**
 * ConseilNclcCallout — Sprint 3.6b.
 *
 * Section "Plan d'action NCLC" : écart au NCLC cible + action prioritaire.
 * Visible pour tous les plans.
 *
 * Règle L : tokens Direction H exclusivement.
 */

import ReactMarkdown from 'react-markdown'
import { Card } from '@/shared/ui/Card'
import type { ConseilNclc, NclcCible } from '@/entities/report/types'

interface Props {
  conseil: ConseilNclc
  nclc: number
  nclcCible: NclcCible
}

export function ConseilNclcCallout({ conseil, nclc, nclcCible }: Props) {
  // PATCH TEMPORAIRE — à retirer quand FTD-40 (fix prompt backend) est résolu.
  // Le prompt maître DeepSeek génère un message d'encouragement vers `nclcCible`
  // même quand `nclc > nclcCible` ; on substitue alors un texte cohérent.
  const depasse = nclc > nclcCible

  return (
    <section aria-label="Plan d'action NCLC">
      <h2 className="mb-3 text-base font-semibold text-ink-primary">Plan d'action NCLC</h2>
      <Card variant="raised" className="space-y-3 p-4">
        <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1">
          <p className="text-[11px] font-semibold uppercase tracking-widest text-ink-tertiary">
            Objectif
          </p>
          <p className="text-sm font-semibold text-ink-primary">{conseil.nclc_cible}</p>
          <p className="text-[11px] font-semibold uppercase tracking-widest text-ink-tertiary">
            Écart
          </p>
          <p className="text-sm text-ink-primary">{conseil.ecart}</p>
        </div>
        <div className="space-y-1.5 rounded-md border border-brand/30 bg-brand-soft p-3">
          <p className="text-[11px] font-semibold uppercase tracking-widest text-brand-text">
            Action prioritaire
          </p>
          <div className="text-sm leading-relaxed text-ink-primary">
            {depasse ? (
              <p>
                Excellent travail — vous avez dépassé votre objectif. Continuez sur cette lancée
                pour viser NCLC {nclc + 1} !
              </p>
            ) : (
              <ReactMarkdown disallowedElements={['script', 'iframe']}>
                {conseil.action_prioritaire}
              </ReactMarkdown>
            )}
          </div>
        </div>
      </Card>
    </section>
  )
}