<?php

/**
 * Setup Wizard page template.
 *
 * @package Inqyra
 */
// If this file is called directly, abort.
if ( !defined( 'WPINC' ) ) {
    die;
}
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template variables from parent scope.
// Load settings
$settings = get_option( 'inqyra_settings', [] );
// Get provider models from factory
$models = [];
$provider_types = [
    'claude',
    'openai',
    'gemini',
    'mistral',
    'deepseek'
];
foreach ( $provider_types as $provider_type ) {
    try {
        $provider = Inqyra_AI_Provider_Factory::create( $provider_type );
        $models[$provider_type] = $provider->get_models();
    } catch ( Exception $e ) {
        $models[$provider_type] = [];
    }
}
// Get available post types
$post_types = get_post_types( [
    'public' => true,
], 'objects' );
unset($post_types['attachment']);
// Auto-detect language from locale
$locale = get_locale();
$language_map = [
    'nl'    => 'nl',
    'nl_NL' => 'nl',
    'nl_BE' => 'nl',
    'en'    => 'en',
    'en_US' => 'en',
    'en_GB' => 'en',
    'en_AU' => 'en',
    'en_CA' => 'en',
    'en_NZ' => 'en',
    'en_ZA' => 'en',
    'de'    => 'de',
    'de_DE' => 'de',
    'de_AT' => 'de',
    'de_CH' => 'de',
    'fr'    => 'fr',
    'fr_FR' => 'fr',
    'fr_BE' => 'fr',
    'fr_CA' => 'fr',
    'fr_CH' => 'fr',
    'es'    => 'es',
    'es_ES' => 'es',
    'es_MX' => 'es',
    'es_AR' => 'es',
    'es_CO' => 'es',
    'es_CL' => 'es',
    'es_PE' => 'es',
    'es_VE' => 'es',
    'it'    => 'it',
    'it_IT' => 'it',
    'pt'    => 'pt',
    'pt_PT' => 'pt',
    'pt_BR' => 'pt',
    'pl'    => 'pl',
    'pl_PL' => 'pl',
    'sv'    => 'sv',
    'sv_SE' => 'sv',
    'da'    => 'da',
    'da_DK' => 'da',
    'no'    => 'no',
    'nb_NO' => 'no',
    'nn_NO' => 'no',
    'fi'    => 'fi',
    'fi_FI' => 'fi',
    'ja'    => 'ja',
    'ja_JP' => 'ja',
    'ko'    => 'ko',
    'ko_KR' => 'ko',
    'zh'    => 'zh',
    'zh_CN' => 'zh',
    'zh_TW' => 'zh',
    'zh_HK' => 'zh',
    'ar'    => 'ar',
    'ar_SA' => 'ar',
    'ar_EG' => 'ar',
    'ar_MA' => 'ar',
    'tr'    => 'tr',
    'tr_TR' => 'tr',
    'ru'    => 'ru',
    'ru_RU' => 'ru',
    'uk'    => 'uk',
    'uk_UA' => 'uk',
    'cs'    => 'cs',
    'cs_CZ' => 'cs',
    'ro'    => 'ro',
    'ro_RO' => 'ro',
    'hu'    => 'hu',
    'hu_HU' => 'hu',
    'el'    => 'el',
    'el_GR' => 'el',
    'he'    => 'he',
    'he_IL' => 'he',
    'th'    => 'th',
    'th_TH' => 'th',
    'vi'    => 'vi',
    'vi_VN' => 'vi',
    'id'    => 'id',
    'id_ID' => 'id',
    'ms'    => 'ms',
    'ms_MY' => 'ms',
    'hi'    => 'hi',
    'hi_IN' => 'hi',
];
$auto_language = ( isset( $language_map[$locale] ) ? $language_map[$locale] : 'en' );
// Get site name
$site_name = get_bloginfo( 'name' );
// Get saved wizard state
$user_id = get_current_user_id();
$wizard_state = get_transient( 'inqyra_wizard_state_' . $user_id );
// Check which API keys are configured
$encrypted_api_keys = $settings['api_keys'] ?? [];
$has_api_keys = [];
foreach ( [
    'claude',
    'openai',
    'gemini',
    'mistral',
    'deepseek'
] as $p ) {
    $has_api_keys[$p] = !empty( $encrypted_api_keys[$p] );
}
$has_document_upload = function_exists( 'inqyra_fs' ) && inqyra_fs()->is__premium_only() && inqyra_fs()->can_use_premium_code();
// Widget CSS URL for preview
$widget_css_url = INQYRA_URL . 'public/css/inqyra-public.css';
// Available HTML tags
$available_tags = [
    'p',
    'h1',
    'h2',
    'h3',
    'h4',
    'h5',
    'h6',
    'li',
    'td',
    'th',
    'blockquote',
    'figcaption',
    'div',
    'span',
    'article',
    'section'
];
?>
<div class="inqyra-wizard-wrap">
    <!-- Header -->
    <div class="inqyra-wizard-header">
        <div class="inqyra-wizard-logo">
            <span class="dashicons dashicons-format-chat"></span>
            <h1><?php 
esc_html_e( 'Inqyra Setup', 'inqyra' );
?></h1>
        </div>

        <?php
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only display flag; action link uses wp_nonce_url().
if ( isset( $_GET['restart'] ) && sanitize_text_field( wp_unslash( $_GET['restart'] ) ) === '1' ) {
    ?>
            <a href="<?php 
    echo esc_url( wp_nonce_url( admin_url( 'admin.php?page=inqyra-config&close_wizard=1' ), 'inqyra_close_wizard' ) );
    ?>" class="inqyra-wizard-close" title="<?php 
    esc_attr_e( 'Close wizard', 'inqyra' );
    ?>">
                <span class="dashicons dashicons-no-alt"></span>
            </a>
        <?php 
}
?>

        <!-- Step Indicator -->
        <div class="inqyra-wizard-steps">
            <div class="inqyra-wizard-step-dot active" data-step="1"><span>1</span></div>
            <div class="inqyra-wizard-step-line" data-after="1"></div>
            <div class="inqyra-wizard-step-dot" data-step="2"><span>2</span></div>
            <div class="inqyra-wizard-step-line" data-after="2"></div>
            <div class="inqyra-wizard-step-dot" data-step="3"><span>3</span></div>
            <div class="inqyra-wizard-step-line" data-after="3"></div>
            <div class="inqyra-wizard-step-dot" data-step="4"><span>4</span></div>
        </div>
    </div>

    <!-- Content -->
    <div class="inqyra-wizard-content">

        <!-- Step 1: AI Provider & API Key -->
        <div class="inqyra-wizard-step active" data-step="2">
            <h2 class="inqyra-wizard-step-title"><?php 
esc_html_e( 'Welcome to Inqyra', 'inqyra' );
?></h2>
            <p class="inqyra-wizard-step-description">
                <?php 
esc_html_e( 'This wizard will guide you through setting up your AI-powered chatbot. In just a few steps, your chatbot will be live on your website, answering visitor questions using your own content.', 'inqyra' );
?>
            </p>

            <div class="inqyra-wizard-card" style="margin-bottom: 20px;">
                <div class="inqyra-wizard-terms">
                    <p style="margin-top: 0; margin-bottom: 10px; color: #50575e;">
                        <?php esc_html_e('This plugin sends chat messages to external AI providers (such as Anthropic Claude, OpenAI, Google Gemini, Mistral, or DeepSeek) for processing. The Freemius SDK communicates with Freemius servers for license management and updates.', 'inqyra'); ?>
                    </p>
                    <label>
                        <input type="checkbox" id="wizard-accept-terms" value="1">
                        <?php echo wp_kses(
                            sprintf(
                                /* translators: 1: opening link tag for Privacy Policy, 2: closing link tag */
                                __('I acknowledge that data will be sent to external services as described in the %1$sPrivacy Policy%2$s.', 'inqyra'),
                                '<a href="https://inqyra.com/privacy-policy/" target="_blank">',
                                '</a>'
                            ),
                            ['a' => ['href' => [], 'target' => []]]
                        ); ?>
                    </label>
                    <div id="wizard-terms-warning" class="inqyra-wizard-validation error" style="display: none; margin-top: 8px;">
                        <span class="dashicons dashicons-warning"></span>
                        <span><?php esc_html_e('Please acknowledge the Privacy Policy to continue.', 'inqyra'); ?></span>
                    </div>
                </div>
            </div>

            <div class="inqyra-wizard-card">
                <h3><?php 
esc_html_e( 'Choose Provider', 'inqyra' );
?></h3>
                <div class="inqyra-provider-cards">
                    <div class="inqyra-provider-card selected" data-provider="claude">
                        <div class="provider-name">Claude (Anthropic) <span class="provider-badge"><?php 
esc_html_e( 'Recommended', 'inqyra' );
?></span></div>
                        <div class="provider-desc"><?php 
esc_html_e( 'Advanced reasoning and nuanced responses', 'inqyra' );
?></div>
                    </div>
                    <div class="inqyra-provider-card" data-provider="openai">
                        <div class="provider-name">OpenAI</div>
                        <div class="provider-desc"><?php 
esc_html_e( 'GPT models, widely used', 'inqyra' );
?></div>
                    </div>
                    <div class="inqyra-provider-card" data-provider="gemini">
                        <div class="provider-name">Google Gemini</div>
                        <div class="provider-desc"><?php 
esc_html_e( 'Google AI with multimodal capabilities', 'inqyra' );
?></div>
                    </div>
                    <div class="inqyra-provider-card" data-provider="mistral">
                        <div class="provider-name">Mistral</div>
                        <div class="provider-desc"><?php 
esc_html_e( 'European AI, fast and efficient', 'inqyra' );
?></div>
                    </div>
                    <div class="inqyra-provider-card" data-provider="deepseek">
                        <div class="provider-name">DeepSeek</div>
                        <div class="provider-desc"><?php 
esc_html_e( 'Affordable, high-performance AI', 'inqyra' );
?></div>
                    </div>
                </div>

                <div id="wizard-provider-info">
                    <div class="wizard-provider-detail" data-provider="claude">
                        <p class="description"><?php 
esc_html_e( 'Get your API key from:', 'inqyra' );
?>
                            <a href="https://console.anthropic.com/settings/keys" target="_blank">console.anthropic.com</a>
                        </p>
                    </div>
                    <div class="wizard-provider-detail" data-provider="openai" style="display:none;">
                        <p class="description"><?php 
esc_html_e( 'Get your API key from:', 'inqyra' );
?>
                            <a href="https://platform.openai.com/api-keys" target="_blank">platform.openai.com</a>
                        </p>
                    </div>
                    <div class="wizard-provider-detail" data-provider="gemini" style="display:none;">
                        <p class="description"><?php 
esc_html_e( 'Get your API key from:', 'inqyra' );
?>
                            <a href="https://aistudio.google.com/app/apikey" target="_blank">aistudio.google.com</a>
                        </p>
                    </div>
                    <div class="wizard-provider-detail" data-provider="mistral" style="display:none;">
                        <p class="description"><?php 
esc_html_e( 'Get your API key from:', 'inqyra' );
?>
                            <a href="https://console.mistral.ai/api-keys/" target="_blank">console.mistral.ai</a>
                        </p>
                    </div>
                    <div class="wizard-provider-detail" data-provider="deepseek" style="display:none;">
                        <p class="description"><?php 
esc_html_e( 'Get your API key from:', 'inqyra' );
?>
                            <a href="https://platform.deepseek.com/api_keys" target="_blank">platform.deepseek.com</a>
                        </p>
                    </div>
                </div>

                <div class="inqyra-wizard-field">
                    <label for="wizard-api-key"><?php 
esc_html_e( 'API Key', 'inqyra' );
?></label>
                    <div class="inqyra-wizard-api-key-wrap">
                        <input type="password"
                               id="wizard-api-key"
                               class="regular-text inqyra-api-key-input"
                               autocomplete="off"
                               placeholder="">
                        <button type="button" class="button inqyra-toggle-visibility" data-target="wizard-api-key">
                            <span class="dashicons dashicons-visibility"></span>
                        </button>
                        <button type="button" id="wizard-validate-api-key" class="button button-primary">
                            <?php 
esc_html_e( 'Validate', 'inqyra' );
?>
                        </button>
                        <span class="inqyra-wizard-spinner" id="wizard-api-spinner"></span>
                    </div>
                </div>

                <div id="wizard-api-result" style="display: none;"></div>

                <div id="wizard-model-select" class="inqyra-wizard-field" style="display: none;">
                    <label for="wizard-model"><?php 
esc_html_e( 'Model', 'inqyra' );
?></label>
                    <?php 
foreach ( $models as $provider => $provider_models ) {
    ?>
                        <select id="wizard-model-<?php 
    echo esc_attr( $provider );
    ?>"
                                class="wizard-model-select"
                                data-provider="<?php 
    echo esc_attr( $provider );
    ?>"
                                style="display: none;">
                            <?php 
    foreach ( $provider_models as $model_id => $model_name ) {
        ?>
                                <option value="<?php 
        echo esc_attr( $model_id );
        ?>">
                                    <?php 
        echo esc_html( $model_name );
        ?>
                                </option>
                            <?php 
    }
    ?>
                        </select>
                    <?php 
}
?>
                    <p class="description" style="margin-top: 4px;">
                        <a href="#" id="wizard-refresh-models" class="inqyra-refresh-models-link">
                            <span class="dashicons dashicons-update" style="font-size: 14px; width: 14px; height: 14px; vertical-align: middle;"></span>
                            <?php 
esc_html_e( 'Fetch latest models from API', 'inqyra' );
?>
                        </a>
                        <span id="wizard-refresh-models-status" style="margin-left: 8px;"></span>
                    </p>
                </div>

                <!-- Query Rewriting -->
                <div id="wizard-query-rewrite-section" class="inqyra-wizard-field" style="display: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;">
                    <label>
                        <input type="checkbox"
                               id="wizard-query-rewrite-enabled"
                               checked>
                        <?php 
esc_html_e( 'Enable query rewriting for better search results', 'inqyra' );
?>
                    </label>
                    <p class="description"><?php 
esc_html_e( 'Uses a fast AI model to expand search queries with related terms. Improves search accuracy with minimal cost.', 'inqyra' );
?></p>

                    <div id="wizard-rewrite-model-section" class="inqyra-wizard-field" style="margin-top: 10px;">
                        <label for="wizard-rewrite-provider"><?php 
esc_html_e( 'Rewrite Model', 'inqyra' );
?></label>
                        <input type="hidden" id="wizard-rewrite-provider" value="claude">
                        <?php 
$rewrite_models = [
    'claude'   => [
        'claude-3-haiku-20240307'   => 'Claude 3 Haiku (cheapest)',
        'claude-3-5-haiku-20241022' => 'Claude 3.5 Haiku',
    ],
    'openai'   => [
        'gpt-4o-mini' => 'GPT-4o Mini (cheapest)',
    ],
    'gemini'   => [
        'gemini-2.0-flash-lite' => 'Gemini 2.0 Flash Lite (cheapest)',
        'gemini-2.0-flash'      => 'Gemini 2.0 Flash',
    ],
    'mistral'  => [
        'ministral-8b-latest'  => 'Ministral 8B (cheapest)',
        'mistral-small-latest' => 'Mistral Small',
    ],
    'deepseek' => [
        'deepseek-chat' => 'DeepSeek Chat (cheapest)',
    ],
];
foreach ( $rewrite_models as $provider => $provider_models ) {
    ?>
                            <select id="wizard-rewrite-model-<?php 
    echo esc_attr( $provider );
    ?>"
                                    class="wizard-rewrite-model-select"
                                    data-provider="<?php 
    echo esc_attr( $provider );
    ?>"
                                    style="display: none;">
                                <?php 
    foreach ( $provider_models as $model_id => $model_name ) {
        ?>
                                    <option value="<?php 
        echo esc_attr( $model_id );
        ?>">
                                        <?php 
        echo esc_html( $model_name );
        ?>
                                    </option>
                                <?php 
    }
    ?>
                            </select>
                        <?php 
}
?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 3a: Agent Basics -->
        <div class="inqyra-wizard-step" data-step="3a">
            <h2 class="inqyra-wizard-step-title"><?php 
esc_html_e( 'Chatbot Configuration', 'inqyra' );
?></h2>
            <p class="inqyra-wizard-step-description">
                <?php 
esc_html_e( 'Set up the basic configuration for your chatbot. You can customize these settings later.', 'inqyra' );
?>
            </p>

            <div class="inqyra-wizard-card">
                <div class="inqyra-wizard-field">
                    <label for="wizard-agent-name"><?php 
esc_html_e( 'Chatbot Name', 'inqyra' );
?></label>
                    <input type="text"
                           id="wizard-agent-name"
                           class="regular-text"
                           value="<?php 
echo esc_attr( $site_name );
?>">
                </div>

                <div class="inqyra-wizard-field">
                    <label for="wizard-language"><?php 
esc_html_e( 'Language', 'inqyra' );
?></label>
                    <select id="wizard-language">
                        <option value="nl" <?php 
selected( $auto_language, 'nl' );
?>><?php 
esc_html_e( 'Dutch', 'inqyra' );
?></option>
                        <option value="en" <?php 
selected( $auto_language, 'en' );
?>><?php 
esc_html_e( 'English', 'inqyra' );
?></option>
                        <option value="de" <?php 
selected( $auto_language, 'de' );
?>><?php 
esc_html_e( 'German', 'inqyra' );
?></option>
                        <option value="fr" <?php 
selected( $auto_language, 'fr' );
?>><?php 
esc_html_e( 'French', 'inqyra' );
?></option>
                        <option value="es" <?php 
selected( $auto_language, 'es' );
?>><?php 
esc_html_e( 'Spanish', 'inqyra' );
?></option>
                        <option value="it" <?php 
selected( $auto_language, 'it' );
?>><?php 
esc_html_e( 'Italian', 'inqyra' );
?></option>
                        <option value="pt" <?php 
selected( $auto_language, 'pt' );
?>><?php 
esc_html_e( 'Portuguese', 'inqyra' );
?></option>
                        <option value="pl" <?php 
selected( $auto_language, 'pl' );
?>><?php 
esc_html_e( 'Polish', 'inqyra' );
?></option>
                        <option value="sv" <?php 
selected( $auto_language, 'sv' );
?>><?php 
esc_html_e( 'Swedish', 'inqyra' );
?></option>
                        <option value="da" <?php 
selected( $auto_language, 'da' );
?>><?php 
esc_html_e( 'Danish', 'inqyra' );
?></option>
                        <option value="no" <?php 
selected( $auto_language, 'no' );
?>><?php 
esc_html_e( 'Norwegian', 'inqyra' );
?></option>
                        <option value="fi" <?php 
selected( $auto_language, 'fi' );
?>><?php 
esc_html_e( 'Finnish', 'inqyra' );
?></option>
                        <option value="ja" <?php 
selected( $auto_language, 'ja' );
?>><?php 
esc_html_e( 'Japanese', 'inqyra' );
?></option>
                        <option value="ko" <?php 
selected( $auto_language, 'ko' );
?>><?php 
esc_html_e( 'Korean', 'inqyra' );
?></option>
                        <option value="zh" <?php 
selected( $auto_language, 'zh' );
?>><?php 
esc_html_e( 'Chinese', 'inqyra' );
?></option>
                        <option value="ar" <?php 
selected( $auto_language, 'ar' );
?>><?php 
esc_html_e( 'Arabic', 'inqyra' );
?></option>
                        <option value="tr" <?php 
selected( $auto_language, 'tr' );
?>><?php 
esc_html_e( 'Turkish', 'inqyra' );
?></option>
                        <option value="ru" <?php 
selected( $auto_language, 'ru' );
?>><?php 
esc_html_e( 'Russian', 'inqyra' );
?></option>
                        <option value="uk" <?php 
selected( $auto_language, 'uk' );
?>><?php 
esc_html_e( 'Ukrainian', 'inqyra' );
?></option>
                        <option value="cs" <?php 
selected( $auto_language, 'cs' );
?>><?php 
esc_html_e( 'Czech', 'inqyra' );
?></option>
                        <option value="ro" <?php 
selected( $auto_language, 'ro' );
?>><?php 
esc_html_e( 'Romanian', 'inqyra' );
?></option>
                        <option value="hu" <?php 
selected( $auto_language, 'hu' );
?>><?php 
esc_html_e( 'Hungarian', 'inqyra' );
?></option>
                        <option value="el" <?php 
selected( $auto_language, 'el' );
?>><?php 
esc_html_e( 'Greek', 'inqyra' );
?></option>
                        <option value="he" <?php 
selected( $auto_language, 'he' );
?>><?php 
esc_html_e( 'Hebrew', 'inqyra' );
?></option>
                        <option value="th" <?php 
selected( $auto_language, 'th' );
?>><?php 
esc_html_e( 'Thai', 'inqyra' );
?></option>
                        <option value="vi" <?php 
selected( $auto_language, 'vi' );
?>><?php 
esc_html_e( 'Vietnamese', 'inqyra' );
?></option>
                        <option value="id" <?php 
selected( $auto_language, 'id' );
?>><?php 
esc_html_e( 'Indonesian', 'inqyra' );
?></option>
                        <option value="ms" <?php 
selected( $auto_language, 'ms' );
?>><?php 
esc_html_e( 'Malay', 'inqyra' );
?></option>
                        <option value="hi" <?php 
selected( $auto_language, 'hi' );
?>><?php 
esc_html_e( 'Hindi', 'inqyra' );
?></option>
                    </select>
                    <p class="description"><?php 
esc_html_e( 'The language used for the default system prompt and query rewriting. The chatbot will respond in whatever language users write in.', 'inqyra' );
?></p>
                </div>

                <div class="inqyra-wizard-field">
                    <label><?php 
esc_html_e( 'System Prompt', 'inqyra' );
?></label>
                    <div class="inqyra-prompt-builder">
                        <div class="inqyra-prompt-builder-toggle inqyra-prompt-builder-cta" id="prompt-builder-toggle">
                            <button type="button" class="button button-primary" id="wizard-start-prompt-builder">
                                <span class="dashicons dashicons-admin-comments"></span>
                                <?php 
esc_html_e( 'Generate with AI', 'inqyra' );
?>
                            </button>
                            <div>
                                <strong><?php 
esc_html_e( 'Recommended', 'inqyra' );
?></strong>: <?php 
esc_html_e( 'Use the AI prompt builder for much better results. It will ask you a few questions about your business to create a tailored prompt.', 'inqyra' );
?>
                            </div>
                        </div>

                        <div class="inqyra-prompt-builder-chat" id="prompt-builder-chat" style="display: none;">
                            <div class="inqyra-prompt-builder-messages" id="prompt-builder-messages"></div>
                            <div class="inqyra-prompt-builder-input">
                                <textarea id="prompt-builder-input" rows="1"
                                          placeholder="<?php 
esc_attr_e( 'Type your answer...', 'inqyra' );
?>"></textarea>
                                <button type="button" class="button button-primary" id="prompt-builder-send">
                                    <span class="dashicons dashicons-arrow-right-alt"></span>
                                </button>
                                <span class="inqyra-wizard-spinner" id="prompt-builder-spinner"></span>
                            </div>
                            <div class="inqyra-prompt-builder-actions">
                                <button type="button" class="button button-primary" id="prompt-builder-generate" disabled>
                                    <?php 
esc_html_e( 'Generate Prompt', 'inqyra' );
?>
                                </button>
                                <button type="button" class="button" id="prompt-builder-reset">
                                    <?php 
esc_html_e( 'Start Over', 'inqyra' );
?>
                                </button>
                            </div>
                        </div>
                    </div>

                    <textarea id="wizard-system-prompt"
                              rows="12"
                              class="large-text"><?php 
echo esc_textarea( Inqyra_Default_Prompts::get( $auto_language ) );
?></textarea>
                    <p class="description"><?php 
esc_html_e( 'This is a basic default prompt. Use the AI builder above to create a prompt tailored to your business — it makes a big difference in answer quality.', 'inqyra' );
?></p>
                </div>

                <button type="button" class="inqyra-wizard-advanced-toggle" id="wizard-advanced-toggle">
                    <span class="dashicons dashicons-arrow-right-alt2"></span>
                    <?php 
esc_html_e( 'Advanced Settings', 'inqyra' );
?>
                </button>

                <div class="inqyra-wizard-advanced-content" id="wizard-advanced-content">
                    <div class="inqyra-wizard-field">
                        <label for="wizard-max-tokens"><?php 
esc_html_e( 'Max Tokens per Response', 'inqyra' );
?></label>
                        <input type="number" id="wizard-max-tokens" value="4096" min="100" max="32000" style="width: 120px;">
                    </div>
                    <div class="inqyra-wizard-field">
                        <label for="wizard-daily-token-limit"><?php 
esc_html_e( 'Daily Token Limit', 'inqyra' );
?></label>
                        <input type="number" id="wizard-daily-token-limit" value="1000000" min="0" style="width: 120px;">
                    </div>
                    <div class="inqyra-wizard-field">
                        <label for="wizard-cost-limit"><?php 
esc_html_e( 'Daily Cost Limit (USD)', 'inqyra' );
?></label>
                        <input type="number" id="wizard-cost-limit" value="10.00" min="0" step="0.01" style="width: 120px;">
                    </div>
                    <div class="inqyra-wizard-field" style="margin-bottom: 0;">
                        <label for="wizard-hourly-limit"><?php 
esc_html_e( 'Hourly Request Limit', 'inqyra' );
?></label>
                        <input type="number" id="wizard-hourly-limit" value="500" min="0" style="width: 120px;">
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 3b: Widget Appearance -->
        <div class="inqyra-wizard-step" data-step="3b">
            <h2 class="inqyra-wizard-step-title"><?php 
esc_html_e( 'Widget Appearance', 'inqyra' );
?></h2>
            <p class="inqyra-wizard-step-description">
                <?php 
esc_html_e( 'Customize how the chat widget looks on your website.', 'inqyra' );
?>
            </p>

            <div class="inqyra-wizard-preview-layout">
                <div class="inqyra-wizard-card" style="margin-bottom: 0;">
                    <div class="inqyra-wizard-field">
                        <label for="wizard-primary-color"><?php 
esc_html_e( 'Primary Color', 'inqyra' );
?></label>
                        <div class="inqyra-wizard-color-field">
                            <input type="color" id="wizard-primary-color" value="#5B7FFF">
                            <input type="text" id="wizard-primary-color-hex" value="#5B7FFF" placeholder="#5B7FFF" style="width: 80px;">
                        </div>
                    </div>

                    <div class="inqyra-wizard-field">
                        <label for="wizard-text-color"><?php 
esc_html_e( 'Text Color', 'inqyra' );
?></label>
                        <div class="inqyra-wizard-color-field">
                            <input type="color" id="wizard-text-color" value="#ffffff">
                            <input type="text" id="wizard-text-color-hex" value="#ffffff" placeholder="#ffffff" style="width: 80px;">
                        </div>
                    </div>

                    <div class="inqyra-wizard-field">
                        <label for="wizard-header-title"><?php 
esc_html_e( 'Header Title', 'inqyra' );
?></label>
                        <input type="text" id="wizard-header-title" class="regular-text" value="Chat">
                    </div>

                    <div class="inqyra-wizard-field">
                        <label for="wizard-header-subtitle"><?php 
esc_html_e( 'Header Subtitle', 'inqyra' );
?></label>
                        <input type="text" id="wizard-header-subtitle" class="regular-text" value="Powered by AI">
                    </div>

                    <div class="inqyra-wizard-field">
                        <label for="wizard-greeting"><?php 
esc_html_e( 'Greeting Message', 'inqyra' );
?></label>
                        <textarea id="wizard-greeting" rows="2" class="large-text"><?php 
echo esc_textarea( __( 'Hello! How can I help you today?', 'inqyra' ) );
?></textarea>
                    </div>

                    <div class="inqyra-wizard-field">
                        <label for="wizard-button-text"><?php 
esc_html_e( 'Button Text', 'inqyra' );
?></label>
                        <input type="text" id="wizard-button-text" class="regular-text" value="" placeholder="<?php 
esc_attr_e( "Let's chat!", 'inqyra' );
?>">
                        <p class="description"><?php 
esc_html_e( 'Leave empty for icon only.', 'inqyra' );
?></p>
                    </div>

                    <div class="inqyra-wizard-field">
                        <label for="wizard-send-button-text"><?php 
esc_html_e( 'Send Button Text', 'inqyra' );
?></label>
                        <input type="text" id="wizard-send-button-text" class="regular-text" value="" placeholder="<?php 
esc_attr_e( 'Send', 'inqyra' );
?>">
                        <p class="description"><?php 
esc_html_e( 'Text shown on the send button in the chat input area. Leave empty for icon only.', 'inqyra' );
?></p>
                    </div>

                    <div class="inqyra-wizard-field">
                        <label><?php 
esc_html_e( 'Widget Position', 'inqyra' );
?></label>
                        <div class="inqyra-wizard-position-grid">
                            <div class="inqyra-wizard-position-option" data-position="top-left"><?php 
esc_html_e( 'Top Left', 'inqyra' );
?></div>
                            <div class="inqyra-wizard-position-option" data-position="top-right"><?php 
esc_html_e( 'Top Right', 'inqyra' );
?></div>
                            <div class="inqyra-wizard-position-option" data-position="bottom-left"><?php 
esc_html_e( 'Bottom Left', 'inqyra' );
?></div>
                            <div class="inqyra-wizard-position-option selected" data-position="bottom-right"><?php 
esc_html_e( 'Bottom Right', 'inqyra' );
?></div>
                        </div>
                    </div>

                    <div class="inqyra-wizard-field">
                        <label for="wizard-powered-by"><?php 
esc_html_e( 'Powered By Text', 'inqyra' );
?></label>
                        <input type="text" id="wizard-powered-by" class="regular-text" value="Powered by Inqyra">
                        <p class="description">
                            <?php 
esc_html_e( 'Leave empty to hide the powered-by text.', 'inqyra' );
?>
                        </p>
                    </div>

                    <div class="inqyra-wizard-field">
                        <label><?php 
esc_html_e( 'Header Icon', 'inqyra' );
?></label>
                        <div class="inqyra-icon-upload">
                            <input type="hidden" id="wizard-header-icon-id" value="0">
                            <div id="wizard-header-icon-preview" class="inqyra-icon-preview" style="display:none;"></div>
                            <button type="button" id="wizard-header-icon-upload" class="button"><?php 
esc_html_e( 'Upload Icon', 'inqyra' );
?></button>
                            <button type="button" id="wizard-header-icon-remove" class="button" style="display:none;"><?php 
esc_html_e( 'Remove', 'inqyra' );
?></button>
                        </div>
                    </div>

                    <div class="inqyra-wizard-field">
                        <label>
                            <input type="checkbox" id="wizard-show-icon-messages" value="1">
                            <?php 
esc_html_e( 'Show icon next to chat balloons', 'inqyra' );
?>
                        </label>
                    </div>

                    <div class="inqyra-wizard-field">
                        <label>
                            <input type="checkbox" id="wizard-mobile-enabled" value="1" checked>
                            <?php 
esc_html_e( 'Show widget on mobile devices', 'inqyra' );
?>
                        </label>
                    </div>

                    <?php 
?>
                </div>

                <!-- Live Preview -->
                <div class="inqyra-wizard-preview-container" id="wizard-widget-preview">
                    <div class="inqyra-wizard-preview-widget" id="wizard-preview-content">
                        <!-- Preview content generated by JS -->
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 4: Index Content (combined crawl + embeddings) -->
        <div class="inqyra-wizard-step" data-step="4">
            <h2 class="inqyra-wizard-step-title" id="wizard-index-title"></h2>
            <p class="inqyra-wizard-step-description" id="wizard-index-description"></p>

            <div class="inqyra-wizard-card">
                <div class="inqyra-wizard-field">
                    <?php 
?>
                        <input type="hidden" name="wizard_crawl_post_types[]" value="page" data-posttype="page">
                        <p class="description"><?php 
esc_html_e( 'Inqyra will crawl and index all published pages on your website.', 'inqyra' );
?></p>
                    <?php 
?>
                </div>

                <button type="button" class="inqyra-wizard-advanced-toggle" id="wizard-crawl-advanced-toggle">
                    <span class="dashicons dashicons-arrow-right-alt2"></span>
                    <?php 
esc_html_e( 'Advanced Settings', 'inqyra' );
?>
                </button>

                <div class="inqyra-wizard-advanced-content" id="wizard-crawl-advanced-content">
                    <div class="inqyra-wizard-field">
                        <label><?php 
esc_html_e( 'HTML Tags to Extract', 'inqyra' );
?></label>
                        <div class="inqyra-wizard-checkbox-grid">
                            <?php 
foreach ( $available_tags as $tag ) {
    ?>
                                <label>
                                    <input type="checkbox"
                                           name="wizard_crawl_parts[]"
                                           value="<?php 
    echo esc_attr( $tag );
    ?>"
                                           checked>
                                    &lt;<?php 
    echo esc_html( $tag );
    ?>&gt;
                                </label>
                            <?php 
}
?>
                        </div>
                        <div id="wizard-custom-tags" class="inqyra-wizard-checkbox-grid" style="margin-top: 4px;"></div>
                        <div style="margin-top: 8px;">
                            <input type="text" id="wizard-custom-tag-input" placeholder="<?php 
esc_attr_e( 'e.g. nav, aside, main', 'inqyra' );
?>" style="width: 200px;">
                            <button type="button" id="wizard-add-custom-tag" class="button button-small"><?php 
esc_html_e( 'Add Tag', 'inqyra' );
?></button>
                        </div>
                        <p class="description"><?php 
esc_html_e( 'Select which HTML tags to extract content from.', 'inqyra' );
?></p>
                    </div>
                </div>

                <!-- Index actions -->
                <div id="wizard-index-actions">
                    <button type="button" id="wizard-start-indexing" class="inqyra-wizard-btn inqyra-wizard-btn-primary">
                        <span class="dashicons dashicons-search" style="margin-top: 2px;"></span>
                        <span id="wizard-index-btn-text"></span>
                    </button>
                    <span class="inqyra-wizard-spinner" id="wizard-index-spinner"></span>
                </div>

                <!-- Combined progress -->
                <div id="wizard-index-progress" style="display: none;">
                    <p id="wizard-index-step-label" style="margin: 10px 0 5px; color: #646970; font-weight: 500;"></p>
                    <div class="inqyra-wizard-progress">
                        <div class="inqyra-wizard-progress-bar">
                            <div class="inqyra-wizard-progress-fill" id="wizard-index-progress-fill"></div>
                        </div>
                        <div class="inqyra-wizard-progress-text" id="wizard-index-progress-text"></div>
                    </div>
                </div>

                <div id="wizard-index-summary" style="display: none;"></div>

                <p class="description" style="margin-top: 5px;" id="wizard-index-model-note"></p>

                <?php 
if ( $has_document_upload ) {
    ?>
                <div id="wizard-document-upload" style="margin-top: 20px; display: none;">
                    <h3><?php 
    esc_html_e( 'Upload Documents (Optional)', 'inqyra' );
    ?></h3>
                    <p class="description"><?php 
    esc_html_e( 'Upload PDF or DOCX files for additional knowledge.', 'inqyra' );
    ?></p>
                    <input type="file" id="wizard-document-file" accept=".pdf,.docx">
                    <button type="button" id="wizard-upload-document" class="button"><?php 
    esc_html_e( 'Upload', 'inqyra' );
    ?></button>
                </div>
                <?php 
}
?>
            </div>
        </div>

        <!-- Step 5: Test & Launch -->
        <div class="inqyra-wizard-step" data-step="5">
            <h2 class="inqyra-wizard-step-title"><?php 
esc_html_e( 'Test & Launch', 'inqyra' );
?></h2>
            <p class="inqyra-wizard-step-description">
                <?php 
esc_html_e( 'Everything is set up! Review the summary below and test your chatbot before going live.', 'inqyra' );
?>
            </p>

            <div class="inqyra-wizard-card">
                <h3><?php 
esc_html_e( 'Setup Summary', 'inqyra' );
?></h3>
                <ul class="inqyra-wizard-checklist" id="wizard-checklist">
                    <li>
                        <span class="dashicons dashicons-yes-alt"></span>
                        <span class="check-label"><?php 
esc_html_e( 'AI Provider', 'inqyra' );
?></span>
                        <span class="check-value" id="wizard-check-provider">—</span>
                    </li>
                    <li>
                        <span class="dashicons dashicons-yes-alt"></span>
                        <span class="check-label"><?php 
esc_html_e( 'Agent', 'inqyra' );
?></span>
                        <span class="check-value" id="wizard-check-agent">—</span>
                    </li>
                    <li>
                        <span class="dashicons dashicons-yes-alt" id="wizard-check-indexing-icon"></span>
                        <span class="check-label"><?php 
esc_html_e( 'Indexing', 'inqyra' );
?></span>
                        <span class="check-value" id="wizard-check-indexing">—</span>
                    </li>
                    <li>
                        <span class="dashicons dashicons-yes-alt"></span>
                        <span class="check-label"><?php 
esc_html_e( 'Widget', 'inqyra' );
?></span>
                        <span class="check-value" id="wizard-check-widget"><?php 
esc_html_e( 'Ready to activate', 'inqyra' );
?></span>
                    </li>
                </ul>
            </div>

            <div class="inqyra-wizard-card">
                <h3><?php 
esc_html_e( 'Test Your Chatbot', 'inqyra' );
?></h3>
                <p class="description"><?php 
esc_html_e( 'Try asking a question to make sure everything works correctly.', 'inqyra' );
?></p>
                <div class="inqyra-wizard-test-chat" id="wizard-test-chat">
                    <!-- Test chat iframe inserted by JS -->
                </div>
            </div>
        </div>

    </div>

    <!-- Footer Navigation -->
    <div class="inqyra-wizard-footer">
        <div class="inqyra-wizard-footer-left">
            <button type="button" id="wizard-prev" class="inqyra-wizard-btn inqyra-wizard-btn-secondary" style="display: none;">
                <span class="dashicons dashicons-arrow-left-alt2" style="margin-top: 3px;"></span>
                <?php 
esc_html_e( 'Previous', 'inqyra' );
?>
            </button>
        </div>
        <div class="inqyra-wizard-footer-right">
            <span class="inqyra-wizard-spinner" id="wizard-nav-spinner"></span>
            <button type="button" id="wizard-next" class="inqyra-wizard-btn inqyra-wizard-btn-primary">
                <?php 
esc_html_e( 'Next', 'inqyra' );
?>
                <span class="dashicons dashicons-arrow-right-alt2" style="margin-top: 3px;"></span>
            </button>
            <button type="button" id="wizard-complete" class="inqyra-wizard-btn inqyra-wizard-btn-success" style="display: none;">
                <span class="dashicons dashicons-yes" style="margin-top: 3px;"></span>
                <?php 
esc_html_e( 'Complete Setup', 'inqyra' );
?>
            </button>
        </div>
    </div>
</div>

<?php // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
