<div class="fade-in">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem;">
        <h1 style="margin: 0; font-size: clamp(1.4rem, 4vw, 2rem);"><?= \App\Helpers\Lang::t('notifications') ?></h1>
        <?php if (!empty($notifications)): ?>
            <span class="badge" style="background: var(--primary); color: white;"><?= count($notifications) ?></span>
        <?php endif; ?>
    </div>

    <div class="card" style="padding: 0; overflow: hidden;">
        <?php if (empty($notifications)): ?>
            <div style="text-align: center; padding: 4rem 2rem; color: var(--text-muted);">
                <i class="fas fa-bell-slash" style="font-size: 3rem; opacity: 0.3; display: block; margin-bottom: 1rem;"></i>
                <p><?= \App\Helpers\Lang::t('no_notifications') ?></p>
            </div>
        <?php else: ?>
            <ul style="list-style: none; padding: 0; margin: 0;">
                <?php foreach ($notifications as $i => $notification): ?>
                    <?php $data = json_decode($notification['data'], true); ?>
                    <?php
                        $icons = [
                            'new_comment'  => ['icon' => 'fa-comment',      'color' => '#6366f1', 'key' => 'notif_new_comment_label'],
                            'new_reply'    => ['icon' => 'fa-reply',         'color' => '#8b5cf6', 'key' => 'notif_new_reply_label'],
                            'vote'         => ['icon' => 'fa-thumbs-up',     'color' => '#10b981', 'key' => 'notif_vote_label'],
                            'accepted'     => ['icon' => 'fa-check-circle',  'color' => '#f59e0b', 'key' => 'notif_accepted_label'],
                            'message'      => ['icon' => 'fa-envelope',      'color' => '#ec4899', 'key' => 'notif_message_label'],
                        ];
                        $typeKey = 'system';
                        $matchedKey = 'notif_system_label';
                        $actionKey  = null;
                        foreach ($icons as $k => $v) {
                            if (str_contains($notification['type'], $k)) {
                                $typeKey    = $k;
                                $matchedKey = $v['key'];
                                $actionKey  = 'notif_' . $k;
                                break;
                            }
                        }
                        $ic = $icons[$typeKey] ?? ['icon' => 'fa-bell', 'color' => 'var(--primary)', 'key' => 'notif_system_label'];
                        $L = \App\Helpers\Lang::class;
                    ?>
                    <li style="
                        padding: 1rem 1.25rem;
                        border-bottom: 1px solid var(--border);
                        display: flex;
                        align-items: flex-start;
                        gap: 1rem;
                        <?= !$notification['is_read'] ? 'background: rgba(99, 102, 241, 0.05); border-left: 3px solid var(--primary);' : '' ?>
                        transition: background 0.2s;
                    "
                    <?php if ($i === count($notifications)-1): ?>style="border-bottom: none;"<?php endif; ?>>

                        <!-- Icon -->
                        <div style="
                            width: 40px; height: 40px; min-width: 40px;
                            border-radius: 50%;
                            background: <?= $ic['color'] ?>22;
                            display: flex; align-items: center; justify-content: center;
                            color: <?= $ic['color'] ?>;
                            font-size: 1rem;
                        ">
                            <i class="fas <?= $ic['icon'] ?>"></i>
                        </div>

                        <!-- Content -->
                        <div style="flex: 1; min-width: 0;">
                            <div style="font-size: 0.9rem; line-height: 1.4; word-break: break-word;">
                                <span style="font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: <?= $ic['color'] ?>; letter-spacing: 0.5px;">
                                    <?= \App\Helpers\Lang::t($matchedKey) ?>
                                </span><br>
                                <strong><?= htmlspecialchars($data['sender_name'] ?? 'System') ?></strong>
                                <?php if ($actionKey): ?>
                                    <span style="color: var(--text-muted);"> <?= \App\Helpers\Lang::t($actionKey) ?></span>
                                <?php endif; ?>
                                <?php if (!empty($data['content'])): ?>
                                    <div style="color: var(--text-muted); font-size: 0.8rem; margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2;">
                                        "<?= htmlspecialchars(mb_strimwidth($data['content'], 0, 100, '…')) ?>"
                                    </div>
                                <?php endif; ?>
                            </div>
                            <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.4rem;">
                                <i class="far fa-clock" style="margin-right: 0.25rem;"></i><?= date('H:i · d M Y', strtotime($notification['created_at'])) ?>
                            </div>
                        </div>

                        <?php if (!$notification['is_read']): ?>
                            <div style="width: 8px; height: 8px; min-width: 8px; border-radius: 50%; background: var(--primary); margin-top: 0.4rem;"></div>
                        <?php endif; ?>
                    </li>
                <?php endforeach; ?>
            </ul>
        <?php endif; ?>
    </div>
</div>
