{% extends "base.html" %}

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

<div class="card">
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Agent</th>
                    <th>Type</th>
                    <th style="width:150px">Raccourci actuel</th>
                    <th style="width:200px">Assigner</th>
                </tr>
            </thead>
            <tbody id="hotkeys-tbody">
                <!-- Filled by JS -->
            </tbody>
        </table>
    </div>
    <p id="no-agents" class="text-muted text-sm mt-4" style="display:none">
        Aucun agent disponible.
    </p>
</div>
{% endblock %}

{% block scripts %}
<script>
let agents = [];
let profiles = [];
let availableHotkeys = [];

async function init() {
    await Promise.all([loadAgents(), loadProfiles(), loadHotkeys()]);
    renderTable();
}

async function loadAgents() {
    const res = await fetch('/api/agents');
    agents = Object.values(await res.json());
}

async function loadProfiles() {
    const res = await fetch('/api/profiles');
    profiles = Object.values(await res.json());
}

async function loadHotkeys() {
    const res = await fetch('/api/agents/hotkeys');
    const data = await res.json();
    availableHotkeys = data.pool || [];
}

function renderTable() {
    const tbody = document.getElementById('hotkeys-tbody');
    const noAgents = document.getElementById('no-agents');

    const items = [
        ...profiles.filter(p => !p.archived).map(p => ({...p, _type: 'Simple', _source: 'profile'})),
        ...agents.filter(a => !a.archived).map(a => ({...a, _type: 'Connecte', _source: 'agent'}))
    ];

    if (items.length === 0) {
        tbody.innerHTML = '';
        noAgents.style.display = 'block';
        return;
    }

    noAgents.style.display = 'none';

    tbody.innerHTML = items.map(item => {
        const options = availableHotkeys.map(hk => {
            const isUsed = items.some(i => i.hotkey === hk && i.id !== item.id);
            const selected = item.hotkey === hk ? 'selected' : '';
            const disabled = isUsed && item.hotkey !== hk ? 'disabled' : '';
            return `<option value="${hk}" ${selected} ${disabled}>${hk}${isUsed ? ' (utilise)' : ''}</option>`;
        }).join('');

        return `
            <tr>
                <td><strong>${item.name || 'Sans nom'}</strong></td>
                <td><span class="badge badge-muted">${item._type}</span></td>
                <td>
                    ${item.hotkey ? `<span class="badge badge-primary">${item.hotkey}</span>` : '<span class="text-muted">-</span>'}
                </td>
                <td>
                    <select class="form-select" onchange="updateHotkey('${item.id}', '${item._source}', this.value)">
                        <option value="">Aucun</option>
                        ${options}
                    </select>
                </td>
            </tr>
        `;
    }).join('');
}

async function updateHotkey(id, source, hotkey) {
    const endpoint = source === 'profile' ? `/api/profiles/${id}` : `/api/agents/${id}`;
    await fetch(endpoint, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({hotkey: hotkey || null})
    });
    await Promise.all([loadAgents(), loadProfiles()]);
    renderTable();
}

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