{# Probes Component #}
<div class="section" id="probes-section">
    <div
        class="section-title"
        style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        "
        id="probes-header"
    >
        <div style="display: flex; align-items: center; gap: 8px">
            <i class="fas fa-microscope"></i>
            <span>Probes</span>
            <span
                class="badge"
                id="probes-status"
                style="
                    font-size: 10px;
                    padding: 2px 6px;
                    border-radius: 4px;
                    background: var(--bg-input);
                "
            >
                0 probes
            </span>
        </div>
        <i class="fas fa-chevron-down" id="probes-chevron"></i>
    </div>
    <div id="probes-content" style="display: none">
        <div
            id="probes-loading"
            style="color: var(--text-secondary); padding: 10px 0"
        >
            <i class="fas fa-spinner fa-spin"></i> Loading instances...
        </div>
        <div
            id="probes-error"
            style="display: none; color: var(--error); padding: 10px 0"
        >
            <i class="fas fa-exclamation-triangle"></i>
            <span id="probes-error-text"></span>
        </div>
        <div id="probes-list"></div>
        <button
            class="btn add-probe-btn"
            id="add-probe-btn"
            style="display: none"
        >
            <i class="fas fa-plus"></i> Add Probe
        </button>
    </div>
</div>

<style>
    .probe-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .probe-name-input {
        width: 100px;
        padding: 6px 10px;
        background-color: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: 4px;
        color: var(--text-primary);
        font-family: monospace;
        font-size: 12px;
    }

    .probe-name-input:focus {
        outline: none;
        border-color: var(--accent);
    }

    .probe-delete {
        padding: 6px 8px;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        border-radius: 4px;
    }

    .probe-delete:hover {
        background: var(--error);
        color: #fff;
    }

    .add-probe-btn {
        padding: 6px 12px;
        font-size: 12px;
        background: var(--bg-input);
        color: var(--text-secondary);
        border: 1px dashed var(--border);
    }

    .add-probe-btn:hover {
        border-color: var(--accent);
        color: var(--text-primary);
    }

    #probes-header:hover {
        opacity: 0.8;
    }

    #probes-chevron {
        transition: transform 0.2s ease;
    }

    #probes-chevron.expanded {
        transform: rotate(180deg);
    }

    /* Fuzzy Search Dropdown */
    .fuzzy-select {
        position: relative;
        flex: 1;
    }

    .fuzzy-select-input {
        width: 100%;
        padding: 6px 10px;
        background-color: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: 4px;
        color: var(--text-primary);
        font-family: monospace;
        font-size: 12px;
        box-sizing: border-box;
    }

    .fuzzy-select-input:focus {
        outline: none;
        border-color: var(--accent);
    }

    .fuzzy-select-input::placeholder {
        color: var(--text-secondary);
        opacity: 0.7;
    }

    .fuzzy-select-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 200px;
        overflow-y: auto;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-top: none;
        border-radius: 0 0 4px 4px;
        z-index: 100;
        display: none;
    }

    .fuzzy-select-dropdown.open {
        display: block;
    }

    .fuzzy-select-option {
        padding: 6px 10px;
        font-family: monospace;
        font-size: 12px;
        cursor: pointer;
        color: var(--text-primary);
    }

    .fuzzy-select-option:hover,
    .fuzzy-select-option.highlighted {
        background: var(--accent);
        color: #000;
    }

    .fuzzy-select-option .match {
        font-weight: bold;
        text-decoration: underline;
    }

    .fuzzy-select-empty {
        padding: 6px 10px;
        font-size: 12px;
        color: var(--text-secondary);
        font-style: italic;
    }
</style>

<script>
    // Fuzzy Search Dropdown Component
    function createFuzzySelect(options) {
        const {
            placeholder = "Search...",
            items = [], // [{value, label, sublabel?}]
            onSelect = () => {},
            width = null,
        } = options;

        const container = document.createElement("div");
        container.className = "fuzzy-select";
        if (width) container.style.width = width;

        const input = document.createElement("input");
        input.type = "text";
        input.className = "fuzzy-select-input";
        input.placeholder = placeholder;

        const dropdown = document.createElement("div");
        dropdown.className = "fuzzy-select-dropdown";

        container.appendChild(input);
        container.appendChild(dropdown);

        let currentItems = items;
        let highlightedIndex = -1;
        let selectedValue = null;

        function fuzzyMatch(text, query) {
            if (!query) return { match: true, score: 0, indices: [] };
            const lowerText = text.toLowerCase();
            const lowerQuery = query.toLowerCase();
            let ti = 0,
                qi = 0;
            const indices = [];
            while (ti < text.length && qi < query.length) {
                if (lowerText[ti] === lowerQuery[qi]) {
                    indices.push(ti);
                    qi++;
                }
                ti++;
            }
            if (qi === query.length) {
                // Score: prefer consecutive matches and early matches
                let score = indices.length * 10;
                for (let i = 1; i < indices.length; i++) {
                    if (indices[i] === indices[i - 1] + 1) score += 5;
                }
                score -= indices[0]; // Prefer matches at start
                return { match: true, score, indices };
            }
            return { match: false, score: -1, indices: [] };
        }

        function highlightText(text, indices) {
            if (!indices.length) return document.createTextNode(text);
            const span = document.createElement("span");
            let lastIdx = 0;
            for (const idx of indices) {
                if (idx > lastIdx) {
                    span.appendChild(
                        document.createTextNode(text.slice(lastIdx, idx)),
                    );
                }
                const mark = document.createElement("span");
                mark.className = "match";
                mark.textContent = text[idx];
                span.appendChild(mark);
                lastIdx = idx + 1;
            }
            if (lastIdx < text.length) {
                span.appendChild(document.createTextNode(text.slice(lastIdx)));
            }
            return span;
        }

        function renderDropdown(query) {
            dropdown.innerHTML = "";
            highlightedIndex = -1;

            const results = currentItems
                .map((item) => {
                    const labelMatch = fuzzyMatch(item.label, query);
                    const sublabelMatch = item.sublabel
                        ? fuzzyMatch(item.sublabel, query)
                        : { match: false, score: -1 };
                    const bestScore = Math.max(
                        labelMatch.score,
                        sublabelMatch.score,
                    );
                    return {
                        item,
                        labelMatch,
                        sublabelMatch,
                        score: bestScore,
                        matches: labelMatch.match || sublabelMatch.match,
                    };
                })
                .filter((r) => r.matches)
                .sort((a, b) => b.score - a.score);

            if (results.length === 0) {
                const empty = document.createElement("div");
                empty.className = "fuzzy-select-empty";
                empty.textContent = query ? "No matches" : "No options";
                dropdown.appendChild(empty);
                return;
            }

            results.forEach((result, idx) => {
                const option = document.createElement("div");
                option.className = "fuzzy-select-option";
                option.dataset.value = result.item.value;
                option.dataset.index = idx;

                const labelSpan = highlightText(
                    result.item.label,
                    result.labelMatch.match ? result.labelMatch.indices : [],
                );
                option.appendChild(labelSpan);

                if (result.item.sublabel) {
                    const sub = document.createElement("span");
                    sub.style.color = "white";
                    sub.style.marginLeft = "6px";
                    sub.appendChild(document.createTextNode("("));
                    sub.appendChild(
                        highlightText(
                            result.item.sublabel,
                            result.sublabelMatch.match
                                ? result.sublabelMatch.indices
                                : [],
                        ),
                    );
                    sub.appendChild(document.createTextNode(")"));
                    option.appendChild(sub);
                }

                option.addEventListener("mousedown", (e) => {
                    e.preventDefault();
                    selectItem(result.item);
                });

                option.addEventListener("mouseenter", () => {
                    setHighlighted(idx);
                });

                dropdown.appendChild(option);
            });

            if (results.length > 0) highlightedIndex = 0;
            updateHighlight();
        }

        function setHighlighted(idx) {
            highlightedIndex = idx;
            updateHighlight();
        }

        function updateHighlight() {
            dropdown
                .querySelectorAll(".fuzzy-select-option")
                .forEach((el, i) => {
                    el.classList.toggle("highlighted", i === highlightedIndex);
                });
        }

        function selectItem(item) {
            selectedValue = item.value;
            input.value = item.label;
            dropdown.classList.remove("open");
            onSelect(item.value, item);
        }

        function openDropdown() {
            renderDropdown(input.value);
            dropdown.classList.add("open");
        }

        function closeDropdown() {
            dropdown.classList.remove("open");
        }

        input.addEventListener("focus", () => {
            input.select(); // Select all text so typing replaces it
            openDropdown();
        });
        input.addEventListener("blur", () => {
            setTimeout(() => {
                closeDropdown();
                // Restore selected value if user didn't make a new selection
                if (selectedValue) {
                    const item = currentItems.find(
                        (i) => i.value === selectedValue,
                    );
                    if (item) input.value = item.label;
                }
            }, 150);
        });
        input.addEventListener("input", () => renderDropdown(input.value));

        input.addEventListener("keydown", (e) => {
            const options = dropdown.querySelectorAll(".fuzzy-select-option");
            if (e.key === "ArrowDown") {
                e.preventDefault();
                highlightedIndex = Math.min(
                    highlightedIndex + 1,
                    options.length - 1,
                );
                updateHighlight();
                options[highlightedIndex]?.scrollIntoView({ block: "nearest" });
            } else if (e.key === "ArrowUp") {
                e.preventDefault();
                highlightedIndex = Math.max(highlightedIndex - 1, 0);
                updateHighlight();
                options[highlightedIndex]?.scrollIntoView({ block: "nearest" });
            } else if (e.key === "Enter") {
                e.preventDefault();
                if (highlightedIndex >= 0 && options[highlightedIndex]) {
                    const value = options[highlightedIndex].dataset.value;
                    const item = currentItems.find((i) => i.value === value);
                    if (item) selectItem(item);
                }
            } else if (e.key === "Escape") {
                closeDropdown();
                input.blur();
            }
        });

        // Public API
        container._setItems = (newItems) => {
            currentItems = newItems;
            if (dropdown.classList.contains("open")) {
                renderDropdown(input.value);
            }
        };
        container._setValue = (value, label) => {
            selectedValue = value;
            input.value = label || value || "";
        };
        container._input = input;

        return container;
    }

    // Probes Component
    const Probes = (function () {
        let instances = {};
        let probes = []; // {id, name, instance, port}
        let isExpanded = false;
        let probeIdCounter = 0;
        let onChangeCallback = null;
        let supportsProbes = false;
        let savedConfig = null;

        async function loadInstances() {
            const loading = document.getElementById("probes-loading");
            const error = document.getElementById("probes-error");
            const errorText = document.getElementById("probes-error-text");
            const addBtn = document.getElementById("add-probe-btn");
            const status = document.getElementById("probes-status");
            const list = document.getElementById("probes-list");

            loading.style.display = "block";
            error.style.display = "none";
            addBtn.style.display = "none";

            try {
                // First check SAX version
                if (typeof StatusBar !== "undefined")
                    StatusBar.update("Checking SAX version...");
                const versionResponse = await fetch("/api/sax/version");
                const versionData = await versionResponse.json();

                if (!versionData.supports_probes) {
                    loading.style.display = "none";
                    list.innerHTML = `
                        <div style="color: var(--text-secondary); padding: 10px 0; font-size: 12px;">
                            <i class="fas fa-info-circle"></i>
                            Probes require SAX >= 0.16. Please upgrade to use this feature.
                        </div>
                    `;
                    status.textContent = "Unavailable";
                    status.style.opacity = "0.5";
                    return;
                }

                supportsProbes = true;

                if (typeof StatusBar !== "undefined")
                    StatusBar.update("Loading instances...");
                const fromNetlist =
                    typeof SourceMode !== "undefined" &&
                    SourceMode.isFromNetlist();
                const response = await fetch(
                    `/api/sax/${FACTORY_NAME}/instances?from_netlist=${fromNetlist}`,
                );
                const data = await response.json();

                if (data.detail) {
                    throw new Error(data.detail);
                }

                instances = data.instances || {};

                // Load probes from saved config
                if (savedConfig?.probes) {
                    for (const [name, value] of Object.entries(
                        savedConfig.probes,
                    )) {
                        const [inst, port] = value.split(",");
                        probes.push({
                            id: ++probeIdCounter,
                            name: name,
                            instance: inst,
                            port: port,
                        });
                    }
                }

                // Render UI
                renderProbes();
                addBtn.style.display = "block";

                updateStatus();
            } catch (err) {
                const message = err.message || "Failed to load instances";
                error.style.display = "block";
                errorText.textContent = message;
                status.textContent = "Error";
                status.className = "badge missing";
                // Show global error banner
                if (typeof ErrorBanner !== "undefined") {
                    ErrorBanner.show(message);
                }
            } finally {
                loading.style.display = "none";
            }
        }

        function renderProbes() {
            const list = document.getElementById("probes-list");
            list.innerHTML = "";

            for (const probe of probes) {
                const row = document.createElement("div");
                row.className = "probe-row";
                row.dataset.id = probe.id;

                // Name input
                const nameInput = document.createElement("input");
                nameInput.type = "text";
                nameInput.className = "probe-name-input";
                nameInput.placeholder = "name";
                nameInput.value = probe.name;
                nameInput.addEventListener("input", (e) => {
                    probe.name = e.target.value;
                });

                // Instance selector (fuzzy)
                const instanceItems = Object.entries(instances).map(
                    ([instName, instInfo]) => ({
                        value: instName,
                        label: instName,
                        sublabel: instInfo.component,
                    }),
                );

                const instanceFuzzy = createFuzzySelect({
                    placeholder: "Instance...",
                    items: instanceItems,
                    onSelect: (value) => {
                        probe.instance = value;
                        probe.port = "";
                        // Update port items
                        const ports = instances[value]?.ports || [];
                        portFuzzy._setItems(
                            ports.map((p) => ({ value: p, label: p })),
                        );
                        portFuzzy._setValue("", "");
                        // Auto-generate name if empty
                        if (!probe.name && probe.instance) {
                            probe.name = probe.instance;
                            nameInput.value = probe.name;
                        }
                        updateStatus();
                        triggerChange();
                    },
                });
                if (probe.instance) {
                    instanceFuzzy._setValue(probe.instance, probe.instance);
                }

                // Port selector (fuzzy)
                const portItems =
                    probe.instance && instances[probe.instance]?.ports
                        ? instances[probe.instance].ports.map((p) => ({
                              value: p,
                              label: p,
                          }))
                        : [];

                const portFuzzy = createFuzzySelect({
                    placeholder: "Port...",
                    items: portItems,
                    width: "120px",
                    onSelect: (value) => {
                        probe.port = value;
                        // Update name if it was auto-generated
                        if (probe.name === probe.instance && probe.port) {
                            probe.name = `${probe.instance}_${probe.port}`;
                            nameInput.value = probe.name;
                        }
                        updateStatus();
                        triggerChange();
                    },
                });
                if (probe.port) {
                    portFuzzy._setValue(probe.port, probe.port);
                }

                row._instanceFuzzy = instanceFuzzy;
                row._portFuzzy = portFuzzy;

                // Delete button
                const deleteBtn = document.createElement("button");
                deleteBtn.className = "probe-delete";
                deleteBtn.innerHTML = '<i class="fas fa-times"></i>';
                deleteBtn.title = "Remove probe";
                deleteBtn.addEventListener("click", () => {
                    probes = probes.filter((p) => p.id !== probe.id);
                    renderProbes();
                    updateStatus();
                    triggerChange();
                });

                row.appendChild(nameInput);
                row.appendChild(instanceFuzzy);
                row.appendChild(portFuzzy);
                row.appendChild(deleteBtn);
                list.appendChild(row);
            }
        }

        function addProbe() {
            probes.push({
                id: ++probeIdCounter,
                name: "",
                instance: "",
                port: "",
            });
            renderProbes();
            updateStatus();
        }

        function updateStatus() {
            const status = document.getElementById("probes-status");
            const numProbes = probes.filter((p) => p.instance && p.port).length;
            status.textContent = `${numProbes} probe${numProbes !== 1 ? "s" : ""}`;
            status.className = "badge";
        }

        function triggerChange() {
            if (onChangeCallback) {
                onChangeCallback();
            }
        }

        function onChange(callback) {
            onChangeCallback = callback;
        }

        function getConfig() {
            // Build probes object: {name: "instance,port"}
            const probesObj = {};
            for (const probe of probes) {
                if (probe.instance && probe.port) {
                    const name =
                        probe.name.trim() || `${probe.instance}_${probe.port}`;
                    probesObj[name] = `${probe.instance},${probe.port}`;
                }
            }

            return {
                probes: probesObj,
            };
        }

        function init(config = null) {
            savedConfig = config;

            const header = document.getElementById("probes-header");
            const content = document.getElementById("probes-content");
            const chevron = document.getElementById("probes-chevron");
            const addProbeBtn = document.getElementById("add-probe-btn");

            header.addEventListener("click", () => {
                isExpanded = !isExpanded;
                content.style.display = isExpanded ? "block" : "none";
                chevron.classList.toggle("expanded", isExpanded);
            });

            addProbeBtn.addEventListener("click", () => {
                addProbe();
                triggerChange();
            });

            // Load instances on init
            loadInstances();
        }

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