{% extends "base.html" %}

{% block content %}
<!-- Section 1: Modèle LLM -->
<section class="settings-section">
    <h2>Modele LLM</h2>
    <p class="section-desc">Modeles Mistral utilises pour la transcription et les agents.</p>
    <div class="settings-form">
        <div class="form-row">
            <label for="model-stt">Modele STT (transcription)</label>
            <select id="model-stt" class="input-field">
                <option value="voxtral-mini-latest">voxtral-mini-latest</option>
                <option value="voxtral-large-latest">voxtral-large-latest</option>
            </select>
        </div>
        <div class="form-row">
            <label for="model-llm">Modele LLM (agents)</label>
            <select id="model-llm" class="input-field">
                <option value="mistral-small-latest">mistral-small-latest</option>
                <option value="mistral-large-latest">mistral-large-latest</option>
            </select>
        </div>
        <button class="btn" onclick="saveModels()">Sauvegarder</button>
    </div>
</section>

<!-- Section 2: Clés API -->
<section class="settings-section">
    <h2>Clés API</h2>
    <p class="section-desc">Configurez vos cles API pour les differents providers.</p>

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

    <div id="api-keys-container" style="display: none;">
        <!-- LLM Providers -->
        <h3 class="subsection-title">Providers LLM</h3>
        <div id="llm-providers-list" class="api-keys-list"></div>

        <!-- Other API Keys -->
        <h3 class="subsection-title">Autres services</h3>
        <div id="other-keys-list" class="api-keys-list"></div>

        <!-- Add custom provider -->
        <details class="add-provider-collapse">
            <summary>Ajouter un provider</summary>
            <div class="add-provider-form">
                <input type="text" id="new-provider-name" class="input-field" placeholder="Nom (ex: Notion)">
                <input type="text" id="new-provider-env" class="input-field" placeholder="Variable env (ex: NOTION_API_KEY)">
                <input type="text" id="new-provider-desc" class="input-field" placeholder="Description (optionnel)">
                <select id="new-provider-category" class="input-field">
                    <option value="other">Autre service</option>
                    <option value="llm">Provider LLM</option>
                </select>
                <button class="btn" onclick="addProvider()">Ajouter</button>
            </div>
        </details>
    </div>
</section>

<!-- Section 3: Serveurs MCP -->
<section class="settings-section">
    <h2>Serveurs MCP</h2>
    <p class="section-desc">Services connectes pour vos agents vocaux.</p>

    <!-- Mode Onboarding (first_run) -->
    <div id="onboarding-section" class="onboarding-section" style="display: none;">
        <div class="onboarding-header">
            <p>Selectionnez les services que vous souhaitez utiliser.</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" onclick="completeSetup()">Valider la selection</button>
            <button class="btn btn-secondary" onclick="skipSetup()">Passer</button>
        </div>
    </div>

    <!-- Mode Normal -->
    <div id="normal-section" style="display: none;">
        <div class="section-header">
            <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>
    </div>
</section>

<!-- 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>

<!-- 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 MCP</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>

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

{% block scripts %}
<style>
    /* === API KEYS === */
    .api-keys-list {
        margin-bottom: 1.5rem;
    }
    .api-key-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        margin-bottom: 0.5rem;
    }
    .api-key-info {
        flex: 1;
    }
    .api-key-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.25rem;
    }
    .api-key-name {
        font-weight: 600;
    }
    .api-key-desc {
        font-size: 0.85rem;
        color: var(--text-muted);
    }
    .api-key-status {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.85rem;
        margin-top: 0.25rem;
    }
    .api-key-status.status-ok { color: var(--success); }
    .api-key-status.status-missing { color: var(--text-muted); }
    .api-key-actions {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    .api-key-input {
        width: 200px;
    }
    .badge {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
        border-radius: 3px;
    }
    .badge-required { background: var(--danger); color: white; }
    .badge-custom { background: var(--accent); color: white; }
    .subsection-title {
        font-size: 1rem;
        margin: 1rem 0 0.5rem;
        color: var(--text-muted);
    }
    .add-provider-collapse {
        margin-top: 1rem;
    }
    .add-provider-collapse summary {
        cursor: pointer;
        color: var(--accent);
        font-weight: 500;
    }
    .add-provider-form {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 0.75rem;
    }
    .add-provider-form .input-field {
        flex: 1;
        min-width: 150px;
    }

    /* === ONBOARDING === */
    .onboarding-header {
        margin-bottom: 1rem;
    }
    .onboarding-header p {
        color: var(--text-muted);
    }
    .onboarding-categories {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .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-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;
    }
    .onboarding-mcp-name {
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    .onboarding-mcp-desc {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 0.5rem;
    }
    .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;
        gap: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }

    /* === MES MCPs === */
    .section-header {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 1rem;
    }
    .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;
    }
    .mcp-delete:hover { color: var(--danger); }
    .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: 2rem;
        color: var(--text-muted);
    }
    .empty-state a { color: var(--accent); }

    /* === MODAL === */
    .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);
    }
    .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;
    }
    .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;
    }
    .library-mcp-desc {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-bottom: 0.4rem;
    }

    /* === CUSTOM MCP === */
    .add-mcp-section {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }
    .custom-toggle {
        cursor: pointer;
        font-weight: 500;
        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%; }
    .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-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 selectedMcps = new Set();
    let originalSettings = {};

    // === ICONS ===
    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() {
        // Load models
        await fetchSettings();
        // Load API keys
        await fetchApiKeys();
        // Check first_run for MCPs
        const res = await fetch('/api/mcps/templates');
        const data = await res.json();
        const 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';
            await fetchMcps();
            loadEnvVars();
        }
    }

    // === MODELS ===
    async function fetchSettings() {
        try {
            const res = await fetch('/api/settings');
            const settings = await res.json();
            originalSettings = settings;
            document.getElementById('model-stt').value = settings.models?.stt || 'voxtral-mini-latest';
            document.getElementById('model-llm').value = settings.models?.llm || 'mistral-large-latest';
        } catch (e) {
            console.error('Erreur chargement settings:', e);
        }
    }

    async function saveModels() {
        const settings = {
            models: {
                stt: document.getElementById('model-stt').value,
                llm: document.getElementById('model-llm').value,
            },
        };
        try {
            const res = await fetch('/api/settings', {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(settings),
            });
            const result = await res.json();
            if (result.ok) {
                showStatus('Modeles sauvegardes!', 'success');
            } else {
                showStatus('Erreur: ' + (result.error || 'Echec'), 'error');
            }
        } catch (e) {
            showStatus('Erreur de connexion', 'error');
        }
    }

    // === API KEYS ===
    async function fetchApiKeys() {
        const loading = document.getElementById('api-keys-loading');
        const container = document.getElementById('api-keys-container');
        try {
            const res = await fetch('/api/settings/api-keys');
            const data = await res.json();
            document.getElementById('llm-providers-list').innerHTML = data.llm_providers.map(renderApiKeyRow).join('');
            document.getElementById('other-keys-list').innerHTML = data.other_keys.map(renderApiKeyRow).join('');
            loading.style.display = 'none';
            container.style.display = 'block';
        } catch (e) {
            console.error('Erreur API keys:', e);
            loading.textContent = 'Erreur de chargement';
        }
    }

    function renderApiKeyRow(provider) {
        const statusClass = provider.configured ? 'status-ok' : 'status-missing';
        const statusIcon = provider.configured ? '✓' : '✗';
        const statusText = provider.configured ? provider.masked : 'Non configure';
        const requiredBadge = provider.required ? '<span class="badge badge-required">Requis</span>' : '';
        const customBadge = !provider.builtin ? '<span class="badge badge-custom">Custom</span>' : '';
        const deleteKeyBtn = provider.configured ? `<button class="btn btn-small btn-danger" onclick="deleteApiKey('${provider.id}')" title="Supprimer">✗</button>` : '';
        const deleteProviderBtn = !provider.builtin ? `<button class="btn btn-small btn-danger" onclick="deleteProvider('${provider.id}')" title="Supprimer provider">🗑</button>` : '';

        return `
            <div class="api-key-row" data-provider="${provider.id}">
                <div class="api-key-info">
                    <div class="api-key-header">
                        <span class="api-key-name">${provider.name}</span>
                        ${requiredBadge}${customBadge}
                    </div>
                    <span class="api-key-desc">${provider.description || provider.env_var}</span>
                    <div class="api-key-status ${statusClass}">
                        <span>${statusIcon}</span>
                        <span>${statusText}</span>
                    </div>
                </div>
                <div class="api-key-actions">
                    <input type="password" class="input-field api-key-input" id="key-${provider.id}"
                           placeholder="${provider.env_var}" autocomplete="off">
                    <button class="btn btn-small" onclick="saveApiKey('${provider.id}')">Sauver</button>
                    <button class="btn btn-small btn-secondary" onclick="testApiKey('${provider.id}')">Tester</button>
                    ${deleteKeyBtn}${deleteProviderBtn}
                </div>
            </div>
        `;
    }

    async function saveApiKey(providerId) {
        const input = document.getElementById(`key-${providerId}`);
        const apiKey = input.value.trim();
        if (!apiKey) { showStatus('Entrez une cle API', 'error'); return; }
        try {
            const res = await fetch(`/api/settings/api-keys/${providerId}`, {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ api_key: apiKey, test: true }),
            });
            const result = await res.json();
            if (result.ok) {
                input.value = '';
                showStatus(`Clé ${providerId} sauvegardee!`, 'success');
                fetchApiKeys();
            } else {
                showStatus(`Erreur: ${result.error || 'Echec'}`, 'error');
            }
        } catch (e) {
            showStatus('Erreur de connexion', 'error');
        }
    }

    async function testApiKey(providerId) {
        const input = document.getElementById(`key-${providerId}`);
        try {
            const res = await fetch(`/api/settings/api-keys/${providerId}/test`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ api_key: input.value.trim() || null }),
            });
            const result = await res.json();
            showStatus(`${providerId}: ${result.message}`, result.ok ? 'success' : 'error');
        } catch (e) {
            showStatus('Erreur de connexion', 'error');
        }
    }

    async function deleteApiKey(providerId) {
        if (!confirm(`Supprimer la cle ${providerId}?`)) return;
        try {
            const res = await fetch(`/api/settings/api-keys/${providerId}`, { method: 'DELETE' });
            if ((await res.json()).ok) {
                showStatus(`Clé supprimee`, 'success');
                fetchApiKeys();
            }
        } catch (e) {
            showStatus('Erreur', 'error');
        }
    }

    async function addProvider() {
        const name = document.getElementById('new-provider-name').value.trim();
        const envVar = document.getElementById('new-provider-env').value.trim();
        const desc = document.getElementById('new-provider-desc').value.trim();
        const category = document.getElementById('new-provider-category').value;
        if (!name || !envVar) { showStatus('Nom et variable env requis', 'error'); return; }
        try {
            const res = await fetch('/api/settings/api-providers', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ name, env_var: envVar, description: desc, category }),
            });
            if ((await res.json()).ok) {
                document.getElementById('new-provider-name').value = '';
                document.getElementById('new-provider-env').value = '';
                document.getElementById('new-provider-desc').value = '';
                showStatus(`Provider ${name} ajoute!`, 'success');
                fetchApiKeys();
            }
        } catch (e) {
            showStatus('Erreur', 'error');
        }
    }

    async function deleteProvider(providerId) {
        if (!confirm(`Supprimer le provider ${providerId}?`)) return;
        try {
            await fetch(`/api/settings/api-keys/${providerId}`, { method: 'DELETE' });
            const res = await fetch(`/api/settings/api-providers/${providerId}`, { method: 'DELETE' });
            if ((await res.json()).ok) {
                showStatus('Provider supprime', 'success');
                fetchApiKeys();
            }
        } catch (e) {
            showStatus('Erreur', 'error');
        }
    }

    // === MCPs ONBOARDING ===
    async function loadOnboarding() {
        const loading = document.getElementById('onboarding-loading');
        try {
            const [catRes, mcpsRes] = await Promise.all([
                fetch('/api/mcps/categories'),
                fetch('/api/mcps/list')
            ]);
            libraryData = await catRes.json();
            mcpsList = await mcpsRes.json();
            mcpsList.filter(m => m.enabled).forEach(m => selectedMcps.add(m.id));
            renderOnboarding();
            loading.style.display = 'none';
        } catch (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 => `
                    <div class="onboarding-mcp-card ${selectedMcps.has(mcp.id) ? '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>${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) }),
            });
            if ((await res.json()).ok) {
                showStatus('Configuration terminee!', 'success');
                document.getElementById('onboarding-section').style.display = 'none';
                document.getElementById('normal-section').style.display = 'block';
                document.getElementById('custom-section').style.display = 'block';
                await fetchMcps();
                loadEnvVars();
            }
        } catch (e) {
            showStatus('Erreur', 'error');
        }
    }

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

    // === MCPs NORMAL ===
    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) {
            loading.textContent = 'Erreur';
        }
    }

    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}')">×</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 }),
            });
            if ((await res.json()).ok) {
                const mcp = mcpsList.find(m => m.id === mcpId);
                if (mcp) mcp.enabled = enabled;
                renderMcps();
                if (libraryData) renderLibraryCategories();
                showStatus(enabled ? 'Active' : 'Desactive', 'success');
            }
        } catch (e) {
            showStatus('Erreur', 'error');
        }
    }

    // === LIBRARY MODAL ===
    async function openLibraryModal() {
        document.getElementById('library-modal').style.display = 'block';
        document.body.style.overflow = 'hidden';
        if (!libraryData) {
            const res = await fetch('/api/mcps/categories');
            libraryData = await res.json();
            document.getElementById('library-loading').style.display = 'none';
        }
        renderLibraryCategories();
    }

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

    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 = mcp.auth_type === 'oauth' ? '<span class="mcp-badge" style="background:#3498db;color:white">OAuth</span>'
                        : mcp.auth_type === 'api_key' ? '<span class="mcp-badge" style="background:#f39c12;color:white">API</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>${isActive ? '<span style="background:var(--success);color:white;padding:0.1rem 0.3rem;border-radius:3px;font-size:0.7rem">Actif</span>' : ''}${badges}</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">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) {
            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 env = {};
        document.querySelectorAll('.env-checkbox:checked').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 }),
            });
            if ((await res.json()).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();
            }
        } catch (e) {
            showStatus('Erreur', 'error');
        }
    }

    async function deleteMcp(mcpId) {
        if (!confirm(`Supprimer "${mcpId}" ?`)) return;
        try {
            const res = await fetch(`/api/mcps/custom/${mcpId}`, { method: 'DELETE' });
            if ((await res.json()).ok) {
                showStatus('Supprime', 'success');
                fetchMcps();
            }
        } catch (e) {
            showStatus('Erreur', '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);
    }

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

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