{% extends "base.html" %}

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

<!-- Appearance -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">Apparence</h3>
    </div>
    <div class="form-group">
        <label class="flex items-center gap-2">
            <input type="checkbox" id="dark-mode-toggle" onchange="toggleDarkMode()">
            Mode sombre
        </label>
    </div>
</div>

<!-- Audio -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">Audio</h3>
    </div>
    <div class="form-group">
        <label class="form-label">Microphone</label>
        <select class="form-select" id="mic-select" onchange="updateMic()">
            <!-- Filled by JS -->
        </select>
    </div>
    <div class="form-group">
        <label class="form-label">Langue STT</label>
        <select class="form-select" id="lang-select" onchange="updateLang()">
            <option value="fr">Francais</option>
            <option value="en">Anglais</option>
            <option value="auto">Auto-detect</option>
        </select>
    </div>
</div>

<!-- Advanced -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">Avance</h3>
    </div>
    <div class="form-group">
        <label class="form-label">Delai enregistrement (ms)</label>
        <input type="number" class="form-input" id="record-delay" value="500" style="width:120px">
    </div>
    <div class="form-group">
        <label class="form-label">Silence auto-stop (s)</label>
        <input type="number" class="form-input" id="silence-timeout" value="3" style="width:120px">
    </div>
    <button class="btn btn-primary" onclick="saveAdvanced()">Enregistrer</button>
</div>

<!-- System -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Systeme</h3>
    </div>
    <div class="flex gap-2">
        <button class="btn btn-secondary" onclick="checkUpdate()">Verifier les mises a jour</button>
        <button class="btn btn-danger" onclick="resetAll()">Reinitialiser</button>
    </div>
    <p class="text-muted text-sm mt-2" id="version-info">Version: --</p>
</div>
{% endblock %}

{% block scripts %}
<script>
let settings = {};

async function init() {
    await loadSettings();
    renderSettings();
    loadVersion();
}

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

function renderSettings() {
    // Dark mode
    const darkToggle = document.getElementById('dark-mode-toggle');
    darkToggle.checked = document.documentElement.getAttribute('data-theme') === 'dark';

    // Language
    const langSelect = document.getElementById('lang-select');
    langSelect.value = settings.language || 'fr';

    // Advanced
    document.getElementById('record-delay').value = settings.record_delay || 500;
    document.getElementById('silence-timeout').value = settings.silence_timeout || 3;

    // Load microphones
    loadMicrophones();
}

async function loadMicrophones() {
    try {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const mics = devices.filter(d => d.kind === 'audioinput');
        const select = document.getElementById('mic-select');

        select.innerHTML = mics.map((mic, i) =>
            `<option value="${mic.deviceId}">${mic.label || 'Microphone ' + (i+1)}</option>`
        ).join('');

        if (settings.microphone) {
            select.value = settings.microphone;
        }
    } catch (e) {
        console.error('Cannot enumerate devices:', e);
    }
}

function toggleDarkMode() {
    const dark = document.getElementById('dark-mode-toggle').checked;
    document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
    localStorage.setItem('theme', dark ? 'dark' : 'light');
}

async function updateMic() {
    const mic = document.getElementById('mic-select').value;
    await fetch('/api/settings', {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({microphone: mic})
    });
}

async function updateLang() {
    const lang = document.getElementById('lang-select').value;
    await fetch('/api/settings', {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({language: lang})
    });
}

async function saveAdvanced() {
    const recordDelay = parseInt(document.getElementById('record-delay').value);
    const silenceTimeout = parseInt(document.getElementById('silence-timeout').value);

    await fetch('/api/settings', {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            record_delay: recordDelay,
            silence_timeout: silenceTimeout
        })
    });

    alert('Paramètres enregistres');
}

async function loadVersion() {
    try {
        const res = await fetch('/api/system-health');
        const data = await res.json();
        document.getElementById('version-info').textContent = `Version: ${data.version || 'inconnue'}`;
    } catch (e) {
        document.getElementById('version-info').textContent = 'Version: erreur';
    }
}

async function checkUpdate() {
    alert('Verification des mises a jour...');
    try {
        const res = await fetch('/api/update/check', {method: 'POST'});
        const data = await res.json();
        if (data.update_available) {
            if (confirm(`Mise a jour ${data.new_version} disponible. Installer ?`)) {
                await fetch('/api/update/install', {method: 'POST'});
            }
        } else {
            alert('Vous avez la derniere version.');
        }
    } catch (e) {
        alert('Erreur lors de la verification');
    }
}

async function resetAll() {
    if (!confirm('Reinitialiser TOUS les parametres ? Cette action est irreversible.')) return;
    await fetch('/api/settings/reset', {method: 'POST'});
    location.reload();
}

init();
</script>
{% endblock %}