import { ZIELQUOTE_GRUND, ZIELQUOTE_TERMIN } from '../../../../shared/lernplan';
import type { Lernuebersicht } from '../../../../shared/lernstand';
import { Reifeampel } from './Reifeampel';

export interface LernstandsuebersichtProps {
  readonly uebersicht: Lernuebersicht;
}

/**
 * Prüfungsreife im Überblick: gesamt und je Kapitel bzw. Abschnitt.
 *
 * Jeder Fortschritt steht als Satz da. Farbe und Balkenlänge tragen keine
 * Information, die nicht auch im Text steht (WCAG 1.4.1).
 */
/**
 * „heute“, „gestern“, „vor 6 Tagen“ – oder „noch nie“.
 *
 * Über Kalendertage gerechnet und nicht über Stunden: Wer gestern abend und
 * heute früh lernt, hat nicht zwei Tage Abstand.
 */
function zuletztText(tage: number | null): string {
  if (tage === null) {
    return 'noch nie';
  }
  if (tage === 0) {
    return 'heute';
  }
  if (tage === 1) {
    return 'gestern';
  }
  return `vor ${String(tage)} Tagen`;
}

export function Lernstandsuebersicht({ uebersicht }: LernstandsuebersichtProps): React.JSX.Element {
  return (
    /*
      Ohne Gesamtbalken: Der steht seit dem Umbau oben im Einstieg. Zweimal
      dieselbe Zahl mit zweimal derselben Beschriftung war nicht nur
      redundant – ein Screenreader meldete zwei Fortschrittsbalken namens
      „Gesamtfortschritt“, und der Test der Landmarken fand den Text doppelt.
    */
    <div className="lernstand">
      {/*
        Die Erläuterung steht hier und nicht auf der Einstiegskarte: Dort
        kostet jede Zeile Blickfeld, und wer die Zahl zum ersten Mal versteht,
        sucht ohnehin die Aufschlüsselung. Zugeklappt, damit sie den täglichen
        Weg nicht verstellt – `<details>` bleibt dabei für Tastatur und
        Screenreader voll bedienbar.
      */}
      <details className="lernstand__erklaerung">
        <summary>Was heißt „belegt“?</summary>
        <p>
          Eine Frage zählt erst, wenn Sie sie <strong>nach mindestens einem Tag Abstand</strong>{' '}
          noch einmal richtig beantwortet haben. Beim ersten Mal zählt sie nicht mit: Dass Sie die
          richtige Antwort unter mehreren wiedererkennen, heißt noch nicht, dass Sie sie morgen
          erinnern.
        </p>
        <p>
          Der Beitrag einer Frage sinkt danach wieder, je länger die letzte richtige Antwort her ist
          – deshalb kann die Zahl fallen, ohne dass Sie etwas falsch gemacht haben. Das Programm
          legt Ihnen jede Frage rechtzeitig wieder vor; wer dem Tagespensum folgt, hält sie oben.
          Eine falsche Antwort nimmt den Beleg wieder weg.
        </p>
        <p>
          Die Zahl sagt, was <strong>belegt sitzt</strong> – nicht, was in der Prüfung herauskäme.
          Raten ist nicht eingerechnet, nie Gesehenes gilt als nicht gekonnt. Sie ist also eher zu
          niedrig als zu hoch. Über das Bestehen entscheidet allein der Prüfungsausschuss.
        </p>
      </details>

      <dl className="lernstand__zahlen">
        <dt>Schon einmal bearbeitet</dt>
        <dd>
          {uebersicht.beantwortet} von {uebersicht.fragenGesamt} Fragen
        </dd>

        <dt>Heute zur Wiederholung fällig</dt>
        <dd>{uebersicht.faellig} Fragen</dd>

        <dt>Gemerkt</dt>
        <dd>{uebersicht.gemerkt} Fragen</dd>

        <dt>Heute beantwortet</dt>
        <dd>
          {uebersicht.heuteRichtig} richtig, {uebersicht.heuteFalsch} falsch
        </dd>

        {/*
          Die Ist-Behaltensquote.

          Der Lernplan steuert auf eine Zielquote, und die Ampel darüber zeigt
          modellierte Abrufwahrscheinlichkeiten. Wie oft der Lernende fällige
          Wiederholungen **tatsächlich** trifft, stand bis 0.22.0 nirgends –
          obwohl es im Protokoll steht und nur zu zählen war. Das ist die
          Lücke zwischen der Behauptung des Modells und dem Befund am
          Menschen; wer real nur 75 von 100 trifft, soll es vor der Prüfung
          erfahren und nicht in ihr.

          Eine gemessene Vergangenheitszahl, keine Prognose – die abgelehnte
          Bestehenswahrscheinlichkeit bleibt außen vor. Sie erscheint erst,
          wenn genug Wiederholungen vorliegen: Eine Quote aus drei Antworten
          sähe aus wie eine Auskunft und wäre keine.
        */}
        {uebersicht.behaltensquote === undefined || uebersicht.behaltensquote === null ? null : (
          <>
            <dt>Wiederholungen mit Abstand</dt>
            <dd>
              {uebersicht.behaltensquote.richtig} von {uebersicht.behaltensquote.gesamt} saßen –
              gezählt werden Antworten auf Fragen, die Sie mindestens einen Tag zuvor schon einmal
              hatten. Der Lernplan rechnet mit {Math.round(ZIELQUOTE_GRUND * 100)} bis{' '}
              {Math.round(ZIELQUOTE_TERMIN * 100)} Prozent; je näher der Termin, desto höher.
            </dd>
          </>
        )}

        {/*
          Die Tatsache statt eines Zählers: kein Höchstwert, keine Kette,
          nichts zu halten und nichts zu verlieren. Sie beantwortet die eine
          Frage, auf die sonst nirgends eine Antwort steht – wer nach zwei
          Wochen zurückkommt, sieht einen gefallenen Reifegrad und ein
          gewachsenes Pensum und erfährt nirgends, warum.
        */}
        <dt>Zuletzt gelernt</dt>
        <dd>{zuletztText(uebersicht.tageSeitLetzterAntwort)}</dd>
      </dl>

      {uebersicht.bereiche.length > 0 ? (
        /*
          Eingeklappt: Acht Balken sind 1154 Pixel hoch – mehr als ein
          Bildschirm. Wer sie sehen will, klappt sie auf; wer lernen will,
          scrollt nicht daran vorbei. `<details>` bleibt dabei für
          Screenreader und Tastatur voll bedienbar, und die Suche des
          Browsers findet auch zugeklappten Inhalt.
        */
        <details className="lernstand__bereiche">
          <summary id="bereiche-titel">Nach Kapiteln und Abschnitten</summary>
          <ul className="lernstand__liste" aria-labelledby="bereiche-titel">
            {uebersicht.bereiche.map((bereich) => (
              <li key={bereich.id} className="lernstand__bereich">
                <p className="lernstand__bereichtitel">
                  {bereich.id} – {bereich.titel}
                </p>
                <Reifeampel
                  belegt={bereich.belegt}
                  fragenGesamt={bereich.fragenGesamt}
                  stufe={bereich.stufe}
                  beschriftung={`Prüfungsreife in ${bereich.titel}`}
                  knapp
                />
              </li>
            ))}
          </ul>
        </details>
      ) : null}
    </div>
  );
}
