import { useEffect, useState } from 'react';

import { lernBruecke } from '../lernen/bruecke';

/**
 * Bilder kommen als Data-URL über den IPC-Kanal (die CSP verbietet
 * Dateizugriffe). Der Zwischenspeicher lebt bewusst auf Modulebene: die
 * amtlichen Prüfzeichen wiederholen sich über viele Fragen hinweg und ändern
 * sich innerhalb einer Sitzung nie.
 */
const zwischenspeicher = new Map<string, string>();

export type BildZustand =
  | { readonly art: 'laedt' }
  | { readonly art: 'fertig'; readonly quelle: string }
  | { readonly art: 'fehler' };

/**
 * Lädt ein Katalogbild.
 *
 * Die Bild-ID wird nur beim Aufbau ausgewertet – Aufrufer setzen deshalb
 * `key={bildId}`, damit ein Wechsel die Komponente sauber neu aufbaut.
 */
export function useKatalogBild(bildId: string): BildZustand {
  const [zustand, setzeZustand] = useState<BildZustand>(() => {
    const bekannt = zwischenspeicher.get(bildId);
    if (bekannt !== undefined) {
      return { art: 'fertig', quelle: bekannt };
    }
    return lernBruecke()?.katalogBild ? { art: 'laedt' } : { art: 'fehler' };
  });

  useEffect(() => {
    if (zustand.art !== 'laedt') {
      return undefined;
    }
    const laden = lernBruecke()?.katalogBild;
    if (!laden) {
      return undefined;
    }

    let abgebrochen = false;

    void laden(bildId)
      .then((quelle) => {
        zwischenspeicher.set(bildId, quelle);
        if (!abgebrochen) {
          setzeZustand({ art: 'fertig', quelle });
        }
      })
      .catch(() => {
        if (!abgebrochen) {
          setzeZustand({ art: 'fehler' });
        }
      });

    return () => {
      abgebrochen = true;
    };
  }, [bildId, zustand.art]);

  return zustand;
}
