{% load i18n static %}

<!-- Champs spécifiques SignPanel (Panneau de signalisation) -->
<div id="signPanelSpecificFields" class="border rounded-3 p-3 mb-3 bg-white shadow-sm">
    <div class="d-flex align-items-center justify-content-between mb-3 border-bottom pb-2">
        <span class="fw-bold text-dark d-flex align-items-center gap-2">
            <i class="bi bi-signpost-2-fill text-primary"></i>
            {% translate "Contrôle de signalisation routière" %}
        </span>
        <span class="badge bg-light text-dark border">
            {% if asset.code %}{{ asset.code }}{% elif asset.signpanel_type %}{{ asset.signpanel_type.code }}{% else %}{% translate "Panneau" %}{% endif %}
        </span>
    </div>

    <!-- 1. Assistance IA : Vérification instantanée par photo -->
    <div class="card border border-primary-subtle bg-primary-subtle bg-opacity-10 mb-3 rounded-3">
        <div class="card-body p-2.5">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <span class="fw-bold text-primary small d-flex align-items-center gap-1">
                        <i class="bi bi-stars text-warning"></i>{% translate "Assistant IA Signalisation" %}
                        <span id="sign_ai_photos_badge" class="badge bg-white text-primary border ms-1 d-none" style="font-size: 0.7rem; font-weight: 500;"></span>
                    </span>
                    <div class="text-muted" style="font-size: 0.75rem;">
                        {% translate "Photographiez ou utilisez une photo déjà prise pour détecter automatiquement le type & texte" %}
                    </div>
                </div>
                <div class="btn-group shadow-sm">
                    <button type="button" id="btn_sign_ai_detect" class="btn btn-sm btn-primary d-flex align-items-center gap-1 px-2.5 py-1.5">
                        <i class="bi bi-stars"></i>
                        <span id="btn_sign_ai_detect_label">{% translate "Détecter par IA" %}</span>
                    </button>
                    <button type="button" class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split px-2" data-bs-toggle="dropdown" aria-expanded="false" id="btn_sign_ai_dropdown" title="{% translate 'Options de photo' %}">
                        <span class="visually-hidden">Options</span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end shadow-sm small py-1" style="font-size: 0.8rem;">
                        <li>
                            <button type="button" class="dropdown-item d-flex align-items-center gap-2 py-1.5" id="btn_ai_pick_existing">
                                <i class="bi bi-images text-primary"></i>
                                <span>{% translate "Choisir parmi les photos" %}</span>
                                <span class="badge bg-light text-dark border ms-auto" id="sign_ai_dropdown_count">0</span>
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item d-flex align-items-center gap-2 py-1.5" id="btn_ai_take_new">
                                <i class="bi bi-camera text-primary"></i>
                                <span>{% translate "Prendre une nouvelle photo" %}</span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Input caché pour la caméra / upload IA -->
            <input type="file" id="sign_ai_file_input" accept="image/*" capture="environment" class="d-none">

            <!-- Résultat de détection IA -->
            <div id="sign_ai_result_container" class="mt-2 d-none">
                <div id="sign_ai_spinner" class="text-center py-2 d-none">
                    <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                    <span class="small text-muted ms-2" id="sign_ai_spinnerText">{% translate "Analyse visuelle & OCR en cours..." %}</span>
                </div>
                <div id="sign_ai_badge_container"></div>
            </div>
        </div>
    </div>

    <!-- Modale de sélection de la photo pour l'analyse IA -->
    <div class="modal fade" id="signAiPhotoPickerModal" tabindex="-1" aria-labelledby="signAiPhotoPickerModalLabel" aria-hidden="true" style="z-index: 1065;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content shadow border-0">
                <div class="modal-header bg-light py-2 px-3">
                    <h6 class="modal-title fw-bold" id="signAiPhotoPickerModalLabel">
                        <i class="bi bi-stars text-warning me-1"></i>{% translate "Choisir la photo à analyser avec l'IA" %}
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>
                <div class="modal-body p-3">
                    <p class="small text-muted mb-2">
                        {% translate "Plusieurs photos sont disponibles. Sélectionnez celle qui cadre le mieux le panneau de signalisation :" %}
                    </p>
                    <div class="row g-2" id="signAiPhotoPickerGrid"></div>
                </div>
                <div class="modal-footer bg-light py-2 px-3 d-flex justify-content-between">
                    <button type="button" class="btn btn-sm btn-outline-primary" id="btn_picker_take_new">
                        <i class="bi bi-camera me-1"></i>{% translate "Prendre une nouvelle photo" %}
                    </button>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">
                        {% translate "Fermer" %}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" name="ai_detected_code" id="insp_ai_detected_code" value="">
    <input type="hidden" name="ai_confidence" id="insp_ai_confidence" value="">

    <!-- 2. État de Propreté & Visibilité -->
    <div class="mb-3">
        <label class="form-label small fw-bold text-dark mb-1 d-flex align-items-center justify-content-between">
            <span><i class="bi bi-droplet-half text-info me-1"></i>{% translate "État de propreté & Visibilité" %} <span class="text-danger">*</span></span>
        </label>
        <div class="row g-2" id="cleanliness_button_group">
            <div class="col-6 col-sm-4">
                <input type="radio" class="btn-check" name="verified_cleanliness" id="clean_clean" value="clean" checked>
                <label class="btn btn-outline-success btn-sm w-100 py-2 d-flex flex-column align-items-center justify-content-center text-center rounded-3" for="clean_clean">
                    <i class="bi bi-check-circle-fill fs-6 mb-1"></i>
                    <span class="fw-semibold small">{% translate "Propre / Bon" %}</span>
                </label>
            </div>
            <div class="col-6 col-sm-4">
                <input type="radio" class="btn-check" name="verified_cleanliness" id="clean_dirty" value="dirty">
                <label class="btn btn-outline-warning btn-sm w-100 py-2 d-flex flex-column align-items-center justify-content-center text-center rounded-3" for="clean_dirty">
                    <i class="bi bi-brush-fill fs-6 mb-1"></i>
                    <span class="fw-semibold small">{% translate "Sale / Mousse" %}</span>
                </label>
            </div>
            <div class="col-6 col-sm-4">
                <input type="radio" class="btn-check" name="verified_cleanliness" id="clean_vegetation" value="vegetation">
                <label class="btn btn-outline-warning btn-sm w-100 py-2 d-flex flex-column align-items-center justify-content-center text-center rounded-3" for="clean_vegetation" style="border-color: #fd7e14; color: #fd7e14;">
                    <i class="bi bi-tree-fill fs-6 mb-1"></i>
                    <span class="fw-semibold small">{% translate "Végétation" %}</span>
                </label>
            </div>
            <div class="col-6 col-sm-6">
                <input type="radio" class="btn-check" name="verified_cleanliness" id="clean_vandalized" value="vandalized">
                <label class="btn btn-outline-danger btn-sm w-100 py-2 d-flex flex-column align-items-center justify-content-center text-center rounded-3" for="clean_vandalized">
                    <i class="bi bi-exclamation-octagon-fill fs-6 mb-1"></i>
                    <span class="fw-semibold small">{% translate "Tagué / Dégradé" %}</span>
                </label>
            </div>
            <div class="col-12 col-sm-6">
                <input type="radio" class="btn-check" name="verified_cleanliness" id="clean_missing" value="missing">
                <label class="btn btn-outline-dark btn-sm w-100 py-2 d-flex flex-column align-items-center justify-content-center text-center rounded-3" for="clean_missing">
                    <i class="bi bi-x-circle-fill fs-6 mb-1"></i>
                    <span class="fw-semibold small">{% translate "Absent / Disparu" %}</span>
                </label>
            </div>
        </div>
    </div>

    <!-- 3. Type de Panneau (Sélecteur avec aperçu visuel SVG) -->
    <div class="mb-3">
        <label class="form-label small fw-bold text-dark mb-1">
            <i class="bi bi-image text-secondary me-1"></i>{% translate "Type de panneau constaté" %}
        </label>
        
        <!-- Aperçu du panneau sélectionné -->
        <div class="d-flex align-items-center gap-3 p-2 bg-light rounded-3 border mb-2" id="sign_selected_preview">
            <div style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: white; border-radius: 8px; border: 1px solid #dee2e6;">
                <img id="sign_preview_img" 
                     src="{% if asset.signpanel_type and asset.signpanel_type.code %}/static/assets/road_signs/2025/{{ asset.signpanel_type.code|upper }}.svg{% else %}/static/assets/road_signs/2025/C1.svg{% endif %}" 
                     alt="{% translate 'Panneau' %}" 
                     style="max-width: 42px; max-height: 42px; object-fit: contain;"
                     onerror="this.onerror=null; this.src='/static/assets/road_signs/2025/' + (this.alt || 'default') + '.png';">
            </div>
            <div class="flex-grow-1 overflow-hidden">
                <div class="fw-bold text-dark text-truncate" id="sign_preview_code">
                    {% if asset.signpanel_type %}{{ asset.signpanel_type.code }} - {{ asset.signpanel_type.name_fr|default:asset.signpanel_type.name_nl }}{% else %}{% translate "Non défini" %}{% endif %}
                </div>
                <small class="text-muted d-block text-truncate" id="sign_preview_name">
                    {% if asset.signpanel_type %}{{ asset.signpanel_type.name_nl|default:'' }}{% endif %}
                </small>
            </div>
        </div>

        <select name="verified_signpanel_type_id" id="insp_verified_signpanel_type" class="form-select form-select-sm">
            <option value="">-- {% translate "Conserver le type actuel" %} --</option>
            {% for pt in panel_types %}
                <option value="{{ pt.id }}" data-code="{{ pt.code }}" data-name="{{ pt.name_fr|default:pt.name_nl }}" {% if asset.signpanel_type_id == pt.id %}selected{% endif %}>
                    {{ pt.code }} - {{ pt.name_fr|default:pt.name_nl|truncatechars:45 }}
                </option>
            {% endfor %}
        </select>
    </div>

    <!-- 4. Texte additionnel / Panonceau -->
    <div class="mb-3">
        <label class="form-label small fw-bold text-dark mb-1" for="insp_verified_signpanel_text">
            <i class="bi bi-chat-left-text text-secondary me-1"></i>{% translate "Texte / Mention additionnelle constatée" %}
        </label>
        <div class="input-group input-group-sm">
            <input type="text" 
                   name="verified_signpanel_text" 
                   id="insp_verified_signpanel_text" 
                   class="form-control form-control-sm" 
                   placeholder="{% translate 'Ex: Sauf riverains, 300 m, Max 3.5t...' %}"
                   value="{{ asset.signpanel_text|default:'' }}">
            <button class="btn btn-outline-secondary" type="button" id="btn_clear_sign_text" title="{% translate 'Effacer le texte' %}">
                <i class="bi bi-x"></i>
            </button>
        </div>
    </div>

    <!-- 5. Options d'application -->
    <div class="form-check form-switch pt-1">
        <input class="form-check-input" type="checkbox" name="apply_sign_updates_to_asset" value="true" id="insp_apply_sign_updates" checked>
        <label class="form-check-label small text-muted" for="insp_apply_sign_updates">
            {% translate "Mettre à jour directement la fiche du panneau (type, texte, conformité)" %}
        </label>
    </div>
</div>

<script>
(function() {
    // 1. Mise à jour de l'aperçu SVG lors du changement du select
    const selectType = document.getElementById('insp_verified_signpanel_type');
    const previewImg = document.getElementById('sign_preview_img');
    const previewCode = document.getElementById('sign_preview_code');
    const previewName = document.getElementById('sign_preview_name');

    if (selectType && previewImg) {
        selectType.addEventListener('change', function() {
            const selectedOpt = this.options[this.selectedIndex];
            if (selectedOpt && selectedOpt.value) {
                const code = selectedOpt.getAttribute('data-code') || '';
                const name = selectedOpt.getAttribute('data-name') || '';
                const upperCode = code.toUpperCase();
                previewImg.src = `/static/assets/road_signs/2025/${upperCode}.svg`;
                previewImg.alt = upperCode;
                previewCode.textContent = `${code} - ${name}`;
                previewName.textContent = name;
            }
        });
    }

    // 2. Synchronisation bouton manquant avec le statut général de l'inspection
    const missingRadio = document.getElementById('clean_missing');
    const dirtyRadio = document.getElementById('clean_dirty');
    const vegRadio = document.getElementById('clean_vegetation');
    const vandRadio = document.getElementById('clean_vandalized');
    const cleanRadio = document.getElementById('clean_clean');

    if (missingRadio) {
        missingRadio.addEventListener('change', function() {
            if (this.checked) {
                const resMissing = document.getElementById('res_missing');
                if (resMissing) {
                    resMissing.checked = true;
                }
            }
        });
    }

    [dirtyRadio, vegRadio, vandRadio].forEach(function(r) {
        if (r) {
            r.addEventListener('change', function() {
                if (this.checked) {
                    const resDamaged = document.getElementById('res_damaged') || document.getElementById('res_non_compliant');
                    if (resDamaged) {
                        resDamaged.checked = true;
                    }
                }
            });
        }
    });

    if (cleanRadio) {
        cleanRadio.addEventListener('change', function() {
            if (this.checked) {
                const resComp = document.getElementById('res_compliant');
                if (resComp) {
                    resComp.checked = true;
                }
            }
        });
    }

    // 3. Bouton clear text
    const btnClearText = document.getElementById('btn_clear_sign_text');
    const inputText = document.getElementById('insp_verified_signpanel_text');
    if (btnClearText && inputText) {
        btnClearText.addEventListener('click', function() {
            inputText.value = '';
            inputText.focus();
        });
    }

    // 4. Assistance IA (Détection intelligente par photo)
    const btnAIDetect = document.getElementById('btn_sign_ai_detect');
    const btnPickExisting = document.getElementById('btn_ai_pick_existing');
    const btnTakeNew = document.getElementById('btn_ai_take_new');
    const aiFileInput = document.getElementById('sign_ai_file_input');
    const aiResultContainer = document.getElementById('sign_ai_result_container');
    const aiSpinner = document.getElementById('sign_ai_spinner');
    const aiSpinnerText = document.getElementById('sign_ai_spinnerText');
    const aiBadgeContainer = document.getElementById('sign_ai_badge_container');

    function getAvailablePhotos() {
        if (typeof window.getInspectionPhotos === 'function') {
            return window.getInspectionPhotos();
        }
        return (window.accumulatedInspectionFiles || []).filter(f => f && f.type && f.type.startsWith('image/'));
    }

    function updateAiPhotosIndicator() {
        const photos = getAvailablePhotos();
        const badge = document.getElementById('sign_ai_photos_badge');
        const dropCount = document.getElementById('sign_ai_dropdown_count');
        const label = document.getElementById('btn_sign_ai_detect_label');

        if (dropCount) dropCount.textContent = photos.length;

        if (photos.length === 0) {
            if (badge) badge.classList.add('d-none');
            if (label) label.textContent = '{% translate "Détecter par IA" %}';
        } else if (photos.length === 1) {
            if (badge) {
                badge.innerHTML = '<i class="bi bi-image text-primary me-1"></i>1 photo prête';
                badge.classList.remove('d-none');
            }
            if (label) label.textContent = '{% translate "Analyser la photo" %}';
        } else {
            if (badge) {
                badge.innerHTML = `<i class="bi bi-images text-primary me-1"></i>${photos.length} photos`;
                badge.classList.remove('d-none');
            }
            if (label) label.textContent = '{% translate "Détecter par IA" %}';
        }
    }

    window.addEventListener('inspection-photos-updated', updateAiPhotosIndicator);
    // Mise à jour immédiate à l'affichage
    setTimeout(updateAiPhotosIndicator, 50);

    async function runSignAiDetection(file) {
        if (!file) return;

        if (aiResultContainer) aiResultContainer.classList.remove('d-none');
        if (aiSpinner) aiSpinner.classList.remove('d-none');
        if (aiSpinnerText) aiSpinnerText.textContent = '{% translate "Analyse visuelle & OCR en cours..." %}';
        if (aiBadgeContainer) aiBadgeContainer.innerHTML = '';

        const formData = new FormData();
        formData.append('image', file);

        try {
            const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]')?.value || '';
            const response = await fetch('/sign/api/detect/', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken,
                },
                body: formData
            });

            if (aiSpinner) aiSpinner.classList.add('d-none');

            if (!response.ok) {
                throw new Error('Erreur réseau (' + response.status + ')');
            }

            const data = await response.json();
            if ((data.status === 'success' || data.success) && data.panels && data.panels.length > 0) {
                // Panneau principal détecté
                const topPanel = data.panels[0];
                const detectedCode = topPanel.code;
                const confidence = Math.round((topPanel.confidence || 0) * 100);
                const detectedText = topPanel.ocr_text || topPanel.signpanel_text || topPanel.text || '';
                const panelLabel = topPanel.name_fr || topPanel.label_fr || topPanel.name_nl || '';

                // Remplissage des inputs cachés
                const inputAiCode = document.getElementById('insp_ai_detected_code');
                const inputAiConf = document.getElementById('insp_ai_confidence');
                if (inputAiCode) inputAiCode.value = detectedCode;
                if (inputAiConf) inputAiConf.value = topPanel.confidence || 0;

                // Comparaison avec le type actuel
                const selectTypeEl = document.getElementById('insp_verified_signpanel_type');
                const currentSelectedOpt = selectTypeEl?.options[selectTypeEl.selectedIndex];
                const currentCode = currentSelectedOpt?.getAttribute('data-code') || '{{ asset.signpanel_type.code|default:"" }}';
                const isMatch = (currentCode.trim().toUpperCase() === detectedCode.trim().toUpperCase());

                let badgeHtml = '';
                if (isMatch) {
                    badgeHtml = `
                        <div class="alert alert-success d-flex align-items-center justify-content-between p-2 mb-1 rounded-3" id="ai_detect_alert_box">
                            <div class="d-flex align-items-center gap-2">
                                <img src="/static/assets/road_signs/2025/${detectedCode.toUpperCase()}.svg" style="width: 32px; height: 32px; object-fit: contain;" onerror="this.onerror=null; this.src='/static/assets/road_signs/2025/' + (this.alt || 'default') + '.png';">
                                <div>
                                    <div class="fw-bold small text-success">✓ Conforme : ${detectedCode} (${confidence}%)</div>
                                    <div style="font-size: 0.75rem;" class="text-muted">${panelLabel}</div>
                                </div>
                            </div>
                            <span class="badge bg-success">Validé</span>
                        </div>
                    `;
                } else {
                    badgeHtml = `
                        <div class="alert alert-warning d-flex align-items-center justify-content-between p-2 mb-1 rounded-3" id="ai_detect_alert_box">
                            <div class="d-flex align-items-center gap-2">
                                <img src="/static/assets/road_signs/2025/${detectedCode.toUpperCase()}.svg" style="width: 32px; height: 32px; object-fit: contain;" onerror="this.onerror=null; this.src='/static/assets/road_signs/2025/' + (this.alt || 'default') + '.png';">
                                <div>
                                    <div class="fw-bold small text-dark">Détecté : <span class="text-primary fw-bold">${detectedCode}</span> (${confidence}%)</div>
                                    <div style="font-size: 0.75rem;" class="text-muted">${panelLabel}</div>
                                </div>
                            </div>
                            <div id="ai_apply_btn_container">
                                <button type="button" class="btn btn-sm btn-primary py-1 px-2.5 shadow-sm d-flex align-items-center gap-1" id="btn_apply_ai_code" data-code="${detectedCode}" data-name="${panelLabel}">
                                    <i class="bi bi-check-lg"></i>
                                    <span>Appliquer</span>
                                </button>
                            </div>
                        </div>
                    `;
                }

                if (detectedText) {
                    badgeHtml += `
                        <div class="d-flex align-items-center justify-content-between p-2 bg-light rounded border mt-1" id="ai_apply_text_box">
                            <small class="text-muted"><i class="bi bi-fonts me-1 text-primary"></i>Texte OCR : <strong class="text-dark">« ${detectedText} »</strong></small>
                            <div id="ai_apply_text_btn_container">
                                <button type="button" class="btn btn-xs btn-outline-secondary py-0 px-2" id="btn_apply_ai_text" data-text="${detectedText}">
                                    Insérer
                                </button>
                            </div>
                        </div>
                    `;
                }

                aiBadgeContainer.innerHTML = badgeHtml;

                // Bouton Appliquer le type détecté
                const btnApplyCode = document.getElementById('btn_apply_ai_code');
                if (btnApplyCode) {
                    btnApplyCode.addEventListener('click', function(e) {
                        if (e) e.preventDefault();
                        const codeToApply = (this.getAttribute('data-code') || '').trim();
                        const nameToApply = this.getAttribute('data-name') || '';
                        const upperCode = codeToApply.toUpperCase();

                        const select = document.getElementById('insp_verified_signpanel_type');
                        const previewImg = document.getElementById('sign_preview_img');
                        const previewCode = document.getElementById('sign_preview_code');
                        const previewName = document.getElementById('sign_preview_name');

                        let matched = false;
                        if (select) {
                            for (let i = 0; i < select.options.length; i++) {
                                const optCode = (select.options[i].getAttribute('data-code') || '').trim().toUpperCase();
                                if (optCode === upperCode) {
                                    select.selectedIndex = i;
                                    matched = true;
                                    break;
                                }
                            }

                            if (!matched) {
                                const newOpt = document.createElement('option');
                                newOpt.value = upperCode;
                                newOpt.setAttribute('data-code', upperCode);
                                newOpt.setAttribute('data-name', nameToApply || upperCode);
                                newOpt.textContent = `${upperCode} - ${nameToApply || upperCode}`;
                                select.appendChild(newOpt);
                                select.selectedIndex = select.options.length - 1;
                                matched = true;
                            }

                            select.dispatchEvent(new Event('change', { bubbles: true }));
                        }

                        // Mise à jour visuelle garantie
                        if (previewImg) {
                            previewImg.src = `/static/assets/road_signs/2025/${upperCode}.svg`;
                            previewImg.alt = upperCode;
                        }
                        if (previewCode) {
                            previewCode.textContent = `${upperCode} - ${nameToApply || ''}`;
                        }
                        if (previewName) {
                            previewName.textContent = nameToApply || '';
                        }

                        // Mise à jour input caché
                        const inputAiCode = document.getElementById('insp_ai_detected_code');
                        if (inputAiCode) inputAiCode.value = upperCode;

                        // Feedback visuel sur le bouton et l'alerte
                        const btnContainer = document.getElementById('ai_apply_btn_container');
                        if (btnContainer) {
                            btnContainer.innerHTML = `
                                <span class="badge bg-success text-white py-1.5 px-2.5 d-inline-flex align-items-center gap-1 shadow-sm">
                                    <i class="bi bi-check2-circle fs-6"></i> <span>Appliqué</span>
                                </span>
                            `;
                        }

                        const alertBox = document.getElementById('ai_detect_alert_box');
                        if (alertBox) {
                            alertBox.className = 'alert alert-success d-flex align-items-center justify-content-between p-2 mb-1 rounded-3';
                        }

                        // Animation de surbrillance du sélecteur
                        const previewBox = document.getElementById('sign_selected_preview');
                        if (previewBox) {
                            previewBox.classList.add('border-primary', 'bg-primary-subtle', 'bg-opacity-25');
                            setTimeout(() => {
                                previewBox.classList.remove('border-primary', 'bg-primary-subtle', 'bg-opacity-25');
                            }, 1000);
                        }
                    });
                }

                // Bouton Insérer le texte
                const btnApplyText = document.getElementById('btn_apply_ai_text');
                if (btnApplyText) {
                    btnApplyText.addEventListener('click', function(e) {
                        if (e) e.preventDefault();
                        const textToApply = this.getAttribute('data-text') || '';
                        const inputTextEl = document.getElementById('insp_verified_signpanel_text');
                        if (inputTextEl) {
                            inputTextEl.value = textToApply;
                            inputTextEl.focus();
                            inputTextEl.dispatchEvent(new Event('input', { bubbles: true }));
                            inputTextEl.classList.add('border-success');
                            setTimeout(() => inputTextEl.classList.remove('border-success'), 1000);
                        }

                        const textBtnContainer = document.getElementById('ai_apply_text_btn_container');
                        if (textBtnContainer) {
                            textBtnContainer.innerHTML = `
                                <span class="badge bg-success py-1 px-2"><i class="bi bi-check2 me-1"></i>Inséré</span>
                            `;
                        }
                    });
                }

                // Ajout automatique de la photo à la liste globale de l'inspection si absente
                if (typeof window.addInspectionPhoto === 'function') {
                    window.addInspectionPhoto(file);
                }

            } else {
                aiBadgeContainer.innerHTML = `
                    <div class="alert alert-secondary p-2 mb-0 small">
                        <i class="bi bi-info-circle me-1"></i>Aucun panneau reconnu avec certitude sur cette image.
                    </div>
                `;
            }
        } catch (err) {
            if (aiSpinner) aiSpinner.classList.add('d-none');
            aiBadgeContainer.innerHTML = `
                <div class="alert alert-danger p-2 mb-0 small">
                    <i class="bi bi-exclamation-triangle me-1"></i>Erreur lors de l'analyse : ${err.message}
                </div>
            `;
        }
    }

    function openPhotoPickerModal(photos) {
        let modalEl = document.getElementById('signAiPhotoPickerModal');
        if (!modalEl) return;
        if (modalEl.parentElement !== document.body) {
            document.body.appendChild(modalEl);
        }

        const grid = document.getElementById('signAiPhotoPickerGrid');
        if (grid) {
            grid.innerHTML = '';
            photos.forEach((photo, idx) => {
                const col = document.createElement('div');
                col.className = 'col-6 col-sm-4';

                const card = document.createElement('div');
                card.className = 'card h-100 border shadow-xs text-center p-2 position-relative';
                card.style.cursor = 'pointer';
                card.style.transition = 'transform 0.15s ease, border-color 0.15s ease';
                card.onmouseover = () => { card.style.borderColor = '#0d6efd'; card.style.transform = 'scale(1.02)'; };
                card.onmouseout = () => { card.style.borderColor = '#dee2e6'; card.style.transform = 'scale(1)'; };

                const img = document.createElement('img');
                img.src = URL.createObjectURL(photo);
                img.className = 'rounded object-fit-cover w-100 mb-2';
                img.style.height = '100px';

                const title = document.createElement('div');
                title.className = 'fw-bold small text-truncate';
                title.textContent = `Photo ${idx + 1}`;

                const size = document.createElement('small');
                size.className = 'text-muted extra-small d-block';
                size.textContent = (photo.size / 1024).toFixed(0) + ' Ko';

                const btnSelect = document.createElement('button');
                btnSelect.type = 'button';
                btnSelect.className = 'btn btn-sm btn-primary w-100 mt-2 py-1';
                btnSelect.innerHTML = '<i class="bi bi-stars me-1"></i>Analyser';

                card.appendChild(img);
                card.appendChild(title);
                card.appendChild(size);
                card.appendChild(btnSelect);

                card.addEventListener('click', function() {
                    const pickerInstance = bootstrap.Modal.getInstance(modalEl);
                    if (pickerInstance) pickerInstance.hide();
                    runSignAiDetection(photo);
                });

                col.appendChild(card);
                grid.appendChild(col);
            });
        }

        const pickerBtnNew = document.getElementById('btn_picker_take_new');
        if (pickerBtnNew) {
            pickerBtnNew.onclick = function() {
                const pickerInstance = bootstrap.Modal.getInstance(modalEl);
                if (pickerInstance) pickerInstance.hide();
                aiFileInput.value = '';
                aiFileInput.click();
            };
        }

        const pickerModal = bootstrap.Modal.getOrCreateInstance(modalEl);
        pickerModal.show();
    }

    if (btnAIDetect) {
        btnAIDetect.addEventListener('click', function() {
            const photos = getAvailablePhotos();
            if (photos.length === 0) {
                aiFileInput.value = '';
                aiFileInput.click();
            } else if (photos.length === 1) {
                runSignAiDetection(photos[0]);
            } else {
                openPhotoPickerModal(photos);
            }
        });
    }

    if (btnPickExisting) {
        btnPickExisting.addEventListener('click', function(e) {
            e.preventDefault();
            const photos = getAvailablePhotos();
            if (photos.length === 0) {
                aiFileInput.value = '';
                aiFileInput.click();
            } else {
                openPhotoPickerModal(photos);
            }
        });
    }

    if (btnTakeNew) {
        btnTakeNew.addEventListener('click', function(e) {
            e.preventDefault();
            aiFileInput.value = '';
            aiFileInput.click();
        });
    }

    if (aiFileInput) {
        aiFileInput.addEventListener('change', function() {
            if (!this.files || !this.files.length) return;
            const file = this.files[0];
            if (typeof window.addInspectionPhoto === 'function') {
                window.addInspectionPhoto(file);
            }
            runSignAiDetection(file);
        });
    }
})();
</script>