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

        body {
            font-family: system-ui, -apple-system, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            max-width: 600px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        h1 {
            color: #667eea;
            margin-bottom: 10px;
            font-size: 32px;
        }

        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 16px;
        }

        .status-card {
            background: #f7fafc;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
            border-left: 4px solid #667eea;
        }

        .status-label {
            color: #667eea;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .status-value {
            color: #2d3748;
            font-size: 18px;
            font-weight: 500;
        }

        .status-subscribed {
            color: #48bb78;
        }

        .status-unsubscribed {
            color: #f56565;
        }

        .button-group {
            display: grid;
            gap: 15px;
            margin-bottom: 30px;
        }

        button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 16px 24px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }

        button:active {
            transform: translateY(0);
        }

        button:disabled {
            background: #cbd5e0;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        button.secondary {
            background: white;
            color: #667eea;
            border: 2px solid #667eea;
            box-shadow: none;
        }

        button.secondary:hover {
            background: #f7fafc;
        }

        button.danger {
            background: linear-gradient(135deg, #f56565 0%, #c53030 100%);
            box-shadow: 0 4px 15px rgba(245, 101, 101, 0.3);
        }

        button.danger:hover {
            box-shadow: 0 6px 20px rgba(245, 101, 101, 0.4);
        }

        .info-box {
            background: #edf2f7;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .info-title {
            color: #2d3748;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .info-list {
            list-style: none;
            padding: 0;
        }

        .info-list li {
            color: #4a5568;
            padding: 8px 0;
            padding-left: 24px;
            position: relative;
        }

        .info-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #48bb78;
            font-weight: bold;
        }

        .console-output {
            background: #1a202c;
            color: #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            max-height: 200px;
            overflow-y: auto;
            margin-top: 20px;
        }

        .console-output .log-entry {
            margin-bottom: 8px;
            opacity: 0;
            animation: fadeIn 0.3s ease forwards;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

        .console-output .log-success {
            color: #48bb78;
        }

        .console-output .log-error {
            color: #f56565;
        }

        .console-output .log-info {
            color: #4299e1;
        }

        @media (max-width: 640px) {
            .container {
                padding: 24px;
            }

            h1 {
                font-size: 24px;
            }

            button {
                padding: 14px 20px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔔 WebPush Demo</h1>
        <p class="subtitle">Teste Push-Benachrichtigungen in deinem Browser</p>

        <div class="status-card">
            <div class="status-label">Status</div>
            <div class="status-value" id="subscription-status">Prüfe...</div>
        </div>

        <div class="button-group">
            <button id="btn-init" onclick="initWebPush()">
                🚀 WebPush initialisieren
            </button>
            <button id="btn-subscribe" onclick="subscribe()" disabled>
                ✅ Push-Benachrichtigungen aktivieren
            </button>
            <button id="btn-unsubscribe" onclick="unsubscribe()" class="danger" disabled>
                ❌ Push-Benachrichtigungen deaktivieren
            </button>
            <button id="btn-test" onclick="sendTestNotification()" class="secondary" disabled>
                🧪 Test-Benachrichtigung senden
            </button>
        </div>

        <div class="info-box">
            <div class="info-title">
                <span>📋</span>
                <span>Features</span>
            </div>
            <ul class="info-list">
                <li>Service Worker Registration</li>
                <li>VAPID Public Key vom Server</li>
                <li>Push-Subscription Management</li>
                <li>Test-Benachrichtigungen</li>
                <li>Status-Tracking</li>
            </ul>
        </div>

        <div class="console-output" id="console-output"></div>
    </div>

    <script type="module">
        // Use the globally available WebPushManager from main.js
        // It's initialized at app startup as window.webPushManager
        let webPush = null;

        // Console Output
        function log(message, type = 'info') {
            const output = document.getElementById('console-output');
            const entry = document.createElement('div');
            entry.className = `log-entry log-${type}`;
            entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            output.appendChild(entry);
            output.scrollTop = output.scrollHeight;
        }

        // Update UI
        function updateUI(isSubscribed) {
            const status = document.getElementById('subscription-status');
            const btnSubscribe = document.getElementById('btn-subscribe');
            const btnUnsubscribe = document.getElementById('btn-unsubscribe');
            const btnTest = document.getElementById('btn-test');

            if (isSubscribed) {
                status.textContent = 'Abonniert';
                status.className = 'status-value status-subscribed';
                btnSubscribe.disabled = true;
                btnUnsubscribe.disabled = false;
                btnTest.disabled = false;
            } else {
                status.textContent = 'Nicht abonniert';
                status.className = 'status-value status-unsubscribed';
                btnSubscribe.disabled = false;
                btnUnsubscribe.disabled = true;
                btnTest.disabled = true;
            }
        }

        // Initialize WebPush
        window.initWebPush = async function() {
            try {
                log('Initialisiere WebPush Manager...', 'info');

                // Use the global WebPushManager instance from main.js
                if (!window.webPushManager) {
                    throw new Error('WebPushManager nicht verfügbar. Bitte Seite neu laden.');
                }

                webPush = window.webPushManager;

                const isSubscribed = await webPush.init();
                updateUI(isSubscribed);

                document.getElementById('btn-init').disabled = true;
                log('✓ WebPush Manager erfolgreich initialisiert', 'success');
                log(`Browser-Support: Service Worker ✓, Push API ✓`, 'success');

            } catch (error) {
                log(`✗ Fehler: ${error.message}`, 'error');
                console.error(error);
            }
        };

        // Subscribe
        window.subscribe = async function() {
            if (!webPush) {
                log('✗ Bitte zuerst initialisieren', 'error');
                return;
            }

            try {
                log('Fordere Berechtigung an...', 'info');
                const subscription = await webPush.subscribe();
                log('✓ Erfolgreich abonniert!', 'success');
                log(`Endpoint: ${subscription.endpoint.substring(0, 50)}...`, 'info');
            } catch (error) {
                log(`✗ Abonnement fehlgeschlagen: ${error.message}`, 'error');
                console.error(error);
            }
        };

        // Unsubscribe
        window.unsubscribe = async function() {
            if (!webPush) {
                log('✗ Bitte zuerst initialisieren', 'error');
                return;
            }

            try {
                log('Deabonniere...', 'info');
                const success = await webPush.unsubscribe();
                if (success) {
                    log('✓ Erfolgreich deabonniert!', 'success');
                }
            } catch (error) {
                log(`✗ Deabonnieren fehlgeschlagen: ${error.message}`, 'error');
                console.error(error);
            }
        };

        // Send Test Notification
        window.sendTestNotification = async function() {
            if (!webPush) {
                log('✗ Bitte zuerst initialisieren', 'error');
                return;
            }

            try {
                log('Sende Test-Benachrichtigung...', 'info');
                const result = await webPush.sendTestNotification(
                    'Test Benachrichtigung',
                    'Dies ist eine Test-Benachrichtigung vom WebPush Demo! 🎉'
                );
                log('✓ Test-Benachrichtigung gesendet!', 'success');
                log(`Response: ${JSON.stringify(result)}`, 'info');
            } catch (error) {
                log(`✗ Senden fehlgeschlagen: ${error.message}`, 'error');
                console.error(error);
            }
        };

        // Check browser support on load
        document.addEventListener('DOMContentLoaded', () => {
            // First check: Browser capabilities (synchronous)
            const hasServiceWorker = 'serviceWorker' in navigator;
            const hasPushManager = 'PushManager' in window;
            const hasNotification = 'Notification' in window;

            console.log('=== WebPush Browser Check ===');
            console.log('Service Worker support:', hasServiceWorker);
            console.log('Push Manager support:', hasPushManager);
            console.log('Notification support:', hasNotification);
            console.log('HTTPS:', location.protocol === 'https:');
            console.log('Browser:', navigator.userAgent.split(' ').slice(-2).join(' '));

            // Log browser capabilities immediately
            if (!hasServiceWorker) {
                log('✗ Browser unterstützt keine Service Workers', 'error');
            } else {
                log('✓ Service Workers verfügbar', 'success');
            }

            if (!hasPushManager) {
                log('✗ Browser unterstützt keine Push API', 'error');
            } else {
                log('✓ Push API verfügbar', 'success');
            }

            if (!hasNotification) {
                log('✗ Browser unterstützt keine Notifications', 'error');
            } else {
                log('✓ Notification API verfügbar', 'success');
            }

            // Wait for main.js to initialize
            setTimeout(() => {
                console.log('=== WebPushManager Check ===');
                console.log('window.webPushManager:', window.webPushManager);

                if (!window.webPushManager) {
                    log('✗ WebPushManager nicht initialisiert', 'error');

                    if (!hasServiceWorker || !hasPushManager) {
                        log('💡 Grund: Browser unterstützt nicht alle erforderlichen APIs', 'info');
                    } else {
                        log('💡 Grund: main.js hat WebPushManager nicht initialisiert', 'info');
                        log('Tipp: Prüfe Browser Console für Fehler in main.js', 'info');
                    }

                    document.getElementById('btn-init').disabled = true;
                    document.getElementById('subscription-status').textContent = 'Nicht verfügbar';
                    document.getElementById('subscription-status').className = 'status-value status-unsubscribed';
                } else {
                    log('✓ WebPushManager erfolgreich geladen', 'success');
                    log('💡 Klicke auf "WebPush initialisieren" um zu starten', 'info');
                }
            }, 500); // Wait 500ms for main.js to load
        });
    </script>
</body>
</html>
