const API_BASE = 'https://api.mcstatus.io/v2/status/java/';
const REFRESH_MS = 60000; // 60s

async function loadServerList() {
    try {
        const res = await fetch('./server-list.json', { cache: 'no-store' });
        if (!res.ok) throw new Error('Could not load server-list.json');
        const data = await res.json();
        // Only active servers under "minecraft" key
        return (data.minecraft || []).filter(s => s.active);
    } catch (err) {
        console.error(err);
        document.getElementById('servers').innerHTML =
            '<div class="server">Failed to load <code>server-list.json</code></div>';
        return [];
    }
}

function esc(s) {
    return s ? String(s).replace(/</g, '&lt;').replace(/>/g, '&gt;') : "";
}

async function fetchStatus(host, port) {
    const address = `${host}:${port}`;
    const url = `${API_BASE}${encodeURIComponent(address)}?query=true&timeout=5`;
    try {
        const resp = await fetch(url, { cache: 'no-store' });
        if (!resp.ok) return { online: false, rawError: resp.status };
        return await resp.json();
    } catch (err) {
        return { online: false, error: err.message };
    }
}

function updateCard(server, card, data) {
    const idSafe = server.host.replace(/[:.\s]/g, '_');
    const statusEl = card.querySelector(`#status-${idSafe}`);
    const motdEl = card.querySelector(`#motd-${idSafe}`);
    const modsListEl = card.querySelector(`#modslist-${idSafe}`);
    const metaEl = card.querySelector(`#meta-${idSafe}`);
    const iconEl = card.querySelector(`#icon-${idSafe}`);

    if (data && data.online) {
        const players = (data.players && data.players.online != null) ?
            `${data.players.online}/${data.players.max ?? '?'}` : 'N/A';
        const modsText = server.mods ? 'enabled' : 'disabled';
        const whitelistText = server.whitelist ? 'enabled' : 'disabled';

        let motd = Array.isArray(data.motd?.clean)
            ? data.motd.clean.join(' ')
            : (data.motd?.clean || data.motd?.stripped || data.motd?.raw || '<em>(no motd)</em>');

        const ipLine = server.host;
        const iconUrl = `https://api.mcstatus.io/v2/icon/${encodeURIComponent(server.host + ':' + server.port)}?timeout=2`;

        statusEl.innerHTML = `<span class="pill">online</span> &nbsp; | &nbsp; <strong>players</strong> ${esc(players)} &nbsp; | &nbsp; <strong>whitelist</strong> ${esc(whitelistText)} &nbsp; | &nbsp; <strong>mods</strong> ${esc(modsText)}`;

        motdEl.innerHTML = `<strong>MOTD:</strong> ${motd}`;

        if (server.mods && server.modlist) {
            modsListEl.innerHTML = `<div style="text-align:center;">
            <button class="mod-button" onclick="window.location.href='modlist.html?file=${encodeURIComponent(server.modlist)}'">Mod List</button>
            </div>`;
        } else {
            modsListEl.innerHTML = '';
        }



        metaEl.innerHTML = `<strong>server ip:</strong> ${esc(ipLine)}`;

        iconEl.src = iconUrl;
        iconEl.style.visibility = '';
        iconEl.onerror = () => iconEl.style.visibility = 'hidden';
    } else {
        statusEl.innerHTML = `<span class="pill offline">offline</span>` +
            (data?.rawError || data?.error ? ` <div class="small">${esc(data.rawError || data.error)}</div>` : '');
        motdEl.innerHTML = `<em>—</em>`;
        modsListEl.innerHTML = '';
        metaEl.innerHTML = `<strong>server ip:</strong> ${esc(server.host)}`;
        iconEl.style.visibility = 'hidden';
    }
}

async function updateSingle(server, card) {
    const idSafe = server.host.replace(/[:.\s]/g, '_');
    card.querySelector(`#status-${idSafe}`).innerHTML = '<span class="loading">Loading…</span>';
    const data = await fetchStatus(server.host, server.port);
    updateCard(server, card, data);
}

async function init() {
    const list = await loadServerList();
    const container = document.getElementById('servers');
    container.innerHTML = '';

    const cards = {};
    list.forEach(s => {
        const idSafe = s.host.replace(/[:.\s]/g, '_');
        const card = document.createElement('div');
        card.className = 'server';
        card.innerHTML = `
            <div class="header">${esc(s.name)}</div>
            <div class="row">
                <img class="icon" id="icon-${idSafe}" src="" alt="${esc(s.name)} server icon"/>
                <div><div id="status-${idSafe}"><span class="loading">Loading…</span></div></div>
            </div>
            <div class="motd" id="motd-${idSafe}"></div>
            <div class="row" id="modslist-${idSafe}" style="margin:6px 0;"></div>
            <div class="meta" id="meta-${idSafe}"></div>
        `;
        container.appendChild(card);
        cards[s.host] = { server: s, card };
    });

    for (const { server, card } of Object.values(cards)) {
        updateSingle(server, card);
    }

    setInterval(() => {
        for (const { server, card } of Object.values(cards)) {
            updateSingle(server, card);
        }
    }, REFRESH_MS);
}

init();