import { useId } from 'react';

import type { Pruefungsverlauf } from '../../../../shared/pruefung';
import { VERGLEICH_GRENZEN, wiederkehrendeSchwaechen } from '../../../../shared/verlaufsvergleich';

export interface WiederkehrendeSchwaechenProps {
  readonly verlauf: readonly Pruefungsverlauf[];
}

/**
 * Bereiche, die über mehrere Simulationen hinweg unter der Grenze blieben.
 *
 * Die Themenanalyse darüber gilt für **diesen** Lauf. Dass ein Bereich in drei
 * von vier Simulationen unter der Bestehensgrenze lag, war bis 0.22.0 nirgends
 * zu sehen – ein einzelner schlechter Bereich sieht wie ein schlechter Tag
 * aus, drei hintereinander sind eine Lücke.
 *
 * Zurückhaltend mit Absicht: Ohne Befund steht hier nichts. Und der Text sagt
 * dazu, woran gemessen wurde und wie viele Läufe dahinterstehen – eine eigene
 * Bestehensgrenze je Bereich gibt es in keiner Prüfungsordnung.
 */
export function WiederkehrendeSchwaechen({
  verlauf,
}: WiederkehrendeSchwaechenProps): React.JSX.Element | null {
  const titelId = useId();
  const befund = wiederkehrendeSchwaechen(verlauf);

  if (befund.bereiche.length === 0) {
    return null;
  }

  return (
    <div className="wiederkehrend">
      <h2 className="wiederkehrend__titel" id={titelId}>
        Wiederkehrende Lücken
      </h2>
      <p className="wiederkehrend__grundlage">
        Über Ihre letzten {befund.grundlage}{' '}
        {befund.grundlage === 1 ? 'Simulation' : 'Simulationen'} hinweg blieben diese Bereiche
        mehrfach unter der Bestehensgrenze des jeweiligen Laufs. Gezählt wird ein Bereich nur, wenn
        er mit mindestens {VERGLEICH_GRENZEN.mindestFragen} Fragen im Bogen stand.
      </p>
      <ul className="wiederkehrend__liste" aria-labelledby={titelId}>
        {befund.bereiche.map((stelle) => (
          <li key={stelle.bereich}>
            <span className="wiederkehrend__bereich">
              {stelle.bereich} – {stelle.titel}:
            </span>{' '}
            in {stelle.unterGrenze} von {stelle.laeufe}{' '}
            {stelle.laeufe === 1 ? 'Simulation' : 'Simulationen'} unter der Grenze, zusammen{' '}
            {stelle.richtig} von {stelle.gesamt} Fragen richtig.
          </li>
        ))}
      </ul>
      <p className="wiederkehrend__hinweis">
        Eine eigene Bestehensgrenze je Bereich gibt es nicht – gemessen wird an der Gesamtgrenze des
        Laufs. Manche Prüfungsstellen führen für einzelne Bereiche allerdings Zusatzbedingungen;
        welche das sind, steht bei der Profilwahl.
      </p>
    </div>
  );
}
