{# Port Selector Component #}
<div class="port-selector">
    <div class="port-group">
        <div class="port-group-label">Input Port</div>
        <div class="port-buttons" id="input-ports"></div>
    </div>
    <div class="port-group">
        <div class="port-group-label">Output Port</div>
        <div class="port-buttons" id="output-ports"></div>
    </div>
    <div class="port-group">
        <div class="port-group-label">Processing</div>
        <div class="port-buttons" id="processing-btns">
            <button class="port-btn" data-mode="ampl">ampl</button>
            <button class="port-btn" data-mode="pow">pow</button>
            <button class="port-btn active" data-mode="pow_db">pow [dB]</button>
            <button class="port-btn" data-mode="phase">phase</button>
        </div>
    </div>
</div>

<script>
    // Port Selector Component
    const PortSelector = (function () {
        let onChangeCallback = null;

        function createButton(label, onClick) {
            const btn = document.createElement("button");
            btn.className = "port-btn";
            btn.textContent = label;
            btn.addEventListener("click", onClick);
            return btn;
        }

        function setupPorts(ports) {
            const inputContainer = document.getElementById("input-ports");
            const outputContainer = document.getElementById("output-ports");

            inputContainer.innerHTML = "";
            outputContainer.innerHTML = "";

            // Create "All" button for inputs
            const allInputBtn = createButton("All", () => {
                inputContainer
                    .querySelectorAll(".port-btn")
                    .forEach((b) => b.classList.remove("active"));
                allInputBtn.classList.add("active");
                SaxChart.setInputPorts(ports);
                updateOutputOptions(ports);
                triggerChange();
            });
            inputContainer.appendChild(allInputBtn);

            // Create individual input port buttons
            ports.forEach((port) => {
                const btn = createButton(port, () => {
                    inputContainer
                        .querySelectorAll(".port-btn")
                        .forEach((b) => b.classList.remove("active"));
                    btn.classList.add("active");
                    SaxChart.setInputPorts([port]);
                    updateOutputOptions(ports);
                    triggerChange();
                });
                inputContainer.appendChild(btn);
            });

            // Setup output ports
            setupOutputPorts(outputContainer, ports);

            // Auto-select first input port and all output ports
            if (ports.length > 0) {
                inputContainer.children[1]?.classList.add("active"); // First port (not "All")
                SaxChart.setInputPorts([ports[0]]);
                outputContainer.children[0]?.classList.add("active"); // "All" button
                SaxChart.setOutputPorts(ports);
            }
        }

        function setupOutputPorts(container, ports) {
            container.innerHTML = "";

            // Create "All" button for outputs
            const allOutputBtn = createButton("All", () => {
                container
                    .querySelectorAll(".port-btn")
                    .forEach((b) => b.classList.remove("active"));
                allOutputBtn.classList.add("active");
                SaxChart.setOutputPorts(ports);
                triggerChange();
            });
            container.appendChild(allOutputBtn);

            // Create individual output port buttons
            ports.forEach((port) => {
                const btn = createButton(port, () => {
                    container
                        .querySelectorAll(".port-btn")
                        .forEach((b) => b.classList.remove("active"));
                    btn.classList.add("active");
                    SaxChart.setOutputPorts([port]);
                    triggerChange();
                });
                container.appendChild(btn);
            });
        }

        function updateOutputOptions(ports) {
            const outputContainer = document.getElementById("output-ports");
            const currentOutputs = SaxChart.getSelectedOutputPorts();

            setupOutputPorts(outputContainer, ports);

            // Try to restore previous selection
            const validOutputs = ports.filter((p) => currentOutputs.has(p));
            if (validOutputs.length === ports.length) {
                outputContainer.children[0].classList.add("active"); // "All"
                SaxChart.setOutputPorts(ports);
            } else if (validOutputs.length > 0) {
                validOutputs.forEach((port) => {
                    Array.from(outputContainer.children).forEach((btn) => {
                        if (btn.textContent === port)
                            btn.classList.add("active");
                    });
                });
                SaxChart.setOutputPorts(validOutputs);
            } else {
                outputContainer.children[0].classList.add("active"); // "All"
                SaxChart.setOutputPorts(ports);
            }
        }

        function initProcessingButtons() {
            document
                .querySelectorAll("#processing-btns .port-btn")
                .forEach((btn) => {
                    btn.addEventListener("click", () => {
                        document
                            .querySelectorAll("#processing-btns .port-btn")
                            .forEach((b) => b.classList.remove("active"));
                        btn.classList.add("active");
                        SaxChart.setProcessing(btn.dataset.mode);
                        triggerChange();
                    });
                });
        }

        function triggerChange() {
            SaxChart.update();
            if (onChangeCallback) onChangeCallback();
        }

        function onChange(callback) {
            onChangeCallback = callback;
        }

        function init() {
            initProcessingButtons();
        }

        return {
            init,
            setupPorts,
            onChange,
        };
    })();
</script>