import { hartnaeckigText, type HartnaeckigeFrage } from '../../../../shared/hartnaeckig';
import type { KatalogIndex } from '../../hooks/useKatalog';

export interface HartnaeckigeProps {
  /**
   * Die Liste, gehalten von {@link useHartnaeckige} in `App.tsx`.
   *
   * Bis Fassung 0.25.0 lud dieser Baustein sie selbst beim Einhängen. Da der
   * Startbildschirm bei jedem Ansichtswechsel aushängt, war sie beim
   * Zurückkommen wieder leer und erschien erst nach der Antwort des Kanals –
   * und schob dabei alles unter ihr nach unten. Seit der Rückweg dort
   * ankommt, wo er begann, verschöbe das die wiederhergestellte Stelle.
   */
  readonly fragen: readonly HartnaeckigeFrage[];
  readonly katalogIndex: KatalogIndex | null;
  /** Übt genau diese Fragen. */
  readonly onUeben: (frageIds: readonly string[]) => void;
}

/** Wie viele Fragen die Liste höchstens zeigt. */
const HOECHSTENS = 12;

/**
 * Die Fragen, die immer wieder danebengehen.
 *
 * **Wozu.** Die vollständige Fehlerhistorie liegt seit jeher in `antwort_log`,
 * aber keine Abfrage wertete sie je Frage aus. Der Filter „Nur Fehler“ fragt
 * die **letzte** Antwort: Eine Frage, die über Wochen viermal durchfiel und
 * gestern zufällig saß, verschwand aus jeder Liste — obwohl sie das Gegenteil
 * von gekonnt ist. Bei 575 Fragen entscheiden erfahrungsgemäß zehn bis dreißig
 * solcher Fragen über die letzten Prozentpunkte.
 *
 * **Warum das keine Kennzahl ist.** Hier steht keine Note und keine Prognose,
 * sondern eine Auszählung: So oft ging diese Frage daneben, an so vielen
 * verschiedenen Tagen. Beides steht im Protokoll und wird nur addiert.
 *
 * **Warum die Liste gedeckelt ist.** Wer dreißig hartnäckige Fragen hat,
 * braucht keine Liste von dreißig, sondern einen Anfang. Die Zahl darüber
 * nennt trotzdem alle — eine gekürzte Liste, die das verschweigt, wäre eine
 * stille Unwahrheit.
 */
export function Hartnaeckige({
  fragen,
  katalogIndex,
  onUeben,
}: HartnaeckigeProps): React.JSX.Element | null {
  if (fragen.length === 0) {
    return null;
  }

  const gezeigt = fragen.slice(0, HOECHSTENS);

  return (
    <div className="hartnaeckig">
      <h3 className="hartnaeckig__titel">Hartnäckige Fragen</h3>
      <p className="hartnaeckig__satz">
        {fragen.length === 1
          ? 'Eine Frage ist Ihnen an mehreren Tagen danebengegangen.'
          : `${String(fragen.length)} Fragen sind Ihnen an mehreren Tagen danebengegangen.`}{' '}
        Bei ihnen hilft Wiederholen allein oft nicht weiter – lesen Sie die Erklärung dazu.
      </p>

      <ul className="hartnaeckig__liste">
        {gezeigt.map((eintrag) => {
          const frage = katalogIndex?.frage(eintrag.frageId);
          return (
            <li key={eintrag.frageId}>
              <span className="hartnaeckig__nummer">
                Frage {frage?.amtliche_nummer ?? eintrag.frageId}
              </span>{' '}
              {frage?.frage.text ?? ''}
              <span className="hartnaeckig__bilanz"> – {hartnaeckigText(eintrag)}</span>
              {/*
                Die wiederkehrende Fehlwahl, wo es eine gibt.

                Sie unterscheidet zwei didaktisch verschiedene Fälle: Wer immer
                wieder denselben falschen Buchstaben wählt, verwechselt zwei
                Dinge – das ist mit einem Merksatz zu heilen. Wer streut, weiß
                es schlicht nicht.
              */}
              {eintrag.haeufigsteFehlwahl === undefined ? null : (
                <span className="hartnaeckig__fehlwahl">
                  {' '}
                  Sie wählen dort meist {eintrag.haeufigsteFehlwahl}.
                </span>
              )}
            </li>
          );
        })}
      </ul>

      {fragen.length > gezeigt.length ? (
        <p className="hartnaeckig__rest">
          Gezeigt sind die {gezeigt.length} auffälligsten von {fragen.length}.
        </p>
      ) : null}

      <button
        type="button"
        className="knopf"
        onClick={() => {
          onUeben(fragen.map((eintrag) => eintrag.frageId));
        }}
      >
        Diese Fragen üben ({fragen.length})
      </button>
    </div>
  );
}
