/**
 * SALA DE AULA - PLAYER DE CURSO
 * Lógica de interação e navegação
 * 
 * @version 1.0
 * @author Checkout Pro 2025
 */

(function() {
    'use strict';

    // ============================================================
    // INICIALIZAÇÃO
    // ============================================================

    document.addEventListener('DOMContentLoaded', function() {
        initSidebar();
        initTabs();
        initMarkComplete();
        initModuleAccordions();
    });

    // ============================================================
    // SIDEBAR (MOBILE)
    // ============================================================

    function initSidebar() {
        const sidebar = document.getElementById('courseSidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const mobileToggle = document.getElementById('mobileSidebarToggle');

        if (!sidebar || !mobileToggle) return;

        // Abrir sidebar no mobile
        mobileToggle.addEventListener('click', function() {
            sidebar.classList.add('open');
            document.body.style.overflow = 'hidden';
        });

        // Fechar sidebar
        if (sidebarToggle) {
            sidebarToggle.addEventListener('click', function() {
                sidebar.classList.remove('open');
                document.body.style.overflow = '';
            });
        }

        // Fechar ao clicar fora (mobile)
        sidebar.addEventListener('click', function(e) {
            if (e.target === sidebar) {
                sidebar.classList.remove('open');
                document.body.style.overflow = '';
            }
        });

        // Auto-expandir módulo da aula atual
        const currentLesson = document.querySelector('.lesson-item.current');
        if (currentLesson) {
            const moduleItem = currentLesson.closest('.module-item');
            if (moduleItem) {
                moduleItem.classList.add('active');
            }
        }
    }

    // ============================================================
    // ACORDEÃO DE MÓDULOS
    // ============================================================

    function initModuleAccordions() {
        const moduleHeaders = document.querySelectorAll('.module-header');

        moduleHeaders.forEach(function(header) {
            header.addEventListener('click', function() {
                const moduleItem = this.closest('.module-item');
                const isActive = moduleItem.classList.contains('active');

                // Fechar todos os módulos
                document.querySelectorAll('.module-item').forEach(function(item) {
                    item.classList.remove('active');
                });

                // Abrir o módulo clicado se não estava aberto
                if (!isActive) {
                    moduleItem.classList.add('active');
                }
            });
        });

        // Auto-expandir módulos que contêm a aula atual
        const currentLesson = document.querySelector('.lesson-item.current');
        if (currentLesson) {
            const moduleItem = currentLesson.closest('.module-item');
            if (moduleItem) {
                moduleItem.classList.add('active');
            }
        }
    }

    // ============================================================
    // ABAS DE CONTEÚDO
    // ============================================================

    function initTabs() {
        const tabButtons = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');

        tabButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                const targetTab = this.getAttribute('data-tab');

                // Remover active de todos
                tabButtons.forEach(function(btn) {
                    btn.classList.remove('active');
                });
                tabContents.forEach(function(content) {
                    content.classList.remove('active');
                });

                // Adicionar active no selecionado
                this.classList.add('active');
                const targetContent = document.getElementById('tab-' + targetTab);
                if (targetContent) {
                    targetContent.classList.add('active');
                }
            });
        });
    }

    // ============================================================
    // MARCAR COMO CONCLUÍDA (AJAX)
    // ============================================================

    function initMarkComplete() {
        const btnMarkComplete = document.getElementById('btnMarkComplete');
        if (!btnMarkComplete) return;

        btnMarkComplete.addEventListener('click', function() {
            const aulaId = this.getAttribute('data-aula-id');
            const produtoId = this.getAttribute('data-produto-id');
            const isCompleted = this.classList.contains('completed');

            if (!aulaId) return;

            // Feedback visual imediato
            const originalHTML = this.innerHTML;
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <span>Processando...</span>';

            // Preparar dados
            const action = isCompleted ? 'uncomplete' : 'complete';
            const formData = new FormData();
            formData.append('aula_id', aulaId);
            formData.append('produto_id', produtoId);
            formData.append('action', action);

            // Requisição AJAX
            fetch('/backend/api/curso_progresso.php', {
                method: 'POST',
                body: formData
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                if (data.status === 'success') {
                    // Atualizar UI
                    if (action === 'complete') {
                        btnMarkComplete.classList.add('completed');
                        btnMarkComplete.innerHTML = '<i class="fas fa-check"></i> <span>Concluída</span>';
                        
                        // Atualizar ícone na sidebar
                        const lessonItem = document.querySelector('.lesson-item[data-aula-id="' + aulaId + '"]');
                        if (lessonItem) {
                            lessonItem.classList.add('completed');
                            const statusIcon = lessonItem.querySelector('.lesson-status');
                            if (statusIcon) {
                                statusIcon.className = 'lesson-status fas fa-check-circle';
                            }
                        }

                        // Atualizar barra de progresso
                        if (data.progresso) {
                            updateProgressBar(data.progresso);
                        }

                        // Mostrar notificação de sucesso
                        showNotification('Aula marcada como concluída!', 'success');
                    } else {
                        btnMarkComplete.classList.remove('completed');
                        btnMarkComplete.innerHTML = '<i class="fas fa-check-circle"></i> <span>Marcar como Concluída</span>';
                        
                        // Atualizar ícone na sidebar
                        const lessonItem = document.querySelector('.lesson-item[data-aula-id="' + aulaId + '"]');
                        if (lessonItem) {
                            lessonItem.classList.remove('completed');
                            const statusIcon = lessonItem.querySelector('.lesson-status');
                            if (statusIcon) {
                                statusIcon.className = 'lesson-status fas fa-circle';
                            }
                        }

                        // Atualizar barra de progresso
                        if (data.progresso) {
                            updateProgressBar(data.progresso);
                        }

                        showNotification('Aula desmarcada como concluída.', 'info');
                    }

                    // Sugerir próxima aula se concluiu
                    if (action === 'complete' && data.aula_proxima) {
                        setTimeout(function() {
                            suggestNextLesson(data.aula_proxima);
                        }, 2000);
                    }
                } else {
                    throw new Error(data.message || 'Erro ao atualizar progresso');
                }
            })
            .catch(function(error) {
                console.error('Erro:', error);
                btnMarkComplete.innerHTML = originalHTML;
                showNotification('Erro ao atualizar progresso. Tente novamente.', 'error');
            })
            .finally(function() {
                btnMarkComplete.disabled = false;
            });
        });
    }

    // ============================================================
    // ATUALIZAR BARRA DE PROGRESSO
    // ============================================================

    function updateProgressBar(progresso) {
        const progressBarFill = document.querySelector('.progress-bar-fill');
        const progressPercentage = document.querySelector('.progress-percentage');
        const progressStats = document.querySelector('.progress-stats');

        if (progressBarFill && progresso.percentual !== undefined) {
            progressBarFill.style.width = progresso.percentual + '%';
        }

        if (progressPercentage && progresso.percentual !== undefined) {
            progressPercentage.textContent = Math.round(progresso.percentual) + '%';
        }

        if (progressStats && progresso.concluidas !== undefined && progresso.total !== undefined) {
            progressStats.innerHTML = '<span>' + progresso.concluidas + ' de ' + progresso.total + ' aulas concluídas</span>';
        }
    }

    // ============================================================
    // SUGERIR PRÓXIMA AULA
    // ============================================================

    function suggestNextLesson(aulaProxima) {
        if (!aulaProxima) return;

        // Criar notificação com ação
        const notification = document.createElement('div');
        notification.className = 'notification-next-lesson';
        notification.innerHTML = `
            <div class="notification-content">
                <i class="fas fa-check-circle"></i>
                <div class="notification-text">
                    <strong>Aula concluída!</strong>
                    <p>Deseja ir para a próxima aula?</p>
                </div>
                <button class="btn-go-next" onclick="window.location.href='?produto_id=${aulaProxima.produto_id}&aula_id=${aulaProxima.id}'">
                    Ir para próxima
                </button>
            </div>
        `;

        // Estilos inline (pode mover para CSS depois)
        notification.style.cssText = `
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: var(--bg-secondary, #1a1a1a);
            border: 2px solid var(--accent-green, #00e676);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            z-index: 1000;
            max-width: 350px;
            animation: slideInUp 0.3s ease;
        `;

        document.body.appendChild(notification);

        // Remover após 10 segundos
        setTimeout(function() {
            notification.style.animation = 'slideOutDown 0.3s ease';
            setTimeout(function() {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 300);
        }, 10000);
    }

    // ============================================================
    // NOTIFICAÇÃO SIMPLES
    // ============================================================

    function showNotification(message, type) {
        const notification = document.createElement('div');
        notification.className = 'notification notification-' + type;
        notification.textContent = message;
        
        notification.style.cssText = `
            position: fixed;
            top: 150px;
            right: 30px;
            background: ${type === 'success' ? 'var(--accent-green, #00e676)' : type === 'error' ? '#f44336' : 'var(--bg-tertiary, #2a2a2a)'};
            color: ${type === 'success' ? '#000' : '#fff'};
            padding: 16px 24px;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            font-weight: 500;
            animation: slideInRight 0.3s ease;
        `;

        document.body.appendChild(notification);

        setTimeout(function() {
            notification.style.animation = 'slideOutRight 0.3s ease';
            setTimeout(function() {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 300);
        }, 3000);
    }

    // ============================================================
    // ANIMAÇÕES CSS (via JS - pode mover para CSS)
    // ============================================================

    const style = document.createElement('style');
    style.textContent = `
        @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;
            }
        }

        @keyframes slideInUp {
            from {
                transform: translateY(100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideOutDown {
            from {
                transform: translateY(0);
                opacity: 1;
            }
            to {
                transform: translateY(100%);
                opacity: 0;
            }
        }

        .notification-next-lesson .notification-content {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .notification-next-lesson .notification-content i {
            font-size: 24px;
            color: var(--accent-green, #00e676);
        }

        .notification-next-lesson .notification-text {
            flex: 1;
        }

        .notification-next-lesson .notification-text strong {
            display: block;
            margin-bottom: 4px;
            color: var(--text-primary, #fff);
        }

        .notification-next-lesson .notification-text p {
            margin: 0;
            font-size: 13px;
            color: var(--text-secondary, #b3b3b3);
        }

        .notification-next-lesson .btn-go-next {
            background: var(--accent-green, #00e676);
            color: #000;
            border: none;
            padding: 10px 16px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s ease;
        }

        .notification-next-lesson .btn-go-next:hover {
            background: var(--accent-green-dark, #00c853);
            transform: translateY(-2px);
        }
    `;
    document.head.appendChild(style);

})();





