{% extends "layout.html" %}

{% block title %}{{ console_display_name() }} - Apps{% endblock %}
{% block header_title %}{{ console_display_name() }} - Apps{% endblock %}

{% block content %}
<div class="terminal-container webgate-page">
    <div class="webgate-header">
        <h2>Apps</h2>
        <p class="text-muted text-sm">Durable apps the agent built. A NEW address waits for your approval here; an approved app is deployed by the supervisor and shows its URL and health. Kill stops the container (the address stays yours). A failed read renders as an error, never as an empty list.</p>
    </div>
    <div id="apps-error" class="webgate-note" style="display:none;"></div>
    <div id="apps-disabled" class="webgate-note" style="display:none;">APP_SERVICE_ENABLED is off (or AGENT_BUILDER_MODE is not <code>ship</code>) — the tool is not registered and the supervisor is idle.</div>
    <table class="webgate-table" id="apps-table">
        <thead><tr><th>Slug</th><th>Status</th><th>Where</th><th>Health</th><th>Last error</th><th></th></tr></thead>
        <tbody id="apps-body"><tr><td colspan="6">Loading…</td></tr></tbody>
    </table>
    <pre id="apps-logs" class="webgate-pre" style="display:none;"></pre>
</div>
<script>
(function () {
    const body = document.getElementById('apps-body');
    const errBox = document.getElementById('apps-error');
    const offBox = document.getElementById('apps-disabled');
    const logsPre = document.getElementById('apps-logs');
    function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
    function hhmm(ts) { if (!ts) return '-'; const d = new Date(ts * 1000); return d.toISOString().slice(11, 16) + ' UTC'; }
    async function act(slug, verb) {
        try {
            const res = await fetch('/api/webgate/apps/' + encodeURIComponent(slug) + '/' + verb, { method: 'POST' });
            const data = await res.json();
            if (!res.ok) { errBox.textContent = data.detail || 'refused'; errBox.style.display = ''; }
            else { errBox.style.display = 'none'; }
        } catch (e) { errBox.textContent = verb + ' failed: ' + e; errBox.style.display = ''; }
        load();
    }
    async function logs(slug) {
        try {
            const res = await fetch('/api/webgate/apps/' + encodeURIComponent(slug) + '/logs?n=100');
            const data = await res.json();
            logsPre.textContent = '# ' + slug + '\n' + (data.logs || '');
            logsPre.style.display = '';
        } catch (e) { errBox.textContent = 'logs failed: ' + e; errBox.style.display = ''; }
    }
    async function load() {
        let data;
        try {
            const res = await fetch('/api/webgate/apps');
            data = await res.json();
        } catch (e) { errBox.textContent = 'apps read failed: ' + e; errBox.style.display = ''; return; }
        if (data.error) { errBox.textContent = data.error; errBox.style.display = ''; }
        offBox.style.display = data.enabled ? 'none' : '';
        const rows = data.apps || [];
        if (!rows.length) { body.innerHTML = '<tr><td colspan="6">No apps.</td></tr>'; return; }
        body.innerHTML = rows.map(r => {
            const where = r.public_url ? '<a href="' + esc(r.public_url) + '" target="_blank" rel="noopener noreferrer">' + esc(r.public_url) + '</a>' : esc(r.where);
            let btns = '';
            if (r.status === 'pending') btns = '<button class="apps-btn" data-v="approve">Approve</button><button class="apps-btn" data-v="reject">Reject</button>';
            else if (r.status !== 'stopped') btns = '<button class="apps-btn" data-v="kill">Kill</button>';
            btns += '<button class="apps-btn" data-v="logs">Logs</button>';
            return '<tr data-slug="' + esc(r.slug) + '"><td>' + esc(r.slug) + '</td><td>' + esc(r.status) + '</td><td>' + where +
                   '</td><td>' + esc(hhmm(r.last_health)) + '</td><td>' + esc(r.last_failure_error || '') + '</td><td>' + btns + '</td></tr>';
        }).join('');
        body.querySelectorAll('button').forEach(b => b.addEventListener('click', ev => {
            const slug = ev.target.closest('tr').dataset.slug;
            const v = ev.target.dataset.v;
            if (v === 'logs') logs(slug); else act(slug, v);
        }));
    }
    load();
    setInterval(load, 15000);
})();
</script>
{% endblock %}