(function() {
    // Function to get query parameters from the script src
    function getQueryParamsFromScript() {
        var scripts = document.getElementsByTagName('script');
        var scriptSrc;

        // Find the current script tag by searching for 'es-embed' in the src URL
        for (var i = 0; i < scripts.length; i++) {
            if (scripts[i].src.includes('embed')) {
                scriptSrc = scripts[i].src;
                break;
            }
        }

        // Parse the query parameters from the src
        var params = {};
        if (scriptSrc) {
            var queryString = scriptSrc.split('?')[1]; // Get the query string part of the src
            if (queryString) {
                var queries = queryString.split("&");
                for (var i = 0; i < queries.length; i++) {
                    var pair = queries[i].split("=");
                    params[pair[0]] = decodeURIComponent(pair[1] || ''); // Decode URI components
                }
            }
        }
        return params;
    }

    // Get the query parameters from the script src
    var params = getQueryParamsFromScript();

    // Define the base URL for the API
    var apiBaseUrl = 'https://help.codexpert.io/wp-json/easysupport/v1';

    // Create the chat icon (now a text button)
    var chatIcon = document.createElement('div');
    chatIcon.style.position = 'fixed';
    chatIcon.style.bottom = '20px';
    chatIcon.style.right = '20px';
    chatIcon.style.width = '150px'; // Increased width for the text
    chatIcon.style.height = '50px';
    chatIcon.style.backgroundColor = '#007bff';
    chatIcon.style.borderRadius = '25px'; // Rounded corners for a pill-shaped button
    chatIcon.style.cursor = 'pointer';
    chatIcon.style.zIndex = '1000';
    chatIcon.style.color = 'white';
    chatIcon.style.fontSize = '18px';
    chatIcon.style.lineHeight = '50px';
    chatIcon.style.textAlign = 'center';
    chatIcon.innerHTML = 'Need Help?'; // Replace icon with text
    document.body.appendChild(chatIcon);

    // Create the form container
    var formContainer = document.createElement('div');
    formContainer.style.position = 'fixed';
    formContainer.style.bottom = '80px';
    formContainer.style.right = '20px';
    formContainer.style.width = '500px'; // Increased width
    formContainer.style.maxWidth = '90%'; // Increased width
    formContainer.style.maxHeight = '80%'; // Increased height
    formContainer.style.overflowY = 'auto';
    formContainer.style.backgroundColor = 'white';
    formContainer.style.border = '1px solid #ccc';
    formContainer.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
    formContainer.style.padding = '10px';
    formContainer.style.borderRadius = '5px';
    formContainer.style.display = 'none'; // Hidden initially
    formContainer.style.zIndex = '99999';
    formContainer.innerHTML = `
        <h3 style="text-align: center; font-size: 22px; margin-top: 10px; margin-bottom: 5px;">Hi there, we're here.. 👋</h3>
        <p style="text-align: center; margin-bottom: 10px;">Reach out to us with any questions or issues you may have!</p>
        <form id="supportForm">
            <input type="text" id="name" name="name" required placeholder="Your Name" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
            <input type="email" id="email" name="email" required placeholder="Your Email" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
            <input type="text" id="subject" name="subject" required placeholder="Subject" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
            <textarea id="description" name="description" required placeholder="Describe your issue" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; height: 200px;"></textarea>
            
            <!-- Product dropdown or hidden pre-selection -->
            <select id="product" name="product" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
                <option value="">Loading...</option>
            </select>
            
            <select id="reason" name="reason" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
                <option value="">Loading...</option>
            </select>
            <select id="urgency" name="urgency" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
                <option value="">Loading...</option>
            </select>
            
            <!-- Order ID field -->
            <input type="text" id="order" name="order" placeholder="Your order ID, if any" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
            
            <button type="submit" id="submitButton" style="width: 100%; background-color: #007bff; color: white; border: none; padding: 10px; cursor: pointer; border-radius: 4px;">Submit</button>
        </form>
        <div id="messageContainer" style="text-align: center; display: none;">
            <p id="successMessage" style=""></p>
            <p id="errorMessage" style="color: red;"></p>
        </div>
    `;
    document.body.appendChild(formContainer);

    // Function to populate a dropdown with API data if no product pre-selection
    function populateDropdown(apiEndpoint, dropdownId, defaultOption) {
        fetch(apiBaseUrl + apiEndpoint)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    var dropdown = document.getElementById(dropdownId);
                    dropdown.innerHTML = `<option value="">${defaultOption}</option>`;
                    Object.keys(data.data).forEach(key => {
                        var option = document.createElement('option');
                        option.value = key;
                        option.textContent = data.data[key];
                        dropdown.appendChild(option);
                    });
                } else {
                    console.error(`Failed to load data for ${dropdownId}`);
                }
            })
            .catch(error => console.error(`Error fetching data for ${dropdownId}:`, error));
    }
    
    // Hide the product dropdown and pre-select a product if a 'product' parameter is provided
    var productSelect = document.getElementById('product');
    if (params.product_id) {
        productSelect.style.display = 'none'; // Hide the dropdown
        var preSelectedProduct = document.createElement('input');
        preSelectedProduct.type = 'hidden';
        preSelectedProduct.name = 'product';
        preSelectedProduct.value = params.product_id; // Pre-select the product passed in URL
        document.getElementById('supportForm').appendChild(preSelectedProduct);
    } else {

        // Populate the Product, Reason, and Urgency dropdowns
        populateDropdown('/tickets/products', 'product', 'Select a Product');
    }

    // Populate the Reason and Urgency dropdowns
    populateDropdown('/tickets/reasons', 'reason', 'Select a Reason');
    populateDropdown('/tickets/urgencies', 'urgency', 'Select an Urgency');

    // Hide the order field if 'order=false' is provided in the URL
    var orderField = document.getElementById('order');
    if (params.order === "false") {
        orderField.style.display = 'none';
    }

    // Toggle form visibility when the chat icon is clicked
    chatIcon.addEventListener('click', function() {
        formContainer.style.display = formContainer.style.display === 'none' ? 'block' : 'none';
    });

    // Form submission handler
    document.getElementById('supportForm').addEventListener('submit', function(event) {
        event.preventDefault();

        var submitButton = document.getElementById('submitButton');
        submitButton.textContent = 'Submitting...';
        submitButton.disabled = true; // Disable the button to prevent multiple submissions

        var name = document.getElementById('name').value;
        var email = document.getElementById('email').value;
        var subject = document.getElementById('subject').value;
        var description = document.getElementById('description').value;
        var product = document.querySelector('input[name="product"]') ? document.querySelector('input[name="product"]').value : document.getElementById('product').value;
        var reason = document.getElementById('reason').value;
        var urgency = document.getElementById('urgency').value;
        var order = document.getElementById('order').value;

        // Define the data to send
        var data = {
            name: name,
            email: email,
            title: subject,
            description: description,
            product: product,
            reason: reason,
            urgency: urgency,
            order: order
        };

        // Send the data using fetch API
        fetch(apiBaseUrl + '/tickets', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            var messageContainer = document.getElementById('messageContainer');
            var successMessage = document.getElementById('successMessage');
            var errorMessage = document.getElementById('errorMessage');

            // Reset the message container and display relevant messages
            successMessage.innerHTML = '';
            errorMessage.innerHTML = '';

            if (data.success) {
                // Display the success message from the API response
                successMessage.innerHTML = data.data.message;
                errorMessage.innerHTML = ''; // Clear any previous error messages
                document.getElementById('supportForm').style.display = 'none';
            } else {
                errorMessage.innerHTML = 'There was an error submitting your ticket.';
            }

            submitButton.textContent = 'Submit';
            submitButton.disabled = false; // Re-enable the button
            messageContainer.style.display = 'block';
        })
        .catch((error) => {
            var messageContainer = document.getElementById('messageContainer');
            var errorMessage = document.getElementById('errorMessage');

            // Reset the message container and display the error
            errorMessage.innerHTML = 'There was an error submitting your ticket. Please try again.';
            document.getElementById('supportForm').style.display = 'none';
            submitButton.textContent = 'Submit';
            submitButton.disabled = false; // Re-enable the button
            messageContainer.style.display = 'block';

            console.error('Error:', error);
        });
    });
})();