{% extends 'base.html' %}

{% block title %}QueryCraft Web - Interface SQL pas à pas{% endblock %}

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

{% block header_title %}🔍 QueryCraft Web{% endblock %}

{% block header_subtitle %}Interface d'exécution pas à pas de requêtes SQL{% endblock %}

{% block header_extra %}
    <div class="db-info">
        <span>📊 Base : <strong>{{ db_type }}</strong></span>
        <span>📁 Nom : <strong>{{ db_name }}</strong></span>
        {% if ia_mode == 'on' %}
        <span>🤖 IA activée<!--strong>{{ ia_mode }}</strong--> <span class="ens-only" style="display:none;">({{ ia_service }})</span></span>
        {% endif %}
        <span>👤 Instance : <strong>{{ tenant_label }}</strong></span>
    </div>
{% endblock %}

{% block content %}
        <div class="content">
            {% if exos_mode == 'on' %}
            <div id="exerciceSection" style="background:#e8f0ff;padding:20px;border-radius:8px;margin:20px 0;border-left:4px solid #667eea; {{ display_exos }}">
                <h3 style="margin-bottom:15px;color:#333;">📚 Exercice et Question (optionnel)</h3>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px;">
                    <div>
                        <label for="exerciceSelect" style="display:block;font-weight:600;margin-bottom:5px;">Exercice :</label>
                        <select id="exerciceSelect" style="width:100%;padding:10px;border:2px solid #ddd;border-radius:5px;font-size:14px;" class="js-load-questions js-save-storage">
                            <option value="">-- Pas d'exercice --</option>
                        </select>
                    </div>
                    <div>
                        <label for="questionSelect" style="display:block;font-weight:600;margin-bottom:5px;">Question :</label>
                        <select id="questionSelect" style="width:100%;padding:10px;border:2px solid #ddd;border-radius:5px;font-size:14px;" disabled class="js-load-question-details js-save-storage">
                            <option value="">-- Pas de question --</option>
                        </select>
                    </div>
                </div>
                <div id="questionInfo" style="display:none;background:white;padding:15px;border-radius:5px;margin-top:10px;">
                    <div id="questionIntention" style="margin-bottom:10px;"></div>
                    <div id="questionTable" style="display:none;"></div>
                </div>
            </div>
            {% endif %}

            <div class="query-section">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <label for="sqlQuery" style="margin-bottom: 0;">Requête SQL :</label>
                    <select id="historySelect" style="padding: 5px 10px; border: 1px solid #ddd; border-radius: 5px; background: white; cursor: pointer; font-size: 0.9em;" class="js-load-from-history">
                        <option value="">📜 Historique (0)</option>
                    </select>
                </div>
                <textarea
                    id="sqlQuery"
                    class="query-input"
                    placeholder="Entrez votre requête SQL ici...&#10;Exemple : SELECT * FROM etudiants WHERE age > 20"
                >SELECT * FROM etudiants ;</textarea>
            </div>

            <div class="options">
                <div class="checkbox-group">
                    <input type="checkbox" id="stepByStep" class="js-save-storage">
                    <label for="stepByStep">Mode pas à pas</label>
                </div>

                <div class="checkbox-group"
                    {% if ia_mode == 'on' %}
                    style="display: block;"
                    {% else %}
                    style="display: none;"
                    {% endif %}>
                    <input type="checkbox" id="ia_demandee" class="js-save-storage">
                    <label for="ia_demandee">Aide de l'IA générative</label>
                </div>
            </div>


            <div class="buttons">
                <button class="btn btn-primary js-execute-query">▶️ Exécuter la requête
                </button>
                <button class="btn btn-info js-show-schema">📋 Afficher le schéma
                </button>
                <button class="btn btn-secondary js-clear-output">🗑️ Effacer
                </button>
                <!--button class="btn btn-warning ens-only" style="display: none;">
                    🔄 Réinitialiser la mémorisation
                </button-->
            </div>

            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p style="margin-top: 10px;">Exécution et analyse en cours...</p>
            </div>

            <div class="output-section" id="outputSection">
                <div class="output-title" id="outputTitle">Résultat :</div>
                <div class="output-content" id="outputContent"></div>
            </div>
        </div>
{% endblock %}

{% block footer_content %}
    <!--a href="/didapro11" style="color:#667eea;text-decoration:none;font-weight:600;margin-top:10px;display:inline-block;">📓️</a>
    —— -->
    © E. Desmontils, Nantes Université, 2024-2026 | QueryCraft v{{ version }}
    &nbsp;&nbsp; —— &nbsp;&nbsp;
    <a href="{{ base_path }}/credits" style="color:#667eea;text-decoration:none;font-weight:600;margin-top:10px;display:inline-block;">ℹ️</a>
    {% if not is_admin and not is_demo %}
    &nbsp;&nbsp; —— &nbsp;&nbsp;
    <a href="{{ base_path }}/admin" style="color:#667eea;text-decoration:none;font-weight:600;margin-top:10px;display:inline-block;">🔑 Mode enseignant</a>
    {% endif %}
    <span class="ens-only" style="display:none;">&nbsp;&nbsp; —— &nbsp;&nbsp;</span>
    <button class="btn btn-primary btn-small ens-only js-goto-config">⚙️</button>
    <button class="btn btn-secondary btn-small ens-only js-goto-exercices">📚</button>
    <!--button class="btn btn-warning btn-small ens-only js-clear-memory">🔄</button-->
    {% if is_admin %}
    <a href="{{ base_path }}/admin/logout" style="color:#667eea;text-decoration:none;font-weight:600;margin-top:10px;display:inline-block;">🚪 Quitter</a>
    {% endif %}
{% endblock %}

{% block scripts %}
    <script>window.QC_DB_KEY = {{ (db_type ~ '::' ~ db_name) | tojson }};</script>
    <script src="{{ url_for('static', filename='script/exercices-loader.js') }}"></script>
    <script src="{{ url_for('static', filename='script/query-executor.js') }}"></script>
    <script src="{{ url_for('static', filename='script/storage-manager.js') }}"></script>
    <script src="{{ url_for('static', filename='script/ui-helpers.js') }}"></script>
{% endblock %}