document.addEventListener('DOMContentLoaded', function() {
    // DOM Elements
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const uploadBtn = document.getElementById('uploadBtn');
    const previewContainer = document.getElementById('previewContainer');
    const imagePreview = document.getElementById('imagePreview');
    const durationSlider = document.getElementById('duration');
    const durationValue = document.getElementById('durationValue');
    const generateBtn = document.getElementById('generateBtn');
    const resultsSection = document.getElementById('resultsSection');
    const videoGrid = document.getElementById('videoGrid');

    // Event Listeners
    uploadBtn.addEventListener('click', () => fileInput.click());
    
    fileInput.addEventListener('change', handleFileSelect);
    dropZone.addEventListener('dragover', handleDragOver);
    dropZone.addEventListener('dragleave', handleDragLeave);
    dropZone.addEventListener('drop', handleDrop);
    
    durationSlider.addEventListener('input', updateDurationValue);
    generateBtn.addEventListener('click', generateVideo);

    // Functions
    function handleFileSelect(e) {
        const file = e.target.files[0];
        if (file && isImageFile(file)) {
            displayPreview(file);
        } else {
            alert('Please select a valid image file (JPEG, PNG, GIF, etc.)');
        }
    }

    function handleDragOver(e) {
        e.preventDefault();
        e.stopPropagation();
        dropZone.classList.add('highlight');
    }

    function handleDragLeave(e) {
        e.preventDefault();
        e.stopPropagation();
        dropZone.classList.remove('highlight');
    }

    function handleDrop(e) {
        e.preventDefault();
        e.stopPropagation();
        dropZone.classList.remove('highlight');
        
        const file = e.dataTransfer.files[0];
        if (file && isImageFile(file)) {
            displayPreview(file);
            fileInput.files = e.dataTransfer.files; // Update the file input
        } else {
            alert('Please drop a valid image file (JPEG, PNG, GIF, etc.)');
        }
    }

    function isImageFile(file) {
        const acceptedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
        return file && (acceptedTypes.includes(file.type) || file.type.startsWith('image/'));
    }
function displayPreview(file) {
    const reader = new FileReader();
    reader.onload = function(e) {
        imagePreview.src = e.target.result;
        previewContainer.classList.remove('hidden');
        dropZone.style.borderColor = '#6366f1';
    };
    reader.readAsDataURL(file);
}
function updateDurationValue() {
        durationValue.textContent = `${durationSlider.value}s`;
    }
function generateVideo() {
    if (!fileInput.files || fileInput.files.length === 0) {
        alert('Please upload an image first');
        return;
    }

    const file = fileInput.files[0];
    if (!isImageFile(file)) {
        alert('Please upload a valid image file');
        return;
    }
    const prompt = document.getElementById('prompt').value.trim();
    if (!prompt) {
        alert('Please enter a video prompt');
        return;
    }

    // Get selected style and duration
    const style = document.getElementById('style').value;
    const duration = durationSlider.value;
// Simulate API call with loading state
        generateBtn.disabled = true;
        generateBtn.innerHTML = '<div class="loading-spinner mr-2 w-4 h-4 border-2 border-white border-t-transparent rounded-full"></div> Generating...';
        
        // Simulate processing delay
        setTimeout(() => {
            // Reset button
            generateBtn.disabled = false;
            generateBtn.innerHTML = '<i data-feather="play" class="mr-2"></i> Generate Video';
            feather.replace();
            
            // Show results section
            resultsSection.style.display = 'block';
            
            // Add demo video (in a real app, this would be the actual generated video)
            addVideoToGrid('AI Generated Video', 'https://example.com/video.mp4');
            
            // Scroll to results
            resultsSection.scrollIntoView({ behavior: 'smooth' });
        }, 3000);
    }

    function addVideoToGrid(title, url) {
        const videoCard = document.createElement('div');
        videoCard.className = 'video-card bg-white rounded-xl shadow-md overflow-hidden';
        videoCard.innerHTML = `
            <div class="relative pt-[56.25%]">
                <div class="absolute inset-0 bg-gray-200 flex items-center justify-center">
                    <i data-feather="play" class="w-12 h-12 text-primary-500"></i>
                </div>
            </div>
            <div class="p-4">
                <h3 class="font-medium text-gray-900 mb-1">${title}</h3>
                <p class="text-sm text-gray-500">Generated just now</p>
                <div class="mt-3 flex space-x-2">
                    <button class="text-primary-500 hover:text-primary-600 text-sm font-medium flex items-center">
                        <i data-feather="download" class="w-4 h-4 mr-1"></i> Download
                    </button>
                    <button class="text-secondary-500 hover:text-secondary-600 text-sm font-medium flex items-center">
                        <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Share
                    </button>
                </div>
            </div>
        `;
        videoGrid.prepend(videoCard);
        feather.replace();
    }

    // Initialize
    updateDurationValue();
});