window.addEventListener('load', function() {

    // 1. Get references to ALL our interactive elements
    const music = document.getElementById('bg-music');
    const soundOnBtn = document.getElementById('sound-on-btn');
    const soundOffBtn = document.getElementById('sound-off-btn');
    const welcomeOverlay = document.getElementById('welcome-overlay');
    const enterButton = document.getElementById('enter-button');

    // The path for downloading reports is still relative to the HTML file's location.
    const reportPath = "./网页服务/分析报告/";

    function fetchAndRenderReports() {
        return fetch('/reports') // USE RELATIVE PATH
            .then(response => response.json())
            .then(reports => {
                const reportList = document.getElementById('report-list');
                reportList.innerHTML = '';
                if (reports.length === 0) {
                    reportList.innerHTML = '<li>暂无分析报告</li>';
                }
                reports.forEach(report => {
                    const listItem = document.createElement('li');
                    const link = document.createElement('a');
                    // This URL is tricky. Since the final reports are served by Flask under a specific route,
                    // we should make this an absolute path from the server root.
                    link.href = `/网页服务/分析报告/${report.name}`;
                    link.textContent = report.name.replace(/_analysis\.html$/, '').replace(/_/, ' ') + ' 的分析报告';
                    link.setAttribute('download', report.name);
                    listItem.appendChild(link);
                    reportList.appendChild(listItem);
                });
                return reports;
            })
            .catch(error => {
                console.error('Error fetching reports:', error);
                const reportList = document.getElementById('report-list');
                reportList.innerHTML = '<li>获取报告列表失败，请检查服务是否运行。</li>';
                return Promise.reject(error);
            });
    }


    // 2. Set the initial state: Music is off, sound-off icon is ready.
    music.muted = true;
    soundOnBtn.style.display = 'none';
    soundOffBtn.style.display = 'block';


    // 3. Main Logic: When user clicks the "Enter" button
    enterButton.addEventListener('click', function() {
        // Fade out and remove the overlay
        welcomeOverlay.style.opacity = '0';
        setTimeout(() => {
            welcomeOverlay.style.display = 'none';
        }, 500);

        music.muted = false;
        music.play();

        soundOnBtn.style.display = 'block';
        soundOffBtn.style.display = 'none';
    });


    // 4. Click event listener for the 'Sound On' button (to MUTE)
    soundOnBtn.addEventListener('click', function(e) {
        e.preventDefault();
        music.muted = true;
        soundOnBtn.style.display = 'none';
        soundOffBtn.style.display = 'block';
    });

    // 5. Click event listener for the 'Sound Off' button (to UNMUTE)
    soundOffBtn.addEventListener('click', function(e) {
        e.preventDefault();
        music.muted = false;
        music.play();
        soundOffBtn.style.display = 'none';
        soundOnBtn.style.display = 'block';
    });

    // --- Modal Logic ---
    const analysisBtn = document.querySelector('a[href="#analysis"]');
    const downloadBtn = document.querySelector('a[href="#download"]');
    const analysisModal = document.getElementById('analysis-modal');
    const downloadModal = document.getElementById('download-modal');
    const closeBtns = document.querySelectorAll('.close-btn');

    analysisBtn.addEventListener('click', (e) => {
        e.preventDefault();
        analysisModal.style.display = 'block';
    });

    downloadBtn.addEventListener('click', (e) => {
        e.preventDefault();
        fetchAndRenderReports();
        downloadModal.style.display = 'block';
    });

    closeBtns.forEach(btn => {
        btn.onclick = function() {
            analysisModal.style.display = "none";
            downloadModal.style.display = "none";
            analysisStatus.textContent = '';
        }
    });

    window.onclick = function(event) {
        if (event.target == analysisModal) {
            analysisModal.style.display = "none";
        }
        if (event.target == downloadModal) {
            downloadModal.style.display = "none";
        }
    }

    // --- Analysis Logic with Debugging ---
    const startAnalysisBtn = document.getElementById('start-analysis-btn');
    const fileUpload = document.getElementById('file-upload');
    const analysisStatus = document.getElementById('analysis-status');

    startAnalysisBtn.addEventListener('click', () => {
        if (fileUpload.files.length === 0) {
            analysisStatus.textContent = '请先选择一个文件！';
            return;
        }

        analysisStatus.textContent = '正在上传并分析文件...';
        const formData = new FormData();
        const file = fileUpload.files[0];
        formData.append('file', file);

        // Use a relative path for the fetch request
        fetch('/analyze', { method: 'POST', body: formData })
            .then(uploadRes => {
                if (!uploadRes.ok) {
                    // Try to get more error info from the server response
                    return uploadRes.json().then(errorBody => {
                        throw new Error(`文件上传失败: ${errorBody.error || uploadRes.statusText}`);
                    }).catch(() => {
                        throw new Error(`文件上传失败 (状态码: ${uploadRes.status})`);
                    });
                }
                return uploadRes.json();
            })
            .then(data => {
                alert('文件上传成功，后台已开始分析！');
                analysisModal.style.display = 'none';
                analysisStatus.textContent = '';
                // You can add polling logic back here if needed
            })
            .catch(error => {
                console.error('[DEBUG] Analysis process failed:', error);
                analysisStatus.textContent = `上传或分析失败: ${error.message}`;
            });
    });

});