<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiveComponent Notification Center Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            padding: 2rem;
            background: #f5f5f5;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        h1 {
            margin-bottom: 1rem;
            color: #333;
        }

        .intro {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            margin-bottom: 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .intro h2 {
            font-size: 1.25rem;
            margin-bottom: 1rem;
            color: #444;
        }

        .feature-list {
            line-height: 1.8;
            color: #666;
        }

        .feature-list li {
            margin-bottom: 0.5rem;
        }

        .demo-section {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }

        .demo-controls {
            background: #f9f9f9;
            padding: 1.5rem;
            border-radius: 6px;
            margin-top: 2rem;
        }

        .demo-controls h3 {
            margin-bottom: 1rem;
            color: #333;
        }

        .control-group {
            margin-bottom: 1rem;
        }

        .control-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: #555;
        }

        .control-row {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        select, input {
            padding: 0.5rem;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            font-size: 0.875rem;
        }

        .btn-demo {
            padding: 0.75rem 1.5rem;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.2s;
        }

        .btn-demo:hover {
            background: #1976D2;
        }

        .notification-wrapper {
            position: relative;
            min-height: 400px;
            display: flex;
            justify-content: flex-end;
        }

        .info-box {
            background: #e3f2fd;
            padding: 1rem;
            border-radius: 4px;
            margin-top: 1rem;
            border-left: 4px solid #2196F3;
        }

        .info-box strong {
            color: #1976D2;
        }
    </style>
</head>
<body data-module="livecomponent">
    <div class="container">
        <h1>🔔 LiveComponent Notification Center Demo</h1>

        <div class="intro">
            <h2>Real-Time Notification System</h2>
            <ul class="feature-list">
                <li>✅ <strong>Real-time Updates:</strong> Benachrichtigungen in Echtzeit anzeigen</li>
                <li>✅ <strong>Multiple Types:</strong> Erfolg, Info, Warnung und Fehler-Benachrichtigungen</li>
                <li>✅ <strong>Mark as Read/Unread:</strong> Einzelne Benachrichtigungen als gelesen/ungelesen markieren</li>
                <li>✅ <strong>Bulk Actions:</strong> Alle als gelesen markieren oder gelesene löschen</li>
                <li>✅ <strong>Filtering:</strong> Nach Benachrichtigungstyp filtern</li>
                <li>✅ <strong>Unread Count:</strong> Badge mit Anzahl ungelesener Benachrichtigungen</li>
                <li>✅ <strong>Auto-dismiss:</strong> Automatisches Löschen alter Benachrichtigungen (Max. 50)</li>
                <li>✅ <strong>Responsive Design:</strong> Optimiert für Desktop und Mobile</li>
            </ul>
        </div>

        <div class="demo-section">
            <div class="notification-wrapper">
                {{notification_center}}
            </div>

            <div class="demo-controls">
                <h3>Demo-Benachrichtigungen erstellen</h3>
                <p style="margin-bottom: 1rem; color: #666;">
                    Klicken Sie auf die Buttons unten, um verschiedene Arten von Benachrichtigungen zu erstellen:
                </p>

                <div class="control-row">
                    <button class="btn-demo" onclick="addSuccessNotification()">
                        ✅ Erfolg
                    </button>
                    <button class="btn-demo" style="background: #2196F3;" onclick="addInfoNotification()">
                        ℹ️ Info
                    </button>
                    <button class="btn-demo" style="background: #FFC107; color: #333;" onclick="addWarningNotification()">
                        ⚠️ Warnung
                    </button>
                    <button class="btn-demo" style="background: #f44336;" onclick="addErrorNotification()">
                        ❌ Fehler
                    </button>
                </div>

                <div class="info-box">
                    <strong>Tipp:</strong> Klicken Sie auf die Glocke oben rechts, um das Benachrichtigungspanel zu öffnen/schließen.
                    Verwenden Sie die Filter-Tabs, um Benachrichtigungen nach Typ zu filtern.
                </div>
            </div>
        </div>
    </div>

    <script>
        // Helper functions to trigger addNotification via LiveComponent action
        function addSuccessNotification() {
            const titles = [
                'Erfolgreich gespeichert',
                'Upload abgeschlossen',
                'Änderungen übernommen',
                'Aktion erfolgreich'
            ];
            const messages = [
                'Ihre Daten wurden erfolgreich gespeichert.',
                'Die Datei wurde erfolgreich hochgeladen.',
                'Ihre Änderungen wurden erfolgreich übernommen.',
                'Die Aktion wurde erfolgreich ausgeführt.'
            ];

            triggerAddNotification('success', getRandomItem(titles), getRandomItem(messages));
        }

        function addInfoNotification() {
            const titles = [
                'Neue Version verfügbar',
                'Systemwartung',
                'Hinweis',
                'Information'
            ];
            const messages = [
                'Eine neue Version ist verfügbar. Bitte aktualisieren Sie.',
                'Systemwartung ist für morgen geplant.',
                'Bitte beachten Sie die neuen Richtlinien.',
                'Dies ist eine informative Benachrichtigung.'
            ];

            triggerAddNotification('info', getRandomItem(titles), getRandomItem(messages));
        }

        function addWarningNotification() {
            const titles = [
                'Warnung: Speicherplatz',
                'Achtung',
                'Warnung',
                'Bitte beachten'
            ];
            const messages = [
                'Ihr Speicherplatz ist fast voll.',
                'Bitte überprüfen Sie Ihre Eingaben.',
                'Diese Aktion kann nicht rückgängig gemacht werden.',
                'Es wurden potenzielle Probleme erkannt.'
            ];

            triggerAddNotification('warning', getRandomItem(titles), getRandomItem(messages));
        }

        function addErrorNotification() {
            const titles = [
                'Fehler beim Speichern',
                'Verbindungsfehler',
                'Fehler aufgetreten',
                'Kritischer Fehler'
            ];
            const messages = [
                'Die Daten konnten nicht gespeichert werden.',
                'Verbindung zum Server fehlgeschlagen.',
                'Ein unerwarteter Fehler ist aufgetreten.',
                'Bitte kontaktieren Sie den Support.'
            ];

            triggerAddNotification('error', getRandomItem(titles), getRandomItem(messages));
        }

        function getRandomItem(array) {
            return array[Math.floor(Math.random() * array.length)];
        }

        function triggerAddNotification(type, title, message) {
            // Find the notification center component
            const component = document.querySelector('[data-live-component^="notification-center:"]');
            if (!component) {
                console.error('Notification center component not found');
                return;
            }

            // Get the component ID from the element
            const componentId = component.getAttribute('data-live-component');

            // Use LiveComponent manager to execute action
            if (window.LiveComponent) {
                window.LiveComponent.executeAction(componentId, 'addNotification', {
                    type: type,
                    title: title,
                    message: message
                });
            } else {
                console.error('LiveComponent manager not found');
            }
        }
    </script>
</body>
</html>
