// Initialize Feather Icons
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
    
    // Theme toggle functionality
    const themeToggle = document.getElementById('theme-toggle');
    if (themeToggle) {
        themeToggle.addEventListener('click', function() {
            document.documentElement.classList.toggle('dark');
            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
        });
    }
    
    // Check for saved theme preference
    if (localStorage.getItem('theme') === 'dark' || 
        (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
    
    // Gallery interaction
    const galleryItems = document.querySelectorAll('.gallery-item');
    galleryItems.forEach(item => {
        item.addEventListener('click', function() {
            // Remove active class from all items
            galleryItems.forEach(i => i.classList.remove('ring-2', 'ring-primary'));
            
            // Add active class to clicked item
            this.classList.add('ring-2', 'ring-primary');
            
            // Update preview area with selected item
            const previewArea = document.querySelector('.preview-placeholder');
            if (previewArea) {
                previewArea.innerHTML = `
                    <div class="w-full h-full bg-gradient-to-br from-purple-900 to-blue-800 rounded-lg flex items-center justify-center">
                        <div class="text-center">
                            <i data-feather="check-circle" class="w-12 h-12 mx-auto text-white mb-2"></i>
                            <p class="text-white">Selected: ${this.querySelector('p').textContent}</p>
                        </div>
                    </div>
                `;
                feather.replace();
            }
        });
    });
    
    // Generate button animation
    const generateButtons = document.querySelectorAll('button.flex.items-center.justify-center');
    generateButtons.forEach(button => {
        button.addEventListener('click', function() {
            const originalText = this.innerHTML;
            this.innerHTML = '<i data-feather="loader" class="mr-2 animate-spin"></i> Generating...';
            feather.replace();
            
            // Simulate processing time
            setTimeout(() => {
                this.innerHTML = originalText;
                feather.replace();
            }, 2000);
        });
    });
});