import * as React from "react";

export interface ImagePlaceholderProps {
  src?: string;
  alt: string;
  /** Caption shown on the load-error placeholder. */
  label: React.ReactNode;
  /** Small monospace hint under the label, e.g. an expected filename. */
  hint?: React.ReactNode;
  /** Placeholder icon override - defaults to a simple image glyph. */
  icon?: React.ReactNode;
  size?: "default" | "mini" | "round";
  className?: string;
}

const DEFAULT_ICON = (
  <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden>
    <path
      fill="currentColor"
      fillRule="evenodd"
      d="m23.35 1.35-22 22-.7-.7 22-22zM1 3h17.5v1H2v16H1zm21 11.85V4h1v17H6v-1h16v-3.77l-3.24-3.08-4.57 4.48-2.85-2.84.7-.7 2.15 2.14 4.56-4.47 3.25 3.1ZM4 8.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0M6.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"
      clipRule="evenodd"
    />
  </svg>
);

export function ImagePlaceholder({
  src,
  alt,
  label,
  hint,
  icon,
  size = "default",
  className,
}: ImagePlaceholderProps) {
  /*
   * Gemerkt wird die Adresse, die fehlgeschlagen ist - nicht ein blosses
   * "ist fehlgeschlagen".
   *
   * Der Unterschied ist der Fehler, den das behebt: In der Fotogalerie unter
   * "Mein Audi" bleibt dieselbe Komponente stehen und bekommt nur eine neue
   * src. Mit einem blossen Wahrheitswert blieb ein einmal gesetztes true fuer
   * immer stehen - sobald ein noch leerer Platz durchlaufen war, zeigten auch
   * alle folgenden Plaetze mit echtem Foto nur noch den Platzhalter. Erst ein
   * Seitenwechsel setzte den Zustand zurueck, weil die Komponente dabei neu
   * entsteht (gemeldet vom Eigentuemer, 2026-08-31).
   *
   * Bewusst ohne useEffect: ein Vergleich beim Rendern kommt ohne den
   * zusaetzlichen Durchlauf aus, den ein Zuruecksetzen im Effekt braucht -
   * und in dem waere fuer einen Wimpernschlag das falsche Bild zu sehen.
   */
  const [fehlgeschlagen, setzeFehlgeschlagen] = React.useState<string | null>(null);
  const classes = ["ads-bildbox"];
  if (size === "mini") classes.push("ads-bildbox--mini");
  if (size === "round") classes.push("ads-bildbox--round");
  if (className) classes.push(className);

  const showPlaceholder = !src || fehlgeschlagen === src;

  return (
    <div className={classes.join(" ")}>
      {!showPlaceholder && (
        <img src={src} alt={alt} onError={() => setzeFehlgeschlagen(src)} />
      )}
      {showPlaceholder && (
        <div className="ads-platzhalter">
          <span className="ads-platzhalter__icon">{icon ?? DEFAULT_ICON}</span>
          <span className="ads-platzhalter__label">{label}</span>
          {hint !== undefined && <span className="ads-platzhalter__hint">{hint}</span>}
        </div>
      )}
    </div>
  );
}