<?php
/**
 * Inline Chat Widget Template
 *
 * This template is used to display the inline chat widget via shortcode
 *
 * @package SAAI\Templates\Frontend
 * @version 1.0.0
 */

// Prevent direct access.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

?>
<div id="<?php echo esc_attr( $chat_id ); ?>" class="storeagent-inline-chat-container <?php echo esc_attr( $atts['class'] ); ?>" style="width: <?php echo esc_attr( $atts['width'] ); ?>; height: <?php echo esc_attr( $atts['height'] ); ?>;">
    <script>
        if (!window.storeagentChat) {
            window.storeagentChat = { 
                nonce: "<?php echo esc_js( $nonce ); ?>", 
                pageContext: {
                    title: "<?php echo esc_js( $page_context['title'] ); ?>",
                    type: "<?php echo esc_js( $page_context['type'] ); ?>"
                }
            };
        }
    </script>
    
    <style>
        /* StoreAgent Inline Chat Widget Styles */
        .storeagent-inline-chat-container {
            min-height: <?php echo esc_attr( $atts['height'] ); ?>;
            height: <?php echo esc_attr( $atts['height'] ); ?>;
            display: flex;
            flex-direction: column;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        .storeagent-inline-chat-container storeagent-chat-inline {
            /* Core layout properties */
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 100%;
            display: flex;
            flex-direction: column;
            flex: 1;
            
            /* Visual styling */
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            
            /* Brand colors - customizable via settings */
            --chat-brand-primary: <?php echo esc_attr( $settings['brand_primary'] ); ?>;
            --chat-brand-secondary: <?php echo esc_attr( $settings['brand_secondary'] ); ?>;
            
            /* Layout & containers */
            --chat-container-bg: <?php echo esc_attr( $settings['container_bg'] ); ?>;
            --chat-header-bg: <?php echo esc_attr( $settings['header_bg'] ); ?>;
            --chat-input-bg: <?php echo esc_attr( $settings['input_bg'] ); ?>;
            
            /* Interactive elements */
            --chat-trigger-bg: <?php echo esc_attr( $settings['trigger_bg'] ); ?>;
            --chat-trigger-hover-bg: <?php echo esc_attr( $settings['trigger_hover_bg'] ); ?>;
            --chat-send-button-bg: <?php echo esc_attr( $settings['send_button_bg'] ); ?>;
            --chat-send-button-hover-bg: <?php echo esc_attr( $settings['send_button_hover_bg'] ); ?>;
            --chat-online-indicator-bg: <?php echo esc_attr( $settings['online_indicator_bg'] ); ?>;
            
            /* Messages */
            --chat-user-message-bg: <?php echo esc_attr( $settings['user_message_bg'] ); ?>;
            --chat-ai-message-bg: <?php echo esc_attr( $settings['ai_message_bg'] ); ?>;
            
            /* Typography */
            --chat-text-primary: <?php echo esc_attr( $settings['text_primary'] ); ?>;
            --chat-text-secondary: <?php echo esc_attr( $settings['text_secondary'] ); ?>;
            
            /* Input fields */
            --chat-input-border: <?php echo esc_attr( $settings['input_border'] ); ?>;
            --chat-input-focus-border: <?php echo esc_attr( $settings['input_focus_border'] ); ?>;
            
            /* Error states */
            --chat-error-bg: <?php echo esc_attr( $settings['error_bg'] ); ?>;
            --chat-error-text: <?php echo esc_attr( $settings['error_text'] ); ?>;
            
            /* Height control variables */
            --inline-chat-height: 100%;
            --inline-chat-min-height: 100%;
        }
        
        /* Box sizing for all child elements */
        .storeagent-inline-chat-container * {
            box-sizing: border-box;
        }
        
        /* Theme override support - use these classes for custom styling */
        .storeagent-inline-chat-container.custom-theme storeagent-chat-inline {
            /* Custom themes can override these styles */
            background: transparent;
        }
    </style>

    <storeagent-chat-inline 
        greeting="<?php echo esc_attr( $settings['greeting'] ); ?>"
        placeholder="<?php echo esc_attr( $settings['placeholder'] ); ?>"
        assistant-name="<?php echo esc_attr( $settings['assistant_name'] ); ?>"
        avatar-acronym="<?php echo esc_attr( $settings['avatar_acronym'] ); ?>"
        status-text="<?php echo esc_attr( $settings['status_text'] ); ?>"
        height="<?php echo esc_attr( $atts['height'] ); ?>"
    >
    </storeagent-chat-inline>
</div>
