nexarch/web/mail-search/app/mail/[messageId]/ImagePreview.tsx

"use client";

// UX-03: Bild-Anhang-Vorschau. <img> dekodiert Bilddaten nativ im
// Browser (kein Skript-/HTML-Rendering von Fremdinhalt wie bei einem
// iframe) -- fuer Bilder reicht das, anders als bei PDF ist hier kein
// Canvas-Zwang nötig (Akzeptanzkriterium 3 betrifft ausdrücklich nur
// die PDF-Vorschau).
import { useEffect, useState } from "react";
import { apiFetch } from "../../../lib/http";

export interface ImagePreviewProps {
  contentUrl: string;
  alt: string;
}

export function ImagePreview({ contentUrl, alt }: ImagePreviewProps) {
  const [src, setSrc] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    let objectUrl: string | null = null;
    setError(null);
    setSrc(null);

    apiFetch(contentUrl)
      .then((res) => {
        if (!res.ok) throw new Error(`Bild konnte nicht geladen werden (${res.status}).`);
        return res.blob();
      })
      .then((blob) => {
        if (cancelled) return;
        objectUrl = URL.createObjectURL(blob);
        setSrc(objectUrl);
      })
      .catch((err: unknown) => {
        if (cancelled) return;
        setError(err instanceof Error ? err.message : "Bild konnte nicht geladen werden.");
      });

    return () => {
      cancelled = true;
      if (objectUrl) URL.revokeObjectURL(objectUrl);
    };
  }, [contentUrl]);

  if (error) {
    return <p role="alert">{error}</p>;
  }
  if (!src) {
    return <p>Bild wird geladen…</p>;
  }
  return <img src={src} alt={alt} style={{ maxWidth: "100%" }} />;
}