Notification Permission — Requesting and Managing User Consent

async function requestNotificationPermission() {
    if (!('Notification' in window)) {
        console.log('Notifications not supported');
        return 'unsupported';
    }

    try {
        const permission = await Notification.requestPermission();
        console.log('Permission result:', permission);

        if (permission === 'granted') {
            console.log('Notification permission granted');
            // Now subscribe to push
            await subscribeToPush();
        } else if (permission === 'denied') {
            console.log('Notification permission denied');
            showPermissionDeniedUI();
        } else {
            console.log('Notification permission dismissed');
        }

        return permission;
    } catch (error) {
        console.error('Permission request failed:', error);
        throw error;
    }
}

// Permission priming with user interaction
let permissionPrimed = false;

function primeForPermission() {
    if (permissionPrimed) return;
    if ('Notification' in window && Notification.permission !== 'default') return;

    const banner = document.createElement('div');
    banner.className = 'permission-prime';
    banner.innerHTML = `
        <div class="prime-content">
            <h3>Stay Updated</h3>
            <p>Get notified when new content is available,
               even when you are not on this page.</p>
            <button id="enable-notifications" class="btn-primary">
                Enable Notifications
            </button>
            <button id="maybe-later" class="btn-secondary">
                Maybe Later
            </button>
        </div>
    `;

    document.body.appendChild(banner);

    document.getElementById('enable-notifications').onclick = async () => {
        banner.remove();
        permissionPrimed = true;
        await requestNotificationPermission();
    };

    document.getElementById('maybe-later').onclick = () => {
        banner.remove();
        permissionPrimed = true;
    };
}

// Show the primer after user has engaged
document.addEventListener('DOMContentLoaded', () => {
    // Wait 30 seconds or after specific user action
    setTimeout(primeForPermission, 30000);
});

function getNotificationStatus() {
    if (!('Notification' in window)) {
        return {
            supported: false,
            permission: null,
            canPrompt: false,
            message: 'Notifications not supported'
        };
    }

    const permission = Notification.permission;

    return {
        supported: true,
        permission: permission,
        canPrompt: permission === 'default',
        message: permission === 'granted'
            ? 'Notifications enabled'
            : permission === 'denied'
                ? 'Notifications blocked'
                : 'Notifications not yet requested'
    };
}

// React to permission state
const status = getNotificationStatus();

if (status.supported && status.canPrompt) {
    console.log('We can still ask for permission');
    showPrimeBanner();
} else if (status.permission === 'denied') {
    console.log('Permission denied, show alternate engagement');
    showEmailSubscribeOption();
} else if (status.permission === 'granted') {
    console.log('Already subscribed');
    updatePushSubscriptionUI();
}

function showPermissionDeniedUI() {
    const container = document.createElement('div');
    container.className = 'permission-denied-info';
    container.innerHTML = `
        <div class="denied-content">
            <h3>Notifications are blocked</h3>
            <p>You blocked notifications for this site.
               You can enable them in your browser settings:</p>
            <ol>
                <li>Click the lock icon in the address bar</li>
                <li>Find "Notifications" in the site settings</li>
                <li>Change to "Allow"</li>
            </ol>
            <p>Alternatively, follow us on social media for updates:</p>
            <div class="social-links">
                <a href="https://twitter.com/example">Twitter</a>
                <a href="https://facebook.com/example">Facebook</a>
            </div>
        </div>
    `;
    document.body.appendChild(container);
}

async function checkAndHandleBlocked() {
    const permission = Notification.permission;
    if (permission === 'denied') {
        // You can detect this after a failed request
        // Browsers remember the 'denied' state
        console.log('Permission was previously denied and cannot be re-requested');
        showPermissionDeniedUI();
    }
}

// Ask permission when user performs an action that benefits from notifications
document.getElementById('subscribe-updates').addEventListener('click', async () => {
    const permission = await requestNotificationPermission();

    if (permission === 'granted') {
        // User subscribed, show success
        showToast('You will now receive updates!');
    } else if (permission === 'denied') {
        showToast('Notifications blocked. You can change this in settings.');
    }
});

// Ask when user completes a meaningful action
checkoutForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    await processCheckout();

    // After successful checkout, ask about order updates
    if (Notification.permission === 'default') {
        const wantsUpdates = confirm(
            'Would you like to receive order status updates via notification?'
        );
        if (wantsUpdates) {
            await requestNotificationPermission();
        }
    }
});

// Store user preference server-side
async function updateNotificationPreference(enabled) {
    const subscription = enabled
        ? await subscribeToPush()
        : await unsubscribeFromPush();

    await fetch('/api/notification-preference', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            enabled,
            endpoint: subscription?.endpoint
        })
    });
}

// Preference toggle in settings
document.getElementById('notification-toggle').addEventListener('change', async (event) => {
    const enabled = event.target.checked;

    if (enabled && Notification.permission === 'default') {
        // Need to request first
        const permission = await requestNotificationPermission();
        if (permission === 'granted') {
            await updateNotificationPreference(true);
        } else {
            event.target.checked = false;
        }
    } else {
        await updateNotificationPreference(enabled);
    }
});