<?php
// Helper functions for notifications
function getNotificationIcon($type) {
    $icons = [
        'low_stock' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px; height:20px;"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>',
        'expiry' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px; height:20px;"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>',
        'sale' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px; height:20px;"><path d="M9 11l3 3L22 4"></path><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path></svg>',
        'purchase' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px; height:20px;"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path><polyline points="7,10 12,15 17,10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>',
        'system' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px; height:20px;"><circle cx="12" cy="12" r="3"></circle><path d="M12 1v6m0 6v6m11-7h-6m-6 0H1"></path></svg>',
        'transfer' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px; height:20px;"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>',
    ];
    return $icons[$type] ?? $icons['system'];
}

function getNotificationIconStyle($type) {
    $styles = [
        'low_stock' => 'background: rgba(239, 68, 68, 0.1); color: #dc2626;',
        'expiry' => 'background: rgba(245, 158, 11, 0.1); color: #d97706;',
        'sale' => 'background: rgba(34, 197, 94, 0.1); color: #16a34a;',
        'purchase' => 'background: rgba(59, 130, 246, 0.1); color: #2563eb;',
        'system' => 'background: rgba(107, 114, 128, 0.1); color: #6b7280;',
        'transfer' => 'background: rgba(99, 102, 241, 0.1); color: #6366f1;',
    ];
    return $styles[$type] ?? $styles['system'];
}

function getNotificationTypeLabel($type) {
    $labels = [
        'low_stock' => 'Low Stock',
        'expiry' => 'Expiry Alert',
        'sale' => 'Sale',
        'purchase' => 'Purchase',
        'system' => 'System',
        'transfer' => 'Transfer',
    ];
    return $labels[$type] ?? 'System';
}

function getTimeAgo($datetime) {
    $time = strtotime($datetime);
    $now = time();
    $diff = $now - $time;
    
    if ($diff < 60) {
        return 'Just now';
    } elseif ($diff < 3600) {
        return floor($diff / 60) . ' minutes ago';
    } elseif ($diff < 86400) {
        return floor($diff / 3600) . ' hours ago';
    } elseif ($diff < 604800) {
        return floor($diff / 86400) . ' days ago';
    } else {
        return date('M j, Y', $time);
    }
}
?>

<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/dashboard" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Dashboard
        </a>
        <h1>Notifications</h1>
        <div class="page-subtitle">Stay updated with system alerts and activity notifications</div>
    </div>
    <div class="flex gap-2">
        <button class="btn btn-ghost" onclick="markAllRead()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                <path d="M9 11l3 3L22 4"></path>
                <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path>
            </svg>
            Mark All Read
        </button>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Recent Notifications</h3>
        <span class="badge badge-info"><?= count($notifications) ?> total</span>
    </div>
    
    <?php if (empty($notifications)): ?>
    <div class="text-center py-12">
        <div style="width: 64px; height: 64px; margin: 0 auto 16px; background: var(--bg-surface); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:32px; color: var(--text-muted);">
                <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
            </svg>
        </div>
        <h4 class="text-muted">No notifications</h4>
        <p class="text-sm text-muted">You're all caught up! No new notifications to display.</p>
    </div>
    <?php else: ?>
    <div class="notifications-list">
        <?php foreach ($notifications as $notification): ?>
        <div class="notification-item <?= !$notification['is_read'] ? 'unread' : '' ?>" 
             onclick="markAsRead(<?= $notification['id'] ?>)"
             style="padding: 16px 20px; border-bottom: 1px solid var(--border); cursor: pointer; transition: all 0.2s ease; 
                    <?= !$notification['is_read'] ? 'background: var(--primary) 0.05; border-left: 4px solid var(--primary);' : '' ?>">
            
            <div class="flex gap-4">
                <!-- Notification Icon -->
                <div class="notification-icon" style="width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
                     <?= getNotificationIconStyle($notification['type']) ?>">
                    <?= getNotificationIcon($notification['type']) ?>
                </div>
                
                <!-- Notification Content -->
                <div class="flex-1">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-medium <?= !$notification['is_read'] ? 'font-semibold' : '' ?>" 
                            style="margin: 0; color: var(--text); font-size: 14px;">
                            <?= e($notification['title']) ?>
                        </h4>
                        <div class="flex items-center gap-2">
                            <?php if (!$notification['is_read']): ?>
                            <span class="badge badge-primary" style="font-size: 10px;">New</span>
                            <?php endif; ?>
                            <form method="POST" action="<?= APP_URL ?>/notifications/delete" onclick="event.stopPropagation()" style="display:inline;">
                                <?= Security::csrfField() ?>
                                <input type="hidden" name="id" value="<?= $notification['id'] ?>">
                                <button type="submit" class="btn btn-ghost btn-icon text-muted" title="Delete">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </div>
                    
                    <p class="text-sm text-muted" style="margin: 0 0 8px 0; line-height: 1.5;">
                        <?= e($notification['message']) ?>
                    </p>
                    
                    <div class="flex items-center gap-4 text-xs text-muted">
                        <span><?= getTimeAgo($notification['created_at']) ?></span>
                        <span><?= getNotificationTypeLabel($notification['type']) ?></span>
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
</div>


<script>
function markAsRead(id) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '<?= APP_URL ?>/notifications/mark-read';
    form.innerHTML = `
        <input type="hidden" name="id" value="${id}">
        <?= Security::csrfField() ?>
    `;
    document.body.appendChild(form);
    form.submit();
}

function markAllRead() {
    if (confirm('Mark all notifications as read?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '<?= APP_URL ?>/notifications/mark-all-read';
        form.innerHTML = `<?= Security::csrfField() ?>`;
        document.body.appendChild(form);
        form.submit();
    }
}

// Auto-refresh notifications every 30 seconds
setInterval(() => {
    // Optional: Add AJAX refresh logic here
}, 30000);
</script>

<style>
.notifications-list .notification-item:hover {
    background: var(--bg-hover);
}

.notifications-list .notification-item.unread:hover {
    background: var(--primary) 0.1;
}

.notification-item {
    transition: all 0.2s ease;
}

.notification-item:hover .notification-icon {
    transform: scale(1.05);
}

.notification-icon {
    transition: transform 0.2s ease;
}
</style>
