{% extends "base.html" %}

{% block content %}
<!-- Mode Onboarding (first_run) -->
<section id="onboarding-section" class="onboarding-section" style="display: none;">
    <div class="onboarding-header">
        <h1>Configurez vos connexions</h1>
        <p>Selectionnez les services que vous souhaitez utiliser.<br>Vous pourrez modifier ces choix plus tard.</p>
    </div>

    <div id="onboarding-loading" class="loading-indicator">Chargement...</div>

    <div id="onboarding-categories" class="onboarding-categories"></div>

    <div class="onboarding-actions">
        <button class="btn btn-primary btn-large" onclick="completeSetup()">
            Valider la selection
        </button>
        <button class="btn btn-secondary btn-large" onclick="skipSetup()">
            Passer (aucune connexion)
        </button>
    </div>
</section>

<!-- Mode Normal (after first_run) -->
<section id="normal-section" class="mcps-section" style="display: none;">
    <div class="section-header">
        <div>
            <h2>Mes Connexions</h2>
            <p class="section-desc">Services actifs pour vos agents vocaux.</p>
        </div>
        <div class="section-actions">
            <button class="btn btn-primary" onclick="openLibraryModal()">
                + Bibliotheque
            </button>
        </div>
    </div>

    <div id="mcps-loading" class="loading-indicator">Chargement...</div>

    <div id="mcps-container" style="display: none;">
        <table id="mcps-list" class="mcps-table"></table>
        <p id="mcps-empty" class="empty-state" style="display: none;">
            Aucune connexion active.<br>
            <a href="#" onclick="openLibraryModal(); return false;">Ajouter depuis la bibliotheque</a>
        </p>
    </div>
</section>

<!-- Library Modal -->
<div id="library-modal" class="modal" style="display: none;">
    <div class="modal-backdrop" onclick="closeLibraryModal()"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h2>Bibliotheque</h2>
            <button class="modal-close" onclick="closeLibraryModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div id="library-loading" class="loading-indicator">Chargement...</div>
            <div id="library-categories"></div>
        </div>
    </div>
</div>

<!-- Add Custom MCP (collapsible) -->
<section id="custom-section" class="add-mcp-section" style="display: none;">
    <details>
        <summary class="custom-toggle">Ajouter un MCP custom</summary>
        <div class="add-mcp-form">
            <div class="form-row">
                <label for="new-mcp-name">Nom</label>
                <input type="text" id="new-mcp-name" class="input-field" placeholder="Mon MCP">
            </div>
            <div class="form-row">
                <label for="new-mcp-command">Commande</label>
                <input type="text" id="new-mcp-command" class="input-field" placeholder="/opt/homebrew/bin/npx">
                <span class="form-hint">Ex: /opt/homebrew/bin/npx, python, node</span>
            </div>
            <div class="form-row">
                <label for="new-mcp-args">Arguments (JSON)</label>
                <input type="text" id="new-mcp-args" class="input-field" placeholder='["-y", "@package/mcp-server"]'>
            </div>
            <div class="form-row">
                <label>Variables d'environnement</label>
                <div id="env-picklist" class="env-picklist">
                    <span class="loading-small">Chargement...</span>
                </div>
            </div>
            <div class="form-row">
                <label for="new-mcp-desc">Description</label>
                <input type="text" id="new-mcp-desc" class="input-field" placeholder="Description du MCP">
            </div>
            <button class="btn" onclick="addCustomMcp()">Ajouter</button>
        </div>
    </details>
</section>

<!-- Lien vers Settings pour modèles et clés API -->
<p class="settings-link" id="settings-link" style="display: none;">
    <a href="/settings">Configurer les modeles et cles API dans Paramètres →</a>
</p>

<div id="save-status" class="save-status" style="display: none;"></div>
{% endblock %}

{% block scripts %}
<style>
    /* === SETTINGS LINK === */
    .settings-link {
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
        text-align: center;
    }
    .settings-link a {
        color: var(--accent);
        text-decoration: none;
    }
    .settings-link a:hover {
        text-decoration: underline;
    }

    /* === ONBOARDING === */
    .onboarding-section {
        max-width: 900px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }
    .onboarding-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    .onboarding-header h1 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
        color: var(--text);
    }
    .onboarding-header p {
        color: var(--text-muted);
        font-size: 1rem;
        line-height: 1.5;
    }
    .onboarding-categories {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    .onboarding-category {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 1.25rem;
    }
    .onboarding-category-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
        font-weight: 600;
        font-size: 1.1rem;
    }
    .onboarding-category-icon {
        font-size: 1.3rem;
    }
    .onboarding-mcps {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem;
    }
    .onboarding-mcp-card {
        background: var(--bg);
        border: 2px solid var(--border);
        border-radius: 8px;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.2s;
        position: relative;
    }
    .onboarding-mcp-card:hover {
        border-color: var(--accent);
    }
    .onboarding-mcp-card.selected {
        border-color: var(--success);
        background: rgba(46, 204, 113, 0.08);
    }
    .onboarding-mcp-card.selected::after {
        content: '✓';
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: var(--success);
        color: white;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: bold;
    }
    .onboarding-mcp-name {
        font-weight: 600;
        margin-bottom: 0.25rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    .onboarding-mcp-desc {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 0.5rem;
        line-height: 1.3;
    }
    .onboarding-mcp-badge {
        display: inline-block;
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
        border-radius: 3px;
    }
    .onboarding-mcp-badge.oauth {
        background: #3498db;
        color: white;
    }
    .onboarding-mcp-badge.api-key {
        background: #f39c12;
        color: white;
    }
    .onboarding-mcp-badge.ready {
        background: var(--success);
        color: white;
    }
    .onboarding-actions {
        display: flex;
        justify-content: center;
        gap: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }
    .btn-large {
        padding: 0.75rem 2rem;
        font-size: 1rem;
    }
    .btn-primary {
        background: var(--accent);
        color: white;
        border: none;
    }
    .btn-primary:hover {
        background: var(--accent-hover, #2980b9);
    }

    /* === MES CONNEXIONS === */
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1.5rem;
    }
    .section-actions {
        display: flex;
        gap: 0.5rem;
    }

    /* Table format compact */
    .mcps-table {
        width: 100%;
        border-collapse: collapse;
    }
    .mcp-row {
        border-bottom: 1px solid var(--border);
    }
    .mcp-row:hover {
        background: var(--bg-alt);
    }
    .mcp-row td {
        padding: 0.6rem 0.5rem;
        vertical-align: middle;
    }
    .mcp-col-icon {
        width: 32px;
        text-align: center;
        font-size: 1.1rem;
    }
    .mcp-col-name {
        font-weight: 600;
        width: 120px;
    }
    .mcp-col-desc {
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .mcp-col-type {
        width: 80px;
        text-align: right;
    }
    .mcp-type {
        font-size: 0.65rem;
        padding: 0.1rem 0.3rem;
        border-radius: 3px;
        margin-left: 0.25rem;
    }
    .mcp-type.oauth { background: #3498db; color: white; }
    .mcp-type.api-key { background: #f39c12; color: white; }
    .mcp-type.custom { background: #e67e22; color: white; }
    .mcp-col-actions {
        width: 80px;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
    }
    .mcp-delete {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 1rem;
        cursor: pointer;
        padding: 0.2rem 0.4rem;
        line-height: 1;
    }
    .mcp-delete:hover {
        color: var(--danger);
    }

    /* Toggle switch compact */
    .toggle-switch-sm {
        position: relative;
        width: 32px;
        height: 16px;
        background: var(--border);
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s;
        flex-shrink: 0;
    }
    .toggle-switch-sm.active {
        background: var(--success);
    }
    .toggle-switch-sm::after {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        background: white;
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: left 0.2s;
    }
    .toggle-switch-sm.active::after {
        left: 18px;
    }
    .empty-state {
        text-align: center;
        padding: 3rem;
        color: var(--text-muted);
    }
    .empty-state a {
        color: var(--accent);
    }

    /* === MODAL BIBLIOTHEQUE === */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }
    .modal-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
    }
    .modal-content {
        position: relative;
        background: var(--bg);
        border-radius: 12px;
        max-width: 700px;
        max-height: 85vh;
        margin: 3rem auto;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--border);
    }
    .modal-header h2 {
        margin: 0;
        font-size: 1.2rem;
    }
    .modal-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--text-muted);
        padding: 0.25rem 0.5rem;
    }
    .modal-close:hover {
        color: var(--text);
    }
    .modal-body {
        padding: 1.5rem;
        overflow-y: auto;
    }
    .library-category {
        margin-bottom: 1.5rem;
    }
    .library-category-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        font-weight: 600;
        font-size: 1rem;
    }
    .library-mcps {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.6rem;
    }
    .library-mcp-card {
        background: var(--card-bg);
        border: 2px solid var(--border);
        border-radius: 8px;
        padding: 0.75rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    .library-mcp-card:hover {
        border-color: var(--accent);
    }
    .library-mcp-card.active {
        border-color: var(--success);
        background: rgba(46, 204, 113, 0.08);
    }
    .library-mcp-name {
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.25rem;
        font-size: 0.95rem;
    }
    .library-mcp-desc {
        font-size: 0.8rem;
        color: var(--text-muted);
        line-height: 1.3;
        margin-bottom: 0.4rem;
    }
    .library-mcp-badges {
        display: flex;
        gap: 0.3rem;
    }

    /* === MCP CUSTOM === */
    .add-mcp-section {
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }
    .custom-toggle {
        cursor: pointer;
        font-weight: 500;
        padding: 0.5rem 0;
        color: var(--text-muted);
    }
    .custom-toggle:hover {
        color: var(--text);
    }
    .add-mcp-form {
        max-width: 500px;
        padding-top: 1rem;
    }
    .add-mcp-form .form-row {
        margin-bottom: 1rem;
    }
    .add-mcp-form label {
        display: block;
        margin-bottom: 0.25rem;
        font-weight: 500;
        font-size: 0.9rem;
    }
    .add-mcp-form .input-field {
        width: 100%;
    }
    .form-hint {
        display: block;
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }
    .env-picklist {
        background: var(--bg-alt);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 0.5rem;
        max-height: 150px;
        overflow-y: auto;
    }
    .env-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.3rem 0.5rem;
        border-radius: 4px;
        cursor: pointer;
    }
    .env-item:hover {
        background: var(--card-bg);
    }
    .env-item input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }
    .env-var {
        font-family: monospace;
        font-size: 0.85rem;
    }
    .env-status {
        font-size: 0.7rem;
        padding: 0.1rem 0.3rem;
        border-radius: 3px;
        margin-left: auto;
    }
    .env-status.configured {
        background: var(--success);
        color: white;
    }
    .env-status.not-configured {
        background: var(--border);
        color: var(--text-muted);
    }

    /* === STATUS === */
    .save-status {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        padding: 0.75rem 1.5rem;
        border-radius: 6px;
        font-weight: 500;
        z-index: 2000;
    }
    .save-status.success {
        background: var(--success);
        color: white;
    }
    .save-status.error {
        background: var(--danger);
        color: white;
    }
</style>
<script>
    let mcpsList = [];
    let libraryData = null;
    let isFirstRun = false;
    let selectedMcps = new Set();

    // === ICON HELPERS ===
    const ICONS = {
        'envelope': '📧',
        'calendar': '📅',
        'file-text': '📝',
        'search': '🔍',
        'globe': '🌐',
        'folder': '📁',
        'cog': '⚙️',
        'database': '💾',
        'code': '💻',
        'terminal': '⌨️',
        'microphone': '🎤',
        'cube': '📦',
        'file-invoice': '🧾',
        'plug': '🔌',
        'building': '🏢',
        'default': '📦'
    };

    function getIcon(iconName) {
        return ICONS[iconName] || ICONS.default;
    }

    function getAuthBadge(authType) {
        if (authType === 'oauth') return '<span class="onboarding-mcp-badge oauth">OAuth</span>';
        if (authType === 'api_key') return '<span class="onboarding-mcp-badge api-key">API Key</span>';
        return '<span class="onboarding-mcp-badge ready">Pret</span>';
    }

    // === INIT ===
    async function init() {
        // Check first_run status
        const res = await fetch('/api/mcps/templates');
        const data = await res.json();
        isFirstRun = data.first_run || false;

        if (isFirstRun) {
            document.getElementById('onboarding-section').style.display = 'block';
            document.getElementById('normal-section').style.display = 'none';
            document.getElementById('custom-section').style.display = 'none';
            await loadOnboarding();
        } else {
            document.getElementById('onboarding-section').style.display = 'none';
            document.getElementById('normal-section').style.display = 'block';
            document.getElementById('custom-section').style.display = 'block';
            document.getElementById('settings-link').style.display = 'block';
            await fetchMcps();
            loadEnvVars();
        }
    }

    // === ONBOARDING MODE ===
    async function loadOnboarding() {
        const loading = document.getElementById('onboarding-loading');
        const container = document.getElementById('onboarding-categories');

        try {
            const res = await fetch('/api/mcps/categories');
            libraryData = await res.json();

            // Pre-select recommended MCPs
            const recommended = ['gmail', 'brave-search', 'memory', 'filesystem'];
            mcpsList.forEach(m => {
                if (recommended.includes(m.id)) selectedMcps.add(m.id);
            });

            // Also fetch MCPs list
            const mcpsRes = await fetch('/api/mcps/list');
            mcpsList = await mcpsRes.json();

            // Pre-select currently enabled MCPs
            mcpsList.filter(m => m.enabled).forEach(m => selectedMcps.add(m.id));

            renderOnboarding();
            loading.style.display = 'none';
        } catch (e) {
            console.error('Erreur onboarding:', e);
            loading.textContent = 'Erreur de chargement';
        }
    }

    function renderOnboarding() {
        const container = document.getElementById('onboarding-categories');

        container.innerHTML = libraryData
            .filter(cat => cat.mcps && cat.mcps.length > 0)
            .map(cat => {
                const mcpsHtml = cat.mcps.map(mcp => {
                    const isSelected = selectedMcps.has(mcp.id);
                    return `
                        <div class="onboarding-mcp-card ${isSelected ? 'selected' : ''}"
                             onclick="toggleOnboardingMcp('${mcp.id}')"
                             data-mcp-id="${mcp.id}">
                            <div class="onboarding-mcp-name">
                                ${getIcon(cat.icon)} ${mcp.name}
                            </div>
                            <p class="onboarding-mcp-desc">${mcp.description}</p>
                            ${getAuthBadge(mcp.auth_type)}
                        </div>
                    `;
                }).join('');

                return `
                    <div class="onboarding-category">
                        <div class="onboarding-category-header">
                            <span class="onboarding-category-icon">${getIcon(cat.icon)}</span>
                            ${cat.name}
                        </div>
                        <div class="onboarding-mcps">${mcpsHtml}</div>
                    </div>
                `;
            }).join('');
    }

    function toggleOnboardingMcp(mcpId) {
        const card = document.querySelector(`[data-mcp-id="${mcpId}"]`);
        if (selectedMcps.has(mcpId)) {
            selectedMcps.delete(mcpId);
            card.classList.remove('selected');
        } else {
            selectedMcps.add(mcpId);
            card.classList.add('selected');
        }
    }

    async function completeSetup() {
        try {
            const res = await fetch('/api/mcps/complete-setup', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ mcps: Array.from(selectedMcps) }),
            });
            const result = await res.json();

            if (result.ok) {
                showStatus('Configuration terminee!', 'success');
                // Switch to normal mode
                document.getElementById('onboarding-section').style.display = 'none';
                document.getElementById('normal-section').style.display = 'block';
                document.getElementById('custom-section').style.display = 'block';
                await fetchMcps();
                loadEnvVars();
            } else {
                showStatus('Erreur: ' + (result.error || 'Echec'), 'error');
            }
        } catch (e) {
            console.error('Erreur setup:', e);
            showStatus('Erreur de connexion', 'error');
        }
    }

    async function skipSetup() {
        selectedMcps.clear();
        await completeSetup();
    }

    // === NORMAL MODE: MES MCPs ===
    async function fetchMcps() {
        const loading = document.getElementById('mcps-loading');
        const container = document.getElementById('mcps-container');

        try {
            const res = await fetch('/api/mcps/list');
            mcpsList = await res.json();
            renderMcps();

            loading.style.display = 'none';
            container.style.display = 'block';
        } catch (e) {
            console.error('Erreur MCPs:', e);
            loading.textContent = 'Erreur de chargement';
        }
    }

    function renderMcps() {
        const list = document.getElementById('mcps-list');
        const emptyState = document.getElementById('mcps-empty');

        const enabledMcps = mcpsList.filter(m => m.enabled);

        if (enabledMcps.length === 0) {
            list.innerHTML = '';
            emptyState.style.display = 'block';
            return;
        }

        emptyState.style.display = 'none';

        list.innerHTML = enabledMcps.map(mcp => {
            const typeBadge = mcp.auth_type === 'oauth' ? '<span class="mcp-type oauth">OAuth</span>'
                : mcp.auth_type === 'api_key' ? '<span class="mcp-type api-key">API</span>'
                : '';
            const customTag = !mcp.builtin ? '<span class="mcp-type custom">Custom</span>' : '';
            const deleteBtn = !mcp.builtin ? `<button class="mcp-delete" onclick="deleteMcp('${mcp.id}')" title="Supprimer">×</button>` : '';

            return `
                <tr class="mcp-row" data-id="${mcp.id}">
                    <td class="mcp-col-icon">${getIcon(mcp.icon)}</td>
                    <td class="mcp-col-name">${mcp.name}</td>
                    <td class="mcp-col-desc">${mcp.description || ''}</td>
                    <td class="mcp-col-type">${typeBadge}${customTag}</td>
                    <td class="mcp-col-actions">
                        <div class="toggle-switch-sm ${mcp.enabled ? 'active' : ''}"
                             onclick="toggleMcp('${mcp.id}', ${!mcp.enabled})"></div>
                        ${deleteBtn}
                    </td>
                </tr>
            `;
        }).join('');
    }

    async function toggleMcp(mcpId, enabled) {
        try {
            const res = await fetch(`/api/mcps/${mcpId}/toggle`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ enabled: enabled }),
            });
            const result = await res.json();

            if (result.ok) {
                const mcp = mcpsList.find(m => m.id === mcpId);
                if (mcp) mcp.enabled = enabled;
                renderMcps();
                if (libraryData) renderLibraryCategories();
                showStatus(enabled ? 'Active' : 'Desactive', 'success');
            } else {
                showStatus('Erreur: ' + (result.error || 'Echec'), 'error');
            }
        } catch (e) {
            console.error('Erreur toggle:', e);
            showStatus('Erreur de connexion', 'error');
        }
    }

    // === LIBRARY MODAL ===
    async function openLibraryModal() {
        const modal = document.getElementById('library-modal');
        modal.style.display = 'block';
        document.body.style.overflow = 'hidden';

        if (!libraryData) {
            await fetchLibrary();
        }
        renderLibraryCategories();
    }

    function closeLibraryModal() {
        const modal = document.getElementById('library-modal');
        modal.style.display = 'none';
        document.body.style.overflow = '';
    }

    async function fetchLibrary() {
        const loading = document.getElementById('library-loading');

        try {
            const res = await fetch('/api/mcps/categories');
            libraryData = await res.json();
            loading.style.display = 'none';
        } catch (e) {
            console.error('Erreur library:', e);
            loading.textContent = 'Erreur de chargement';
        }
    }

    function renderLibraryCategories() {
        if (!libraryData) return;

        const container = document.getElementById('library-categories');
        const enabledIds = new Set(mcpsList.filter(m => m.enabled).map(m => m.id));

        container.innerHTML = libraryData
            .filter(cat => cat.mcps && cat.mcps.length > 0)
            .map(cat => {
                const mcpsHtml = cat.mcps.map(mcp => {
                    const isActive = enabledIds.has(mcp.id);
                    const badges = [];
                    if (mcp.auth_type === 'oauth') badges.push('<span class="mcp-badge oauth">OAuth</span>');
                    else if (mcp.auth_type === 'api_key') badges.push('<span class="mcp-badge api-key">API Key</span>');

                    return `
                        <div class="library-mcp-card ${isActive ? 'active' : ''}"
                             onclick="toggleMcp('${mcp.id}', ${!isActive})">
                            <div class="library-mcp-name">
                                ${getIcon(cat.icon)} ${mcp.name}
                            </div>
                            <p class="library-mcp-desc">${mcp.description}</p>
                            <div class="library-mcp-badges">
                                ${isActive ? '<span class="mcp-badge" style="background:var(--success);color:white">Actif</span>' : ''}
                                ${badges.join('')}
                            </div>
                        </div>
                    `;
                }).join('');

                return `
                    <div class="library-category">
                        <div class="library-category-header">
                            ${getIcon(cat.icon)} ${cat.name}
                        </div>
                        <div class="library-mcps">${mcpsHtml}</div>
                    </div>
                `;
            }).join('');
    }

    // === CUSTOM MCP ===
    let envVarsList = [];

    async function loadEnvVars() {
        const picklist = document.getElementById('env-picklist');

        try {
            const res = await fetch('/api/settings/env-vars');
            envVarsList = await res.json();

            if (envVarsList.length === 0) {
                picklist.innerHTML = '<p style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem;">Aucune cle API configurée</p>';
                return;
            }

            picklist.innerHTML = envVarsList.map(v => `
                <label class="env-item">
                    <input type="checkbox" class="env-checkbox" value="${v.env_var}">
                    <span class="env-var">${v.env_var}</span>
                    <span class="env-status ${v.configured ? 'configured' : 'not-configured'}">
                        ${v.configured ? 'OK' : '-'}
                    </span>
                </label>
            `).join('');
        } catch (e) {
            console.error('Erreur env vars:', e);
            picklist.innerHTML = '<p style="color:var(--text-muted)">Erreur</p>';
        }
    }

    async function addCustomMcp() {
        const name = document.getElementById('new-mcp-name').value.trim();
        const command = document.getElementById('new-mcp-command').value.trim();
        const argsStr = document.getElementById('new-mcp-args').value.trim();
        const desc = document.getElementById('new-mcp-desc').value.trim();

        if (!name || !command) {
            showStatus('Nom et commande requis', 'error');
            return;
        }

        let args = [];
        try {
            if (argsStr) args = JSON.parse(argsStr);
        } catch (e) {
            showStatus('Format args invalide (JSON)', 'error');
            return;
        }

        const checkboxes = document.querySelectorAll('.env-checkbox:checked');
        const env = {};
        checkboxes.forEach(cb => {
            env[cb.value] = '${' + cb.value + '}';
        });

        try {
            const res = await fetch('/api/mcps/custom', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ name, command, args, env, description: desc }),
            });
            const result = await res.json();

            if (result.ok) {
                document.getElementById('new-mcp-name').value = '';
                document.getElementById('new-mcp-command').value = '';
                document.getElementById('new-mcp-args').value = '';
                document.getElementById('new-mcp-desc').value = '';
                document.querySelectorAll('.env-checkbox').forEach(cb => cb.checked = false);
                showStatus('MCP ajoute!', 'success');
                fetchMcps();
            } else {
                showStatus('Erreur: ' + (result.error || 'Echec'), 'error');
            }
        } catch (e) {
            console.error('Erreur ajout:', e);
            showStatus('Erreur de connexion', 'error');
        }
    }

    async function deleteMcp(mcpId) {
        if (!confirm(`Supprimer "${mcpId}" ?`)) return;

        try {
            const res = await fetch(`/api/mcps/custom/${mcpId}`, { method: 'DELETE' });
            const result = await res.json();

            if (result.ok) {
                showStatus('Supprime', 'success');
                fetchMcps();
            } else {
                showStatus('Erreur', 'error');
            }
        } catch (e) {
            showStatus('Erreur de connexion', 'error');
        }
    }

    function showStatus(message, type) {
        const status = document.getElementById('save-status');
        status.textContent = message;
        status.className = 'save-status ' + type;
        status.style.display = 'block';
        setTimeout(() => { status.style.display = 'none'; }, 2500);
    }

    // Escape to close modal
    document.addEventListener('keydown', e => {
        if (e.key === 'Escape') closeLibraryModal();
    });

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