<?php
if (!defined('ABSPATH')) {
    exit;
}

$chatbot_name = isset($chatbot_name) ? sanitize_text_field((string) $chatbot_name) : __('Listing Assistant', 'nexdirectory');
$chatbot_welcome = isset($chatbot_welcome) ? sanitize_text_field((string) $chatbot_welcome) : __('Ask me about upcoming listings and I will recommend the best matches.', 'nexdirectory');
$chatbot_position = isset($chatbot_position) ? sanitize_key((string) $chatbot_position) : 'bottom-right';
$chatbot_position_desktop = isset($chatbot_position_desktop) ? sanitize_key((string) $chatbot_position_desktop) : $chatbot_position;
$chatbot_position_mobile = isset($chatbot_position_mobile) ? sanitize_key((string) $chatbot_position_mobile) : 'right-edge-center';
$chatbot_desktop_allowed = ['bottom-right', 'bottom-left', 'right-edge-center', 'left-edge-center', 'inline'];
$chatbot_mobile_allowed = ['bottom-right', 'bottom-left', 'bottom-center', 'right-edge-center', 'left-edge-center', 'inline'];
if (!in_array($chatbot_position, $chatbot_desktop_allowed, true)) {
    $chatbot_position = 'bottom-right';
}
if (!in_array($chatbot_position_desktop, $chatbot_desktop_allowed, true)) {
    $chatbot_position_desktop = $chatbot_position;
}
if (!in_array($chatbot_position_mobile, $chatbot_mobile_allowed, true)) {
    $chatbot_position_mobile = 'right-edge-center';
}
$chatbot_theme_color = isset($chatbot_theme_color) ? sanitize_hex_color((string) $chatbot_theme_color) : '#FF5E14';
$chatbot_text_color = isset($chatbot_text_color) ? sanitize_hex_color((string) $chatbot_text_color) : '#0B1221';
if (!$chatbot_theme_color) {
    $chatbot_theme_color = '#FF5E14';
}
if (!$chatbot_text_color) {
    $chatbot_text_color = '#0B1221';
}
$panel_id = 'eep-chatbot-panel-' . wp_rand(1000, 999999);
$input_id = 'eep-chatbot-input-' . wp_rand(1000, 999999);
?>
<div
    class="eep-chatbot eep-chatbot--<?php echo esc_attr($chatbot_position_desktop); ?>"
    data-eep-chatbot
    data-eep-chatbot-position="<?php echo esc_attr($chatbot_position); ?>"
    data-eep-chatbot-position-desktop="<?php echo esc_attr($chatbot_position_desktop); ?>"
    data-eep-chatbot-position-mobile="<?php echo esc_attr($chatbot_position_mobile); ?>"
    style="--eep-chatbot-theme: <?php echo esc_attr($chatbot_theme_color); ?>; --eep-chatbot-text: <?php echo esc_attr($chatbot_text_color); ?>;"
>
    <button
        type="button"
        class="eep-chatbot-toggle"
        data-eep-chatbot-toggle
        aria-expanded="<?php echo $chatbot_position === 'inline' ? 'true' : 'false'; ?>"
        aria-controls="<?php echo esc_attr($panel_id); ?>"
    >
        <span class="eep-chatbot-toggle-icon" aria-hidden="true">AI</span>
        <span class="eep-chatbot-toggle-label"><?php echo esc_html($chatbot_name); ?></span>
    </button>

    <section
        class="eep-chatbot-panel"
        id="<?php echo esc_attr($panel_id); ?>"
        data-eep-chatbot-panel
        <?php if ($chatbot_position !== 'inline') : ?>hidden<?php endif; ?>
        aria-label="<?php echo esc_attr($chatbot_name); ?>"
    >
        <header class="eep-chatbot-head">
            <div class="eep-chatbot-head-meta">
                <strong><?php echo esc_html($chatbot_name); ?></strong>
                <span><?php esc_html_e('AI listing assistant', 'nexdirectory'); ?></span>
            </div>
            <button type="button" class="eep-chatbot-close" data-eep-chatbot-close aria-label="<?php esc_attr_e('Close chatbot', 'nexdirectory'); ?>">x</button>
        </header>
        <div class="eep-chatbot-messages" data-eep-chatbot-messages aria-live="polite" aria-relevant="additions">
            <article class="eep-chatbot-message eep-chatbot-message--bot">
                <div class="eep-chatbot-bubble"><?php echo esc_html($chatbot_welcome); ?></div>
            </article>
        </div>
        <form class="eep-chatbot-form" data-eep-chatbot-form>
            <label for="<?php echo esc_attr($input_id); ?>" class="screen-reader-text"><?php esc_html_e('Ask the event assistant', 'nexdirectory'); ?></label>
            <textarea
                id="<?php echo esc_attr($input_id); ?>"
                class="eep-chatbot-input"
                data-eep-chatbot-input
                rows="2"
                maxlength="500"
                placeholder="<?php esc_attr_e('Ask about listings, dates, locations, tags, or recommendations...', 'nexdirectory'); ?>"
            ></textarea>
            <div class="eep-chatbot-actions">
                <span class="eep-chatbot-tip"><?php esc_html_e('Enter to send', 'nexdirectory'); ?></span>
                <button type="submit" class="eep-chatbot-send" data-eep-chatbot-send><?php esc_html_e('Ask', 'nexdirectory'); ?></button>
            </div>
        </form>
    </section>
</div>
