import { useId } from 'react';

import type { Bogenfrage } from '../../pruefung/typen';

export interface FragenuebersichtProps {
  readonly fragen: readonly Bogenfrage[];
  /** Aktuelle Stelle im Bogen, von 0 an gezählt. */
  readonly position: number;
  readonly istBeantwortet: (frageId: string) => boolean;
  readonly beantwortet: number;
  readonly offen: number;
  readonly onWaehlen: (stelle: number) => void;
}

/**
 * Übersicht über den gesamten Bogen mit Sprung zu jeder Frage.
 *
 * Beantwortet und offen sind an drei Merkmalen erkennbar: am Symbol (Haken
 * oder Kreis), am Rahmen (durchgezogen oder gestrichelt) und an der Farbe –
 * nie an der Farbe allein (WCAG 1.4.1). Der zugängliche Name jeder Schaltfläche
 * nennt Nummer und Zustand ausgeschrieben, die aktuelle Frage zusätzlich über
 * `aria-current`.
 */
export function Fragenuebersicht({
  fragen,
  position,
  istBeantwortet,
  beantwortet,
  offen,
  onWaehlen,
}: FragenuebersichtProps): React.JSX.Element {
  const titelId = useId();

  return (
    <div className="fragenuebersicht">
      <h3 className="fragenuebersicht__titel" id={titelId}>
        Fragenübersicht
      </h3>
      <p className="fragenuebersicht__bilanz">
        {beantwortet} von {fragen.length} Fragen beantwortet, {offen} noch offen.
      </p>

      <ul className="fragenuebersicht__liste" aria-labelledby={titelId}>
        {fragen.map((eintrag, stelle) => {
          const fertig = istBeantwortet(eintrag.frage.id);
          const aktuell = stelle === position;
          const zustand = fertig ? 'beantwortet' : 'offen';

          return (
            <li key={eintrag.frage.id}>
              <button
                type="button"
                className={`fragenuebersicht__knopf fragenuebersicht__knopf--${zustand}${
                  aktuell ? ' fragenuebersicht__knopf--aktuell' : ''
                }`}
                aria-label={`Frage ${String(stelle + 1)} von ${String(fragen.length)}, ${zustand}${
                  aktuell ? ', aktuelle Frage' : ''
                }`}
                {...(aktuell ? { 'aria-current': 'true' as const } : {})}
                onClick={() => {
                  onWaehlen(stelle);
                }}
              >
                <span className="fragenuebersicht__marke" aria-hidden="true">
                  {fertig ? '✓' : '○'}
                </span>
                <span className="fragenuebersicht__nummer" aria-hidden="true">
                  {stelle + 1}
                </span>
              </button>
            </li>
          );
        })}
      </ul>

      <p className="fragenuebersicht__legende">
        <span aria-hidden="true">✓</span> beantwortet, <span aria-hidden="true">○</span> noch offen.
      </p>
    </div>
  );
}
