/**
 * Content Subscription Notification JavaScript
 *
 * @since 1.0.4
 */

(function($) {
    'use strict';

    // Show notification after page load with delay
    $(document).ready(function() {
        // Show notification after 3 seconds
        setTimeout(function() {
            $('#content-subscription-notification').fadeIn();
        }, 3000);

        // Handle close button
        $('.close-notification').on('click', function(e) {
            e.preventDefault();
            $('#content-subscription-notification').fadeOut();
            
            // Store in sessionStorage to not show again in this session
            sessionStorage.setItem('content_notification_dismissed', 'true');
        });

        // Check if notification was already dismissed in this session
        if (sessionStorage.getItem('content_notification_dismissed') === 'true') {
            $('#content-subscription-notification').hide();
            return;
        }

        // Handle subscription button click
        $('#subscribe-to-content-plan').on('click', function(e) {
            e.preventDefault();
            
            const button = $(this);
            const planId = button.data('plan-id');
            const originalText = button.text();
            
            // Disable button and show loading
            button.prop('disabled', true).text('Processing...');
            
            // Make AJAX request
            $.ajax({
                url: subsContentVars.ajax_url,
                type: 'POST',
                data: {
                    action: 'subscribe_to_content_plan',
                    content_plan_id: planId,
                    nonce: subsContentVars.nonce
                },
                success: function(response) {
                    if (response.success) {
                        if (response.data.redirect) {
                            // Redirect to payment page
                            window.location.href = response.data.redirect;
                        } else {
                            // Show success message
                            showNotificationMessage(response.data.message, 'success');
                            
                            // Hide notification after success
                            setTimeout(function() {
                                $('#content-subscription-notification').fadeOut();
                            }, 2000);
                        }
                    } else {
                        showNotificationMessage(response.data.message, 'error');
                        button.prop('disabled', false).text(originalText);
                    }
                },
                error: function() {
                    showNotificationMessage('An error occurred. Please try again.', 'error');
                    button.prop('disabled', false).text(originalText);
                }
            });
        });

        // Auto-hide notification after 15 seconds if not interacted with
        setTimeout(function() {
            if ($('#content-subscription-notification').is(':visible')) {
                $('#content-subscription-notification').fadeOut();
            }
        }, 15000);
    });

    /**
     * Show notification message
     */
    function showNotificationMessage(message, type) {
        // Create message element
        const messageEl = $('<div class="notification-message notification-' + type + '">' + message + '</div>');
        
        // Add styles
        messageEl.css({
            position: 'fixed',
            top: '20px',
            right: '20px',
            background: type === 'success' ? '#d4edda' : '#f8d7da',
            color: type === 'success' ? '#155724' : '#721c24',
            border: '1px solid ' + (type === 'success' ? '#c3e6cb' : '#f5c6cb'),
            borderRadius: '4px',
            padding: '12px 16px',
            zIndex: 10000,
            maxWidth: '300px',
            fontSize: '14px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
        });
        
        // Add to page
        $('body').append(messageEl);
        
        // Auto-remove after 5 seconds
        setTimeout(function() {
            messageEl.fadeOut(function() {
                messageEl.remove();
            });
        }, 5000);
    }

})(jQuery);

