<?php
ob_start();
$user_id = $_SESSION['user_id'];
$page = isset($_GET['p']) ? intval($_GET['p']) : 1;
$perpage = 15;
$offset = ($page - 1) * $perpage;

// 获取未读数量
$unread_count = $db->fetchOne("SELECT COUNT(*) as cnt FROM notifications WHERE user_id IN (0, $user_id) AND is_read = 0 AND status = 1")['cnt'] ?? 0;

// 获取消息列表
$total = $db->fetchOne("SELECT COUNT(*) as cnt FROM notifications WHERE user_id IN (0, $user_id) AND status = 1")['cnt'] ?? 0;
$messages = $db->fetchAll("
    SELECT * FROM notifications 
    WHERE user_id IN (0, $user_id) AND status = 1 
    ORDER BY is_read ASC, id DESC 
    LIMIT $offset, $perpage
");

// 处理全部已读
if (isset($_GET['read_all'])) {
    $db->query("UPDATE notifications SET is_read = 1 WHERE user_id IN (0, $user_id) AND is_read = 0");
    header('Location: ?page=notifications');
    exit;
}
?>

<style>
.notifications-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 600;
}

.unread-badge {
    background: #ef4444;
    color: white;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 14px;
    margin-left: 10px;
}

.message-list {
    background: white;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
}

.message-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

.message-item:hover {
    background: #f8fafc;
}

.message-item.unread {
    background: #f0fdf4;
}

.message-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.message-icon.system { background: #667eea15; }
.message-icon.order { background: #10b98115; }
.message-icon.ticket { background: #f59e0b15; }
.message-icon.announcement { background: #ef444415; }

.message-content {
    flex: 1;
}

.message-title {
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.unread-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
}

.message-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.message-time {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 6px;
}

.message-action {
    color: #94a3b8;
}

.empty-state {
    text-align: center;
    padding: 60px;
    color: #94a3b8;
}

.btn-read-all {
    padding: 8px 16px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.page-link {
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    text-decoration: none;
}

.page-link.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}
</style>

<div class="notifications-container">
    <div class="page-header">
        <h2>
            <img src="https://api.iconify.design/mdi:bell-outline.svg?color=%23667eea" width="26" height="26" alt="">
            消息中心
            <?php if ($unread_count > 0): ?>
                <span class="unread-badge"><?php echo $unread_count; ?> 条未读</span>
            <?php endif; ?>
        </h2>
        <?php if ($unread_count > 0): ?>
            <a href="?page=notifications&read_all=1" class="btn-read-all">全部已读</a>
        <?php endif; ?>
    </div>
    
    <div class="message-list">
        <?php if (empty($messages)): ?>
            <div class="empty-state">
                <img src="https://api.iconify.design/mdi:bell-off.svg?color=%2394a3b8" width="48" height="48" alt="">
                <p>暂无消息</p>
            </div>
        <?php else: ?>
            <?php foreach ($messages as $msg): ?>
                <div class="message-item <?php echo $msg['is_read'] ? '' : 'unread'; ?>" onclick="readMessage(<?php echo $msg['id']; ?>)">
                    <div class="message-icon <?php echo $msg['type']; ?>">
                        <?php
                        $icons = [
                            'system' => 'bell',
                            'order' => 'package',
                            'ticket' => 'ticket',
                            'announcement' => 'bullhorn'
                        ];
                        $icon = $icons[$msg['type']] ?? 'bell';
                        ?>
                        <img src="https://api.iconify.design/mdi:<?php echo $icon; ?>.svg?color=%23667eea" width="24" height="24" alt="">
                    </div>
                    <div class="message-content">
                        <div class="message-title">
                            <?php echo htmlspecialchars($msg['title']); ?>
                            <?php if (!$msg['is_read']): ?>
                                <span class="unread-dot"></span>
                            <?php endif; ?>
                        </div>
                        <div class="message-desc"><?php echo htmlspecialchars(mb_substr($msg['content'], 0, 50)); ?>...</div>
                        <div class="message-time"><?php echo date('Y-m-d H:i', strtotime($msg['created_at'])); ?></div>
                    </div>
                    <div class="message-action">
                        <img src="https://api.iconify.design/mdi:chevron-right.svg?color=%2394a3b8" width="20" height="20" alt="">
                    </div>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
    
    <?php if ($total > $perpage): ?>
        <div class="pagination">
            <?php for ($i = 1; $i <= ceil($total / $perpage); $i++): ?>
                <a href="?page=notifications&p=<?php echo $i; ?>" class="page-link <?php echo $i == $page ? 'active' : ''; ?>">
                    <?php echo $i; ?>
                </a>
            <?php endfor; ?>
        </div>
    <?php endif; ?>
</div>

<script>
function readMessage(id) {
    fetch('/api/notification_read.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'id=' + id
    }).then(() => {
        location.href = '?page=notification_detail&id=' + id;
    });
}
</script>