<?php

namespace Unlockafe_addons\Widgets;

use Unlockafe_addons\Traits\Utils as UnlockafeUtils;
use Unlockafe_addons\Traits\Widget_helper;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Background;



if (!defined('ABSPATH'))
    exit; // Exit if accessed directly

/**
 * AI Chatbot Widget
 *
 * @since 1.0.0
 */
class AI_Chatbot extends Widget_Base
{
    use Widget_helper, UnlockafeUtils;

    /**
     * Retrieve the widget name.
     */
    public function get_name()
    {
        return 'unlockafe-ai-chatbot';
    }

    /**
     * Retrieve the widget title.
     */
    public function get_title()
    {
        return __('AI Chatbot', 'unlock-addons-for-elementor');
    }

    /**
     * Retrieve the widget icon.
     */
    public function get_icon()
    {
        return 'eicon-comments ulicon ulicon';
    }

    /**
     * Retrieve the list of categories.
     */
    public function get_categories()
    {
        return ['unlockafe-addons'];
    }

    /**
     * Retrieve the list of keywords.
     */
    public function get_keywords()
    {
        return ['ai', 'chatbot', 'chat', 'assistant', 'openai', 'gpt'];
    }

    /**
     * Retrieve the list of scripts.
     */
    public function get_script_depends()
    {
        return ['unlockafe-ai-chatbot-scripts'];
    }

    /**
     * Retrieve the list of styles.
     */
    public function get_style_depends()
    {
        return ['unlockafe-ai-chatbot-style', 'font-awesome'];
    }

    /**
     * Register widget controls.
     */
    protected function register_controls()
    {
        $this->register_content_controls();
        $this->register_style_controls();
    }

    /**
     * Register content controls.
     */
    protected function register_content_controls()
    {
        // General Settings
        $this->start_controls_section(
            'general_section',
            [
                'label' => __('General Settings', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'chatbot_title',
            [
                'label' => __('Chatbot Title', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('AI Assistant', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter chatbot title', 'unlock-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'header_icon',
            [
                'label' => __('Header Icon', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-robot',
                    'library' => 'fa-solid',
                ],
            ]
        );

        $this->add_control(
            'welcome_message',
            [
                'label' => __('Welcome Message', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXTAREA,
                'default' => __('Hello! How can I help you today?', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter welcome message', 'unlock-addons-for-elementor'),
                'rows' => 3,
            ]
        );

        $this->add_control(
            'placeholder_text',
            [
                'label' => __('Input Placeholder', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Type your message...', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter placeholder text', 'unlock-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'chatbot_height',
            [
                'label' => __('Chatbot Height', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'vh'],
                'range' => [
                    'px' => [
                        'min' => 300,
                        'max' => 1000,
                        'step' => 10,
                    ],
                    'vh' => [
                        'min' => 30,
                        'max' => 100,
                        'step' => 5,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 500,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-container' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    /**
     * Register style controls.
     */
    protected function register_style_controls()
    {
        // Container Style
        $this->start_controls_section(
            'container_style_section',
            [
                'label' => __('Container', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'container_background',
                'label' => __('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-ai-chatbot-container',
            ]
        );

        $this->add_control(
            'container_border_radius',
            [
                'label' => __('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'container_box_shadow',
                'label' => __('Box Shadow', 'unlock-addons-for-elementor'),
                'selector' => '{{WRAPPER}} .unlockafe-ai-chatbot-container',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'container_border',
                'label' => __('Border', 'unlock-addons-for-elementor'),
                'selector' => '{{WRAPPER}} .unlockafe-ai-chatbot-container',
            ]
        );

        $this->add_responsive_control(
            'container_padding',
            [
                'label' => __('Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->end_controls_section();

        // Header Style
        $this->start_controls_section(
            'header_style_section',
            [
                'label' => __('Header', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'header_padding',
            [
                'label' => __('Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-header' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'header_background',
                'label' => __('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-ai-chatbot-header',
                'fields_options' => [
                    'background' => [
                        'default' => 'classic',
                    ],
                    'color' => [
                        'default' => '#667eea',
                    ],
                ],
            ]
        );

        // Add separate color control for easier access (always available)
        $this->add_control(
            'header_background_color_simple',
            [
                'label' => __('Background Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#667eea',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-header' => 'background-color: {{VALUE}} !important;',
                ],
                'separator' => 'before',
            ]
        );

        // Add inline style to ensure background works
        $this->add_control(
            'header_background_important',
            [
                'type' => Controls_Manager::HIDDEN,
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'header_text_color',
            [
                'label' => __('Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-header' => 'color: {{VALUE}} !important;',
                    '{{WRAPPER}} .unlockafe-ai-chatbot-title' => 'color: {{VALUE}} !important;',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'header_typography',
                'label' => __('Typography', 'unlock-addons-for-elementor'),
                'selector' => '{{WRAPPER}} .unlockafe-ai-chatbot-title',
            ]
        );

        $this->add_control(
            'header_icon_color',
            [
                'label' => __('Icon Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-icon' => 'color: {{VALUE}} !important;',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'header_icon_size',
            [
                'label' => __('Icon Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'em' => [
                        'min' => 0.5,
                        'max' => 5,
                        'step' => 0.1,
                    ],
                    'rem' => [
                        'min' => 0.5,
                        'max' => 5,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 24,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-icon' => 'font-size: {{SIZE}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->end_controls_section();

        // Message Style
        $this->start_controls_section(
            'message_style_section',
            [
                'label' => __('Messages', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'user_message_background',
            [
                'label' => __('User Message Background', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#667eea',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-message.user' => 'background-color: {{VALUE}} !important;',
                ],
            ]
        );

        $this->add_control(
            'user_message_text_color',
            [
                'label' => __('User Message Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-message.user' => 'color: {{VALUE}} !important;',
                    '{{WRAPPER}} .unlockafe-ai-chatbot-message.user .unlockafe-ai-chatbot-message-content' => 'color: {{VALUE}} !important;',
                ],
            ]
        );

        $this->add_control(
            'ai_message_background',
            [
                'label' => __('AI Message Background', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#f3f4f6',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-message.ai' => 'background-color: {{VALUE}} !important;',
                ],
            ]
        );

        $this->add_control(
            'ai_message_text_color',
            [
                'label' => __('AI Message Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#1f2937',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-message.ai' => 'color: {{VALUE}} !important;',
                    '{{WRAPPER}} .unlockafe-ai-chatbot-message.ai .unlockafe-ai-chatbot-message-content' => 'color: {{VALUE}} !important;',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'message_typography',
                'selector' => '{{WRAPPER}} .unlockafe-ai-chatbot-message-content',
            ]
        );

        $this->add_responsive_control(
            'message_padding',
            [
                'label' => __('Message Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-message' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'message_border_radius',
            [
                'label' => __('Message Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-message' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'message_max_width',
            [
                'label' => __('Message Max Width', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'range' => [
                    'px' => [
                        'min' => 50,
                        'max' => 1000,
                        'step' => 10,
                    ],
                    '%' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 80,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-message' => 'max-width: {{SIZE}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->end_controls_section();

        // Input Style
        $this->start_controls_section(
            'input_style_section',
            [
                'label' => __('Input Area', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'input_background',
                'label' => __('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-ai-chatbot-input-area',
            ]
        );

        $this->add_control(
            'input_text_color',
            [
                'label' => __('Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-input' => 'color: {{VALUE}} !important;',
                ],
            ]
        );

        $this->add_control(
            'input_border_color',
            [
                'label' => __('Border Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-input' => 'border-color: {{VALUE}} !important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'input_padding',
            [
                'label' => __('Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-input' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'input_border_radius',
            [
                'label' => __('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-input' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'input_typography',
                'label' => __('Typography', 'unlock-addons-for-elementor'),
                'selector' => '{{WRAPPER}} .unlockafe-ai-chatbot-input',
            ]
        );

        $this->add_control(
            'button_background',
            [
                'label' => __('Send Button Background', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#667eea',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-send-button' => 'background-color: {{VALUE}} !important;',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'button_text_color',
            [
                'label' => __('Send Button Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-send-button' => 'color: {{VALUE}} !important;',
                    '{{WRAPPER}} .unlockafe-ai-chatbot-send-button i' => 'color: {{VALUE}} !important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'button_size',
            [
                'label' => __('Button Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 30,
                        'max' => 80,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 44,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-send-button' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'button_border_radius',
            [
                'label' => __('Button Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 50,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-ai-chatbot-send-button' => 'border-radius: {{SIZE}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->end_controls_section();
    }

    /**
     * Render widget output on the frontend.
     */
    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $chatbot_id = 'unlockafe-ai-chatbot-' . $this->get_id();
        $title = !empty($settings['chatbot_title']) ? esc_html($settings['chatbot_title']) : __('AI Assistant', 'unlock-addons-for-elementor');
        $welcome_message = !empty($settings['welcome_message']) ? wp_kses_post($settings['welcome_message']) : __('Hello! How can I help you today?', 'unlock-addons-for-elementor');
        $placeholder = !empty($settings['placeholder_text']) ? esc_attr($settings['placeholder_text']) : __('Type your message...', 'unlock-addons-for-elementor');
        
        // Get header icon
        $header_icon = '';
        if (!empty($settings['header_icon']['value'])) {
            if (is_array($settings['header_icon']['value'])) {
                $header_icon = $settings['header_icon']['value']['url'] ?? '';
            } else {
                $header_icon = $settings['header_icon']['value'];
            }
        }
        if (empty($header_icon)) {
            $header_icon = 'fas fa-robot'; // Default icon
        }

        // Generate inline CSS for header background to ensure it works
        // Priority: simple color control > Group_Control_Background
        $header_bg_css = '';
        
        // Check simple color control first
        if (!empty($settings['header_background_color_simple'])) {
            $header_bg_css = 'background-color: ' . esc_attr($settings['header_background_color_simple']) . ' !important;';
        } elseif (!empty($settings['header_background_background'])) {
            if ($settings['header_background_background'] === 'classic' && !empty($settings['header_background_color'])) {
                $header_bg_css = 'background-color: ' . esc_attr($settings['header_background_color']) . ' !important;';
            } elseif ($settings['header_background_background'] === 'gradient') {
                // Handle gradient
                if (!empty($settings['header_background_gradient_type'])) {
                    $gradient_type = $settings['header_background_gradient_type'];
                    $color1 = !empty($settings['header_background_gradient_color_b']) ? $settings['header_background_gradient_color_b'] : '#667eea';
                    $color2 = !empty($settings['header_background_gradient_color_a']) ? $settings['header_background_gradient_color_a'] : '#764ba2';
                    $angle = !empty($settings['header_background_gradient_angle']['size']) ? $settings['header_background_gradient_angle']['size'] : 135;
                    
                    if ($gradient_type === 'linear') {
                        $header_bg_css = 'background: linear-gradient(' . esc_attr($angle) . 'deg, ' . esc_attr($color1) . ' 0%, ' . esc_attr($color2) . ' 100%) !important;';
                    } else {
                        $header_bg_css = 'background: radial-gradient(circle, ' . esc_attr($color1) . ' 0%, ' . esc_attr($color2) . ' 100%) !important;';
                    }
                }
            }
        }
        
        if (empty($header_bg_css)) {
            // Default color
            $header_bg_css = 'background-color: #667eea !important;';
        }

        // Localize script with AJAX URL and nonce
        wp_localize_script(
            'unlockafe-ai-chatbot-scripts',
            'unlockafe_ai_chatbot_' . $this->get_id(),
            [
                'ajax_url' => admin_url('admin-ajax.php'),
                'nonce' => wp_create_nonce('unlockafe_text_generator_nonce'),
            ]
        );

        ?>
        <div class="unlockafe-ai-chatbot-wrapper" data-chatbot-id="<?php echo esc_attr($this->get_id()); ?>">
            <div id="<?php echo esc_attr($chatbot_id); ?>" class="unlockafe-ai-chatbot-container">
                <div class="unlockafe-ai-chatbot-header" style="<?php echo $header_bg_css; ?>">
                    <div class="unlockafe-ai-chatbot-header-content">
                        <?php
                        // Render header icon
                        if (!empty($settings['header_icon']['value'])) {
                            if (is_array($settings['header_icon']['value']) && isset($settings['header_icon']['value']['url'])) {
                                // Image icon
                                echo '<img src="' . esc_url($settings['header_icon']['value']['url']) . '" alt="' . esc_attr($title) . '" class="unlockafe-ai-chatbot-icon unlockafe-ai-chatbot-icon-image" />';
                            } else {
                                // Font icon
                                \Elementor\Icons_Manager::render_icon($settings['header_icon'], ['aria-hidden' => 'true', 'class' => 'unlockafe-ai-chatbot-icon']);
                            }
                        } else {
                            // Default icon
                            echo '<i class="fas fa-robot unlockafe-ai-chatbot-icon"></i>';
                        }
                        ?>
                        <span class="unlockafe-ai-chatbot-title"><?php echo $title; ?></span>
                    </div>
                </div>
                
                <div class="unlockafe-ai-chatbot-messages" id="<?php echo esc_attr($chatbot_id); ?>-messages">
                    <div class="unlockafe-ai-chatbot-message ai welcome">
                        <div class="unlockafe-ai-chatbot-message-content">
                            <?php echo $welcome_message; ?>
                        </div>
                    </div>
                </div>
                
                <div class="unlockafe-ai-chatbot-typing" id="<?php echo esc_attr($chatbot_id); ?>-typing" style="display: none;">
                    <div class="unlockafe-ai-chatbot-typing-dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                
                <div class="unlockafe-ai-chatbot-input-area">
                    <input type="text" 
                           class="unlockafe-ai-chatbot-input" 
                           id="<?php echo esc_attr($chatbot_id); ?>-input"
                           placeholder="<?php echo $placeholder; ?>"
                           autocomplete="off">
                    <button type="button" 
                            class="unlockafe-ai-chatbot-send-button" 
                            id="<?php echo esc_attr($chatbot_id); ?>-send">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            // Ensure AJAX URL is available
            if (typeof unlockafe_ai_chatbot_<?php echo esc_js($this->get_id()); ?> === 'undefined') {
                window.unlockafe_ai_chatbot_<?php echo esc_js($this->get_id()); ?> = {
                    ajax_url: '<?php echo esc_js(admin_url('admin-ajax.php')); ?>',
                    nonce: '<?php echo esc_js(wp_create_nonce('unlockafe_text_generator_nonce')); ?>'
                };
            }
        </script>
        <?php
    }
}
