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

{% block content %}
<div class="page-header">
    <h1 class="page-title">Connexions <span style="font-size:0.6rem;font-weight:700;background:var(--accent);color:#fff;padding:0.15rem 0.45rem;border-radius:999px;vertical-align:middle;letter-spacing:0.05em;">BETA</span></h1>
</div>

<div id="integrations-section" style="position:relative;overflow:hidden">

<div id="system-mcps-section" style="display:none;">
<div class="flex justify-between align-center" style="margin-top: 1rem;">
    <h2 class="section-title" style="margin: 0; font-size: 1.25rem; font-weight: 600;">Capacités natives</h2>
</div>
<p class="text-muted text-sm" style="margin: 0.25rem 0 0.75rem;">
    Outils intégrés à Vicsia. Aucun service externe, aucune clé API. Inclus dans tous les plans.
</p>
<table>
    <thead>
        <tr>
            <th>Capacité</th>
            <th style="width:90px;text-align:center">Activer</th>
        </tr>
    </thead>
    <tbody id="system-mcps-body">
    </tbody>
</table>
</div>

<div class="flex justify-between align-center" style="margin-top: 2.5rem;">
    <h2 class="section-title" style="margin: 0; font-weight: 600;">Clés API - Services externes</h2>
    <button class="btn btn-primary btn-sm" onclick="openAddProviderModal()">+ Clé API</button>
</div>
<table>
    <thead>
        <tr>
            <th>Service</th>
            <th style="width:140px">Statut</th>
            <th style="width:180px">Actions</th>
        </tr>
    </thead>
    <tbody id="other-keys-body">
    </tbody>
</table>

<div id="mcps-section">
<div class="flex justify-between align-center" style="margin-top: 2.5rem;">
    <h2 class="section-title" style="margin: 0; font-size: 1.25rem; font-weight: 600;">Intégrations</h2>
    <div class="flex gap-2">
        <button class="btn btn-secondary btn-sm" onclick="openMcpLibrary()">Bibliothèque</button>
        <button class="btn btn-primary btn-sm" onclick="openCustomMcpModal()">+ Connecteur</button>
    </div>
</div>
<table>
    <thead>
        <tr>
            <th>Nom</th>
            <th style="width:120px">Categorie</th>
            <th style="width:200px">Actions</th>
        </tr>
    </thead>
    <tbody id="mcps-body">
    </tbody>
</table>
<div id="mcps-gate" style="display:none;position:absolute;inset:0;backdrop-filter:blur(3px);background:color-mix(in srgb,var(--bg) 80%,transparent);align-items:center;justify-content:center;border-radius:var(--radius,8px)">
    <div style="text-align:center;padding:2rem;max-width:420px">
        <h3 style="margin:0 0 0.5rem">Intégrations non disponibles</h3>
        <p style="color:var(--text-muted);margin:0 0 0.75rem;font-size:0.9rem">
            Les integrations permettent a vos agents de se connecter a vos outils :
            Gmail, Outlook, Salesforce, Notion, GitHub et bien d'autres.
        </p>
        <p style="color:var(--text-muted);margin:0 0 1.25rem;font-size:0.85rem">
            Disponibles a partir du plan Starter.
        </p>
        <a href="/pricing" class="btn btn-primary">Passer au plan Starter →</a>
    </div>
</div>
</div>

</div><!-- /integrations-section -->

<!-- Section Scripts connecteurs -->
<div id="script-connectors-section" style="margin-top:2.5rem;">
<div class="flex justify-between align-center">
    <h2 class="section-title" style="margin: 0; font-size: 1.25rem; font-weight: 600;">Scripts connecteurs</h2>
    <a href="/v3/scripts" class="btn btn-secondary btn-sm">+ Ajouter un script connecteur</a>
</div>
<p class="text-muted text-sm" style="margin: 0.25rem 0 0.75rem;">
    Scripts Python exposes comme connecteurs. Attachez-les a un groupe d'agents (page <a href="/v3/agents">Agents</a>) : l'orchestrateur du groupe peut alors les declencher a la voix, l'IA remplissant les parametres automatiquement.
</p>
<table id="script-connectors-table" style="display:none;">
    <thead>
        <tr>
            <th>Script</th>
            <th style="width:120px">Actions</th>
        </tr>
    </thead>
    <tbody id="script-connectors-body">
    </tbody>
</table>
<div id="script-connectors-empty" class="text-muted text-sm" style="display:none; padding:0.9rem 1rem; border:1px dashed var(--border,#e5e7eb); border-radius:0.5rem;">
    Aucun script connecteur pour l'instant. Sur la page <a href="/v3/scripts">Scripts</a>, ouvrez un script possedant un formulaire et activez <strong>Disponible comme connecteur</strong> : vous pourrez alors l'attacher a un groupe dans <a href="/v3/agents">Agents</a>.
</div>
</div>

<!-- Modal API Key -->
<div class="modal-overlay" id="modal-api">
    <div class="modal">
        <div class="modal-header">
            <h2 class="modal-title" id="api-modal-title">Configurer</h2>
            <button class="modal-close" onclick="closeModal('modal-api')">&times;</button>
        </div>
        <div class="modal-body">
            <input type="hidden" id="api-provider-id">
            <div class="form-group">
                <label class="form-label">Clé API</label>
                <input type="password" class="form-input" id="api-key-input" placeholder="sk-...">
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('modal-api')">Annuler</button>
            <button class="btn btn-primary" onclick="saveApiKey()">Enregistrer</button>
        </div>
    </div>
</div>

<!-- Modal Add Provider -->
<div class="modal-overlay" id="modal-add-provider">
    <div class="modal">
        <div class="modal-header">
            <h2 class="modal-title">Ajouter une cle API</h2>
            <button class="modal-close" onclick="closeModal('modal-add-provider')">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">Nom du service *</label>
                <input type="text" class="form-input" id="provider-name" placeholder="Ex: Notion, Salesforce, Slack...">
            </div>
            <div class="form-group">
                <label class="form-label">Variable d'environnement *</label>
                <input type="text" class="form-input" id="provider-env-var" placeholder="Ex: NOTION_API_KEY">
                <p class="text-muted text-sm mt-1">Cette variable sera ajoutée à votre fichier .env</p>
            </div>
            <div class="form-group">
                <label class="form-label">Clé API</label>
                <input type="password" class="form-input" id="provider-api-key" placeholder="sk-...">
            </div>
            <div class="form-group">
                <label class="form-label">Description</label>
                <input type="text" class="form-input" id="provider-description" placeholder="Description courte">
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('modal-add-provider')">Annuler</button>
            <button class="btn btn-primary" onclick="saveNewProvider()">Ajouter</button>
        </div>
    </div>
</div>

<!-- Modal MCP Custom -->
<div class="modal-overlay" id="modal-mcp">
    <div class="modal">
        <div class="modal-header">
            <h2 class="modal-title" id="mcp-modal-title">Ajouter un connecteur</h2>
            <button class="modal-close" onclick="closeModal('modal-mcp')">&times;</button>
        </div>
        <div class="modal-body">
            <input type="hidden" id="mcp-edit-id">
            <div id="mcp-security-warning" style="display:none; color:var(--warning,#f59e0b); font-size:0.85rem; margin-bottom:12px; padding:8px 10px; border-radius:6px; background:rgba(245,158,11,0.08);">
                &#9888; Les serveurs MCP tiers executent du code sur votre machine. Verifiez leur source avant de les activer.
            </div>
            <div class="form-group" style="margin-bottom:1.25rem">
                <label class="form-label">Coller la config JSON <span class="text-muted text-sm">(depuis un README ou Claude Desktop)</span></label>
                <textarea class="form-textarea" id="mcp-json-paste" rows="3"
                    placeholder='{"command":"npx","args":["-y","@org/mcp-server"],"env":{"API_KEY":"..."}}'></textarea>
                <div style="display:flex;align-items:center;gap:0.5rem;margin-top:0.4rem">
                    <button class="btn btn-primary btn-sm" type="button" onclick="importFromJson()">Importer</button>
                    <span class="text-muted text-xs">Nom et commande auto-detectes</span>
                </div>
            </div>
            <hr style="border-color:var(--border);margin:0.75rem 0">
            <p class="text-muted text-sm" style="margin-bottom:0.75rem">Ou configurez manuellement :</p>
            <div class="form-group">
                <label class="form-label">Nom *</label>
                <input type="text" class="form-input" id="mcp-name" placeholder="Mon connecteur">
            </div>
            <div class="form-group">
                <label class="form-label">Commande *</label>
                <input type="text" class="form-input" id="mcp-command" placeholder="npx, uvx, python...">
            </div>
            <div class="form-group">
                <label class="form-label">Arguments (un par ligne)</label>
                <textarea class="form-textarea" id="mcp-args" placeholder="-y&#10;@user/mon-mcp"></textarea>
            </div>
            <div class="form-group">
                <label class="form-label">Description</label>
                <input type="text" class="form-input" id="mcp-description" placeholder="Description courte">
            </div>
            <div class="form-group">
                <label class="form-label">Authentification</label>
                <select class="form-input" id="mcp-auth-type" onchange="onMcpAuthTypeChange()">
                    <option value="none">Aucune</option>
                    <option value="api_key">Clé API</option>
                    <option value="oauth">OAuth</option>
                </select>
                <p class="text-sm text-muted mt-1">Depend du connecteur utilise - consultez sa documentation</p>
            </div>
            <div class="form-group" id="mcp-api-provider-group" style="display: none;">
                <label class="form-label">Clé API liee</label>
                <select class="form-input" id="mcp-api-provider">
                    <option value="">Selectionner...</option>
                </select>
                <p class="text-sm text-muted mt-1">Variable d'environnement a passer au connecteur</p>
            </div>
            <div class="form-group" id="mcp-oauth-hint-group" style="display: none;">
                <p class="text-muted">
                    <strong>OAuth:</strong> L'authentification se fera via le bouton "Connexion" apres l'ajout du connecteur.
                </p>
            </div>
            <!-- Variables d'env: visible uniquement en mode edition -->
            <div class="form-group" id="mcp-env-group" style="display: none;">
                <label class="form-label">Variables d'environnement (avance)</label>
                <textarea class="form-textarea" id="mcp-env" rows="3" placeholder="VAR=valeur"></textarea>
                <p class="text-sm text-muted mt-1">Pour cas avancés uniquement</p>
            </div>
            <!-- Custom Parameters (v0.9.1) -->
            <div class="form-group" id="mcp-custom-params-group">
                <div class="flex justify-between align-center">
                    <label class="form-label">Paramètres de connexion</label>
                    <button type="button" class="btn btn-sm btn-secondary" onclick="addCustomParam()">+ Parametre</button>
                </div>
                <p class="text-sm text-muted">Variables d'environnement structurees (DB, API keys...)</p>
                <div id="custom-params-list" class="custom-params-list">
                    <!-- Paramètres dynamiques ajoutes ici -->
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('modal-mcp')">Annuler</button>
            <button class="btn btn-primary" onclick="saveCustomMcp()">Ajouter</button>
        </div>
    </div>
</div>

<!-- Template Custom Param -->
<template id="custom-param-template">
    <div class="custom-param-item" data-param-id="">
        <div class="custom-param-row">
            <div class="custom-param-field">
                <label>Variable d'env</label>
                <input type="text" class="form-input param-env-var" placeholder="DB_HOST" pattern="[A-Z_][A-Z0-9_]*" style="text-transform: uppercase;">
            </div>
            <div class="custom-param-field">
                <label>Label</label>
                <input type="text" class="form-input param-label" placeholder="Serveur de base de donnees">
            </div>
        </div>
        <div class="custom-param-row">
            <div class="custom-param-field">
                <label>Type</label>
                <select class="form-input param-type">
                    <option value="text">Texte</option>
                    <option value="password">Mot de passe</option>
                    <option value="number">Nombre</option>
                    <option value="url">URL</option>
                </select>
            </div>
            <div class="custom-param-field flex-grow">
                <label>Valeur</label>
                <input type="text" class="form-input param-value">
            </div>
            <button type="button" class="btn btn-sm btn-danger param-delete" onclick="removeCustomParam(this)">&times;</button>
        </div>
    </div>
</template>

<!-- Modal MCP Config (universel) -->
<div class="modal-overlay" id="modal-mcp-config">
    <div class="modal">
        <div class="modal-header">
            <h2 class="modal-title" id="mcp-config-title">Configurer</h2>
            <button class="modal-close" onclick="closeModal('modal-mcp-config')">&times;</button>
        </div>
        <div class="modal-body" id="mcp-config-body">
            <!-- Contenu dynamique -->
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('modal-mcp-config')">Annuler</button>
            <button class="btn btn-primary" onclick="saveMcpConfig()">Enregistrer</button>
        </div>
    </div>
</div>

<!-- Modal OAuth Auth -->
<div class="modal-overlay" id="modal-oauth">
    <div class="modal" style="max-width: 440px;">
        <div class="modal-header">
            <h2 class="modal-title" id="oauth-modal-title">Authentification</h2>
            <button class="modal-close" onclick="closeOAuthModal()">&times;</button>
        </div>
        <div class="modal-body" style="text-align: center;">
            <p id="oauth-instructions" style="margin-bottom: 1rem;"></p>
            <div id="oauth-code-section" style="display: none; margin-bottom: 1.5rem;">
                <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem;">Collez ce code sur la page Microsoft :</p>
                <div id="oauth-code-value" onclick="copyOAuthCode()" style="font-size: 2rem; font-weight: 700; letter-spacing: 0.2em; font-family: monospace; padding: 0.75rem 1.5rem; background: var(--bg-secondary); border-radius: 8px; cursor: pointer; user-select: all; transition: background 0.2s;" title="Cliquer pour copier"></div>
                <p id="oauth-copied-msg" style="font-size: 0.8rem; color: var(--accent); margin-top: 0.5rem; transition: opacity 0.3s;">Copie dans le presse-papier</p>
            </div>
            <div id="oauth-status" style="display: none; margin-bottom: 1rem;">
                <p id="oauth-status-text" style="font-size: 0.85rem; color: var(--text-muted);"></p>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeOAuthModal()">Fermer</button>
            <a id="oauth-open-url" href="#" target="_blank" class="btn btn-primary" style="display: none;">Ouvrir la page de connexion</a>
        </div>
    </div>
</div>

<!-- Modal MCP Library -->
<div class="modal-overlay" id="modal-mcp-library">
    <div class="modal" style="max-width: 600px;">
        <div class="modal-header">
            <h2 class="modal-title">Bibliothèque de connecteurs</h2>
            <button class="modal-close" onclick="closeModal('modal-mcp-library')">&times;</button>
        </div>
        <div class="modal-body">
            <div class="tabs">
                <button class="tab active" data-tab="available" onclick="showLibraryTab('available')">Disponibles</button>
                <button class="tab" data-tab="archived" onclick="showLibraryTab('archived')">Archives</button>
            </div>

            <div id="tab-available" class="tab-content">
                <div class="flex justify-between align-center mb-2" style="gap: 0.5rem;">
                    <input type="text" id="library-search" class="form-input" style="flex:1; padding: 0.25rem 0.5rem;" placeholder="Rechercher..." oninput="filterMcpLibrary()">
                    <select id="library-category-filter" class="form-input" style="width: auto; padding: 0.25rem 0.5rem;" onchange="filterMcpLibrary()">
                        <option value="">Toutes categories</option>
                    </select>
                </div>
                <div id="library-mcps-list">
                    <p class="text-muted text-center">Chargement...</p>
                </div>
            </div>

            <div id="tab-archived" class="tab-content" style="display:none">
                <p class="text-muted mb-2">Connecteurs archivés (désactivés)</p>
                <div id="library-archived-list">
                    <p class="text-muted text-center">Chargement...</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let planLimits = null;

document.addEventListener('DOMContentLoaded', async () => {
    const res = await fetch('/api/auth/status');
    const auth = await res.json();
    if (auth.configured && auth.authenticated) {
        planLimits = auth.subscription?.limits || {};
    }
});

async function loadConnections() {
    await Promise.all([loadApiKeys(), loadMcps(), loadScriptConnectors()]);
}

async function loadScriptConnectors() {
    try {
        const res = await fetch('/api/miniapp/connector-scripts');
        if (!res.ok) return;
        const data = await res.json();
        const connectors = data.scripts || [];

        const table = document.getElementById('script-connectors-table');
        const empty = document.getElementById('script-connectors-empty');
        const tbody = document.getElementById('script-connectors-body');

        if (connectors.length === 0) {
            table.style.display = 'none';
            empty.style.display = '';
            tbody.innerHTML = '';
            return;
        }

        empty.style.display = 'none';
        table.style.display = '';
        tbody.innerHTML = connectors.map(p => {
            return `<tr>
                <td>
                    <strong>${escapeHtml(p.name)}</strong>
                    ${p.description ? `<div class="text-sm text-muted">${escapeHtml(p.description)}</div>` : ''}
                </td>
                <td class="actions">
                    <a href="/v3/scripts?id=${encodeURIComponent(p.id)}" class="btn btn-ghost btn-sm">Configurer</a>
                </td>
            </tr>`;
        }).join('');
    } catch (e) {
        console.error('Erreur scripts connecteurs:', e);
    }
}

function escapeHtml(s) {
    return (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

async function loadApiKeys() {
    try {
        const res = await fetch('/api/settings/api-keys');
        const data = await res.json();

        renderApiKeys('other-keys-body', data.other_keys || []);
    } catch (e) {
        console.error('Erreur:', e);
    }
}

function renderKeyRow(k) {
    const mcpBadge = k.used_by_mcps?.length
        ? `<span class="badge badge-accent" style="font-size:0.65rem">${k.used_by_mcps.join(', ')}</span>`
        : '';
    return `<tr>
        <td>
            <strong>${k.name}</strong>
            ${k.required ? '<span class="badge badge-warning">Requis</span>' : ''}
            ${mcpBadge}
            <div class="text-sm text-muted">${k.description || ''}</div>
        </td>
        <td>
            <span class="badge ${k.configured ? 'badge-success' : 'badge-muted'}">
                ${k.configured ? k.masked : 'Non configuré'}
            </span>
        </td>
        <td class="actions">
            <button class="btn btn-ghost btn-sm" onclick="editApiKey('${k.id}', '${k.name}')">Configurer</button>
            ${k.configured ? `<button class="btn btn-ghost btn-sm text-danger" onclick="deleteApiKey('${k.id}')">Supprimer</button>` : ''}
            ${!k.builtin ? `<button class="btn btn-ghost btn-sm text-danger" onclick="deleteProvider('${k.id}', '${k.name}')">Retirer</button>` : ''}
        </td>
    </tr>`;
}

function renderApiKeys(tbodyId, keys) {
    const tbody = document.getElementById(tbodyId);

    if (keys.length === 0) {
        tbody.innerHTML = `<tr><td colspan="3" class="text-muted text-center">Aucune clé configurée</td></tr>`;
        return;
    }

    // Groupe 1 : pertinentes (configurees OU liees a un MCP actif OU custom)
    const relevant = keys.filter(k => k.configured || k.used_by_mcps?.length > 0 || !k.builtin);
    // Groupe 2 : builtin non configurees et non liees a un MCP
    const other = keys.filter(k => k.builtin && !k.configured && !(k.used_by_mcps?.length > 0));

    let html = relevant.map(k => renderKeyRow(k)).join('');

    if (other.length > 0) {
        html += `<tr id="other-keys-toggle">
            <td colspan="3" style="text-align:center;padding:0.5rem">
                <button class="btn btn-ghost btn-sm text-muted" onclick="toggleOtherKeys()">
                    Autres services disponibles (${other.length})
                </button>
            </td>
        </tr>`;
        html += other.map(k => `<tr class="other-key-row" style="display:none">${renderKeyRow(k).replace(/^<tr>|<\/tr>$/g, '')}</tr>`).join('');
    }

    if (relevant.length === 0 && other.length > 0) {
        html = `<tr><td colspan="3" class="text-muted text-center">Aucune clé configurée</td></tr>` + html;
    }

    tbody.innerHTML = html;
}

function toggleOtherKeys() {
    const rows = document.querySelectorAll('.other-key-row');
    const toggle = document.getElementById('other-keys-toggle');
    const btn = toggle ? toggle.querySelector('button') : null;
    const visible = rows[0]?.style.display !== 'none';
    rows.forEach(r => r.style.display = visible ? 'none' : '');
    if (btn) btn.textContent = visible
        ? `Autres services disponibles (${rows.length})`
        : 'Masquer';
}

function renderMcpRow(m, update) {
    const isRemote = m.transport === 'http';
    let transportBadge;
    if (isRemote) {
        transportBadge = '<span class="badge badge-hosted">Heberge</span>';
    } else if (m.source === 'custom') {
        transportBadge = '<span class="badge badge-accent">Custom</span>';
    } else {
        transportBadge = '<span class="badge badge-muted">Local</span>';
    }
    const configBtn = `<button class="btn btn-ghost btn-sm" onclick="openMcpConfig('${m.id}')">Configurer</button>`;
    const reinstallBtn = (!isRemote && m.package)
        ? `<button class="btn btn-ghost btn-sm" onclick="reinstallMcp('${m.id}')">Reinstaller</button>`
        : '';
    const deleteBtn = m.id !== 'memory'
        ? `<button class="btn btn-ghost btn-sm text-danger" onclick="confirmDeleteMcp('${m.id}', '${m.name.replace(/'/g, "\\'")}')">Supprimer</button>`
        : '';
    return `
    <tr>
        <td>
            <strong>${m.name}</strong>
            ${transportBadge}
            ${m.version ? `<span class="badge badge-muted" style="font-size:0.65rem">v${m.version}</span>` : ''}
            ${update ? `<span class="badge badge-warning" style="font-size:0.6rem" title="Mise a jour disponible (v${update.library_version})">MAJ</span>` : ''}
            <div class="text-sm text-muted">${m.description || ''}</div>
        </td>
        <td>${(m.categories || []).join(', ') || '-'}</td>
        <td class="actions">
            ${configBtn}
            ${reinstallBtn}
            ${deleteBtn}
        </td>
    </tr>`;
}

function renderSystemMcpRow(m) {
    return `
    <tr>
        <td>
            <strong>${m.name}</strong>
            <div class="text-sm text-muted">${m.description || ''}</div>
        </td>
        <td style="text-align:center">
            <label class="toggle-label" style="justify-content:center" title="${m.enabled ? 'Activé' : 'Désactivé'}">
                <input type="checkbox" ${m.enabled ? 'checked' : ''} onchange="toggleMcp('${m.id}', this.checked)">
            </label>
        </td>
    </tr>`;
}

async function loadMcps() {
    try {
        // Vérifier plan free (max_mcps === 0)
        if (!planLimits) {
            const authRes = await fetch('/api/auth/status');
            const auth = await authRes.json();
            if (auth.configured && auth.authenticated) {
                planLimits = auth.subscription?.limits || {};
            }
        }
        const isFreeGated = planLimits && planLimits.max_mcps === 0;

        const res = await fetch('/api/mcps');
        const allMcps = await res.json();
        const tbody = document.getElementById('mcps-body');
        const systemTbody = document.getElementById('system-mcps-body');
        const systemSection = document.getElementById('system-mcps-section');

        // Capacités natives : afficher TOUTES (enabled ou non) pour permettre toggle
        const systemMcps = allMcps.filter(m => m.system);
        // Memory est géré indépendamment (checkbox agent), pas dans Connexions
        const externalAll = allMcps.filter(m => m.enabled && m.id !== 'memory' && !m.system);
        const externalMcps = isFreeGated
            ? externalAll.filter(m => m.builtin)
            : externalAll;

        // Rendre la section "Capacités natives" si au moins un MCP system existe
        if (systemMcps.length > 0) {
            systemSection.style.display = '';
            systemTbody.innerHTML = systemMcps.map(renderSystemMcpRow).join('');
        }

        if (externalMcps.length === 0) {
            if (isFreeGated) {
                document.getElementById('mcps-gate').style.display = 'flex';
            } else {
                tbody.innerHTML = `<tr><td colspan="3" class="text-muted text-center">Aucun connecteur actif. <a href="#" onclick="openMcpLibrary(); return false;">Ajouter depuis la bibliotheque</a></td></tr>`;
            }
            return;
        }

        // Charger les MAJ bibliotheque (echec silencieux)
        let mcpUpdates = {};
        try {
            const upRes = await fetch('/api/mcp-updates');
            const upData = await upRes.json();
            (upData.updates || []).forEach(u => { mcpUpdates[u.mcp_id] = u; });
        } catch (_) {}

        tbody.innerHTML = externalMcps.map(m => renderMcpRow(m, mcpUpdates[m.id] || null)).join('');

        // Free plan: banner upgrade non-bloquant sous le tableau
        if (isFreeGated) {
            const gate = document.getElementById('mcps-gate');
            gate.style.cssText = 'display:flex;padding:1.5rem;justify-content:center;text-align:center;';
            gate.innerHTML = `<div style="max-width:420px">
                <p style="color:var(--text-muted);margin:0 0 0.5rem;font-size:0.9rem">
                    Connectez vos outils (Gmail, Outlook, GitHub...) avec le plan Starter.
                </p>
                <a href="/pricing" class="btn btn-primary btn-sm">Passer au plan Starter &rarr;</a>
            </div>`;
        }
    } catch (e) {
        console.error('Erreur:', e);
    }
}

function openModal(id) {
    document.getElementById(id).classList.add('open');
}

function closeModal(id) {
    document.getElementById(id).classList.remove('open');
}

function editApiKey(providerId, providerName) {
    document.getElementById('api-modal-title').textContent = 'Configurer ' + providerName;
    document.getElementById('api-provider-id').value = providerId;
    document.getElementById('api-key-input').value = '';
    openModal('modal-api');
}

async function saveApiKey() {
    const providerId = document.getElementById('api-provider-id').value;
    const key = document.getElementById('api-key-input').value;

    if (!key) {
        alert('Veuillez entrer une cle API');
        return;
    }

    try {
        const res = await apiFetch(`/api/settings/api-keys/${providerId}`, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({api_key: key})
        });
        const data = await res.json();

        if (data.ok) {
            closeModal('modal-api');
            loadApiKeys();
        } else {
            alert(data.error || 'Erreur');
        }
    } catch (e) {
        console.error('Erreur:', e);
    }
}

async function deleteApiKey(providerId) {
    if (!confirm('Supprimer cette cle API ?')) return;

    try {
        await apiFetch(`/api/settings/api-keys/${providerId}`, {method: 'DELETE'});
        loadApiKeys();
    } catch (e) {
        console.error('Erreur:', e);
    }
}

async function deleteProvider(providerId, providerName) {
    if (!confirm(`Retirer le service "${providerName}" ? La cle API associee sera aussi supprimee.`)) return;
    try {
        const res = await apiFetch(`/api/settings/api-providers/${providerId}`, {method: 'DELETE'});
        const data = await res.json();
        if (data.ok) {
            showToast('Service retire');
            loadApiKeys();
        } else {
            showToast(data.error || 'Erreur', 'error');
        }
    } catch (e) {
        console.error('Erreur:', e);
        showToast('Erreur de suppression', 'error');
    }
}

// === Add Custom Provider ===
function openAddProviderModal() {
    document.getElementById('provider-name').value = '';
    document.getElementById('provider-env-var').value = '';
    document.getElementById('provider-api-key').value = '';
    document.getElementById('provider-description').value = '';
    openModal('modal-add-provider');
}

async function saveNewProvider() {
    const name = document.getElementById('provider-name').value.trim();
    const envVar = document.getElementById('provider-env-var').value.trim();
    const apiKey = document.getElementById('provider-api-key').value;
    const description = document.getElementById('provider-description').value.trim();

    if (!name || !envVar) {
        alert('Nom et variable d\'environnement requis');
        return;
    }

    try {
        // 1. Creer le provider
        const res = await apiFetch('/api/settings/api-providers', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({name, env_var: envVar, description, category: 'other'})
        });
        const data = await res.json();

        if (!data.ok) {
            alert(data.error || 'Erreur creation provider');
            return;
        }

        // 2. Si cle fournie, la sauvegarder
        if (apiKey && data.provider) {
            await apiFetch(`/api/settings/api-keys/${data.provider.id}`, {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({api_key: apiKey})
            });
        }

        closeModal('modal-add-provider');
        loadApiKeys();
    } catch (e) {
        console.error('Erreur:', e);
        alert('Erreur lors de la creation');
    }
}

async function toggleMcp(id, enabled) {
    try {
        const res = await apiFetch(`/api/mcps/${id}/toggle`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({enabled})
        });
        const data = await res.json();
        if (!data.ok && res.status === 403) {
            alert(data.error || 'Limite atteinte');
        }
        loadMcps();
    } catch (e) {
        console.error('Erreur:', e);
    }
}

async function reinstallMcp(id) {
    if (!confirm('Reinstaller ce connecteur ? Le package sera re-telecharge au prochain usage.')) return;
    try {
        const res = await apiFetch(`/api/mcps/${id}/reinstall`, {method: 'POST'});
        const data = await res.json();
        if (data.ok) {
            showToast(data.message || 'Reinstallation demandee');
        } else {
            showToast(data.error || 'Erreur', 'error');
        }
    } catch (e) {
        console.error('Erreur:', e);
        showToast('Erreur de reinstallation', 'error');
    }
}

function confirmDeleteMcp(id, name) {
    if (!confirm(`Supprimer "${name}" ?\n\nLe connecteur pourra etre reinstalle depuis la bibliotheque.`)) return;
    deleteMcp(id);
}

async function deleteMcp(id) {
    try {
        const res = await apiFetch(`/api/mcps/${id}`, {method: 'DELETE'});
        const data = await res.json();
        if (data.ok) {
            const affected = data.agents_affected || [];
            if (affected.length > 0) {
                const names = affected.map(a => a.name).join(', ');
                showToast(`Connecteur supprime. Agents affectes : ${names}`, 'toast-warning', 5000);
            } else {
                showToast('Connecteur supprime', 'toast-success', 2000);
            }
            loadMcps();
        } else {
            alert(data.error || 'Erreur suppression');
        }
    } catch (e) {
        console.error('Erreur:', e);
    }
}

// === Custom Params (v0.9.1) ===
let customParamsCounter = 0;

function addCustomParam(data = null) {
    const template = document.getElementById('custom-param-template');
    const clone = template.content.cloneNode(true);
    const item = clone.querySelector('.custom-param-item');

    const paramId = data?.id || `new-${customParamsCounter++}`;
    item.dataset.paramId = paramId;

    if (data) {
        item.querySelector('.param-env-var').value = data.env_var || '';
        item.querySelector('.param-label').value = data.label || '';
        item.querySelector('.param-type').value = data.type || 'text';

        // Pour les passwords, afficher un placeholder si valeur masquee
        const valueInput = item.querySelector('.param-value');
        if (data.type === 'password') {
            valueInput.type = 'password';
            if (data.has_value) {
                valueInput.value = '••••••••';
                valueInput.dataset.masked = 'true';
            }
        } else {
            valueInput.value = data.value || '';
        }
    }

    // Event: changer le type d'input quand le type change
    item.querySelector('.param-type').addEventListener('change', function() {
        const valueInput = item.querySelector('.param-value');
        valueInput.type = this.value === 'password' ? 'password' : 'text';
    });

    // Event: convertir env_var en uppercase
    item.querySelector('.param-env-var').addEventListener('input', function() {
        this.value = this.value.toUpperCase().replace(/[^A-Z0-9_]/g, '_');
    });

    document.getElementById('custom-params-list').appendChild(clone);
}

function removeCustomParam(btn) {
    btn.closest('.custom-param-item').remove();
}

function getCustomParams() {
    const params = [];
    document.querySelectorAll('#custom-params-list .custom-param-item').forEach(item => {
        const envVar = item.querySelector('.param-env-var').value.trim();
        const label = item.querySelector('.param-label').value.trim();
        const type = item.querySelector('.param-type').value;
        const valueInput = item.querySelector('.param-value');
        let value = valueInput.value;

        if (!envVar) return; // Skip parametres invalides

        // Ne pas renvoyer la valeur masquee (le backend comprendra)
        params.push({
            id: item.dataset.paramId,
            env_var: envVar,
            label: label || envVar,
            type: type,
            value: value
        });
    });
    return params;
}

function clearCustomParams() {
    document.getElementById('custom-params-list').innerHTML = '';
    customParamsCounter = 0;
}

async function openCustomMcpModal() {
    // Verifier acces custom MCPs
    try {
        const authRes = await fetch('/api/auth/status');
        const auth = await authRes.json();
        if (auth.configured && auth.authenticated) {
            const features = auth.subscription?.limits?.features || {};
            if (!features.custom_mcps) {
                alert('Connecteurs custom réservés aux plans Solo+');
                return;
            }
        }
    } catch(e) {}

    document.getElementById('mcp-modal-title').textContent = 'Ajouter un connecteur';
    document.getElementById('mcp-edit-id').value = '';
    document.getElementById('mcp-name').value = '';
    document.getElementById('mcp-command').value = '';
    document.getElementById('mcp-args').value = '';
    document.getElementById('mcp-description').value = '';
    document.getElementById('mcp-env').value = '';

    // Cacher le champ env (visible uniquement en edition)
    document.getElementById('mcp-env-group').style.display = 'none';
    // Afficher le warning securite (creation uniquement)
    document.getElementById('mcp-security-warning').style.display = 'block';

    // Reset auth type selector
    document.getElementById('mcp-auth-type').value = 'none';
    onMcpAuthTypeChange();

    // Charger les providers API pour le select
    await loadApiProvidersSelect();
    document.getElementById('mcp-api-provider').value = '';

    // Vider les custom params
    clearCustomParams();

    openModal('modal-mcp');
}

async function loadApiProvidersSelect() {
    try {
        const res = await fetch('/api/settings/api-keys');
        const data = await res.json();
        const select = document.getElementById('mcp-api-provider');

        // Garder l'option "Aucune"
        select.innerHTML = '<option value="">Aucune</option>';

        // Ajouter les providers configures
        (data.other_keys || []).forEach(p => {
            if (p.configured) {
                select.innerHTML += `<option value="${p.id}">${p.name} (${p.env_var})</option>`;
            }
        });
    } catch (e) {
        console.error('Erreur chargement providers:', e);
    }
}

function onMcpAuthTypeChange() {
    const authType = document.getElementById('mcp-auth-type').value;
    const apiProviderGroup = document.getElementById('mcp-api-provider-group');
    const oauthHintGroup = document.getElementById('mcp-oauth-hint-group');

    // Cacher les deux par defaut
    apiProviderGroup.style.display = 'none';
    oauthHintGroup.style.display = 'none';

    if (authType === 'api_key') {
        apiProviderGroup.style.display = 'block';
    } else if (authType === 'oauth') {
        oauthHintGroup.style.display = 'block';
    }
}

async function editMcp(mcpId) {
    try {
        const res = await fetch(`/api/mcps/custom/${mcpId}`);
        const data = await res.json();

        if (!data.ok || !data.mcp) {
            alert('Connecteur non trouvé');
            return;
        }

        const mcp = data.mcp;
        document.getElementById('mcp-modal-title').textContent = 'Modifier le connecteur';
        document.getElementById('mcp-edit-id').value = mcp.id;
        document.getElementById('mcp-name').value = mcp.name || '';
        document.getElementById('mcp-command').value = mcp.command || '';
        document.getElementById('mcp-args').value = (mcp.args || []).join('\n');
        document.getElementById('mcp-description').value = mcp.description || '';

        // Afficher le champ env en mode edition (avance)
        document.getElementById('mcp-env-group').style.display = 'block';
        // Cacher le warning securite (edition = serveur deja ajoute)
        document.getElementById('mcp-security-warning').style.display = 'none';

        // Convertir env dict en texte
        const envText = Object.entries(mcp.env || {}).map(([k, v]) => `${k}=${v}`).join('\n');
        document.getElementById('mcp-env').value = envText;

        // Charger les providers et selectionner celui du MCP
        await loadApiProvidersSelect();
        document.getElementById('mcp-api-provider').value = mcp.required_api_key || '';

        // Restaurer le type d'auth
        const authType = mcp.auth_type || (mcp.required_api_key ? 'api_key' : 'none');
        document.getElementById('mcp-auth-type').value = authType;
        onMcpAuthTypeChange();

        // Charger les custom_params (v0.9.1)
        clearCustomParams();
        if (mcp.custom_params) {
            mcp.custom_params.forEach(p => addCustomParam(p));
        }

        openModal('modal-mcp');
    } catch (e) {
        console.error('Erreur:', e);
        alert('Erreur lors du chargement');
    }
}

async function importFromJson() {
    const raw = document.getElementById('mcp-json-paste').value.trim();
    if (!raw) return;
    try {
        const config = JSON.parse(raw);
        const res = await apiFetch('/api/mcps/import-json', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({config})
        });
        const data = await res.json();
        if (data.ok) {
            closeModal('modal-mcp');
            document.getElementById('mcp-json-paste').value = '';
            loadMcps();
            showToast(`Connecteur "${data.mcp.name}" ajouté`, 'toast-success');
        } else {
            showToast(data.error || 'Erreur', 'toast-error');
        }
    } catch (e) {
        showToast('JSON invalide — verifiez le format', 'toast-error');
    }
}

async function saveCustomMcp() {
    const editId = document.getElementById('mcp-edit-id').value;
    const name = document.getElementById('mcp-name').value.trim();
    const command = document.getElementById('mcp-command').value.trim();
    const argsText = document.getElementById('mcp-args').value.trim();
    const description = document.getElementById('mcp-description').value.trim();
    const envText = document.getElementById('mcp-env').value.trim();
    const authType = document.getElementById('mcp-auth-type').value;
    const requiredApiKey = document.getElementById('mcp-api-provider').value;

    if (!name || !command) {
        alert('Nom et commande sont requis');
        return;
    }

    const args = argsText ? argsText.split('\n').map(a => a.trim()).filter(a => a) : [];

    // Parser les variables d'environnement (format KEY=value)
    const env = {};
    if (envText) {
        envText.split('\n').forEach(line => {
            const idx = line.indexOf('=');
            if (idx > 0) {
                const key = line.substring(0, idx).trim();
                const value = line.substring(idx + 1).trim();
                if (key) env[key] = value;
            }
        });
    }

    try {
        const url = editId ? `/api/mcps/custom/${editId}` : '/api/mcps/custom';
        const method = editId ? 'PUT' : 'POST';

        // Recuperer les custom_params (v0.9.1)
        const customParams = getCustomParams();

        const payload = {name, command, args, description, env, custom_params: customParams};
        if (authType && authType !== 'none') payload.auth_type = authType;
        if (authType === 'api_key' && requiredApiKey) payload.required_api_key = requiredApiKey;

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

        if (data.ok || data.id) {
            closeModal('modal-mcp');
            loadMcps();
        } else {
            alert(data.error || 'Erreur');
        }
    } catch (e) {
        console.error('Erreur:', e);
    }
}

// === MCP Library ===
function openMcpLibrary() {
    if (planLimits && planLimits.max_mcps === 0) return;
    openModal('modal-mcp-library');
    loadMcpLibrary();
}

function showLibraryTab(tabName) {
    document.querySelectorAll('#modal-mcp-library .tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('#modal-mcp-library .tab-content').forEach(c => c.style.display = 'none');

    document.querySelector(`#modal-mcp-library .tab[data-tab="${tabName}"]`).classList.add('active');
    document.getElementById(`tab-${tabName}`).style.display = 'block';

    // Charger les MCPs archives quand on clique sur l'onglet
    if (tabName === 'archived') {
        loadArchivedMcps();
    }
}

// Cache pour le filtre
let mcpLibraryCache = { library: {}, categories: {}, currentIds: [], installedVersions: {} };

async function loadMcpLibrary() {
    const list = document.getElementById('library-mcps-list');
    const filter = document.getElementById('library-category-filter');
    list.innerHTML = '<p class="text-muted text-center">Chargement...</p>';

    try {
        const [libraryRes, currentRes] = await Promise.all([
            fetch('/api/mcps/library'),
            fetch('/api/mcps')
        ]);
        const data = await libraryRes.json();
        mcpLibraryCache.library = data.library || {};
        mcpLibraryCache.categories = data.categories || {};
        const currentMcps = await currentRes.json();
        mcpLibraryCache.currentIds = currentMcps.filter(m => m.enabled).map(m => m.id);
        // Stocker les versions installees pour detecter les mises a jour
        mcpLibraryCache.installedVersions = {};
        currentMcps.forEach(m => {
            if (m.enabled && m.version) mcpLibraryCache.installedVersions[m.id] = m.version;
        });

        // Remplir le select des categories
        const cats = new Set();
        for (const mcp of Object.values(mcpLibraryCache.library)) {
            cats.add(mcp.category || 'autre');
        }
        filter.innerHTML = '<option value="">Toutes categories</option>';
        [...cats].sort().forEach(catId => {
            const catName = mcpLibraryCache.categories[catId]?.name || catId;
            filter.innerHTML += `<option value="${catId}">${catName}</option>`;
        });

        renderMcpLibrary();
    } catch (e) {
        console.error('Erreur:', e);
        list.innerHTML = '<p class="text-danger text-center">Erreur de chargement</p>';
    }
}

function filterMcpLibrary() {
    renderMcpLibrary();
}

function renderMcpLibrary() {
    const list = document.getElementById('library-mcps-list');
    const filterValue = document.getElementById('library-category-filter').value;
    const searchValue = (document.getElementById('library-search')?.value || '').toLowerCase();
    const { library, categories, currentIds, installedVersions } = mcpLibraryCache;

    if (Object.keys(library).length === 0) {
        list.innerHTML = '<div class="empty-state"><p class="text-muted">Aucun connecteur dans la bibliothèque</p></div>';
        return;
    }

    // Separer embedded (core) vs catalog
    const embeddedByCategory = {};
    const catalogByCategory = {};

    for (const [id, mcp] of Object.entries(library)) {
        const catId = mcp.category || 'autre';
        if (filterValue && catId !== filterValue) continue;
        if (searchValue && !mcp.name?.toLowerCase().includes(searchValue) && !mcp.description?.toLowerCase().includes(searchValue)) continue;
        const catName = categories[catId]?.name || catId;
        const target = mcp.source === 'embedded' ? embeddedByCategory : catalogByCategory;
        if (!target[catName]) target[catName] = [];
        const hasUpdate = mcp.version && installedVersions[id] && mcp.version !== installedVersions[id];
        target[catName].push({...mcp, id, installed: currentIds.includes(id), hasUpdate});
    }

    const hasEmbedded = Object.keys(embeddedByCategory).length > 0;
    const hasCatalog = Object.keys(catalogByCategory).length > 0;

    if (!hasEmbedded && !hasCatalog) {
        list.innerHTML = '<div class="empty-state"><p class="text-muted">Aucun connecteur dans cette categorie</p></div>';
        return;
    }

    let html = '';

    // Section Core
    if (hasEmbedded) {
        html += '<div class="library-section-header"><span class="badge badge-success">Core</span> <span class="text-sm text-muted">Toujours disponibles</span></div>';
        html += renderCategoryGroup(embeddedByCategory);
    }

    // Section Catalogue
    if (hasCatalog) {
        const count = Object.values(catalogByCategory).flat().length;
        html += `<div class="library-section-header"><span class="badge" style="background:var(--accent);color:#fff;">Catalogue</span> <span class="text-sm text-muted">${count} connecteurs</span></div>`;
        html += renderCategoryGroup(catalogByCategory);
    }

    list.innerHTML = html;
}

function renderCategoryGroup(byCategory) {
    let html = '';
    for (const [cat, mcps] of Object.entries(byCategory)) {
        html += `<h4 class="text-sm text-muted" style="margin: 1rem 0 0.5rem;">${cat}</h4>`;
        mcps.forEach(m => {
            const stabilityBadge = m.stability === 'beta' ? '<span class="badge badge-muted" style="font-size:0.6rem">Beta</span>' :
                                   m.stability === 'experimental' ? '<span class="badge badge-warning" style="font-size:0.6rem">Exp.</span>' : '';
            const hostedBadge = m.transport === 'http' ? '<span class="badge badge-hosted">Hébergé</span>' : '';
            const installLabel = 'Ajouter';
            html += `
            <div class="library-item">
                <div class="library-item-info">
                    <strong>${m.name}</strong>
                    ${m.installed ? '<span class="badge badge-success">Installé</span>' : ''}
                    ${m.hasUpdate ? '<span class="badge badge-warning">Maj dispo</span>' : ''}
                    ${hostedBadge}
                    ${stabilityBadge}
                    ${m.version ? `<span class="badge badge-muted" style="font-size:0.65rem">v${m.version}</span>` : ''}
                    <div class="text-sm text-muted">${m.description || ''}</div>
                </div>
                ${!m.installed
                    ? `<button class="btn btn-sm btn-secondary" onclick="installMcp('${m.id}')">${installLabel}</button>`
                    : m.hasUpdate
                        ? `<button class="btn btn-sm btn-primary" onclick="installMcp('${m.id}')">Mettre a jour</button>`
                        : ''
                }
            </div>`;
        });
    }
    return html;
}

async function installMcp(mcpId) {
    try {
        const res = await apiFetch(`/api/mcps/${mcpId}/install`, {method: 'POST'});
        const data = await res.json();

        if (data.ok || data.success) {
            showToast(`${data.name || mcpId} ajouté`, 'toast-success', 2000);
            loadMcpLibrary();
            await loadMcps();

            // Si MCP remote (OAuth) → ouvrir la config pour lancer la connexion
            if (data.transport === 'http' || data.auth_type === 'oauth') {
                closeModal('modal-mcp-library');
                setTimeout(() => openMcpConfig(mcpId), 300);
            }
        } else {
            alert(data.error || 'Erreur installation');
        }
    } catch (e) {
        console.error('Erreur:', e);
    }
}

// === MCP Config Modal - Systeme modulaire v0.9.0 ===
let currentMcpSchema = null;

/**
 * Renderers pour chaque type de champ du schema.
 * Chaque renderer prend (field, value, providerStatus?) et retourne du HTML.
 */
const FIELD_RENDERERS = {
    text: (field, value) => `
        <div class="form-group">
            <label class="form-label">${field.label}${field.required ? ' *' : ''}</label>
            <input type="text" class="form-input" id="field-${field.id}"
                   value="${value || field.default || ''}"
                   placeholder="${field.hint || ''}"
                   ${field.required ? 'required' : ''}>
            ${field.hint ? `<p class="text-sm text-muted mt-1">${field.hint}</p>` : ''}
        </div>
    `,

    password: (field, value) => `
        <div class="form-group">
            <label class="form-label">${field.label}</label>
            <input type="password" class="form-input" id="field-${field.id}"
                   placeholder="${field.hint || ''}">
        </div>
    `,

    select: (field, value) => `
        <div class="form-group">
            <label class="form-label">${field.label}</label>
            <select class="form-input" id="field-${field.id}">
                ${(field.options || []).map(opt => `
                    <option value="${opt.value}" ${(value || field.default) === opt.value ? 'selected' : ''}>
                        ${opt.label || opt.value}
                    </option>
                `).join('')}
            </select>
        </div>
    `,

    api_key_link: (field, value, status) => `
        <div class="form-group">
            <label class="form-label">${field.label}</label>
            <div class="flex gap-2">
                <input type="password" class="form-input" id="field-${field.id}"
                       placeholder="${field.hint || 'Entrez votre cle API'}">
            </div>
            <p class="text-sm mt-1 ${status?.configured ? 'text-success' : 'text-muted'}">
                ${status?.configured ? 'Configurée : ' + status.masked : 'Non configurée'}
            </p>
        </div>
    `,

    folder_list: (field, value) => {
        const folders = Array.isArray(value) ? value.join('\n') : (value || (field.default || []).join('\n'));
        return `
            <div class="form-group">
                <label class="form-label">${field.label}</label>
                <textarea class="form-textarea" id="field-${field.id}" rows="4">${folders}</textarea>
                <p class="text-sm text-muted mt-1">${field.hint || 'Un chemin par ligne'}</p>
            </div>
        `;
    },

    oauth_button: (field, value, status) => {
        const oauthStatus = currentMcpSchema?.oauth_status || {};
        const isConnected = oauthStatus.authenticated;
        const needsSetup = oauthStatus.needs_setup;
        const isComingSoon = oauthStatus.coming_soon;
        const statusMsg = oauthStatus.message || '';

        return `
            <div class="form-group">
                <label class="form-label">${field.label}</label>
                ${field.hint ? `<p class="text-sm text-muted mb-2">${field.hint}</p>` : ''}
                <div class="flex gap-2 items-center">
                    <button class="btn ${isConnected ? 'btn-secondary' : 'btn-primary'}"
                            onclick="launchOAuth(currentMcpSchema?.mcp?.id, '${field.provider || ''}')"
                            ${isComingSoon ? 'disabled title="Bientôt disponible"' : ''}>
                        ${isComingSoon ? 'Bientôt disponible' : isConnected ? 'Reconnecter' : 'Se connecter'}
                    </button>
                    <span class="text-sm ${isConnected ? 'text-success' : needsSetup ? 'text-warning' : 'text-muted'}">
                        ${statusMsg}
                    </span>
                </div>
            </div>
        `;
    },

    textarea: (field, value) => `
        <div class="form-group">
            <label class="form-label">${field.label}${field.required ? ' *' : ''}</label>
            <textarea class="form-textarea" id="field-${field.id}" rows="4"
                      placeholder="${field.hint || ''}">${value || field.default || ''}</textarea>
            ${field.hint ? `<p class="text-sm text-muted mt-1">${field.hint}</p>` : ''}
        </div>
    `,
};

async function openMcpConfig(mcpId) {
    try {
        // Utiliser le nouvel endpoint config-schema
        const res = await fetch(`/api/mcps/${mcpId}/config-schema`);
        const data = await res.json();

        if (!data.ok) {
            alert(data.error || 'Connecteur non trouvé');
            return;
        }

        currentMcpSchema = data;
        const {mcp, schema, current_values, provider_status} = data;

        document.getElementById('mcp-config-title').textContent = 'Configurer ' + mcp.name;

        let html = `<input type="hidden" id="config-mcp-id" value="${mcp.id}">`;

        // Rendu dynamique de chaque champ du schema
        for (const field of schema.fields || []) {
            const value = current_values[field.id];
            const renderer = FIELD_RENDERERS[field.type];

            if (renderer) {
                if (field.type === 'api_key_link') {
                    const status = provider_status[field.provider] || {};
                    html += renderer(field, value, status);
                } else if (field.type === 'oauth_button') {
                    html += renderer(field, value, {});
                } else {
                    html += renderer(field, value);
                }
            } else {
                // Fallback: texte simple
                html += FIELD_RENDERERS.text(field, value);
            }
        }

        // Message si aucun champ configurable (hors categorie)
        const configurableFields = (schema.fields || []).filter(f => f.id !== 'category');
        if (configurableFields.length === 0) {
            html += `
                <p class="text-sm text-muted" style="margin-top: 1rem;">
                    Ce connecteur ne necessite pas de configuration supplementaire.
                </p>
            `;
        }

        document.getElementById('mcp-config-body').innerHTML = html;
        openModal('modal-mcp-config');
    } catch (e) {
        console.error('Erreur:', e);
        alert('Erreur lors du chargement');
    }
}

let _oauthPolling = false;

function closeOAuthModal() {
    _oauthPolling = false;
    closeModal('modal-oauth');
}

function copyOAuthCode() {
    const code = document.getElementById('oauth-code-value').textContent;
    if (!code) return;
    navigator.clipboard.writeText(code).then(() => {
        const msg = document.getElementById('oauth-copied-msg');
        msg.style.opacity = '1';
        setTimeout(() => { msg.style.opacity = '0'; }, 3000);
    }).catch(() => {});
}

function setOAuthStatus(text, color) {
    const el = document.getElementById('oauth-status');
    const txt = document.getElementById('oauth-status-text');
    el.style.display = 'block';
    txt.textContent = text;
    txt.style.color = color || 'var(--text-muted)';
}

async function pollAuthStatus(mcpId) {
    _oauthPolling = true;
    setOAuthStatus('En attente de connexion...', 'var(--text-muted)');

    for (let i = 0; i < 180 && _oauthPolling; i++) {
        await new Promise(r => setTimeout(r, 5000));
        if (!_oauthPolling) return;

        try {
            const res = await apiFetch(`/api/mcps/${mcpId}/auth/poll`, {method: 'POST'});
            const data = await res.json();

            if (data.status === 'success') {
                setOAuthStatus('Authentification reussie !', 'var(--success, #22c55e)');
                document.getElementById('oauth-code-section').style.display = 'none';
                document.getElementById('oauth-open-url').style.display = 'none';
                setTimeout(() => { closeOAuthModal(); location.reload(); }, 2000);
                return;
            }
            if (data.status === 'expired' || data.status === 'declined' || data.status === 'error') {
                setOAuthStatus(data.message || 'Erreur', 'var(--danger, #ef4444)');
                _oauthPolling = false;
                return;
            }
        } catch (e) {
            console.error('Poll error:', e);
        }
    }
    _oauthPolling = false;
}

async function launchOAuth(mcpId, provider) {
    if (!mcpId) return;

    // Show loading state on the clicked OAuth button
    const oauthBtn = provider
        ? document.querySelector(`button[onclick*="launchOAuth"][onclick*="'${provider}'"]`)
        : document.querySelector(`button[onclick*="launchOAuth"]`);
    const originalText = oauthBtn?.textContent;
    if (oauthBtn) {
        oauthBtn.disabled = true;
        oauthBtn.textContent = 'Connexion...';
    }

    try {
        const body = {};
        if (provider) body.provider = provider;
        const res = await apiFetch(`/api/mcps/${mcpId}/auth`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(body),
        });
        const data = await res.json();

        if (data.ok) {
            // Cas simple : pas de device_code, pas d'url, pas de poll
            // → juste un toast de confirmation (ex: Google Workspace)
            if (!data.device_code && !data.url && !data.poll) {
                showToast(data.instructions || 'Configuration OK', 'toast-success', 4000);
                loadMcps();
            } else {
                const mcpName = currentMcpSchema?.mcp?.name || mcpId;
                document.getElementById('oauth-modal-title').textContent = 'Connexion ' + mcpName;
                document.getElementById('oauth-instructions').textContent = data.instructions || 'Authentification lancee';
                document.getElementById('oauth-status').style.display = 'none';

                const codeSection = document.getElementById('oauth-code-section');
                const openUrlBtn = document.getElementById('oauth-open-url');

                if (data.device_code) {
                    document.getElementById('oauth-code-value').textContent = data.device_code;
                    codeSection.style.display = 'block';
                    navigator.clipboard.writeText(data.device_code).then(() => {
                        const msg = document.getElementById('oauth-copied-msg');
                        msg.style.opacity = '1';
                        setTimeout(() => { msg.style.opacity = '0'; }, 3000);
                    }).catch(() => {});
                } else {
                    codeSection.style.display = 'none';
                }

                if (data.url) {
                    openUrlBtn.href = data.url;
                    openUrlBtn.textContent = 'Ouvrir la page de connexion';
                    openUrlBtn.style.display = '';
                } else {
                    openUrlBtn.style.display = 'none';
                }

                openModal('modal-oauth');

                if (data.poll) {
                    pollAuthStatus(mcpId);
                }
            }
        } else if (data.coming_soon) {
            showToast(data.message || 'Bientôt disponible', 'toast-info', 3000);
        } else if (data.needs_setup) {
            document.getElementById('oauth-modal-title').textContent = 'Configuration requise \u2014 ' + (currentMcpSchema?.mcp?.name || mcpId);
            document.getElementById('oauth-instructions').textContent = data.setup_instructions || '';
            document.getElementById('oauth-code-section').style.display = 'none';
            document.getElementById('oauth-status').style.display = 'none';
            const openUrlBtn = document.getElementById('oauth-open-url');
            if (data.setup_url) {
                openUrlBtn.href = data.setup_url;
                openUrlBtn.textContent = 'Ouvrir la console';
                openUrlBtn.style.display = '';
            } else {
                openUrlBtn.style.display = 'none';
            }
            openModal('modal-oauth');
        } else {
            alert(data.error || 'Erreur authentification');
        }
    } catch (e) {
        console.error('Erreur:', e);
        alert('Erreur de connexion au serveur');
    } finally {
        if (oauthBtn) {
            oauthBtn.disabled = false;
            oauthBtn.textContent = originalText || 'Se connecter';
        }
    }
}

function collectConfigValues() {
    // Collecter les valeurs de tous les champs du schema
    const values = {};
    if (!currentMcpSchema?.schema?.fields) return values;

    for (const field of currentMcpSchema.schema.fields) {
        const el = document.getElementById(`field-${field.id}`);
        if (!el) continue;

        if (field.type === 'folder_list') {
            values[field.id] = el.value.split('\n').filter(s => s.trim());
        } else {
            values[field.id] = el.value;
        }
    }

    return values;
}

async function saveMcpConfig() {
    const mcpId = document.getElementById('config-mcp-id').value;
    const values = collectConfigValues();

    try {
        const res = await apiFetch(`/api/mcps/${mcpId}/config`, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({values})
        });
        const data = await res.json();

        if (data.ok) {
            closeModal('modal-mcp-config');
            loadMcps();
        } else {
            alert(data.error || 'Erreur sauvegarde');
        }
    } catch (e) {
        console.error('Erreur:', e);
    }
}

// === Archived MCPs ===
async function loadArchivedMcps() {
    const list = document.getElementById('library-archived-list');
    list.innerHTML = '<p class="text-muted text-center">Chargement...</p>';

    try {
        const res = await fetch('/api/mcps');
        const mcps = await res.json();
        const archived = mcps.filter(m => !m.enabled);

        if (archived.length === 0) {
            list.innerHTML = '<div class="empty-state"><p class="text-muted">Aucun connecteur archive</p></div>';
            return;
        }

        list.innerHTML = archived.map(m => `
            <div class="library-item">
                <div class="library-item-info">
                    <strong>${m.name}</strong>
                    ${m.source === 'custom' ? '<span class="badge badge-accent">Custom</span>' : ''}
                    <div class="text-sm text-muted">${m.description || ''}</div>
                </div>
                <div class="flex gap-1">
                    <button class="btn btn-sm btn-secondary" onclick="restoreMcp('${m.id}')">Restaurer</button>
                    <button class="btn btn-sm btn-ghost text-danger" onclick="deleteArchivedMcp('${m.id}')" title="Supprimer">&times;</button>
                </div>
            </div>
        `).join('');
    } catch (e) {
        console.error('Erreur:', e);
        list.innerHTML = '<p class="text-danger text-center">Erreur de chargement</p>';
    }
}

async function restoreMcp(mcpId) {
    await toggleMcp(mcpId, true);
    loadArchivedMcps();
    loadMcps();
}

async function deleteArchivedMcp(mcpId) {
    if (!confirm('Supprimer définitivement ce connecteur ?')) return;

    try {
        const res = await apiFetch(`/api/mcps/${mcpId}`, {method: 'DELETE'});
        const data = await res.json();
        if (data.ok) {
            loadArchivedMcps();
            loadMcps();
        } else {
            alert(data.error || 'Erreur suppression');
        }
    } catch (e) {
        console.error('Erreur:', e);
    }
}

function showToast(message, className = 'toast-success', duration = 2000) {
    const toast = document.createElement('div');
    toast.className = `toast ${className}`;
    toast.textContent = message;
    toast.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 12px 16px;
        border-radius: 4px;
        font-size: 14px;
        z-index: 10000;
        animation: slideIn 0.3s ease-out;
    `;
    if (className === 'toast-success') {
        toast.style.backgroundColor = '#10b981';
        toast.style.color = 'white';
    } else if (className === 'toast-warning') {
        toast.style.backgroundColor = '#f59e0b';
        toast.style.color = 'white';
    } else if (className === 'toast-error') {
        toast.style.backgroundColor = '#ef4444';
        toast.style.color = 'white';
    }
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), duration);
}

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