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

<div class="card" id="add-form">
    <h3 style="margin-bottom: 12px;">Add LLM Server</h3>
    <div class="form-row">
        <div class="form-group">
            <label>Name</label>
            <input id="name" placeholder="my-local-qwen">
        </div>
        <div class="form-group">
            <label>Provider</label>
            <select id="provider">
                <option value="ollama">Ollama</option>
                <option value="openai">OpenAI</option>
                <option value="anthropic">Anthropic</option>
            </select>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group">
            <label>URL</label>
            <input id="url" placeholder="http://localhost:11434">
        </div>
        <div class="form-group">
            <label>Model</label>
            <input id="model" placeholder="qwen3.5:9b">
        </div>
    </div>
    <div class="form-group">
        <label>API Key (optional, for cloud providers)</label>
        <input id="api_key" type="password" placeholder="sk-...">
    </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/llm-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.provider} — ${s.url || '(default)'} — ${s.model}</div>
                </div>
                <div style="display: flex; gap: 8px; align-items: center;">
                    <button class="btn btn-primary btn-sm" onclick="checkHealth(${s.id})">Health</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>
                    <span id="health-${s.id}" style="font-size:12px;"></span>
                </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>Provider</label>
                        <select id="edit-provider-${s.id}">
                            <option value="ollama" ${s.provider === 'ollama' ? 'selected' : ''}>Ollama</option>
                            <option value="openai" ${s.provider === 'openai' ? 'selected' : ''}>OpenAI</option>
                            <option value="anthropic" ${s.provider === 'anthropic' ? 'selected' : ''}>Anthropic</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>URL</label>
                        <input id="edit-url-${s.id}" value="${s.url || ''}">
                    </div>
                    <div class="form-group">
                        <label>Model</label>
                        <input id="edit-model-${s.id}" value="${s.model}">
                    </div>
                </div>
                <div class="form-group">
                    <label>API Key</label>
                    <input id="edit-apikey-${s.id}" type="password" value="${s.api_key || ''}" placeholder="Leave empty to keep current">
                </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>
    `).join('');
}

async function addServer() {
    const data = {
        name: document.getElementById('name').value,
        provider: document.getElementById('provider').value,
        url: document.getElementById('url').value,
        model: document.getElementById('model').value,
        api_key: document.getElementById('api_key').value || null,
    };
    await fetch('/api/llm-servers/', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) });
    document.getElementById('name').value = '';
    document.getElementById('url').value = '';
    document.getElementById('model').value = '';
    document.getElementById('api_key').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,
        provider: document.getElementById(`edit-provider-${id}`).value,
        url: document.getElementById(`edit-url-${id}`).value,
        model: document.getElementById(`edit-model-${id}`).value,
        api_key: document.getElementById(`edit-apikey-${id}`).value || null,
    };
    await fetch(`/api/llm-servers/${id}`, { method: 'PUT', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) });
    loadServers();
}

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

async function checkHealth(id) {
    const el = document.getElementById(`health-${id}`);
    el.textContent = 'checking...';
    const resp = await fetch(`/api/llm-servers/${id}/health`);
    const data = await resp.json();
    if (data.status === 'ok') {
        el.innerHTML = `<span class="status-ok">OK</span> — ${(data.models || []).join(', ')}`;
    } else {
        el.innerHTML = `<span class="status-error">Error: ${data.error}</span>`;
    }
}

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