<?php
/**
 * Event custom messages component
 */
if (!defined('ABSPATH')) exit;

// Get message settings
$em_custom_message_enabled = $event_settings['em_custom_message_enabled'] ?? 'no';
$em_custom_message_title = $event_settings['em_custom_message_title'] ?? '';
$em_custom_message_content = $event_settings['em_custom_message_content'] ?? '';
$em_custom_message_type = $event_settings['em_custom_message_type'] ?? 'info';
$em_custom_message_position = $event_settings['em_custom_message_position'] ?? 'top';

// Only show if custom message is enabled and has content

// Define message type styles
$message_types = array(
    'info' => array(
        'bg_color' => '#EBF8FF',
        'border_color' => '#90CDF4',
        'text_color' => '#1E40AF',
        'icon_color' => '#3B82F6',
        'icon' => '<path d="M13 16H12V12H11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>'
    ),
    'success' => array(
        'bg_color' => '#F0FDF4',
        'border_color' => '#86EFAC',
        'text_color' => '#166534',
        'icon_color' => '#22C55E',
        'icon' => '<path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>'
    ),
    'warning' => array(
        'bg_color' => '#FFFBEB',
        'border_color' => '#FCD34D',
        'text_color' => '#92400E',
        'icon_color' => '#F59E0B',
        'icon' => '<path d="M12 9V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 17H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.29 3.86L1.82 18A2 2 0 0 0 3.64 21H20.36A2 2 0 0 0 22.18 18L13.71 3.86A2 2 0 0 0 10.29 3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
    ),
    'error' => array(
        'bg_color' => '#FEF2F2',
        'border_color' => '#FECACA',
        'text_color' => '#DC2626',
        'icon_color' => '#EF4444',
        'icon' => '<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/><line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>'
    )
);

$current_type = $message_types[$em_custom_message_type] ?? $message_types['info'];
?>

<div class="em-custom-message em-px-6 em-py-6 em-border-b em-border-gray-200" 
     style="background-color: <?php echo esc_attr($current_type['bg_color']); ?>;">
    
    <div class="em-max-w-4xl em-mx-auto">
        <div class="em-flex em-items-start em-gap-4 em-p-6 em-rounded-xl em-border-2 em-shadow-sm" 
             style="border-color: <?php echo esc_attr($current_type['border_color']); ?>; background-color: white;">
            
            <!-- Message Icon -->
            <div class="em-flex-shrink-0">
                <div class="em-p-3 em-rounded-full" style="background-color: <?php echo esc_attr($current_type['icon_color']); ?>20;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="color: <?php echo esc_attr($current_type['icon_color']); ?>;">
                        <?php echo $current_type['icon']; ?>
                    </svg>
                </div>
            </div>
            
            <!-- Message Content -->
            <div class="em-flex-1">
                <?php if (!empty($em_custom_message_title)): ?>
                    <h3 class="em-text-xl em-font-bold em-mb-3" style="color: <?php echo esc_attr($current_type['text_color']); ?>;">
                        <?php echo esc_html($em_custom_message_title); ?>
                    </h3>
                <?php endif; ?>
                
                <div class="em-text-base em-leading-relaxed" style="color: <?php echo esc_attr($current_type['text_color']); ?>;">
                    <?php echo wp_kses_post(wpautop($em_custom_message_content)); ?>
                </div>
                
                <!-- Message Type Badge -->
                <div class="em-mt-4">
                    <span class="em-inline-flex em-items-center em-gap-2 em-px-3 em-py-1 em-text-xs em-font-medium em-rounded-full em-uppercase em-tracking-wide"
                          style="background-color: <?php echo esc_attr($current_type['icon_color']); ?>20; color: <?php echo esc_attr($current_type['text_color']); ?>;">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <?php echo $current_type['icon']; ?>
                        </svg>
                        <span>
                            <?php 
                            switch($em_custom_message_type) {
                                case 'success':
                                    _e('Success', 'event-monster');
                                    break;
                                case 'warning':
                                    _e('Important', 'event-monster');
                                    break;
                                case 'error':
                                    _e('Alert', 'event-monster');
                                    break;
                                default:
                                    _e('Information', 'event-monster');
                            }
                            ?>
                        </span>
                    </span>
                </div>
            </div>
            
            <!-- Dismiss Button (Optional) -->
            <div class="em-flex-shrink-0">
                <button type="button" class="em-message-dismiss em-p-2 em-rounded-full em-transition-colors em-duration-200 hover:em-bg-gray-100" 
                        style="color: <?php echo esc_attr($current_type['text_color']); ?>;"
                        title="<?php _e('Dismiss message', 'event-monster'); ?>">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2"/>
                        <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Custom message animations */
.em-custom-message {
    animation: em-fadeInUp 0.6s ease-out;
}

@keyframes em-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover effects */
.em-custom-message .em-message-dismiss:hover {
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .em-custom-message .em-flex {
        flex-direction: column;
        text-align: center;
    }
    
    .em-custom-message .em-flex-shrink-0:first-child {
        align-self: center;
    }
    
    .em-custom-message .em-message-dismiss {
        align-self: flex-end;
        margin-top: 1rem;
    }
}

/* Print styles */
@media print {
    .em-custom-message .em-message-dismiss {
        display: none;
    }
}
</style>

<script>
jQuery(document).ready(function($) {
    // Dismiss message functionality
    $('.em-message-dismiss').on('click', function() {
        const $message = $(this).closest('.em-custom-message');
        
        $message.fadeOut(300, function() {
            $(this).remove();
        });
        
        // Store dismissal in localStorage to remember user preference
        const eventId = '<?php echo get_the_ID(); ?>';
        const messageKey = 'em_dismissed_message_' + eventId;
        localStorage.setItem(messageKey, 'true');
    });
    
    // Check if message was previously dismissed
    const eventId = '<?php echo get_the_ID(); ?>';
    const messageKey = 'em_dismissed_message_' + eventId;
    
    if (localStorage.getItem(messageKey) === 'true') {
        $('.em-custom-message').hide();
    }
    
    // Add accessibility features
    $('.em-custom-message').attr({
        'role': 'region',
        'aria-label': '<?php _e('Event message', 'event-monster'); ?>'
    });
    
    $('.em-message-dismiss').attr({
        'aria-label': '<?php _e('Dismiss this message', 'event-monster'); ?>'
    });
    
    // Keyboard navigation
    $('.em-message-dismiss').on('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            $(this).click();
        }
    });
});
</script>
