import { verwandteSammeln } from '../../../../shared/erklaerungen';
import { useErklaerungen } from '../../hooks/useErklaerungen';
import { trefferquote, type SitzungsBilanz } from '../../lernen/typen';
import { Fortschritt } from './Fortschritt';

export interface SitzungsendeProps {
  readonly bilanz: SitzungsBilanz;
  readonly einstiegRef: React.RefObject<HTMLHeadingElement | null>;
  readonly onWiederholen: () => void;
  /**
   * Die nächste gewöhnliche Lernsitzung.
   *
   * Nur gesetzt, wenn das hier auch die naheliegende Fortsetzung ist – nicht
   * nach einer Sitzung aus der Suche oder aus „Fehler wiederholen“.
   */
  readonly onWeiterlernen?: (() => void) | undefined;
  /** Nur gesetzt, wenn die Sitzung aus der Suchansicht kam. */
  readonly onZurueckZurSuche?: (() => void) | undefined;
  /**
   * Uebt die Fragen, die denselben Gegenstand behandeln wie die falsch
   * beantworteten.
   *
   * Hier und nicht in der laufenden Sitzung: Eine Sitzung zu starten ersetzt
   * die laufende, und zwar ohne Rueckfrage. Am Ende laeuft nichts mehr, und
   * es ist genau der Moment, in dem entschieden wird, was als Naechstes
   * drankommt.
   */
  readonly onVerwandteUeben: (frageIds: readonly string[]) => void;
  readonly onZumStart: () => void;
}

/**
 * Auswertung einer beendeten Sitzung.
 *
 * Die Trefferquote steht als Satz da, nicht nur als Balken. Die falsch
 * beantworteten Fragen sind einzeln aufgeführt – mit amtlicher Nummer, damit
 * sie sich nachschlagen lassen.
 */
export function Sitzungsende({
  bilanz,
  einstiegRef,
  onWiederholen,
  onWeiterlernen,
  onZurueckZurSuche,
  onVerwandteUeben,
  onZumStart,
}: SitzungsendeProps): React.JSX.Element {
  const quote = trefferquote(bilanz);
  const erklaerungen = useErklaerungen();

  /* Nur zu den Fehlern, nicht zur ganzen Sitzung: Wer eine Frage sicher
     konnte, braucht ihre Nachbarn nicht vorgelegt zu bekommen. Fragen, die
     schon in der Sitzung standen, faellt `verwandteSammeln` heraus. */
  const verwandte = verwandteSammeln(
    erklaerungen.zu,
    bilanz.falscheFragen.map((eintrag) => eintrag.frageId),
  );

  return (
    <section className="auswertung abschnitt" aria-labelledby="auswertung-titel">
      <h1 id="auswertung-titel" ref={einstiegRef} tabIndex={-1}>
        Auswertung: {bilanz.titel}
      </h1>

      {bilanz.beantwortet === 0 ? (
        <p>Sie haben in dieser Sitzung noch keine Frage beantwortet.</p>
      ) : (
        <>
          <p className="auswertung__quote">
            {bilanz.richtig} von {bilanz.beantwortet} beantworteten Fragen richtig – Trefferquote{' '}
            {quote} Prozent.
          </p>
          <Fortschritt
            beschriftung="Trefferquote dieser Sitzung"
            text={`Trefferquote ${String(quote)} Prozent`}
            wert={quote}
            minimum={0}
            maximum={100}
          />
        </>
      )}

      <dl className="auswertung__zahlen">
        <dt>Fragen in der Sitzung</dt>
        <dd>{bilanz.gesamt}</dd>

        <dt>Beantwortet</dt>
        <dd>{bilanz.beantwortet}</dd>

        <dt>Richtig</dt>
        <dd>{bilanz.richtig}</dd>

        <dt>Falsch</dt>
        <dd>{bilanz.falsch}</dd>
      </dl>

      <h2 id="fehlerliste-titel">Falsch beantwortete Fragen</h2>
      {bilanz.falscheFragen.length === 0 ? (
        <p>Keine – Sie haben alle beantworteten Fragen richtig gelöst.</p>
      ) : (
        <ul className="auswertung__fehler" aria-labelledby="fehlerliste-titel">
          {bilanz.falscheFragen.map((eintrag) => (
            <li key={eintrag.frageId}>
              <span className="auswertung__nummer">Frage {eintrag.amtlicheNummer}</span>{' '}
              {eintrag.text}
            </li>
          ))}
        </ul>
      )}

      <div className="auswertung__aktionen">
        {bilanz.falscheFragen.length > 0 ? (
          <button type="button" className="knopf knopf--haupt" onClick={onWiederholen}>
            Fehler wiederholen ({bilanz.falscheFragen.length})
          </button>
        ) : null}
        {/*
          Der häufigste Weg nach einer Sitzung: die nächste.

          Das Tagespensum umfasst oft mehrere Sitzungen. Bis 0.22.0 führte
          dieser Weg über den Startbildschirm zurück – rund 8000 Bildpunkte
          hoch – und dort erneut über „Weiterlernen“. Kein neues Merkmal,
          nur ein kürzerer Weg zu Vorhandenem: Der Aufruf ist derselbe, und
          die Gruppenlogik des Kerns stellt die nächste Sitzung ohnehin
          richtig zusammen.

          Er entfällt, wenn die Sitzung aus der Suche oder aus „Fehler
          wiederholen“ kam: Dort ist „weiter“ nicht die naheliegende
          Fortsetzung, sondern ein Themenwechsel.
        */}
        {onWeiterlernen === undefined ? null : (
          <button type="button" className="knopf" onClick={onWeiterlernen}>
            Weiterlernen
          </button>
        )}
        {/* Der amtliche Katalog kennt keine Frage-zu-Frage-Beziehung; diese
            Zuordnung ist eine Ergaenzung dieser Software. Sie erscheint nur,
            wenn es wirklich etwas zu ueben gibt. */}
        {verwandte.length > 0 ? (
          <button
            type="button"
            className="knopf"
            onClick={() => {
              onVerwandteUeben(verwandte);
            }}
          >
            Verwandte Fragen üben ({verwandte.length})
          </button>
        ) : null}
        {/* Wer eine Frage aus einer Suche geübt hat, will die übrigen Treffer
            sehen – nicht denselben Suchbegriff noch einmal tippen. */}
        {onZurueckZurSuche === undefined ? null : (
          <button type="button" className="knopf" onClick={onZurueckZurSuche}>
            Zurück zur Suche
          </button>
        )}
        <button type="button" className="knopf" onClick={onZumStart}>
          Zum Start
        </button>
      </div>
    </section>
  );
}
