<?php
function nt_h($v) {
    return htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8');
}
$notifications = $notifications ?? [];
$status = $_GET['status'] ?? '';
?>

<div class="container-fluid py-3">

    <div class="card border-0 shadow-sm mb-4" style="border-radius:24px;background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff;">
        <div class="card-body p-4">
            <h3 class="fw-bold mb-1"><i class="fa fa-bell"></i> My Notifications</h3>
            <div class="opacity-75">Workflow updates, email delivery notices, review updates, and system alerts.</div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4" style="border-radius:22px;">
        <div class="card-body p-4 d-flex flex-wrap gap-2">
            <a class="btn <?= $status==='' ? 'btn-primary' : 'btn-outline-primary' ?>" href="/easychair/notifications">All</a>
            <a class="btn <?= $status==='unread' ? 'btn-primary' : 'btn-outline-primary' ?>" href="/easychair/notifications?status=unread">Unread</a>
            <a class="btn <?= $status==='read' ? 'btn-primary' : 'btn-outline-primary' ?>" href="/easychair/notifications?status=read">Read</a>
            <a class="btn btn-success ms-auto" href="/easychair/notifications/mark-all-read">Mark all read</a>
        </div>
    </div>

    <div class="card border-0 shadow-sm" style="border-radius:22px;">
        <div class="card-body p-4">

            <?php foreach ($notifications as $n): ?>
                <div class="border rounded-4 p-3 mb-3 <?= empty($n['is_read']) ? 'bg-light' : '' ?>">
                    <div class="d-flex justify-content-between flex-wrap gap-2">
                        <div>
                            <h5 class="fw-bold mb-1">
                                <?php if (empty($n['is_read'])): ?>
                                    <span class="badge bg-danger">New</span>
                                <?php endif; ?>
                                <?= nt_h($n['title']) ?>
                            </h5>

                            <div class="text-muted small">
                                <?= nt_h($n['notification_type']) ?> |
                                <?= nt_h($n['event_key']) ?> |
                                <?= nt_h($n['conference_short_name']) ?> |
                                <?= nt_h($n['created_at']) ?>
                            </div>
                        </div>

                        <div class="d-flex gap-1">
                            <?php if (!empty($n['link_url'])): ?>
                                <a class="btn btn-sm btn-primary" href="<?= nt_h($n['link_url']) ?>">Open</a>
                            <?php endif; ?>

                            <?php if (empty($n['is_read'])): ?>
                                <a class="btn btn-sm btn-outline-success" href="/easychair/notifications/read?id=<?= (int)$n['id'] ?>">Mark read</a>
                            <?php endif; ?>
                        </div>
                    </div>

                    <?php if (!empty($n['submission_id'])): ?>
                        <div class="mt-2">
                            <strong><?= nt_h($n['submission_no'] ?: ('Submission #' . $n['submission_id'])) ?></strong>
                            <span class="text-muted"><?= nt_h($n['submission_title']) ?></span>
                        </div>
                    <?php endif; ?>

                    <?php if (!empty($n['body'])): ?>
                        <div class="mt-2"><?= nl2br(nt_h($n['body'])) ?></div>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>

            <?php if (!$notifications): ?>
                <div class="alert alert-info text-center">No notifications found.</div>
            <?php endif; ?>

        </div>
    </div>
</div>
