{% 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;
        background: #ffffff;
    }
    .panel-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    }
    .svg-sign-preview {
        width: 84px;
        height: 84px;
        object-fit: contain;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }
    .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;
    }
</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>
                </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 : détection des panneaux, extraction du texte des panonceaux, ordonnancement vertical et visualisation SVG." %}
                </p>
            </div>
            <div>
                <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 -->
        <div class="card border-0 shadow-sm rounded-3 mb-4">
            <div class="card-header bg-white py-3 border-0">
                <h5 class="fw-bold text-dark mb-0">
                    <i class="bi bi-list-check text-primary me-2"></i>{% translate "Panneaux Identifiés & Suggestions" %}
                </h5>
            </div>
            <div class="card-body p-4 pt-0">
                <div class="row g-3" id="panelsListContainer">
                    <!-- Rempli dynamiquement en JS -->
                </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>

<!-- Canvas invisible pour générer les exemples synthétiques -->
<canvas id="synthCanvas" width="600" height="600" class="d-none"></canvas>

<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 }}",
    };

    let lastAnalysisResult = null;

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

    // Dropzone events
    const dropzone = document.getElementById('dropzone');
    const imageInput = document.getElementById('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]);
        }
    });

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

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

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

        runAnalysis(formData);
    }

    function runAnalysis(formData) {
        showLoading(true);

        fetch("{% url 'sign:ai_demo' %}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            showLoading(false);
            if (data.status === 'success') {
                renderResults(data);
            } else {
                alert(data.message || i18n.errorProcessing);
            }
        })
        .catch(err => {
            showLoading(false);
            console.error(err);
            alert(i18n.networkError);
        });
    }

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

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

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

        // Image annotée
        document.getElementById('annotatedPreview').src = data.annotated_image;
        document.getElementById('detectedBadge').textContent = `${data.detected_count} panneau(x) détecté(s)`;

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

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

        // Cartes de panneaux
        const container = document.getElementById('panelsListContainer');
        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 => {
            const confPct = Math.round(p.confidence * 100);
            const confColor = confPct >= 75 ? 'bg-success' : (confPct >= 50 ? 'bg-warning' : 'bg-secondary');
            const svgSrc = p.svg_url || '';

            const matchBadge = 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.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(1, 4).map(m => `
                    <span class="badge bg-light text-dark border me-1" title="Confiance : ${(m.confidence * 100).toFixed(1)}%">
                        ${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 candidates :</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">
                    <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}
                            </span>
                            <div class="p-2 bg-light rounded-3 border d-flex align-items-center justify-content-center" style="width: 90px; height: 90px;">
                                ${svgSrc ? `<img src="${svgSrc}" alt="${p.code}" class="svg-sign-preview" onerror="this.onerror=null; this.parentElement.innerHTML='<i class=\\'bi bi-signpost-2 fs-1 text-secondary\\'></i>';">` : `<i class="bi bi-signpost-2 fs-1 text-secondary"></i>`}
                            </div>
                            <span class="badge bg-dark mt-2">${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>
                            ` : ''}

                            <!-- Valeur numérique -->
                            ${p.signpanel_value !== null && p.signpanel_value !== undefined ? `
                                <div class="small mb-1">
                                    <span class="text-muted fw-semibold">Valeur / Distance :</span>
                                    <span class="badge bg-info-subtle text-info-emphasis fw-bold">${p.signpanel_value}</span>
                                </div>
                            ` : ''}

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

                            ${topMatchesHtml}
                        </div>
                    </div>
                </div>
            `;
            container.appendChild(card);
        });
    }

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

    // Génération d'exemples synthétiques pour tests immédiats sans photo réelle
    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') {
            // Cercle 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);

            // Panonceau Sauf riverains
            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') {
            // Rectangle Zone 30
            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);

            // Cercle rouge
            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') {
            // Panneau Cédez le passage
            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();

            // Panonceau 300 m
            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);
        const formData = new FormData();
        formData.append('image_base64', dataUrl);
        formData.append('confidence_threshold', confSlider.value);
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

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