<?php
// Chatbox Settings
defined('ABSPATH') or die('No!');

// Allow the admin to change the chatbox styles
function tarotxhoroscope_chatbox_admin_form()
{
    wp_enqueue_style('wp-color-picker');
    wp_enqueue_style('chat-styles', TAROTXHOROSCOPE_PLUGIN_URL . 'games/css/chatstyles.css', array(), '1.0.4');
    wp_enqueue_script('wp-color-picker');
    wp_enqueue_script('jquery-ui-slider');
    wp_enqueue_media();

    $chatbox_settings = get_option('tarotxhoroscope_chatbox_settings', array());

    if (empty($chatbox_settings)) {
        $chatbox_settings = array(
            'tah_chat_border_enable' => true,
            'tah_chat_border_color' => '#919191',
            'tah_chat_border_width' => '1px',
            'tah_chat_border_radius' => '8px',
            'input_and_button_font_family' => 'Tahoma',
            'input_text_color' => '#707070',
            'message_cap' => '1',
            'input_placeholder_text' => 'Type your message here...',
            'submit_button_text_color' => '#ffffff',
            'submit_button_color' => '#006cb5',
            'submit_button_text' => 'Submit',
            'tah_user_message_bg_color' => '#1f61d3',
            'user_message_font_family' => 'Tahoma',
            'user_message_font_color' => '#ffffff',
            'user_message_font_size' => '16px',
            'tah_bot_message_bg_color' => '#b20068',
            'bot_message_font_family' => 'Tahoma',
            'bot_message_font_color' => '#ffffff',
            'bot_message_font_size' => '16px',
            'tah_chat_welcome_message' => 'Hello, please ask me your question.'
        );
    }

    if (is_admin()) {
        wp_enqueue_script('chatbox-admin', TAROTXHOROSCOPE_PLUGIN_URL . 'admin/gamestyles/chatbox.js', array('jquery', 'wp-color-picker'), '1.0.4', true);
        wp_add_inline_script('chatbox-admin', 'jQuery(document).ready(function($) { $(".wp-color-picker-field").wpColorPicker(); });');
    }
?>
    <div class="wrap">
        <h2>Chatbox Settings</h2>
        <div style="display: flex; justify-content: space-between;">
            <div style="width: 55%; padding-right: 5px;">
                <form method="post" action="<?php echo esc_url(admin_url('admin.php?page=tarotxhoroscope_games&selected_game=chatbox')); ?>">
                    <?php wp_nonce_field('tarotxhoroscope_chatbox_settings_nonce', 'tarotxhoroscope_chatbox_nonce'); ?>
                    <div style="display: flex; gap: 20px;">
                        <div style="width: 45%;">
                            <p>
                                <label style="display: inline-block; width: 200px;"><strong>Enable Border:</strong></label>
                                <input type="checkbox" id="tah_chat_border_enable" name="tarotxhoroscope_chatbox_settings[tah_chat_border_enable]" value="1" <?php checked($chatbox_settings['tah_chat_border_enable'], true); ?> />
                            </p>
                            <p>
                                <label style="display: inline-block; width: 200px;"><strong>Border Color:</strong></label>
                                <input type="text" id="tah_chat_border_color" name="tarotxhoroscope_chatbox_settings[tah_chat_border_color]" value="<?php echo esc_attr($chatbox_settings['tah_chat_border_color']); ?>" class="wp-color-picker-field" />
                            </p>
                            <p>
                                <label for="tah_chat_border_width" style="display: inline-block; width: 200px;"><strong>Border Width:</strong></label>
                                <select name="tarotxhoroscope_chatbox_settings[tah_chat_border_width]" id="tah_chat_border_width">
                                    <?php
                                    $border_widths = range(1, 5);
                                    $current_border_width_value = intval(str_replace('px', '', $chatbox_settings['tah_chat_border_width']));
                                    foreach ($border_widths as $width) {
                                        printf(
                                            '<option value="%s"%s>%s</option>',
                                            esc_attr($width . 'px'),
                                            selected($width, $current_border_width_value, false),
                                            esc_html($width . 'px')
                                        );
                                    }
                                    ?>
                                </select>
                            </p>
                            <p>
                                <label for="tah_chat_border_radius" style="display: inline-block; width: 200px;"><strong>Rounded Corners:</strong></label>
                                <select name="tarotxhoroscope_chatbox_settings[tah_chat_border_radius]" id="tah_chat_border_radius">
                                    <?php
                                    $border_radius_values = range(0, 8);
                                    $current_border_radius_value = intval(str_replace('px', '', $chatbox_settings['tah_chat_border_radius']));
                                    foreach ($border_radius_values as $radius) {
                                        printf(
                                            '<option value="%s"%s>%s</option>',
                                            esc_attr($radius . 'px'),
                                            selected($radius, $current_border_radius_value, false),
                                            esc_html($radius . 'px')
                                        );
                                    }
                                    ?>
                                </select>
                            </p>
                            <?php
                            $fonts = ['Open Sans', 'Verdana', 'Helvetica', 'Tahoma', 'Times New Roman', 'Georgia', 'Garamond', 'Courier New', 'Brush Script MT', 'Arial'];
                            $current_input_button_font = $chatbox_settings['input_and_button_font_family'];
                            ?>
                            <p>
                                <label for="input_and_button_font_family" style="display: inline-block; width: 200px;"><strong>Input & Button Font Family:</strong></label>
                                <select name="tarotxhoroscope_chatbox_settings[input_and_button_font_family]" id="input_and_button_font_family">
                                    <?php
                                    foreach ($fonts as $font) {
                                        printf(
                                            '<option value="%s"%s>%s</option>',
                                            esc_attr($font),
                                            selected($font, $current_input_button_font, false),
                                            esc_html($font)
                                        );
                                    }
                                    ?>
                                </select>
                            </p>
                            <p>
                                <label for="input_text_color" style="display: inline-block; width: 200px;"><strong>Input Text Color:</strong></label>
                                <input type="text" id="input_text_color" name="tarotxhoroscope_chatbox_settings[input_text_color]" value="<?php echo esc_attr($chatbox_settings['input_text_color']); ?>" class="wp-color-picker-field" />
                            </p>
                            <div>
                                <label for="message_cap" style="display: inline-block; width: 200px;"><strong>Maximum Number of Replies:</strong></label>
                                <select name="tarotxhoroscope_chatbox_settings[message_cap]" id="message_cap">
                                    <?php
                                    for ($i = 1; $i <= 10; $i++) {
                                        printf(
                                            '<option value="%s"%s%s>%s</option>',
                                            esc_attr($i),
                                            selected($i, intval($chatbox_settings['message_cap']), false),
                                            $i > 2 ? ' disabled' : '',
                                            esc_html($i)
                                        );
                                    }
                                    ?>
                                </select>
                                <p style="color: red;"><a href="https://app.tarotandhoroscope.com/join/" target="_blank">Upgrade your plan</a> for more than 2 replies per chat.</p>
                            </div>
                            <p>
                                <label for="input_placeholder_text" style="display: inline-block; width: 200px;"><strong>Input Placeholder Text:</strong></label>
                                <input type="text" id="input_placeholder_text" name="tarotxhoroscope_chatbox_settings[input_placeholder_text]" value="<?php echo esc_attr($chatbox_settings['input_placeholder_text']); ?>" />
                            </p>
                            <p>
                                <label for="submit_button_text_color" style="display: inline-block; width: 200px;"><strong>Submit Button Text Color:</strong></label>
                                <input type="text" id="submit_button_text_color" name="tarotxhoroscope_chatbox_settings[submit_button_text_color]" value="<?php echo esc_attr($chatbox_settings['submit_button_text_color']); ?>" class="wp-color-picker-field" />
                            </p>
                            <p>
                                <label for="submit_button_color" style="display: inline-block; width: 200px;"><strong>Submit Button Color:</strong></label>
                                <input type="text" id="submit_button_color" name="tarotxhoroscope_chatbox_settings[submit_button_color]" value="<?php echo esc_attr($chatbox_settings['submit_button_color']); ?>" class="wp-color-picker-field" />
                            </p>
                            <p>
                                <label for="submit_button_text" style="display: inline-block; width: 200px;"><strong>Submit Button Text:</strong></label>
                                <input type="text" id="submit_button_text" name="tarotxhoroscope_chatbox_settings[submit_button_text]" value="<?php echo esc_attr($chatbox_settings['submit_button_text']); ?>" />
                            </p>
                        </div>
                        <div style="width: 45%;">
                            <p>
                                <label style="display: inline-block; width: 200px;"><strong>User Message Background Color:</strong></label>
                                <input type="text" id="tah_user_message_bg_color_chatbox" name="tarotxhoroscope_chatbox_settings[tah_user_message_bg_color]" value="<?php echo esc_attr($chatbox_settings['tah_user_message_bg_color']); ?>" class="wp-color-picker-field" />
                            </p>
                            <p>
                                <label for="user_message_font_family" style="display: inline-block; width: 200px;"><strong>User Message Font Family:</strong></label>
                                <select name="tarotxhoroscope_chatbox_settings[user_message_font_family]" id="user_message_font_family">
                                    <?php
                                    $current_font = $chatbox_settings['user_message_font_family'];
                                    foreach ($fonts as $font) {
                                        printf(
                                            '<option value="%s"%s>%s</option>',
                                            esc_attr($font),
                                            selected($font, $current_font, false),
                                            esc_html($font)
                                        );
                                    }
                                    ?>
                                </select>
                            </p>
                            <p>
                                <label for="user_message_font_color" style="display: inline-block; width: 200px;"><strong>User Message Font Color:</strong></label>
                                <input type="text" id="user_message_font_color" name="tarotxhoroscope_chatbox_settings[user_message_font_color]" value="<?php echo esc_attr($chatbox_settings['user_message_font_color']); ?>" class="wp-color-picker-field" />
                            </p>
                            <p>
                                <label for="user_message_font_size" style="display: inline-block; width: 200px;"><strong>User Message Font Size:</strong></label>
                                <select name="tarotxhoroscope_chatbox_settings[user_message_font_size]" id="user_message_font_size">
                                    <?php
                                    $current_size = str_replace('px', '', $chatbox_settings['user_message_font_size']);
                                    for ($i = 10; $i <= 22; $i++) {
                                        printf(
                                            '<option value="%s"%s>%s</option>',
                                            esc_attr($i . 'px'),
                                            selected($i, $current_size, false),
                                            esc_html($i . 'px')
                                        );
                                    }
                                    ?>
                                </select>
                            </p>
                            <p>
                                <label for="tah_chat_welcome_message" style="display: inline-block; width: 200px;"><strong>Initial Welcome Message:</strong></label>
                                <input type="text" id="tah_chat_welcome_message" name="tarotxhoroscope_chatbox_settings[tah_chat_welcome_message]" value="<?php echo esc_attr($chatbox_settings['tah_chat_welcome_message']); ?>" />
                            </p>
                            <p>
                                <label style="display: inline-block; width: 200px;"><strong>Bot Message Background Color:</strong></label>
                                <input type="text" id="tah_bot_message_bg_color_chatbox" name="tarotxhoroscope_chatbox_settings[tah_bot_message_bg_color]" value="<?php echo esc_attr($chatbox_settings['tah_bot_message_bg_color']); ?>" class="wp-color-picker-field" />
                            </p>
                            <p>
                                <label for="bot_message_font_family" style="display: inline-block; width: 200px;"><strong>Bot Message Font Family:</strong></label>
                                <select name="tarotxhoroscope_chatbox_settings[bot_message_font_family]" id="bot_message_font_family">
                                    <?php
                                    $current_font = $chatbox_settings['bot_message_font_family'];
                                    foreach ($fonts as $font) {
                                        printf(
                                            '<option value="%s"%s>%s</option>',
                                            esc_attr($font),
                                            selected($font, $current_font, false),
                                            esc_html($font)
                                        );
                                    }
                                    ?>
                                </select>
                            </p>
                            <p>
                                <label for="bot_message_font_color" style="display: inline-block; width: 200px;"><strong>Bot Message Font Color:</strong></label>
                                <input type="text" id="bot_message_font_color" name="tarotxhoroscope_chatbox_settings[bot_message_font_color]" value="<?php echo esc_attr($chatbox_settings['bot_message_font_color']); ?>" class="wp-color-picker-field" />
                            </p>
                            <p>
                                <label for="bot_message_font_size" style="display: inline-block; width: 200px;"><strong>Bot Message Font Size:</strong></label>
                                <select name="tarotxhoroscope_chatbox_settings[bot_message_font_size]" id="bot_message_font_size">
                                    <?php
                                    $current_size = str_replace('px', '', $chatbox_settings['bot_message_font_size']);
                                    for ($i = 10; $i <= 22; $i++) {
                                        printf(
                                            '<option value="%s"%s>%s</option>',
                                            esc_attr($i . 'px'),
                                            selected($i, $current_size, false),
                                            esc_html($i . 'px')
                                        );
                                    }
                                    ?>
                                </select>
                            </p>
                        </div>
                    </div>
                    <input type="submit" name="update_chatbox_settings" style="background-color:#007f30; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; margin-top: 20px;" value="Save All Settings" />
                    <input type="submit" name="reset_to_default" style="background-color:#d32f2f; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; margin-top: 20px;" value="Reset to Default" />
                    <input type="hidden" name="selected_game" value="chatbox" />
                </form>
            </div>
            <div style="width: 50%;">
                <div class="tarot-horoscope-container" style="margin: 0; width: 90%; max-width: 100%;">
                    <h1>AI Tarot Reader Preview</h1>
                    <p>To ensure that the chat is enabled for any game you place on your site, make sure to check the "Enable Chat" option in that particular game's settings. The chatbox will appear when the game runs. Below is a preview of how your chatbox will appear under selected games. The chatbox width is determined by the game's width.</p>
                    <div class="tah_chat-wrapper" style="width: 480px;">
                        <div class="tah_messages">
                            <div id="loading-space"></div>
                            <div class="tah_response-message" style="background-color: <?php echo esc_attr($chatbox_settings['tah_bot_message_bg_color']); ?>; color: <?php echo esc_attr($chatbox_settings['bot_message_font_color']); ?>; font-size: <?php echo esc_attr($chatbox_settings['bot_message_font_size']); ?>; font-family: <?php echo esc_attr($chatbox_settings['bot_message_font_family']); ?>;">
                                <?php echo esc_html($chatbox_settings['tah_chat_welcome_message']); ?>
                            </div>
                            <div class="tah_user-message" style="background-color: <?php echo esc_attr($chatbox_settings['tah_user_message_bg_color']); ?>; color: <?php echo esc_attr($chatbox_settings['user_message_font_color']); ?>; font-size: <?php echo esc_attr($chatbox_settings['user_message_font_size']); ?>; font-family: <?php echo esc_attr($chatbox_settings['user_message_font_family']); ?>;">
                                Dummy User Message. This is the user's message field.
                            </div>
                            <div class="tah_response-message" style="background-color: <?php echo esc_attr($chatbox_settings['tah_bot_message_bg_color']); ?>; color: <?php echo esc_attr($chatbox_settings['bot_message_font_color']); ?>; font-size: <?php echo esc_attr($chatbox_settings['bot_message_font_size']); ?>; font-family: <?php echo esc_attr($chatbox_settings['bot_message_font_family']); ?>;">
                                Dummy Bot Response. This is the Tarot Bot's message box.
                            </div>
                        </div>
                        <form class="tah_form" onsubmit="return false;">
                            <input type="text" name="message" placeholder="<?php echo esc_attr($chatbox_settings['input_placeholder_text']); ?>" style="color: <?php echo esc_attr($chatbox_settings['input_text_color']); ?>;" />
                            <button type="submit" style="background-color: <?php echo esc_attr($chatbox_settings['submit_button_color']); ?>; color: <?php echo esc_attr($chatbox_settings['submit_button_text_color']); ?>; font-family: <?php echo esc_attr($chatbox_settings['input_and_button_font_family']); ?>;">
                                <?php echo esc_html($chatbox_settings['submit_button_text']); ?>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php
}

// Save and Reset game styles
function tarotxhoroscope_chatbox_admin_save()
{
    if (!isset($_POST['tarotxhoroscope_chatbox_nonce'])) {
        return;
    }

    $nonce = sanitize_text_field(wp_unslash($_POST['tarotxhoroscope_chatbox_nonce']));
    if (
        !wp_verify_nonce($nonce, 'tarotxhoroscope_chatbox_settings_nonce') ||
        !current_user_can('manage_options')
    ) {
        return;
    }

    // Handle settings update
    if (isset($_POST['update_chatbox_settings']) && isset($_POST['tarotxhoroscope_chatbox_settings'])) {
        $chatbox_settings_post = array_map('sanitize_text_field', wp_unslash($_POST['tarotxhoroscope_chatbox_settings']));

        $settings = array(
            'message_cap' => isset($chatbox_settings_post['message_cap'])
                ? min(2, intval($chatbox_settings_post['message_cap']))
                : 1,
            'tah_user_message_bg_color' => sanitize_hex_color($chatbox_settings_post['tah_user_message_bg_color'] ?? '#006cb5'),
            'tah_bot_message_bg_color' => sanitize_hex_color($chatbox_settings_post['tah_bot_message_bg_color'] ?? '#028e00'),
            'user_message_font_color' => sanitize_hex_color($chatbox_settings_post['user_message_font_color'] ?? '#ffffff'),
            'user_message_font_size' => isset($chatbox_settings_post['user_message_font_size'])
                ? sanitize_text_field($chatbox_settings_post['user_message_font_size'])
                : '16px',
            'bot_message_font_color' => sanitize_hex_color($chatbox_settings_post['bot_message_font_color'] ?? '#ffffff'),
            'bot_message_font_size' => isset($chatbox_settings_post['bot_message_font_size'])
                ? sanitize_text_field($chatbox_settings_post['bot_message_font_size'])
                : '16px',
            'user_message_font_family' => sanitize_text_field($chatbox_settings_post['user_message_font_family'] ?? 'Tahoma'),
            'bot_message_font_family' => sanitize_text_field($chatbox_settings_post['bot_message_font_family'] ?? 'Tahoma'),
            'input_text_color' => sanitize_hex_color($chatbox_settings_post['input_text_color'] ?? '#353535'),
            'submit_button_color' => sanitize_hex_color($chatbox_settings_post['submit_button_color'] ?? '#006cb5'),
            'submit_button_text' => sanitize_text_field($chatbox_settings_post['submit_button_text'] ?? 'Submit'),
            'input_placeholder_text' => sanitize_text_field($chatbox_settings_post['input_placeholder_text'] ?? 'Type your message here...'),
            'submit_button_text_color' => sanitize_hex_color($chatbox_settings_post['submit_button_text_color'] ?? '#ffffff'),
            'input_and_button_font_family' => sanitize_text_field($chatbox_settings_post['input_and_button_font_family'] ?? 'Tahoma'),
            'tah_chat_border_enable' => isset($chatbox_settings_post['tah_chat_border_enable']),
            'tah_chat_border_color' => sanitize_hex_color($chatbox_settings_post['tah_chat_border_color'] ?? '#c9c9c9'),
            'tah_chat_border_width' => isset($chatbox_settings_post['tah_chat_border_width'])
                ? sanitize_text_field($chatbox_settings_post['tah_chat_border_width'])
                : '1px',
            'tah_chat_border_radius' => isset($chatbox_settings_post['tah_chat_border_radius'])
                ? sanitize_text_field($chatbox_settings_post['tah_chat_border_radius'])
                : '6px',
            'tah_chat_welcome_message' => sanitize_text_field($chatbox_settings_post['tah_chat_welcome_message'] ?? 'Hello, please ask me your question.')
        );
        update_option('tarotxhoroscope_chatbox_settings', $settings);
    }

    if (isset($_POST['reset_to_default'])) {
        $default_settings = array(
            'message_cap' => '1',
            'tah_user_message_bg_color' => '#1f61d3',
            'tah_bot_message_bg_color' => '#b20068',
            'user_message_font_color' => '#ffffff',
            'bot_message_font_color' => '#ffffff',
            'user_message_font_size' => '16px',
            'bot_message_font_size' => '16px',
            'user_message_font_family' => 'Tahoma',
            'bot_message_font_family' => 'Tahoma',
            'input_text_color' => '#707070',
            'submit_button_color' => '#006cb5',
            'submit_button_text' => 'Submit',
            'input_placeholder_text' => 'Type your message here...',
            'submit_button_text_color' => '#ffffff',
            'input_and_button_font_family' => 'Tahoma',
            'tah_chat_border_enable' => true,
            'tah_chat_border_color' => '#919191',
            'tah_chat_border_width' => '1px',
            'tah_chat_border_radius' => '8px',
            'tah_chat_welcome_message' => 'Hello, please ask me your question.'
        );
        update_option('tarotxhoroscope_chatbox_settings', $default_settings);
    }
}
