import { Controller } from '@hotwired/stimulus';

/*
 * Remplace une photo qui ne se charge pas (ex. fichier perdu à la prise de vue → objet S3
 * inexistant, NoSuchKey) par un placeholder « Photo indisponible », et neutralise le lien
 * d'ouverture pour ne pas afficher l'erreur XML brute de S3.
 *
 * Usage : <img data-controller="image-fallback" data-action="error->image-fallback#fallback" ...>
 */
export default class extends Controller {
    connect() {
        // L'image a pu échouer AVANT que le contrôleur ne se connecte (cache, lazy-load).
        if (this.element.complete && this.element.naturalWidth === 0) {
            this.fallback();
        }
    }

    fallback() {
        if (this._done) return;
        this._done = true;

        // Mêmes classes que le bloc « Pas d'image » du template (déjà compilées par Tailwind).
        const ph = document.createElement('div');
        ph.className = 'w-36 h-24 rounded-lg border border-dashed border-gray-200 bg-gray-50 flex items-center justify-center';
        ph.title = 'La photo n’a pas pu être enregistrée lors du scan.';
        ph.innerHTML = '<span class="text-xs text-gray-400">Photo indisponible</span>';

        // Remplace le lien <a> englobant (sinon l'image) pour supprimer l'ouverture vers S3.
        const target = this.element.closest('a') || this.element;
        target.replaceWith(ph);
    }
}
