import { useId } from 'react';

import { kernelemente, type RichText } from '../../../../shared/katalog';
import { useFokusBeimAufbau } from '../../hooks/useFokusBeimAufbau';
import { RichTextAnzeige } from './RichTextAnzeige';

export interface MusterantwortProps {
  readonly musterantwort: RichText | undefined;
  /**
   * Fokus beim Erscheinen übernehmen. In der Lernsitzung erwünscht (die
   * auslösende Schaltfläche verschwindet), in der Nachbewertung nicht: dort
   * stehen mehrere Musterantworten gleichzeitig auf der Seite.
   */
  readonly fokussieren?: boolean;
  /**
   * Überschriftenebene.
   *
   * 2 im Lernmodus – dort ist die Frage die h1 der Ansicht. 3 in der
   * Nachbewertung der Prüfung, wo darüber der Lauftitel (h1) und die Frage
   * (h2) stehen.
   */
  readonly ebene?: 2 | 3;
  /**
   * Prüfliste zur Selbstbewertung – eine Einschätzung dieser Software.
   *
   * Ohne Angabe entfällt der Block. Das ist bei 20 der 104 offenen Fragen der
   * Fall: Wo die Musterantwort aus einer einzigen Tatsache besteht, wäre eine
   * Prüfliste mit einem Punkt kein Werkzeug, sondern Beiwerk.
   */
  readonly kernpunkte?: readonly string[] | undefined;
}

/**
 * Musterantwort mit den Stellen, die der amtliche Katalog unterstreicht.
 *
 * Die Hervorhebung allein wäre eine rein visuelle Information. Deshalb stehen
 * dieselben Stellen zusätzlich als Liste darunter (WCAG 1.4.1) – das ist
 * ohnehin die brauchbarere Prüfliste für den eigenen Abgleich.
 *
 * **Die Liste sagt nicht, was eine richtige Antwort enthalten muss.** Bis
 * Fassung 0.17.0 stand darüber „Diese Kernelemente muss Ihre Antwort
 * enthalten:“, und das war in zweifacher Hinsicht unbelegt:
 *
 * 1. Die Markierungen sind Unterstreichungen aus dem BVA-PDF, geometrisch
 *    erkannt (`data-pipeline/parse_catalog.py`). Das Amt sagt nirgends, was
 *    es damit meint. Nachgemessen schwankt der Umfang zwischen 3 und 100
 *    Prozent der Musterantwort, im Mittel 38 – mal ein Stichwort, mal der
 *    ganze Satz. Als gleichmäßig kalibrierte Auswahl von „Kernelementen“
 *    taugt das nicht.
 * 2. Bei 63 der 104 offenen Fragen ist überhaupt nichts unterstrichen. Wer
 *    die Liste als Pflichtinhalt liest, müsste dort schließen, es gebe
 *    nichts zu treffen.
 *
 * Die Überschrift nennt jetzt die nachprüfbare Tatsache – was im Katalog
 * unterstrichen ist – und überlässt die Bewertung dem Lernenden. Dieselbe
 * Trennung wie beim Reifegrad: eine Feststellung ist belegbar, ein Urteil
 * über die eigene Antwort nicht.
 *
 * ## Die Kernpunkte, seit 0.22.0
 *
 * Damit stand der Lernende allerdings ohne jedes Kriterium da: Die Hilfe warnt
 * vor zu milder Bewertung, gab aber kein Werkzeug, das Wesentliche zu
 * erkennen. Die Kernpunkte schließen diese Lücke – **als Einschätzung dieser
 * Software**, ausdrücklich getrennt von der Katalogtatsache darüber und in
 * eigenen Worten formuliert. Was hier nie wieder steht, ist „muss Ihre Antwort
 * enthalten“; `pruefe_erklaerungen.py` weist die Formulierung ab.
 */
export function Musterantwort({
  musterantwort,
  fokussieren = true,
  ebene = 2,
  kernpunkte,
}: MusterantwortProps): React.JSX.Element {
  const bereichRef = useFokusBeimAufbau<HTMLDivElement>(fokussieren);
  const kerneTitelId = useId();
  const punkteTitelId = useId();
  const unterstrichen = kernelemente(musterantwort);

  return (
    <div className="musterantwort" ref={bereichRef} tabIndex={-1}>
      {ebene === 2 ? (
        <h2 className="musterantwort__titel">Musterantwort</h2>
      ) : (
        <h3 className="musterantwort__titel">Musterantwort</h3>
      )}

      {musterantwort ? (
        <p className="musterantwort__text">
          <RichTextAnzeige text={musterantwort} art="kernelement" />
        </p>
      ) : (
        <p>Zu dieser Frage ist keine Musterantwort hinterlegt.</p>
      )}

      {/*
        Vor der Katalogtatsache: Wer gerade seine Antwort bewertet, braucht
        zuerst den Maßstab und dann den Beleg. Die beiden Blöcke sind bewusst
        getrennt beschriftet – der eine sagt, was im Katalog steht, der andere,
        was diese Software dazu meint.
      */}
      {kernpunkte !== undefined && kernpunkte.length > 0 ? (
        <div className="musterantwort__kernpunkte">
          <p id={punkteTitelId}>
            Nach Einschätzung dieser Software gehört zu einer vollständigen Antwort:
          </p>
          <ul aria-labelledby={punkteTitelId}>
            {kernpunkte.map((punkt) => (
              <li key={punkt}>{punkt}</li>
            ))}
          </ul>
          <p className="musterantwort__vorbehalt">
            Diese Punkte sind eine Ergänzung dieser Software und nicht Teil des amtlichen
            Fragenkatalogs. Sie sollen das Erkennen erleichtern; über das Bestehen entscheidet
            allein der zuständige Prüfungsausschuss.
          </p>
        </div>
      ) : null}

      {unterstrichen.length > 0 ? (
        <div className="musterantwort__kerne">
          <p id={kerneTitelId}>Im amtlichen Fragenkatalog ist hier unterstrichen:</p>
          <ul aria-labelledby={kerneTitelId}>
            {unterstrichen.map((stelle) => (
              <li key={stelle}>{stelle}</li>
            ))}
          </ul>
          <p className="musterantwort__vorbehalt">
            Das ist die Hervorhebung des Katalogs, keine Vorgabe für Ihre Antwort. Eine richtige
            Antwort kann anders formuliert sein.
          </p>
        </div>
      ) : null}
    </div>
  );
}
