import { useId, useState } from 'react';

import type { Profil } from '../../../../shared/lernstand';

export interface ProfilfrageProps {
  readonly profile: readonly Profil[];
  /** Zuletzt benutztes Profil; steht vorausgewählt. */
  readonly vorausgewaehlt: number | null;
  readonly einstiegRef: React.RefObject<HTMLHeadingElement | null>;
  readonly onWeiter: (profilId: number) => void;
}

/**
 * „Wer lernt?" – die Frage beim Start, sobald es mehr als ein Profil gibt.
 *
 * **Warum sie bei einem Profil nicht erscheint.** Wer allein an seinem
 * Rechner lernt, soll keinen Anmeldebildschirm wegklicken müssen. Die Frage
 * hat nur dann einen Sinn, wenn es tatsächlich etwas zu entscheiden gibt.
 *
 * **Warum eine Auswahl und keine Liste von Schaltflächen.** Eine Reihe von
 * Knöpfen würde beim ersten Tastendruck sofort umschalten. Hier steht die
 * Wahl in einer Auswahlgruppe, mit den Pfeiltasten zu durchlaufen, und erst
 * „Weiterlernen" schaltet um – Änderung des Zusammenhangs nur auf
 * ausdrückliche Anforderung (WCAG 3.2.2). Weil das Ganze ein Formular ist,
 * genügt für den Regelfall die Eingabetaste: Das zuletzt benutzte Profil
 * steht vorausgewählt.
 */
export function Profilfrage({
  profile,
  vorausgewaehlt,
  einstiegRef,
  onWeiter,
}: ProfilfrageProps): React.JSX.Element {
  const gruppeId = useId();
  const [gewaehlt, setzeGewaehlt] = useState<number>(() => {
    const bekannt = profile.some((profil) => profil.id === vorausgewaehlt);
    return bekannt && vorausgewaehlt !== null ? vorausgewaehlt : (profile[0]?.id ?? 0);
  });

  return (
    <section className="karte abschnitt profilfrage" aria-labelledby={gruppeId}>
      {/*
        Eine h2, keine h1.

        Das Tor steht vor dem Startbildschirm, und der behält seinen
        Seitenkopf: Beim allerersten Blick auf ein frisch gestartetes
        Programm ist dessen Name die richtige oberste Überschrift. Erst die
        Ansichten dahinter – Glossar, Prüfung, Sitzung – führen eine eigene
        h1. Hätte das Tor eine, verschwände der Kopf für einen Wimpernschlag
        und käme gleich wieder.
      */}
      <h2 id={gruppeId} ref={einstiegRef} tabIndex={-1}>
        Wer lernt?
      </h2>
      <p>
        Auf diesem Rechner sind mehrere Lernprofile angelegt. Jedes führt seinen eigenen Lernstand –
        Antworten, Fortschritt, Merkliste und Prüfungssimulationen bleiben getrennt.
      </p>

      <form
        onSubmit={(ereignis) => {
          ereignis.preventDefault();
          onWeiter(gewaehlt);
        }}
      >
        {/* Die Überschrift beschriftet zugleich die Gruppe – ein zusätzliches
            `legend` mit demselben Wortlaut wäre eine doppelte Ansage. */}
        <div role="radiogroup" aria-labelledby={gruppeId} className="profilfrage__liste">
          {profile.map((profil) => (
            <label key={profil.id} className="profilfrage__wahl">
              <input
                type="radio"
                name={`${gruppeId}-profil`}
                value={profil.id}
                checked={gewaehlt === profil.id}
                onChange={() => {
                  setzeGewaehlt(profil.id);
                }}
              />
              <span className="profilfrage__name">{profil.name}</span>
            </label>
          ))}
        </div>

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

      <p className="profilfrage__hinweis">
        Profile anlegen, umbenennen und löschen können Sie danach unter „Einstellungen → Profile“.
      </p>
    </section>
  );
}
