<?php
/**
 * Componente: Notificações/Broadcast Modal
 * 
 * Exibe notificações não lidas em um modal quando o usuário entra no painel
 */

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

$usuario = usuario_logado();
if (!$usuario || $usuario['tipo'] === 'admin') {
    return; // Apenas usuários comuns veem notificações
}

$usuario_id = $usuario['id'];
$notificacoes_nao_lidas = buscar_notificacoes_nao_lidas($usuario_id);

if (empty($notificacoes_nao_lidas)) {
    return; // Se não houver notificações, não exibe nada
}

// Marcar como lidas quando exibidas
foreach ($notificacoes_nao_lidas as $notif) {
    marcar_notificacao_lida($notif['id'], $usuario_id);
}
?>

<style>
    .modal-notificacao {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 10000;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    
    .modal-notificacao.active {
        display: flex;
    }
    
    .modal-notificacao-content {
        background: var(--bg-card, #ffffff);
        border-radius: 16px;
        max-width: 600px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        position: relative;
    }
    
    [data-theme="dark"] .modal-notificacao-content {
        background: var(--bg-card, #0f172a);
    }
    
    .modal-notificacao-header {
        padding: 24px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .modal-notificacao-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: var(--text-main);
    }
    
    .modal-notificacao-close {
        background: none;
        border: none;
        font-size: 24px;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s;
    }
    
    .modal-notificacao-close:hover {
        background: var(--bg-body);
        color: var(--text-main);
    }
    
    .modal-notificacao-body {
        padding: 24px;
    }
    
    .notificacao-item {
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .notificacao-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .notificacao-titulo {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 12px;
    }
    
    .notificacao-conteudo {
        font-size: 15px;
        color: var(--text-main);
        line-height: 1.6;
        margin-bottom: 16px;
    }
    
    .notificacao-imagem {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 16px;
    }
    
    .notificacao-video {
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 8px;
        margin-bottom: 16px;
    }
    
    .notificacao-botao {
        display: inline-block;
        padding: 12px 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 600;
        transition: transform 0.2s;
    }
    
    .notificacao-botao:hover {
        transform: translateY(-2px);
    }
</style>

<?php foreach ($notificacoes_nao_lidas as $notif): ?>
<div class="modal-notificacao active" id="modalNotificacao<?= $notif['id'] ?>">
    <div class="modal-notificacao-content">
        <div class="modal-notificacao-header">
            <h3><i class="fas fa-bell"></i> Nova Notificação</h3>
            <button class="modal-notificacao-close" onclick="fecharNotificacao(<?= $notif['id'] ?>)">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-notificacao-body">
            <div class="notificacao-titulo"><?= htmlspecialchars($notif['titulo']) ?></div>
            <div class="notificacao-conteudo"><?= nl2br(htmlspecialchars($notif['conteudo'])) ?></div>
            
            <?php if ($notif['tipo'] === 'imagem' && !empty($notif['imagem_url'])): ?>
                <img src="<?= htmlspecialchars($notif['imagem_url']) ?>" alt="Imagem" class="notificacao-imagem" onerror="this.style.display='none'">
            <?php endif; ?>
            
            <?php if ($notif['tipo'] === 'video' && !empty($notif['video_url'])): ?>
                <div class="notificacao-video">
                    <?php if (strpos($notif['video_url'], 'youtube.com') !== false || strpos($notif['video_url'], 'youtu.be') !== false): ?>
                        <?php
                        // Converter URL do YouTube para embed
                        preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/', $notif['video_url'], $matches);
                        $video_id = $matches[1] ?? '';
                        if ($video_id) {
                            echo '<iframe width="100%" height="100%" src="https://www.youtube.com/embed/' . htmlspecialchars($video_id) . '" frameborder="0" allowfullscreen></iframe>';
                        }
                        ?>
                    <?php else: ?>
                        <iframe src="<?= htmlspecialchars($notif['video_url']) ?>" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
            
            <?php if ($notif['tipo'] === 'acao' && !empty($notif['botao_texto']) && !empty($notif['botao_url'])): ?>
                <a href="<?= htmlspecialchars($notif['botao_url']) ?>" target="_blank" class="notificacao-botao">
                    <?= htmlspecialchars($notif['botao_texto']) ?>
                </a>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php endforeach; ?>

<script>
function fecharNotificacao(notifId) {
    const modal = document.getElementById('modalNotificacao' + notifId);
    if (modal) {
        modal.classList.remove('active');
        setTimeout(() => {
            modal.remove();
        }, 300);
    }
}

// Fechar ao clicar fora
document.querySelectorAll('.modal-notificacao').forEach(modal => {
    modal.addEventListener('click', function(e) {
        if (e.target === this) {
            const notifId = this.id.replace('modalNotificacao', '');
            fecharNotificacao(notifId);
        }
    });
});
</script>

