{% extends "base.html" %}

{% block content %}
<div class="page-header">
    <h2 class="page-title">Agents</h2>
    <div class="flex gap-2">
        <button class="btn btn-secondary" onclick="openLibrary()">Bibliotheque</button>
        <button class="btn btn-primary" onclick="openCreateModal()">Creer un agent</button>
    </div>
</div>

<!-- Search -->
<div class="filters">
    <input type="text" class="form-input search-input" id="search-input"
           placeholder="Rechercher..." oninput="filterAgents()">
</div>

<!-- Agents Table -->
<div class="card">
    <div class="table-container">
        <table id="agents-table">
            <thead>
                <tr>
                    <th style="width:50px">
                        <select class="th-filter" id="filter-fav" onchange="filterAgents()">
                            <option value="">Fav</option>
                            <option value="yes">Oui</option>
                            <option value="no">Non</option>
                        </select>
                    </th>
                    <th>Nom</th>
                    <th style="width:120px">
                        <select class="th-filter" id="filter-type" onchange="filterAgents()">
                            <option value="">Type</option>
                            <option value="simple">Simple</option>
                            <option value="connected">Chaine</option>
                        </select>
                    </th>
                    <th style="width:120px">Raccourci</th>
                    <th style="width:80px">Statut</th>
                    <th style="width:200px">Actions</th>
                </tr>
            </thead>
            <tbody id="agents-tbody">
                <!-- Filled by JS -->
            </tbody>
        </table>
    </div>
    <p id="no-results" class="text-muted text-sm mt-4" style="display:none">
        Aucun agent trouve.
    </p>
</div>

<!-- Create/Edit Modal -->
<div class="modal-overlay" id="agent-modal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">Creer un agent</h3>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <input type="hidden" id="edit-id">
            <input type="hidden" id="edit-type">

            <div class="form-group">
                <label class="form-label">Nom</label>
                <input type="text" class="form-input" id="edit-name" placeholder="Mon agent">
            </div>

            <div class="form-group">
                <label class="form-label">Description</label>
                <input type="text" class="form-input" id="edit-description" placeholder="Description courte">
            </div>

            <div class="form-group">
                <label class="form-label">Type</label>
                <select class="form-select" id="edit-agent-type" onchange="toggleMcpSection()">
                    <option value="simple">Simple (sans MCP)</option>
                    <option value="connected">Connecte (avec MCPs)</option>
                </select>
            </div>

            <div class="form-group" id="mcp-section" style="display:none">
                <label class="form-label">MCPs</label>
                <div id="mcp-checkboxes" class="flex gap-2" style="flex-wrap:wrap">
                    <!-- Filled by JS -->
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Prompt systeme</label>
                <textarea class="form-textarea" id="edit-prompt" placeholder="Instructions pour l'agent..."></textarea>
            </div>

            <div class="form-group">
                <label class="form-label">Mode de sortie</label>
                <select class="form-select" id="edit-output">
                    <option value="paste">Coller dans la fenetre</option>
                    <option value="notification">Notification</option>
                    <option value="clipboard">Presse-papiers</option>
                    <option value="popup">Popup</option>
                    <option value="vocal">Vocal</option>
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">Raccourci</label>
                <select class="form-select" id="edit-hotkey">
                    <option value="">Aucun</option>
                    <!-- Filled by JS -->
                </select>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal()">Annuler</button>
            <button class="btn btn-primary" onclick="saveAgent()">Enregistrer</button>
        </div>
    </div>
</div>

<!-- Library Modal -->
<div class="modal-overlay" id="library-modal">
    <div class="modal" style="max-width:800px">
        <div class="modal-header">
            <h3 class="modal-title">Bibliotheque</h3>
            <button class="modal-close" onclick="closeLibrary()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="tabs">
                <div class="tab active" data-tab="templates" onclick="switchLibraryTab('templates')">Templates</div>
                <div class="tab" data-tab="archives" onclick="switchLibraryTab('archives')">Archives</div>
            </div>

            <!-- Templates Tab -->
            <div id="tab-templates">
                <div id="templates-list">
                    <!-- Filled by JS -->
                </div>
            </div>

            <!-- Archives Tab -->
            <div id="tab-archives" style="display:none">
                <div id="archives-list">
                    <!-- Filled by JS -->
                </div>
                <p id="no-archives" class="text-muted text-sm">Aucun agent archive.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// === DATA ===
let agents = [];
let profiles = [];
let mcps = [];
let availableHotkeys = [];
let currentFilter = 'all';
let searchTerm = '';

// === INIT ===
async function init() {
    await Promise.all([
        loadAgents(),
        loadProfiles(),
        loadMcps(),
        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 loadMcps() {
    const res = await fetch('/api/mcps');
    mcps = await res.json();
}

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

// === RENDER ===
function renderTable() {
    const tbody = document.getElementById('agents-tbody');
    const noResults = document.getElementById('no-results');

    // Merge profiles and agents
    const items = [
        ...profiles.map(p => ({...p, _type: 'simple', _source: 'profile'})),
        ...agents.map(a => ({...a, _type: a.mcps?.length ? 'connected' : 'simple', _source: 'agent'}))
    ];

    // Filter
    let filtered = items.filter(item => {
        // Exclude archived
        if (item.archived) return false;

        // Search
        if (searchTerm) {
            const search = searchTerm.toLowerCase();
            if (!item.name?.toLowerCase().includes(search) &&
                !item.description?.toLowerCase().includes(search)) {
                return false;
            }
        }

        // Type filters
        if (currentFilter === 'favorites' && !item.favorite) {
            return false;
        }
        if (currentFilter === 'simple' && item._type !== 'simple') {
            return false;
        }
        if (currentFilter === 'connected' && item._type !== 'connected') {
            return false;
        }

        return true;
    });

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

    noResults.style.display = 'none';

    tbody.innerHTML = filtered.map(item => `
        <tr data-id="${item.id}" data-source="${item._source}">
            <td>
                <button class="star-btn ${item.favorite ? 'active' : ''}"
                        onclick="toggleFavorite('${item.id}', '${item._source}')">
                    ${item.favorite ? '★' : '☆'}
                </button>
            </td>
            <td>
                <strong>${item.name || 'Sans nom'}</strong>
                ${item.description ? `<br><span class="text-muted text-sm">${item.description}</span>` : ''}
            </td>
            <td>
                <span class="badge ${item._type === 'connected' ? 'badge-primary' : 'badge-muted'}">
                    ${item._type === 'connected' ? 'Connecte' : 'Simple'}
                </span>
            </td>
            <td>
                ${item.hotkey ? `<span class="badge badge-muted">${item.hotkey}</span>` : '<span class="text-muted">-</span>'}
            </td>
            <td>
                <span class="badge ${item.enabled !== false ? 'badge-success' : 'badge-warning'}">
                    ${item.enabled !== false ? 'Actif' : 'Inactif'}
                </span>
            </td>
            <td>
                <div class="actions">
                    <button class="btn btn-sm btn-primary" onclick="launchAgent('${item.id}', '${item._source}')">Lancer</button>
                    <button class="btn btn-sm btn-secondary" onclick="editAgent('${item.id}', '${item._source}')">Editer</button>
                    <button class="btn btn-sm btn-ghost" onclick="archiveAgent('${item.id}', '${item._source}')">Archiver</button>
                </div>
            </td>
        </tr>
    `).join('');
}

// === FILTERS ===
function setFilter(filter) {
    currentFilter = filter;
    document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.filter === filter);
    });
    renderTable();
}

function filterAgents() {
    searchTerm = document.getElementById('search-input').value;
    renderTable();
}

// === ACTIONS ===
async function toggleFavorite(id, source) {
    const endpoint = source === 'profile' ? `/api/profiles/${id}/favorite` : `/api/agents/${id}/favorite`;
    await fetch(endpoint, {method: 'POST'});
    await (source === 'profile' ? loadProfiles() : loadAgents());
    renderTable();
}

async function launchAgent(id, source) {
    const endpoint = source === 'profile' ? `/api/profiles/${id}/launch` : `/api/agents/${id}/launch`;
    const res = await fetch(endpoint, {method: 'POST'});
    const data = await res.json();
    if (!data.ok) {
        alert(data.error || 'Erreur');
    }
}

async function archiveAgent(id, source) {
    if (!confirm('Archiver cet agent ?')) return;
    const endpoint = source === 'profile' ? `/api/profiles/${id}/archive` : `/api/agents/${id}/archive`;
    await fetch(endpoint, {method: 'POST'});
    await (source === 'profile' ? loadProfiles() : loadAgents());
    renderTable();
}

// === MODAL ===
function openCreateModal() {
    document.getElementById('modal-title').textContent = 'Creer un agent';
    document.getElementById('edit-id').value = '';
    document.getElementById('edit-type').value = '';
    document.getElementById('edit-name').value = '';
    document.getElementById('edit-description').value = '';
    document.getElementById('edit-agent-type').value = 'simple';
    document.getElementById('edit-prompt').value = '';
    document.getElementById('edit-output').value = 'paste';
    document.getElementById('edit-hotkey').value = '';
    toggleMcpSection();
    populateHotkeySelect();
    populateMcpCheckboxes();
    document.getElementById('agent-modal').classList.add('open');
}

function editAgent(id, source) {
    const item = source === 'profile'
        ? profiles.find(p => p.id === id)
        : agents.find(a => a.id === id);

    if (!item) return;

    document.getElementById('modal-title').textContent = 'Modifier l\'agent';
    document.getElementById('edit-id').value = id;
    document.getElementById('edit-type').value = source;
    document.getElementById('edit-name').value = item.name || '';
    document.getElementById('edit-description').value = item.description || '';
    document.getElementById('edit-agent-type').value = (item.mcps?.length || source === 'agent') ? 'connected' : 'simple';
    document.getElementById('edit-prompt').value = item.system_prompt || '';
    document.getElementById('edit-output').value = item.output_mode || 'paste';
    document.getElementById('edit-hotkey').value = item.hotkey || '';
    toggleMcpSection();
    populateHotkeySelect(item.hotkey);
    populateMcpCheckboxes(item.mcps || []);
    document.getElementById('agent-modal').classList.add('open');
}

function closeModal() {
    document.getElementById('agent-modal').classList.remove('open');
}

function toggleMcpSection() {
    const type = document.getElementById('edit-agent-type').value;
    document.getElementById('mcp-section').style.display = type === 'connected' ? 'block' : 'none';
}

function populateHotkeySelect(current = '') {
    const select = document.getElementById('edit-hotkey');
    const options = ['<option value="">Aucun</option>'];

    // Add current if exists
    if (current) {
        options.push(`<option value="${current}" selected>${current}</option>`);
    }

    // Add available
    availableHotkeys.forEach(hk => {
        if (hk !== current) {
            options.push(`<option value="${hk}">${hk}</option>`);
        }
    });

    select.innerHTML = options.join('');
}

function populateMcpCheckboxes(selected = []) {
    const container = document.getElementById('mcp-checkboxes');
    container.innerHTML = mcps.map(mcp => `
        <label class="flex items-center gap-1">
            <input type="checkbox" value="${mcp.id}" ${selected.includes(mcp.id) ? 'checked' : ''}>
            ${mcp.name}
        </label>
    `).join('');
}

async function saveAgent() {
    const id = document.getElementById('edit-id').value;
    const source = document.getElementById('edit-type').value;
    const isNew = !id;
    const agentType = document.getElementById('edit-agent-type').value;

    // Get selected MCPs
    const selectedMcps = [];
    document.querySelectorAll('#mcp-checkboxes input:checked').forEach(cb => {
        selectedMcps.push(cb.value);
    });

    const data = {
        name: document.getElementById('edit-name').value,
        description: document.getElementById('edit-description').value,
        system_prompt: document.getElementById('edit-prompt').value,
        output_mode: document.getElementById('edit-output').value,
        hotkey: document.getElementById('edit-hotkey').value || null,
    };

    if (agentType === 'connected') {
        data.mcps = selectedMcps;
    }

    let endpoint, method;
    if (isNew) {
        // Create as agent if has MCPs, otherwise as profile
        if (agentType === 'connected') {
            endpoint = '/api/agents';
        } else {
            endpoint = '/api/profiles';
        }
        method = 'POST';
    } else {
        endpoint = source === 'profile' ? `/api/profiles/${id}` : `/api/agents/${id}`;
        method = 'PUT';
    }

    const res = await fetch(endpoint, {
        method,
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    });

    const result = await res.json();
    if (result.ok || res.ok) {
        closeModal();
        await Promise.all([loadAgents(), loadProfiles(), loadHotkeys()]);
        renderTable();
    } else {
        alert(result.error || 'Erreur');
    }
}

// === LIBRARY ===
function openLibrary() {
    document.getElementById('library-modal').classList.add('open');
    loadLibraryContent();
}

function closeLibrary() {
    document.getElementById('library-modal').classList.remove('open');
}

function switchLibraryTab(tab) {
    document.querySelectorAll('.tabs .tab').forEach(t => {
        t.classList.toggle('active', t.dataset.tab === tab);
    });
    document.getElementById('tab-templates').style.display = tab === 'templates' ? 'block' : 'none';
    document.getElementById('tab-archives').style.display = tab === 'archives' ? 'block' : 'none';
}

async function loadLibraryContent() {
    // Load templates
    const [agentsLib, profilesLib] = await Promise.all([
        fetch('/api/agents/library').then(r => r.json()),
        fetch('/api/profiles/library').then(r => r.json())
    ]);

    const templatesContainer = document.getElementById('templates-list');
    const allTemplates = [
        ...Object.entries(agentsLib.library || {}).map(([id, t]) => ({id, ...t, _type: 'agent'})),
        ...Object.entries(profilesLib.library || {}).map(([id, t]) => ({id, ...t, _type: 'profile'}))
    ];

    if (allTemplates.length === 0) {
        templatesContainer.innerHTML = '<p class="text-muted text-sm">Aucun template disponible.</p>';
    } else {
        templatesContainer.innerHTML = allTemplates.map(t => `
            <div class="card mb-2" style="padding:1rem">
                <div class="flex justify-between items-center">
                    <div>
                        <strong>${t.name}</strong>
                        <p class="text-muted text-sm">${t.description || ''}</p>
                    </div>
                    <button class="btn btn-sm btn-primary" onclick="addFromLibrary('${t.id}', '${t._type}')">Ajouter</button>
                </div>
            </div>
        `).join('');
    }

    // Load archives
    const archivesContainer = document.getElementById('archives-list');
    const noArchives = document.getElementById('no-archives');
    const archivedItems = [
        ...profiles.filter(p => p.archived).map(p => ({...p, _source: 'profile'})),
        ...agents.filter(a => a.archived).map(a => ({...a, _source: 'agent'}))
    ];

    if (archivedItems.length === 0) {
        archivesContainer.innerHTML = '';
        noArchives.style.display = 'block';
    } else {
        noArchives.style.display = 'none';
        archivesContainer.innerHTML = archivedItems.map(item => `
            <div class="card mb-2" style="padding:1rem">
                <div class="flex justify-between items-center">
                    <div>
                        <strong>${item.name}</strong>
                        <span class="badge badge-muted ml-2">${item._source === 'agent' ? 'Connecte' : 'Simple'}</span>
                    </div>
                    <div class="flex gap-2">
                        <button class="btn btn-sm btn-primary" onclick="restoreAgent('${item.id}', '${item._source}')">Restaurer</button>
                        <button class="btn btn-sm btn-danger" onclick="deleteAgent('${item.id}', '${item._source}')">Supprimer</button>
                    </div>
                </div>
            </div>
        `).join('');
    }
}

async function addFromLibrary(templateId, type) {
    const endpoint = type === 'agent'
        ? `/api/agents/add-from-library/${templateId}`
        : `/api/profiles/add-from-library/${templateId}`;

    const res = await fetch(endpoint, {method: 'POST'});
    const data = await res.json();

    if (data.ok) {
        closeLibrary();
        await Promise.all([loadAgents(), loadProfiles()]);
        renderTable();
    } else {
        alert(data.error || 'Erreur');
    }
}

async function restoreAgent(id, source) {
    const endpoint = source === 'profile' ? `/api/profiles/${id}/restore` : `/api/agents/${id}/restore`;
    await fetch(endpoint, {method: 'POST'});
    await Promise.all([loadAgents(), loadProfiles()]);
    renderTable();
    loadLibraryContent();
}

async function deleteAgent(id, source) {
    if (!confirm('Supprimer definitivement cet agent ?')) return;
    const endpoint = source === 'profile' ? `/api/profiles/${id}` : `/api/agents/${id}`;
    await fetch(endpoint, {method: 'DELETE'});
    await Promise.all([loadAgents(), loadProfiles()]);
    loadLibraryContent();
}

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