jQuery(document).ready(function ($) {
    function initializeChatKit() {
        const chatkit = document.createElement('openai-chatkit');

        // 👉 Add ID
        chatkit.id = 'my-openai-chatkit';

        // 👉 Add multiple classes
        chatkit.classList.add('wpbot-chatkit', 'my-openai-chatkit');

        // Create Close Button

        // Add some styles to position it or make it full screen/widget like
        chatkit.style.position = 'absolute';
        chatkit.style.top = '0';
        chatkit.style.right = '100%';
        chatkit.style.zIndex = '9999';
        chatkit.style.height = '600px';
        chatkit.style.width = '400px';
        chatkit.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
        chatkit.style.borderRadius = '12px';
        chatkit.style.overflow = 'hidden';

        const chatContainer = document.getElementById('wp-chatbot-chat-container');

        if (chatContainer) {
            chatContainer.appendChild(chatkit);

        } else {
            document.body.appendChild(chatkit);
        }



        chatkit.setOptions({
            api: {
                getClientSecret: async (currentSecret) => {
                    try {
                        const response = await $.ajax({
                            url: wpbot_chatkit.rest_url + 'wpbot/v1/chatkit/session',
                            method: 'POST',
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader('X-WP-Nonce', wpbot_chatkit.nonce);
                            }
                        });

                        if (response && response.client_secret) {
                            console.log('ChatKit Client Secret received:', response.client_secret.substring(0, 10) + '...');
                            return response.client_secret;
                        } else {
                            console.error('ChatKit Session Response:', JSON.stringify(response, null, 2));
                            throw new Error('Failed to retrieve ChatKit client secret: ' + (response.error ? JSON.stringify(response.error) : 'Unknown error'));
                        }
                    } catch (error) {
                        console.error('Error fetching ChatKit session:', error);
                        throw error;
                    }
                }
            },
            composer: {
                placeholder: 'Ask anything...',
                attachments: {
                    enabled: true
                }
            }
        });
    }

    if (window.customElements && window.customElements.get('openai-chatkit')) {
        initializeChatKit();
    } else {
        window.addEventListener('chatkit-script-loaded', initializeChatKit);
    }

    // Hide ChatKit when main chatbot ball is clicked
    $('#wp-chatbot-ball').on('click', function () {
        var chatkit = $('#my-openai-chatkit');
        chatkit.removeClass('active');
        setTimeout(function () {
            chatkit.css('display', 'none');
        }, 400);
    });
});