<?php
/**
 * Sistema de Notificação de Vendas em Tempo Real
 * 
 * Este componente adiciona um sistema de notificações toast
 * que verifica novas vendas aprovadas ou PIX gerados
 */

// Garantir que as dependências estão carregadas
if (!function_exists('verificar_novas_vendas')) {
    require_once __DIR__ . '/../../backend/vendas_notificacoes_helper.php';
}

$usuario = usuario_logado();
if (!$usuario) {
    return; // Se não houver usuário logado, não exibe nada
}

$usuario_id = $usuario['id'];
?>

<style>
    /* Toast Notifications */
    .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 400px;
    }
    
    .toast {
        background: var(--bg-card, #ffffff);
        border-radius: 12px;
        padding: 16px 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: flex-start;
        gap: 12px;
        animation: slideInRight 0.3s ease-out;
        border-left: 4px solid #10b981;
        min-width: 300px;
        max-width: 400px;
    }
    
    [data-theme="dark"] .toast {
        background: var(--bg-card, #0f172a);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }
    
    .toast.toast-success {
        border-left-color: #10b981;
    }
    
    .toast.toast-info {
        border-left-color: #3b82f6;
    }
    
    .toast.toast-warning {
        border-left-color: #f59e0b;
    }
    
    .toast-icon {
        font-size: 24px;
        flex-shrink: 0;
    }
    
    .toast.toast-success .toast-icon {
        color: #10b981;
    }
    
    .toast.toast-info .toast-icon {
        color: #3b82f6;
    }
    
    .toast-content {
        flex: 1;
    }
    
    .toast-title {
        font-weight: 700;
        font-size: 14px;
        color: var(--text-main, #1f2937);
        margin-bottom: 4px;
    }
    
    .toast-message {
        font-size: 13px;
        color: var(--text-muted, #6b7280);
        line-height: 1.4;
    }
    
    .toast-close {
        background: none;
        border: none;
        color: var(--text-muted, #6b7280);
        cursor: pointer;
        font-size: 18px;
        padding: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: all 0.2s;
        flex-shrink: 0;
    }
    
    .toast-close:hover {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-main, #1f2937);
    }
    
    @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;
        }
    }
    
    .toast.hiding {
        animation: slideOutRight 0.3s ease-out forwards;
    }
</style>

<div class="toast-container" id="toastContainer"></div>

<script>
(function() {
    'use strict';
    
    const usuarioId = <?= $usuario_id ?>;
    let ultimaVerificacao = localStorage.getItem('ultima_verificacao_vendas') || new Date().toISOString();
    let intervaloVerificacao = null;
    
    /**
     * Criar e exibir toast
     */
    function criarToast(titulo, mensagem, tipo = 'success') {
        const container = document.getElementById('toastContainer');
        if (!container) return;
        
        const toast = document.createElement('div');
        toast.className = `toast toast-${tipo}`;
        
        const icon = tipo === 'success' ? '🎉' : tipo === 'info' ? '📱' : '💰';
        
        toast.innerHTML = `
            <div class="toast-icon">${icon}</div>
            <div class="toast-content">
                <div class="toast-title">${titulo}</div>
                <div class="toast-message">${mensagem}</div>
            </div>
            <button class="toast-close" onclick="this.parentElement.remove()">
                <i class="fas fa-times"></i>
            </button>
        `;
        
        container.appendChild(toast);
        
        // Remover automaticamente após 5 segundos
        setTimeout(() => {
            toast.classList.add('hiding');
            setTimeout(() => {
                if (toast.parentElement) {
                    toast.remove();
                }
            }, 300);
        }, 5000);
    }
    
    /**
     * Verificar novas vendas via AJAX
     */
    function verificarVendas() {
        fetch('../../backend/api/verificar_vendas.php?usuario_id=' + usuarioId + '&ultima_verificacao=' + encodeURIComponent(ultimaVerificacao))
            .then(response => response.json())
            .then(data => {
                if (data.success && data.vendas && data.vendas.length > 0) {
                    // Exibir notificações para cada nova venda
                    data.vendas.forEach(venda => {
                        criarToast(venda.titulo, venda.mensagem, venda.tipo);
                    });
                    
                    // Atualizar última verificação
                    ultimaVerificacao = new Date().toISOString();
                    localStorage.setItem('ultima_verificacao_vendas', ultimaVerificacao);
                }
            })
            .catch(error => {
                console.error('Erro ao verificar vendas:', error);
            });
    }
    
    /**
     * Iniciar verificação periódica (a cada 10 segundos)
     */
    function iniciarVerificacao() {
        // Verificar imediatamente ao carregar
        verificarVendas();
        
        // Verificar a cada 10 segundos
        intervaloVerificacao = setInterval(verificarVendas, 10000);
    }
    
    /**
     * Parar verificação quando a página não estiver visível
     */
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            if (intervaloVerificacao) {
                clearInterval(intervaloVerificacao);
            }
        } else {
            iniciarVerificacao();
        }
    });
    
    // Iniciar quando a página carregar
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', iniciarVerificacao);
    } else {
        iniciarVerificacao();
    }
})();
</script>

