/**
 * Fluxibly Monitoring Dashboard — interactive helpers.
 *
 * Uses event delegation on <body> so handlers work regardless of
 * when span elements are inserted into the DOM.
 */

(function () {
    "use strict";

    /**
     * Delegated click handler for span headers ([data-span-toggle]).
     * Toggles the sibling .span-details element inside the same .tree-body.
     */
    document.addEventListener("click", function (e) {
        // --- Span header toggle ---
        var header = e.target.closest("[data-span-toggle]");
        if (header) {
            // Don't toggle if clicking a nested section header or tool-call header
            if (e.target.closest(".detail-section-header") || e.target.closest(".tool-call-header")) return;

            var body = header.parentElement;
            if (!body) return;
            var details = body.querySelector(":scope > .span-details");
            if (!details) return;

            var isHidden = details.style.display === "none";
            details.style.display = isHidden ? "" : "none";

            var arrow = header.querySelector(".toggle-arrow");
            if (arrow) {
                arrow.classList.toggle("expanded", isHidden);
            }
        }
    });

    /**
     * Toggle a detail-section-body when its header is clicked.
     * Called via onclick="toggleSection(this)" on detail-section-header
     * and tool-call-header elements.
     */
    window.toggleSection = function (headerEl) {
        var body = headerEl.nextElementSibling;
        if (!body || !body.classList.contains("detail-section-body")) return;

        var isHidden = body.style.display === "none";
        body.style.display = isHidden ? "" : "none";

        var arrow = headerEl.querySelector(".section-arrow");
        if (arrow) {
            arrow.classList.toggle("expanded", isHidden);
        }
    };

    /**
     * Expand all span nodes and their sections.
     */
    window.expandAllNodes = function () {
        document.querySelectorAll(".span-details").forEach(function (el) {
            el.style.display = "";
        });
        document.querySelectorAll(".toggle-arrow").forEach(function (el) {
            el.classList.add("expanded");
        });
        document.querySelectorAll(".detail-section-body").forEach(function (el) {
            el.style.display = "";
        });
        document.querySelectorAll(".section-arrow").forEach(function (el) {
            el.classList.add("expanded");
        });
    };

    /**
     * Collapse all span nodes and their sections.
     */
    window.collapseAllNodes = function () {
        document.querySelectorAll(".span-details").forEach(function (el) {
            el.style.display = "none";
        });
        document.querySelectorAll(".toggle-arrow").forEach(function (el) {
            el.classList.remove("expanded");
        });
        document.querySelectorAll(".detail-section-body").forEach(function (el) {
            el.style.display = "none";
        });
        document.querySelectorAll(".section-arrow").forEach(function (el) {
            el.classList.remove("expanded");
        });
    };

    /**
     * Simple inline bar chart rendered via CSS width%.
     * Usage: add data-bar-value="75" data-bar-max="100" to an element.
     */
    function initBarCells() {
        document.querySelectorAll("[data-bar-value]").forEach(function (el) {
            if (el.dataset.barInit) return; // avoid double-init
            el.dataset.barInit = "1";
            var value = parseFloat(el.getAttribute("data-bar-value")) || 0;
            var max = parseFloat(el.getAttribute("data-bar-max")) || 100;
            var pct = Math.min((value / max) * 100, 100);

            var bar = document.createElement("div");
            bar.style.cssText =
                "height:6px;border-radius:3px;background:#4a6cf7;margin-top:4px;width:" +
                pct + "%;transition:width 0.3s;";
            el.appendChild(bar);
        });
    }

    // Init bar cells on DOM ready
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", initBarCells);
    } else {
        initBarCells();
    }
})();
