document.addEventListener('DOMContentLoaded', () => {
    const generateBtn = document.getElementById('generate-btn');
    const topicInput = document.getElementById('topic');
    const loadingSpinner = document.getElementById('loading');
    const storyContainer = document.getElementById('story-container');
    const storyContent = document.getElementById('story-content');
    const storyTitle = document.getElementById('story-title');

    // Initialize counters
    let reads = 0;
    let votes = 0;
    let comments = 0;

    // Animate counter function
    const animateCounter = (element, start, end, duration) => {
        let startTimestamp = null;
        const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
            const current = Math.floor(progress * (end - start) + start);
            element.textContent = current;
            if (progress < 1) {
                window.requestAnimationFrame(step);
            }
        };
        window.requestAnimationFrame(step);
    };

    // Add hover effect to story container
    storyContainer.addEventListener('mouseenter', () => {
        storyContainer.style.transform = 'translateY(-5px)';
        storyContainer.style.boxShadow = '0 6px 25px rgba(0, 0, 0, 0.15)';
    });

    storyContainer.addEventListener('mouseleave', () => {
        storyContainer.style.transform = 'translateY(0)';
        storyContainer.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.1)';
    });

    // Handle story generation
    generateBtn.addEventListener('click', async () => {
        const topic = topicInput.value.trim();
        if (!topic) {
            topicInput.classList.add('shake');
            setTimeout(() => topicInput.classList.remove('shake'), 500);
            return;
        }

        // Disable button and show loading
        generateBtn.disabled = true;
        generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
        loadingSpinner.style.display = 'block';
        storyContainer.style.display = 'none';

        try {
            const response = await fetch('/generate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ topic }),
            });

            const data = await response.json();

            if (response.ok) {
                // Format and display story
                storyTitle.textContent = topic.charAt(0).toUpperCase() + topic.slice(1);
                storyContent.innerHTML = formatStoryText(data.story);
                
                // Show story with animation
                storyContainer.style.display = 'block';
                storyContainer.style.opacity = '0';
                storyContainer.style.transform = 'translateY(20px)';
                
                // Trigger reflow
                storyContainer.offsetHeight;
                
                // Add animation
                storyContainer.style.transition = 'all 0.5s ease-out';
                storyContainer.style.opacity = '1';
                storyContainer.style.transform = 'translateY(0)';

                // Animate counters
                reads += Math.floor(Math.random() * 50) + 10;
                votes += Math.floor(Math.random() * 20) + 5;
                comments += Math.floor(Math.random() * 10) + 2;

                animateCounter(document.querySelector('.reads .count'), 0, reads, 1500);
                animateCounter(document.querySelector('.votes .count'), 0, votes, 1500);
                animateCounter(document.querySelector('.comments .count'), 0, comments, 1500);

                // Scroll to story
                storyContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
            } else {
                throw new Error(data.error || 'Failed to generate story');
            }
        } catch (error) {
            showError('Error generating story: ' + error.message);
        } finally {
            loadingSpinner.style.display = 'none';
            generateBtn.disabled = false;
            generateBtn.innerHTML = '<span class="btn-text">Generate Story</span><i class="fas fa-magic"></i>';
        }
    });

    // Handle action buttons
    document.querySelector('.vote-btn').addEventListener('click', function() {
        this.classList.toggle('voted');
        if (this.classList.contains('voted')) {
            votes++;
            this.style.backgroundColor = '#FF8F00';
            this.style.color = 'white';
        } else {
            votes--;
            this.style.backgroundColor = 'white';
            this.style.color = '#333';
        }
        document.querySelector('.votes .count').textContent = votes;
    });

    document.querySelector('.share-btn').addEventListener('click', () => {
        // Create a temporary input to copy the URL
        const input = document.createElement('input');
        input.value = window.location.href;
        document.body.appendChild(input);
        input.select();
        document.execCommand('copy');
        document.body.removeChild(input);
        
        // Show copied notification
        const shareBtn = document.querySelector('.share-btn');
        const originalText = shareBtn.innerHTML;
        shareBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
        setTimeout(() => {
            shareBtn.innerHTML = originalText;
        }, 2000);
    });

    // Format story text
    function formatStoryText(text) {
        return text
            .split('\n')
            .filter(para => para.trim())
            .map(para => `<p class="story-paragraph">${para}</p>`)
            .join('');
    }

    // Show error message
    function showError(message) {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message';
        errorDiv.innerHTML = `<i class="fas fa-exclamation-circle"></i> ${message}`;
        document.querySelector('.input-section').appendChild(errorDiv);
        setTimeout(() => errorDiv.remove(), 5000);
    }

    // Enable enter key to generate story
    topicInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            generateBtn.click();
        }
    });

    // Add input animations
    topicInput.addEventListener('focus', () => {
        document.querySelector('.input-wrapper').style.transform = 'scale(1.02)';
    });

    topicInput.addEventListener('blur', () => {
        document.querySelector('.input-wrapper').style.transform = 'scale(1)';
    });
});