{# Parameter Editor Component #}
<div class="section" id="params-section">
    <div
        class="section-title"
        style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        "
        id="params-header"
    >
        <div style="display: flex; align-items: center; gap: 8px">
            <i class="fas fa-sliders-h"></i>
            <span>Parameters</span>
            <span
                class="badge"
                id="params-count"
                style="
                    font-size: 10px;
                    padding: 2px 6px;
                    border-radius: 4px;
                    background: var(--bg-input);
                "
            >
                0
            </span>
        </div>
        <i class="fas fa-chevron-down" id="params-chevron"></i>
    </div>
    <div id="params-content" style="display: none">
        <div id="available-params" style="margin-bottom: 12px"></div>
        <div
            id="params-list"
            style="display: flex; flex-direction: column; gap: 8px"
        ></div>
        <button
            class="btn"
            id="add-param-btn"
            style="
                margin-top: 12px;
                padding: 6px 12px;
                font-size: 12px;
                background: var(--bg-input);
                color: var(--text-secondary);
                border: 1px dashed var(--border);
            "
        >
            <i class="fas fa-plus"></i> Add Custom Parameter
        </button>
    </div>
</div>

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

    .param-key {
        width: 120px;
        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;
    }

    .param-value {
        flex: 1;
        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;
    }

    .param-key:focus,
    .param-value:focus {
        outline: none;
        border-color: var(--accent);
    }

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

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

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

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

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

    .param-hint {
        font-size: 11px;
        color: var(--text-secondary);
        margin-bottom: 12px;
    }

    .available-params-label {
        font-size: 11px;
        color: var(--text-secondary);
        margin-bottom: 6px;
    }

    .param-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .param-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        background: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: 4px;
        font-size: 11px;
        font-family: monospace;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .param-chip:hover {
        border-color: var(--accent);
        color: var(--text-primary);
    }

    .param-chip.added {
        background: var(--accent);
        border-color: var(--accent);
        color: #000;
    }

    .param-chip-default {
        font-size: 10px;
        opacity: 0.7;
    }

    .param-chip-count {
        font-size: 9px;
        background: var(--bg-secondary);
        padding: 1px 4px;
        border-radius: 3px;
    }

    .param-chip.added .param-chip-count {
        background: rgba(0, 0, 0, 0.2);
    }

    .param-models {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding-left: 4px;
    }

    .param-model-tag {
        font-size: 10px;
        font-family: monospace;
        padding: 1px 6px;
        border-radius: 3px;
        background: var(--bg-input);
        color: var(--text-secondary);
        border: 1px solid var(--border);
    }
</style>

<script>
    // Parameter Editor Component
    const ParameterEditor = (function () {
        let params = [];
        let availableParams = {};
        let isExpanded = false;
        let paramIdCounter = 0;
        let savedConfig = null;
        let changeCallbacks = [];

        async function loadAvailableParams() {
            const container = document.getElementById("available-params");
            container.innerHTML =
                '<div class="param-hint"><i class="fas fa-spinner fa-spin"></i> Loading parameters...</div>';

            try {
                if (typeof StatusBar !== "undefined")
                    StatusBar.update("Loading parameters...");
                const models =
                    typeof ModelSelector !== "undefined"
                        ? ModelSelector.getSelectedModels()
                        : {};
                const response = await fetch(
                    `/api/sax/${FACTORY_NAME}/parameters`,
                    {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({ models }),
                    },
                );
                const data = await response.json();

                if (data.detail) {
                    container.innerHTML = "";
                    return;
                }

                availableParams = data.parameters || {};
                renderAvailableParams();
                renderParams();
            } catch (err) {
                console.warn("Failed to load available parameters:", err);
                container.innerHTML = "";
            } finally {
                if (typeof StatusBar !== "undefined") StatusBar.ready();
            }
        }

        function renderAvailableParams() {
            const container = document.getElementById("available-params");
            container.innerHTML = "";

            const paramNames = Object.keys(availableParams);
            if (paramNames.length === 0) {
                return;
            }

            const label = document.createElement("div");
            label.className = "available-params-label";
            label.textContent = "Available parameters (click to add):";
            container.appendChild(label);

            const chips = document.createElement("div");
            chips.className = "param-chips";

            for (const [name, info] of Object.entries(availableParams)) {
                const chip = document.createElement("div");
                chip.className = "param-chip";
                chip.dataset.param = name;

                // Check if already added
                if (params.some((p) => p.key === name)) {
                    chip.classList.add("added");
                }

                // Parameter name
                const nameSpan = document.createElement("span");
                nameSpan.textContent = name;
                chip.appendChild(nameSpan);

                // Default value (if any)
                if (info.default !== null && info.default !== undefined) {
                    const defaultSpan = document.createElement("span");
                    defaultSpan.className = "param-chip-default";
                    defaultSpan.textContent = `=${JSON.stringify(info.default)}`;
                    chip.appendChild(defaultSpan);
                }

                // Model count
                const countSpan = document.createElement("span");
                countSpan.className = "param-chip-count";
                countSpan.textContent = `${info.models.length}`;
                countSpan.title = `Used by: ${info.models.join(", ")}`;
                chip.appendChild(countSpan);

                chip.title = `Used by ${info.models.length} model(s): ${info.models.join(", ")}`;

                chip.addEventListener("click", () => {
                    toggleParam(name, info.default);
                });

                chips.appendChild(chip);
            }

            container.appendChild(chips);
        }

        function toggleParam(name, defaultValue) {
            const existingIdx = params.findIndex((p) => p.key === name);

            if (existingIdx >= 0) {
                // Remove if already exists
                params.splice(existingIdx, 1);
            } else {
                // Add with default value
                let valueStr =
                    defaultValue !== null && defaultValue !== undefined
                        ? JSON.stringify(defaultValue)
                        : "";
                params.push({
                    id: ++paramIdCounter,
                    key: name,
                    value: valueStr,
                });
            }

            renderParams();
            renderAvailableParams();
            updateCount();
            changeCallbacks.forEach((cb) => cb());
        }

        function renderModelTags(container, paramKey) {
            container.innerHTML = "";
            const info = availableParams[paramKey];
            if (!info || !info.models || info.models.length === 0) return;
            for (const model of info.models) {
                const tag = document.createElement("span");
                tag.className = "param-model-tag";
                tag.textContent = model;
                container.appendChild(tag);
            }
        }

        function renderParams() {
            const list = document.getElementById("params-list");
            list.innerHTML = "";

            for (const param of params) {
                const wrapper = document.createElement("div");
                wrapper.style.cssText =
                    "display: flex; flex-direction: column; gap: 4px;";

                const row = document.createElement("div");
                row.className = "param-row";
                row.dataset.id = param.id;

                const modelsDiv = document.createElement("div");
                modelsDiv.className = "param-models";
                renderModelTags(modelsDiv, param.key);

                const keyInput = document.createElement("input");
                keyInput.type = "text";
                keyInput.className = "param-key";
                keyInput.placeholder = "name";
                keyInput.value = param.key;
                keyInput.addEventListener("input", (e) => {
                    param.key = e.target.value;
                    updateCount();
                    renderAvailableParams();
                    renderModelTags(modelsDiv, param.key);
                });
                keyInput.addEventListener("change", () => {
                    changeCallbacks.forEach((cb) => cb());
                });

                const valueInput = document.createElement("input");
                valueInput.type = "text";
                valueInput.className = "param-value";
                valueInput.placeholder = "value";
                valueInput.value = param.value;
                valueInput.addEventListener("input", (e) => {
                    param.value = e.target.value;
                });
                valueInput.addEventListener("change", () => {
                    changeCallbacks.forEach((cb) => cb());
                });

                const deleteBtn = document.createElement("button");
                deleteBtn.className = "param-delete";
                deleteBtn.innerHTML = '<i class="fas fa-times"></i>';
                deleteBtn.title = "Remove parameter";
                deleteBtn.addEventListener("click", () => {
                    params = params.filter((p) => p.id !== param.id);
                    renderParams();
                    renderAvailableParams();
                    updateCount();
                    changeCallbacks.forEach((cb) => cb());
                });

                row.appendChild(keyInput);
                row.appendChild(valueInput);
                row.appendChild(deleteBtn);
                wrapper.appendChild(row);
                wrapper.appendChild(modelsDiv);
                list.appendChild(wrapper);
            }

            updateCount();
        }

        function addParam() {
            params.push({
                id: ++paramIdCounter,
                key: "",
                value: "",
            });
            renderParams();

            // Focus the new key input
            const inputs = document.querySelectorAll(".param-key");
            if (inputs.length > 0) {
                inputs[inputs.length - 1].focus();
            }
        }

        function updateCount() {
            const countBadge = document.getElementById("params-count");
            const validParams = params.filter((p) => p.key.trim() !== "");
            countBadge.textContent = validParams.length.toString();
        }

        function getParams() {
            const result = {};
            for (const param of params) {
                const key = param.key.trim();
                if (key === "") continue;

                // Try to parse value as JSON (for numbers, arrays, etc.)
                let value = param.value;
                try {
                    value = JSON.parse(param.value);
                } catch {
                    // Keep as string if not valid JSON
                }
                result[key] = value;
            }
            return result;
        }

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

            const header = document.getElementById("params-header");
            const content = document.getElementById("params-content");
            const chevron = document.getElementById("params-chevron");
            const addBtn = document.getElementById("add-param-btn");

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

            addBtn.addEventListener("click", () => {
                addParam();
                changeCallbacks.forEach((cb) => cb());
            });

            // Load parameters from saved config
            if (savedConfig?.parameters) {
                for (const [key, value] of Object.entries(
                    savedConfig.parameters,
                )) {
                    params.push({
                        id: ++paramIdCounter,
                        key: key,
                        value:
                            typeof value === "string"
                                ? value
                                : JSON.stringify(value),
                    });
                }
            }

            renderParams();
        }

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

        return {
            init,
            getParams,
            addParam,
            loadAvailableParams,
            onChange,
        };
    })();
</script>