(() => {
  const deletingIds = new Set();

  const parseError = async (response) => {
    const fallback = "Bild konnte nicht gelöscht werden.";
    try {
      const data = await response.json();
      return data.detail || fallback;
    } catch {
      return fallback;
    }
  };

  const deleteImage = async (imageId, button) => {
    const gallery = window.voice2imageGallery;
    if (!gallery || deletingIds.has(imageId)) return;

    const item = gallery.findItem(imageId);
    if (!item) return;

    deletingIds.add(imageId);
    button.disabled = true;
    button.setAttribute("aria-busy", "true");
    gallery.setStatus("Lösche Bild...", "busy");

    try {
      const response = await fetch(`/api/history/${encodeURIComponent(imageId)}`, {
        method: "DELETE",
      });

      if (!response.ok) {
        throw new Error(await parseError(response));
      }

      gallery.removeItem(imageId);
      gallery.setStatus("Bild gelöscht", "idle");
    } catch (err) {
      console.error(err);
      gallery.setStatus("Löschen fehlgeschlagen", "idle");
      alert(err.message || "Bild konnte nicht gelöscht werden.");
    } finally {
      deletingIds.delete(imageId);
      button.disabled = false;
      button.removeAttribute("aria-busy");
    }
  };

  document.addEventListener("click", (event) => {
    const button = event.target.closest("[data-delete-image-id]");
    if (!button) return;

    event.preventDefault();
    event.stopPropagation();
    deleteImage(button.dataset.deleteImageId, button);
  });
})();