{% load static %}
<div class="widget-card" id="widget-librespeed">
    <div>
        <h3>Speed Test</h3>
        <p class="widget-desc">Measures your download, upload, and latency using LibreSpeed.</p>
    </div>
    <div class="librespeed-container">
        <div id="speedtest-status">Press Start to begin.</div>
        <div class="speed-readout">
            <div class="speed-stat">
                <div><span class="value" id="ls-dl">—</span><span class="unit">Mbps</span></div>
                <div class="label">Download</div>
            </div>
            <div class="speed-stat">
                <div><span class="value" id="ls-ul">—</span><span class="unit">Mbps</span></div>
                <div class="label">Upload</div>
            </div>
            <div class="speed-stat">
                <div><span class="value" id="ls-ping">—</span><span class="unit">ms</span></div>
                <div class="label">Ping</div>
            </div>
            <div class="speed-stat">
                <div><span class="value" id="ls-jitter">—</span><span class="unit">ms</span></div>
                <div class="label">Jitter</div>
            </div>
        </div>
    </div>
    <div>
        <button class="widget-btn" id="ls-btn" onclick="lsToggle()">Start</button>
    </div>
</div>

<script>window.LIBRESPEED_WORKER_URL = "{% static 'js/librespeed_worker.js' %}";</script>
<script src="{% static 'js/librespeed.js' %}"></script>
<script>
(function () {
    var s = new Speedtest();
    s.setParameter("workerUrl", "{% static 'js/librespeed_worker.js' %}");

    s.setSelectedServer({
        name: "Datapath Speed Test",
        server: "https://speedtest.mydatapath.com/",
        dlURL: "backend/garbage.php",
        ulURL: "backend/empty.php",
        pingURL: "backend/empty.php",
        getIpURL: "backend/getIP.php"
    });

    s.onupdate = function (data) {
        document.getElementById("ls-dl").textContent     = data.dlStatus    || "—";
        document.getElementById("ls-ul").textContent     = data.ulStatus    || "—";
        document.getElementById("ls-ping").textContent   = data.pingStatus  || "—";
        document.getElementById("ls-jitter").textContent = data.jitterStatus || "—";
        document.getElementById("speedtest-status").textContent = {
            0: "Press Start to begin.",
            1: "Initializing…",
            2: "Downloading…",
            3: "Pinging…",
            4: "Uploading…",
            5: "Finishing…"
        }[data.testState] || "";
    };

    s.onend = function (aborted) {
        document.getElementById("ls-btn").textContent = "Start";
        document.getElementById("speedtest-status").textContent = aborted ? "Test aborted." : "Test complete.";
    };

    window.lsToggle = function () {
        var btn = document.getElementById("ls-btn");
        if (s.getState() === 3) {
            s.abort();
        } else {
            document.getElementById("ls-dl").textContent     = "—";
            document.getElementById("ls-ul").textContent     = "—";
            document.getElementById("ls-ping").textContent   = "—";
            document.getElementById("ls-jitter").textContent = "—";
            btn.textContent = "Abort";
            s.start();
        }
    };
}());
</script>