{{-- 
    FCM Notification Button Component
    
    Usage in your blade template:
    @include('components.notify-button', ['programId' => $program->id])
--}}

<div class="notification-widget" data-program-id="{{ $programId }}">
    <button id="notifyBtn-{{ $programId }}" 
            class="notify-button" 
            data-program-id="{{ $programId }}">
        <span class="notify-icon">🔔</span>
        <span class="notify-text">Loading...</span>
        <span class="notify-loader" style="display: none;">⏳</span>
    </button>
    <small class="subscription-count" style="display: none;">
        <span id="subscriber-count-{{ $programId }}">0</span> subscribers
    </small>
</div>

<style>
.notification-widget {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.notify-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 25px;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

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

.notify-button.subscribed {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);
}

.notify-button.subscribed:hover {
    box-shadow: 0 6px 20px rgba(17, 153, 142, 0.4);
}

.notify-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.notify-icon {
    font-size: 18px;
    animation: bellRing 2s ease-in-out infinite;
}

.notify-button.subscribed .notify-icon {
    animation: none;
}

@keyframes bellRing {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(-10deg); }
    20%, 40% { transform: rotate(10deg); }
}

.subscription-count {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}
</style>

<script>
(function() {
    const programId = {{ $programId }};
    const notifyBtn = document.getElementById('notifyBtn-{{ $programId }}');
    const textSpan = notifyBtn.querySelector('.notify-text');
    const loader = notifyBtn.querySelector('.notify-loader');
    
    // Initialize button state
    async function initButton() {
        try {
            // Check if FCM manager is available
            if (typeof fcmManager === 'undefined') {
                console.error('FCM Manager not loaded');
                textSpan.textContent = 'Error';
                return;
            }

            // Check current subscription status
            const status = await fcmManager.checkSubscriptionStatus(programId);
            
            if (status.subscribed) {
                textSpan.textContent = 'Unnotify';
                notifyBtn.classList.add('subscribed');
            } else {
                textSpan.textContent = 'Notify Me';
                notifyBtn.classList.remove('subscribed');
            }
        } catch (error) {
            console.error('Error initializing button:', error);
            textSpan.textContent = 'Notify Me';
        }
    }

    // Handle button click
    notifyBtn.addEventListener('click', async function() {
        // Prevent multiple clicks
        if (notifyBtn.disabled) return;
        
        notifyBtn.disabled = true;
        loader.style.display = 'inline';
        
        try {
            const isSubscribed = notifyBtn.classList.contains('subscribed');
            
            if (isSubscribed) {
                // Unsubscribe
                const result = await fcmManager.unsubscribeFromProgram(programId);
                
                if (result.success) {
                    textSpan.textContent = 'Notify Me';
                    notifyBtn.classList.remove('subscribed');
                    console.log('Successfully unsubscribed from program', programId);
                } else {
                    alert('Failed to unsubscribe. Please try again.');
                }
            } else {
                // Subscribe
                const result = await fcmManager.subscribeToProgram(programId);
                
                if (result.success) {
                    textSpan.textContent = 'Unnotify';
                    notifyBtn.classList.add('subscribed');
                    console.log('Successfully subscribed to program', programId);
                } else {
                    alert('Failed to subscribe. Please allow notifications and try again.');
                }
            }
        } catch (error) {
            console.error('Error toggling subscription:', error);
            alert('An error occurred. Please try again.');
        } finally {
            notifyBtn.disabled = false;
            loader.style.display = 'none';
        }
    });

    // Initialize when FCM manager is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(initButton, 500); // Small delay to ensure FCM is initialized
        });
    } else {
        setTimeout(initButton, 500);
    }
})();
</script>