import { useId } from 'react';

import { useFokusBeimAufbau } from '../../hooks/useFokusBeimAufbau';
import type { Bogenfrage } from '../../pruefung/typen';
import { useErklaerungen } from '../../hooks/useErklaerungen';
import { Musterantwort } from '../lernen/Musterantwort';

export interface NachbewertungProps {
  readonly fragen: readonly Bogenfrage[];
  readonly freitextVon: (frageId: string) => string;
  readonly bewertungVon: (frageId: string) => boolean | null;
  readonly onBewerten: (frageId: string, richtig: boolean) => void;
  readonly onAbschliessen: () => void;
}

/**
 * Selbstbewertung der offenen Fragen – nach der Abgabe, nie währenddessen.
 *
 * In der echten Prüfung bewertet der Prüfungsausschuss die ausformulierten
 * Antworten. Hier vergleicht der Prüfling selbst mit der Musterantwort; ohne
 * ausdrückliche Wertung gilt eine Antwort als falsch. Das steht auch so da –
 * eine Simulation, die sich schönrechnet, hilft niemandem.
 */
export function Nachbewertung({
  fragen,
  freitextVon,
  bewertungVon,
  onBewerten,
  onAbschliessen,
}: NachbewertungProps): React.JSX.Element {
  const titelRef = useFokusBeimAufbau<HTMLHeadingElement>();
  const titelId = useId();
  const gruppe = useId();
  const erklaerungen = useErklaerungen();

  return (
    <div className="nachbewertung">
      <h2 className="nachbewertung__titel" id={titelId} ref={titelRef} tabIndex={-1}>
        Offene Fragen selbst bewerten
      </h2>
      <p>
        Ihre Simulation ist abgegeben. Vergleichen Sie Ihre ausformulierten Antworten mit der
        Musterantwort und entscheiden Sie, ob Sie das Wesentliche getroffen haben – so, wie es in
        der Prüfung der Prüfungsausschuss täte. Ohne Wertung zählt eine Antwort als falsch.
      </p>

      <ol className="nachbewertung__liste" aria-labelledby={titelId}>
        {fragen.map((eintrag) => {
          const { frage } = eintrag;
          const eigene = freitextVon(frage.id).trim();
          const wertung = bewertungVon(frage.id);
          const richtigId = `${gruppe}-${frage.id}-richtig`;
          const falschId = `${gruppe}-${frage.id}-falsch`;

          return (
            <li className="nachbewertung__eintrag" key={frage.id}>
              <p className="nachbewertung__frage">
                <span className="nachbewertung__nummer">Frage {frage.amtliche_nummer}</span>{' '}
                {frage.frage.text}
              </p>

              <p className="nachbewertung__eigene">
                <span className="nachbewertung__marke">Ihre Antwort:</span>{' '}
                {eigene.length > 0 ? eigene : 'Sie haben nichts eingetragen.'}
              </p>

              {/* Auch hier: Bewertet wird an dieser Stelle, und der Massstab
                  gehoert dorthin, wo die Entscheidung faellt. */}
              <Musterantwort
                musterantwort={frage.musterantwort}
                fokussieren={false}
                ebene={3}
                kernpunkte={erklaerungen.zu(frage.id)?.kernpunkte}
              />

              <fieldset className="nachbewertung__wertung">
                <legend className="nachbewertung__wertungtitel">
                  Frage {frage.amtliche_nummer}: Wie werten Sie Ihre Antwort?
                </legend>
                <div className="nachbewertung__stufen">
                  <div className="nachbewertung__stufe">
                    <input
                      className="nachbewertung__feld"
                      id={richtigId}
                      type="radio"
                      name={`${gruppe}-${frage.id}`}
                      checked={wertung === true}
                      onChange={() => {
                        onBewerten(frage.id, true);
                      }}
                    />
                    <label className="nachbewertung__beschriftung" htmlFor={richtigId}>
                      Als richtig werten
                    </label>
                  </div>
                  <div className="nachbewertung__stufe">
                    <input
                      className="nachbewertung__feld"
                      id={falschId}
                      type="radio"
                      name={`${gruppe}-${frage.id}`}
                      checked={wertung === false}
                      onChange={() => {
                        onBewerten(frage.id, false);
                      }}
                    />
                    <label className="nachbewertung__beschriftung" htmlFor={falschId}>
                      Als falsch werten
                    </label>
                  </div>
                </div>
              </fieldset>
            </li>
          );
        })}
      </ol>

      <div className="nachbewertung__aktionen">
        <button type="button" className="knopf knopf--haupt" onClick={onAbschliessen}>
          Auswertung anzeigen
        </button>
      </div>
    </div>
  );
}
