import { useEffect, useState } from 'react';

import type { FrageStand } from '../../../../shared/lernstand';
import { lernBruecke } from '../../lernen/bruecke';
import { abstandText } from '../../lernen/zeitsaetze';

export interface FragesteckbriefProps {
  readonly frageId: string;
  readonly profilId: number | null;
}

/**
 * Was mit dieser Frage bisher war.
 *
 * **Wozu.** `FrageStand` transportierte `versuche`, `richtige` und
 * `zuletztBeantwortet` seit jeher über die Brücke – die Oberfläche benutzte
 * davon bis 0.22.0 ausschließlich `gemerkt`. Der Lernende konnte nirgends
 * beantworten: Wie oft hatte ich diese Frage schon? Wie oft davon richtig?
 * „Warum kommt die schon wieder?“ blieb ohne Antwort, obwohl die Antwort in
 * der Datenbank stand. Das FSRS-Verfahren wird damit am konkreten Fall
 * erlebbar statt nur im Über-Text erklärt.
 *
 * **Warum ausdrücklich „bisher“.** Gezeigt wird der Stand **vor** der
 * heutigen Antwort, und der Text sagt das. Der Stand nach der Buchung wäre
 * bei offenen Fragen ohnehin nicht zu haben – dort wird bis zum
 * Weiterblättern zurückgehalten, damit sich ein Fehlgriff zurücknehmen lässt
 * (`useSitzung`, `bewertungAendern`). Eine Zahl, die je nach Fragetyp etwas
 * anderes bedeutet, wäre schlimmer als keine.
 *
 * **Kein nächster Termin.** Er ändert sich in genau diesem Augenblick; ihn
 * aus dem alten Stand zu zeigen hieße, eine überholte Zahl hinzuschreiben.
 *
 * Erscheint nur, wenn es etwas zu berichten gibt: Bei einer zum ersten Mal
 * vorgelegten Frage steht hier nichts.
 */
export function Fragesteckbrief({
  frageId,
  profilId,
}: FragesteckbriefProps): React.JSX.Element | null {
  const [stand, setzeStand] = useState<FrageStand | null>(null);

  useEffect(() => {
    const lesen = lernBruecke()?.lernFragestand;
    if (!lesen || profilId === null) {
      return;
    }

    let lebt = true;
    void lesen(profilId, frageId)
      .then((gelesen) => {
        if (lebt) {
          setzeStand(gelesen);
        }
      })
      .catch(() => {
        /* Ohne Auskunft entfällt der Steckbrief. Er ist eine Zugabe; ein
           Fehler hier darf die Sitzung nicht stören. */
      });

    return () => {
      lebt = false;
    };
  }, [frageId, profilId]);

  if (stand === null || stand.versuche === 0) {
    return null;
  }

  const wann = stand.zuletztBeantwortet === null ? '' : abstandText(stand.zuletztBeantwortet);

  return (
    <dl className="steckbrief">
      <dt>Diese Frage bisher</dt>
      <dd>
        {stand.versuche === 1 ? 'einmal bearbeitet' : `${String(stand.versuche)}-mal bearbeitet`},
        davon {stand.richtige === 1 ? 'einmal' : `${String(stand.richtige)}-mal`} richtig
        {wann === '' ? '' : ` – zuletzt ${wann}`}.
      </dd>
    </dl>
  );
}
