{% extends "base.html" %}

{% block css %}
    .container {
        max-width: 900px;
        margin: 0 auto;
    }

    .packet-fade-in {
        animation: fadeIn 0.5s ease forwards;
        opacity: 0;
    }

    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }

    #pause-button {
        white-space: nowrap;
        padding: 2px 8px;
        font-size: 0.85rem;
    }
{% endblock %}

{% block body %}
<div class="container">
    <form class="d-flex align-items-center justify-content-between mb-2">
        {% set options = {
                1: "Text Message",
                3: "Position",
                4: "Node Info",
                67: "Telemetry",
                71: "Neighbor Info",
                70: "Trace Route",
            }
        %}
        <button type="button" id="pause-button" class="btn btn-sm btn-outline-secondary">Pause</button>
    </form>

    <div class="row">
        <div class="col-xs" id="packet_list">
            {% for packet in packets %}
                {% include 'packet.html' %}
            {% else %}
                No packets found.
            {% endfor %}
        </div>
    </div>
</div>

<script>
let lastTime = null;
let portnum = "{{ portnum if portnum is not none else '' }}";
let updatesPaused = false;

function fetchUpdates() {
    if (updatesPaused) return;

    const url = new URL("/firehose/updates", window.location.origin);
    if (lastTime) url.searchParams.set("last_time", lastTime);
    if (portnum) url.searchParams.set("portnum", portnum);

    fetch(url)
        .then(res => res.json())
        .then(data => {
            if (data.packets && data.packets.length > 0) {
                lastTime = data.latest_import_time;
                const list = document.getElementById("packet_list");

                for (const html of data.packets.reverse()) {
                    list.insertAdjacentHTML("afterbegin", html);
                    const firstChild = list.firstElementChild;
                    if (firstChild) {
                        firstChild.classList.add("packet-fade-in");
                        firstChild.addEventListener("animationend", () => {
                            firstChild.classList.remove("packet-fade-in");
                        }, { once: true });
                    }
                }
            }
        })
        .catch(err => {
            console.error("Update fetch failed:", err);
        });
}

document.addEventListener("DOMContentLoaded", () => {
    const pauseBtn = document.getElementById("pause-button");

    document.querySelector('select[name="portnum"]').addEventListener("change", (e) => {
        const selected = e.target.value;
        const url = new URL(window.location.href);
        url.searchParams.set("portnum", selected);
        window.location.href = url;
    });

    pauseBtn.addEventListener("click", () => {
        updatesPaused = !updatesPaused;
        pauseBtn.textContent = updatesPaused ? "Resume" : "Pause";
    });

    // Start fetching updates
    fetchUpdates();
    setInterval(fetchUpdates, 1000);
});
</script>

{% endblock %}