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

<style>
    .model-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
        border-bottom: 1px solid var(--border);
    }

    .model-row:last-child {
        border-bottom: none;
    }

    .model-name {
        flex: 1;
        font-family: monospace;
        font-size: 13px;
        color: var(--text-primary);
    }

    .model-ports {
        font-size: 11px;
        color: var(--text-secondary);
        font-weight: normal;
    }

    .model-status {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .model-status.available {
        background-color: var(--success);
    }

    .model-status.missing {
        background-color: var(--error);
    }

    .model-select-container {
        width: 200px;
    }

    .model-select-container .fuzzy-select-input {
        padding: 4px 8px;
        font-size: 12px;
    }

    .model-select-container .fuzzy-select-option {
        padding: 4px 8px;
    }

    .badge.ready {
        background: var(--success) !important;
        color: #000;
    }

    .badge.missing {
        background: var(--error) !important;
        color: #fff;
    }

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

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

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

    @keyframes shake {
        0%,
        100% {
            transform: translateX(0);
        }
        10%,
        30%,
        50%,
        70%,
        90% {
            transform: translateX(-4px);
        }
        20%,
        40%,
        60%,
        80% {
            transform: translateX(4px);
        }
    }

    #models-section.shake {
        animation: shake 0.5s ease-in-out;
        border-color: var(--error);
        box-shadow: 0 0 8px rgba(240, 98, 146, 0.5);
    }
</style>

<script>
    // Model Selector Component
    const ModelSelector = (function () {
        let modelsData = null;
        let selectedModels = {};
        let isExpanded = false;
        let componentPorts = {}; // Cache for component ports
        let modelPorts = {}; // Cache for model ports
        let savedConfig = null;
        let changeCallbacks = [];

        async function loadModels(portsConfig = null) {
            const loading = document.getElementById("models-loading");
            const error = document.getElementById("models-error");
            const errorText = document.getElementById("models-error-text");
            const list = document.getElementById("models-list");
            const status = document.getElementById("models-status");

            loading.style.display = "block";
            error.style.display = "none";
            list.innerHTML = "";

            try {
                const fromNetlist =
                    typeof SourceMode !== "undefined" &&
                    SourceMode.isFromNetlist();
                const recursive =
                    typeof Options !== "undefined"
                        ? Options.getOptions().recursive
                        : true;
                const payload = portsConfig || {};
                payload.from_netlist = fromNetlist;
                payload.recursive = recursive;
                const response = await fetch(
                    `/api/sax/${FACTORY_NAME}/models`,
                    {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(payload),
                    },
                );
                const data = await response.json();

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

                modelsData = data;
                selectedModels = {};
                componentPorts = {};
                modelPorts = {};

                // Check if the netlist has no ports/probes
                if (data.no_ports) {
                    list.innerHTML = `
                        <div style="color: var(--text-secondary); padding: 10px 0; font-size: 12px; line-height: 1.5;">
                            <i class="fas fa-info-circle"></i>
                            The netlist you're trying to simulate has no ports.
                            Please add at least two ports to the netlist or add probes above.
                        </div>
                    `;
                    status.textContent = "No ports";
                    status.style.opacity = "0.5";
                    status.className = "badge missing";
                    return;
                }

                // Initialize selected models from config
                for (const [name, config] of Object.entries(data.config)) {
                    // Prefer saved config models over defaults
                    if (savedConfig?.models && savedConfig.models[name]) {
                        selectedModels[name] = savedConfig.models[name];
                    } else {
                        selectedModels[name] = config.selected;
                    }
                }

                // Render immediately (without ports)
                renderModels();
                updateStatus();

                // Load ports in the background
                loadPortsInBackground();
            } catch (err) {
                const message = err.message || "Failed to load models";
                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";
            }
        }

        async function loadPortsInBackground() {
            if (!modelsData) return;

            // Load component ports (for left side)
            for (const componentName of modelsData.required) {
                loadComponentPorts(componentName);
            }

            // Load model ports (for dropdowns)
            for (const modelName of modelsData.available) {
                loadModelPorts(modelName);
            }
        }

        async function loadComponentPorts(componentName) {
            try {
                const response = await fetch(
                    `/api/sax/ports/component/${componentName}`,
                );
                const data = await response.json();
                if (data.ports) {
                    componentPorts[componentName] = data.ports;
                    updateComponentPortsDisplay(componentName, data.ports);
                }
            } catch (err) {
                console.warn(
                    `Failed to load ports for component ${componentName}:`,
                    err,
                );
            }
        }

        async function loadModelPorts(modelName) {
            try {
                const response = await fetch(
                    `/api/sax/ports/model/${modelName}`,
                );
                const data = await response.json();
                if (data.ports) {
                    modelPorts[modelName] = data.ports;
                    updateModelPortsInDropdowns(modelName, data.ports);
                }
            } catch (err) {
                console.warn(
                    `Failed to load ports for model ${modelName}:`,
                    err,
                );
            }
        }

        function updateComponentPortsDisplay(componentName, ports) {
            const portsSpan = document.getElementById(
                `component-ports-${componentName}`,
            );
            if (portsSpan) {
                portsSpan.textContent = " " + formatPorts(ports);
            }
        }

        function updateModelPortsInDropdowns(modelName, ports) {
            // Update cached ports and refresh all fuzzy selects
            modelPorts[modelName] = ports;

            // Re-render to update fuzzy select items with new port info
            const containers = document.querySelectorAll(
                ".model-select-container",
            );
            for (const container of containers) {
                if (container._fuzzySelect) {
                    const items = buildModelItems();
                    container._fuzzySelect._setItems(items);
                }
            }
        }

        function buildModelItems() {
            if (!modelsData) return [];
            return modelsData.available.map((name) => ({
                value: name,
                label: name,
                sublabel: modelPorts[name] ? modelPorts[name].join(", ") : null,
            }));
        }

        function formatPorts(ports) {
            if (!ports || ports.length === 0) return "";
            return `(${ports.join(", ")})`;
        }

        function renderModels() {
            const list = document.getElementById("models-list");
            list.innerHTML = "";

            if (!modelsData || !modelsData.required.length) {
                list.innerHTML =
                    '<div style="color: var(--text-secondary); padding: 10px 0">No models required</div>';
                return;
            }

            const items = buildModelItems();

            for (const modelName of modelsData.required) {
                const config = modelsData.config[modelName];
                const row = document.createElement("div");
                row.className = "model-row";

                // Status indicator
                const status = document.createElement("div");
                status.className = `model-status ${config.available ? "available" : "missing"}`;
                status.title = config.available
                    ? "Model available in PDK"
                    : "Model not found in PDK";

                // Model name with ports placeholder
                const name = document.createElement("div");
                name.className = "model-name";
                name.textContent = modelName;

                // Add ports span (will be filled in background)
                const portsSpan = document.createElement("span");
                portsSpan.className = "model-ports";
                portsSpan.id = `component-ports-${modelName}`;
                portsSpan.textContent = " ..."; // Loading indicator
                name.appendChild(portsSpan);

                // Model selector dropdown (fuzzy)
                const container = document.createElement("div");
                container.className = "model-select-container";
                container.dataset.model = modelName;

                const fuzzySelect = createFuzzySelect({
                    placeholder: "Select model...",
                    items: items,
                    onSelect: (value) => {
                        selectedModels[modelName] = value || null;
                        updateStatus();
                        changeCallbacks.forEach((cb) => cb());
                    },
                });

                if (config.selected) {
                    fuzzySelect._setValue(config.selected, config.selected);
                }

                container._fuzzySelect = fuzzySelect;
                container.appendChild(fuzzySelect);

                row.appendChild(status);
                row.appendChild(name);
                row.appendChild(container);
                list.appendChild(row);
            }
        }

        function updateStatus() {
            const status = document.getElementById("models-status");
            if (!modelsData) return;

            const total = modelsData.required.length;
            const configured = Object.values(selectedModels).filter(
                (v) => v,
            ).length;

            if (configured === total) {
                status.textContent = `${total}/${total} ready`;
                status.className = "badge ready";
            } else {
                status.textContent = `${configured}/${total} configured`;
                status.className = "badge missing";
            }
        }

        function getSelectedModels() {
            return { ...selectedModels };
        }

        function isReady() {
            if (!modelsData) return false;
            return modelsData.required.every((name) => selectedModels[name]);
        }

        function expand() {
            const content = document.getElementById("models-content");
            const chevron = document.getElementById("models-chevron");
            const section = document.getElementById("models-section");

            if (!isExpanded) {
                isExpanded = true;
                content.style.display = "block";
                chevron.classList.add("expanded");
            }

            // Scroll to the models section
            section.scrollIntoView({ behavior: "smooth", block: "center" });
        }

        function shake() {
            const section = document.getElementById("models-section");
            section.classList.add("shake");
            setTimeout(() => {
                section.classList.remove("shake");
            }, 500);
        }

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

            const header = document.getElementById("models-header");
            const content = document.getElementById("models-content");
            const chevron = document.getElementById("models-chevron");

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

            // Load models on init (with probes from saved config)
            const probesConfig = savedConfig?.probes
                ? { probes: savedConfig.probes }
                : null;
            loadModels(probesConfig);
        }

        function onChange(callback) {
            changeCallbacks.push(callback);
        }

        return {
            init,
            loadModels,
            getSelectedModels,
            isReady,
            expand,
            shake,
            onChange,
        };
    })();
</script>