<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{meta.title}</title>
    <meta name="description" content="{meta.description}">
    <link rel="stylesheet" href="/css/admin.css">
    <style>
        .notification-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        .notification-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .notification-header h1 {
            margin: 0;
            font-size: 2rem;
            color: var(--color-text);
        }

        .unread-badge {
            background: var(--color-danger);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.875rem;
            font-weight: 600;
        }

        .notification-actions {
            margin-bottom: 1.5rem;
        }

        .btn-mark-all {
            background: var(--color-primary);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            cursor: pointer;
            font-size: 0.875rem;
            transition: background 0.2s;
        }

        .btn-mark-all:hover {
            background: var(--color-primary-dark);
        }

        .notification-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .notification-item {
            background: white;
            border: 1px solid var(--color-border);
            border-radius: 0.5rem;
            padding: 1.5rem;
            transition: all 0.2s;
            position: relative;
        }

        .notification-item.unread {
            border-left: 4px solid var(--color-primary);
            background: #f8f9fa;
        }

        .notification-item:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .notification-item-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.75rem;
        }

        .notification-title-wrapper {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex: 1;
        }

        .notification-icon {
            font-size: 1.5rem;
        }

        .notification-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--color-text);
            margin: 0;
        }

        .notification-meta {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

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

        .admin-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .admin-badge--danger {
            background: #fee;
            color: #c33;
        }

        .admin-badge--warning {
            background: #ffc;
            color: #c93;
        }

        .admin-badge--info {
            background: #e3f2fd;
            color: #1976d2;
        }

        .admin-badge--secondary {
            background: #f5f5f5;
            color: #666;
        }

        .notification-body {
            color: var(--color-text-secondary);
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .notification-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .notification-action {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--color-primary);
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 500;
            transition: color 0.2s;
        }

        .notification-action:hover {
            color: var(--color-primary-dark);
        }

        .btn-mark-read {
            background: transparent;
            border: 1px solid var(--color-border);
            color: var(--color-text-secondary);
            padding: 0.375rem 0.75rem;
            border-radius: 0.25rem;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.2s;
        }

        .btn-mark-read:hover {
            background: var(--color-primary);
            color: white;
            border-color: var(--color-primary);
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            margin-top: 2rem;
            padding: 1rem;
        }

        .pagination-link {
            padding: 0.5rem 1rem;
            background: white;
            border: 1px solid var(--color-border);
            border-radius: 0.25rem;
            color: var(--color-text);
            text-decoration: none;
            transition: all 0.2s;
        }

        .pagination-link:hover {
            background: var(--color-primary);
            color: white;
            border-color: var(--color-primary);
        }

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

        .empty-state-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
        }

        .empty-state-title {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color: var(--color-text);
        }
    </style>
</head>
<body>
    <div class="admin-layout">
        <aside class="admin-sidebar">
            <div class="admin-sidebar-header">
                <h2>Admin Panel</h2>
            </div>
            <nav class="admin-nav">
                <a href="/admin/dashboard" class="admin-nav-link">
                    📊 Dashboard
                </a>
                <a href="/admin/ml/dashboard" class="admin-nav-link">
                    🤖 ML Dashboard
                </a>
                <a href="/admin/notifications" class="admin-nav-link admin-nav-link--active">
                    🔔 Notifications
                    <span class="unread-badge" if="$unread_count > 0">{{ $unread_count }}</span>
                </a>
                <a href="/admin/users" class="admin-nav-link">
                    👥 Users
                </a>
                <a href="/admin/settings" class="admin-nav-link">
                    ⚙️ Settings
                </a>
            </nav>
        </aside>

        <main class="admin-main">
            <div class="notification-container">
                <div class="notification-header">
                    <h1>Notifications</h1>
                    <span class="unread-badge" if="$unread_count > 0">{{ $unread_count }} unread</span>
                </div>

                <div class="notification-actions" if="$unread_count > 0">
                    <button class="btn-mark-all" onclick="markAllAsRead()">
                        Mark all as read
                    </button>
                </div>

                <div class="notification-list" if="$has_notifications">
                    <div foreach="$notifications as $notification" class="notification-item" data-id="{{ $notification['id'] }}">
                        <div class="notification-item-header">
                            <div class="notification-title-wrapper">
                                <span class="notification-icon">{{ $notification['icon'] }}</span>
                                <h3 class="notification-title">{{ $notification['title'] }}</h3>
                            </div>
                            <div class="notification-meta">
                                <span class="admin-badge {{ $notification['badge_class'] }}">{{ $notification['priority'] }}</span>
                                <span class="notification-time">{{ $notification['created_at_human'] }}</span>
                            </div>
                        </div>

                        <div class="notification-body">
                            {{ $notification['body'] }}
                        </div>

                        <div class="notification-footer">
                            <div>
                                <a href="{{ $notification['action_url'] }}" class="notification-action" if="$notification['action_url']">
                                    {{ $notification['action_label'] }} →
                                </a>
                            </div>
                            <button
                                class="btn-mark-read"
                                onclick="markAsRead('{{ $notification['id'] }}')"
                            >
                                Mark as read
                            </button>
                        </div>
                    </div>
                </div>

                <div class="pagination" if="$has_more || $current_page > 1">
                    <a href="/admin/notifications?page={{ $current_page - 1 }}" class="pagination-link" if="$current_page > 1">
                        ← Previous
                    </a>

                    <span class="pagination-info">Page {{ $current_page }}</span>

                    <a href="/admin/notifications?page={{ $current_page + 1 }}" class="pagination-link" if="$has_more">
                        Next →
                    </a>
                </div>

                <div class="empty-state" if="!$has_notifications">
                    <div class="empty-state-icon">📭</div>
                    <h2 class="empty-state-title">No notifications</h2>
                    <p>You're all caught up! No notifications to display.</p>
                </div>
            </div>
        </main>
    </div>

    <script>
        async function markAsRead(notificationId) {
            try {
                const response = await fetch(`/admin/notifications/${notificationId}/read`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                const data = await response.json();

                if (data.success) {
                    // Update UI
                    const item = document.querySelector(`[data-id="${notificationId}"]`);
                    if (item) {
                        item.classList.remove('unread');

                        const button = item.querySelector('.btn-mark-read');
                        if (button) {
                            button.textContent = '✓ Read';
                            button.disabled = true;
                        }
                    }

                    // Update unread count badge
                    updateUnreadCount(data.unread_count);
                }
            } catch (error) {
                console.error('Error marking notification as read:', error);
                alert('Failed to mark notification as read. Please try again.');
            }
        }

        async function markAllAsRead() {
            if (!confirm('Mark all notifications as read?')) {
                return;
            }

            try {
                const response = await fetch('/admin/notifications/read-all', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                const data = await response.json();

                if (data.success) {
                    // Reload page to show updated state
                    window.location.reload();
                }
            } catch (error) {
                console.error('Error marking all notifications as read:', error);
                alert('Failed to mark all notifications as read. Please try again.');
            }
        }

        function updateUnreadCount(count) {
            const badges = document.querySelectorAll('.unread-badge');
            badges.forEach(badge => {
                if (count === 0) {
                    badge.style.display = 'none';
                } else {
                    badge.textContent = count;
                    badge.style.display = '';
                }
            });
        }

        // Poll for new notifications every 30 seconds
        setInterval(async () => {
            try {
                const response = await fetch('/admin/notifications/unread-count');
                const data = await response.json();

                const currentBadge = document.querySelector('.unread-badge');
                const currentCount = currentBadge ? parseInt(currentBadge.textContent) || 0 : 0;

                if (data.unread_count !== currentCount) {
                    updateUnreadCount(data.unread_count);

                    if (data.unread_count > currentCount) {
                        console.log('New notifications received');
                    }
                }
            } catch (error) {
                console.error('Error polling for notifications:', error);
            }
        }, 30000);
    </script>
</body>
</html>
