{% extends "base.html" %}
{% block title %}Config · Litmus MCP Server{% endblock %}

{% block content %}
<div class="title-bar">
    <h1>Configuration</h1>
</div>

<hr>


<!-- API Keys -->
<h2>API Keys</h2>
<div class="settings-form">
    <label>Anthropic API Key
        <div class="settings-input-wrap">
            <input type="password" id="anthropic-key" value="{{ settings.anthropic_key }}"
                   placeholder="sk-ant-…" autocomplete="off">
            <button type="button" class="reveal-btn" onclick="toggleReveal('anthropic-key', this)" aria-label="Show"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
        </div>
    </label>
    <label>OpenAI API Key
        <div class="settings-input-wrap">
            <input type="password" id="openai-key" value="{{ settings.openai_key }}"
                   placeholder="sk-…" autocomplete="off">
            <button type="button" class="reveal-btn" onclick="toggleReveal('openai-key', this)" aria-label="Show"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
        </div>
    </label>
    <label>Google Gemini API Key
        <div class="settings-input-wrap">
            <input type="password" id="gemini-key" value="{{ settings.gemini_key }}"
                   placeholder="AIza…" autocomplete="off">
            <button type="button" class="reveal-btn" onclick="toggleReveal('gemini-key', this)" aria-label="Show"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
        </div>
    </label>
    <div class="settings-save-row">
        <span class="settings-status" id="api-keys-status"></span>
        <button type="button" class="side-button" onclick="saveApiKeys()">Save keys</button>
    </div>
</div>

<hr>

<!-- Active model -->
<h2>Active model</h2>

<div class="model-selector">
    <div class="provider-pills">
        <button type="button" class="provider-pill{% if current_model == 'anthropic' %} active{% endif %}"
                data-provider="anthropic" onclick="switchProvider('anthropic')">Anthropic</button>
        <button type="button" class="provider-pill{% if current_model == 'openai' %} active{% endif %}"
                data-provider="openai" onclick="switchProvider('openai')">OpenAI</button>
        <button type="button" class="provider-pill{% if current_model == 'gemini' %} active{% endif %}"
                data-provider="gemini" onclick="switchProvider('gemini')">Gemini</button>
    </div>

    <div class="model-list-panel">
        <div class="model-list" id="model-list">
            <div class="mcp-panel-loading">Loading…</div>
        </div>
        <div class="model-selector-footer">
            <span class="model-selector-hint" id="model-selector-hint"></span>
            <button type="button" class="side-button" id="save-model-btn" onclick="saveModel()" disabled>Save model</button>
        </div>
    </div>
</div>

<form method="post" action="{{ url_for('switch_model') }}" id="model-save-form" style="display:none;">
    <input type="hidden" name="switch_model_to">
    <input type="hidden" name="model_id">
</form>

<script>
const _initProvider = {{ ('"' + current_model + '"') | safe }} || 'anthropic';
const _initModelId  = {{ ('"' + current_model_id + '"') | safe }} || '';
let selectedProvider = _initProvider;
let selectedModelId  = _initModelId;

async function loadModels(provider) {
    const list = document.getElementById('model-list');
    list.innerHTML = '<div class="mcp-panel-loading">Loading…</div>';
    document.getElementById('save-model-btn').disabled = true;
    document.getElementById('model-selector-hint').textContent = '';

    try {
        const resp = await fetch('/api/models?provider=' + provider);
        const data = await resp.json();

        if (data.error) {
            list.innerHTML = '<div class="model-list-error">Could not load models — check API key</div>';
            return;
        }

        list.innerHTML = '';
        if (data.models.length === 0) {
            list.innerHTML = '<div class="mcp-panel-empty">No models found</div>';
            return;
        }

        data.models.forEach(m => {
            const item = document.createElement('div');
            const isCurrent = (m.id === selectedModelId && provider === selectedProvider);
            item.className = 'model-list-item' + (isCurrent ? ' selected' : '');
            item.dataset.id = m.id;
            item.innerHTML = '<span class="model-list-dot"></span><span class="model-list-name">' + escHtml(m.name || m.id) + '</span>';
            item.addEventListener('click', () => {
                document.querySelectorAll('.model-list-item').forEach(i => i.classList.remove('selected'));
                item.classList.add('selected');
                selectedModelId = m.id;
                document.getElementById('save-model-btn').disabled = false;
                document.getElementById('model-selector-hint').textContent = '';
            });
            list.appendChild(item);
        });

        if (list.querySelector('.model-list-item.selected')) {
            document.getElementById('save-model-btn').disabled = false;
        }

    } catch (e) {
        list.innerHTML = '<div class="model-list-error">Could not load models — check API key</div>';
    }
}

function switchProvider(provider) {
    selectedProvider = provider;
    document.querySelectorAll('.provider-pill').forEach(p => {
        p.classList.toggle('active', p.dataset.provider === provider);
    });
    selectedModelId = (provider === _initProvider) ? _initModelId : '';
    loadModels(provider);
}

function saveModel() {
    if (!selectedModelId) {
        document.getElementById('model-selector-hint').textContent = 'Select a model first';
        return;
    }
    const form = document.getElementById('model-save-form');
    form.querySelector('[name=switch_model_to]').value = selectedProvider;
    form.querySelector('[name=model_id]').value = selectedModelId;
    form.submit();
}

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

loadModels(_initProvider);
</script>

<!-- Client session timeout -->
<h3 class="subhead">Client session timeout</h3>
<p class="hint">
    Maximum time (in seconds) the chat client will wait for a single MCP tool call to return.
    Tools that hit a real Litmus Edge can take several seconds; the OpenAI agents SDK defaults to 5,
    which is too tight. Default: 60.
</p>

<div class="timeout-row">
    <input type="number" id="client-timeout-input" min="5" max="600" step="1"
           value="{{ current_client_timeout }}" class="timeout-input">
    <span class="timeout-unit">seconds</span>
    <button type="button" class="side-button" id="save-timeout-btn" onclick="saveClientTimeout()">Save timeout</button>
    <span class="timeout-hint" id="timeout-hint"></span>
</div>

<script>
async function saveClientTimeout() {
    const input = document.getElementById('client-timeout-input');
    const hint = document.getElementById('timeout-hint');
    const btn = document.getElementById('save-timeout-btn');
    const v = parseInt(input.value, 10);
    if (isNaN(v) || v < 5 || v > 600) {
        hint.textContent = 'Enter a value between 5 and 600';
        hint.className = 'timeout-hint timeout-hint--error';
        return;
    }
    btn.disabled = true;
    hint.textContent = '';
    try {
        const resp = await fetch('/api/save-settings', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({CLIENT_SESSION_TIMEOUT_SECONDS: String(v)}),
        });
        const data = await resp.json();
        if (data.ok) {
            hint.textContent = 'Saved';
            hint.className = 'timeout-hint timeout-hint--ok';
        } else {
            hint.textContent = 'Save failed';
            hint.className = 'timeout-hint timeout-hint--error';
        }
    } catch (e) {
        hint.textContent = 'Save failed';
        hint.className = 'timeout-hint timeout-hint--error';
    } finally {
        btn.disabled = false;
    }
}
</script>

<hr>

<!-- Edge Instances -->
<h2>Litmus Edge Instances</h2>

<div class="conn-type-toggle" style="display:flex;gap:6px;margin-bottom:10px;">
    <button type="button" class="conn-type-btn active" data-type="direct" onclick="setConnType('direct')">Direct</button>
    <button type="button" class="conn-type-btn" data-type="lem" onclick="setConnType('lem')">LEM Bridge</button>
</div>

<div class="edge-add-form" id="direct-fields">
    <input type="text" id="inst-url" placeholder="URL (https://...)" style="margin-bottom:0;">
    <input type="text" id="inst-id" placeholder="Client ID" style="margin-bottom:0;">
    <input type="password" id="inst-secret" placeholder="Client Secret" style="margin-bottom:0;">
    <button type="button" id="inst-add-btn" onclick="addInstance()">Add instance</button>
</div>

<div class="edge-add-form" id="lem-fields" style="display:none;">
    <input type="text" id="inst-manager-url" placeholder="LEM Manager URL (https://...)" style="margin-bottom:0;">
    <input type="password" id="inst-api-token" placeholder="API Token" style="margin-bottom:0;">
    <input type="text" id="inst-project-id" placeholder="Project ID" style="margin-bottom:0;">
    <input type="text" id="inst-device-id" placeholder="Device ID" style="margin-bottom:0;">
    <button type="button" id="inst-add-btn-lem" onclick="addInstance()">Add instance</button>
</div>

<div id="inst-status" style="font-size:13px; margin-bottom:8px; min-height:18px;"></div>
<div class="inst-list" id="inst-list">
    <div class="mcp-panel-loading">Loading…</div>
</div>

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

let _activeConnType = 'direct';

function setConnType(type) {
    _activeConnType = type;
    document.querySelectorAll('.conn-type-btn').forEach(b => {
        b.classList.toggle('active', b.dataset.type === type);
    });
    document.getElementById('direct-fields').style.display = type === 'direct' ? '' : 'none';
    document.getElementById('lem-fields').style.display    = type === 'lem'    ? '' : 'none';
}

async function loadInstances() {
    const list = document.getElementById('inst-list');
    try {
        const resp = await fetch('/api/edge-instances');
        const data = await resp.json();
        renderInstances(data.instances, data.active);
    } catch (e) {
        list.innerHTML = '<div class="mcp-panel-empty">Could not load instances.</div>';
    }
}

function renderInstances(instances, active) {
    const list = document.getElementById('inst-list');
    if (!instances || instances.length === 0) {
        list.innerHTML = '<div class="mcp-panel-empty">No instances configured yet.</div>';
        return;
    }
    list.innerHTML = instances.map(inst => {
        const isActive = inst.index === active;
        const isLem = inst.type === 'lem';
        const typeBadge = isLem ? '<span class="inst-type-badge">LEM</span>' : '';
        const actionBtn = isActive
            ? '<span style="font-size:12px;color:#5ba89a;font-weight:600;">Active</span>'
            : `<button type="button" class="side-button" onclick="switchInstance(${inst.index})">Make active</button>`;
        return `<div class="inst-item${isActive ? ' active-inst' : ''}">
            <div class="inst-dot${isActive ? ' active' : ''}"></div>
            <span class="inst-name">${escInstHtml(inst.name)}</span>
            ${typeBadge}
            <span class="inst-url">${escInstHtml(inst.url)}</span>
            <div class="inst-actions">
                ${actionBtn}
                <button type="button" class="md-icon-btn" onclick="removeInstance(${inst.index})" title="Remove">
                    <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 24 24" width="18">
                        <path d="M0 0h24v24H0z" fill="none"/>
                        <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/>
                    </svg>
                </button>
            </div>
        </div>`;
    }).join('');
}

async function addInstance() {
    const status = document.getElementById('inst-status');
    const fd = new FormData();

    if (_activeConnType === 'lem') {
        const managerUrl = document.getElementById('inst-manager-url').value.trim();
        const apiToken   = document.getElementById('inst-api-token').value.trim();
        const projectId  = document.getElementById('inst-project-id').value.trim();
        const deviceId   = document.getElementById('inst-device-id').value.trim();
        if (!managerUrl || !apiToken || !projectId || !deviceId) {
            status.textContent = 'All LEM Bridge fields are required.';
            status.style.color = '#c0392b';
            return;
        }
        fd.append('manager_url', managerUrl);
        fd.append('api_token', apiToken);
        fd.append('project_id', projectId);
        fd.append('device_id', deviceId);
        const btn = document.getElementById('inst-add-btn-lem');
        btn.disabled = true;
        status.textContent = 'Connecting via LEM Bridge…';
        status.style.color = '#4d6b65';
        try {
            const resp = await fetch('/api/add-edge-instance', { method: 'POST', body: fd });
            const data = await resp.json();
            if (data.error) {
                status.textContent = data.error;
                status.style.color = '#c0392b';
            } else {
                status.textContent = `Added: ${data.name}`;
                status.style.color = '#059669';
                document.getElementById('inst-manager-url').value = '';
                document.getElementById('inst-api-token').value   = '';
                document.getElementById('inst-project-id').value  = '';
                document.getElementById('inst-device-id').value   = '';
                await loadInstances();
            }
        } catch (e) {
            status.textContent = 'Connection error.';
            status.style.color = '#c0392b';
        } finally {
            btn.disabled = false;
        }
        return;
    }

    // Direct connection
    const url    = document.getElementById('inst-url').value.trim();
    const cid    = document.getElementById('inst-id').value.trim();
    const secret = document.getElementById('inst-secret').value.trim();
    const btn    = document.getElementById('inst-add-btn');

    if (!url || !cid || !secret) {
        status.textContent = 'All fields are required.';
        status.style.color = '#c0392b';
        return;
    }

    btn.disabled = true;
    status.textContent = 'Connecting…';
    status.style.color = '#4d6b65';

    fd.append('url', url);
    fd.append('client_id', cid);
    fd.append('client_secret', secret);

    try {
        const resp = await fetch('/api/add-edge-instance', { method: 'POST', body: fd });
        const data = await resp.json();
        if (data.error) {
            status.textContent = data.error;
            status.style.color = '#c0392b';
        } else {
            status.textContent = `Added: ${data.name}`;
            status.style.color = '#059669';
            document.getElementById('inst-url').value    = '';
            document.getElementById('inst-id').value     = '';
            document.getElementById('inst-secret').value = '';
            await loadInstances();
        }
    } catch (e) {
        status.textContent = 'Connection error.';
        status.style.color = '#c0392b';
    } finally {
        btn.disabled = false;
    }
}

async function switchInstance(index) {
    const fd = new FormData();
    fd.append('index', index);
    await fetch('/api/switch-edge-instance', { method: 'POST', body: fd });
    await loadInstances();
}

async function removeInstance(index) {
    if (!confirm('Remove this instance?')) return;
    const fd = new FormData();
    fd.append('index', index);
    await fetch('/api/remove-edge-instance', { method: 'POST', body: fd });
    await loadInstances();
}

loadInstances();
</script>

<hr>

<!-- Connection Settings -->
<h2>Connection Settings</h2>
<p class="config-section-hint">Required for NATS topic tools and InfluxDB history queries.</p>

<h3>NATS</h3>
<div class="settings-form settings-form-grid">
    <label>Source (IP)<input type="text" id="nats-source" value="{{ mcp_config.nats_source }}" placeholder="10.0.0.1"></label>
    <label>Port<input type="text" id="nats-port" value="{{ mcp_config.nats_port }}" placeholder="4222"></label>
    <label>User<input type="text" id="nats-user" value="{{ mcp_config.nats_user }}"></label>
    <label>Password
        <div class="settings-input-wrap">
            <input type="password" id="nats-password" value="{{ mcp_config.nats_password }}" autocomplete="off">
            <button type="button" class="reveal-btn" onclick="toggleReveal('nats-password', this)" aria-label="Show"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
        </div>
    </label>
    <label class="settings-checkbox" style="grid-column: 1 / -1;">
        <input type="checkbox" id="nats-tls" {% if mcp_config.nats_tls == 'true' %}checked{% endif %}>
        Use TLS
    </label>
</div>

<h3>InfluxDB</h3>
<div class="settings-form settings-form-grid">
    <label>Host<input type="text" id="influx-host" value="{{ mcp_config.influx_host }}" placeholder="10.0.0.1"></label>
    <label>Port<input type="text" id="influx-port" value="{{ mcp_config.influx_port }}" placeholder="8086"></label>
    <label>Database<input type="text" id="influx-db" value="{{ mcp_config.influx_db_name }}" placeholder="tsdata"></label>
    <label>Username<input type="text" id="influx-user" value="{{ mcp_config.influx_username }}"></label>
    <label>Password
        <div class="settings-input-wrap">
            <input type="password" id="influx-password" value="{{ mcp_config.influx_password }}" autocomplete="off">
            <button type="button" class="reveal-btn" onclick="toggleReveal('influx-password', this)" aria-label="Show"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
        </div>
    </label>
</div>

<div class="settings-save-row">
    <span class="settings-status" id="conn-settings-status"></span>
    <label class="settings-checkbox">
        <input type="checkbox" id="validate-cert" {% if settings.validate_cert == 'true' %}checked{% endif %}>
        Validate TLS certificate
    </label>
    <button type="button" class="side-button" onclick="saveConnSettings()">Save settings</button>
</div>

<hr>

<!-- LEM Connections -->
<h2>LEM Connections</h2>
<p class="config-section-hint">Standalone connections to Litmus Edge Manager. Used by the lem_* tools. Project id and device id are not needed here, they are passed per tool call. Activating a bridge-mode edge instance temporarily overrides the active LEM connection.</p>

<div class="edge-add-form">
    <input type="text" id="lem-conn-url" placeholder="LEM Manager URL (https://...)" style="margin-bottom:0;">
    <input type="password" id="lem-conn-token" placeholder="API Token" style="margin-bottom:0;">
    <input type="text" id="lem-conn-name" placeholder="Display name (optional)" style="margin-bottom:0;">
    <button type="button" id="lem-conn-add-btn" onclick="addLemConnection()">Add LEM connection</button>
</div>

<div id="lem-conn-status" style="font-size:13px; margin-bottom:8px; min-height:18px;"></div>
<div class="inst-list" id="lem-conn-list">
    <div class="mcp-panel-loading">Loading…</div>
</div>

<div id="lem-info-panel" style="margin-top:12px;"></div>

<script>
async function loadLemConnections() {
    const list = document.getElementById('lem-conn-list');
    try {
        const resp = await fetch('/api/lem-connections');
        const data = await resp.json();
        renderLemConnections(data.connections, data.active);
        // Trigger info refresh if there is an active connection
        if (data.active) {
            loadLemInfoPanel();
        } else {
            document.getElementById('lem-info-panel').innerHTML = '';
        }
    } catch (e) {
        list.innerHTML = '<div class="mcp-panel-empty">Could not load LEM connections.</div>';
    }
}

function renderLemConnections(connections, active) {
    const list = document.getElementById('lem-conn-list');
    if (!connections || connections.length === 0) {
        list.innerHTML = '<div class="mcp-panel-empty">No LEM connections configured yet.</div>';
        return;
    }
    list.innerHTML = connections.map(c => {
        const isActive = c.index === active;
        const actionBtn = isActive
            ? '<span style="font-size:12px;color:#5ba89a;font-weight:600;">Active</span>'
            : `<button type="button" class="side-button" onclick="switchLemConnection(${c.index})">Make active</button>`;
        return `<div class="inst-item${isActive ? ' active-inst' : ''}">
            <div class="inst-dot${isActive ? ' active' : ''}"></div>
            <span class="inst-name">${escInstHtml(c.name)}</span>
            <span class="inst-type-badge">LEM</span>
            <span class="inst-url">${escInstHtml(c.url)}</span>
            <div class="inst-actions">
                ${actionBtn}
                <button type="button" class="md-icon-btn" onclick="removeLemConnection(${c.index})" title="Remove">
                    <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 24 24" width="18">
                        <path d="M0 0h24v24H0z" fill="none"/>
                        <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/>
                    </svg>
                </button>
            </div>
        </div>`;
    }).join('');
}

async function addLemConnection() {
    const status = document.getElementById('lem-conn-status');
    const url   = document.getElementById('lem-conn-url').value.trim();
    const token = document.getElementById('lem-conn-token').value.trim();
    const name  = document.getElementById('lem-conn-name').value.trim();
    if (!url || !token) {
        status.textContent = 'Manager URL and API token are required.';
        status.style.color = '#c0392b';
        return;
    }
    const btn = document.getElementById('lem-conn-add-btn');
    btn.disabled = true;
    status.textContent = 'Connecting to LEM…';
    status.style.color = '#4d6b65';

    const fd = new FormData();
    fd.append('manager_url', url);
    fd.append('api_token', token);
    if (name) fd.append('name', name);
    try {
        const resp = await fetch('/api/add-lem-connection', { method: 'POST', body: fd });
        const data = await resp.json();
        if (data.error) {
            status.textContent = data.error;
            status.style.color = '#c0392b';
        } else {
            status.textContent = `Added: ${data.name}`;
            status.style.color = '#059669';
            document.getElementById('lem-conn-url').value   = '';
            document.getElementById('lem-conn-token').value = '';
            document.getElementById('lem-conn-name').value  = '';
            await loadLemConnections();
        }
    } catch (e) {
        status.textContent = 'Connection error.';
        status.style.color = '#c0392b';
    } finally {
        btn.disabled = false;
    }
}

async function switchLemConnection(index) {
    const fd = new FormData();
    fd.append('index', index);
    await fetch('/api/switch-lem-connection', { method: 'POST', body: fd });
    await loadLemConnections();
}

async function removeLemConnection(index) {
    if (!confirm('Remove this LEM connection?')) return;
    const fd = new FormData();
    fd.append('index', index);
    await fetch('/api/remove-lem-connection', { method: 'POST', body: fd });
    await loadLemConnections();
}

async function loadLemInfoPanel() {
    const panel = document.getElementById('lem-info-panel');
    panel.innerHTML = '<div class="mcp-panel-loading">Probing LEM…</div>';
    try {
        const resp = await fetch('/api/lem/test');
        const data = await resp.json();
        if (data.status === 'not_configured') {
            panel.innerHTML = '';
            return;
        }
        if (data.status === 'error') {
            panel.innerHTML = `<div class="lem-info-card lem-info-err">LEM probe failed: ${escInstHtml(data.message || '')}</div>`;
            return;
        }
        const ver = (data.deployment && (data.deployment.version || data.deployment.releaseVersion)) || '?';
        const time = (data.system_time && (data.system_time.time || data.system_time.systemTime || JSON.stringify(data.system_time))) || '?';
        const companyCount = data.company_count != null ? data.company_count : '?';
        const top = (data.companies_top || []).map(c => {
            const n = c.companyRealName || c.companyName || c.name || '?';
            const np = c.totalNumOfProjects ?? 0;
            const nd = c.totalNumOfDevices ?? 0;
            return `<li><b>${escInstHtml(n)}</b> &middot; ${np} projects &middot; ${nd} devices</li>`;
        }).join('');
        panel.innerHTML = `<div class="lem-info-card">
            <div class="lem-info-line"><span class="lem-info-label">LEM version</span> ${escInstHtml(String(ver))}</div>
            <div class="lem-info-line"><span class="lem-info-label">System time</span> ${escInstHtml(String(time))}</div>
            <div class="lem-info-line"><span class="lem-info-label">Companies</span> ${companyCount}</div>
            ${top ? `<ul class="lem-info-companies">${top}</ul>` : ''}
        </div>`;
    } catch (e) {
        panel.innerHTML = `<div class="lem-info-card lem-info-err">Could not probe LEM.</div>`;
    }
}

loadLemConnections();
</script>

<script>
// ── Settings save helpers ──────────────────────────────────────────────────

async function saveApiKeys() {
    const data = {};
    const ak = document.getElementById('anthropic-key').value.trim();
    const ok = document.getElementById('openai-key').value.trim();
    const gk = document.getElementById('gemini-key').value.trim();
    if (ak) data['ANTHROPIC_API_KEY'] = ak;
    if (ok) data['OPENAI_API_KEY'] = ok;
    if (gk) data['GEMINI_API_KEY'] = gk;
    if (!Object.keys(data).length) {
        document.getElementById('api-keys-status').textContent = 'Enter at least one key.';
        document.getElementById('api-keys-status').className = 'settings-status err';
        return;
    }
    await postSettings(data, 'api-keys-status');
}

async function saveConnSettings() {
    const cert = document.getElementById('validate-cert').checked ? 'true' : 'false';
    const data = {
        NATS_SOURCE:          document.getElementById('nats-source').value.trim(),
        NATS_PORT:            document.getElementById('nats-port').value.trim(),
        NATS_USER:            document.getElementById('nats-user').value.trim(),
        NATS_PASSWORD:        document.getElementById('nats-password').value.trim(),
        NATS_TLS:             document.getElementById('nats-tls').checked ? 'true' : 'false',
        INFLUX_HOST:          document.getElementById('influx-host').value.trim(),
        INFLUX_PORT:          document.getElementById('influx-port').value.trim(),
        INFLUX_DB_NAME:       document.getElementById('influx-db').value.trim(),
        INFLUX_USERNAME:      document.getElementById('influx-user').value.trim(),
        INFLUX_PASSWORD:      document.getElementById('influx-password').value.trim(),
        VALIDATE_CERTIFICATE: cert,
    };
    await postSettings(data, 'conn-settings-status');
}

async function postSettings(data, statusId) {
    const status = document.getElementById(statusId);
    status.textContent = 'Saving…';
    status.className = 'settings-status';
    try {
        const resp = await fetch('/api/save-settings', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data),
        });
        const result = await resp.json();
        status.textContent = result.ok ? 'Saved.' : 'Error.';
        status.className = 'settings-status ' + (result.ok ? 'ok' : 'err');
        setTimeout(() => { status.textContent = ''; status.className = 'settings-status'; }, 2500);
    } catch (e) {
        status.textContent = 'Failed.';
        status.className = 'settings-status err';
    }
}

const _eyeOpen = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`;
const _eyeOff  = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>`;

function toggleReveal(inputId, btn) {
    const inp = document.getElementById(inputId);
    const show = inp.type === 'password';
    inp.type = show ? 'text' : 'password';
    btn.innerHTML = show ? _eyeOff : _eyeOpen;
    btn.setAttribute('aria-label', show ? 'Hide' : 'Show');
}
</script>
{% endblock %}