{% extends "base.html" %}

{% block content %}
<section class="hotkeys-page">
    <div class="section-header">
        <h2>Raccourcis</h2>
    </div>
    <p class="section-desc">Gerez tous les raccourcis clavier (Profils et Agents).</p>

    <!-- Section 1: Raccourcis utilises (Profils + Agents) -->
    <div class="hotkeys-section hotkeys-used-section">
        <h3>Utilises <span id="count-used" class="count-badge">0</span></h3>
        <div id="hotkeys-used" class="hotkeys-used-list">
            <p class="empty">Aucun raccourci utilise</p>
        </div>
    </div>

    <!-- Section 2: Raccourcis disponibles -->
    <div class="hotkeys-section hotkeys-available-section">
        <div class="section-header-inline">
            <h3>Disponibles <span id="count-available" class="count-badge">0</span></h3>
            <button class="btn btn-small" onclick="openAddModal()">+ Ajouter</button>
        </div>
        <div id="hotkeys-available" class="hotkeys-chips-grid">
            <p class="empty">Chargement...</p>
        </div>
    </div>
</section>

<!-- Modal ajout nouveau raccourci -->
<div id="add-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Ajouter un raccourci</h3>
            <button class="modal-close" onclick="closeAddModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-row">
                <label for="new-hotkey">Raccourci</label>
                <input type="text" id="new-hotkey" class="input-field" placeholder="Appuyez sur les touches..." readonly>
                <p class="form-hint">Cliquez dans le champ puis appuyez sur les touches</p>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeAddModal()">Annuler</button>
            <button class="btn" onclick="addHotkey()">Ajouter</button>
        </div>
    </div>
</div>

<!-- Modal reassignation -->
<div id="reassign-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Modifier le raccourci</h3>
            <button class="modal-close" onclick="closeReassignModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="reassign-info">
                <span class="reassign-name" id="reassign-name">Transcription</span>
                <span class="reassign-type" id="reassign-type-badge">Profil</span>
            </div>
            <div class="form-row">
                <label>Nouveau raccourci</label>
                <select id="reassign-select" class="input-field">
                    <option value="">-- Aucun raccourci --</option>
                </select>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeReassignModal()">Annuler</button>
            <button class="btn" onclick="applyReassign()">Appliquer</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    let unifiedData = { used: [], available: [] };
    let capturingHotkey = false;
    let reassignTarget = null; // { type, id, name }

    async function fetchHotkeys() {
        try {
            const res = await fetch('/api/hotkeys/all');
            unifiedData = await res.json();
            renderHotkeys();
        } catch (e) {
            console.error('Erreur hotkeys:', e);
        }
    }

    function renderHotkeys() {
        const usedList = document.getElementById('hotkeys-used');
        const availableList = document.getElementById('hotkeys-available');

        const used = unifiedData.used || [];
        const available = unifiedData.available || [];

        // Update counts
        document.getElementById('count-used').textContent = used.length;
        document.getElementById('count-available').textContent = available.length;

        // Render used hotkeys (table avec type badge)
        if (used.length === 0) {
            usedList.innerHTML = '<p class="empty">Aucun raccourci utilise</p>';
        } else {
            usedList.innerHTML = `<table class="hotkeys-used-table">
                ${used.map(h => `
                    <tr>
                        <td class="hotkey-key"><kbd>${h.label}</kbd></td>
                        <td class="hotkey-name">${h.name}</td>
                        <td class="hotkey-type">
                            <span class="type-badge type-${h.type}">${h.type === 'profile' ? 'Profil' : 'Agent'}</span>
                        </td>
                        <td class="hotkey-action">
                            <button class="btn-icon" onclick="openReassignModal('${h.type}', '${h.id}', '${h.name}', '${h.key}')" title="Modifier">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                    <path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5Z"></path>
                                </svg>
                            </button>
                        </td>
                    </tr>
                `).join('')}
            </table>`;
        }

        // Render available hotkeys (chips grid)
        if (available.length === 0) {
            availableList.innerHTML = '<p class="empty">Aucun raccourci disponible. Ajoutez-en un!</p>';
        } else {
            availableList.innerHTML = available.map(h => {
                const customClass = h.custom ? 'custom' : '';
                return `<span class="hotkey-chip ${customClass}">
                    <kbd>${h.label}</kbd>
                    <button class="chip-delete" onclick="removeHotkey('${h.key}')" title="Supprimer">&times;</button>
                </span>`;
            }).join('');
        }
    }

    // === Modal Ajout ===
    function openAddModal() {
        document.getElementById('add-modal').style.display = 'flex';
        document.getElementById('new-hotkey').value = '';
        document.getElementById('new-hotkey').dataset.key = '';

        const input = document.getElementById('new-hotkey');
        input.addEventListener('focus', startCapture);
        input.addEventListener('blur', stopCapture);
        setTimeout(() => input.focus(), 100);
    }

    function closeAddModal() {
        document.getElementById('add-modal').style.display = 'none';
        stopCapture();
    }

    function startCapture() {
        capturingHotkey = true;
        document.addEventListener('keydown', captureKey);
    }

    function stopCapture() {
        capturingHotkey = false;
        document.removeEventListener('keydown', captureKey);
    }

    function captureKey(e) {
        if (!capturingHotkey) return;

        e.preventDefault();
        e.stopPropagation();

        if (['Control', 'Shift', 'Alt', 'Meta'].includes(e.key)) {
            return;
        }

        let hotkey = '';
        if (e.ctrlKey) hotkey += 'ctrl+';
        if (e.shiftKey) hotkey += 'shift+';
        if (e.altKey) hotkey += 'alt+';

        let key = e.key.toLowerCase();
        if (key === ' ') key = 'space';
        if (key.startsWith('arrow')) key = key.replace('arrow', '').toLowerCase();

        hotkey += key;

        const label = hotkey.split('+').map(part =>
            part.charAt(0).toUpperCase() + part.slice(1)
        ).join('+');
        document.getElementById('new-hotkey').value = label;
        document.getElementById('new-hotkey').dataset.key = hotkey;
    }

    async function addHotkey() {
        const input = document.getElementById('new-hotkey');
        const key = input.dataset.key || input.value.toLowerCase().replace(/\s/g, '');
        const label = input.value.trim();

        if (!key) {
            alert('Veuillez capturer un raccourci');
            return;
        }

        try {
            const res = await fetch('/api/hotkeys', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({key, label: label || null})
            });
            const data = await res.json();

            if (data.ok) {
                closeAddModal();
                fetchHotkeys();
            } else {
                alert(data.error || 'Erreur lors de l\'ajout');
            }
        } catch (e) {
            console.error('Erreur ajout:', e);
            alert('Erreur lors de l\'ajout');
        }
    }

    async function removeHotkey(key) {
        if (!confirm(`Supprimer ce raccourci du pool ?`)) return;

        try {
            const res = await fetch(`/api/hotkeys/${encodeURIComponent(key)}`, {
                method: 'DELETE'
            });
            const data = await res.json();

            if (data.ok) {
                fetchHotkeys();
            } else {
                alert(data.error || 'Erreur lors de la suppression');
            }
        } catch (e) {
            console.error('Erreur suppression:', e);
            alert('Erreur lors de la suppression');
        }
    }

    // === Modal Reassignation ===
    function openReassignModal(type, id, name, currentKey) {
        reassignTarget = { type, id, name, currentKey };

        document.getElementById('reassign-name').textContent = name;
        const badge = document.getElementById('reassign-type-badge');
        badge.textContent = type === 'profile' ? 'Profil' : 'Agent';
        badge.className = `reassign-type type-badge type-${type}`;

        // Remplir le select avec les options disponibles
        const select = document.getElementById('reassign-select');
        select.innerHTML = '<option value="">-- Retirer le raccourci --</option>';

        // Ajouter le raccourci actuel en premier
        if (currentKey) {
            const label = currentKey.split('+').map(p => p.charAt(0).toUpperCase() + p.slice(1)).join('+');
            select.innerHTML += `<option value="${currentKey}" selected>${label} (actuel)</option>`;
        }

        // Ajouter les disponibles
        (unifiedData.available || []).forEach(h => {
            select.innerHTML += `<option value="${h.key}">${h.label}</option>`;
        });

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

    function closeReassignModal() {
        document.getElementById('reassign-modal').style.display = 'none';
        reassignTarget = null;
    }

    async function applyReassign() {
        if (!reassignTarget) return;

        const newKey = document.getElementById('reassign-select').value;

        try {
            const res = await fetch('/api/hotkeys/reassign', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    type: reassignTarget.type,
                    id: reassignTarget.id,
                    new_key: newKey
                })
            });
            const data = await res.json();

            if (data.ok) {
                closeReassignModal();
                fetchHotkeys();
            } else {
                alert(data.error || 'Erreur lors de la reassignation');
            }
        } catch (e) {
            console.error('Erreur reassign:', e);
            alert('Erreur lors de la reassignation');
        }
    }

    // Init
    fetchHotkeys();
    setInterval(fetchHotkeys, 10000);

    // Fermer modals avec Escape
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            if (document.getElementById('add-modal').style.display !== 'none') {
                closeAddModal();
            }
            if (document.getElementById('reassign-modal').style.display !== 'none') {
                closeReassignModal();
            }
        }
    });
</script>
{% endblock %}