{% extends 'base.html' %}

{% block title %}QueryCraft Web - Configuration{% endblock %}

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

{% block header_title %}⚙️ Configuration QueryCraft{% endblock %}

{% block header_subtitle %}Gestion des paramètres de l'application{% endblock %}

{% block header_extra %}
<div class="db-info">
    <span>👤 Instance : <strong>{{ 'démo' if tenant_code == 'demo' else tenant_code }}</strong>{% if tenant_name %} ({{ tenant_name }}){% endif %}</span>
    {% if tenant_referent %}
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;🎓 Enseignant référent : <strong>{{ tenant_referent }}</strong></span>
    {% endif %}
</div>
{% endblock %}

{% block nav_buttons %}
<div class="nav-buttons">
    <a href="{{ base_path }}/{{ '?42' if is_demo else '' }}" class="nav-btn">🏠 Retour à l'accueil</a>
    <a href="#" class="nav-btn js-reset-form">🔄 Réinitialiser</a>
</div>
{% endblock %}

{% block content %}
<div class="content">
    <div class="alert" id="alertBox"></div>

    <form id="configForm">
        <!-- Section Database -->
        <div class="section">
            <div id="sectionBD" class="section-header js-toggle-section collapsed">
                <span>📊 Base de données</span>
                <span class="toggle">▼</span>
            </div>
            <div class="section-content hidden">
                <div class="form-row">
                    <div class="form-group">
                        <label for="db_type">Type de base de données</label>
                        <span class="help-text">Choisissez le SGBD à utiliser</span>
                        <select id="db_type" name="Database.type" class="js-toggle-db-selector">
                            <option value="sqlite" {{
                            'selected' if config.Database.type == 'sqlite' }}>SQLite</option>
                            <option value="pgsql" {{
                            'selected' if config.Database.type == 'pgsql' }}>PostgreSQL</option>
                            <option value="mysql" {{
                            'selected' if config.Database.type == 'mysql' }}>MySQL</option>
                        </select>
                    </div>
                    <div class="form-group" id="testBD-selector">
                        <button type="button" class="btn btn-primary js-test-bd">🛠 Tester la base de données</button>
                        <button type="button" class="btn btn-secondary js-purge-sbs-cache">🗑 Purger le cache du pas-à-pas</button>
                        <div class="alert" id="alertBoxBD"></div>
                        <div class="loading" id="loadingBD">
                            <div class="spinner"></div>
                            <p style="margin-top: 10px;">Analyse des paramètres de la BD...</p>
                        </div>
                    </div>
                </div>

                <div class="form-group" id="sqlite-selector">
                    <label for="db_selector">Base de données (choisir dans la liste)</label>
                    <!--span class="help-text">Sélectionnez une base parmi celles disponibles</span>-->
                    <select id="db_selector" class="form-control">
                        <option value="" {{ 'selected' if config.Database.database not in available_databases }}>-- Choisir une base --</option>
                        {% for db_file in available_databases %}
                        <option value="{{ db_file }}" {{ 'selected' if db_file == config.Database.database }}>
                            {{ db_file }}
                        </option>
                        {% endfor %}
                    </select>

                    <div class="form-group" id="sqlite-upload">
                        <label for="db_upload">Importer une base SQLite</label>
                        <span class="help-text">Téléversez un fichier .db ; il sera ajouté à vos bases disponibles</span>

                        <div class="alert alert-warning show" style="text-align:left;font-size:0.8em;">
                            <strong>⚠️ Avertissement important avant tout téléversement</strong>
                            <p style="margin:0.6em 0 0.4em;">
                                Veuillez prendre connaissance des conditions suivantes :
                            </p>
                            <ul style="margin:0;padding-left:1.2em;">
                                <li><strong>Sécurité limitée :</strong> le niveau de protection de
                                    cette instance est minimal. Toute personne connaissant le numéro
                                    de l'instance est susceptible de consulter les bases de données
                                    qui y sont déposées.
                                </li>
                                <li><strong>Aucune donnée sensible ou personnelle :</strong> les bases
                                    téléversées ne doivent contenir aucune donnée à caractère personnel
                                    ni aucune donnée sensible, conformément au règlement général sur la
                                    protection des données (RGPD, règlement (UE) 2016/679) et au règlement
                                    européen sur l'intelligence artificielle (IA Act, règlement (UE)
                                    2024/1689). Veuillez utiliser exclusivement des données anonymisées, ouvertes
                                    (OpenData... ; en respectant la licence) ou fictives.
                                </li>
                                <li><strong>Conservation non garantie :</strong> la pérennité des bases
                                    de données et des exercices déposés n'est pas garantie. Il vous
                                    appartient d'en conserver une copie de sauvegarde.
                                </li>
                            </ul>
                        </div>

                        <input type="file" id="db_upload" accept=".db,.sqlite,.sqlite3" class="form-control">

                        <label for="db_upload_ack"
                               style="display:flex;align-items:flex-start;gap:0.5em;font-size:0.85em;margin:0.6em 0;font-weight:normal;cursor:pointer;">
                            <input type="checkbox" id="db_upload_ack"
                                   style="width:16px;min-width:16px;height:16px;flex:0 0 auto;padding:0;border:2px solid #ddd;margin:0.15em 0 0;">
                            <span style="flex:1;">J'ai pris connaissance des avertissements et je certifie
                                que mes données sont anonymisées, ouvertes ou fictives.</span>
                        </label>

                        <button type="button" class="btn btn-secondary js-upload-db" disabled>⬆️ Téléverser</button>
                        <div class="alert" id="alertBoxUpload"></div>
                    </div>
                </div>

                <div id="pgsql-mysql-fields">
                    <input type="hidden" id="db_database" name="Database.database" value="{{ config.Database.database }}">

                    <div class="form-row" id="db-network-params">
                        <div class="form-group">
                            <label for="db_username">Nom d'utilisateur</label>
                            <!--<span class="help-text">Pour PostgreSQL/MySQL</span>-->
                            <input type="text" id="db_username" name="Database.username"
                                   value="{{ config.Database.username }}" placeholder="postgres" autocomplete="off">
                        </div>

                        <div class="form-group">
                            <label for="db_password">Mot de passe</label>
                            <span class="help-text">{{ 'Déjà défini — laisser vide pour le conserver' if config.Database.password not in ('None', None, '') else '' }}</span>
                            <input type="password" id="db_password" name="Database.password"
                                   value="" placeholder="••••••••" autocomplete="new-password">
                        </div>
                    </div>

                    <div class="form-row" id="db-network-params-host">
                        <div class="form-group">
                            <label for="db_host">Hôte</label>
                            <input type="text" id="db_host" name="Database.host"
                                   value="{{ '' if config.Database.host in ('None', None) else config.Database.host }}"
                                   placeholder="localhost">
                        </div>

                        <div class="form-group">
                            <label for="db_port">Port</label>
                            <input type="text" id="db_port" name="Database.port"
                                   value="{{ '' if config.Database.port in ('0', 0, None) else config.Database.port }}"
                                   placeholder="5432">
                        </div>
                    </div>

                    <div class="form-group" id="db-name-selector">
                        <label for="db_name_selector" id="db-names-label">Base de données</label>
                        <span class="help-text">Liste des bases accessibles avec ces identifiants ; remplie automatiquement une fois hôte, port et utilisateur renseignés</span>
                        <select id="db_name_selector" class="form-control" disabled>
                            <option value="" selected>-- Choisir une base --</option>
                        </select>
                        <span id="db-name-selector-message" class="model-status-message"></span>
                    </div>

                    <div class="form-group" id="db-server-warning">
                        <div class="alert alert-warning show" style="text-align:left;font-size:0.8em;">
                            <strong>⚠️ Avertissement important avant toute utilisation</strong>
                            <p style="margin:0.6em 0 0.4em;">
                                Veuillez prendre connaissance des conditions suivantes :
                            </p>
                            <ul style="margin:0;padding-left:1.2em;">
                                <li><strong>Installation par l'administrateur :</strong> l'utilisation
                                    d'un serveur PostgreSQL ou MySQL suppose que celui-ci soit installé
                                    et accessible depuis cette instance. Veuillez contacter
                                    l'administrateur du site pour demander son installation, la création
                                    de votre base et l'ouverture des accès réseau nécessaires.
                                </li>
                                <li><strong>Sécurité limitée :</strong> le niveau de protection de
                                    cette instance est minimal. Toute personne connaissant le numéro
                                    de l'instance est susceptible de consulter les bases de données
                                    qui y sont configurées, ainsi que les paramètres de connexion
                                    saisis ici (nom d'utilisateur, mot de passe).
                                </li>
                                <li><strong>Aucune donnée sensible ou personnelle :</strong> les bases
                                    utilisées ne doivent contenir aucune donnée à caractère personnel
                                    ni aucune donnée sensible, conformément au règlement général sur la
                                    protection des données (RGPD, règlement (UE) 2016/679) et au règlement
                                    européen sur l'intelligence artificielle (IA Act, règlement (UE)
                                    2024/1689). Veuillez utiliser exclusivement des données anonymisées, ouvertes
                                    (OpenData... ; en respectant la licence) ou fictives.
                                </li>
                                <li><strong>Conservation non garantie :</strong> la pérennité des bases
                                    de données et des exercices n'est pas garantie. Il vous
                                    appartient d'en conserver une copie de sauvegarde.
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section IA -->
        <div class="section">
            <div id="sectionIA" class="section-header js-toggle-section collapsed">
                <span>🤖 Intelligence Artificielle</span>
                <span class="toggle">▼</span>
            </div>
            <div class="section-content hidden">
                <div class="form-row">
                    <div class="form-group">
                        <label for="ia_mode">Mode IA</label>
                        <span class="help-text">Activer ou désactiver l'aide par IA</span>
                        <select id="ia_mode" name="IA.mode">
                            <option value="on" {{
                            'selected' if config.IA.mode == 'on' }}>Activé</option>
                            <option value="off" {{
                            'selected' if config.IA.mode == 'off' }}>Désactivé</option>
                        </select>
                    </div>
                    <div class="form-group" id="testIA-selector">
                        <button type="button" class="btn btn-primary js-test-ia">🛠 Tester le service</button>
                        <div class="alert" id="alertBoxIA"></div>
                        <div class="loading" id="loading2">
                            <div class="spinner"></div>
                            <p style="margin-top: 10px;">Analyse des paramètres IA...</p>
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="ia_service">Service IA</label>
                        <span class="help-text">ollama (local), ollama (cloud), lms, poe, openai, google...</span>
                        <span class="help-text">✅ accessible · ⚠️ clé requise · ❌ indisponible</span>
                        <select id="ia_service" name="IA.service" class="js-toggle-ia-selector">
                            <option value="albert" {{
                            'selected' if config.IA.service == 'albert' }}>Albert (DINUM)</option>
                            <option value="anthropic" {{
                            'selected' if config.IA.service == 'anthropic' }}>Anthropic</option>
                            <option value="generic" {{
                            'selected' if config.IA.service == 'generic' }}>Générique</option>
                            <option value="google" {{
                            'selected' if config.IA.service == 'google' }}>Google Gemini</option>
                            <option value="ilaas" {{
                            'selected' if config.IA.service == 'ilaas' }}>ILaaS</option>
                            <option value="lms" {{
                            'selected' if config.IA.service == 'lms' }}>LM Studio</option>
                            <option value="ollama_cloud" {{
                            'selected' if config.IA.service == 'ollama_cloud' }}>Ollama (cloud)</option>
                            <option value="ollama" {{
                            'selected' if config.IA.service == 'ollama' }}>Ollama (local)</option>
                            <option value="openai" {{
                            'selected' if config.IA.service == 'openai' }}>OpenAI</option>
                            <option value="poe" {{
                            'selected' if config.IA.service == 'poe' }}>Poe</option>
                            <!--option value="ragarenn" {{
                            'selected' if config.IA.service == 'ragarenn' }}>Ragarenn</option-->
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="ia_modele">Modèle</label>
                        <span class="help-text">Nom du modèle à utiliser</span>
                        <input type="text" id="ia_modele" name="IA.modele"
                               value="{{ config.IA.modele }}" placeholder="codellama:7b">

                    </div>
                </div>

                <div class="form-group" id="ollama-selector">
                    <label for="ollama_selector" id="models-label">Modèles disponibles ({{ config.IA.service }})</label>
                    <span class="help-text">Sélectionnez un modèle parmi ceux disponibles pour ce service</span>
                    <select id="ollama_selector" class="form-control" {{ 'disabled' if ia_models_status != 'ok' }}>
                        <option value="" selected>-- Choisir un modèle --</option>
                        {% for m in available_models|sort %}
                        {% if m == config.IA.modele %}
                        <option value="{{ m }}" selected>{{ m }}</option>
                        {% else %}
                        <option value="{{ m }}">{{ m }}</option>
                        {% endif %}
                        {% endfor %}
                    </select>
                    <span id="ollama-selector-message" class="model-status-message model-status-{{ ia_models_status }}">{{ ia_models_message }}</span>
                </div>

                <div class="form-group">
                    <label for="ia_apikey">Clé API</label>
                    <span class="help-text">
                        {{ 'Déjà définie — laisser vide pour la conserver' if config.IA['api-key'] not in ('None', None, '') else 'Laisser vide pour utiliser les variables d\'environnement' }}
                    </span>
                    <input type="password" id="ia_apikey" name="IA.api-key"
                           value="" placeholder="••••••••" autocomplete="new-password">
                </div>

                <div class="form-group">
                    <label for="ia_url">URL personnalisée</label>
                    <span class="help-text">Pour les services "generic"</span>
                    <input type="text" id="ia_url" name="IA.url"
                           value="{{ config.IA.url }}" placeholder="None">
                </div>
            </div>
        </div>

        <!-- Section LRS -->
        <div class="section" style="display:none;"> <!-- Config LRS cachée pour l'instant !!!! -->
            <div id="sectionLRS" class="section-header js-toggle-section collapsed">
                <span>📚 LRS (Learning Record Store)</span>
                <span class="toggle">▼</span>
            </div>
            <div class="section-content hidden">
                <div class="form-group">
                    <label for="lrs_mode">Mode LRS</label>
                    <select id="lrs_mode" name="LRS.mode">
                        <option value="on" {{
                        'selected' if config.LRS.mode == 'on' }}>Activé</option>
                        <option value="off" {{
                        'selected' if config.LRS.mode == 'off' }}>Désactivé</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="lrs_endpoint">Endpoint</label>
                    <input type="text" id="lrs_endpoint" name="LRS.endpoint"
                           value="{{ config.LRS.endpoint }}" placeholder="http://lrs.example.com">
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="lrs_username">Nom d'utilisateur</label>
                        <input type="text" id="lrs_username" name="LRS.username"
                               value="{{ config.LRS.username }}" placeholder="username">
                    </div>

                    <div class="form-group">
                        <label for="lrs_password">Mot de passe</label>
                        <input type="password" id="lrs_password" name="LRS.password"
                               value="{{ config.LRS.password }}" placeholder="••••••••">
                    </div>
                </div>
            </div>
        </div>

        <!-- Section Autre -->
        <div class="section">
            <div id="sectionAutres" class="section-header js-toggle-section collapsed">
                <span>🔧 Autres paramètres</span>
                <span class="toggle">▼</span>
            </div>
            <div class="section-content hidden">
                <div class="form-row" style="display:none;">
                    <div class="form-group">
                        <label for="autre_debug">Mode Debug</label>
                        <select id="autre_debug" name="Autre.debug">
                            <option value="True" {{
                            'selected' if config.Autre.debug == 'True' }}>Activé</option>
                            <option value="False" {{
                            'selected' if config.Autre.debug == 'False' }}>Désactivé</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="autre_verbose">Mode verbose</label>
                        <select id="autre_verbose" name="Autre.verbose">
                            <option value="True" {{
                            'selected' if config.Autre.verbose == 'True' }}>Activé</option>
                            <option value="False" {{
                            'selected' if config.Autre.verbose == 'False' }}>Désactivé</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="autre_cache">Cache IA générative et pas à pas</label>
                        <select id="autre_cache" name="Autre.cache">
                            <option value="on" {{
                            'selected' if config.Autre.cache == 'on' }}>Activé</option>
                            <option value="off" {{
                            'selected' if config.Autre.cache == 'off' }}>Désactivé</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="autre_duree_cache">Durée cache (jours)</label>
                        <input type="number" id="autre_duree_cache" name="Autre.duree-cache"
                               value="{{ config.Autre['duree-cache'] }}" min="0" placeholder="60">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="autre_exos">Présentation des exercices</label>
                        <select id="autre_exos" name="Autre.exos" class="js-toggle-aide-prf">
                            <option value="on" {{
                            'selected' if config.Autre.exos == 'on' }}>Activée</option>
                            <option value="off" {{
                            'selected' if config.Autre.exos == 'off' }}>Désactivée</option>
                        </select>
                    </div>

                    <div id="aide_prf" class="form-group"
                         {% if config.Autre.exos==
                    'on' %}
                    style="display:block;"
                    {% else %}
                    style="display:none;"
                    {% endif %}>
                    <label for="autre_aide">Aide enseignant</label>
                    <select id="autre_aide" name="Autre.aide">
                        <option value="on" {{
                        'selected' if config.Autre.aide == 'on' }}>Activée</option>
                        <option value="off" {{
                        'selected' if config.Autre.aide == 'off' }}>Désactivée</option>
                    </select>
                </div>
            </div>
        </div>
</div>

<div class="loading" id="loading">
    <div class="spinner"></div>
    <p style="margin-top: 10px;">Analyse des paramètres BD/IA et sauvegarde en cours...</p>
</div>

<div class="buttons">
    <button type="submit" class="btn btn-primary">💾 Sauvegarder la configuration</button>
    <a href="{{ base_path }}/{{ '?42' if is_demo else '' }}" class="btn btn-secondary">❌ Annuler</a>
</div>

</form>

{% if tenant_referent %}
<p style="font-size:0.75em;color:#999;margin-top:1.5em;">
    Le nom de l'enseignant référent affiché ci-dessus est une donnée à caractère
    personnel, utilisée uniquement pour faciliter le contact concernant cette
    instance. Conformément au règlement général sur la protection des données
    (RGPD, règlement (UE) 2016/679), vous disposez d'un droit d'accès, de
    rectification et d'effacement de cette information. Pour l'exercer, ou pour
    toute question relative à son traitement, veuillez contacter l'administrateur
    du site.
</p>
{% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='script/config-manager.js') }}"></script>
{% endblock %}