{% 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="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 %}