{% extends "base.html" %}
{% block theme %}light{% endblock %}
{% block body_class %}mesh-data-page mesh-net-page{% endblock %}

{% block css %}
{% include "data-page-styles.html" %}
<style>
#weekly-message { padding:18px 22px; background:var(--mesh-soft); border:1px solid var(--mesh-border); border-radius:9px; color:var(--mesh-primary-dark); font-size:14px; margin-bottom:18px; white-space:pre-wrap; overflow-wrap:anywhere; }
#weekly-message:empty { display:none; }
#total-count { padding:16px 20px; color:#64748b; background:white; border:1px solid var(--mesh-border); border-radius:9px 9px 0 0; font-size:13px; }
#total-count-value { font-size:20px; font-weight:650; color:var(--mesh-primary); margin-left:8px; }
#chat-log { padding:0; }
#chat-container { border:1px solid var(--mesh-border); border-top:0; border-radius:0 0 9px 9px; background:white; overflow:hidden; }
.chat-packet { display:grid; grid-template-columns:155px 130px 200px minmax(0,1fr); gap:16px; margin:0; padding:16px 20px; border-bottom:1px solid #edf1f6; font-size:13px; }
.chat-packet:nth-child(even) { background:var(--mesh-stripe); }
.chat-packet > span { width:auto; padding:0; min-width:0; overflow-wrap:anywhere; }
.chat-packet .timestamp { color:#8190a5; font-size:11px; }
.chat-packet .channel { color:#64748b; font-size:12px; }
.chat-packet .nodename { font-weight:600; }
.chat-packet a { text-decoration:none; }
#net-note { color:#64748b; font-size:12px; margin-top:14px; }
@media(max-width:900px) { .chat-packet { grid-template-columns:120px 100px minmax(0,1fr); } .chat-packet .message { grid-column:1 / -1; } }
@media(max-width:500px) { .chat-packet { grid-template-columns:1fr 1fr; gap:8px; } .chat-packet .nodename { grid-column:1 / -1; } }
</style>
{% endblock %}

{% block body %}
<div class="container">
<header class="data-heading"><div><span class="mesh-eyebrow">COMMUNITY NET</span><h1><span data-translate-lang="net_title">Network check-in</span></h1><p>Weekly check-ins and reports from your mesh.</p></div><a class="mesh-secondary-button" href="/map">View map ↗</a></header>

    <!-- Weekly network message -->
    <div id="weekly-message"></div>


    <!-- Total message count -->
    <div id="total-count">
        <span data-translate-lang="total_messages">Total messages:</span>
        <span id="total-count-value">0</span>
    </div>

    <div id="chat-container">
        <div class="container" id="chat-log"></div>
    </div>

    <div id="net-note">
        Only the earliest report from each device is listed.
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", async () => {

    const chatContainer = document.querySelector("#chat-log");
    const weeklyMessageEl = document.querySelector("#weekly-message");
    const totalCountValueEl = document.querySelector("#total-count-value");

    if (!chatContainer || !weeklyMessageEl || !totalCountValueEl) {
        console.error("Required elements missing");
        return;
    }

    const renderedPacketIds = new Set();
    const renderedNodeIds = new Set();
    let netTranslations = {};
    let netTag = "";

    /* -----------------------------------
       Escape HTML safely
    ----------------------------------- */
    function escapeHtml(text) {
        const div = document.createElement("div");
        div.textContent = text ?? "";
        return div.innerHTML;
    }

    /* -----------------------------------
       Apply translations
    ----------------------------------- */
    function applyTranslations(trans, root=document) {
        root.querySelectorAll("[data-translate-lang]").forEach(el => {
            const key = el.dataset.translateLang;
            if (trans[key]) el.textContent = trans[key];
        });
        root.querySelectorAll("[data-translate-lang-title]").forEach(el => {
            const key = el.dataset.translateLangTitle;
            if (trans[key]) el.title = trans[key];
        });
    }

    /* -----------------------------------
       Update count
    ----------------------------------- */
    function updateTotalCount() {
        totalCountValueEl.textContent = renderedNodeIds.size;
    }

    /* -----------------------------------
       Render single packet
    ----------------------------------- */
    function renderPacket(packet) {
        if (renderedPacketIds.has(packet.id)) return;
        renderedPacketIds.add(packet.id);
        renderedNodeIds.add(packet.from_node_id);

        const date = new Date(packet.import_time_us / 1000);

        const timeStr = date.toLocaleTimeString([], {
            hour: "numeric",
            minute: "2-digit",
            second: "2-digit",
            hour12: true
        });

        const dateStr =
            `${String(date.getMonth()+1).padStart(2,"0")}/`+
            `${String(date.getDate()).padStart(2,"0")}/`+
            date.getFullYear();

        const timestamp = `${timeStr} - ${dateStr}`;

        const fromName =
            (packet.long_name || "").trim() ||
            `${netTranslations.node_fallback || "Node"} ${packet.from_node_id}`;

        const div = document.createElement("div");
        div.className = "row chat-packet";
        div.dataset.packetId = packet.id;

        div.innerHTML = `
            <span class="col-2 timestamp" title="${packet.import_time_us}">
                ${timestamp}
            </span>

            <span class="col-2 channel">
                <a href="/packet/${packet.id}"
                   data-translate-lang-title="view_packet_details">✉️</a>
                ${escapeHtml(packet.channel || "")}
            </span>

            <span class="col-3 nodename">
                <a href="/node/${packet.from_node_id}">
                    ${escapeHtml(fromName)}
                </a>
            </span>

            <span class="col-5 message">
                ${escapeHtml(packet.payload).replace(/\n/g,"<br>")}
            </span>
        `;

        chatContainer.prepend(div);
        applyTranslations(netTranslations, div);
        updateTotalCount();
    }

    /* -----------------------------------
       Sort descending by time
    ----------------------------------- */
    function renderPacketsEnsureDescending(packets) {
        if (!packets || !packets.length) return;
        const earliestByNode = new Map();

        for (const packet of packets) {
            const existing = earliestByNode.get(packet.from_node_id);
            if (!existing || packet.import_time_us < existing.import_time_us) {
                earliestByNode.set(packet.from_node_id, packet);
            }
        }

        const sorted = Array.from(earliestByNode.values()).sort(
            (a, b) => b.import_time_us - a.import_time_us
        );
        for (let i = sorted.length - 1; i >= 0; i--) {
            renderPacket(sorted[i]);
        }
    }

    /* -----------------------------------
       Fetch initial net-tagged packets
    ----------------------------------- */
    async function fetchInitialPackets(tag) {
        if (!tag) return;

        try {
            const sixDaysAgoMs = Date.now() - 6*24*60*60*1000;
            const sinceUs = Math.floor(sixDaysAgoMs * 1000);

            const url =
                `/api/packets?portnum=1&contains=${encodeURIComponent(tag)}&since=${sinceUs}&limit=1000`;

            const resp = await fetch(url);
            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
            const data = await resp.json();

            if (data?.packets?.length)
                renderPacketsEnsureDescending(data.packets);

        } catch (err) {
            console.error("Initial fetch error:", err);
            chatContainer.innerHTML = '<p class="data-empty">Unable to load check-ins. Reload to try again.</p>';
        }
    }

    /* -----------------------------------
       Load translations from section=net
    ----------------------------------- */
    async function loadTranslations(cfg) {
        try {
            const lang = cfg?.site?.language || "en";
            const res = await fetch(`/api/lang?lang=${lang}&section=net`);
            netTranslations = await res.json();
            applyTranslations(netTranslations, document);
        } catch (err) {
            console.error("Failed loading translations", err);
        }
    }

    /* -----------------------------------
       MAIN
    ----------------------------------- */
    try {
        const cfg = await window._siteConfigPromise;
        const site = cfg?.site || {};

        netTag = site.net_tag || "";

        weeklyMessageEl.textContent = site.weekly_net_message || "";


        await loadTranslations(cfg);
        await fetchInitialPackets(netTag);
        if (!chatContainer.children.length) {
            const empty = document.createElement("p");
            empty.className = "data-empty";
            empty.textContent = netTag ? "No check-ins received in the last six days." : "No network check-in tag configured.";
            chatContainer.append(empty);
        }

    } catch (err) {
        console.error("Initialization failed:", err);

        weeklyMessageEl.textContent =
            netTranslations.failed_to_load_site_config ||
            "Failed to load site config.";
    }

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