// Shared JavaScript across all pages

// File upload handling
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('pdfUpload');
    
    if (fileInput) {
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                handleFileUpload(file);
            }
        });
    }

    // Drag and drop functionality
    const uploadZone = document.querySelector('.border-dashed');
    if (uploadZone) {
        uploadZone.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.classList.add('border-indigo-400', 'bg-indigo-50');
        });

        uploadZone.addEventListener('dragleave', function(e) {
            e.preventDefault();
            this.classList.remove('border-indigo-400', 'bg-indigo-50');
        });

        uploadZone.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('border-indigo-400', 'bg-indigo-50');
            
            const files = e.dataTransfer.files;
            if (files.length > 0 && files[0].type === 'application/pdf') {
                handleFileUpload(files[0]);
            } else {
                alert('Please upload a valid PDF file.');
            }
        });
    }
});

function handleFileUpload(file) {
    console.log('File selected:', file.name);
    
    // Show loading state
    const uploadZone = document.querySelector('.border-dashed');
    if (uploadZone) {
        uploadZone.innerHTML = `
            <div class="flex flex-col items-center justify-center py-12">
                <div class="spinner mb-4"></div>
                <h3 class="text-xl font-semibold text-gray-800 mb-2">Processing your PDF...</h3>
                <p class="text-gray-500">This may take a few seconds</p>
            </div>
        `;
        
        // Simulate processing (in real app, this would be API call)
        setTimeout(() => {
            showSuccessMessage(file);
        }, 3000);
    }
}

function showSuccessMessage(file) {
    const uploadZone = document.querySelector('.border-dashed');
    if (uploadZone) {
        uploadZone.innerHTML = `
            <div class="flex flex-col items-center justify-center py-8">
                <i data-feather="check-circle" class="w-16 h-16 text-green-500 mb-4"></i>
                <h3 class="text-2xl font-semibold text-gray-800 mb-2">Compression Complete! 🎉</h3>
                <p class="text-gray-600 mb-4">Your PDF has been optimized successfully!</p>
                <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
                    <div class="flex justify-between items-center">
                        <span class="text-green-800">Original size:</span>
                        <span class="text-green-800 font-semibold">${(Math.random() * 5 + 1).toFixed(1)} MB</span>
                    </div>
                    <div class="flex justify-between items-center mt-2">
                        <span class="text-green-800">Compressed size:</span>
                        <span class="text-green-800 font-semibold">${(Math.random() * 2).toFixed(1)} MB</span>
                    </div>
                    <div class="flex justify-between items-center mt-2">
                        <span class="text-green-800">Reduction:</span>
                        <span class="text-green-800 font-semibold">${Math.floor(Math.random() * 60 + 30)}%</span>
                    </div>
                </div>
                <button class="bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
                    Download Compressed PDF
                </button>
                <button onclick="resetUpload()" class="text-indigo-600 hover:text-indigo-800 mt-4 font-medium">
                    Compress Another PDF
                </button>
            </div>
        `;
        feather.replace();
    }
}

function resetUpload() {
    const uploadZone = document.querySelector('.border-dashed');
    if (uploadZone) {
        uploadZone.innerHTML = `
            <div class="flex flex-col items-center justify-center py-12">
                <i data-feather="upload-cloud" class="w-16 h-16 text-indigo-500 mb-4"></i>
                <h3 class="text-2xl font-semibold text-gray-800 mb-2">Drop your PDF here</h3>
                <p class="text-gray-500 mb-6">or click to browse your files</p>
                <input type="file" id="pdfUpload" accept=".pdf" class="hidden">
                <button onclick="document.getElementById('pdfUpload').click()" 
                        class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
                    Choose PDF File
                </button>
            </div>
        `;
        feather.replace();
        
        // Re-attach event listeners
        const fileInput = document.getElementById('pdfUpload');
        if (fileInput) {
            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    handleFileUpload(file);
                }
            });
        }
    }
}

// Initialize tooltips and other UI enhancements
document.addEventListener('DOMContentLoaded', function() {
    console.log('PDF Squeeze Pro - OCR Magic Compressor loaded!');
});