@extends('layouts.front.main')
@section('title', 'Notification Settings')

@section('content')
<div class="container" style="padding-top: 100px; padding-bottom: 100px; min-height: 100vh;">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <h1 style="color: #fff; font-size: 32px; font-weight: 700; margin-bottom: 30px;">
                Notification Settings
            </h1>

            <!-- Master Toggle -->
            <div class="notification-settings-section">
                <div class="notification-master-toggle">
                    <div>
                        <div class="notification-master-toggle-label">Enable Notifications</div>
                        <p style="color: rgba(255, 255, 255, 0.6); font-size: 14px; margin: 5px 0 0 0;">
                            Receive push notifications for new content
                        </p>
                    </div>
                    <label class="notification-toggle-switch">
                        <input type="checkbox" id="master-notification-toggle">
                        <span class="notification-toggle-slider"></span>
                    </label>
                </div>

                <div id="notification-status" style="padding: 15px; background: rgba(59, 130, 246, 0.1); border-radius: 10px; border: 1px solid rgba(59, 130, 246, 0.3); margin-bottom: 20px; display: none;">
                    <p style="color: #60a5fa; margin: 0; font-size: 14px;">
                        <i class="fas fa-info-circle"></i> <span id="notification-status-text"></span>
                    </p>
                </div>
            </div>

            <!-- Programs Section -->
            <div class="notification-settings-section">
                <h2 class="notification-settings-title">Programs</h2>
                <p class="notification-settings-description">
                    Get notified when these programs have new episodes or go live
                </p>

                <div id="program-preferences-list" class="notification-preferences-list">
                    <div style="text-align: center; padding: 40px; color: rgba(255, 255, 255, 0.5);">
                        <i class="fas fa-spinner fa-spin" style="font-size: 24px;"></i>
                        <p style="margin-top: 15px;">Loading your preferences...</p>
                    </div>
                </div>
            </div>

            <!-- Podcasts Section -->
            <div class="notification-settings-section">
                <h2 class="notification-settings-title">Podcasts</h2>
                <p class="notification-settings-description">
                    Get notified when new episodes are added to these podcasts
                </p>

                <div id="podcast-preferences-list" class="notification-preferences-list">
                    <div style="text-align: center; padding: 40px; color: rgba(255, 255, 255, 0.5);">
                        <i class="fas fa-spinner fa-spin" style="font-size: 24px;"></i>
                        <p style="margin-top: 15px;">Loading your preferences...</p>
                    </div>
                </div>
            </div>

            <!-- Browser Permission Banner -->
            <div id="browser-permission-banner" style="display: none; padding: 20px; background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); border-radius: 10px; color: #fff; margin-top: 20px;">
                <div style="display: flex; align-items: center; gap: 15px;">
                    <i class="fas fa-exclamation-triangle" style="font-size: 24px;"></i>
                    <div style="flex: 1;">
                        <p style="margin: 0; font-weight: 600;">Notifications Blocked</p>
                        <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.9;">
                            Your browser has blocked notifications. Please enable them in your browser settings to receive alerts.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
    let preferences = [];
    let isNotificationEnabled = false;

    // Check notification support and permission
    function checkNotificationSupport() {
        if (!('Notification' in window)) {
            document.getElementById('notification-status').style.display = 'block';
            document.getElementById('notification-status-text').textContent = 
                'Your browser does not support notifications.';
            document.getElementById('master-notification-toggle').disabled = true;
            return false;
        }

        if (Notification.permission === 'denied') {
            document.getElementById('browser-permission-banner').style.display = 'block';
            document.getElementById('master-notification-toggle').checked = false;
            return false;
        }

        if (Notification.permission === 'granted') {
            isNotificationEnabled = true;
            document.getElementById('master-notification-toggle').checked = true;
        }

        return true;
    }

    // Load user preferences
    async function loadPreferences() {
        try {
            const response = await fetch('/notifications/preferences');
            const result = await response.json();

            if (result.success && result.preferences) {
                preferences = result.preferences;
                renderPreferences();
            } else {
                showEmptyState();
            }
        } catch (error) {
            console.error('Error loading preferences:', error);
            showErrorState();
        }
    }

    // Render preferences
    function renderPreferences() {
        const programsList = document.getElementById('program-preferences-list');
        const podcastsList = document.getElementById('podcast-preferences-list');

        let programPrefs = [];
        let podcastPrefs = [];

        preferences.forEach(subscription => {
            if (subscription.preferences) {
                subscription.preferences.forEach(pref => {
                    if (pref.content_type === 'program') {
                        programPrefs.push(pref);
                    } else if (pref.content_type === 'podcast') {
                        podcastPrefs.push(pref);
                    }
                });
            }
        });

        // Render programs
        if (programPrefs.length > 0) {
            programsList.innerHTML = programPrefs.map(pref => createPreferenceItem(pref)).join('');
        } else {
            programsList.innerHTML = `
                <div style="text-align: center; padding: 40px; color: rgba(255, 255, 255, 0.5);">
                    <i class="fas fa-bell-slash" style="font-size: 32px; margin-bottom: 15px;"></i>
                    <p>You haven't subscribed to any programs yet.</p>
                    <p style="font-size: 14px; margin-top: 10px;">Click the bell icon on any program to get notified.</p>
                </div>
            `;
        }

        // Render podcasts
        if (podcastPrefs.length > 0) {
            podcastsList.innerHTML = podcastPrefs.map(pref => createPreferenceItem(pref)).join('');
        } else {
            podcastsList.innerHTML = `
                <div style="text-align: center; padding: 40px; color: rgba(255, 255, 255, 0.5);">
                    <i class="fas fa-bell-slash" style="font-size: 32px; margin-bottom: 15px;"></i>
                    <p>You haven't subscribed to any podcasts yet.</p>
                    <p style="font-size: 14px; margin-top: 10px;">Click the bell icon on any podcast to get notified.</p>
                </div>
            `;
        }

        // Attach toggle listeners
        attachToggleListeners();
    }

    // Create preference item HTML
    function createPreferenceItem(pref) {
        return `
            <div class="notification-preference-item" data-pref-id="${pref.id}">
                <div class="notification-preference-info">
                    <div class="notification-preference-title">Content ID: ${pref.content_id}</div>
                    <div class="notification-preference-meta">${pref.content_type.charAt(0).toUpperCase() + pref.content_type.slice(1)}</div>
                </div>
                <label class="notification-toggle-switch">
                    <input type="checkbox" ${pref.is_enabled ? 'checked' : ''} 
                           data-pref-id="${pref.id}" class="pref-toggle">
                    <span class="notification-toggle-slider"></span>
                </label>
            </div>
        `;
    }

    // Show empty state
    function showEmptyState() {
        document.getElementById('program-preferences-list').innerHTML = `
            <div style="text-align: center; padding: 40px; color: rgba(255, 255, 255, 0.5);">
                <i class="fas fa-bell-slash" style="font-size: 32px; margin-bottom: 15px;"></i>
                <p>You haven't enabled notifications yet.</p>
            </div>
        `;
        document.getElementById('podcast-preferences-list').innerHTML = `
            <div style="text-align: center; padding: 40px; color: rgba(255, 255, 255, 0.5);">
                <i class="fas fa-bell-slash" style="font-size: 32px; margin-bottom: 15px;"></i>
                <p>You haven't enabled notifications yet.</p>
            </div>
        `;
    }

    // Show error state
    function showErrorState() {
        const errorHTML = `
            <div style="text-align: center; padding: 40px; color: rgba(239, 68, 68, 0.8);">
                <i class="fas fa-exclamation-triangle" style="font-size: 32px; margin-bottom: 15px;"></i>
                <p>Failed to load preferences. Please try again.</p>
            </div>
        `;
        document.getElementById('program-preferences-list').innerHTML = errorHTML;
        document.getElementById('podcast-preferences-list').innerHTML = errorHTML;
    }

    // Attach toggle listeners
    function attachToggleListeners() {
        document.querySelectorAll('.pref-toggle').forEach(toggle => {
            toggle.addEventListener('change', async (e) => {
                const prefId = e.target.dataset.prefId;
                const isEnabled = e.target.checked;

                try {
                    const response = await fetch('/notifications/update-settings', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        },
                        body: JSON.stringify({
                            preferences: [{
                                id: parseInt(prefId),
                                is_enabled: isEnabled,
                            }],
                        }),
                    });

                    const result = await response.json();

                    if (result.success) {
                        toastr.success(isEnabled ? 'Notifications enabled' : 'Notifications disabled');
                    } else {
                        toastr.error('Failed to update settings');
                        e.target.checked = !isEnabled; // Revert
                    }
                } catch (error) {
                    console.error('Error updating preference:', error);
                    toastr.error('An error occurred');
                    e.target.checked = !isEnabled; // Revert
                }
            });
        });
    }

    // Master toggle handler
    document.getElementById('master-notification-toggle').addEventListener('change', async (e) => {
        if (e.target.checked) {
            // Enable notifications
            if (window.pushNotificationManager) {
                const result = await window.pushNotificationManager.requestPermission();
                
                if (result.success) {
                    toastr.success('Notifications enabled successfully');
                    isNotificationEnabled = true;
                    loadPreferences();
                } else {
                    toastr.error(result.message || 'Failed to enable notifications');
                    e.target.checked = false;
                    
                    if (result.permissionDenied) {
                        document.getElementById('browser-permission-banner').style.display = 'block';
                    }
                }
            }
        } else {
            // Disable notifications
            if (confirm('Are you sure you want to disable all notifications?')) {
                if (window.pushNotificationManager) {
                    await window.pushNotificationManager.unsubscribe();
                    toastr.success('Notifications disabled');
                    isNotificationEnabled = false;
                    showEmptyState();
                }
            } else {
                e.target.checked = true;
            }
        }
    });

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', () => {
        checkNotificationSupport();
        loadPreferences();
    });
</script>
@endsection