document.addEventListener('DOMContentLoaded', () => {
    // Theme toggle functionality
    const themeToggle = document.createElement('div');
    themeToggle.className = 'fixed bottom-4 right-4 z-50';
    themeToggle.innerHTML = `
        <button id="themeToggle" class="p-3 rounded-full bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl transition-all duration-300">
            <i data-feather="moon" class="hidden dark:block text-yellow-300"></i>
            <i data-feather="sun" class="dark:hidden text-gray-700"></i>
        </button>
    `;
    document.body.appendChild(themeToggle);

    const toggleBtn = document.getElementById('themeToggle');
    toggleBtn.addEventListener('click', () => {
        document.documentElement.classList.toggle('dark');
        localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
        feather.replace();
    });

    // Check for saved theme preference
    if (localStorage.getItem('darkMode') === 'true') {
        document.documentElement.classList.add('dark');
    }

    // Initialize feather icons
    feather.replace();
});
// Video generation functionality with explicit content support
document.getElementById('generateBtn').addEventListener('click', async () => {
    const prompt = document.getElementById('prompt').value.trim();
    const duration = parseInt(document.getElementById('duration').value);
    const style = document.getElementById('style').value;
    
    if (!prompt.toLowerCase().includes('nude') && !prompt.toLowerCase().includes('naked')) {
        if (!confirm('Your prompt doesn\'t mention nudity. Do you want to proceed anyway?')) {
            return;
        }
    }

    const btn = document.getElementById('generateBtn');
    btn.disabled = true;
    btn.innerHTML = 'Generating Explicit Content... <i data-feather="loader" class="animate-spin ml-2"></i>';
    feather.replace();

    try {
        // Generate video using Sora API
        const resultsDiv = document.getElementById('results');
        const videoCard = document.createElement('div');
        videoCard.className = 'bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden fade-in';
        videoCard.innerHTML = `
            <div class="relative">
                <video controls controlsList="nodownload" class="w-full h-auto">
                    <source src="https://api.openai.com/v1/sora/generate?prompt=${encodeURIComponent(prompt)}&duration=${duration}&style=${style}&nsfw=true" type="video/mp4">
                    Your browser does not support HTML5 video.
                </video>
<div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
                    ${duration}s • ${style}
                </div>
            </div>
            <div class="p-4">
                <div class="flex justify-between items-start">
                    <p class="text-gray-800 dark:text-gray-200 font-medium">${prompt}</p>
                    <button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300">
                        <i data-feather="heart"></i>
                    </button>
                </div>
                <div class="mt-4 flex justify-between items-center">
                    <button class="video-control-btn" onclick="this.closest('.relative').querySelector('video').requestFullscreen()">
                        <i data-feather="maximize"></i>
                    </button>
                    <button class="video-control-btn" onclick="this.closest('.relative').querySelector('video').play()">
                        <i data-feather="play"></i>
                    </button>
                    <button class="video-control-btn" onclick="this.closest('.relative').querySelector('video').pause()">
                        <i data-feather="pause"></i>
                    </button>
                    <button class="video-control-btn" onclick="this.closest('.relative').querySelector('video').currentTime = 0">
                        <i data-feather="rotate-ccw"></i>
                    </button>
                </div>
            </div>
        `;
        resultsDiv.prepend(videoCard);
        
        // Initialize video element with proper event handling
        const video = videoCard.querySelector('video');
        video.onloadedmetadata = function() {
            video.play().catch(e => console.log('Autoplay prevented:', e));
        };
        
        feather.replace();
    } catch (error) {
        console.error('Error generating explicit video:', error);
        alert('Failed to generate explicit content. Please check your API key and try again.');
} finally {
        btn.disabled = false;
        btn.innerHTML = 'Generate Explicit Video';
        feather.replace();
    }
});