/* ===== FUNCIONALIDADES ESPECÍFICAS PARA RESENHAS DE FILMES ===== */

// Aguarda o carregamento completo da página
document.addEventListener('DOMContentLoaded', function() {
    
    // === SISTEMA DE AVALIAÇÃO INTERATIVO === //
    initializeRatingSystem();
    
    // === GALERIA DE IMAGENS === //
    initializeImageGallery();
    
    // === BUSCA INTELIGENTE === //
    initializeSmartSearch();
    
    // === COMPARAÇÃO DE FILMES === //
    initializeMovieComparison();
    
    // === SISTEMA DE FAVORITOS === //
    initializeFavoriteSystem();
    
    // === COMPARTILHAMENTO SOCIAL === //
    initializeSocialSharing();
    
    // === LAZY LOADING PARA IMAGENS === //
    initializeLazyLoading();
    
    // === TOOLTIPS INFORMATIVOS === //
    initializeTooltips();
});

// === SISTEMA DE AVALIAÇÃO INTERATIVO === //
function initializeRatingSystem() {
    const ratingContainers = document.querySelectorAll('.interactive-rating');
    
    ratingContainers.forEach(container => {
        const stars = container.querySelectorAll('.star');
        let currentRating = 0;
        
        stars.forEach((star, index) => {
            star.addEventListener('mouseenter', () => {
                highlightStars(stars, index + 1);
            });
            
            star.addEventListener('mouseleave', () => {
                highlightStars(stars, currentRating);
            });
            
            star.addEventListener('click', () => {
                currentRating = index + 1;
                highlightStars(stars, currentRating);
                saveRating(container.dataset.movieId, currentRating);
                showRatingFeedback(currentRating);
            });
        });
    });
}

function highlightStars(stars, rating) {
    stars.forEach((star, index) => {
        if (index < rating) {
            star.style.color = '#ffd700';
            star.style.textShadow = '0 0 10px #ffd700';
        } else {
            star.style.color = '#ddd';
            star.style.textShadow = 'none';
        }
    });
}

function saveRating(movieId, rating) {
    const ratings = JSON.parse(localStorage.getItem('movieRatings') || '{}');
    ratings[movieId] = rating;
    localStorage.setItem('movieRatings', JSON.stringify(ratings));
}

function showRatingFeedback(rating) {
    const messages = {
        1: 'Terrível! 😞',
        2: 'Ruim 😕',
        3: 'Mediano 😐',
        4: 'Bom! 😊',
        5: 'Excelente! 🌟'
    };
    
    const feedback = document.createElement('div');
    feedback.className = 'rating-feedback';
    feedback.textContent = messages[rating];
    feedback.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: #28a745;
        color: white;
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        z-index: 1000;
        animation: slideInRight 0.3s ease;
    `;
    
    document.body.appendChild(feedback);
    
    setTimeout(() => {
        feedback.style.animation = 'slideOutRight 0.3s ease';
        setTimeout(() => feedback.remove(), 300);
    }, 2000);
}

// === GALERIA DE IMAGENS === //
function initializeImageGallery() {
    const galleryItems = document.querySelectorAll('.gallery-item');
    
    galleryItems.forEach(item => {
        item.addEventListener('click', () => {
            const img = item.querySelector('img');
            openLightbox(img.src, img.alt);
        });
    });
}

function openLightbox(src, alt) {
    const lightbox = document.createElement('div');
    lightbox.className = 'lightbox';
    lightbox.innerHTML = `
        <div class="lightbox-content">
            <span class="lightbox-close">&times;</span>
            <img src="${src}" alt="${alt}">
            <div class="lightbox-caption">${alt}</div>
        </div>
    `;
    
    lightbox.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.9);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2000;
        animation: fadeIn 0.3s ease;
    `;
    
    const content = lightbox.querySelector('.lightbox-content');
    content.style.cssText = `
        position: relative;
        max-width: 90%;
        max-height: 90%;
        text-align: center;
    `;
    
    const img = lightbox.querySelector('img');
    img.style.cssText = `
        max-width: 100%;
        max-height: 80vh;
        border-radius: 10px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    `;
    
    const closeBtn = lightbox.querySelector('.lightbox-close');
    closeBtn.style.cssText = `
        position: absolute;
        top: -40px;
        right: 0;
        color: white;
        font-size: 30px;
        cursor: pointer;
        z-index: 2001;
    `;
    
    const caption = lightbox.querySelector('.lightbox-caption');
    caption.style.cssText = `
        color: white;
        margin-top: 15px;
        font-size: 1.1em;
    `;
    
    document.body.appendChild(lightbox);
    
    // Fechar lightbox
    closeBtn.addEventListener('click', () => closeLightbox(lightbox));
    lightbox.addEventListener('click', (e) => {
        if (e.target === lightbox) closeLightbox(lightbox);
    });
    
    // Fechar com ESC
    document.addEventListener('keydown', function escHandler(e) {
        if (e.key === 'Escape') {
            closeLightbox(lightbox);
            document.removeEventListener('keydown', escHandler);
        }
    });
}

function closeLightbox(lightbox) {
    lightbox.style.animation = 'fadeOut 0.3s ease';
    setTimeout(() => lightbox.remove(), 300);
}

// === BUSCA INTELIGENTE === //
function initializeSmartSearch() {
    const searchInput = document.querySelector('input[name="q"]');
    if (!searchInput) return;
    
    let searchTimeout;
    const suggestions = document.createElement('div');
    suggestions.className = 'search-suggestions';
    suggestions.style.cssText = `
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #ddd;
        border-top: none;
        border-radius: 0 0 5px 5px;
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
        display: none;
    `;
    
    searchInput.parentElement.style.position = 'relative';
    searchInput.parentElement.appendChild(suggestions);
    
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const query = this.value.trim();
        
        if (query.length < 2) {
            suggestions.style.display = 'none';
            return;
        }
        
        searchTimeout = setTimeout(() => {
            showSearchSuggestions(query, suggestions);
        }, 300);
    });
    
    // Fechar sugestões ao clicar fora
    document.addEventListener('click', (e) => {
        if (!searchInput.parentElement.contains(e.target)) {
            suggestions.style.display = 'none';
        }
    });
}

function showSearchSuggestions(query, container) {
    // Simulação de sugestões baseadas em gêneros e termos populares
    const movieSuggestions = [
        'Ação', 'Aventura', 'Comédia', 'Drama', 'Ficção Científica',
        'Terror', 'Romance', 'Thriller', 'Animação', 'Documentário',
        'Marvel', 'DC Comics', 'Disney', 'Pixar', 'Studio Ghibli'
    ];
    
    const filtered = movieSuggestions.filter(item => 
        item.toLowerCase().includes(query.toLowerCase())
    );
    
    if (filtered.length === 0) {
        container.style.display = 'none';
        return;
    }
    
    container.innerHTML = filtered.map(item => `
        <div class="suggestion-item" style="padding: 10px; cursor: pointer; border-bottom: 1px solid #eee;">
            ${item}
        </div>
    `).join('');
    
    container.style.display = 'block';
    
    // Adicionar eventos de clique nas sugestões
    container.querySelectorAll('.suggestion-item').forEach(item => {
        item.addEventListener('click', () => {
            document.querySelector('input[name="q"]').value = item.textContent.trim();
            container.style.display = 'none';
        });
        
        item.addEventListener('mouseenter', () => {
            item.style.backgroundColor = '#f8f9fa';
        });
        
        item.addEventListener('mouseleave', () => {
            item.style.backgroundColor = 'white';
        });
    });
}

// === COMPARAÇÃO DE FILMES === //
function initializeMovieComparison() {
    const compareButtons = document.querySelectorAll('.compare-movie-btn');
    
    compareButtons.forEach(button => {
        button.addEventListener('click', () => {
            const movieData = {
                title: button.dataset.title,
                rating: button.dataset.rating,
                genre: button.dataset.genre,
                year: button.dataset.year
            };
            
            addToComparison(movieData);
        });
    });
}

function addToComparison(movieData) {
    let comparison = JSON.parse(localStorage.getItem('movieComparison') || '[]');
    
    // Evitar duplicatas
    if (comparison.find(movie => movie.title === movieData.title)) {
        showNotification('Este filme já está na comparação!', 'warning');
        return;
    }
    
    // Limitar a 3 filmes
    if (comparison.length >= 3) {
        showNotification('Máximo de 3 filmes para comparação!', 'warning');
        return;
    }
    
    comparison.push(movieData);
    localStorage.setItem('movieComparison', JSON.stringify(comparison));
    
    showNotification(`${movieData.title} adicionado à comparação!`, 'success');
    updateComparisonCounter();
}

function updateComparisonCounter() {
    const comparison = JSON.parse(localStorage.getItem('movieComparison') || '[]');
    const counter = document.querySelector('.comparison-counter');
    
    if (counter) {
        counter.textContent = comparison.length;
        counter.style.display = comparison.length > 0 ? 'block' : 'none';
    }
}

// === SISTEMA DE FAVORITOS === //
function initializeFavoriteSystem() {
    const favoriteButtons = document.querySelectorAll('.favorite-btn');
    
    favoriteButtons.forEach(button => {
        const movieId = button.dataset.movieId;
        const favorites = JSON.parse(localStorage.getItem('favoriteMovies') || '[]');
        
        if (favorites.includes(movieId)) {
            button.classList.add('favorited');
            button.innerHTML = '❤️ Favorito';
        }
        
        button.addEventListener('click', () => {
            toggleFavorite(movieId, button);
        });
    });
}

function toggleFavorite(movieId, button) {
    let favorites = JSON.parse(localStorage.getItem('favoriteMovies') || '[]');
    
    if (favorites.includes(movieId)) {
        favorites = favorites.filter(id => id !== movieId);
        button.classList.remove('favorited');
        button.innerHTML = '🤍 Favoritar';
        showNotification('Removido dos favoritos', 'info');
    } else {
        favorites.push(movieId);
        button.classList.add('favorited');
        button.innerHTML = '❤️ Favorito';
        showNotification('Adicionado aos favoritos!', 'success');
    }
    
    localStorage.setItem('favoriteMovies', JSON.stringify(favorites));
}

// === COMPARTILHAMENTO SOCIAL === //
function initializeSocialSharing() {
    const shareButtons = document.querySelectorAll('.share-btn');
    
    shareButtons.forEach(button => {
        button.addEventListener('click', () => {
            const platform = button.dataset.platform;
            const url = window.location.href;
            const title = document.title;
            
            shareToSocial(platform, url, title);
        });
    });
}

function shareToSocial(platform, url, title) {
    const encodedUrl = encodeURIComponent(url);
    const encodedTitle = encodeURIComponent(title);
    
    const shareUrls = {
        facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
        twitter: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
        whatsapp: `https://wa.me/?text=${encodedTitle}%20${encodedUrl}`,
        telegram: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`
    };
    
    if (shareUrls[platform]) {
        window.open(shareUrls[platform], '_blank', 'width=600,height=400');
    }
}

// === LAZY LOADING PARA IMAGENS === //
function initializeLazyLoading() {
    const images = document.querySelectorAll('img[data-src]');
    
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
                img.classList.add('loaded');
                observer.unobserve(img);
            }
        });
    });
    
    images.forEach(img => imageObserver.observe(img));
}

// === TOOLTIPS INFORMATIVOS === //
function initializeTooltips() {
    const tooltipElements = document.querySelectorAll('[data-tooltip]');
    
    tooltipElements.forEach(element => {
        element.addEventListener('mouseenter', showTooltip);
        element.addEventListener('mouseleave', hideTooltip);
    });
}

function showTooltip(e) {
    const element = e.target;
    const tooltipText = element.dataset.tooltip;
    
    const tooltip = document.createElement('div');
    tooltip.className = 'custom-tooltip';
    tooltip.textContent = tooltipText;
    tooltip.style.cssText = `
        position: absolute;
        background: #333;
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 0.8em;
        white-space: nowrap;
        z-index: 1000;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    `;
    
    document.body.appendChild(tooltip);
    
    const rect = element.getBoundingClientRect();
    tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
    tooltip.style.top = rect.top - tooltip.offsetHeight - 10 + 'px';
    
    setTimeout(() => tooltip.style.opacity = '1', 10);
    
    element._tooltip = tooltip;
}

function hideTooltip(e) {
    const element = e.target;
    if (element._tooltip) {
        element._tooltip.remove();
        delete element._tooltip;
    }
}

// === FUNÇÕES UTILITÁRIAS === //
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `notification notification-${type}`;
    notification.textContent = message;
    
    const colors = {
        success: '#28a745',
        warning: '#ffc107',
        error: '#dc3545',
        info: '#17a2b8'
    };
    
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: ${colors[type] || colors.info};
        color: white;
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        z-index: 1000;
        animation: slideInRight 0.3s ease;
        max-width: 300px;
    `;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.animation = 'slideOutRight 0.3s ease';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

// === ANIMAÇÕES CSS === //
const style = document.createElement('style');
style.textContent = `
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }
    
    @keyframes slideInRight {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    
    @keyframes slideOutRight {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(100%); opacity: 0; }
    }
    
    .loaded {
        animation: fadeIn 0.5s ease;
    }
    
    .favorited {
        animation: pulse 0.5s ease;
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
`;

document.head.appendChild(style);

// === INICIALIZAÇÃO DE WIDGETS ESPECÍFICOS === //
function initializeMovieWidgets() {
    // Widget de filmes em cartaz
    createNowPlayingWidget();
    
    // Widget de próximos lançamentos
    createUpcomingWidget();
    
    // Widget de filmes mais bem avaliados
    createTopRatedWidget();
}

function createNowPlayingWidget() {
    const container = document.querySelector('#now-playing-widget');
    if (!container) return;
    
    // Simulação de dados de filmes em cartaz
    const nowPlaying = [
        { title: 'Filme 1', rating: 4.5, poster: 'poster1.jpg' },
        { title: 'Filme 2', rating: 4.2, poster: 'poster2.jpg' },
        { title: 'Filme 3', rating: 4.8, poster: 'poster3.jpg' }
    ];
    
    container.innerHTML = `
        <h3>🎬 Em Cartaz</h3>
        <div class="movie-widget-grid">
            ${nowPlaying.map(movie => `
                <div class="widget-movie-item">
                    <img src="${movie.poster}" alt="${movie.title}" loading="lazy">
                    <h4>${movie.title}</h4>
                    <div class="widget-rating">⭐ ${movie.rating}</div>
                </div>
            `).join('')}
        </div>
    `;
}

// Inicializar widgets quando a página carregar
document.addEventListener('DOMContentLoaded', initializeMovieWidgets);