document.addEventListener('DOMContentLoaded', function () {
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('csv-file');
    const fileNameDisplay = document.getElementById('file-name-display');
    const uploadForm = document.getElementById('upload-form');
    const resultsSection = document.getElementById('results-section');
    const analysisOutput = document.getElementById('analysis-output');
    const submitButton = uploadForm.querySelector('button[type="submit"]');
    const spinner = submitButton.querySelector('.spinner-border');

    // Open file dialog when drop zone is clicked
    dropZone.addEventListener('click', () => fileInput.click());

    // Drag and drop events
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('drag-over');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('drag-over');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('drag-over');
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            updateFileName();
        }
    });

    // Update file name display on change
    fileInput.addEventListener('change', updateFileName);

    function updateFileName() {
        if (fileInput.files.length > 0) {
            fileNameDisplay.textContent = fileInput.files[0].name;
        } else {
            fileNameDisplay.textContent = 'No file selected';
        }
    }

    // Handle form submission
    uploadForm.addEventListener('submit', function (e) {
        e.preventDefault();

        if (fileInput.files.length === 0) {
            alert('Please select a CSV file to analyze.');
            return;
        }

        // Show spinner and disable button
        spinner.classList.remove('d-none');
        submitButton.disabled = true;

        // --- FAKE LOADER FOR DEMO --- 
        // In the next step, we will replace this with a real AJAX call to the backend.
        setTimeout(() => {
            // Hide spinner and re-enable button
            spinner.classList.add('d-none');
            submitButton.disabled = false;

            // Show results section with a placeholder message
            resultsSection.style.display = 'block';
            analysisOutput.innerHTML = `
                <div class="text-center p-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-3">AI is analyzing your data... This will be implemented in the next step.</p>
                </div>
            `;
            // Scroll to results
            resultsSection.scrollIntoView({ behavior: 'smooth' });

        }, 2000);
    });
});