{% extends "base.html" %}

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

<!-- API Provider -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">Modele LLM</h3>
    </div>
    <div class="form-group">
        <label class="form-label">Provider</label>
        <select class="form-select" id="provider-select" onchange="updateProvider()">
            <option value="mistral">Mistral</option>
            <option value="openai">OpenAI</option>
            <option value="anthropic">Anthropic</option>
        </select>
    </div>
    <div class="form-group">
        <label class="form-label">Modele</label>
        <select class="form-select" id="model-select" onchange="updateModel()">
            <!-- Filled by JS -->
        </select>
    </div>
</div>

<!-- API Keys -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">Clés API</h3>
    </div>
    <div id="api-keys-list">
        <!-- Filled by JS -->
    </div>
</div>

<!-- MCPs -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">MCPs</h3>
    </div>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Nom</th>
                    <th>Statut</th>
                    <th style="width:100px">Action</th>
                </tr>
            </thead>
            <tbody id="mcps-tbody">
                <!-- Filled by JS -->
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let settings = {};
let mcps = [];
let providers = {};

const MODELS = {
    mistral: ['mistral-large-latest', 'mistral-medium-latest', 'mistral-small-latest'],
    openai: ['gpt-4o', 'gpt-4-turbo', 'gpt-3.5-turbo'],
    anthropic: ['claude-3-5-sonnet-latest', 'claude-3-opus-latest', 'claude-3-haiku-latest']
};

async function init() {
    await Promise.all([loadSettings(), loadMcps(), loadProviders()]);
    renderAll();
}

async function loadSettings() {
    const res = await fetch('/api/settings');
    settings = await res.json();
}

async function loadMcps() {
    const res = await fetch('/api/mcps');
    mcps = await res.json();
}

async function loadProviders() {
    const res = await fetch('/api/providers');
    providers = await res.json();
}

function renderAll() {
    renderProvider();
    renderApiKeys();
    renderMcps();
}

function renderProvider() {
    const providerSelect = document.getElementById('provider-select');
    const modelSelect = document.getElementById('model-select');

    const currentProvider = settings.provider || 'mistral';
    providerSelect.value = currentProvider;

    const models = MODELS[currentProvider] || [];
    modelSelect.innerHTML = models.map(m =>
        `<option value="${m}" ${m === settings.model ? 'selected' : ''}>${m}</option>`
    ).join('');
}

function renderApiKeys() {
    const container = document.getElementById('api-keys-list');
    const keys = [
        {id: 'mistral', name: 'Mistral', key: 'MISTRAL_API_KEY'},
        {id: 'openai', name: 'OpenAI', key: 'OPENAI_API_KEY'},
        {id: 'anthropic', name: 'Anthropic', key: 'ANTHROPIC_API_KEY'}
    ];

    container.innerHTML = keys.map(k => {
        const hasKey = providers[k.id]?.configured;
        return `
            <div class="form-group">
                <label class="form-label">${k.name}</label>
                <div class="flex gap-2">
                    <input type="password" class="form-input" id="key-${k.id}"
                           placeholder="${hasKey ? '••••••••' : 'Entrer la cle...'}"
                           value="">
                    <button class="btn btn-secondary" onclick="saveApiKey('${k.id}')">Sauver</button>
                    <button class="btn btn-ghost" onclick="testApiKey('${k.id}')">Tester</button>
                </div>
                <span class="text-xs ${hasKey ? 'text-success' : 'text-muted'}" id="status-${k.id}">
                    ${hasKey ? 'Configure' : 'Non configure'}
                </span>
            </div>
        `;
    }).join('');
}

function renderMcps() {
    const tbody = document.getElementById('mcps-tbody');

    tbody.innerHTML = mcps.map(mcp => `
        <tr>
            <td>
                <strong>${mcp.name}</strong>
                ${mcp.description ? `<br><span class="text-muted text-sm">${mcp.description}</span>` : ''}
            </td>
            <td>
                <span class="badge ${mcp.enabled ? 'badge-success' : 'badge-muted'}">
                    ${mcp.enabled ? 'Actif' : 'Inactif'}
                </span>
            </td>
            <td>
                <button class="btn btn-sm ${mcp.enabled ? 'btn-secondary' : 'btn-primary'}"
                        onclick="toggleMcp('${mcp.id}')">
                    ${mcp.enabled ? 'Desactiver' : 'Activer'}
                </button>
            </td>
        </tr>
    `).join('');
}

async function updateProvider() {
    const provider = document.getElementById('provider-select').value;
    await fetch('/api/settings', {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({provider})
    });
    await loadSettings();
    renderProvider();
}

async function updateModel() {
    const model = document.getElementById('model-select').value;
    await fetch('/api/settings', {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({model})
    });
}

async function saveApiKey(providerId) {
    const input = document.getElementById(`key-${providerId}`);
    const value = input.value.trim();
    if (!value) return;

    await fetch('/api/api-keys', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({provider: providerId, key: value})
    });

    input.value = '';
    await loadProviders();
    renderApiKeys();
}

async function testApiKey(providerId) {
    const status = document.getElementById(`status-${providerId}`);
    status.textContent = 'Test en cours...';
    status.className = 'text-xs text-muted';

    const res = await fetch(`/api/api-keys/${providerId}/test`, {method: 'POST'});
    const data = await res.json();

    if (data.ok) {
        status.textContent = 'Clé valide';
        status.className = 'text-xs text-success';
    } else {
        status.textContent = data.error || 'Erreur';
        status.className = 'text-xs text-danger';
    }
}

async function toggleMcp(mcpId) {
    const mcp = mcps.find(m => m.id === mcpId);
    if (!mcp) return;

    await fetch(`/api/mcps/${mcpId}`, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({enabled: !mcp.enabled})
    });

    await loadMcps();
    renderMcps();
}

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