document.addEventListener('DOMContentLoaded', function() {
    const uploadForm = document.getElementById('uploadForm');
    const uploadBtn = document.getElementById('uploadBtn');
    const btnText = uploadBtn.querySelector('.btn-text');
    const loadingSpinner = uploadBtn.querySelector('.loading-spinner');
    const resultsSection = document.getElementById('resultsSection');
    const resultsContent = document.getElementById('resultsContent');
    const clearBtn = document.getElementById('clearBtn');
    const filenamesInput = document.getElementById('filenames');

    // Form submission handler
    uploadForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const filenames = filenamesInput.value.trim();
        if (!filenames) {
            alert('Please enter at least one filename');
            return;
        }

        // Show loading state
        setLoadingState(true);
        
        try {
            const formData = new FormData();
            formData.append('filenames', filenames);
            
            const response = await fetch('/upload', {
                method: 'POST',
                body: formData
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const results = await response.text();
            displayResults(results);
            
        } catch (error) {
            console.error('Upload error:', error);
            displayResults(`❌ Error: ${error.message}`);
        } finally {
            setLoadingState(false);
        }
    });

    // Clear results handler
    clearBtn.addEventListener('click', function() {
        resultsContent.textContent = '';
        resultsSection.style.display = 'none';
    });

    // Auto-resize textarea
    filenamesInput.addEventListener('input', function() {
        this.style.height = 'auto';
        this.style.height = Math.min(this.scrollHeight, 200) + 'px';
    });

    // Functions
    function setLoadingState(isLoading) {
        uploadBtn.disabled = isLoading;
        
        if (isLoading) {
            btnText.style.display = 'none';
            loadingSpinner.style.display = 'flex';
        } else {
            btnText.style.display = 'flex';
            loadingSpinner.style.display = 'none';
        }
    }

    function displayResults(results) {
        // Format results with proper styling
        const formattedResults = formatResults(results);
        resultsContent.innerHTML = formattedResults;
        resultsSection.style.display = 'block';
        
        // Scroll to results
        resultsSection.scrollIntoView({ 
            behavior: 'smooth', 
            block: 'start' 
        });
    }

    function formatResults(results) {
        if (!results) return '<span class="error">No results received</span>';
        
        return results.split('\n').map(line => {
            line = line.trim();
            if (!line) return '';
            
            if (line.startsWith('✅')) {
                return `<div class="success">${escapeHtml(line)}</div>`;
            } else if (line.startsWith('❌')) {
                return `<div class="error">${escapeHtml(line)}</div>`;
            } else if (line.startsWith('⏩')) {
                return `<div class="warning">${escapeHtml(line)}</div>`;
            } else {
                return `<div>${escapeHtml(line)}</div>`;
            }
        }).join('');
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Add some interactive effects
    const uploadCard = document.querySelector('.upload-card');
    
    // Add subtle hover effect to form elements
    const formElements = document.querySelectorAll('input, textarea, button');
    formElements.forEach(element => {
        element.addEventListener('focus', function() {
            uploadCard.style.transform = 'translateY(-2px)';
        });
        
        element.addEventListener('blur', function() {
            uploadCard.style.transform = 'translateY(-5px)';
        });
    });

    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Ctrl/Cmd + Enter to submit form
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            e.preventDefault();
            uploadForm.dispatchEvent(new Event('submit'));
        }
        
        // Escape to clear results
        if (e.key === 'Escape' && resultsSection.style.display !== 'none') {
            clearBtn.click();
        }
    });

    // Add tooltip for keyboard shortcuts
    const tooltip = document.createElement('div');
    tooltip.innerHTML = `
        <div style="position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.8); color: white; padding: 10px; border-radius: 8px; font-size: 0.8rem; z-index: 1000;">
            <div><kbd>Ctrl+Enter</kbd> Submit form</div>
            <div><kbd>Esc</kbd> Clear results</div>
        </div>
    `;
    
    // Show tooltip on first visit
    setTimeout(() => {
        document.body.appendChild(tooltip);
        setTimeout(() => {
            tooltip.style.opacity = '0';
            tooltip.style.transition = 'opacity 0.5s';
            setTimeout(() => tooltip.remove(), 500);
        }, 3000);
    }, 1000);
});