{% extends 'base.html' %}

{% block title %}QueryCraft Web - Traces pédagogiques{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/traces.css') }}">
{% endblock %}

{% block header_title %}Traces pédagogiques{% endblock %}

{% block header_subtitle %}Consultation des tentatives SQL des étudiants{% endblock %}

{% block header_extra %}
    <div class="db-info">
        <span>📊 Base : <strong>{{ db_type }}</strong></span>
        <span>📁 Nom : <strong>{{ db_name }}</strong></span>
        <span>👤 Instance : <strong>{{ 'démo' if tenant_code == 'demo' else tenant_code }}</strong>{% if tenant_name %} ({{ tenant_name }}){% endif %}</span>
    </div>
{% endblock %}

{% block content %}
<div class="content">

    <div id="tracesDisabledState" class="alert alert-warning" style="display:none;">
        Le traçage pédagogique n'est pas activé pour cette instance (ou n'a encore
        journalisé aucune tentative). Aucune donnée à afficher ici.
        <a href="{{ base_path }}/config" style="color:#664d03;font-weight:700;">Activer le traçage dans la configuration →</a>
    </div>

    <div id="tracesContent" style="display:none;">

        <!-- Panneau de synthèse -->
        <div class="section" id="summaryPanel">
            <div class="section-header">
                <span class="section-icon">📈</span>
                <div class="section-titles">
                    <h2>Synthèse</h2>
                    <p>Vue d'ensemble de l'activité tracée sur cette instance</p>
                </div>
            </div>
            <div class="section-content">
                <div class="summary-grid" id="summaryGrid">
                    <!-- Rempli en JS -->
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="page-actions">
            <a href="{{ base_path }}/{{ '?42' if is_demo else '' }}" class="btn btn-nav">🏠 Retour à l'accueil</a>
            <button type="button" class="btn btn-secondary js-refresh-stats" title="Recharger la synthèse, les filtres disponibles et le tableau des tentatives">🔄 Actualiser</button>
        </div>

        <!-- Bandeau contextuel (fil d'un élève) -->
        <div class="alert alert-success" id="contextBanner" style="display:none;">
            <span id="contextBannerText"></span>
            &nbsp;&nbsp;
            <button type="button" class="btn btn-cancel btn-small js-reset-filters">✖️ Réinitialiser</button>
        </div>

        <!-- Barre de filtres (repliée par défaut) -->
        <div class="section">
            <div class="section-header js-toggle-section collapsed" id="sectionFiltres">
                <span class="section-icon">🔎</span>
                <div class="section-titles">
                    <h2>Filtres</h2>
                    <p>Élève, base, exercice, résultat, période, IA, pas-à-pas, réponse à l'exercice, texte de la requête</p>
                </div>
                <svg class="toggle" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="m6 9 6 6 6-6"/></svg>
            </div>
            <div class="section-content hidden">
                <form id="filtersForm" class="filters-grid">
                    <div class="form-group">
                        <label for="fPseudo">Élève (identifiant)</label>
                        <input type="text" id="fPseudo" placeholder="identifiant, ou fragment...">
                        <label class="checkbox-inline">
                            <input type="checkbox" id="fPseudoPartial"> recherche partielle
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="fTypeEvenement">Type</label>
                        <select id="fTypeEvenement">
                            <option value="">Tous</option>
                            <option value="execution_sql">Exécution SQL</option>
                            <option value="consultation_schema">Consultation du schéma</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="fDbName">Base</label>
                        <select id="fDbName"><option value="">Toutes</option></select>
                    </div>
                    <div class="form-group">
                        <label for="fExercice">Exercice</label>
                        <select id="fExercice"><option value="">Tous</option></select>
                    </div>
                    <div class="form-group">
                        <label for="fQuestion">Question</label>
                        <select id="fQuestion"><option value="">Toutes</option></select>
                    </div>
                    <div class="form-group">
                        <label for="fDepuis">Depuis</label>
                        <input type="date" id="fDepuis">
                    </div>
                    <div class="form-group">
                        <label for="fJusquA">Jusqu'à</label>
                        <input type="date" id="fJusquA">
                    </div>
                    <div class="form-group">
                        <label for="fIaNiveau">Aide IA</label>
                        <select id="fIaNiveau">
                            <option value="">Indifférent</option>
                            <option value="non">Non sollicitée</option>
                            <option value="normale">Normale</option>
                            <option value="renforcee">Renforcée</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="fStepByStep">Mode d'exécution</label>
                        <select id="fStepByStep">
                            <option value="">Indifférent</option>
                            <option value="1">Pas à pas</option>
                            <option value="0">Direct</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="fReponseCorrecte">Réponse à l'exercice</label>
                        <select id="fReponseCorrecte">
                            <option value="">Indifférent</option>
                            <option value="1">Correcte</option>
                            <option value="0">Incorrecte</option>
                        </select>
                    </div>
                    <div class="form-group form-group-wide">
                        <label for="fQ">Recherche dans les requêtes SQL soumises</label>
                        <input type="text" id="fQ" placeholder="fragment de requête...">
                    </div>
                    <div class="form-group form-group-wide">
                        <label>Résultat</label>
                        <div class="resultat-checkboxes" id="resultatCheckboxes">
                            <!-- Rempli en JS -->
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">Filtrer</button>
                        <button type="button" class="btn btn-cancel js-reset-filters">Réinitialiser</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Tableau des tentatives -->
        <div class="section">
            <div class="section-header">
                <span class="section-icon">📋</span>
                <div class="section-titles">
                    <h2>Tentatives</h2>
                    <p>Détail des requêtes SQL soumises, triable par colonne</p>
                </div>
            </div>
            <div class="section-content">
                <div class="table-wrapper">
                    <table class="traces-table" id="tracesTable">
                        <thead>
                            <tr>
                                <th data-sort="session_pseudo">Élève</th>
                                <th data-sort="resultat_type">Résultat</th>
                                <th>Réponse exo</th>
                                <th>Question</th>
                                <th title="Version normalisée (casse des mots-clés, espaces) — survoler une ligne pour voir la requête telle que soumise">Requête</th>
                                <th data-sort="ts">Date</th>
                                <th>Type</th>
                                <th data-sort="tentative_num">Tent. n°</th>
                                <th data-sort="db_name">Base</th>
                                <th>IA</th>
                                <th>Pas-à-pas</th>
                            </tr>
                        </thead>
                        <tbody id="tracesTableBody">
                            <!-- Rempli en JS -->
                        </tbody>
                    </table>
                </div>
                <div class="traces-legend">
                    <div class="traces-legend-group">
                        <span class="traces-legend-title">Résultat :</span>
                        <span class="badge badge-succes traces-legend-item" title="La requête a été exécutée sans erreur, jusqu'au bout.">✅ Succès</span>
                        <span class="badge badge-erreur traces-legend-item" title="La requête a été bloquée avant exécution par le contrôle de sécurité (instruction interdite, motif suspect...).">🚫 Erreur sécurité</span>
                        <span class="badge badge-erreur traces-legend-item" title="La requête n'a pas pu être analysée : erreur de syntaxe SQL.">❌ Erreur syntaxe</span>
                        <span class="badge badge-warning traces-legend-item" title="La requête est syntaxiquement correcte mais ne respecte pas une règle pédagogique attendue (ex. ce n'est pas un SELECT, colonne du SELECT absente du GROUP BY...).">⚠️ Non conforme</span>
                        <span class="badge badge-erreur traces-legend-item" title="La requête a été acceptée et envoyée à la base, mais son exécution a échoué (erreur retournée par le SGBD).">💥 Erreur exécution</span>
                        <span class="badge badge-erreur traces-legend-item" title="Une erreur inattendue (bug interne à QueryCraft) s'est produite pendant le traitement de la requête.">🐛 Erreur interne</span>
                    </div>
                    <div class="traces-legend-group">
                        <span class="traces-legend-title">Type :</span>
                        <span class="badge traces-legend-item" title="L'élève a soumis et exécuté une requête SQL.">▶️ Exécution SQL</span>
                        <span class="badge traces-legend-item" title="L'élève a consulté le schéma (diagramme/structure) de la base sans exécuter de requête.">🧭 Consultation du schéma</span>
                    </div>
                    <div class="traces-legend-group">
                        <span class="traces-legend-title">Réponse exo :</span>
                        <span class="traces-legend-item" title="La requête était liée à une question d'exercice et son résultat correspond à la solution attendue.">✅ Correcte</span>
                        <span class="traces-legend-item" title="La requête était liée à une question d'exercice mais son résultat diffère de la solution attendue.">❌ Incorrecte</span>
                        <span class="traces-legend-item" title="La tentative n'est rattachée à aucun exercice/question : il n'y a donc pas de solution à comparer.">— Non évaluée (pas de code exercice/question)</span>
                    </div>
                    <div class="traces-legend-group">
                        <span class="traces-legend-title">IA :</span>
                        <span class="traces-legend-item" title="L'élève n'a pas coché l'aide de l'IA pour cette tentative.">— Non sollicitée</span>
                        <span class="traces-legend-item" title="L'élève a demandé l'aide de l'IA en niveau standard (explication de la requête ou de l'erreur).">🤖 Normale</span>
                        <span class="traces-legend-item" title="L'élève a demandé l'aide de l'IA en mode renforcé (feedback tenant compte de son historique de tentatives sur cette question).">🚀 Renforcée</span>
                    </div>
                    <div class="traces-legend-group">
                        <span class="traces-legend-title">Pas-à-pas :</span>
                        <span class="traces-legend-item" title="La requête a été exécutée étape par étape (décomposition pédagogique de la requête).">👣 Oui</span>
                        <span class="traces-legend-item" title="La requête a été exécutée directement, sans décomposition pas-à-pas.">— Non (exécution directe)</span>
                    </div>
                </div>
                <div class="pagination" id="pagination">
                    <!-- Rempli en JS -->
                </div>
            </div>
        </div>

        <!-- Export -->
        <div class="page-actions">
            <a href="#" id="exportLink" class="btn btn-info">⬇️ Exporter en CSV</a>
            <label class="checkbox-inline">
                <input type="checkbox" id="fAnonymise" checked> anonymiser les identifiants
            </label>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script>window.QC_TRACES_MODE = {{ traces_mode | tojson }};</script>
    <script src="{{ url_for('static', filename='script/traces-viewer.js') }}"></script>
{% endblock %}