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

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

<!-- Raccourcis système -->
<h2 class="section-title" style="margin-bottom: 0.5rem; font-size: 1rem;">Raccourcis système</h2>
<p class="text-muted text-sm" style="margin-bottom: 0.75rem;">Raccourcis réservés par Vicsia. Cliquez sur Éditer pour modifier (redémarrage requis).</p>
<table id="system-table">
    <thead>
        <tr>
            <th>Description</th>
            <th style="width:200px">Raccourci</th>
            <th style="width:220px">Mode</th>
            <th style="width:80px">Actions</th>
        </tr>
    </thead>
    <tbody id="system-body">
    </tbody>
</table>

<!-- Modal édition raccourci système -->
<div class="modal-overlay" id="modal-system-hotkey">
    <div class="modal" style="max-width: 400px;">
        <div class="modal-header">
            <h2 class="modal-title">Modifier le raccourci</h2>
            <button class="modal-close" onclick="closeSystemModal()">&times;</button>
        </div>
        <div class="modal-body">
            <p class="text-muted text-sm mb-2" id="system-hotkey-desc"></p>
            <input type="hidden" id="system-hotkey-id">
            <input type="text"
                   id="system-hotkey-input"
                   class="form-input"
                   placeholder="Appuyez sur une combinaison..."
                   readonly>
            <p id="system-hotkey-error" class="text-danger text-sm mt-1" style="display: none;"></p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeSystemModal()">Annuler</button>
            <button class="btn btn-primary" onclick="saveSystemHotkey()" id="btn-save-system">Enregistrer</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// === Raccourcis système ===

async function loadSystemHotkeys() {
    try {
        const res = await fetch('/api/hotkeys/system');
        const data = await res.json();
        renderSystem(data.hotkeys || []);
    } catch (e) {
        console.error('Erreur chargement system hotkeys:', e);
    }
}

let systemHotkeys = [];

function renderSystem(hotkeys) {
    systemHotkeys = hotkeys;
    const tbody = document.getElementById('system-body');

    if (hotkeys.length === 0) {
        tbody.innerHTML = `<tr><td colspan="4" class="text-muted text-center">Aucun raccourci système</td></tr>`;
        return;
    }

    tbody.innerHTML = hotkeys.map(h => {
        const editDisabled = h.editable === false || isClipboardMode(h);
        const editTitle = h.editable === false ? 'Non modifiable'
            : isClipboardMode(h) ? 'Pas de raccourci en mode Presse-papier'
            : '';
        return `
        <tr>
            <td>${h.description}</td>
            <td>${renderShortcutCell(h)}</td>
            <td>${renderModeCell(h)}</td>
            <td class="actions">
                <button class="btn btn-ghost btn-sm" onclick="editSystemHotkey('${h.id}')" ${editDisabled ? `disabled title="${editTitle}"` : ''}>
                    Éditer
                </button>
            </td>
        </tr>
    `;
    }).join('');
}

function isClipboardMode(h) {
    return h.mode === 'clipboard';
}

function renderShortcutCell(h) {
    if (isClipboardMode(h)) {
        return `<span class="badge badge-muted">Presse-papier</span>`;
    }
    return `<span class="hotkey-badge">${h.label}</span>`;
}

function renderModeCell(h) {
    if (!h.mode_options) {
        return `<span class="text-muted">—</span>`;
    }
    const options = h.mode_options.map(opt =>
        `<option value="${opt.value}" ${opt.value === h.mode ? 'selected' : ''}>${opt.label}</option>`
    ).join('');
    return `<select class="form-select" onchange="updateHotkeyMode('${h.id}', this.value)">${options}</select>`;
}

async function updateHotkeyMode(id, mode) {
    try {
        const res = await apiFetch('/api/hotkeys/system', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ id, mode })
        });
        const data = await res.json();
        if (!data.ok) {
            console.error('Erreur update mode:', data.error);
            alert(data.error || 'Erreur lors de la mise à jour du mode');
        }
        loadSystemHotkeys();
    } catch (e) {
        console.error('Erreur:', e);
    }
}

// === Édition raccourcis système ===
let editingSystemHotkey = null;

function editSystemHotkey(id) {
    const h = systemHotkeys.find(x => x.id === id);
    if (!h) return;

    editingSystemHotkey = h;
    document.getElementById('system-hotkey-id').value = id;
    document.getElementById('system-hotkey-desc').textContent = h.description;
    document.getElementById('system-hotkey-input').value = h.label;
    document.getElementById('system-hotkey-error').style.display = 'none';
    document.getElementById('modal-system-hotkey').classList.add('open');

    ensureLayoutMap();  // pré-charge la table pour la 1ère frappe
    setTimeout(() => document.getElementById('system-hotkey-input').focus(), 50);
}

function closeSystemModal() {
    document.getElementById('modal-system-hotkey').classList.remove('open');
    editingSystemHotkey = null;
}

async function saveSystemHotkey() {
    const id = document.getElementById('system-hotkey-id').value;
    const input = document.getElementById('system-hotkey-input');
    const newKey = input.dataset.capturedKey || editingSystemHotkey?.key;

    if (!newKey) return;

    try {
        const res = await apiFetch('/api/hotkeys/system', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ id, key: newKey })
        });
        const data = await res.json();

        if (data.ok) {
            closeSystemModal();
            loadSystemHotkeys();
        } else {
            const errEl = document.getElementById('system-hotkey-error');
            errEl.textContent = data.error || 'Erreur';
            errEl.style.display = 'block';
        }
    } catch (e) {
        console.error('Erreur:', e);
    }
}

// Layout-aware capture: même table de translation que le listener Python.
// Source unique de vérité côté backend (vk_to_char OS-aware ou override
// statique). Évite la divergence Ctrl+A → Ctrl+Q sur AZERTY observée
// après les commits fac12f3 + ff033af.
let _layoutMap = null;
async function ensureLayoutMap() {
    if (_layoutMap) return _layoutMap;
    try {
        const r = await fetch('/api/hotkeys/layout-map');
        const data = await r.json();
        _layoutMap = data.map || {};
    } catch (e) {
        console.warn('[HOTKEY] layout-map fetch failed, falling back to e.key', e);
        _layoutMap = {};
    }
    return _layoutMap;
}

function captureKeyFromEvent(e) {
    if (['Control', 'Shift', 'Alt', 'Meta'].includes(e.key)) return null;
    if (e.key === 'Dead' || e.key === 'Unidentified') return null;
    if (e.key === ' ') return 'space';
    return (_layoutMap && _layoutMap[e.code]) || e.key.toLowerCase();
}

// Capture clavier pour édition système
document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('system-hotkey-input');
    if (!input) return;

    input.addEventListener('keydown', function(e) {
        e.preventDefault();
        e.stopPropagation();

        const key = captureKeyFromEvent(e);
        if (!key) return;

        const parts = [];
        if (e.ctrlKey || e.metaKey) parts.push('ctrl');
        if (e.shiftKey) parts.push('shift');
        if (e.altKey) parts.push('alt');
        parts.push(key);

        const hotkey = parts.join('+');
        input.value = formatHotkeyLabel(hotkey);
        input.dataset.capturedKey = hotkey;

        const errEl = document.getElementById('system-hotkey-error');
        if (!hotkey.includes('+') && hotkey !== 'escape') {
            errEl.textContent = 'Utilisez au moins un modificateur';
            errEl.style.display = 'block';
        } else {
            errEl.style.display = 'none';
        }
    });
});

function formatHotkeyLabel(key) {
    return key.split('+')
        .map(p => p.charAt(0).toUpperCase() + p.slice(1))
        .join('+');
}

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