// The homepage front end. It reads status.json and services.json once on load
// (no auto-refresh, Q41), renders one TUI panel per service for this page's
// category, offers the styling toggle (Q27), and shows the last master
// deployment datetime (Q43). It never alters the user's cursor (Q28).

const CATEGORY = window.location.pathname.indexOf('/admin') !== -1 ? 'admin' : 'user';

function load(url) {
    return fetch(url, { cache: 'no-store' }).then(function (r) { return r.json(); });
}

function esc(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
    });
}

function renderPanels(services, status) {
    const stateByName = {};
    for (const s of (status.services || [])) stateByName[s.name] = s.state;

    const grid = document.getElementById('grid');
    grid.innerHTML = '';
    let up = 0, down = 0, wip = 0;

    for (const svc of services) {
        if (svc.category !== CATEGORY) continue;
        const state = svc.wip ? 'wip' : (stateByName[svc.name] || 'down');
        if (state === 'up') up++; else if (state === 'down') down++; else wip++;

        const panel = document.createElement('div');
        panel.className = 'panel ' + state;
        const links = [];
        if (svc.showLink && svc.url) links.push('<a class="open" href="' + esc(svc.url) + '">open</a>');
        if (svc.docs) links.push('<a class="docs" href="' + esc(svc.docs) + '">docs</a>');
        panel.innerHTML =
            '<div class="panel-head">' +
            '  <span class="badge ' + state + '">' + state.toUpperCase() + '</span>' +
            '  <span class="name">' + esc(svc.name) + '</span>' +
            '</div>' +
            '<div class="desc">' + esc(svc.description || '') + '</div>' +
            '<div class="links">' + links.join('') + '</div>';
        grid.appendChild(panel);
    }

    document.getElementById('summary').textContent = 'UP ' + up + '   DOWN ' + down + '   WIP ' + wip;
}

// The styling toggle (Q27): ?bare=1 strips the page to bare, unstyled HTML.
function applyBare() {
    const bare = new URLSearchParams(window.location.search).get('bare') === '1';
    document.documentElement.setAttribute('data-bare', bare ? '1' : '0');
    const t = document.getElementById('bare-toggle');
    if (t) {
        t.textContent = bare ? 'styled' : 'bare';
        t.href = bare ? '?bare=0' : '?bare=1';
    }
}

// The last master deployment datetime (Q43), baked in at deploy time.
function fillDeployed() {
    const el = document.getElementById('deployed-at');
    if (el && window.DEPLOYED_AT) el.textContent = window.DEPLOYED_AT;
}

function main() {
    applyBare();
    fillDeployed();
    Promise.all([load('services.json'), load('status.json')])
        .then(function (pair) { renderPanels(pair[0], pair[1]); })
        .catch(function (e) {
            document.getElementById('summary').textContent = 'status unavailable: ' + e;
        });
}

main();