<div class="max-w-3xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <div><h1 class="text-2xl font-bold text-gray-900">Notifications</h1><p class="text-sm text-gray-500 mt-1"><?= $unreadCount ?> unread</p></div>
        <div class="flex gap-2">
            <div class="flex bg-gray-100 rounded-lg p-0.5 text-sm">
                <a href="?page=notifications" class="px-3 py-1.5 rounded-md <?= empty($filter) ? 'bg-white shadow text-gray-900 font-medium' : 'text-gray-600 hover:text-gray-900' ?>">All</a>
                <a href="?page=notifications&filter=unread" class="px-3 py-1.5 rounded-md <?= $filter === 'unread' ? 'bg-white shadow text-gray-900 font-medium' : 'text-gray-600 hover:text-gray-900' ?>">Unread</a>
            </div>
            <?php if ($unreadCount > 0): ?>
            <form method="POST" action="?page=notifications&action=markAllRead"><?= CSRF::field() ?><button class="px-3 py-1.5 text-sm text-indigo-600 hover:text-indigo-800 font-medium">Mark all read</button></form>
            <?php endif; ?>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 divide-y divide-gray-100">
        <?php if (empty($notifications)): ?>
            <div class="px-6 py-16 text-center">
                <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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 class="text-gray-400 text-sm"><?= $filter === 'unread' ? 'No unread notifications.' : 'No notifications yet.' ?></p>
            </div>
        <?php else: foreach ($notifications as $n): $isUnread = empty($n['read_at']); ?>
            <div class="flex items-start gap-4 px-5 py-4 <?= $isUnread ? 'bg-indigo-50/40' : '' ?> hover:bg-gray-50 transition">
                <div class="mt-0.5 flex-shrink-0">
                    <?php
                    $iconColor = 'text-gray-400'; $bgColor = 'bg-gray-100';
                    $type = $n['type'] ?? 'info';
                    if ($type === 'payment') { $iconColor = 'text-green-500'; $bgColor = 'bg-green-100'; }
                    elseif ($type === 'maintenance') { $iconColor = 'text-orange-500'; $bgColor = 'bg-orange-100'; }
                    elseif ($type === 'lease') { $iconColor = 'text-blue-500'; $bgColor = 'bg-blue-100'; }
                    elseif ($type === 'alert') { $iconColor = 'text-red-500'; $bgColor = 'bg-red-100'; }
                    ?>
                    <div class="w-9 h-9 rounded-full <?= $bgColor ?> flex items-center justify-center">
                        <svg class="w-4 h-4 <?= $iconColor ?>" 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>
                    </div>
                </div>
                <div class="flex-1 min-w-0">
                    <a href="?page=notifications&action=markRead&id=<?= $n['id'] ?>" class="block">
                        <p class="text-sm <?= $isUnread ? 'font-semibold text-gray-900' : 'text-gray-700' ?>"><?= htmlspecialchars($n['title'] ?? 'Notification') ?></p>
                        <p class="text-sm text-gray-500 mt-0.5 line-clamp-2"><?= htmlspecialchars($n['message'] ?? '') ?></p>
                        <p class="text-xs text-gray-400 mt-1"><?= timeAgo($n['created_at']) ?></p>
                    </a>
                </div>
                <div class="flex items-center gap-1 flex-shrink-0">
                    <?php if ($isUnread): ?><span class="w-2 h-2 rounded-full bg-indigo-500"></span><?php endif; ?>
                    <form method="POST" action="?page=notifications&action=delete&id=<?= $n['id'] ?>" class="ml-2"><?= CSRF::field() ?><button class="text-gray-300 hover:text-red-500 transition" title="Delete"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></form>
                </div>
            </div>
        <?php endforeach; endif; ?>
    </div>

    <?php if (!empty($pagination)): ?><div class="mt-4"><?= $pagination ?></div><?php endif; ?>
</div>
