{% extends "base.html" %}
{% load i18n static %}

{% block title %}{% translate "Banc de Test IA — Reconnaissance Signalisation & OCR" %}{% endblock %}

{% block head %}
<style>
    .ai-hero-card {
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1rem;
        color: #f8fafc;
    }
    .dropzone-box {
        border: 2px dashed #94a3b8;
        border-radius: 1rem;
        background: #f8fafc;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }
    .dropzone-box:hover, .dropzone-box.dragover {
        border-color: #2563eb;
        background: #eff6ff;
    }
    .panel-card {
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
        background: #ffffff;
    }
    .panel-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    }
    .panel-card.is-corrected {
        border-color: #f59e0b;
        background: #fffbeb;
    }
    .svg-sign-preview {
        width: 84px;
        height: 84px;
        object-fit: contain;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }
    .svg-sign-sm {
        width: 48px;
        height: 48px;
        object-fit: contain;
    }
    .perf-badge {
        font-family: monospace;
        font-size: 0.95rem;
    }
    .order-badge {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-weight: 700;
    }
    .sign-select-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
        gap: 0.75rem;
        max-height: 380px;
        overflow-y: auto;
    }
    .sign-select-item {
        border: 2px solid #e2e8f0;
        border-radius: 0.5rem;
        padding: 0.5rem;
        text-align: center;
        background: #ffffff;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }
    .sign-select-item:hover {
        border-color: #3b82f6;
        background: #eff6ff;
        transform: scale(1.03);
    }
    .sign-select-item.selected {
        border-color: #2563eb;
        background: #dbeafe;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
    }
    .alt-chip {
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }
    .alt-chip:hover {
        background-color: #e2e8f0 !important;
        transform: translateY(-1px);
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">

    <!-- En-tête / Hero -->
    <div class="ai-hero-card p-4 mb-4 shadow-sm">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div>
                <div class="d-flex align-items-center gap-2 mb-2">
                    <span class="badge bg-primary px-3 py-2 fs-6">
                        <i class="bi bi-cpu me-1"></i> YOLOv10-n + PaddleOCR (CPU ONNX)
                    </span>
                    <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">
                        <i class="bi bi-check-circle-fill me-1"></i> Phase 1 Opérationnelle
                    </span>
                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2 py-1" id="datasetHeaderBadge">
                        <i class="bi bi-database-check me-1"></i> <span id="hdrGtImages">{{ ground_truth_stats.total_images|default:"0" }}</span> photo(s) terrain enregistrée(s)
                    </span>
                </div>
                <h2 class="fw-bold mb-1">
                    <i class="bi bi-camera-fill text-warning me-2"></i>{% translate "Reconnaissance de Signalisation & OCR" %}
                </h2>
                <p class="text-slate-300 mb-0 opacity-75">
                    {% translate "Analyse instantanée des photos de terrain, correction interactive des panneaux et alimentation du dataset de vérité terrain pour l'apprentissage continu." %}
                </p>
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-warning btn-sm" onclick="showRetrainModal()">
                    <i class="bi bi-arrow-repeat me-1"></i>{% translate "Ré-entraîner Modèle" %}
                </button>
                <a href="{% url 'sign:index' %}" class="btn btn-outline-light btn-sm">
                    <i class="bi bi-arrow-left me-1"></i>{% translate "Retour à la Signalisation" %}
                </a>
            </div>
        </div>
    </div>

    <!-- Zone principale : Upload & Options -->
    <div class="row g-4 mb-4">
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm rounded-3 h-100">
                <div class="card-body p-4 d-flex flex-column">
                    <h5 class="fw-bold text-dark mb-3">
                        <i class="bi bi-upload text-primary me-2"></i>{% translate "Source de l'image" %}
                    </h5>

                    <!-- Dropzone -->
                    <div id="dropzone" class="dropzone-box p-4 text-center mb-3">
                        <input type="file" id="imageInput" accept="image/*" class="d-none" capture="environment">
                        <i class="bi bi-cloud-arrow-up display-4 text-primary mb-2 d-block"></i>
                        <h6 class="fw-bold mb-1">{% translate "Glissez une photo ou cliquez ici" %}</h6>
                        <p class="text-muted small mb-2">{% translate "JPG, PNG, WebP (Prise de vue directe ou fichier)" %}</p>
                        <div class="d-flex justify-content-center gap-2">
                            <button type="button" class="btn btn-primary btn-sm px-3" onclick="document.getElementById('imageInput').click()">
                                <i class="bi bi-folder2-open me-1"></i>{% translate "Parcourir" %}
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm px-3" id="btnCamera">
                                <i class="bi bi-camera me-1"></i>{% translate "Caméra" %}
                            </button>
                        </div>
                    </div>

                    <!-- Réglage du seuil -->
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <label for="confThreshold" class="form-label small fw-semibold text-muted mb-0">
                                {% translate "Seuil de confiance minimum" %}
                            </label>
                            <span id="confValue" class="badge bg-light text-dark border">0.25</span>
                        </div>
                        <input type="range" class="form-range" id="confThreshold" min="0.10" max="0.90" step="0.05" value="0.25">
                    </div>

                    <!-- Exemples rapides synthétiques -->
                    <div class="mt-auto pt-3 border-top">
                        <label class="form-label small fw-semibold text-muted mb-2">{% translate "Ou tester avec un exemple synthétique :" %}</label>
                        <div class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-outline-danger btn-sm" onclick="loadSyntheticExample('stop')">
                                <i class="bi bi-octagon-fill me-1"></i>STOP + Sauf riverains
                            </button>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="loadSyntheticExample('zone30')">
                                <i class="bi bi-speedometer2 me-1"></i>Zone 30
                            </button>
                            <button type="button" class="btn btn-outline-warning btn-sm" onclick="loadSyntheticExample('distance')">
                                <i class="bi bi-arrow-right me-1"></i>Panonceau 300 m
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Visualisation & Statut -->
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm rounded-3 h-100">
                <div class="card-body p-4 d-flex flex-column justify-content-center align-items-center text-center" id="emptyStateContainer">
                    <div class="py-5">
                        <i class="bi bi-image text-muted display-1 opacity-25 d-block mb-3"></i>
                        <h5 class="text-muted fw-bold">{% translate "Aucune image analysée pour le moment" %}</h5>
                        <p class="text-muted small max-w-sm mb-0">
                            {% translate "Importez une photo pour démarrer l'inférence YOLOv10-n et l'extraction OCR." %}
                        </p>
                    </div>
                </div>

                <!-- Indicateur de chargement -->
                <div class="d-none text-center py-5 my-auto" id="loadingContainer">
                    <div class="spinner-border text-primary mb-3" style="width: 3.5rem; height: 3.5rem;" role="status"></div>
                    <h5 class="fw-bold text-dark mb-1">{% translate "Analyse en cours..." %}</h5>
                    <p class="text-muted small mb-0">
                        {% translate "Exécution de YOLOv10-n (Détection) + RapidOCR (Lecture) sur CPU ONNX" %}
                    </p>
                </div>

                <!-- Résultat Image Annotée -->
                <div class="d-none w-100" id="imageResultContainer">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="fw-bold text-dark mb-0">
                            <i class="bi bi-bounding-box text-primary me-2"></i>{% translate "Image avec détections & Bounding Boxes" %}
                        </h6>
                        <span id="detectedBadge" class="badge bg-success">0 panneau(x)</span>
                    </div>
                    <div class="position-relative text-center bg-dark rounded-3 overflow-hidden p-2">
                        <img id="annotatedPreview" src="" alt="Détection" class="img-fluid rounded" style="max-height: 420px;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Section Résultats Détaillés & SVGs -->
    <div class="d-none" id="resultsSection">
        <!-- Métriques CPU -->
        <div class="row g-3 mb-4">
            <div class="col-md-4">
                <div class="card border-0 bg-primary bg-opacity-10 rounded-3 p-3 text-center">
                    <span class="text-muted small fw-semibold">Inférence YOLOv10-n (CPU)</span>
                    <h4 class="fw-bold text-primary mb-0" id="perfYolo">-- ms</h4>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 bg-info bg-opacity-10 rounded-3 p-3 text-center">
                    <span class="text-muted small fw-semibold">Inférence OCR RapidOCR (CPU)</span>
                    <h4 class="fw-bold text-info mb-0" id="perfOcr">-- ms</h4>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 bg-success bg-opacity-10 rounded-3 p-3 text-center">
                    <span class="text-muted small fw-semibold">Temps Total de Traitement</span>
                    <h4 class="fw-bold text-success mb-0" id="perfTotal">-- ms</h4>
                </div>
            </div>
        </div>

        <!-- Liste des panneaux reconnus avec SVG & Boutons de correction -->
        <div class="card border-0 shadow-sm rounded-3 mb-4">
            <div class="card-header bg-white py-3 border-0 d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div>
                    <h5 class="fw-bold text-dark mb-0">
                        <i class="bi bi-list-check text-primary me-2"></i>{% translate "Panneaux Identifiés & Corrections" %}
                    </h5>
                    <p class="text-muted small mb-0 mt-1">
                        {% translate "Vérifiez les détections. Cliquez sur 'Corriger ce panneau' pour rectifier le code officiel ou le panonceau si nécessaire." %}
                    </p>
                </div>
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="openAddPanelModal()">
                    <i class="bi bi-plus-circle me-1"></i>{% translate "Ajouter un panneau manqué" %}
                </button>
            </div>
            <div class="card-body p-4 pt-0">
                <div class="row g-3" id="panelsListContainer">
                    <!-- Rempli dynamiquement en JS -->
                </div>
            </div>
        </div>

        <!-- Carte d'Action : Apprentissage Actif & Vérité Terrain -->
        <div class="card border-0 shadow-sm rounded-3 mb-4 border-start border-4 border-success">
            <div class="card-body p-4">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                    <div>
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <span class="badge bg-success px-2 py-1">
                                <i class="bi bi-mortarboard-fill me-1"></i>{% translate "Apprentissage Actif (Active Learning)" %}
                            </span>
                            <span class="badge bg-light text-dark border" id="groundTruthCounterBadge">
                                <i class="bi bi-database me-1"></i><span id="gtImagesCount">{{ ground_truth_stats.total_images|default:"0" }}</span> photo(s) / <span id="gtCropsCount">{{ ground_truth_stats.total_crops|default:"0" }}</span> crop(s)
                            </span>
                        </div>
                        <h5 class="fw-bold text-dark mb-1">{% translate "Enregistrer cette photo comme Vérité Terrain" %}</h5>
                        <p class="text-muted small mb-0">
                            {% translate "Sauvegarde la photo et découpe automatiquement les panneaux validés pour les inclure dans les ré-entraînements du modèle." %}
                        </p>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <button type="button" class="btn btn-success btn-sm px-3" id="btnSaveGroundTruth" onclick="saveToGroundTruth()">
                            <i class="bi bi-save me-1"></i>{% translate "Enregistrer dans le Dataset" %}
                        </button>
                        <button type="button" class="btn btn-outline-dark btn-sm px-3" onclick="showRetrainModal()">
                            <i class="bi bi-cpu me-1"></i>{% translate "Ré-entraîner le modèle" %}
                        </button>
                    </div>
                </div>
                <div id="gtSuccessAlert" class="alert alert-success d-none mt-3 mb-0 py-2 d-flex align-items-center">
                    <i class="bi bi-check-circle-fill me-2 fs-5"></i>
                    <div>
                        <strong>{% translate "Enregistré avec succès !" %}</strong>
                        <span id="gtSuccessMessage">{% translate "Les découpes ont été ajoutées au dataset d'entraînement." %}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Payload JSON -->
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <span class="fw-semibold text-muted small">
                    <i class="bi bi-code-square me-1"></i>{% translate "Réponse API JSON (POST /sign/api/detect/)" %}
                </span>
                <button class="btn btn-outline-secondary btn-sm" onclick="copyJsonPayload()">
                    <i class="bi bi-clipboard me-1"></i>{% translate "Copier JSON" %}
                </button>
            </div>
            <div class="card-body p-0">
                <pre class="bg-dark text-light p-3 m-0 rounded-bottom small overflow-auto" style="max-height: 250px;" id="jsonPayload">{}</pre>
            </div>
        </div>
    </div>

</div>

<!-- Modal Interactive de Correction de Panneau -->
<div class="modal fade" id="signCorrectionModal" tabindex="-1" aria-labelledby="signCorrectionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg rounded-3">
            <div class="modal-header bg-dark text-white border-0 py-3">
                <div>
                    <h5 class="modal-title fw-bold" id="signCorrectionModalLabel">
                        <i class="bi bi-pencil-square text-warning me-2"></i>{% translate "Correction du Panneau" %}
                    </h5>
                    <p class="text-white-50 small mb-0" id="modalPanelSubtitle">{% translate "Sélectionnez dans le catalogue ou tapez directement le code officiel (ex: ZE9A, E1, C43...)." %}</p>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <!-- Saisie directe du Code -->
                <div class="p-3 bg-light rounded-3 border mb-3">
                    <label class="form-label small fw-bold text-dark text-uppercase mb-1">
                        <i class="bi bi-tag-fill text-primary me-1"></i>{% translate "Code Officiel du Panneau" %}
                    </label>
                    <div class="input-group input-group-lg">
                        <input type="text" class="form-control fw-bold font-monospace fs-4 text-primary text-uppercase" id="modalSelectedCode" placeholder="Ex: ZE9A, E1, C43, F4A..." autocomplete="off">
                        <button class="btn btn-primary px-4 fw-bold" type="button" id="btnApplyDirectCode" onclick="applyCorrectionFromModal()">
                            <i class="bi bi-check2-circle me-1"></i>{% translate "Appliquer ce code" %}
                        </button>
                    </div>
                    <div class="form-text small mt-1 text-muted">
                        <i class="bi bi-info-circle me-1"></i>{% translate "Vous pouvez entrer <strong>n'importe quel code directement</strong> (y compris les zones <strong>ZE9A</strong>, <strong>ZE1</strong>, <strong>F4A</strong>, panonceaux sur mesure, etc.), même si aucune image SVG n'existe." %}
                    </div>
                </div>

                <!-- Recherche rapide et filtre dans le catalogue -->
                <div class="mb-3">
                    <label class="form-label small fw-bold text-muted text-uppercase mb-1">
                        <i class="bi bi-search me-1"></i>{% translate "Ou chercher dans le catalogue officiel" %}
                    </label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
                        <input type="text" class="form-control border-start-0 ps-0" id="modalSearchInput" placeholder="Rechercher par code (ZE9A, E1, C43, B5...) ou par nom (zone, stationnement, priorité...)" autocomplete="off">
                        <button class="btn btn-outline-secondary" type="button" id="btnClearSearch" onclick="document.getElementById('modalSearchInput').value=''; filterCatalog();">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                </div>

                <!-- Bannière d'utilisation directe du texte cherché -->
                <div id="modalDirectCodeBanner" class="p-2 mb-3 bg-primary-subtle border border-primary-subtle rounded-3 d-flex align-items-center justify-content-between d-none">
                    <div>
                        <span class="small text-muted me-1">Code personnalisé :</span>
                        <strong class="font-monospace text-primary fs-5" id="modalDirectCodeValue">ZE9A</strong>
                    </div>
                    <button type="button" class="btn btn-sm btn-primary px-3" onclick="useTypedDirectCode()">
                        <i class="bi bi-arrow-right-circle me-1"></i>{% translate "Sélectionner ce code" %}
                    </button>
                </div>

                <!-- Filtres Catégories -->
                <div class="d-flex flex-wrap gap-1 mb-3" id="modalCategoryFilter">
                    <button type="button" class="btn btn-sm btn-primary active px-2 py-1 cat-filter-btn" data-cat="all">Tous</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary px-2 py-1 cat-filter-btn" data-cat="zone">Zones (Z)</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary px-2 py-1 cat-filter-btn" data-cat="parking">Stationnement (E)</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary px-2 py-1 cat-filter-btn" data-cat="prohibition">Interdiction (C)</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary px-2 py-1 cat-filter-btn" data-cat="obligation">Obligation (D)</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary px-2 py-1 cat-filter-btn" data-cat="priority">Priorité (B)</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary px-2 py-1 cat-filter-btn" data-cat="danger">Danger (A)</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary px-2 py-1 cat-filter-btn" data-cat="indication">Indication (F)</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary px-2 py-1 cat-filter-btn" data-cat="panonceau">Panonceaux (M/X/Type)</button>
                </div>

                <!-- Alternatives rapides (suggestions IA) -->
                <div class="mb-3 p-2 bg-light rounded-2 border" id="modalSuggestionsContainer">
                    <span class="small fw-semibold text-muted d-block mb-1">
                        <i class="bi bi-stars text-warning me-1"></i>{% translate "Suggestions rapides & alternatives :" %}
                    </span>
                    <div class="d-flex flex-wrap gap-2" id="modalSuggestionsChips">
                        <!-- Rempli en JS -->
                    </div>
                </div>

                <!-- Grille de sélection des panneaux -->
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <span class="small fw-semibold text-muted">{% translate "Catalogue officiel :" %}</span>
                        <span class="badge bg-light text-secondary border" id="modalMatchCount">0 résultat(s)</span>
                    </div>
                    <div class="sign-select-grid border rounded-3 p-2 bg-light" id="modalSignGrid">
                        <div class="text-center py-4 text-muted w-100">
                            <div class="spinner-border spinner-border-sm text-primary me-2"></div>
                            {% translate "Chargement du catalogue..." %}
                        </div>
                    </div>
                </div>

                <!-- Détails additionnels (OCR, Ordre) -->
                <div class="p-3 bg-light rounded-3 border">
                    <h6 class="fw-bold text-dark mb-2">
                        <i class="bi bi-sliders text-primary me-1"></i>{% translate "Propriétés additionnelles" %}
                    </h6>
                    <div class="row g-2">
                        <div class="col-md-8">
                            <label class="form-label small fw-semibold text-muted mb-1">{% translate "Texte OCR / Panonceau (facultatif)" %}</label>
                            <input type="text" class="form-control form-control-sm" id="modalSelectedOcrText" placeholder="Ex: Sauf riverains, 300 m, Disque...">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold text-muted mb-1">{% translate "Ordre sur le Mât (#1 = haut)" %}</label>
                            <input type="number" class="form-control form-control-sm" id="modalSelectedOrder" min="1" max="10" value="1">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-light border-0 py-3">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                <button type="button" class="btn btn-primary btn-sm px-4 fw-bold" onclick="applyCorrectionFromModal()">
                    <i class="bi bi-check-lg me-1"></i>{% translate "Appliquer la correction" %}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Ré-entraînement du Classifieur -->
<div class="modal fade" id="retrainModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-3">
            <div class="modal-header bg-dark text-white border-0 py-3">
                <h5 class="modal-title fw-bold">
                    <i class="bi bi-cpu text-warning me-2"></i>{% translate "Ré-entraînement du Modèle Neuronal" %}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <p class="text-muted small">
                    {% translate "Cette action va ré-entraîner le réseau MobileNetV3 sur l'ensemble des templates vectoriels en intégrant les crops de vérité terrain collectés, puis exporter un nouveau fichier ONNX actif." %}
                </p>
                <div class="mb-3">
                    <label class="form-label small fw-semibold text-muted mb-1">{% translate "Nombre d'époques d'entraînement" %}</label>
                    <input type="number" class="form-control" id="retrainEpochs" value="12" min="5" max="30">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold text-muted mb-1">{% translate "Échantillons synthétiques par classe" %}</label>
                    <input type="number" class="form-control" id="retrainSamples" value="50" min="10" max="150">
                    <div class="form-text text-muted" style="font-size:0.75rem;">{% translate "Recommandé : 50 à 100 variations avec reflets métalliques, contrastes et saturation étendus." %}</div>
                </div>
                <div id="retrainProgressContainer" class="d-none text-center py-3">
                    <div class="spinner-border text-primary mb-2" role="status"></div>
                    <p class="text-muted small mb-0" id="retrainProgressText">{% translate "Entraînement en cours (PyTorch / ONNX)..." %}</p>
                </div>
                <div id="retrainResultAlert" class="alert alert-success d-none mb-0 py-2 small"></div>
            </div>
            <div class="modal-footer bg-light border-0 py-3">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Fermer" %}</button>
                <button type="button" class="btn btn-success btn-sm px-3" id="btnStartRetrain" onclick="runRetraining()">
                    <i class="bi bi-play-fill me-1"></i>{% translate "Lancer l'entraînement" %}
                </button>
            </div>
        </div>
    </div>
</div>


<script>
    const i18n = {
        invalidImage: "{{ _('Veuillez sélectionner un fichier image valide.')|escapejs }}",
        errorProcessing: "{{ _('Erreur lors du traitement')|escapejs }}",
        networkError: "{{ _('Erreur réseau lors de l\'analyse IA')|escapejs }}",
        noPanelFound: "{{ _('Aucun panneau spécifique identifié.')|escapejs }}",
        jsonCopied: "{{ _('Payload JSON copié dans le presse-papier !')|escapejs }}",
        correctedBadge: "{{ _('Corrigé manuellement')|escapejs }}",
        savingGt: "{{ _('Enregistrement dans le dataset en cours...')|escapejs }}",
        savedGtSuccess: "{{ _('Photo et découpes enregistrées avec succès dans le dataset terrain !')|escapejs }}",
        retrainingStarted: "{{ _('Entraînement MobileNetV3 en cours...')|escapejs }}",
        retrainingSuccess: "{{ _('Modèle ré-entraîné et exporté en ONNX avec succès !')|escapejs }}",
    };

    let lastAnalysisResult = null;
    let currentEditingPanelId = null;
    let currentUploadedImageBytes = null;
    let currentUploadedImageBase64 = null;
    let signCatalog = [];
    let activeCategoryFilter = 'all';
    let correctionModalInstance = null;
    let retrainModalInstance = null;

    // Gestionnaire de secours en cas d'image/SVG indisponible
    function handleSignImgError(imgEl, code) {
        if (!imgEl || !imgEl.parentElement) return;
        const cleanCode = (code || '').toUpperCase().trim();
        const isZone = cleanCode.startsWith('Z');
        imgEl.parentElement.innerHTML = `
            <div class="d-flex flex-column align-items-center justify-content-center bg-primary-subtle text-primary border border-primary-subtle rounded p-1 text-center w-100 h-100">
                <span class="badge ${isZone ? 'bg-primary' : 'bg-secondary'} font-monospace" style="font-size:0.65rem;">${isZone ? 'ZONE' : 'CODE'}</span>
                <span class="font-monospace fw-bold mt-1 text-truncate" style="font-size:0.85rem; max-width: 80px;">${cleanCode || '?'}</span>
            </div>
        `;
    }

    // Helper pour rendu HTML robuste d'un panneau (avec fallback pour Zone/sans SVG)
    function renderSignVisualHtml(code, svgUrl, size = 'sm') {
        const cleanCode = (code || '').toUpperCase().trim();
        const isZone = cleanCode.startsWith('Z');

        if (!svgUrl) {
            return `
                <div class="d-flex flex-column align-items-center justify-content-center bg-primary-subtle text-primary border border-primary-subtle rounded p-1 text-center w-100 h-100">
                    <span class="badge ${isZone ? 'bg-primary' : 'bg-secondary'} font-monospace" style="font-size:0.65rem;">${isZone ? 'ZONE' : 'CODE'}</span>
                    <span class="font-monospace fw-bold mt-1 text-truncate" style="font-size:0.85rem; max-width: 80px;">${cleanCode || '?'}</span>
                </div>
            `;
        }

        const cls = size === 'lg' ? 'svg-sign-preview' : 'svg-sign-sm';
        return `<img src="${svgUrl}" alt="${cleanCode}" class="${cls}" onerror="handleSignImgError(this, '${cleanCode}')">`;
    }

    // Initialisation
    document.addEventListener('DOMContentLoaded', () => {
        const modalEl = document.getElementById('signCorrectionModal');
        if (modalEl && typeof bootstrap !== 'undefined') {
            correctionModalInstance = new bootstrap.Modal(modalEl);
        }
        const retrainEl = document.getElementById('retrainModal');
        if (retrainEl && typeof bootstrap !== 'undefined') {
            retrainModalInstance = new bootstrap.Modal(retrainEl);
        }

        // Pré-chargement du catalogue officiel
        loadSignCatalog();

        // Recherche en direct dans la modal
        const searchInput = document.getElementById('modalSearchInput');
        if (searchInput) {
            searchInput.addEventListener('input', () => filterCatalog());
            searchInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    useTypedDirectCode();
                }
            });
        }

        // Champ de code direct
        const codeInput = document.getElementById('modalSelectedCode');
        if (codeInput) {
            codeInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    applyCorrectionFromModal();
                }
            });
            codeInput.addEventListener('input', () => {
                const val = codeInput.value.trim().toUpperCase();
                document.querySelectorAll('.sign-select-item').forEach(el => el.classList.remove('selected'));
                const opt = document.getElementById(`sign-opt-${val}`);
                if (opt) opt.classList.add('selected');
            });
        }

        // Filtres par catégories
        document.querySelectorAll('.cat-filter-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                document.querySelectorAll('.cat-filter-btn').forEach(b => {
                    b.classList.remove('btn-primary', 'active');
                    b.classList.add('btn-outline-secondary');
                });
                btn.classList.remove('btn-outline-secondary');
                btn.classList.add('btn-primary', 'active');
                activeCategoryFilter = btn.dataset.cat || 'all';
                filterCatalog();
            });
        });
    });

    // Chargement du catalogue complet via l'API
    function loadSignCatalog() {
        fetch("{% url 'sign:api_catalog' %}")
            .then(res => res.json())
            .then(data => {
                if (data.signs) {
                    signCatalog = data.signs;
                    filterCatalog();
                }
            })
            .catch(err => console.warn("Erreur chargement catalogue :", err));
    }

    function filterCatalog() {
        const grid = document.getElementById('modalSignGrid');
        if (!grid) return;

        const q = (document.getElementById('modalSearchInput')?.value || '').trim().toLowerCase();
        const countBadge = document.getElementById('modalMatchCount');
        const directBanner = document.getElementById('modalDirectCodeBanner');
        const directVal = document.getElementById('modalDirectCodeValue');

        // Gestion de la bannière directe
        if (q && q.length >= 2) {
            if (directBanner) directBanner.classList.remove('d-none');
            if (directVal) directVal.textContent = q.toUpperCase();
        } else {
            if (directBanner) directBanner.classList.add('d-none');
        }

        const filtered = signCatalog.filter(s => {
            const codeLower = (s.code || '').toLowerCase();
            const catLower = (s.category || '').toLowerCase();

            if (activeCategoryFilter !== 'all') {
                if (activeCategoryFilter === 'zone') {
                    const isZone = catLower === 'zone' || codeLower.startsWith('z') || codeLower.startsWith('f4') || codeLower.startsWith('f103') || codeLower.startsWith('f105') || codeLower.startsWith('f12');
                    if (!isZone) return false;
                } else if (activeCategoryFilter === 'parking') {
                    const isParking = catLower === 'parking' || codeLower.startsWith('e') || codeLower.startsWith('ze') || codeLower.startsWith('g');
                    if (!isParking) return false;
                } else if (catLower !== activeCategoryFilter) {
                    return false;
                }
            }

            if (q) {
                const codeMatch = codeLower.includes(q);
                const frMatch = (s.name_fr || '').toLowerCase().includes(q);
                const nlMatch = (s.name_nl || '').toLowerCase().includes(q);
                return codeMatch || frMatch || nlMatch;
            }
            return true;
        });

        if (countBadge) {
            countBadge.textContent = `${filtered.length} panneau(x)`;
        }

        if (filtered.length === 0) {
            grid.innerHTML = `
                <div class="text-center py-4 text-muted w-100">
                    <p class="mb-2"><i class="bi bi-info-circle me-1"></i>Aucun panneau graphique exact dans la sélection.</p>
                    ${q ? `<button type="button" class="btn btn-outline-primary btn-sm px-3" onclick="useTypedDirectCode()"><i class="bi bi-check-circle me-1"></i>Utiliser directement le code <strong>"${q.toUpperCase()}"</strong></button>` : ''}
                </div>
            `;
            return;
        }

        const currentSelectedCode = (document.getElementById('modalSelectedCode')?.value || '').trim().toUpperCase();
        grid.innerHTML = '';

        filtered.slice(0, 150).forEach(s => {
            const isSelected = s.code === currentSelectedCode;
            const item = document.createElement('div');
            item.className = `sign-select-item ${isSelected ? 'selected' : ''}`;
            item.id = `sign-opt-${s.code}`;
            item.onclick = () => selectSignFromGrid(s.code, s.name_fr, s.name_nl, s.svg_url);

            item.innerHTML = `
                <div class="d-flex align-items-center justify-content-center mb-1" style="height: 52px;">
                    ${renderSignVisualHtml(s.code, s.svg_url, 'sm')}
                </div>
                <div class="fw-bold small font-monospace text-primary text-truncate">${s.code}</div>
                <div class="text-muted text-truncate" style="font-size: 0.72rem;" title="${s.name_fr || ''}">${s.name_fr || s.name_nl || ''}</div>
            `;
            grid.appendChild(item);
        });
    }

    function useTypedDirectCode() {
        const q = (document.getElementById('modalSearchInput')?.value || '').trim().toUpperCase();
        if (q) {
            const match = signCatalog.find(s => s.code.toUpperCase() === q);
            selectSignFromGrid(q, match?.name_fr || `Panneau ${q}`, match?.name_nl || `Verkeersbord ${q}`, match?.svg_url || `/static/assets/road_signs/2025/${q}.svg`);
        }
    }

    function selectSignFromGrid(code, nameFr, nameNl, svgUrl) {
        document.querySelectorAll('.sign-select-item').forEach(el => el.classList.remove('selected'));
        const opt = document.getElementById(`sign-opt-${code}`);
        if (opt) opt.classList.add('selected');

        const codeInput = document.getElementById('modalSelectedCode');
        if (codeInput) {
            codeInput.value = code;
            codeInput.focus();
        }
    }

    // Gestion du slider de confiance
    const confSlider = document.getElementById('confThreshold');
    const confVal = document.getElementById('confValue');
    if (confSlider && confVal) {
        confSlider.addEventListener('input', () => {
            confVal.textContent = parseFloat(confSlider.value).toFixed(2);
        });
    }

    // Dropzone events
    const dropzone = document.getElementById('dropzone');
    const imageInput = document.getElementById('imageInput');

    if (dropzone && imageInput) {
        dropzone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropzone.classList.add('dragover');
        });
        dropzone.addEventListener('dragleave', () => dropzone.classList.remove('dragover'));
        dropzone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropzone.classList.remove('dragover');
            if (e.dataTransfer.files.length > 0) {
                processFile(e.dataTransfer.files[0]);
            }
        });
        imageInput.addEventListener('change', () => {
            if (imageInput.files.length > 0) {
                processFile(imageInput.files[0]);
            }
        });

        const btnCamera = document.getElementById('btnCamera');
        if (btnCamera) {
            btnCamera.addEventListener('click', () => imageInput.click());
        }
    }

    function processFile(file) {
        if (!file.type.startsWith('image/')) {
            alert(i18n.invalidImage);
            return;
        }

        currentUploadedFile = file;
        const reader = new FileReader();
        reader.onload = (e) => {
            currentUploadedImageBase64 = e.target.result;
        };
        reader.readAsDataURL(file);

        const formData = new FormData();
        formData.append('image', file);
        formData.append('confidence_threshold', confSlider ? confSlider.value : 0.25);
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

        runAnalysis(formData);
    }

    function runAnalysis(formData) {
        showLoading(true);
        const gtAlert = document.getElementById('gtSuccessAlert');
        if (gtAlert) gtAlert.classList.add('d-none');

        fetch("{% url 'sign:ai_demo' %}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(async response => {
            const data = await response.json().catch(() => ({}));
            if (!response.ok) {
                const errMsg = data.message || data.detail || `Erreur HTTP ${response.status}`;
                throw new Error(errMsg);
            }
            return data;
        })
        .then(data => {
            showLoading(false);
            if (data.status === 'success') {
                lastAnalysisResult = data;
                renderResults(data);
            } else {
                alert(data.message || i18n.errorProcessing);
            }
        })
        .catch(err => {
            showLoading(false);
            console.error(err);
            alert(err.message || i18n.networkError);
        });
    }

    function showLoading(isLoading) {
        const emptyState = document.getElementById('emptyStateContainer');
        const loading = document.getElementById('loadingContainer');
        const imgResult = document.getElementById('imageResultContainer');

        if (isLoading) {
            if (emptyState) emptyState.classList.add('d-none');
            if (imgResult) imgResult.classList.add('d-none');
            if (loading) loading.classList.remove('d-none');
        } else {
            if (loading) loading.classList.add('d-none');
        }
    }

    function renderResults(data) {
        lastAnalysisResult = data;
        const imgResult = document.getElementById('imageResultContainer');
        const resultsSec = document.getElementById('resultsSection');
        if (imgResult) imgResult.classList.remove('d-none');
        if (resultsSec) resultsSec.classList.remove('d-none');

        // Image annotée
        const annotatedImg = document.getElementById('annotatedPreview');
        if (annotatedImg) annotatedImg.src = data.annotated_image;

        const badge = document.getElementById('detectedBadge');
        if (badge) badge.textContent = `${data.detected_count || data.panels?.length || 0} panneau(x) détecté(s)`;

        // Performances
        if (data.performance) {
            const pYolo = document.getElementById('perfYolo');
            const pOcr = document.getElementById('perfOcr');
            const pTotal = document.getElementById('perfTotal');
            if (pYolo) pYolo.textContent = `${data.performance.yolo_inference_ms} ms`;
            if (pOcr) pOcr.textContent = `${data.performance.ocr_inference_ms} ms`;
            if (pTotal) pTotal.textContent = `${data.performance.total_processing_ms} ms`;
        }

        // JSON
        const jsonPre = document.getElementById('jsonPayload');
        if (jsonPre) jsonPre.textContent = JSON.stringify(data, null, 2);

        // Cartes de panneaux
        const container = document.getElementById('panelsListContainer');
        if (!container) return;
        container.innerHTML = '';

        if (!data.panels || data.panels.length === 0) {
            container.innerHTML = '<div class="col-12 text-center text-muted py-3">' + i18n.noPanelFound + '</div>';
            return;
        }

        data.panels.forEach((p, idx) => {
            const confPct = Math.round((p.confidence || 0) * 100);
            const confColor = confPct >= 75 ? 'bg-success' : (confPct >= 50 ? 'bg-warning' : 'bg-secondary');
            const svgSrc = p.svg_url || '';
            const wasCorrected = Boolean(p.was_corrected);

            const matchBadge = wasCorrected
                ? '<span class="badge bg-warning text-dark px-2 py-1 shadow-sm"><i class="bi bi-pencil-fill me-1"></i>Corrigé manuellement</span>'
                : (p.matched_by === 'ai_neural_classifier' 
                    ? '<span class="badge bg-primary-subtle text-primary border border-primary-subtle small"><i class="bi bi-cpu me-1"></i>Modèle IA Neuronal</span>'
                    : (p.matched_by && (p.matched_by.startsWith('text_') || p.matched_by === 'ocr_text')
                        ? '<span class="badge bg-success-subtle text-success border border-success-subtle small"><i class="bi bi-fonts me-1"></i>Reconnaissance OCR</span>'
                        : '<span class="badge bg-secondary-subtle text-secondary border small"><i class="bi bi-eye me-1"></i>Analyse Visuelle</span>'));

            let topMatchesHtml = '';
            if (p.top_matches && p.top_matches.length > 1) {
                const altList = p.top_matches.slice(0, 4).map(m => `
                    <span class="badge bg-light text-dark border alt-chip me-1 mb-1 p-1" title="Appliquer ${m.code}" onclick="quickApplyAlternative(${p.id || idx + 1}, '${m.code}')">
                        <i class="bi bi-arrow-right-short text-primary"></i> ${m.code} (${Math.round(m.confidence * 100)}%)
                    </span>
                `).join('');
                topMatchesHtml = `
                    <div class="mt-2 pt-2 border-top small">
                        <span class="text-muted fw-semibold me-1">Alternatives IA rapides (cliquez pour appliquer) :</span>
                        <div class="d-inline-flex flex-wrap gap-1 mt-1">${altList}</div>
                    </div>
                `;
            }

            const card = document.createElement('div');
            card.className = 'col-lg-6';
            card.innerHTML = `
                <div class="panel-card p-3 h-100 d-flex flex-column ${wasCorrected ? 'is-corrected' : ''}" id="panel-card-${p.id || idx + 1}">
                    <div class="d-flex align-items-start gap-3">
                        <div class="text-center">
                            <span class="order-badge bg-primary text-white mb-2 shadow-sm">
                                #${p.vertical_order || idx + 1}
                            </span>
                            <div class="p-2 bg-light rounded-3 border d-flex align-items-center justify-content-center shadow-sm" style="width: 90px; height: 90px;">
                                ${renderSignVisualHtml(p.code, p.svg_url, 'lg')}
                            </div>
                            <span class="badge ${wasCorrected ? 'bg-warning text-dark' : 'bg-dark'} mt-2 fs-6 px-2 py-1">${p.code || 'Inconnu'}</span>
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start mb-1">
                                <h6 class="fw-bold text-dark mb-0">${p.name_fr || p.name_nl || 'Panneau détecté'}</h6>
                                <span class="badge ${confColor} px-2 py-1">${confPct}%</span>
                            </div>
                            <div class="mb-2 d-flex flex-wrap gap-1 align-items-center">
                                ${matchBadge}
                                ${p.name_nl ? `<span class="text-muted small fst-italic ms-1">${p.name_nl}</span>` : ''}
                            </div>

                            <!-- Texte OCR / Panonceau -->
                            ${p.ocr_text ? `
                                <div class="p-2 bg-light rounded-2 border border-secondary-subtle mb-2">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <span class="small fw-semibold text-secondary">
                                            <i class="bi bi-fonts me-1"></i>Texte OCR extrait :
                                        </span>
                                    </div>
                                    <div class="fw-bold text-dark font-monospace mt-1">"${p.ocr_text}"</div>
                                </div>
                            ` : ''}

                            <!-- Position verticale -->
                            <div class="small text-muted mb-2">
                                <i class="bi bi-arrows-move me-1"></i>Position : <strong>#${p.vertical_order || idx + 1} sur le mât</strong>
                            </div>

                            ${topMatchesHtml}

                            <!-- Bouton de correction interactive -->
                            <div class="mt-auto pt-2 d-flex justify-content-end">
                                <button type="button" class="btn btn-outline-primary btn-sm px-3 shadow-sm" onclick="openCorrectionModal(${p.id || idx + 1})">
                                    <i class="bi bi-pencil-square me-1"></i>{% translate "Corriger ce panneau" %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            container.appendChild(card);
        });
    }

    // Modal de Correction Interactive
    function openCorrectionModal(panelId) {
        if (!lastAnalysisResult || !lastAnalysisResult.panels) return;
        currentEditingPanelId = panelId;

        const panel = lastAnalysisResult.panels.find((p, i) => (p.id || i + 1) === panelId);
        if (!panel) return;

        const subtitle = document.getElementById('modalPanelSubtitle');
        if (subtitle) {
            subtitle.textContent = `Panneau #${panel.vertical_order || panelId} (actuellement identifié comme : ${panel.code || 'Inconnu'})`;
        }

        const codeInput = document.getElementById('modalSelectedCode');
        const ocrInput = document.getElementById('modalSelectedOcrText');
        const orderInput = document.getElementById('modalSelectedOrder');

        if (codeInput) codeInput.value = panel.code || '';
        if (ocrInput) ocrInput.value = panel.ocr_text || '';
        if (orderInput) orderInput.value = panel.vertical_order || panelId;

        // Suggestions rapides
        const chipsContainer = document.getElementById('modalSuggestionsChips');
        if (chipsContainer) {
            chipsContainer.innerHTML = '';
            const suggCodes = [];
            if (panel.top_matches) {
                panel.top_matches.forEach(m => suggCodes.push(m.code));
            }
            // Ajouter les panneaux fréquents de confusion (ex: E1, ZE9A, D1B, C43, B5, XD)
            ['E1', 'ZE9A', 'D1B', 'C43', 'B5', 'XD', 'C1'].forEach(c => {
                if (!suggCodes.includes(c)) suggCodes.push(c);
            });

            suggCodes.slice(0, 6).forEach(code => {
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'btn btn-outline-primary btn-sm px-2 py-1';
                btn.innerHTML = `<strong>${code}</strong>`;
                btn.onclick = () => {
                    const match = signCatalog.find(s => s.code === code);
                    selectSignFromGrid(code, match?.name_fr || code, match?.name_nl || '', match?.svg_url || `/static/assets/road_signs/2025/${code}.svg`);
                };
                chipsContainer.appendChild(btn);
            });
        }

        filterCatalog();
        if (correctionModalInstance) {
            correctionModalInstance.show();
        } else {
            const modalEl = document.getElementById('signCorrectionModal');
            if (modalEl && typeof bootstrap !== 'undefined') {
                correctionModalInstance = new bootstrap.Modal(modalEl);
                correctionModalInstance.show();
            }
        }
    }

    function quickApplyAlternative(panelId, newCode) {
        if (!lastAnalysisResult || !lastAnalysisResult.panels) return;
        const panel = lastAnalysisResult.panels.find((p, i) => (p.id || i + 1) === panelId);
        if (!panel) return;

        const catItem = signCatalog.find(s => s.code === newCode) || {};
        const isZone = newCode.startsWith('Z');
        panel.initial_code = panel.initial_code || panel.code;
        panel.code = newCode;
        panel.name_fr = catItem.name_fr || (isZone ? `Panneau de zone ${newCode}` : `Panneau ${newCode}`);
        panel.name_nl = catItem.name_nl || (isZone ? `Zonebord ${newCode}` : `Verkeersbord ${newCode}`);
        panel.svg_url = catItem.svg_url || `/static/assets/road_signs/2025/${newCode}.svg`;
        panel.was_corrected = true;
        panel.confidence = 1.0;
        panel.matched_by = "user_manual_correction";

        renderResults(lastAnalysisResult);
    }

    function applyCorrectionFromModal() {
        if (!lastAnalysisResult || !lastAnalysisResult.panels || currentEditingPanelId === null) return;
        const panel = lastAnalysisResult.panels.find((p, i) => (p.id || i + 1) === currentEditingPanelId);
        if (!panel) return;

        const newCode = (document.getElementById('modalSelectedCode')?.value || '').trim().toUpperCase();
        const newOcr = (document.getElementById('modalSelectedOcrText')?.value || '').trim();
        const newOrder = parseInt(document.getElementById('modalSelectedOrder')?.value || panel.vertical_order || 1, 10);

        if (!newCode) {
            alert("Veuillez saisir ou sélectionner un code officiel de panneau (ex: ZE9A, E1, C43...).");
            return;
        }

        const catItem = signCatalog.find(s => s.code.toUpperCase() === newCode) || {};
        const isZone = newCode.startsWith('Z');
        panel.initial_code = panel.initial_code || panel.code;
        panel.code = newCode;
        panel.name_fr = catItem.name_fr || (isZone ? `Panneau de zone ${newCode}` : `Panneau ${newCode}`);
        panel.name_nl = catItem.name_nl || (isZone ? `Zonebord ${newCode}` : `Verkeersbord ${newCode}`);
        panel.svg_url = catItem.svg_url || `/static/assets/road_signs/2025/${newCode}.svg`;
        panel.ocr_text = newOcr;
        panel.signpanel_text = newOcr;
        panel.vertical_order = newOrder;
        panel.was_corrected = true;
        panel.confidence = 1.0;
        panel.matched_by = "user_manual_correction";

        // Réordonner les panneaux selon l'ordre vertical
        lastAnalysisResult.panels.sort((a, b) => (a.vertical_order || 1) - (b.vertical_order || 1));

        if (correctionModalInstance) {
            correctionModalInstance.hide();
        }

        renderResults(lastAnalysisResult);
    }

    function openAddPanelModal() {
        if (!lastAnalysisResult) {
            lastAnalysisResult = { panels: [], detected_count: 0, status: "success" };
        }
        if (!lastAnalysisResult.panels) lastAnalysisResult.panels = [];

        const newId = lastAnalysisResult.panels.length + 1;
        const newPanel = {
            id: newId,
            code: "E1",
            name_fr: "Stationnement interdit (E1)",
            name_nl: "Parkeerverbod (E1)",
            category: "parking",
            svg_url: "/static/assets/road_signs/2025/E1.svg",
            confidence: 1.0,
            was_corrected: true,
            matched_by: "user_manual_add",
            bbox: [50, 50, 200, 200],
            vertical_order: newId,
            ocr_text: "",
        };
        lastAnalysisResult.panels.push(newPanel);
        lastAnalysisResult.detected_count = lastAnalysisResult.panels.length;
        renderResults(lastAnalysisResult);
        openCorrectionModal(newId);
    }

    // Sauvegarde dans le dataset de vérité terrain
    function saveToGroundTruth() {
        if (!lastAnalysisResult || !lastAnalysisResult.panels || lastAnalysisResult.panels.length === 0) {
            alert("Aucun résultat de panneau à enregistrer.");
            return;
        }

        const btnSave = document.getElementById('btnSaveGroundTruth');
        if (btnSave) {
            btnSave.disabled = true;
            btnSave.innerHTML = `<span class="spinner-border spinner-border-sm me-1"></span> ${i18n.savingGt}`;
        }

        const formData = new FormData();
        if (currentUploadedFile) {
            formData.append('image', currentUploadedFile);
        } else if (imageInput && imageInput.files.length > 0) {
            formData.append('image', imageInput.files[0]);
        } else if (currentUploadedImageBase64) {
            formData.append('image_base64', currentUploadedImageBase64);
        } else if (lastAnalysisResult.annotated_image) {
            formData.append('image_base64', lastAnalysisResult.annotated_image);
        }

        formData.append('panels', JSON.stringify(lastAnalysisResult.panels));
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

        fetch("{% url 'sign:api_ground_truth' %}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(async res => {
            const data = await res.json().catch(() => ({}));
            if (!res.ok) {
                const errMsg = data.message || data.detail || (data.status === 'error' ? data.message : `Erreur serveur (${res.status})`);
                throw new Error(errMsg);
            }
            return data;
        })
        .then(data => {
            if (btnSave) {
                btnSave.disabled = false;
                btnSave.innerHTML = `<i class="bi bi-check-circle me-1"></i> {% translate "Enregistré !" %}`;
            }

            if (data.status === 'success') {
                const alertEl = document.getElementById('gtSuccessAlert');
                const msgEl = document.getElementById('gtSuccessMessage');
                if (alertEl) alertEl.classList.remove('d-none');
                if (msgEl) {
                    msgEl.textContent = `Photo #${data.sample_id} et ${data.crops_saved} découpe(s) enregistrées dans le dataset. Total: ${data.stats.total_images} photos (${data.stats.total_crops} crops).`;
                }

                // Mise à jour des compteurs sur la page
                const imgCount = document.getElementById('gtImagesCount');
                const cropCount = document.getElementById('gtCropsCount');
                const hdrCount = document.getElementById('hdrGtImages');
                if (imgCount) imgCount.textContent = data.stats.total_images;
                if (cropCount) cropCount.textContent = data.stats.total_crops;
                if (hdrCount) hdrCount.textContent = data.stats.total_images;
            } else {
                alert(data.message || i18n.errorProcessing);
            }
        })
        .catch(err => {
            if (btnSave) {
                btnSave.disabled = false;
                btnSave.innerHTML = `<i class="bi bi-save me-1"></i> {% translate "Enregistrer dans le Dataset" %}`;
            }
            console.error(err);
            alert(err.message || i18n.networkError);
        });
    }

    // Ré-entraînement du modèle
    function showRetrainModal() {
        if (retrainModalInstance) {
            retrainModalInstance.show();
        } else {
            const modalEl = document.getElementById('retrainModal');
            if (modalEl && typeof bootstrap !== 'undefined') {
                retrainModalInstance = new bootstrap.Modal(modalEl);
                retrainModalInstance.show();
            }
        }
    }

    function runRetraining() {
        const btn = document.getElementById('btnStartRetrain');
        const progContainer = document.getElementById('retrainProgressContainer');
        const alertEl = document.getElementById('retrainResultAlert');
        const epochs = document.getElementById('retrainEpochs')?.value || 12;
        const samples = document.getElementById('retrainSamples')?.value || 15;

        if (btn) btn.disabled = true;
        if (progContainer) progContainer.classList.remove('d-none');
        if (alertEl) alertEl.classList.add('d-none');

        const formData = new FormData();
        formData.append('epochs', epochs);
        formData.append('samples_per_class', samples);
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

        fetch("{% url 'sign:api_retrain' %}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(async res => {
            const data = await res.json().catch(() => ({}));
            if (!res.ok) {
                const errMsg = data.message || data.detail || `Erreur (${res.status})`;
                throw new Error(errMsg);
            }
            return data;
        })
        .then(data => {
            if (btn) btn.disabled = false;
            if (progContainer) progContainer.classList.add('d-none');

            if (data.status === 'success' || data.accuracy !== undefined) {
                if (alertEl) {
                    alertEl.className = 'alert alert-success mt-3 py-2 small';
                    alertEl.innerHTML = `
                        <strong><i class="bi bi-check-circle-fill me-1"></i>Ré-entraînement terminé !</strong><br>
                        • Classes : <strong>${data.num_classes}</strong><br>
                        • Précision : <strong>${data.accuracy}%</strong><br>
                        • Durée : <strong>${data.training_time_seconds || '?'} s</strong><br>
                        Le nouveau modèle ONNX est immédiatement actif.
                    `;
                    alertEl.classList.remove('d-none');
                }
            } else {
                if (alertEl) {
                    alertEl.className = 'alert alert-danger mt-3 py-2 small';
                    alertEl.textContent = data.message || "Erreur lors de l'entraînement.";
                    alertEl.classList.remove('d-none');
                }
            }
        })
        .catch(err => {
            if (btn) btn.disabled = false;
            if (progContainer) progContainer.classList.add('d-none');
            console.error(err);
            if (alertEl) {
                alertEl.className = 'alert alert-danger mt-3 py-2 small';
                alertEl.textContent = err.message || "Erreur réseau lors de la communication avec le serveur.";
                alertEl.classList.remove('d-none');
            }
        });
    }

    function copyJsonPayload() {
        if (!lastAnalysisResult) return;
        navigator.clipboard.writeText(JSON.stringify(lastAnalysisResult, null, 2))
            .then(() => alert(i18n.jsonCopied));
    }

    // Exemples synthétiques
    function loadSyntheticExample(type) {
        const canvas = document.getElementById('synthCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#f1f5f9';
        ctx.fillRect(0, 0, 600, 600);

        if (type === 'stop') {
            ctx.fillStyle = '#dc2626';
            ctx.beginPath();
            ctx.arc(300, 200, 100, 0, Math.PI * 2);
            ctx.fill();
            ctx.fillStyle = '#ffffff';
            ctx.font = 'bold 44px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('STOP', 300, 215);

            ctx.fillStyle = '#ffffff';
            ctx.fillRect(160, 370, 280, 90);
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 3;
            ctx.strokeRect(160, 370, 280, 90);
            ctx.fillStyle = '#000000';
            ctx.font = 'bold 24px Arial';
            ctx.fillText('Sauf riverains', 300, 425);
        } else if (type === 'zone30') {
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(150, 100, 300, 400);
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 4;
            ctx.strokeRect(150, 100, 300, 400);

            ctx.fillStyle = '#000000';
            ctx.font = 'bold 36px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('ZONE', 300, 170);

            ctx.fillStyle = '#dc2626';
            ctx.beginPath();
            ctx.arc(300, 300, 90, 0, Math.PI * 2);
            ctx.fill();
            ctx.fillStyle = '#ffffff';
            ctx.beginPath();
            ctx.arc(300, 300, 72, 0, Math.PI * 2);
            ctx.fill();
            ctx.fillStyle = '#000000';
            ctx.font = 'bold 64px Arial';
            ctx.fillText('30', 300, 322);
        } else if (type === 'distance') {
            ctx.fillStyle = '#ffffff';
            ctx.beginPath();
            ctx.moveTo(150, 120);
            ctx.lineTo(450, 120);
            ctx.lineTo(300, 350);
            ctx.closePath();
            ctx.fill();
            ctx.strokeStyle = '#dc2626';
            ctx.lineWidth = 14;
            ctx.stroke();

            ctx.fillStyle = '#ffffff';
            ctx.fillRect(180, 400, 240, 90);
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 3;
            ctx.strokeRect(180, 400, 240, 90);
            ctx.fillStyle = '#000000';
            ctx.font = 'bold 32px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('300 m', 300, 455);
        }

        const dataUrl = canvas.toDataURL('image/jpeg', 0.9);
        currentUploadedImageBase64 = dataUrl;

        const formData = new FormData();
        formData.append('image_base64', dataUrl);
        formData.append('confidence_threshold', confSlider ? confSlider.value : 0.25);
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

        runAnalysis(formData);
    }
</script>
{% endblock %}