<?php
/**
 * Notifications Template
 * Displays user notifications using the new custom post type system
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Get current user
$current_user_id = get_current_user_id();

// Get notifications for current user
$notifications = kavehboard_get_user_notifications($current_user_id, -1);
$unread_count = kavehboard_get_unread_notifications_count($current_user_id);

// AJAX requests are now handled in the main plugin file
?>

<div class="kavehboard-notifications-page">
    <div class="notifications-header d-flex align-items-center justify-content-between mb-4">
        <div>
            <h2 class="mb-1"><?php _e('Notifications', 'kavehTheme'); ?></h2>
            <p class="text-muted mb-0">
                <?php 
                /* translators: %d: number of notifications */
                printf(
                    _n('You have %d notification', 'You have %d notifications', count($notifications), 'kavehTheme'),
                    count($notifications)
                );
                if ($unread_count > 0) {
                    /* translators: %d: number of unread notifications */
                    printf(' (' . _n('%d unread', '%d unread', $unread_count, 'kavehTheme') . ')', $unread_count);
                }
                ?>
            </p>
        </div>
        <?php if ($unread_count > 0): ?>
        <button type="button" id="mark-all-read-btn" class="btn btn-outline-primary">
            <?php _e('Mark All as Read', 'kavehTheme'); ?>
        </button>
        <?php endif; ?>
    </div>

    <?php if (empty($notifications)): ?>
        <div class="empty-notifications text-center py-5">
            <div class="mb-3">
                <i class="icon-notification-2" style="font-size: 48px; color: #ccc;"></i>
            </div>
            <h4 class="text-muted"><?php _e('No notifications yet', 'kavehTheme'); ?></h4>
            <p class="text-muted"><?php _e('When you have notifications, they will appear here.', 'kavehTheme'); ?></p>
        </div>
    <?php else: ?>
        <div class="notifications-list">
            <?php foreach ($notifications as $notification): 
                $is_read = kavehboard_is_notification_read($current_user_id, $notification->ID);
                $notification_type = get_post_meta($notification->ID, '_kaveh_notification_type', true) ?: 'info';
                $action_url = get_post_meta($notification->ID, '_kaveh_notification_action_url', true);
                $target_type = get_post_meta($notification->ID, '_kaveh_notification_target_type', true);
                $target_user = get_post_meta($notification->ID, '_kaveh_notification_target_user', true);
                
                // Get notification type icon and color
                $type_config = array(
                    'info' => array('icon' => 'icon-info-circle', 'color' => '#17a2b8'),
                    'success' => array('icon' => 'icon-check-circle', 'color' => '#28a745'),
                    'warning' => array('icon' => 'icon-warning', 'color' => '#ffc107'),
                    'error' => array('icon' => 'icon icon-close', 'color' => '#dc3545')
                );
                
                $config = $type_config[$notification_type] ?? $type_config['info'];
            ?>
            <div class="notification-item <?php echo $is_read ? 'read' : 'unread'; ?>" data-notification-id="<?php echo $notification->ID; ?>">
                <div class="notification-content d-flex align-items-start gap-3 p-3 border rounded mb-3 <?php echo !$is_read ? 'border-primary bg-light' : ''; ?>">
                    <div class="notification-icon flex-shrink-0">
                        <i class="<?php echo esc_attr($config['icon']); ?>" style="color: <?php echo esc_attr($config['color']); ?>; font-size: 24px;"></i>
                    </div>
                    <div class="notification-body flex-grow-1">
                        <div class="d-flex align-items-start justify-content-between">
                            <div>
                                <h5 class="notification-title mb-1 <?php echo !$is_read ? 'fw-bold' : ''; ?>">
                                    <?php echo esc_html($notification->post_title); ?>
                                </h5>
                                <div class="notification-message text-muted mb-2">
                                    <?php echo wp_kses_post($notification->post_content); ?>
                                </div>
                                <div class="notification-meta d-flex align-items-center gap-3 text-sm text-muted">
                                    <span>
                                        <i class="icon-calendar"></i>
                                        <?php echo date_i18n(get_option('date_format') . ' ' . get_option('time_format'), strtotime($notification->post_date)); ?>
                                    </span>
                                    <span class="badge badge-<?php echo $notification_type; ?> badge-sm">
                                        <?php echo ucfirst($notification_type); ?>
                                    </span>
                                    <?php if ($target_type === 'specific'): ?>
                                        <span class="badge badge-secondary badge-sm">
                                            <i class="icon-user"></i> <?php _e('Personal', 'kavehTheme'); ?>
                                        </span>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <div class="notification-actions d-flex align-items-center gap-2">
                                <?php if (!$is_read): ?>
                                    <button type="button" class="btn btn-sm btn-outline-primary mark-read-btn" data-notification-id="<?php echo $notification->ID; ?>">
                                        <?php _e('Mark as Read', 'kavehTheme'); ?>
                                    </button>
                                <?php endif; ?>
                                <?php if ($action_url): ?>
                                    <a href="<?php echo esc_url($action_url); ?>" class="btn btn-sm btn-primary" target="_blank">
                                        <?php _e('View', 'kavehTheme'); ?>
                                        <i class="icon-external-link"></i>
                                    </a>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<style>
.notification-item.read .notification-content {
    opacity: 0.7;
}

.notification-item.unread .notification-title {
    font-weight: bold;
}

.badge-info { background-color: #17a2b8; }
.badge-success { background-color: #28a745; }
.badge-warning { background-color: #ffc107; color: #212529; }
.badge-error { background-color: #dc3545;color: #fff !important; }
.badge-secondary { background-color: #6c757d;color: #fff !important; }
.badge-sm { font-size: 0.75rem; }

.text-sm { font-size: 0.875rem; }
</style>

<!-- JavaScript functionality is handled by notifications.js -->