{% extends "base.html" %}

{% block content %}
<section class="settings-section">
    <h2>Mises a jour</h2>
    <p class="section-desc">Version actuelle : <strong id="current-version">...</strong></p>

    <div class="update-container">
        <div class="update-actions">
            <button id="btn-check-update" class="btn" onclick="checkUpdate()">
                Rechercher une mise a jour
            </button>
            <button id="btn-apply-update" class="btn btn-primary" onclick="applyUpdate()" style="display: none;">
                Installer
            </button>
        </div>

        <div id="update-status-text" class="update-info"></div>

        <div id="update-changelog" class="update-changelog" style="display: none;">
            <h4>Nouveautes</h4>
            <ul id="changelog-list"></ul>
        </div>

        <div id="update-progress" class="update-progress" style="display: none;">
            <div class="progress-bar-container">
                <div class="progress-bar-fill"></div>
            </div>
            <p id="update-message">Installation en cours...</p>
        </div>

        <div id="update-error" class="update-error" style="display: none;"></div>
    </div>
</section>

<section class="settings-section">
    <h2>Apparence</h2>
    <p class="section-desc">Personnalisez l'interface de Vicsia.</p>
    <div class="settings-form">
        <div class="form-row toggle-row">
            <label for="dark-mode-toggle">Activer le mode sombre</label>
            <label class="toggle-switch">
                <input type="checkbox" id="dark-mode-toggle" onchange="setTheme(this.checked ? 'dark' : 'light')">
                <span class="toggle-slider"></span>
            </label>
        </div>
    </div>
</section>

<section class="settings-section">
    <h2>Audio</h2>
    <p class="section-desc">Paramètres d'enregistrement vocal.</p>
    <div class="settings-form">
        <p class="form-hint">Duree max: 5 minutes. L'enregistrement s'arrete manuellement (hotkey) ou au timeout.</p>
    </div>
    <div class="btn-group settings-actions">
        <button class="btn" onclick="saveSettings()">Sauvegarder</button>
        <button class="btn btn-secondary" onclick="resetSettings()">Reset</button>
    </div>
</section>

<p class="settings-link">
    <a href="/connections">Modeles LLM et cles API dans Connexions →</a>
</p>

<details class="settings-collapse">
    <summary class="settings-collapse-header">Reinitialisation des donnees</summary>
    <div class="settings-collapse-content">
        <p class="section-desc">
            <span class="info-icon" title="Recommande avant une desinstallation. Attention: l'historique et les configurations seront perdus.">i</span>
            Supprime les fichiers de configuration et l'historique.
        </p>

        <div class="reset-options">
            <label class="checkbox-label">
                <input type="checkbox" id="preserve-memory" checked>
                <span>Conserver le Memory</span>
            </label>
        </div>

        <div class="reset-actions">
            <button class="btn btn-danger btn-small" onclick="showResetConfirmation()">Reinitialiser</button>
            <button class="btn btn-small btn-secondary" onclick="openDataFolder()">Ouvrir le dossier</button>
        </div>
    </div>
</details>

<!-- Modal de confirmation -->
<div id="reset-modal" class="modal" style="display: none;">
    <div class="modal-overlay" onclick="hideResetConfirmation()"></div>
    <div class="modal-content">
        <h3>Confirmer la reinitialisation</h3>
        <p>Cette action va supprimer :</p>
        <ul id="reset-items-list">
            <li>Profils de transcription</li>
            <li>Agents configures</li>
            <li>Raccourcis personnalises</li>
            <li>Historique des transcriptions</li>
            <li>Clés API enregistrees</li>
        </ul>
        <p id="memory-status" class="memory-preserved">Le Memory sera conserve.</p>
        <div class="modal-actions">
            <button class="btn btn-secondary" onclick="hideResetConfirmation()">Annuler</button>
            <button class="btn btn-danger" onclick="executeReset()">Confirmer la reinitialisation</button>
        </div>
    </div>
</div>

<div id="save-status" class="save-status" style="display: none;"></div>
{% endblock %}

{% block scripts %}
<style>
    .settings-link {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }
    .settings-link a {
        color: var(--accent);
        text-decoration: none;
    }
    .settings-link a:hover {
        text-decoration: underline;
    }
</style>
<script>
    let originalSettings = {};

    async function fetchSettings() {
        try {
            const res = await fetch('/api/settings');
            const settings = await res.json();
            originalSettings = JSON.parse(JSON.stringify(settings));

        } catch (e) {
            console.error('Erreur chargement settings:', e);
            showStatus('Erreur de chargement', 'error');
        }
    }

    async function saveSettings() {
        // Audio settings are now fixed (5min max, no silence detection)
    }

    function resetSettings() {
        showStatus('Reset aux valeurs sauvegardees', 'info');
    }

    function showStatus(message, type) {
        const status = document.getElementById('save-status');
        status.textContent = message;
        status.className = 'save-status ' + type;
        status.style.display = 'block';
        setTimeout(() => { status.style.display = 'none'; }, 3000);
    }

    // ========== Update ==========

    async function checkUpdate() {
        const btn = document.getElementById('btn-check-update');
        const statusText = document.getElementById('update-status-text');
        const errorDiv = document.getElementById('update-error');

        btn.disabled = true;
        btn.textContent = 'Verification...';
        errorDiv.style.display = 'none';

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

            document.getElementById('current-version').textContent = 'v' + data.current_version;
            window.lastUpdateCheck = data;

            if (data.error) {
                errorDiv.textContent = data.error;
                errorDiv.style.display = 'block';
                statusText.textContent = '';
            } else if (data.update_available && data.latest_version) {
                const isPackaged = data.mode === 'packaged';
                const isTufup = data.update_method === 'tufup';
                const isAutoInstall = data.update_method === 'auto_install';
                const commitInfo = !isPackaged && data.commits_behind ? ` (${data.commits_behind} commits)` : '';
                const sizeInfo = data.download_size ? ` (${(data.download_size / 1024 / 1024).toFixed(1)} MB)` : '';

                let actionButton = '';
                if (isPackaged && !isTufup && !isAutoInstall) {
                    actionButton = `<a href="${data.download_url}" target="_blank" class="btn btn-primary">Telecharger</a>`;
                }

                statusText.innerHTML = `
                    <div class="update-banner available">
                        <div class="update-banner-icon">🚀</div>
                        <div class="update-banner-content">
                            <div class="update-banner-title">Nouvelle version disponible</div>
                            <div class="update-banner-subtitle">v${data.latest_version}${commitInfo}${sizeInfo} est prete</div>
                            ${isTufup ? '<div class="update-method-badge">Auto-update securise</div>' : ''}
                        </div>
                        <div class="update-banner-action">${actionButton}</div>
                    </div>
                `;

                if (data.changelog && data.changelog.length > 0) {
                    document.getElementById('changelog-list').innerHTML = data.changelog.map(c => `<li>${c}</li>`).join('');
                    document.getElementById('update-changelog').style.display = 'block';
                }

                const showInstallBtn = !isPackaged || isTufup || isAutoInstall;
                document.getElementById('btn-apply-update').style.display = showInstallBtn ? 'inline-block' : 'none';
            } else {
                statusText.innerHTML = `
                    <div class="update-banner current">
                        <div class="update-banner-icon">✓</div>
                        <div class="update-banner-content">
                            <div class="update-banner-title">Vicsia est a jour</div>
                            <div class="update-banner-subtitle">Vous utilisez la derniere version disponible</div>
                        </div>
                    </div>
                `;
                document.getElementById('update-changelog').style.display = 'none';
                document.getElementById('btn-apply-update').style.display = 'none';
            }
        } catch (e) {
            console.error('Erreur check update:', e);
            errorDiv.textContent = 'Erreur de connexion au serveur';
            errorDiv.style.display = 'block';
        }

        btn.disabled = false;
        btn.textContent = 'Verifier les mises a jour';
    }

    async function applyUpdate() {
        if (window.updateInProgress) {
            showStatus('Une mise a jour est deja en cours', 'error');
            return;
        }

        const isTufup = window.lastUpdateCheck?.update_method === 'tufup';
        const isDev = window.lastUpdateCheck?.mode === 'development';

        let confirmMsg = 'Installer la mise a jour?';
        if (isDev) {
            confirmMsg = 'Installer la mise a jour? Vous devrez ensuite cliquer sur "Relancer" dans le Dashboard.';
        } else if (isTufup) {
            confirmMsg = 'Installer la mise a jour? L\'application redemarrera automatiquement.';
        }

        if (!confirm(confirmMsg)) return;

        const progressDiv = document.getElementById('update-progress');
        const messageEl = document.getElementById('update-message');
        const applyBtn = document.getElementById('btn-apply-update');
        const errorDiv = document.getElementById('update-error');

        window.updateInProgress = true;
        progressDiv.style.display = 'block';
        applyBtn.disabled = true;
        errorDiv.style.display = 'none';

        messageEl.textContent = isTufup
            ? '📥 Telechargement de la mise a jour securisee...'
            : '📥 Telechargement des mises a jour (git pull + uv sync)...';

        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 120000);

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

            const data = await res.json();

            if (data.success) {
                document.querySelector('.progress-bar-fill').style.width = '100%';

                if (data.action === 'quit_for_update') {
                    messageEl.innerHTML = '✅ ' + data.message + '<br><span class="update-restart-hint">L\'application va redemarrer...</span>';
                    applyBtn.style.display = 'none';
                } else {
                    messageEl.innerHTML = '✅ ' + data.message + '<br><a href="/" class="btn btn-primary" style="margin-top: 10px;">Aller au Dashboard</a>';
                    applyBtn.style.display = 'none';
                }
            } else {
                progressDiv.style.display = 'none';

                if (data.action === 'download_dmg') {
                    const downloadUrl = window.lastUpdateCheck?.download_url || '#';
                    errorDiv.innerHTML = data.message + `<br><a href="${downloadUrl}" target="_blank" class="btn btn-primary" style="margin-top: 10px;">Telecharger manuellement</a>`;
                } else {
                    errorDiv.textContent = '❌ ' + data.message;
                }
                errorDiv.style.display = 'block';
                applyBtn.disabled = false;
            }
        } catch (e) {
            clearTimeout(timeoutId);
            progressDiv.style.display = 'none';
            errorDiv.textContent = e.name === 'AbortError' ? '⏱️ Timeout: la mise a jour prend trop de temps.' : '❌ Erreur de connexion au serveur.';
            errorDiv.style.display = 'block';
            applyBtn.disabled = false;
        } finally {
            window.updateInProgress = false;
        }
    }

    async function loadVersion() {
        try {
            const res = await fetch('/api/update/check');
            const data = await res.json();
            const modeLabel = data.mode === 'packaged' ? '' : ' (dev)';
            document.getElementById('current-version').textContent = 'v' + data.current_version + modeLabel;
        } catch (e) {
            document.getElementById('current-version').textContent = '?';
        }
    }

    // ========== Reset Data ==========

    function showResetConfirmation() {
        const preserveMemory = document.getElementById('preserve-memory').checked;
        const memoryStatus = document.getElementById('memory-status');

        if (preserveMemory) {
            memoryStatus.textContent = 'Le Memory sera conserve.';
            memoryStatus.className = 'memory-preserved';
        } else {
            memoryStatus.textContent = 'Le Memory sera egalement supprime.';
            memoryStatus.className = 'memory-deleted';
        }

        document.getElementById('reset-modal').style.display = 'flex';
    }

    function hideResetConfirmation() {
        document.getElementById('reset-modal').style.display = 'none';
    }

    async function executeReset() {
        const preserveMemory = document.getElementById('preserve-memory').checked;

        try {
            const res = await fetch('/api/settings/reset', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ preserve_memory: preserveMemory }),
            });
            const result = await res.json();

            hideResetConfirmation();

            if (result.ok) {
                showStatus('Donnees reinitialisees. Redemarrez l\'application.', 'success');
                setTimeout(() => window.location.reload(), 2000);
            } else {
                showStatus('Erreur: ' + (result.error || 'Echec'), 'error');
            }
        } catch (e) {
            console.error('Erreur reset:', e);
            hideResetConfirmation();
            showStatus('Erreur de connexion', 'error');
        }
    }

    function openDataFolder() {
        fetch('/api/settings/open-data-folder', { method: 'POST' })
            .catch(e => console.error('Erreur ouverture dossier:', e));
    }

    // Init
    fetchSettings();
    loadVersion();
    updateThemeUI();
</script>
{% endblock %}