/**
 * Affichage du sujet d'examen (consigne + documents) — purement présentationnel.
 *
 * Depuis la refonte /sujets (2026-04-21), le choix du sujet se fait sur une
 * page dédiée (SujetsPage). Ce composant n'affiche que le sujet sélectionné.
 *
 * Le contenu est admin-curé (pas du texte IA) → plain-text avec whitespace-pre-wrap,
 * pas de react-markdown.
 *
 * Règle H : purement présentationnel — le sujet vient du parent.
 * Règle L : tokens Direction H exclusivement.
 */

import { Badge } from '@/shared/ui/Badge'
import { Card } from '@/shared/ui/Card'
import type { SujetData } from '@/entities/production/types'

interface Props {
  sujet: SujetData | null
}

function DocumentBlock({ titre, texte }: { titre: string | null; texte: string | null }) {
  if (!titre && !texte) return null
  return (
    <article className="rounded-md border border-line bg-canvas-2 p-3">
      {titre && <h4 className="mb-2 text-sm font-semibold text-ink-1">{titre}</h4>}
      {texte && <p className="whitespace-pre-wrap text-sm leading-relaxed text-ink-2">{texte}</p>}
    </article>
  )
}

export function SujetDisplay({ sujet }: Props) {
  if (!sujet) return null

  return (
    <Card variant="default" className="p-5">
      <div className="space-y-4">
        {sujet.role && (
          <div className="flex items-center gap-2">
            <Badge variant="neutral">Rôle</Badge>
            <span className="text-sm text-ink-2">{sujet.role}</span>
          </div>
        )}

        {sujet.contexte && (
          <p className="whitespace-pre-wrap text-sm leading-relaxed text-ink-3">{sujet.contexte}</p>
        )}

        <div>
          <h3 className="mb-1 text-xs font-semibold uppercase tracking-wide text-ink-4">
            Consigne
          </h3>
          <p className="whitespace-pre-wrap text-base leading-relaxed text-ink-1">
            {sujet.consigne}
          </p>
        </div>

        <DocumentBlock titre={sujet.doc1_titre} texte={sujet.doc1_texte} />
        <DocumentBlock titre={sujet.doc2_titre} texte={sujet.doc2_texte} />
      </div>
    </Card>
  )
}