import { useId, useState } from 'react';

export interface ZuschnittfrageProps {
  /** Titel des abwählbaren Kapitels, aus dem Katalog. */
  readonly kapitelTitel: string;
  /** Wie viele Fragen es enthält, und wie viele der Katalog insgesamt hat. */
  readonly fragen: number;
  readonly fragenGesamt: number;
  readonly einstiegRef: React.RefObject<HTMLHeadingElement | null>;
  readonly onWeiter: (mitKapitel: boolean) => void;
}

/**
 * „Brauchen Sie Kapitel IV?" – die eine Frage beim allerersten Start.
 *
 * ## Warum genau eine Frage und keine drei Zielprofile
 *
 * `PLAN.md` sagt drei zu: Sportschütze, Jäger, Wassersport. Nachgezählt trägt
 * der Katalog das nicht. Die Fragen zum Wassersport liegen **vollständig** in
 * Kapitel IV – 42 von 42 in einem Bereich. Die zum Sportschießen verteilen
 * sich auf vier Bereiche, die zur Jagd auf drei, und beide sind Pflichtstoff:
 * Wer die Sachkundeprüfung ablegt, muss die Rechte und Pflichten können,
 * gleich ob er jagt oder schießt. Ein „Jäger-Profil", das elf Fragen
 * wegnähme, nähme Prüfungsstoff weg.
 *
 * Abtrennbar ist genau ein Teil, und der ist es sauber. Deshalb steht hier
 * eine Frage statt einer Profilwahl.
 *
 * ## Warum sie beim ersten Start steht und nicht in den Einstellungen
 *
 * Der Schalter dafür gibt es längst – unter „Ihr Lernplan". Nur sieht ihn
 * nicht, wer ihn braucht: Wer nie hinunterscrollt, schleppt 89 von 575 Fragen
 * mit, ein knappes Sechstel des Katalogs, und sieht dauerhaft zu wenig
 * Fortschritt. Die Frage holt den Schalter dorthin, wo er wirkt.
 *
 * Sie erscheint **einmal** und nur auf einem frischen Lernstand. Wer schon
 * gelernt hat, bekommt sie nicht mehr vorgesetzt; für ihn ist es kein erster
 * Start.
 *
 * ## Warum „mitlernen" vorausgewählt ist
 *
 * Die vorsichtige Vorgabe. Wer die Frage wegklickt, ohne sie zu lesen, hat
 * danach den vollständigen Katalog – zu viel gelernt zu haben ist ein
 * geringerer Schaden als in der Prüfung vor einem unbekannten Kapitel zu
 * sitzen.
 */
export function Zuschnittfrage({
  kapitelTitel,
  fragen,
  fragenGesamt,
  einstiegRef,
  onWeiter,
}: ZuschnittfrageProps): React.JSX.Element {
  const gruppeId = useId();
  const wahlId = useId();
  const [mitKapitel, setzeMitKapitel] = useState(true);

  return (
    <section className="karte abschnitt profilfrage" aria-labelledby={gruppeId}>
      {/* Eine h2 wie die Profilfrage: Das Tor steht vor dem Startbildschirm,
          und der behält seinen Seitenkopf. */}
      <h2 id={gruppeId} ref={einstiegRef} tabIndex={-1}>
        Lernen Sie {kapitelTitel} mit?
      </h2>
      <p>
        Nicht jede Prüfungsstelle prüft dieses Kapitel. Es umfasst {fragen} der {fragenGesamt}{' '}
        Fragen des amtlichen Katalogs – wer es mitschleppt, ohne es zu brauchen, sieht dauerhaft zu
        wenig Fortschritt. <strong>Fragen Sie im Zweifel bei Ihrer Prüfungsstelle nach.</strong>
      </p>

      <form
        onSubmit={(ereignis) => {
          ereignis.preventDefault();
          onWeiter(mitKapitel);
        }}
      >
        {/* Dieselbe Bauform wie „Wer lernt?“ – eine Auswahlgruppe, mit den
            Pfeiltasten zu durchlaufen, und erst „Weiter“ schaltet um (WCAG
            3.2.2). Ein zusätzliches `legend` mit dem Wortlaut der Überschrift
            wäre eine doppelte Ansage. */}
        <div role="radiogroup" aria-labelledby={gruppeId} className="profilfrage__liste">
          {(
            [
              [true, 'Ja, mitlernen', 'Der vollständige Katalog. Im Zweifel diese Wahl.'],
              [
                false,
                'Nein, weglassen',
                'Die Fragen kommen in keiner Sitzung und in keiner Zahl mehr vor.',
              ],
            ] as const
          ).map(([wert, beschriftung, erklaerung]) => (
            <label key={String(wert)} className="profilfrage__wahl">
              <input
                type="radio"
                name={`${wahlId}-kapitel`}
                value={String(wert)}
                checked={mitKapitel === wert}
                onChange={() => {
                  setzeMitKapitel(wert);
                }}
              />
              <span className="profilfrage__name">
                {beschriftung}
                <span className="profilfrage__erklaerung">{erklaerung}</span>
              </span>
            </label>
          ))}
        </div>

        <div className="profilfrage__aktionen">
          <button type="submit" className="knopf knopf--haupt">
            Weiter
          </button>
        </div>
      </form>

      <p className="profilfrage__hinweis">
        Sie können das jederzeit ändern – auf dem Startbildschirm unter „Ihr Lernplan“. Verloren
        geht dabei nichts: Was Sie in diesem Kapitel schon gelernt haben, bleibt gespeichert.
      </p>
    </section>
  );
}
