document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('test-form');
    const logOutput = document.getElementById('log-output');
    const resultsContainer = document.getElementById('results-container');
    const loadSpecBtn = document.getElementById('load-spec-btn');
    const apiSpecFileInput = document.getElementById('api_spec_file');
    const apiSpecTypeSelect = document.getElementById('api_spec_type');
    const yapiCategoriesContainer = document.getElementById('yapi-categories-container');
    const swaggerTagsContainer = document.getElementById('swagger-tags-container');

    // Make the log output area larger as per user request
    if (logOutput) {
        logOutput.rows = 25;
    }

    // Event listener for the new "Load Categories/Tags" button
    if (loadSpecBtn) {
        loadSpecBtn.addEventListener('click', async () => {
            const specType = apiSpecTypeSelect.value;
            const file = apiSpecFileInput.files[0];

            if (!file) {
                alert('请先选择一个 API 规范文件。');
                return;
            }

            const formData = new FormData();
            formData.append('api_spec_file', file);

            let url = '';
            let container = null;

            if (specType === 'YAPI') {
                url = '/list-yapi-categories';
                container = yapiCategoriesContainer;
                swaggerTagsContainer.style.display = 'none';
                yapiCategoriesContainer.style.display = 'block';
            } else { // Swagger
                url = '/list-swagger-tags';
                container = swaggerTagsContainer;
                yapiCategoriesContainer.style.display = 'none';
                swaggerTagsContainer.style.display = 'block';
            }

            container.innerHTML = '<p>正在加载...</p>';

            try {
                const response = await fetch(url, {
                    method: 'POST',
                    body: formData, // Send FormData directly
                });

                if (!response.ok) {
                    const errorData = await response.json().catch(() => ({ error: '无法解析错误响应' }));
                    throw new Error(errorData.error || `请求 ${specType} 分类/标签时出错`);
                }

                const data = await response.json();
                renderItemsList(container, data, specType); // Using a simplified renderer
            } catch (error) {
                console.error(`请求${specType}分类时出错:`, error);
                container.innerHTML = `<p class="error">加载失败: ${error.message}</p>`;
            }
        });
    }

    form.addEventListener('submit', async (event) => {
        event.preventDefault();
        logOutput.value = '正在开始测试...\n';
        resultsContainer.innerHTML = '';
    
        // FormData will correctly handle all form fields, including the file upload
        const formData = new FormData(form);
    
        try {
            const response = await fetch('/run-tests', {
                method: 'POST',
                // For FormData, the browser sets the Content-Type to multipart/form-data with the correct boundary.
                // Do not set the 'Content-Type' header manually.
                body: formData,
            });
    
            const result = await response.json();
    
            if (!response.ok) {
                // Try to parse the error, provide a fallback message.
                const errorMessage = result.error || '运行测试时发生未知错误';
                logOutput.value += `\n错误: ${errorMessage}`;
                throw new Error(errorMessage);
            }
    
            // Restore summary to the log output
            logOutput.value += '\n测试执行完成。\n\n';
            logOutput.value += '--- 测试摘要 ---\n';
            logOutput.value += JSON.stringify(result.summary, null, 2);
    
            displayResults(result);
    
        } catch (error) {
            console.error('运行测试时捕获到错误:', error);
            logOutput.value += `\n\n发生严重错误: ${error.message}`;
            resultsContainer.innerHTML = `<p class="error">测试运行失败: ${error.message}</p>`;
        }
    });

    // A simplified function to render categories/tags as a list
    function renderItemsList(container, items, type) {
        if (!items || items.length === 0) {
            container.innerHTML = '<p>未找到任何项。</p>';
            return;
        }
        let html = `<h4>${type} ${type === 'YAPI' ? '分类' : '标签'}:</h4><ul>`;
        items.forEach(item => {
            html += `<li><strong>${item.name}</strong>: ${item.description || '无描述'}</li>`;
        });
        html += '</ul>';
        container.innerHTML = html;
    }

    function displayResults(result) {
        // Per user request, only show download links and remove the summary view.
        let linksHtml = '<h3>下载报告</h3>';
        if (result.summary_report_path) {
            linksHtml += `<p><a href="${result.summary_report_path}" target="_blank" class="report-link">摘要报告 (JSON)</a></p>`;
        }
        if (result.details_report_path) {
            linksHtml += `<p><a href="${result.details_report_path}" target="_blank" class="report-link">API 调用详情 (Markdown)</a></p>`;
        }
        
        if (!result.summary_report_path && !result.details_report_path) {
            linksHtml += '<p>没有可用的报告文件。</p>';
        }

        resultsContainer.innerHTML = linksHtml;
    }
});

// The old functions fetchYapiCategories, fetchSwaggerTags, and renderCheckboxes are no longer needed 
// and should be removed if they exist elsewhere in this file.