{% extends "v3/base.html" %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Paramètres</h1>
</div>

<nav class="settings-toc" aria-label="Sommaire des paramètres">
    <a href="#settings-general">Général</a>
    <a href="#system-health">État du système</a>
    <a href="#settings-account" id="settings-toc-account" style="display:none;">Compte &amp; abonnement</a>
    <a href="#settings-updates">Mises à jour</a>
    <a href="#settings-danger">Zone à risque</a>
</nav>

<div style="max-width: 500px;">

    <h2 id="settings-general" class="settings-section-heading">Général</h2>

    <h3 class="section-title">Préférences</h3>

    <div class="form-group">
        <label class="form-label" for="theme-select">Thème</label>
        <select class="form-select" id="theme-select" onchange="changeTheme()">
            <option value="light">Clair</option>
            <option value="dark">Sombre</option>
        </select>
    </div>

    <div class="form-group">
        <label class="form-label" for="lang-select">Langue transcription</label>
        <select class="form-select" id="lang-select" onchange="saveSetting('language', this.value)">
            <option value="fr">Français</option>
            <option value="en">English</option>
            <option value="auto">Auto-detect</option>
        </select>
    </div>

    <!-- Section Disposition clavier -->
    <h3 class="section-title" style="margin-top: 2rem;">Disposition clavier</h3>
    <p class="text-muted" style="font-size:0.85rem; margin-bottom:1rem;">
        Vicsia détecte automatiquement votre disposition clavier pour que la
        saisie des raccourcis affiche bien les touches que vous tapez.
    </p>
    <p class="text-muted" style="font-size:0.85rem; margin-bottom:0.75rem;" id="keyboard-detected">
        Détection en cours...
    </p>
    <div class="form-group">
        <label class="form-label" for="keyboard-layout-override">Forcer une disposition (avancé)</label>
        <select class="form-select" id="keyboard-layout-override" onchange="saveKeyboardLayout(this.value)">
            <option value="auto">Auto (détection système)</option>
            <option value="qwerty">QWERTY (US)</option>
            <option value="azerty">AZERTY (FR/BE)</option>
            <option value="qwertz">QWERTZ (DE/CH)</option>
            <option value="dvorak">Dvorak</option>
        </select>
        <p class="text-muted" style="font-size:0.78rem; margin-top:0.4rem;">
            En mode &laquo; Auto &raquo;, Vicsia suit la disposition active du système.
            L'override force la table de translation utilisée pour la capture de raccourcis.
        </p>
    </div>

    <!-- Section Dictée -->
    <h3 class="section-title" style="margin-top: 2rem;">Dictée</h3>
    <div class="form-group">
        <label class="form-label" style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
            <input type="checkbox" id="enter-to-finish" onchange="saveEnterToFinish(this.checked)">
            <span>Appuyer sur Entrée pour terminer la dictée</span>
        </label>
        <p class="text-muted" style="font-size:0.78rem; margin-top:0.4rem;">
            Pendant un enregistrement, la touche Entrée termine la dictée et lance
            le traitement (Windows). La touche n'est alors pas transmise à
            l'application active ; Échap reste l'annulation.
        </p>
    </div>

    <!-- Section Vocabulaire STT -->
    <h3 class="section-title" style="margin-top: 2rem;">Vocabulaire STT</h3>
    <p class="text-muted" style="font-size:0.85rem; margin-bottom:1rem;">
        Termes spécifiques (noms propres, produits, acronymes) pour améliorer la reconnaissance vocale.
        Privilégiez les mots rares et techniques.
    </p>
    <div class="form-group">
        <div id="vocab-tags" style="display:flex; flex-wrap:wrap; gap:0.4rem; min-height:1.5rem; margin-bottom:0.5rem;"></div>
        <div style="display:flex; gap:0.5rem;">
            <input type="text" id="vocab-input" class="form-select" style="flex:1"
                   placeholder="Ajouter un mot..." maxlength="50"
                   onkeydown="if(event.key==='Enter'){addVocabWord();event.preventDefault();}">
            <button class="btn btn-secondary" onclick="addVocabWord()">Ajouter</button>
        </div>
        <div id="vocab-limit" style="font-size:0.78rem; color:var(--text-muted); margin-top:0.4rem;"></div>
        <div style="font-size:0.75rem; color:var(--text-muted); margin-top:0.2rem;">Un mot par tag. Les espaces et virgules séparent automatiquement.</div>
    </div>

    <h2 id="system-health" class="settings-section-heading">État du système</h2>

    <p class="text-muted" style="font-size:0.85rem; margin-bottom:0.75rem;">
        Vérifie les prérequis (clé API, microphone, permissions système) nécessaires au bon fonctionnement de Vicsia.
    </p>
    <div id="syshealth-checks" class="syshealth-list"><p class="text-muted">Vérification en cours...</p></div>
    <button class="btn btn-secondary" style="margin-top:0.75rem;" onclick="checkSystemHealth()">Vérifier à nouveau</button>

    <h2 id="settings-account" class="settings-section-heading" style="display:none;">Compte &amp; abonnement</h2>

    <!-- Section Compte (visible uniquement si Supabase configuré) -->
    <div id="account-section" style="display:none; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border);">
        <h3 class="section-title">Compte</h3>

        <!-- Encart phase pilote (affiche si app_mode=beta_free) -->
        <div id="pilot-phase-notice" style="display:none;background:#fef3c7;color:#92400e;border:1px solid #fcd34d;border-radius:8px;padding:0.75rem 1rem;margin-bottom:1rem;font-size:0.9rem;">
            <strong>Phase pilote active</strong><br>
            Tu b&eacute;n&eacute;ficies de l'acc&egrave;s complet jusqu'au <strong id="pilot-phase-until"></strong>.
        </div>

        <div class="form-group">
            <label class="form-label" for="account-email">Email</label>
            <input type="text" class="form-select" id="account-email" readonly style="background: var(--bg-hover);">
        </div>

        <div class="form-group">
            <label class="form-label">Plan</label>
            <div class="flex gap-2" style="align-items: center;">
                <span id="account-plan-badge" class="plan-badge">-</span>
                <button class="btn btn-secondary btn-sm" id="btn-subscription" style="display:none" onclick="handleSubscription()">Passer à Starter</button>
            </div>
        </div>

        <!-- Limites du plan -->
        <div id="plan-limits" style="display:none; margin-bottom: 1rem;">
            <div id="limit-agents" class="limit-row" style="display:none">
                <span class="limit-label">Agents</span>
                <div class="limit-bar"><div class="limit-fill" id="fill-agents" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div></div>
                <span class="limit-value" id="val-agents"></span>
            </div>
            <div id="limit-search" class="limit-row" style="display:none">
                <span class="limit-label">Recherches/jour</span>
                <div class="limit-bar"><div class="limit-fill" id="fill-search" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div></div>
                <span class="limit-value" id="val-search"></span>
            </div>
            <div id="limit-ia" class="limit-row" style="display:none">
                <span class="limit-label">IA (aujourd'hui)</span>
                <div class="limit-bar"><div class="limit-fill" id="fill-ia" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div></div>
                <span class="limit-value" id="val-ia"></span>
            </div>
        </div>

        <style>
            .plan-badge {
                display: inline-block;
                padding: 0.2rem 0.6rem;
                border-radius: 999px;
                font-size: 0.8rem;
                font-weight: 600;
                text-transform: uppercase;
            }
            .plan-badge.free { background: var(--bg-hover); color: var(--text-muted); }
            .plan-badge.solo, .plan-badge.starter { background: #dbeafe; color: #1d4ed8; }
            .plan-badge.pro, .plan-badge.pro_x3 { background: #fef3c7; color: #92400e; }
            .plan-badge.enterprise { background: #ede9fe; color: #6d28d9; }
            [data-theme="dark"] .plan-badge.solo, [data-theme="dark"] .plan-badge.starter { background: #1e3a5f; color: #93c5fd; }
            [data-theme="dark"] .plan-badge.pro, [data-theme="dark"] .plan-badge.pro_x3 { background: #451a03; color: #fcd34d; }
            [data-theme="dark"] .plan-badge.enterprise { background: #2e1065; color: #c4b5fd; }
            .limit-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.85rem; }
            .limit-label { width: 120px; color: var(--text-muted); flex-shrink: 0; }
            .limit-bar { flex: 1; height: 6px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; }
            .limit-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.3s; }
            .limit-fill.warn { background: #f59e0b; }
            .limit-fill.full { background: var(--danger); }
            .limit-value { width: 60px; text-align: right; font-size: 0.8rem; color: var(--text-muted); flex-shrink: 0; }
            .btn-sm { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
        </style>

        <div class="flex gap-2" style="flex-wrap: wrap; margin-bottom: 0.5rem;">
            <button class="btn btn-secondary" onclick="changePassword()">Réinitialiser le mot de passe</button>
            <button class="btn btn-secondary" onclick="doLogout()">Déconnexion</button>
        </div>
        <p class="text-muted" style="font-size: 0.78rem; margin-top: 0; margin-bottom: 0;">
            Un email avec un lien de réinitialisation sera envoyé à votre adresse.
        </p>

        <div class="alert" id="account-alert" style="display:none; margin-top: 1rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); font-size: 0.85rem;"></div>
    </div>

    <!-- Section Entreprise (visible uniquement si Supabase configure et authentifie) -->
    <div id="company-section" style="display:none; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border);">
        <h3 class="section-title">Entreprise</h3>

        <!-- Deja rattache -->
        <div id="company-linked" style="display:none;">
            <p class="text-muted" style="font-size:0.85rem; margin-bottom:0.5rem;">
                Rattaché à <strong id="company-name"></strong>.
                Les agents et configurations de votre entreprise sont synchronisés automatiquement.
            </p>
            <button class="btn btn-secondary btn-sm" onclick="syncCompany()">Synchroniser maintenant</button>
            <div id="company-sync-msg" style="display:none; margin-top:0.5rem; font-size:0.82rem; color:var(--accent);"></div>
        </div>

    </div>

    <h2 id="settings-updates" class="settings-section-heading">Mises à jour</h2>

    <p style="margin-bottom:0.5rem;">Version: <strong id="current-version">...</strong></p>

    <!-- Statut -->
    <div id="update-status-text" class="text-muted" style="margin-bottom:0.75rem;">
        Cliquez sur Vérifier pour chercher les mises à jour.
    </div>

    <!-- Banniere update (hidden) -->
    <div id="update-banner" style="display:none; padding:0.75rem 1rem; border-radius:var(--radius); margin-bottom:0.75rem; border:1px solid var(--border); background:var(--bg-hover);">
        <div style="display:flex; justify-content:space-between; align-items:center;">
            <div>
                <strong id="update-banner-title"></strong>
                <div id="update-banner-subtitle" class="text-muted" style="font-size:0.85rem;"></div>
            </div>
            <button class="btn btn-secondary btn-sm" onclick="dismissUpdate()" style="white-space:nowrap;">Plus tard</button>
        </div>
    </div>

    <!-- Changelog (hidden) -->
    <div id="update-changelog" style="display:none; margin-bottom:0.75rem;">
        <strong style="font-size:0.85rem;">Nouveautés</strong>
        <ul id="changelog-list" style="margin:0.3rem 0 0; padding-left:1.2rem; font-size:0.85rem;"></ul>
    </div>

    <!-- Progress (hidden) -->
    <div id="update-progress" style="display:none; margin-bottom:0.75rem;">
        <div style="height:6px; background:var(--bg-hover); border-radius:3px; overflow:hidden; margin-bottom:0.4rem;">
            <div id="progress-bar-fill" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="height:100%; width:0; background:var(--accent); border-radius:3px; transition:width 0.3s;"></div>
        </div>
        <p id="update-progress-msg" class="text-muted" style="font-size:0.85rem; margin:0;"></p>
    </div>

    <!-- Erreur (hidden) -->
    <div id="update-error" style="display:none; padding:0.5rem 0.75rem; border-radius:var(--radius); background:#fef2f2; color:var(--danger); border:1px solid #fecaca; font-size:0.85rem; margin-bottom:0.75rem;"></div>

    <!-- Boutons -->
    <div class="flex gap-2" style="margin-bottom: 1rem;">
        <button class="btn btn-secondary" id="btn-check-update" onclick="checkUpdates()">Vérifier</button>
        <button class="btn btn-primary" id="btn-apply-update" style="display:none" onclick="applyUpdate()">Installer</button>
        <a class="btn btn-primary" id="btn-download-update" style="display:none" target="_blank">Télécharger</a>
    </div>

    <!-- V2: Config export/import (masqué — à activer pour starter/pro) -->
    <!--
    <h3 class="section-title" style="margin-top: 2rem;">Configuration</h3>
    <p class="text-muted" style="font-size:0.85rem; margin-bottom:1rem;">
        Exportez votre configuration (agents, MCPs, profils, reglages) pour la transferer sur une autre machine.
    </p>
    <div class="flex gap-2" style="margin-bottom: 0.75rem;">
        <a class="btn btn-secondary" href="/api/settings/export-config" download>Exporter</a>
        <button class="btn btn-secondary" onclick="document.getElementById('import-file').click()">Importer</button>
        <input type="file" id="import-file" accept=".json" style="display:none" onchange="importConfig(this)">
    </div>
    <div id="import-result" style="display:none; padding:0.5rem 0.75rem; border-radius:var(--radius); font-size:0.85rem; margin-bottom:0.75rem;"></div>
    -->

    <h2 id="settings-danger" class="settings-section-heading">Zone à risque</h2>
    <p class="text-muted" style="font-size:0.85rem; margin-bottom:1rem;">
        Actions irréversibles. À utiliser avec précaution.
    </p>

    <div class="settings-danger-zone">
        <div class="settings-danger-item">
            <button class="btn btn-danger" onclick="factoryReset()">Réinitialiser l'application (données locales)</button>
            <p class="text-muted" style="font-size:0.78rem; margin-top:0.5rem;">
                Supprime agents, raccourcis, paramètres et historique sur cette machine. L'application redémarrera avec la configuration par défaut.
            </p>
        </div>

        <div id="advanced-account-section" class="settings-danger-item" style="display:none;">
            <button class="btn btn-danger" onclick="deleteAccount()">Supprimer mon compte (données cloud)</button>
            <p class="text-muted" style="font-size:0.78rem; margin-top:0.5rem;">
                Suppression définitive de votre compte Vicsia et de toutes les données associées côté serveur (profil, abonnement, historique).
            </p>
        </div>

        <div class="settings-danger-item">
            <button class="btn btn-danger" onclick="quitVicsia()">Quitter Vicsia</button>
            <p class="text-muted" style="font-size:0.78rem; margin-top:0.5rem;">
                Arrête entièrement Vicsia : la capsule, les raccourcis clavier et les serveurs MCP. Cette fenêtre Paramètres se fermera aussi. Tu peux toujours rouvrir Vicsia depuis ton dossier Applications.
                Astuce : tu peux aussi quitter via la croix de la petite pille en bas à droite.
            </p>
        </div>
    </div>

</div>

<div id="settings-toast" class="settings-toast" role="status" aria-live="polite"></div>
{% endblock %}

{% block scripts %}
<script>
let lastUpdateCheck = null;
window.updateInProgress = false;

async function loadSettings() {
    try {
        const res = await fetch('/api/settings');
        const settings = await res.json();

        document.getElementById('theme-select').value = localStorage.getItem('theme') || 'light';
        document.getElementById('lang-select').value = settings.language || 'fr';
        // « Entrée pour valider » (defaut coche : true sauf si explicitement false)
        const etfEl = document.getElementById('enter-to-finish');
        if (etfEl) etfEl.checked = !(settings.system_hotkeys && settings.system_hotkeys.enter_to_finish === false);
        // Version actuelle
        document.getElementById('current-version').textContent = settings.version || '?';
    } catch (e) {
        console.error('Erreur chargement settings:', e);
    }
}

function changeTheme() {
    const theme = document.getElementById('theme-select').value;
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
}

// === Toast de feedback (sauvegardes) ===
let settingsToastTimer = null;
function showSettingsToast(message, ok) {
    const el = document.getElementById('settings-toast');
    if (!el) return;
    el.textContent = message;
    el.className = 'settings-toast settings-toast-visible ' + (ok ? 'settings-toast-success' : 'settings-toast-error');
    clearTimeout(settingsToastTimer);
    settingsToastTimer = setTimeout(() => {
        el.classList.remove('settings-toast-visible');
    }, ok ? 2000 : 4000);
}

async function saveSetting(key, value) {
    try {
        const res = await apiFetch('/api/settings', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({[key]: value})
        });
        if (!res.ok) throw new Error('HTTP ' + res.status);
        showSettingsToast('Enregistré', true);
    } catch (e) {
        console.error('Erreur sauvegarde:', e);
        showSettingsToast('Échec de l\'enregistrement — vérifiez la connexion', false);
    }
}


async function saveEnterToFinish(checked) {
    try {
        const res = await apiFetch('/api/settings', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({system_hotkeys: {enter_to_finish: checked}})
        });
        if (!res.ok) throw new Error('HTTP ' + res.status);
        showSettingsToast('Enregistré', true);
    } catch (e) {
        console.error('Erreur sauvegarde:', e);
        showSettingsToast('Échec de l\'enregistrement — vérifiez la connexion', false);
    }
}

async function saveAudioSetting(key, value) {
    // Cache immédiat pour éviter le flash au rechargement
    localStorage.setItem('vicsia_audio_' + key, value);
    try {
        await apiFetch('/api/settings', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({audio: {[key]: parseInt(value)}})
        });
    } catch (e) {
        console.error('Erreur sauvegarde audio:', e);
    }
}

async function savePermission(key, value) {
    try {
        await apiFetch('/api/settings', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({permissions: {[key]: value}})
        });
    } catch (e) {
        console.error('Erreur sauvegarde permission:', e);
    }
}

// === Disposition clavier ===
async function loadKeyboardLayout() {
    try {
        const res = await fetch('/api/settings/keyboard-detected');
        const data = await res.json();
        const det = data.detected || {};
        const detName = det.name || 'Inconnu';
        const detFamily = (det.family || 'qwerty').toUpperCase();
        const el = document.getElementById('keyboard-detected');
        if (el) {
            el.textContent = 'Détecté : ' + detName + ' (' + detFamily + ')';
        }
        const sel = document.getElementById('keyboard-layout-override');
        if (sel) sel.value = data.override || 'auto';
    } catch (e) {
        console.error('Erreur detection clavier:', e);
        const el = document.getElementById('keyboard-detected');
        if (el) el.textContent = 'Détection indisponible';
    }
}

async function saveKeyboardLayout(layout) {
    try {
        const res = await apiFetch('/api/settings', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({keyboard: {layout: layout}})
        });
        if (!res.ok) throw new Error('HTTP ' + res.status);
        // Le map en cache des pages hotkeys/agents devra etre re-fetch au prochain ouvert.
        showSettingsToast('Enregistré', true);
    } catch (e) {
        console.error('Erreur sauvegarde layout:', e);
        showSettingsToast('Échec de l\'enregistrement — vérifiez la connexion', false);
    }
}

async function checkUpdates() {
    const statusEl = document.getElementById('update-status-text');
    const btnCheck = document.getElementById('btn-check-update');
    const btnApply = document.getElementById('btn-apply-update');
    const btnDownload = document.getElementById('btn-download-update');
    const bannerEl = document.getElementById('update-banner');
    const changelogEl = document.getElementById('update-changelog');
    const errorEl = document.getElementById('update-error');

    btnCheck.disabled = true;
    btnCheck.textContent = 'Vérification...';
    btnApply.style.display = 'none';
    btnDownload.style.display = 'none';
    bannerEl.style.display = 'none';
    changelogEl.style.display = 'none';
    errorEl.style.display = 'none';
    statusEl.textContent = 'Vérification en cours...';

    try {
        const res = await fetch('/api/update/check?force=1');
        const data = await res.json();
        lastUpdateCheck = data;

        // Version actuelle
        if (data.current_version) {
            const modeLabel = data.mode === 'development' ? ' (dev)' : '';
            document.getElementById('current-version').textContent = 'v' + data.current_version + modeLabel;
        }

        if (data.error) {
            errorEl.textContent = data.error;
            errorEl.style.display = 'block';
            statusEl.textContent = '';
        } else if (data.update_available && data.latest_version) {
            const commitInfo = data.commits_behind ? ` (${data.commits_behind} commits)` : '';
            const sizeInfo = data.download_size ? ` (${(data.download_size / 1024 / 1024).toFixed(1)} MB)` : '';

            // Banniere
            document.getElementById('update-banner-title').textContent = 'Nouvelle version disponible: v' + data.latest_version;
            document.getElementById('update-banner-subtitle').textContent = 'Prête à installer' + commitInfo + sizeInfo;
            bannerEl.style.display = 'block';
            statusEl.textContent = '';

            // Changelog (sanitise via textContent)
            if (data.changelog && data.changelog.length > 0) {
                const list = document.getElementById('changelog-list');
                list.innerHTML = '';
                data.changelog.forEach(function(c) {
                    const li = document.createElement('li');
                    li.textContent = c;
                    list.appendChild(li);
                });
                changelogEl.style.display = 'block';
            }

            // Packagé : auto-install depuis R2 (intégrité SHA-256 + signature OS
            // vérifiée au téléchargement). Dev : git pull. Dans tous les cas → Installer.
            btnApply.style.display = 'inline-flex';

            // Effacer le dismiss si nouvelle version
            const dismissed = localStorage.getItem('update_dismissed_version');
            if (dismissed && dismissed !== data.latest_version) {
                localStorage.removeItem('update_dismissed_version');
            }
        } else {
            statusEl.textContent = 'Vicsia est à jour.';
            statusEl.className = 'text-muted';
        }
    } catch (e) {
        console.error('Erreur verification MAJ:', e);
        errorEl.textContent = 'Erreur de connexion au serveur.';
        errorEl.style.display = 'block';
        statusEl.textContent = '';
    }

    btnCheck.disabled = false;
    btnCheck.textContent = 'Vérifier';
}

async function applyUpdate() {
    if (window.updateInProgress) return;

    const isDev = lastUpdateCheck?.mode === 'development';

    let confirmMsg = 'Installer la mise à jour ? L\'application redémarrera automatiquement.';
    if (isDev) confirmMsg = 'Installer la mise à jour ? Quittez puis relancez l\'application pour finaliser.';
    if (!confirm(confirmMsg)) return;

    window.updateInProgress = true;
    const btnApply = document.getElementById('btn-apply-update');
    const progressEl = document.getElementById('update-progress');
    const progressMsg = document.getElementById('update-progress-msg');
    const progressBar = document.getElementById('progress-bar-fill');
    const errorEl = document.getElementById('update-error');

    btnApply.disabled = true;
    errorEl.style.display = 'none';
    progressEl.style.display = 'block';
    progressMsg.textContent = isDev ? 'Téléchargement (git pull + uv sync)...' : 'Téléchargement de la mise à jour...';
    progressBar.style.width = '30%';

    const controller = new AbortController();
    const timeoutId = setTimeout(function() { controller.abort(); }, 120000);

    try {
        const res = await apiFetch('/api/update/apply', {method: 'POST', signal: controller.signal});
        clearTimeout(timeoutId);
        const data = await res.json();

        progressBar.style.width = '100%';

        if (data.success) {
            if (data.action === 'quit_for_update') {
                progressMsg.textContent = data.message + ' L\'application va redémarrer...';
            } else {
                progressMsg.textContent = data.message;
            }
            btnApply.style.display = 'none';
        } else {
            progressEl.style.display = 'none';
            if (data.action === 'download_dmg' && lastUpdateCheck?.download_url) {
                errorEl.innerHTML = '';
                const txt = document.createTextNode(data.message + ' ');
                const link = document.createElement('a');
                link.href = lastUpdateCheck.download_url;
                link.target = '_blank';
                link.textContent = 'Télécharger manuellement';
                link.className = 'btn btn-primary btn-sm';
                link.style.marginLeft = '0.5rem';
                errorEl.appendChild(txt);
                errorEl.appendChild(link);
            } else {
                errorEl.textContent = data.message || 'Erreur lors de la mise à jour.';
            }
            errorEl.style.display = 'block';
            btnApply.disabled = false;
        }
    } catch (e) {
        clearTimeout(timeoutId);
        progressEl.style.display = 'none';
        errorEl.textContent = e.name === 'AbortError' ? 'Timeout : la mise à jour prend trop de temps.' : 'Erreur de connexion au serveur.';
        errorEl.style.display = 'block';
        btnApply.disabled = false;
    } finally {
        window.updateInProgress = false;
    }
}

function dismissUpdate() {
    if (lastUpdateCheck?.latest_version) {
        localStorage.setItem('update_dismissed_version', lastUpdateCheck.latest_version);
    }
    document.getElementById('update-banner').style.display = 'none';
}

// === Account section ===
async function loadAccount() {
    try {
        const res = await fetch('/api/auth/status');
        const auth = await res.json();

        if (!auth.configured) return; // Mode local, pas de section compte

        document.getElementById('account-section').style.display = '';
        document.getElementById('settings-account').style.display = '';
        document.getElementById('settings-toc-account').style.display = '';
        // Zone avancée "Supprimer mon compte" est aussi conditionnée à Supabase configuré
        document.getElementById('advanced-account-section').style.display = '';
        // Section Entreprise (authentifié uniquement)
        if (auth.authenticated) loadCompany();

        // Encart phase pilote (visible si app_mode=beta_free)
        if (auth.app_mode === 'beta_free' && auth.beta_until) {
            const notice = document.getElementById('pilot-phase-notice');
            const untilEl = document.getElementById('pilot-phase-until');
            if (notice && untilEl) {
                const d = new Date(auth.beta_until);
                untilEl.textContent = d.toLocaleDateString('fr-FR', {day:'numeric', month:'long', year:'numeric'});
                notice.style.display = '';
            }
        }

        if (auth.authenticated) {
            document.getElementById('account-email').value = auth.user.email;
            const plan = auth.subscription?.plan || 'free';
            window._currentPlan = plan;
            const badge = document.getElementById('account-plan-badge');
            const displayName = auth.subscription?.limits?.display_name || plan.charAt(0).toUpperCase() + plan.slice(1);
            badge.textContent = displayName;
            badge.className = 'plan-badge ' + plan;

            // Bouton unique d'abonnement : libellé contextuel selon le plan
            const subBtn = document.getElementById('btn-subscription');
            if (plan === 'free') {
                subBtn.textContent = 'Passer à Starter';
            } else {
                subBtn.textContent = 'Gérer mon abonnement';
            }
            subBtn.style.display = '';

            // Afficher les limites si disponibles
            const limits = auth.subscription?.limits;
            if (limits) {
                document.getElementById('plan-limits').style.display = '';
                // Charger l'usage courant pour remplir les barres
                loadUsage(limits, plan);
            }
        }
    } catch (e) {}
}

async function handleSubscription() {
    const plan = window._currentPlan || 'free';
    if (plan === 'free') {
        window.location.href = '/pricing';
        return;
    }
    // Plan payant : ouvrir le portail client Polar (côté serveur via webbrowser.open)
    try {
        const res = await apiFetch('/api/billing/portal');
        if (res.ok) {
            showAccountAlert("Le portail d'abonnement s'ouvre dans votre navigateur.", false);
        } else {
            showAccountAlert("Impossible d'ouvrir le portail d'abonnement.", true);
        }
    } catch (e) {
        showAccountAlert("Erreur réseau", true);
    }
}

async function loadUsage(limits, plan) {
    try {
        const res = await fetch('/api/auth/usage');
        if (!res.ok) return;
        const usage = await res.json();
        showLimit('agents', usage.agents, limits.max_agents);
        showLimit('search', usage.web_search_per_day, limits.max_web_search_per_day);
        // Budget IA du jour (en %) masqué volontairement — approche plus posée, on ne
        // montre pas un % anxiogène au début. Réactiver : décommenter la ligne ci-dessous.
        // showLimit('ia', usage.llm_tokens_per_day, limits.max_llm_tokens_per_day, null, true);
    } catch (e) {
        showLimit('agents', 0, limits.max_agents);
    }
}

function showLimit(type, current, max, unit, asPercent) {
    if (max === undefined) return;
    const row = document.getElementById('limit-' + type);
    if (!row) return;

    if (max === -1) {
        // Illimite - ne pas afficher
        return;
    }

    if (max === 0) {
        // Non disponible sur ce plan
        row.style.display = '';
        document.getElementById('val-' + type).textContent = 'non disponible';
        const fill = document.getElementById('fill-' + type);
        if (fill) { fill.style.width = '0%'; fill.className = 'limit-fill'; }
        return;
    }

    row.style.display = '';
    const pct = max > 0 ? Math.min(100, Math.round((current / max) * 100)) : 0;
    if (asPercent) {
        // Affichage en % (ex. budget IA du jour) — un nombre de tokens est abstrait
        document.getElementById('val-' + type).textContent = pct + ' %';
    } else {
        const cur = Math.round(current * 10) / 10;
        const suffix = unit ? ' ' + unit : '';
        document.getElementById('val-' + type).textContent = cur + ' / ' + max + suffix;
    }

    const fill = document.getElementById('fill-' + type);
    fill.style.width = pct + '%';
    fill.setAttribute('aria-valuenow', pct);
    fill.className = 'limit-fill' + (pct >= 100 ? ' full' : pct >= 80 ? ' warn' : '');
}

function showAccountAlert(msg, isError) {
    const el = document.getElementById('account-alert');
    el.textContent = msg;
    el.style.display = 'block';
    el.style.background = isError ? '#fef2f2' : '#f0fdf4';
    el.style.color = isError ? 'var(--danger)' : '#16a34a';
    el.style.border = isError ? '1px solid #fecaca' : '1px solid #bbf7d0';
}

async function changePassword() {
    const email = document.getElementById('account-email').value;
    if (!email) return;

    try {
        const res = await apiFetch('/api/auth/forgot-password', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({email})
        });
        const data = await res.json();
        showAccountAlert(data.success ? 'Email de réinitialisation envoyé.' : (data.message || 'Erreur'), !data.success);
    } catch (e) {
        showAccountAlert('Erreur réseau', true);
    }
}

async function exportData() {
    // Bouton supprimé — export disponible sur demande à privacy@vicsia.fr
}

async function deleteAccount() {
    if (!confirm('Supprimer définitivement votre compte et toutes vos données ?\n\nCette action est IRRÉVERSIBLE.')) return;
    if (!confirm('Êtes-vous vraiment sûr ? Toutes vos données seront perdues.')) return;

    try {
        const res = await apiFetch('/api/auth/account', {method: 'DELETE'});
        const data = await res.json();

        if (data.success) {
            window.location.href = '/login';
        } else {
            showAccountAlert(data.error || 'Erreur lors de la suppression', true);
        }
    } catch (e) {
        showAccountAlert('Erreur réseau', true);
    }
}

async function doLogout() {
    try {
        await apiFetch('/api/auth/logout', {method: 'POST'});
        window.location.href = '/login';
    } catch (e) {
        showAccountAlert('Erreur réseau', true);
    }
}

// === Vocabulaire STT ===
let vocabWords = [];
let vocabMaxWords = 50;

async function loadVocabulary() {
    try {
        const res = await apiFetch('/api/settings/vocabulary');
        const data = await res.json();
        vocabWords = data.words || [];
        vocabMaxWords = data.max_words;
        renderVocabTags();
    } catch (e) {
        console.error('Erreur chargement vocabulaire:', e);
    }
}

function renderVocabTags() {
    const container = document.getElementById('vocab-tags');
    const limitEl = document.getElementById('vocab-limit');
    if (!container) return;
    container.innerHTML = vocabWords.map(w =>
        `<span style="background:var(--bg-hover);padding:0.2rem 0.6rem;border-radius:999px;font-size:0.82rem;display:inline-flex;align-items:center;gap:0.35rem;">
            ${w.replace(/</g,'&lt;')} <button onclick="removeVocabWord('${w.replace(/'/g,"&#39;")}')" aria-label="Supprimer ${w.replace(/</g,'&lt;').replace(/'/g,"&#39;")}" style="cursor:pointer;color:var(--text-muted);line-height:1;background:none;border:none;padding:0;font-size:inherit;">&#10005;</button>
        </span>`
    ).join('');
    const maxLabel = vocabMaxWords === -1 ? 'Illimité' : vocabMaxWords;
    limitEl.textContent = `${vocabWords.length} / ${maxLabel} mots`;
}

async function addVocabWord() {
    const input = document.getElementById('vocab-input');
    const tokens = input.value.split(/[\s,]+/).map(t => t.trim()).filter(t => /[a-zA-ZÀ-ÿ]/.test(t));
    if (!tokens.length) return;
    input.value = '';
    for (const word of tokens) {
        if (vocabMaxWords !== -1 && vocabWords.length >= vocabMaxWords) {
            alert(`Limite atteinte (${vocabMaxWords} mots max sur votre plan)`);
            break;
        }
        if (!vocabWords.includes(word)) vocabWords = [...vocabWords, word];
    }
    await saveVocabulary();
}

async function removeVocabWord(word) {
    vocabWords = vocabWords.filter(w => w !== word);
    await saveVocabulary();
}

async function saveVocabulary() {
    try {
        const res = await apiFetch('/api/settings/vocabulary', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({words: vocabWords})
        });
        if (!res.ok) throw new Error('HTTP ' + res.status);
        renderVocabTags();
    } catch (e) {
        console.error('Erreur sauvegarde vocabulaire:', e);
        showSettingsToast('Échec de l\'enregistrement — vérifiez la connexion', false);
    }
}

// === Import/Export Config ===
async function importConfig(input) {
    const file = input.files[0];
    if (!file) return;

    if (file.size > 2 * 1024 * 1024) {
        showImportResult('Fichier trop volumineux (max 2 Mo)', true);
        input.value = '';
        return;
    }

    if (!confirm('Importer cette configuration ?\nLes éléments existants seront conservés, seuls les nouveaux seront ajoutés.')) {
        input.value = '';
        return;
    }

    try {
        const text = await file.text();
        const data = JSON.parse(text);

        const res = await apiFetch('/api/settings/import-config', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        });
        const result = await res.json();

        if (result.ok) {
            const s = result.imported;
            let msg = 'Import réussi. ';
            if (s.agents) {
                msg += 'Agents: ' + s.agents.imported + ' importés';
                if (s.agents.skipped > 0) msg += ', ' + s.agents.skipped + ' ignorés';
                if (s.agents.hotkey_conflicts && s.agents.hotkey_conflicts.length > 0) {
                    msg += ' (' + s.agents.hotkey_conflicts.length + ' conflits hotkey)';
                }
                msg += '. ';
            }
            if (s.mcps) {
                msg += 'MCPs: ' + s.mcps.custom_imported + ' importés';
                if (s.mcps.builtin_updated > 0) msg += ', ' + s.mcps.builtin_updated + ' builtins maj';
                msg += '. ';
            }
            showImportResult(msg, false);
        } else {
            showImportResult(result.error || 'Erreur inconnue', true);
        }
    } catch (e) {
        showImportResult('Fichier JSON invalide: ' + e.message, true);
    }

    input.value = '';
}

function showImportResult(msg, isError) {
    const el = document.getElementById('import-result');
    el.textContent = msg;
    el.style.display = 'block';
    el.style.background = isError ? '#fef2f2' : '#f0fdf4';
    el.style.color = isError ? 'var(--danger)' : '#16a34a';
    el.style.border = isError ? '1px solid #fecaca' : '1px solid #bbf7d0';
}

async function factoryReset() {
    if (!confirm('Réinitialiser l\'application ?\n\nTous vos agents, raccourcis et paramètres seront supprimés.')) return;
    if (!confirm('Êtes-vous vraiment sûr ?\nL\'application redémarrera avec la configuration par défaut.')) return;
    try {
        const res = await apiFetch('/api/settings/reset', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({preserve_memory: false})});
        const data = await res.json();
        if (data.ok) {
            alert('Application réinitialisée. Vicsia va redémarrer.');
            apiFetch('/api/restart', {method: 'POST'});
        } else {
            alert('Erreur : ' + (data.error || 'Échec'));
        }
    } catch (e) {
        alert('Erreur: ' + e.message);
    }
}

async function quitVicsia() {
    if (!confirm('Quitter Vicsia ?\n\nLa capsule, les raccourcis clavier et les serveurs MCP seront arrêtés.')) return;
    try {
        // Best-effort POST — the server will tear itself down so the response
        // may never come back. We don't wait for it.
        apiFetch('/api/quit', {method: 'POST'}).catch(() => {});
    } catch (e) {
        // Ignore — the server going away is the expected outcome.
    }
}

async function loadCompany() {
    try {
        const res = await apiFetch('/api/auth/company');
        if (!res.ok) return;
        const d = await res.json();
        const section = document.getElementById('company-section');
        const linked = document.getElementById('company-linked');
        if (!section) return;
        if (d.company) {
            // Rattaché : on affiche la section + le bloc "lié" (sync).
            section.style.display = '';
            document.getElementById('company-name').textContent = d.company.name || '';
            linked.style.display = '';
        } else {
            // Non rattaché : la liaison entreprise se fait côté admin (provisioning/
            // device binding). On masque tout le bloc.
            section.style.display = 'none';
            linked.style.display = 'none';
        }
    } catch(e) {}
}

async function syncCompany() {
    const msgEl = document.getElementById('company-sync-msg');
    msgEl.style.display = '';
    msgEl.textContent = 'Synchronisation...';
    try {
        const res = await apiFetch('/api/auth/sync-company', {method: 'POST'});
        const d = await res.json();
        msgEl.textContent = d.installed > 0 ? `${d.installed} agent(s) installé(s).` : 'Déjà à jour.';
        setTimeout(() => { msgEl.style.display = 'none'; }, 3000);
    } catch(e) {
        msgEl.textContent = 'Erreur réseau';
    }
}

loadSettings();
loadAccount();
loadVocabulary();
loadKeyboardLayout();
loadCachedUpdateStatus();
checkSystemHealth();

/**
 * État du système (v3) — reprend la logique de l'ancienne page /help
 * (checkHealth/renderHealthChecks) avec le markup/CSS V3 (variables --card/
 * --border/--text, compatible dark/light). GET /api/system-health ->
 * {ok, checks: [{id, name, ok, message, fix}], platform}.
 */
async function checkSystemHealth() {
    const container = document.getElementById('syshealth-checks');
    container.innerHTML = '<p class="text-muted">Vérification en cours...</p>';

    try {
        const res = await fetch('/api/system-health');
        const data = await res.json();
        renderSystemHealth(data);
    } catch (e) {
        container.innerHTML = '<p class="text-muted">Erreur de connexion au serveur</p>';
    }
}

function renderSystemHealth(data) {
    const container = document.getElementById('syshealth-checks');

    if (!data.checks || data.checks.length === 0) {
        container.innerHTML = '<p class="text-muted">Aucune vérification disponible</p>';
        return;
    }

    container.innerHTML = '';
    data.checks.forEach(function(check) {
        const row = document.createElement('div');
        row.className = 'syshealth-item' + (check.ok ? '' : ' syshealth-item-error');

        const icon = document.createElement('span');
        icon.className = 'syshealth-icon';
        icon.textContent = check.ok ? '✅' : '❌';
        row.appendChild(icon);

        const body = document.createElement('div');
        body.className = 'syshealth-body';

        const name = document.createElement('div');
        name.className = 'syshealth-name';
        name.textContent = check.name;
        body.appendChild(name);

        const message = document.createElement('div');
        message.className = 'syshealth-message';
        message.textContent = check.message;
        body.appendChild(message);

        if (!check.ok && check.fix) {
            const fix = document.createElement('div');
            fix.className = 'syshealth-fix';
            fix.textContent = '→ ' + check.fix;
            body.appendChild(fix);
        }

        row.appendChild(body);
        container.appendChild(row);
    });
}

/**
 * Beta.14 : affichage automatique du bandeau MAJ au chargement de la page
 * via le cache hebdomadaire persisté par le scheduler. N'effectue PAS de
 * check réseau — l'utilisateur a le bouton "Vérifier" pour ça.
 */
async function loadCachedUpdateStatus() {
    try {
        const res = await fetch('/api/update/cached-status');
        if (!res.ok) return;
        const data = await res.json();
        if (!data.update_available || !data.latest_version) return;
        // Réutilise les mêmes éléments DOM que checkUpdates() pour la
        // cohérence visuelle. Pas de stockage dans lastUpdateCheck pour
        // éviter de short-circuiter le path applyUpdate qui a besoin du
        // mode/update_method que le cache n'a pas.
        const banner = document.getElementById('update-banner');
        const status = document.getElementById('update-status-text');
        document.getElementById('update-banner-title').textContent =
            'Nouvelle version disponible: v' + data.latest_version;
        document.getElementById('update-banner-subtitle').textContent =
            'Cliquez sur Vérifier pour préparer l\'installation';
        banner.style.display = 'block';
        status.textContent = '';
        // Changelog (sanitise via textContent)
        if (data.changelog && data.changelog.length > 0) {
            const list = document.getElementById('changelog-list');
            list.innerHTML = '';
            data.changelog.forEach(function(c) {
                const li = document.createElement('li');
                li.textContent = c;
                list.appendChild(li);
            });
            document.getElementById('update-changelog').style.display = 'block';
        }
    } catch (e) {
        // Silencieux : pas de check au load = pas de pollution UI sur erreur réseau.
        console.debug('[update] cached-status fetch failed', e);
    }
}
</script>
{% endblock %}