<div class="notifications-container">
    <div class="notifications-header">
        <h1><i class="fas fa-bell"></i> Сповіщення</h1>
        <div class="header-actions">
            <?php if (!empty($notifications)): ?>
            <button class="btn btn-secondary btn-sm" id="mark-all-btn">
                <i class="fas fa-check-double"></i> Прочитати все
            </button>
            <button class="btn btn-danger btn-sm" id="clear-all-btn" style="background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2);">
                <i class="fas fa-trash-alt"></i> Очистити все
            </button>
            <?php endif; ?>
        </div>
    </div>

    <div class="notifications-tabs">
        <button class="tab-btn active" data-filter="all">
            Усі <span class="tab-count"><?= count($notifications) ?></span>
        </button>
        <button class="tab-btn" data-filter="unread">
            Непрочитані <span class="tab-count" id="unread-count"><?= count(array_filter($notifications, fn($n) => !$n['is_read'])) ?></span>
        </button>
    </div>

    <div class="notifications-list">
        <?php if (!empty($notifications)): ?>
            <?php foreach ($notifications as $notif): ?>
            <div class="notification-item <?= $notif['is_read'] ? 'read' : 'unread' ?>" data-id="<?= $notif['id'] ?>">
                <div class="notification-icon">
                    <?php
                        $icons = [
                            'new_comment' => 'fa-comment',
                            'post_liked' => 'fa-thumbs-up',
                            'user_followed' => 'fa-user-plus',
                            'mention' => 'fa-at',
                            'answer_accepted' => 'fa-check-circle',
                            'default' => 'fa-bell'
                        ];
                        $icon = $icons[$notif['type']] ?? $icons['default'];
                    ?>
                    <i class="fas <?= $icon ?>"></i>
                </div>
                
                <div class="notification-content">
                    <div class="notification-title">
                        <?php
                            $data = json_decode($notif['data'], true);
                            echo htmlspecialchars($data['content'] ?? $notif['type']);
                        ?>
                    </div>
                    <div class="notification-meta">
                        <?php
                            $time = strtotime($notif['created_at']);
                            $diff = time() - $time;
                            if ($diff < 60) $timeStr = 'щойно';
                            elseif ($diff < 3600) $timeStr = floor($diff/60) . ' хв назад';
                            elseif ($diff < 86400) $timeStr = floor($diff/3600) . ' год назад';
                            else $timeStr = date('d M Y H:i', $time);
                            echo $timeStr;
                        ?>
                    </div>
                </div>

                <?php if (!$notif['is_read']): ?>
                <div class="notification-indicator"></div>
                <?php endif; ?>

                <div class="notification-actions">
                    <button class="btn-icon" onclick="markNotificationRead(<?= $notif['id'] ?>)" title="Позначити як прочитане">
                        <i class="fas fa-check"></i>
                    </button>
                </div>
            </div>
            <?php endforeach; ?>
        <?php else: ?>
        <div class="empty-state">
            <i class="fas fa-inbox"></i>
            <h3>Немає сповіщень</h3>
            <p>Коли буде щось нового, ви отримаєте сповіщення</p>
        </div>
        <?php endif; ?>
    </div>
</div>

<style>
.notifications-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
}

.notifications-header h1 {
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notifications-header h1 i {
    color: #f59e0b;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
}

.notifications-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
}

.tab-btn {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    position: relative;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tab-btn:hover {
    color: var(--text);
}

.tab-btn.active {
    color: #6366f1;
    font-weight: 600;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 0;
    right: 0;
    height: 2px;
    background: #6366f1;
}

.tab-count {
    background: rgba(99,102,241,0.2);
    color: #6366f1;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.notification-item.unread {
    background: rgba(99,102,241,0.05);
    border-color: rgba(99,102,241,0.2);
}

.notification-item:hover {
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 4px 12px rgba(99,102,241,0.1);
    transform: translateX(2px);
}

.notification-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(99,102,241,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6366f1;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.notification-item.unread .notification-icon {
    background: rgba(99,102,241,0.2);
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.notification-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.notification-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6366f1;
    flex-shrink: 0;
    margin-left: auto;
}

.notification-actions {
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s;
    margin-left: auto;
}

.notification-item:hover .notification-actions {
    opacity: 1;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(99,102,241,0.1);
    border: none;
    color: #6366f1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.btn-icon:hover {
    background: rgba(99,102,241,0.2);
    transform: scale(1.1);
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
    .notifications-container {
        padding: 1rem;
    }
    
    .notifications-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .notification-item {
        padding: 0.75rem;
    }
    
    .notification-actions {
        opacity: 1;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabBtns = document.querySelectorAll('.tab-btn');
    const items = document.querySelectorAll('.notification-item');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    tabBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            tabBtns.forEach(b => b.classList.remove('active'));
            this.classList.add('active');

            const filter = this.getAttribute('data-filter');
            items.forEach(item => {
                if (filter === 'all') {
                    item.style.display = 'flex';
                } else if (filter === 'unread') {
                    item.style.display = item.classList.contains('unread') ? 'flex' : 'none';
                }
            });
        });
    });

    const markAllBtn = document.getElementById('mark-all-btn');
    if (markAllBtn) {
        markAllBtn.addEventListener('click', function() {
            fetch('/api/notifications/mark-all-read', { 
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': csrfToken }
            })
            .then(() => location.reload());
        });
    }

    const clearAllBtn = document.getElementById('clear-all-btn');
    if (clearAllBtn) {
        clearAllBtn.addEventListener('click', function() {
            if (confirm('Ви впевнені, що хочете видалити всі сповіщення?')) {
                fetch('/api/notifications/clear-all', { 
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken }
                })
                .then(() => location.reload());
            }
        });
    }
});

function markNotificationRead(id) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    fetch('/api/notifications/' + id + '/read', { 
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': csrfToken }
    })
    .then(() => {
        const item = document.querySelector('[data-id="' + id + '"]');
        if (item) {
            item.classList.remove('unread');
            item.classList.add('read');
            const indicator = item.querySelector('.notification-indicator');
            if (indicator) indicator.remove();
            updateUnreadCount();
        }
    });
}

function updateUnreadCount() {
    const unreadCount = document.querySelectorAll('.notification-item.unread').length;
    const unreadEl = document.getElementById('unread-count');
    if (unreadEl) unreadEl.textContent = unreadCount;
}
</script>
