document.addEventListener('DOMContentLoaded', function() {
    // Style button actions
    const styleButtons = document.querySelectorAll('.style-btn');
    const promptTextarea = document.getElementById('prompt');
    
    const stylePresets = {
        realistic: "photorealistic, high detail, 8k, sharp focus",
        anime: "anime style, masterpiece, best quality, ultra-detailed, vibrant colors, detailed eyes",
        manga: "monochrome, manga panel, black and white, ink lines, high contrast, detailed shading",
        hentai: "nsfw hentai, explicit anatomy, ahegao, tears of pleasure, ultra-detailed, dynamic pose"
    };

    styleButtons.forEach(button => {
        button.addEventListener('click', function() {
            const style = this.dataset.style;
            if (promptTextarea.value.includes(stylePresets[style])) {
                return; // Don't add duplicate styles
            }
            promptTextarea.value = promptTextarea.value.trim() + (promptTextarea.value ? ", " : "") + stylePresets[style];
        });
    });

    // Enhance prompt button
    document.getElementById('enhance-btn').addEventListener('click', function() {
        const aspect = document.getElementById('aspect').value;
        const arSuffix = aspect === '1:1' ? '--ar 1:1' : aspect === '16:9' ? '--ar 16:9' : 
                         aspect === '9:16' ? '--ar 9:16' : '--ar 4:3';
        
        const enhancedPrompt = "masterpiece, best quality, ultra-detailed, 8k, highly intricate, sharp focus, " + 
                               promptTextarea.value.trim() + ` ${arSuffix} --v 6`;
        
        promptTextarea.value = enhancedPrompt;
    });

    // Random prompt button
    document.getElementById('random-btn').addEventListener('click', function() {
        const randomPrompts = [
            "nsfw hentai succubus in fantasy world",
            "cyberpunk anime hacker girl",
            "detailed manga fight scene",
            "realistic portrait of a seductive vampire",
            "ahegao anime face closeup with tears and tongue out",
            "futuristic sci-fi armor with glowing details",
            "fantasy elf warrior with intricate armor design",
            "detailed anime character sheet front and back view"
        ];
        
        const randomIndex = Math.floor(Math.random() * randomPrompts.length);
        promptTextarea.value = randomPrompts[randomIndex];
    });

    // Generate button
    document.getElementById('generate-btn').addEventListener('click', function() {
        const btn = this;
        const originalText = btn.innerHTML;
        
        // Show loading state
        btn.innerHTML = '<span class="animate-pulse">Generating uncensored art...</span>';
        btn.disabled = true;
        
        // Simulate generation (in a real app, this would call an API)
        setTimeout(() => {
            // Mock response
            const aspect = document.getElementById('aspect').value;
            const dimensions = {
                '1:1': '512x512',
                '16:9': '1024x576',
                '9:16': '576x1024',
                '4:3': '768x576'
            }[aspect];
            
            const category = promptTextarea.value.toLowerCase().includes('anime') || 
                            promptTextarea.value.toLowerCase().includes('hentai') ? 
                            'anime' : 'fantasy';
            
            const numImages = parseInt(document.getElementById('batch').value);
            const images = [];
            
            for (let i = 0; i < numImages; i++) {
                const seed = Math.floor(Math.random() * 1000);
                images.push({
                    url: `http://static.photos/${category}/${dimensions}/${seed + i}`,
                    prompt: promptTextarea.value,
                    seed: seed + i
                });
            }
            
            updateGallery(images);
            updateHistory(images);
            
            // Reset button
            btn.innerHTML = originalText;
            btn.disabled = false;
        }, 2000);
    });

    // Update gallery with generated images
    function updateGallery(images) {
        const gallery = document.getElementById('gallery');
        gallery.innerHTML = '';
        
        images.forEach(img => {
            const card = document.createElement('div');
            card.className = 'image-card bg-gray-700 rounded-lg overflow-hidden shadow-md';
            
            card.innerHTML = `
                <img src="${img.url}" alt="Generated image" class="w-full h-auto">
                <div class="p-4">
                    <div class="flex justify-between items-center">
                        <button class="download-btn bg-sky-600 hover:bg-sky-700 px-3 py-1 rounded text-sm">
                            <i data-feather="download"></i> Download
                        </button>
                        <span class="text-xs text-gray-400">Seed: ${img.seed}</span>
                    </div>
                </div>
            `;
            
            gallery.appendChild(card);
        });
        
        feather.replace();
        
        // Add download functionality
        document.querySelectorAll('.download-btn').forEach((btn, index) => {
            btn.addEventListener('click', () => {
                // In a real app, this would trigger a download
                console.log(`Downloading image ${index + 1}`);
            });
        });
    }

    // Update generation history
    function updateHistory(images) {
        const history = document.getElementById('history');
        
        // Clear "no history" message if present
        if (history.querySelector('.italic')) {
            history.innerHTML = '';
        }
        
        // Keep only last 5 items
        const currentItems = history.querySelectorAll('.history-item');
        if (currentItems.length >= 5) {
            history.removeChild(currentItems[currentItems.length - 1]);
        }
        
        // Add new item at the top
        const historyItem = document.createElement('div');
        historyItem.className = 'history-item bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-gray-600 transition';
        historyItem.innerHTML = `
            <p class="text-sm truncate">"${images[0].prompt.substring(0, 50)}${images[0].prompt.length > 50 ? '...' : ''}"</p>
            <div class="flex justify-between items-center mt-2">
                <span class="text-xs text-gray-400">${new Date().toLocaleTimeString()}</span>
                <span class="text-xs text-gray-400">${images.length} image${images.length > 1 ? 's' : ''}</span>
            </div>
        `;
        
        history.insertBefore(historyItem, history.firstChild);
        
        // Make history items clickable to re-use prompts
        historyItem.addEventListener('click', () => {
            promptTextarea.value = images[0].prompt;
        });
    }
});