{% extends "base.html" %}
{% block title %}MCP Servers — AI Agentic Hub{% endblock %}
{% block content %}
<h1>MCP Tool Servers</h1>

<div class="card" id="add-form">
    <h3 style="margin-bottom: 12px;">Add MCP Server</h3>
    <div class="form-row">
        <div class="form-group">
            <label>Name</label>
            <input id="name" placeholder="my-tools">
        </div>
        <div class="form-group">
            <label>URL</label>
            <input id="url" placeholder="http://localhost:3000">
        </div>
    </div>
    <button class="btn btn-primary" onclick="addServer()">Add Server</button>
</div>

<div id="server-list"></div>

{% endblock %}
{% block scripts %}
<script>
async function loadServers() {
    const resp = await fetch('/api/mcp-servers/');
    const servers = await resp.json();
    const list = document.getElementById('server-list');
    list.innerHTML = servers.map(s => `
        <div class="card">
            <div class="card-row">
                <div>
                    <div class="card-title">${s.name}</div>
                    <div class="card-sub">${s.url}</div>
                </div>
                <div style="display: flex; gap: 8px;">
                    <button class="btn btn-primary btn-sm" onclick="discoverTools(${s.id})">Discover Tools</button>
                    <button class="btn btn-sm" style="background:#2a2b35;color:#e1e1e6;" onclick="editServer(${s.id})">Edit</button>
                    <button class="btn btn-danger btn-sm" onclick="deleteServer(${s.id})">Delete</button>
                </div>
            </div>
            <div id="edit-form-${s.id}" class="hidden" style="margin-top: 12px; border-top: 1px solid #2a2b35; padding-top: 12px;">
                <div class="form-row">
                    <div class="form-group">
                        <label>Name</label>
                        <input id="edit-name-${s.id}" value="${s.name}">
                    </div>
                    <div class="form-group">
                        <label>URL</label>
                        <input id="edit-url-${s.id}" value="${s.url}">
                    </div>
                </div>
                <button class="btn btn-primary btn-sm" onclick="saveServer(${s.id})">Save</button>
                <button class="btn btn-sm" style="background:#2a2b35;color:#e1e1e6;" onclick="cancelEdit(${s.id})">Cancel</button>
            </div>
            <div id="tools-${s.id}" style="margin-top: 8px;"></div>
        </div>
    `).join('');
}

async function addServer() {
    const data = {
        name: document.getElementById('name').value,
        url: document.getElementById('url').value,
    };
    await fetch('/api/mcp-servers/', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) });
    document.getElementById('name').value = '';
    document.getElementById('url').value = '';
    loadServers();
}

function editServer(id) {
    document.getElementById(`edit-form-${id}`).classList.toggle('hidden');
}

function cancelEdit(id) {
    document.getElementById(`edit-form-${id}`).classList.add('hidden');
}

async function saveServer(id) {
    const data = {
        name: document.getElementById(`edit-name-${id}`).value,
        url: document.getElementById(`edit-url-${id}`).value,
    };
    await fetch(`/api/mcp-servers/${id}`, { method: 'PUT', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) });
    loadServers();
}

async function deleteServer(id) {
    if (!confirm('Delete this MCP server?')) return;
    await fetch(`/api/mcp-servers/${id}`, { method: 'DELETE' });
    loadServers();
}

async function discoverTools(id) {
    const el = document.getElementById(`tools-${id}`);
    el.textContent = 'Discovering...';
    const resp = await fetch(`/api/mcp-servers/${id}/tools`);
    const tools = await resp.json();
    if (tools.length === 0 || tools[0]?.error) {
        el.innerHTML = `<span class="status-error">${tools[0]?.error || 'No tools found'}</span>`;
    } else {
        el.innerHTML = tools.map(t => `
            <div style="padding: 4px 0;">
                <span class="badge">${t.name}</span>
                <span style="color: #8b8d98; font-size: 12px; margin-left: 8px;">${t.description || ''}</span>
            </div>
        `).join('');
    }
}

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