<?php
/*******************************************************************************************************************
| Software Name        : EasyStream
| Software Description : High End YouTube Clone Script with Videos, Shorts, Streams, Images, Audio, Documents, Blogs
| Software Author      : (c) Sami Ahmed
|*******************************************************************************************************************
|
|*******************************************************************************************************************
| This source file is subject to the EasyStream Proprietary License Agreement.
|
| By using this software, you acknowledge having read this Agreement and agree to be bound thereby.
|*******************************************************************************************************************
| Copyright (c) 2025 Sami Ahmed. All rights reserved.
|*******************************************************************************************************************/

/**
 * Notifications Bell Component
 *
 * Provides a dropdown notification interface similar to YouTube's notification bell
 * Features:
 * - Real-time notification count
 * - Dropdown list of recent notifications
 * - Mark as read/unread
 * - Mark all as read
 * - Notification types: comments, likes, subscriptions, uploads, etc.
 *
 * This file can be included in the header template
 */

define('_ISVALID', true);

// AJAX Handlers
if (isset($_POST['action'])) {
    $action = VSecurity::postParam('action', 'string');

    switch ($action) {
        case 'get_notifications':
            echo json_encode(getNotifications());
            exit;

        case 'mark_read':
            $notif_id = VSecurity::postParam('notif_id', 'int');
            echo json_encode(markAsRead($notif_id));
            exit;

        case 'mark_all_read':
            echo json_encode(markAllAsRead());
            exit;

        case 'get_count':
            echo json_encode(['count' => getUnreadCount()]);
            exit;
    }
}

/**
 * Get notifications for current user
 */
function getNotifications($limit = 20)
{
    global $class_database, $cfg;

    $usr_id = isset($_SESSION['USER_ID']) ? (int) $_SESSION['USER_ID'] : 0;

    if ($usr_id == 0) {
        return ['notifications' => [], 'unread_count' => 0];
    }

    $sql = "SELECT
                n.*,
                u.usr_user, u.usr_dname, u.usr_key
            FROM `db_notifications` n
            LEFT JOIN `db_accountuser` u ON n.from_usr_id = u.usr_id
            WHERE n.to_usr_id = %d
            ORDER BY n.db_id DESC
            LIMIT %d";

    $result = $class_database->doQuery($sql, $usr_id, $limit);

    $notifications = [];
    while ($row = $result->fetch_assoc()) {
        $notifications[] = [
            'id' => $row['db_id'],
            'type' => $row['notif_type'],
            'message' => $row['notif_message'],
            'from_user' => $row['usr_dname'] ?: 'System',
            'from_username' => $row['usr_user'],
            'from_key' => $row['usr_key'],
            'link' => $row['notif_link'],
            'is_read' => $row['notif_read'] == 1,
            'date' => $row['notif_date'],
            'time_ago' => timeAgo($row['notif_date'])
        ];
    }

    return [
        'notifications' => $notifications,
        'unread_count' => getUnreadCount()
    ];
}

/**
 * Get unread notification count
 */
function getUnreadCount()
{
    global $class_database;

    $usr_id = isset($_SESSION['USER_ID']) ? (int) $_SESSION['USER_ID'] : 0;

    if ($usr_id == 0) {
        return 0;
    }

    $sql = "SELECT COUNT(*) as count FROM `db_notifications`
            WHERE `to_usr_id` = %d AND `notif_read` = 0";

    $result = $class_database->doQuery($sql, $usr_id);
    $row = $result->fetch_assoc();

    return (int) $row['count'];
}

/**
 * Mark notification as read
 */
function markAsRead($notif_id)
{
    global $class_database;

    $usr_id = isset($_SESSION['USER_ID']) ? (int) $_SESSION['USER_ID'] : 0;

    $sql = "UPDATE `db_notifications` SET `notif_read` = 1
            WHERE `db_id` = %d AND `to_usr_id` = %d";

    $class_database->doQuery($sql, $notif_id, $usr_id);

    return ['success' => true, 'unread_count' => getUnreadCount()];
}

/**
 * Mark all notifications as read
 */
function markAllAsRead()
{
    global $class_database;

    $usr_id = isset($_SESSION['USER_ID']) ? (int) $_SESSION['USER_ID'] : 0;

    $sql = "UPDATE `db_notifications` SET `notif_read` = 1
            WHERE `to_usr_id` = %d AND `notif_read` = 0";

    $class_database->doQuery($sql, $usr_id);

    return ['success' => true, 'unread_count' => 0];
}

/**
 * Format time ago
 */
function timeAgo($datetime)
{
    $timestamp = strtotime($datetime);
    $diff = time() - $timestamp;

    if ($diff < 60) {
        return 'just now';
    } elseif ($diff < 3600) {
        $mins = floor($diff / 60);
        return $mins . ' minute' . ($mins > 1 ? 's' : '') . ' ago';
    } elseif ($diff < 86400) {
        $hours = floor($diff / 3600);
        return $hours . ' hour' . ($hours > 1 ? 's' : '') . ' ago';
    } elseif ($diff < 604800) {
        $days = floor($diff / 86400);
        return $days . ' day' . ($days > 1 ? 's' : '') . ' ago';
    } elseif ($diff < 2592000) {
        $weeks = floor($diff / 604800);
        return $weeks . ' week' . ($weeks > 1 ? 's' : '') . ' ago';
    } else {
        return date('M d, Y', $timestamp);
    }
}

// If not an AJAX request, return the HTML component
if (!isset($_POST['action'])):
    $unread_count = getUnreadCount();
?>

<!-- Notification Bell Component -->
<div class="notification-bell-wrapper">
    <button class="notification-bell-button" id="notificationBell" aria-label="Notifications">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
        </svg>
        <?php if ($unread_count > 0): ?>
            <span class="notification-badge" id="notificationBadge"><?php echo $unread_count > 99 ? '99+' : $unread_count; ?></span>
        <?php endif; ?>
    </button>

    <div class="notification-dropdown" id="notificationDropdown">
        <div class="notification-header">
            <h3>Notifications</h3>
            <button class="mark-all-read" id="markAllRead">Mark all as read</button>
        </div>

        <div class="notification-list" id="notificationList">
            <div class="loading">Loading notifications...</div>
        </div>
    </div>
</div>

<style>
.notification-bell-wrapper {
    position: relative;
    display: inline-block;
}

.notification-bell-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #030303;
    transition: background-color 0.2s;
}

.notification-bell-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.notification-bell-button svg {
    width: 24px;
    height: 24px;
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #cc0000;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
}

.notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 400px;
    max-height: 600px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    z-index: 1000;
}

.notification-dropdown.show {
    display: flex;
}

.notification-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.mark-all-read {
    background: none;
    border: none;
    color: #065fd4;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 8px;
}

.mark-all-read:hover {
    text-decoration: underline;
}

.notification-list {
    overflow-y: auto;
    max-height: 540px;
}

.loading {
    padding: 40px 20px;
    text-align: center;
    color: #606060;
}

.notification-item {
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
    color: inherit;
}

.notification-item:hover {
    background-color: #f9f9f9;
}

.notification-item.unread {
    background-color: #e8f0fe;
}

.notification-item.unread:hover {
    background-color: #d2e3fc;
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #065fd4;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-message {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.notification-time {
    font-size: 12px;
    color: #606060;
}

.notification-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #065fd4;
    flex-shrink: 0;
    margin-top: 6px;
}

.empty-notifications {
    padding: 60px 20px;
    text-align: center;
}

.empty-notifications svg {
    width: 80px;
    height: 80px;
    color: #909090;
    margin-bottom: 16px;
}

.empty-notifications p {
    color: #606060;
    font-size: 14px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .notification-bell-button {
        color: #f1f1f1;
    }

    .notification-bell-button:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .notification-dropdown {
        background: #212121;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    }

    .notification-header {
        border-bottom-color: #303030;
    }

    .notification-item {
        border-bottom-color: #303030;
    }

    .notification-item:hover {
        background-color: #2a2a2a;
    }

    .notification-item.unread {
        background-color: #1a3a52;
    }

    .notification-item.unread:hover {
        background-color: #1e4a62;
    }
}

/* Mobile responsive */
@media (max-width: 480px) {
    .notification-dropdown {
        width: 100vw;
        right: -20px;
        max-height: 80vh;
        border-radius: 12px 12px 0 0;
    }
}
</style>

<script>
// Notification Bell JavaScript
(function() {
    const bell = document.getElementById('notificationBell');
    const dropdown = document.getElementById('notificationDropdown');
    const notificationList = document.getElementById('notificationList');
    const badge = document.getElementById('notificationBadge');
    const markAllReadBtn = document.getElementById('markAllRead');

    // Toggle dropdown
    bell.addEventListener('click', function(e) {
        e.stopPropagation();
        const isShown = dropdown.classList.toggle('show');
        if (isShown) {
            loadNotifications();
        }
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', function(e) {
        if (!dropdown.contains(e.target) && e.target !== bell) {
            dropdown.classList.remove('show');
        }
    });

    // Load notifications
    function loadNotifications() {
        fetch('<?php echo $cfg['main_url']; ?>/f_modules/m_frontend/m_notif/notifications_bell.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: 'action=get_notifications'
        })
        .then(response => response.json())
        .then(data => {
            renderNotifications(data.notifications);
            updateBadge(data.unread_count);
        })
        .catch(error => {
            notificationList.innerHTML = '<div class="loading">Error loading notifications</div>';
        });
    }

    // Render notifications
    function renderNotifications(notifications) {
        if (notifications.length === 0) {
            notificationList.innerHTML = `
                <div class="empty-notifications">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                    </svg>
                    <p>No notifications yet</p>
                </div>
            `;
            return;
        }

        const html = notifications.map(notif => `
            <a href="${notif.link || '#'}" class="notification-item ${notif.is_read ? '' : 'unread'}" data-id="${notif.id}">
                <div class="notification-icon">
                    ${getNotificationIcon(notif.type)}
                </div>
                <div class="notification-content">
                    <div class="notification-message">${notif.message}</div>
                    <div class="notification-time">${notif.time_ago}</div>
                </div>
                ${notif.is_read ? '' : '<div class="notification-unread-dot"></div>'}
            </a>
        `).join('');

        notificationList.innerHTML = html;

        // Add click handlers to mark as read
        document.querySelectorAll('.notification-item.unread').forEach(item => {
            item.addEventListener('click', function(e) {
                markAsRead(this.dataset.id);
            });
        });
    }

    // Get icon based on notification type
    function getNotificationIcon(type) {
        const icons = {
            'comment': '💬',
            'like': '❤️',
            'subscribe': '🔔',
            'upload': '📹',
            'mention': '@',
            'system': 'ℹ️'
        };
        return icons[type] || '🔔';
    }

    // Mark as read
    function markAsRead(notifId) {
        fetch('<?php echo $cfg['main_url']; ?>/f_modules/m_frontend/m_notif/notifications_bell.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: `action=mark_read&notif_id=${notifId}`
        })
        .then(response => response.json())
        .then(data => {
            updateBadge(data.unread_count);
        });
    }

    // Mark all as read
    markAllReadBtn.addEventListener('click', function() {
        fetch('<?php echo $cfg['main_url']; ?>/f_modules/m_frontend/m_notif/notifications_bell.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: 'action=mark_all_read'
        })
        .then(response => response.json())
        .then(data => {
            updateBadge(0);
            loadNotifications();
        });
    });

    // Update badge
    function updateBadge(count) {
        if (count > 0) {
            if (badge) {
                badge.textContent = count > 99 ? '99+' : count;
                badge.style.display = 'block';
            }
        } else {
            if (badge) {
                badge.style.display = 'none';
            }
        }
    }

    // Poll for new notifications every 30 seconds
    setInterval(function() {
        fetch('<?php echo $cfg['main_url']; ?>/f_modules/m_frontend/m_notif/notifications_bell.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: 'action=get_count'
        })
        .then(response => response.json())
        .then(data => {
            updateBadge(data.count);
        });
    }, 30000);
})();
</script>

<?php endif; ?>