document.addEventListener('DOMContentLoaded', function() {
    // File upload handling
    const fileInput = document.getElementById('image-upload');
    const uploadArea = document.querySelector('.border-dashed');
    
    fileInput.addEventListener('change', function(e) {
        if (e.target.files.length) {
            const file = e.target.files[0];
            const reader = new FileReader();
            
            reader.onload = function(event) {
                const previewArea = document.querySelector('.aspect-w-16');
                previewArea.innerHTML = `
                    <img src="${event.target.result}" alt="Preview" class="w-full h-full object-cover rounded-lg">
                    <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
                        <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-6 rounded-lg transition-all duration-300">
                            <i data-feather="play" class="inline mr-2"></i> Preview Video
                        </button>
                    </div>
                `;
                feather.replace();
            };
            
            reader.readAsDataURL(file);
        }
    });

    // Drag and drop functionality
    uploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('border-pink-500');
        this.classList.remove('border-gray-600');
    });

    uploadArea.addEventListener('dragleave', function() {
        this.classList.remove('border-pink-500');
        this.classList.add('border-gray-600');
    });

    uploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('border-pink-500');
        this.classList.add('border-gray-600');
        
        if (e.dataTransfer.files.length) {
            fileInput.files = e.dataTransfer.files;
            const event = new Event('change');
            fileInput.dispatchEvent(event);
        }
    });

    // Generate button functionality
    const generateBtn = document.querySelector('button.bg-gradient-to-r');
    generateBtn.addEventListener('click', function() {
        if (!fileInput.files.length) {
            alert('Please upload an image first');
            return;
        }
        
        // Simulate processing
        this.innerHTML = '<span class="animate-pulse">Processing...</span>';
        this.disabled = true;
        
        setTimeout(() => {
            this.innerHTML = 'Generate Uncensored Video';
            this.disabled = false;
        // Simulate successful generation with analysis
        const previewArea = document.querySelector('.aspect-w-16');
        const prompt = document.getElementById('ai-prompt').value;
        
        previewArea.innerHTML = `
            <div class="w-full h-full flex flex-col">
                <video controls autoplay class="w-full h-4/5 object-cover rounded-t-lg">
                    <source src="http://static.photos/abstract/640x360/42" type="video/mp4">
                </video>
                <div class="bg-gray-700 p-4 rounded-b-lg h-1/5 overflow-auto">
                    <h3 class="font-bold text-pink-500 mb-2">AI Analysis Results</h3>
                    <div class="text-sm">
                        <p><span class="font-semibold">Prompt:</span> ${prompt || 'No prompt provided'}</p>
                        <p><span class="font-semibold">Style:</span> ${document.querySelector('select').value}</p>
                        <p><span class="font-semibold">Content Freedom:</span> ${document.querySelector('input[name="freedom"]:checked').nextElementSibling.textContent.trim()}</p>
                        <p><span class="font-semibold">NSFW Enhancement:</span> ${document.querySelector('input[type="checkbox"]').checked ? 'Enabled' : 'Disabled'}</p>
                    </div>
                </div>
            </div>
        `;
}, 3000);
    });
});