function getMergedConfig(callback) {
    loadMergedConfig().then(callback);
}

function renderConfig(config) {
    document.getElementById("tokenExpireHours").value = config.tokenExpireHours;
    document.getElementById("llmTokenExpireHours").value = config.llmTokenExpireHours;
    const container = document.getElementById("endpointSection");
    container.innerHTML = "";

    for (const [key, endpoint] of Object.entries(config.apiConfig)) {
        const block = document.createElement("div");
        block.className = "api-block";

        block.innerHTML += `<div class="api-name">【${endpoint.name}】</div>`;

        const urlRow = document.createElement("div");
        urlRow.className = "form-row";
        urlRow.innerHTML = `
      <label>接口地址</label>
      <input data-key="${key}" data-type="url" value="${endpoint.url}" />
    `;
        block.appendChild(urlRow);

        const reqGroup = document.createElement("div");
        reqGroup.className = "param-group";
        reqGroup.innerHTML = `<h4>请求参数</h4>`;
        endpoint.requestParams.forEach((param, index) => {
            const row = document.createElement("div");
            row.className = "form-row";
            row.innerHTML = `
        <label>${param.label}</label>
        <input data-key="${key}" data-type="requestParams" data-index="${index}" value="${param.field}" />
      `;
            reqGroup.appendChild(row);
        });
        block.appendChild(reqGroup);

        const resGroup = document.createElement("div");
        resGroup.className = "param-group";
        resGroup.innerHTML = `<h4>响应字段</h4>`;
        endpoint.responseParams.forEach((param, index) => {
            const row = document.createElement("div");
            row.className = "form-row";
            row.innerHTML = `
        <label>${param.label}</label>
        <input data-key="${key}" data-type="responseParams" data-index="${index}" value="${param.field}" />
      `;
            resGroup.appendChild(row);
        });
        block.appendChild(resGroup);

        container.appendChild(block);
    }
}

function collectUserConfig() {
    let tokenExpireHours = parseInt(document.getElementById("tokenExpireHours").value);
    if (isNaN(tokenExpireHours) || tokenExpireHours > 168 || tokenExpireHours < 0) tokenExpireHours = 24;

    let llmTokenExpireHours = parseInt(document.getElementById("llmTokenExpireHours").value);
    if (isNaN(llmTokenExpireHours) || llmTokenExpireHours > 168 || llmTokenExpireHours < 0) llmTokenExpireHours = 24;

    const apiConfig = {};

    const inputs = document.querySelectorAll("input[data-key]");
    for (const input of inputs) {
        const key = input.dataset.key;
        const type = input.dataset.type;
        const index = input.dataset.index;

        if (!apiConfig[key]) {
            apiConfig[key] = { requestParams: [], responseParams: [] };
        }

        if (type === "url") {
            apiConfig[key].url = input.value.trim();
        } else if (type === "requestParams") {
            apiConfig[key].requestParams[index] = { field: input.value.trim() };
        } else if (type === "responseParams") {
            apiConfig[key].responseParams[index] = { field: input.value.trim() };
        }
    }

    return { tokenExpireHours, llmTokenExpireHours, apiConfig };
}


document.getElementById("saveBtn").addEventListener("click", () => {
    const newConfig = collectUserConfig();
    chrome.storage.local.set({ customConfig: newConfig }, () => {
        log("配置已保存：" + JSON.stringify(newConfig));
        alert("设置已保存！");
    });
});

document.getElementById("resetBtn").addEventListener("click", () => {
    chrome.storage.local.remove("customConfig", () => {
        alert("已恢复默认设置，刷新页面以生效");
        location.reload();
    });
});

document.addEventListener("DOMContentLoaded", () => {
    getMergedConfig(renderConfig);
    const backBtn = document.getElementById("backToPopup");
    backBtn.addEventListener("click", () => {
        const popupUrl = chrome.runtime.getURL("pages/popup.html");
        chrome.tabs.create({ url: popupUrl });
    });
});