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

// Подключаем файл с функциями рендеринга настроек
require_once AI_CONTENT_WIZARD_PATH . 'admin/api/api-settings-blocks.php';
require_once AI_CONTENT_WIZARD_PATH . 'admin/api/api-valid.php';

/**
 * Подключаем стили и скрипты для мастера настройки.
 */
function setup_wizard_enqueue_assets( $hook ) {
    if ( isset( $_GET['page'] ) && $_GET['page'] === 'ai_content_wizard_wizard' ) {
        // Подключаем стили и скрипты из общих настроек
        wp_enqueue_style( 'ai-content-wizard-api-settings-style', AI_CONTENT_WIZARD_URL . 'css/api-settings-styles.css', array(), AI_CONTENT_WIZARD_VERSION );
        wp_enqueue_script( 'ai-content-wizard-api-settings-script', AI_CONTENT_WIZARD_URL . 'js/api-settings-scripts.js', array('jquery'), AI_CONTENT_WIZARD_VERSION, true );
        // Подключаем специфические стили и скрипты мастера
        wp_enqueue_style( 'setup-wizard-style', plugin_dir_url( __FILE__ ) . 'setup-wizard.css', array(), '1.0.0' );
        wp_enqueue_script( 'setup-wizard-script', plugin_dir_url( __FILE__ ) . 'setup-wizard.js', array( 'jquery' ), '1.0.0', true );
    }
}
add_action( 'admin_enqueue_scripts', 'setup_wizard_enqueue_assets' );

/**
 * Получить следующий шаг из массива $steps.
 */
function ai_content_wizard_get_next_step( $current_step, $steps ) {
    $index = array_search( $current_step, $steps, true );
    if ( $index === false || ! isset( $steps[ $index + 1 ] ) ) {
        return 'finish';
    }
    return $steps[ $index + 1 ];
}

/**
 * Получить предыдущий шаг из массива $steps.
 */
function ai_content_wizard_get_previous_step( $current_step, $steps ) {
    $index = array_search( $current_step, $steps, true );
    if ( $index === false || $index === 0 ) {
        return 'welcome';
    }
    return $steps[ $index - 1 ];
}

/**
 * Проверить и создать таблицы, если их нет.
 */
function ai_content_wizard_check_and_create_tables() {
    global $wpdb;
    $settings_table  = $wpdb->prefix . 'ai_content_wizard_settings';
    $post_logs_table = $wpdb->prefix . 'ai_content_wizard_posts_logs';
    $plan_logs_table = $wpdb->prefix . 'ai_content_wizard_content_plan_logs';
    $missing         = false;
    if ( $wpdb->get_var( "SHOW TABLES LIKE '$settings_table'" ) != $settings_table ) {
        $missing = true;
    }
    if ( $wpdb->get_var( "SHOW TABLES LIKE '$post_logs_table'" ) != $post_logs_table ) {
        $missing = true;
    }
    if ( $wpdb->get_var( "SHOW TABLES LIKE '$plan_logs_table'" ) != $plan_logs_table ) {
        $missing = true;
    }
    if ( $missing ) {
        ai_content_wizard_on_activation();
    }
}

/**
 * Основная функция отображения страницы мастера настройки плагина.
 */
function ai_content_wizard_wizard_page() {
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( esc_html__( 'Access Denied', 'ai-content-wizard' ) );
    }
    
    // Запускаем буферизацию вывода
    ob_start();

    // Если передан параметр manual=1 – завершаем мастер и переходим в настройки API
    if ( isset( $_GET['manual'] ) && $_GET['manual'] == '1' ) {
        update_option( 'ai_content_wizard_wizard_completed', 1 );
        wp_safe_redirect( esc_url( admin_url( 'admin.php?page=ai_content_wizard_api_settings' ) ) );
        exit;
    }

    // Если передан параметр finish_wizard=1 – завершаем мастер и возвращаемся на главную страницу плагина
    if ( isset( $_GET['finish_wizard'] ) && $_GET['finish_wizard'] == '1' ) {
        update_option( 'ai_content_wizard_wizard_completed', 1 );
        wp_safe_redirect( esc_url( admin_url( 'admin.php?page=ai_content_wizard' ) ) );
        exit;
    }

    // Определяем шаги мастера
    $steps = array( 'welcome', 'system_check', 'text_provider', 'image_provider', 'notifications', 'finish' );
    $current_step = isset( $_REQUEST['ai_content_wizard_wizard_step'] ) ? sanitize_text_field( $_REQUEST['ai_content_wizard_wizard_step'] ) : 'welcome';
	$completed_steps = get_option( 'ai_content_wizard_completed_steps', array() );
	
    // Обработка кнопки Skip – пропускаем текущий шаг
    if ( $_SERVER['REQUEST_METHOD'] === 'POST' && isset( $_POST['skip_step'] ) ) {
        $current_step = ai_content_wizard_get_next_step( $current_step, $steps );
    }

    // Обработка отправки формы (если не нажата кнопка Back и не Skip)
    if ( $_SERVER['REQUEST_METHOD'] === 'POST' && ! isset( $_POST['back_step'] ) && ! isset( $_POST['skip_step'] ) ) {
        $error_occured = false; // Флаг ошибки
        switch ( $current_step ) {
            case 'system_check':
                ai_content_wizard_check_and_create_tables();
                break;
			case 'text_provider':
				$text_provider = sanitize_text_field( $_POST['text_provider'] ?? '' );
				$error = '';
				$modal_to_show = '';
				if ( empty( $text_provider ) ) {
					$error = __( 'Please select a text provider.', 'ai-content-wizard' );
					$modal_to_show = 'showGenericErrorModal';
				} else {
					// Проверяем API-ключ для выбранного провайдера
					if ( $text_provider === 'openai' ) {
						$openai_key = sanitize_text_field( $_POST['ai_content_wizard_api_key'] ?? '' );
						$selected_model = sanitize_text_field( $_POST['text_model_selector'] ?? 'gpt-4o-mini' );
						if ( empty( $openai_key ) ) {
							$error = __( 'OpenAI API key is required.', 'ai-content-wizard' );
							$modal_to_show = 'showGenericErrorModal';
						} elseif ( ! is_valid_openai_api_key( $openai_key, $selected_model ) ) {
							$error = __( 'The OpenAI API key is invalid.', 'ai-content-wizard' );
							$modal_to_show = 'showOpenAIErrorModal';
						}
					} elseif ( $text_provider === 'anthropic' ) {
						$anthropic_key = sanitize_text_field( $_POST['ai_content_wizard_anthropic_api_key'] ?? '' );
						$selected_model = sanitize_text_field( $_POST['text_model_selector'] ?? 'claude-3-5-sonnet-20241022' );
						if ( empty( $anthropic_key ) ) {
							$error = __( 'Anthropic API key is required.', 'ai-content-wizard' );
							$modal_to_show = 'showGenericErrorModal';
						} elseif ( ! is_valid_anthropic_api_key( $anthropic_key, $selected_model ) ) {
							$error = __( 'The Anthropic API key is invalid.', 'ai-content-wizard' );
							$modal_to_show = 'showAnthropicErrorModal';
						}
					} elseif ( $text_provider === 'deepseek' ) {
						$deepseek_key = sanitize_text_field( $_POST['deepseek_api_key'] ?? '' );
						$selected_model = sanitize_text_field( $_POST['text_model_selector'] ?? 'gpt-4o-mini' );
						if ( empty( $deepseek_key ) ) {
							$error = __( 'DeepSeek API key is required.', 'ai-content-wizard' );
							$modal_to_show = 'showGenericErrorModal';
						} elseif ( ! is_valid_deepseek_api_key( $deepseek_key, $selected_model ) ) {
							$error = __( 'The DeepSeek API key is invalid.', 'ai-content-wizard' );
							$modal_to_show = 'showDeepSeekErrorModal';
						}
					}
				}
				// Проверяем, что модель выбрана
				if ( empty( $_POST['text_model_selector'] ) ) {
					$error = __( 'Please select a text model.', 'ai-content-wizard' );
					$modal_to_show = 'showGenericErrorModal';
				}
				if ( ! empty( $error ) ) {
					$error_occured = true;
					// Показываем соответствующее модальное окно
					echo '<script type="text/javascript">
							document.addEventListener("DOMContentLoaded", function(){
								window.' . esc_js( $modal_to_show ) . '();
							});
						  </script>';
					break;
				}
				// Сохраняем настройки провайдера и модели
				ai_content_wizard_update_setting( 'ai_content_wizard_text_provider', $text_provider );
				if ( $text_provider === 'openai' ) {
					ai_content_wizard_update_setting( 'ai_content_wizard_api_key', $openai_key );
				} elseif ( $text_provider === 'anthropic' ) {
					ai_content_wizard_update_setting( 'ai_content_wizard_anthropic_api_key', $anthropic_key );
				} elseif ( $text_provider === 'deepseek' ) {
					ai_content_wizard_update_setting( 'deepseek_api_key', $deepseek_key );
				}
				ai_content_wizard_update_setting( 'ai_content_wizard_text_model', sanitize_text_field( $_POST['text_model_selector'] ) );
				break;
            case 'image_provider':
                $img_provider = sanitize_text_field( $_POST['image_provider'] ?? 'dalle' );
                ai_content_wizard_update_setting( 'ai_content_wizard_image_provider', $img_provider );
                // Если для провайдера требуется API‑ключ – проверяем его наличие
                if ( $img_provider === 'deepai' ) {
                    $img_api_key = sanitize_text_field( $_POST['ai_content_wizard_deepai_api_key'] ?? '' );
                    if ( empty( $img_api_key ) ) {
                        $error = __( 'DeepAI API key is required for DeepAI provider.', 'ai-content-wizard' );
                    } else {
                        ai_content_wizard_update_setting( 'ai_content_wizard_deepai_api_key', $img_api_key );
                    }
                } elseif ( $img_provider === 'stablediffusion' ) {
                    $img_api_key = sanitize_text_field( $_POST['ai_content_wizard_stable_diffusion_api_key'] ?? '' );
                    if ( empty( $img_api_key ) ) {
                        $error = __( 'Stable Diffusion API key is required for Stable Diffusion provider.', 'ai-content-wizard' );
                    } else {
                        ai_content_wizard_update_setting( 'ai_content_wizard_stable_diffusion_api_key', $img_api_key );
                    }
                } elseif ( $img_provider === 'ideogram' ) {
                    $img_api_key = sanitize_text_field( $_POST['ideogram_api_key'] ?? '' );
                    if ( empty( $img_api_key ) ) {
                        $error = __( 'Ideogram API key is required for Ideogram provider.', 'ai-content-wizard' );
                    } else {
                        ai_content_wizard_update_setting( 'ideogram_api_key', $img_api_key );
                    }
                }
                // Проверяем, что модель выбрана
                if ( empty( $_POST['image_model_selector'] ) ) {
                    $error = __( 'Please select an image model.', 'ai-content-wizard' );
                }
                if ( ! empty( $error ) ) {
                    $error_occured = true;
                    echo '<script type="text/javascript">
                            document.addEventListener("DOMContentLoaded", function(){
                                alert("' . esc_js( $error ) . '");
                            });
                          </script>';
                    break;
                }
                ai_content_wizard_update_setting( 'ai_content_wizard_image_model', sanitize_text_field( $_POST['image_model_selector'] ) );
				ai_content_wizard_update_image_model_parameters( sanitize_text_field( $_POST['image_model_selector'] ) );

                break;
            case 'notifications':
                $enable_email = isset( $_POST['enable_email_notifications'] ) ? 1 : 0;
                ai_content_wizard_update_setting( 'ai_content_wizard_enable_email_notifications', $enable_email );
                if ( isset( $_POST['email_address'] ) ) {
                    ai_content_wizard_update_setting( 'ai_content_wizard_email_address', sanitize_email( $_POST['email_address'] ) );
                }
                $enable_tg = isset( $_POST['enable_telegram_notifications'] ) ? 1 : 0;
                ai_content_wizard_update_setting( 'ai_content_wizard_enable_telegram_notifications', $enable_tg );
                if ( isset( $_POST['telegram_bot_token'] ) ) {
                    ai_content_wizard_update_setting( 'ai_content_wizard_telegram_bot_token', sanitize_text_field( $_POST['telegram_bot_token'] ) );
                }
                if ( isset( $_POST['telegram_chat_id'] ) ) {
                    ai_content_wizard_update_setting( 'ai_content_wizard_telegram_chat_id', sanitize_text_field( $_POST['telegram_chat_id'] ) );
                }
                break;
			case 'finish':
				// Сохраняем дефолтные настройки
				ai_content_wizard_update_setting('ai_content_wizard_enable_image_generation', 1);
				ai_content_wizard_update_setting('ai_content_wizard_enable_additional_images', 1);
				ai_content_wizard_update_setting('ai_content_wizard_additional_images_count', 2);
				ai_content_wizard_update_setting('ai_content_wizard_enable_toc_generation', 1);
				ai_content_wizard_update_setting('ai_content_wizard_enable_tags_generation', 1);

				update_option( 'ai_content_wizard_wizard_completed', 1 );
				if ( ! headers_sent() ) {
					ob_end_clean();
					wp_safe_redirect( esc_url( admin_url( 'admin.php?page=ai_content_wizard_settings' ) ) );
					exit;
				} else {
					echo '<script type="text/javascript">window.location.href="' . esc_url( admin_url( 'admin.php?page=ai_content_wizard_settings' ) ) . '";</script>';
					exit;
				}
				break;


        }
		if ( ! $error_occured && $current_step !== 'finish' && ! isset( $_POST['back_step'] ) ) {
			$completed_steps = get_option( 'ai_content_wizard_completed_steps', array() );
			if ( ! in_array( $current_step, $completed_steps ) ) {
				$completed_steps[] = $current_step;
				update_option( 'ai_content_wizard_completed_steps', $completed_steps );
			}
			$current_step = ai_content_wizard_get_next_step( $current_step, $steps );
		}
    }
    ?>
<div class="ai-wizard-container">
    <div class="ai-wizard-header">
        <h1>
            <svg class="header-icon" viewBox="0 0 24 24" width="24" height="24">
                <path d="M12 3l9 5v8l-9 5-9-5V8l9-5zm0 2l-7 4v6l7 4 7-4V9l-7-4z" fill="#fff"/>
            </svg>
            <?php esc_html_e( 'AI Content Wizard Setup', 'ai-content-wizard' ); ?>
        </h1>
    </div>

<div class="ai-wizard-steps" style="background: rgb(245 247 250 / 35%); padding: 15px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); margin-bottom: 20px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; align-items: center; position: relative;">
    <?php 
    $step_icons = [
        'welcome' => '<path d="M12 2L22 7V17L12 22L2 17V7L12 2Z" fill="none" stroke="#2E7D32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>', // Новая иконка для Welcome (зеленая звезда в ромбе)
        'system_check' => '<path d="M4 4H20V20H4V4Z M6 6H18V18H6V6Z" fill="none" stroke="#FFD700" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
        'text_provider' => '<path d="M3 6H21M3 12H21M3 18H21" fill="none" stroke="#2196F3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
        'image_provider' => '<path d="M3 3H21V21H3V3Z M9 9L15 15M6 12H18" fill="none" stroke="#E91E63" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
        'notifications' => '<path d="M4 8L12 2L20 8V18H4V8Z M12 22V19" fill="none" stroke="#FF5722" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
        'finish' => '<path d="M5 13L9 17L19 7" fill="none" stroke="#2E7D32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' // Зеленая галочка для Finish
    ];
    $total_steps = count($steps);
    foreach ($steps as $index => $st) : 
        $is_completed = in_array($st, $completed_steps);
        $is_current = $st === $current_step;
        $class = $is_current ? 'active' : ($is_completed ? 'completed' : '');
        $link = $is_completed || $is_current ? add_query_arg('ai_content_wizard_wizard_step', $st) : '#';
        $icon_color = ($st === 'welcome') ? '#2E7D32' : '#B0BEC5'; // Зеленый для Welcome, серый для неактивных
    ?>
        <a href="<?php echo esc_url($link); ?>" class="ai-wizard-step-indicator <?php echo esc_attr($class); ?>" <?php if (!$is_completed && !$is_current) echo 'style="pointer-events: none;"'; ?>>
            <div class="step-icon-wrapper" style="display: flex; flex-direction: column; align-items: center;">
                <svg class="step-icon" viewBox="0 0 24 24" width="20" height="20" style="transition: opacity 0.3s, transform 0.3s;">
                    <?php 
						$allowed_tags = array(
							'path' => array(
								 'd'              => true,
								 'fill'           => true,
								 'stroke'         => true,
								 'stroke-width'   => true,
								 'stroke-linecap' => true,
								 'stroke-linejoin'=> true,
							)
						);
						echo wp_kses( str_replace( 'stroke="#2E7D32"', 'stroke="' . esc_attr( $icon_color ) . '"', $step_icons[$st] ), $allowed_tags );
						?>

                </svg>
                <span class="step-text" style="font-size: 12px; color: #333; margin-top: 4px; transition: color 0.3s, text-shadow 0.3s;">
                    <?php echo esc_html(ucfirst(str_replace('_', ' ', $st))); ?>
                </span>
            </div>
        </a>
        <?php if ($index < $total_steps - 1) : ?>
            <div class="step-arrow" style="display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;">
                <svg viewBox="0 0 24 24" width="16" height="16" style="fill: #B0BEC5;">
                    <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="#B0BEC5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
        <?php endif; ?>
    <?php endforeach; ?>
</div>

<style>
    .ai-wizard-steps {
        background: rgba(245, 247, 250, 0.8); /* Полупрозрачный фон */
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
        overflow: hidden;
    }

    .ai-wizard-step-indicator {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 12px;
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        min-width: 80px;
        justify-content: center;
    }

    .ai-wizard-step-indicator:hover:not([style*="pointer-events: none"]) {
        background: #f5f5f5;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

    .ai-wizard-step-indicator:hover .step-text {
        color: #1E88E5;
        text-shadow: 0 1px 2px rgba(30, 136, 229, 0.3);
    }

    .ai-wizard-step-indicator:hover .step-icon {
        transform: scale(1.1) rotate(10deg);
    }

    .ai-wizard-step-indicator.active {
        background: #c8e3ca;
        border-color: #2E7D32;
        color: #2E7D32;
        box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
    }

    .ai-wizard-step-indicator.active .step-text {
        color: #2E7D32;
        text-shadow: none;
    }

    .ai-wizard-step-indicator.active .step-icon {
        opacity: 0.8; /* Легкое затухание иконки при активации */
        transform: scale(1.1);
    }

    .ai-wizard-step-indicator.completed {
        background: #E8F5E9;
        border-color: #4CAF50;
        color: #2E7D32;
    }

    .ai-wizard-step-indicator.completed .step-text {
        color: #2E7D32;
    }

    .step-icon {
        transition: opacity 0.3s, transform 0.3s;
    }

    /* Стили для неактивных шагов */
    .ai-wizard-step-indicator[style*="pointer-events: none"] {
        opacity: 0.6;
        background: #f5f5f5;
        cursor: not-allowed;
    }

    .step-text {
        font-size: 12px;
        color: #333;
        margin-top: 4px;
        transition: color 0.3s, text-shadow 0.3s;
        white-space: nowrap; /* Предотвращает перенос текста */
    }

    .step-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
    }

    .step-arrow svg {
        fill: #B0BEC5;
        transition: transform 0.3s;
    }

    .ai-wizard-step-indicator:hover + .step-arrow svg {
        transform: scale(1.2);
    }
</style>

    <div class="ai-wizard-content">
        <form method="post" class="ai-wizard-form">
            <input type="hidden" name="ai_content_wizard_wizard_step" value="<?php echo esc_attr( $current_step ); ?>">
            <?php
            switch ( $current_step ) {
					case 'welcome':
					?>
					<div style="background: #f5f7fa33; padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-width: 80%; margin: 20px auto; color: #333;">
						<h1 style="font-family: 'Arial', sans-serif; font-size: 36px; font-weight: bold; text-align: center; margin-bottom: 20px; color: #1E88E5; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);"><?php esc_html_e( 'AI Content', 'ai-content-wizard' ); ?> <span style="color: #E91E63;">Wizard</span></h1>
						
						<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
							<div style="flex: 1;">
								<h2 style="font-size: 24px; margin: 0 0 10px 0; color: #4A148C;"><?php esc_html_e( 'Welcome, Visionary!', 'ai-content-wizard' ); ?></h2>
								<p style="font-size: 18px; line-height: 1.5; margin: 0; color: #616161;">
									<?php esc_html_e( 'Step into the enchanted world of AI Content Wizard! Our magical assistant will whisk you through a swift setup, unlocking AI-powered content creation in an instant.', 'ai-content-wizard' ); ?>
								</p>
							</div>
							<div style="flex: 0; margin-left: 20px;">
								<svg class="welcome-svg" style="width: 100px; height: 100px;" viewBox="0 0 100 100">
									<!-- Волшебная палочка -->
									<rect x="40" y="30" width="5" height="50" rx="2" fill="#6A1B9A" transform="rotate(-30, 42.5, 55)" style="animation: wandWave 3s infinite ease-in-out;"/>
									<rect x="39" y="26" width="7" height="10" rx="3" fill="#4A148C" transform="rotate(-30, 42.5, 31)" style="animation: wandWave 3s infinite ease-in-out;"/>
									
									<!-- Звезда на кончике палочки -->
									<circle cx="32" cy="22" r="4" fill="#FFD700" style="animation: glow 1.5s infinite alternate;"/>
									
									<!-- Магические искры -->
									<circle cx="28" cy="18" r="1" fill="#FF5722" style="animation: sparkFly 2s infinite ease-out;"/>
									<circle cx="25" cy="25" r="1.5" fill="#2196F3" style="animation: sparkFly 1.5s infinite ease-out 0.2s;"/>
									<circle cx="30" cy="15" r="2" fill="#E91E63" style="animation: sparkFly 2.5s infinite ease-out 0.5s;"/>
									<circle cx="35" cy="17" r="1" fill="#FFEB3B" style="animation: sparkFly 1.8s infinite ease-out 0.7s;"/>
									<circle cx="24" cy="20" r="1.2" fill="#4CAF50" style="animation: sparkFly 2.2s infinite ease-out 1s;"/>
									
									<!-- Магический след -->
									<path d="M32 22 Q28 28 22 32 Q18 38 20 45" fill="none" stroke="#FFD700" stroke-width="1" stroke-dasharray="2,2" style="animation: trailFade 3s infinite linear;"/>
								</svg>
							</div>
						</div>

						<ul style="list-style: none; padding: 0; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px;">
							<li style="background: #FFFFFF; padding: 12px 20px; border-radius: 10px; font-size: 16px; color: #424242; flex: 1; min-width: 200px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; position: relative; border-left: 4px solid #2E7D32;">
								<span style="color: #F57C00; margin-right: 8px;">✨</span><?php esc_html_e( 'Choose AI providers for text & images', 'ai-content-wizard' ); ?>
							</li>
							<li style="background: #FFFFFF; padding: 12px 20px; border-radius: 10px; font-size: 16px; color: #424242; flex: 1; min-width: 200px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; position: relative; border-left: 4px solid #F57C00;">
								<span style="color: #D32F2F; margin-right: 8px;">🔔</span><?php esc_html_e( 'Enable real-time notifications', 'ai-content-wizard' ); ?>
							</li>
							<li style="background: #FFFFFF; padding: 12px 20px; border-radius: 10px; font-size: 16px; color: #424242; flex: 1; min-width: 200px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; position: relative; border-left: 4px solid #4CAF50;">
								<span style="color: #4CAF50; margin-right: 8px;">✅</span><?php esc_html_e( 'Check system compatibility', 'ai-content-wizard' ); ?>
							</li>
							<li style="background: #FFFFFF; padding: 12px 20px; border-radius: 10px; font-size: 16px; color: #424242; flex: 1; min-width: 200px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; position: relative; border-left: 4px solid #7B1FA2;">
								<span style="color: #7B1FA2; margin-right: 8px;">🔮</span><?php esc_html_e( 'Customize settings on demand', 'ai-content-wizard' ); ?>
							</li>
						</ul>

						<div style="display: flex; justify-content: flex-start; align-items: center; margin-top: 30px;">
							<button style="background: #E91E63; color: white; padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background 0.3s; box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3);">
								<?php esc_html_e( 'Launch Setup', 'ai-content-wizard' ); ?>
							</button>
						</div>
					</div>

					<style>
					@keyframes glow {
						0% { opacity: 0.7; filter: blur(0.5px); }
						100% { opacity: 1; filter: blur(1px); transform: scale(1.2); }
					}
					@keyframes wandWave {
						0% { transform: rotate(-30deg); }
						50% { transform: rotate(-15deg); }
						100% { transform: rotate(-30deg); }
					}
					@keyframes sparkFly {
						0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
						25% { opacity: 1; transform: translate(-5px, -5px) scale(1.2); }
						100% { opacity: 0; transform: translate(-15px, -10px) scale(0.8); }
					}
					@keyframes trailFade {
						0% { opacity: 0; stroke-dashoffset: 20; }
						50% { opacity: 0.8; }
						100% { opacity: 0; stroke-dashoffset: 0; }
					}
					ul li:hover {
						transform: translateY(-5px);
						box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
					}
					button:hover {
						background: #C2185B;
					}
					</style>
					<?php
					break;
				case 'system_check':
					?>
					<div style="background: rgba(245, 247, 250, 0.8); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-width: 900px; margin: 20px auto; color: #333;">
						<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
							<div style="flex: 1;">
								<h2 style="font-size: 24px; line-height: 1.5; margin: 0 0 10px 0; color: #4A148C; font-weight: bold;">
									<?php esc_html_e('System Check & SEO Plugin', 'ai-content-wizard'); ?>
								</h2>
								<p style="font-size: 18px; line-height: 1.5; margin: 0; color: #616161;">
									<?php esc_html_e('Let’s ensure your system is ready for AI magic! We’ll check compatibility and SEO setup.', 'ai-content-wizard'); ?>
								</p>
							</div>
							<div style="flex: 0; margin-left: 20px;">
								<svg class="system-check-svg" style="width: 100px; height: 100px;" viewBox="0 0 100 100">
									<!-- Иконка шестеренки с анимацией -->
									<circle cx="50" cy="50" r="40" fill="none" stroke="#4CAF50" stroke-width="4" stroke-dasharray="10,5" style="animation: rotateGear 4s infinite linear;" />
									<circle cx="50" cy="50" r="25" fill="none" stroke="#FFD700" stroke-width="4" stroke-dasharray="8,4" style="animation: rotateGear 3s infinite linear reverse;" />
									<path d="M45 55 L50 60 L55 55" fill="none" stroke="#E91E63" stroke-width="4" stroke-linecap="round" style="animation: checkPulse 1.5s infinite ease-in-out;" />
								</svg>
							</div>
						</div>

						<div class="system-check-table-container" style="background: #FFFFFF; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); overflow-x: auto;">
							<?php $results = ai_content_wizard_system_check(); ?>
							<table class="system-check-table" style="width: 100%; border-collapse: collapse; font-size: 16px; color: #424242;">
								<thead>
									<tr style="background: #f5f7fa; color: #333;">
										<th style="padding: 12px 15px; text-align: left; font-weight: bold;"><?php esc_html_e('Requirement', 'ai-content-wizard'); ?></th>
										<th style="padding: 12px 15px; text-align: left; font-weight: bold;"><?php esc_html_e('Current', 'ai-content-wizard'); ?></th>
										<th style="padding: 12px 15px; text-align: left; font-weight: bold;"><?php esc_html_e('Required', 'ai-content-wizard'); ?></th>
										<th style="padding: 12px 15px; text-align: center; font-weight: bold;"><?php esc_html_e('Status', 'ai-content-wizard'); ?></th>
										<th style="padding: 12px 15px; text-align: left; font-weight: bold;"><?php esc_html_e('Recommendation', 'ai-content-wizard'); ?></th>
									</tr>
								</thead>
								<tbody>
									<?php foreach ($results as $item):
										$status = $item[3];
										$row_class = '';
										$status_icon = '';
										if ($status === true || $status === 'OK') {
											$status_icon = '<svg class="status-icon" viewBox="0 0 24 24" width="20" height="20"><path d="M5 13l4 4L19 7" fill="none" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
										} elseif ($status === 'warning') {
											$row_class = 'warning-row';
											$status_icon = '<svg class="status-icon warning" viewBox="0 0 24 24" width="20" height="20"><path d="M12 2L2 22h20L12 2zm0 16v-2m0-4V8" fill="none" stroke="#FFB300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
										} else {
											$row_class = 'error-row';
											$status_icon = '<svg class="status-icon error" viewBox="0 0 24 24" width="20" height="20"><circle cx="12" cy="12" r="10" fill="none" stroke="#D32F2F" stroke-width="2"/><path d="M6 18L18 6M6 6l12 12" fill="none" stroke="#D32F2F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
										}
									?>
										<tr class="<?php echo esc_attr($row_class); ?>" style="border-bottom: 1px solid #e0e0e0; transition: all 0.3s;">
											<td style="padding: 15px;"><?php echo esc_html($item[0]); ?></td>
											<td style="padding: 15px;"><?php echo esc_html($item[1]); ?></td>
											<td style="padding: 15px;"><?php echo esc_html($item[2]); ?></td>
											<td style="padding: 15px; text-align: center;"><?php echo wp_kses_post( $status_icon ); ?></td>
											<td style="padding: 15px;"><?php echo esc_html($item[4]); ?></td>
										</tr>
									<?php endforeach; ?>
								</tbody>
							</table>
						</div>

						<div class="ai-wizard-nav" style="display: flex; justify-content: space-between; align-items: center; margin-top: 30px;">
							<div class="nav-left">
								<a href="<?php echo esc_url( add_query_arg('ai_content_wizard_wizard_step', ai_content_wizard_get_previous_step($current_step, $steps)) ); ?>" style="background: #B0BEC5; color: white; padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background 0.3s, transform 0.3s; box-shadow: 0 5px 15px rgba(176, 190, 197, 0.3); text-decoration: none;">
									← <?php esc_html_e('Back', 'ai-content-wizard'); ?>
								</a>
							</div>
							<div class="nav-right">
								<button type="submit" name="skip_step" style="background: none; border: none; color: #E91E63; font-size: 16px; cursor: pointer; margin-right: 20px; transition: color 0.3s;"><?php esc_html_e('Skip', 'ai-content-wizard'); ?></button>
								<button type="submit" style="background: #E91E63; color: white; padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background 0.3s, transform 0.3s; box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3);">
									<?php esc_html_e('Next', 'ai-content-wizard'); ?>
								</button>
							</div>
						</div>
					</div>

					<style>
						/* Анимации для иконки шестеренки */
						@keyframes rotateGear {
							0% { transform: rotate(0deg); }
							100% { transform: rotate(360deg); }
						}
						@keyframes checkPulse {
							0% { transform: scale(1); }
							50% { transform: scale(1.2); }
							100% { transform: scale(1); }
						}

						/* Стили для таблицы */
						.system-check-table-container {
							overflow-x: auto;
						}
						.system-check-table th {
							background: #f5f7fa;
							color: #333;
						}
						.system-check-table tr:hover:not(.warning-row):not(.error-row) {
							background: #f9f9f9;
						}
						.warning-row {
							background: rgba(255, 179, 0, 0.1);
							border-left: 4px solid #FFB300;
							animation: highlight 1s ease-out;
						}
						.error-row {
							background: rgba(211, 47, 47, 0.1);
							border-left: 4px solid #D32F2F;
							animation: highlight 1s ease-out;
						}
						@keyframes highlight {
							0% { background: rgba(255, 255, 255, 0.5); }
							100% { background: inherit; }
						}
						.status-icon.warning {
							animation: pulseWarning 1.5s infinite;
						}
						.status-icon.error {
							animation: pulseError 1.5s infinite;
						}
						@keyframes pulseWarning {
							0% { transform: scale(1); }
							50% { transform: scale(1.1); }
							100% { transform: scale(1); }
						}
						@keyframes pulseError {
							0% { transform: scale(1); }
							50% { transform: scale(1.15); }
							100% { transform: scale(1); }
						}

						/* Ховер-эффекты для кнопок */
						button:hover,
						a:hover {
							transform: translateY(-5px);
							box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
						}
						a:hover {
							background: #90A4AE;
						}
						button[type="submit"]:hover {
							background: #C2185B;
						}
						button[name="skip_step"]:hover {
							color: #C2185B;
						}
					</style>
					<?php
					break;
                case 'text_provider':
                    ?>
                    <h2><?php esc_html_e( 'Text Provider Settings', 'ai-content-wizard' ); ?></h2>
                    <p><?php esc_html_e( 'Select your text provider, enter your API key and choose the default text model.', 'ai-content-wizard' ); ?></p>
                    <?php render_text_models_settings(); ?>
                    <div class="ai-wizard-nav">
                        <div class="nav-left">
                            <a href="#" class="ai-wizard-btn ai-wizard-btn-secondary hint-prev">← <?php esc_html_e( 'Back', 'ai-content-wizard' ); ?></a>
                        </div>
                        <div class="nav-right">
                            <button type="submit" name="skip_step" class="ai-wizard-skip-link"><?php esc_html_e( 'Skip', 'ai-content-wizard' ); ?></button>
                            <button type="submit" class="ai-wizard-btn"><?php esc_html_e( 'Next', 'ai-content-wizard' ); ?></button>
                        </div>
                    </div>
                    <?php
                    break;
                case 'image_provider':
                    ?>
                    <h2><?php esc_html_e( 'Image Provider Settings', 'ai-content-wizard' ); ?></h2>
                    <p><?php esc_html_e( 'Select your image provider, enter the API key (if required), and choose your default image model.', 'ai-content-wizard' ); ?></p>
                    <?php render_image_models_settings(); ?>
                    <div class="ai-wizard-nav">
                        <div class="nav-left">
                            <a href="#" class="ai-wizard-btn ai-wizard-btn-secondary hint-prev">← <?php esc_html_e( 'Back', 'ai-content-wizard' ); ?></a>
                        </div>
                        <div class="nav-right">
                            <button type="submit" name="skip_step" class="ai-wizard-skip-link"><?php esc_html_e( 'Skip', 'ai-content-wizard' ); ?></button>
                            <button type="submit" class="ai-wizard-btn"><?php esc_html_e( 'Next', 'ai-content-wizard' ); ?></button>
                        </div>
                    </div>
                    <?php
                    break;
				case 'notifications':
					$enable_email = ai_content_wizard_get_setting('ai_content_wizard_enable_email_notifications', 0);
					$email_addr = ai_content_wizard_get_setting('ai_content_wizard_email_address', get_bloginfo('admin_email'));
					$enable_tg = ai_content_wizard_get_setting('ai_content_wizard_enable_telegram_notifications', 0);
					$tg_bot_token = ai_content_wizard_get_setting('ai_content_wizard_telegram_bot_token', '');
					$tg_chat_id = ai_content_wizard_get_setting('ai_content_wizard_telegram_chat_id', '');
					?>
					<div style="background: rgba(245, 247, 250, 0.8); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-width: 800px; margin: 20px auto; color: #333;">
						<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
							<div style="flex: 1;">
								<h2 style="font-size: 24px; line-height: 1.5; margin: 0 0 10px 0; color: #4A148C; font-weight: bold;">
									<?php esc_html_e('Stay in the Loop!', 'ai-content-wizard'); ?>
								</h2>
								<p style="font-size: 18px; line-height: 1.5; margin: 0; color: #616161;">
									<?php esc_html_e('Set up notifications to keep track of your AI magic. Choose email, Telegram, or both to get real-time updates!', 'ai-content-wizard'); ?>
								</p>
							</div>
							<div style="flex: 0; margin-left: 20px;">
								<svg class="notifications-svg" style="width: 100px; height: 100px;" viewBox="0 0 100 100">
									<!-- Иконка колокольчика с анимацией -->
									<path d="M40 70 Q50 80 60 70" fill="none" stroke="#FFD700" stroke-width="4" style="animation: bellCurve 2s infinite ease-in-out;" />
									<path d="M30 30 H70 V50 Q70 60 60 60 H40 Q30 60 30 50 Z" fill="none" stroke="#4CAF50" stroke-width="4" style="animation: bellRing 2s infinite ease-in-out;" />
									<circle cx="50" cy="20" r="5" fill="#E91E63" style="animation: clapper 2s infinite ease-in-out;" />
									<!-- Искры уведомлений -->
									<circle cx="35" cy="25" r="2" fill="#FF5722" style="animation: sparkFly 1.5s infinite ease-out;" />
									<circle cx="65" cy="25" r="2" fill="#2196F3" style="animation: sparkFly 1.8s infinite ease-out 0.3s;" />
									<circle cx="50" cy="15" r="1.5" fill="#FFEB3B" style="animation: sparkFly 2s infinite ease-out 0.6s;" />
								</svg>
							</div>
						</div>

						<div class="notification-settings" style="background: #FFFFFF; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);">
							<!-- Email Notifications -->
							<label style="display: flex; align-items: center; margin-bottom: 20px; font-size: 16px; color: #424242;">
								<input type="checkbox" name="enable_email_notifications" value="1" <?php checked($enable_email, 1); ?> style="display: none;" onchange="this.nextElementSibling.classList.toggle('checked');">
								<svg class="checkbox-icon" viewBox="0 0 24 24" width="24" height="24" style="margin-right: 10px; transition: all 0.3s;">
									<rect x="2" y="2" width="20" height="20" rx="5" fill="none" stroke="#4CAF50" stroke-width="2" />
									<path d="M6 12 L10 16 L18 8" fill="none" stroke="#4CAF50" stroke-width="2" class="check-path" style="opacity: 0;" />
								</svg>
								<?php esc_html_e('Enable Email Notifications', 'ai-content-wizard'); ?>
							</label>
							<div style="margin-left: 34px; margin-bottom: 20px;">
								<label style="font-size: 14px; color: #616161; display: block; margin-bottom: 5px;"><?php esc_html_e('Email Address:', 'ai-content-wizard'); ?></label>
								<input type="email" name="email_address" value="<?php echo esc_attr($email_addr); ?>" style="width: 100%; padding: 10px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 16px; color: #333; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); transition: border-color 0.3s;" />
							</div>

							<!-- Telegram Notifications -->
							<label style="display: flex; align-items: center; margin-bottom: 20px; font-size: 16px; color: #424242;">
								<input type="checkbox" name="enable_telegram_notifications" value="1" <?php checked($enable_tg, 1); ?> style="display: none;" onchange="this.nextElementSibling.classList.toggle('checked');">
								<svg class="checkbox-icon" viewBox="0 0 24 24" width="24" height="24" style="margin-right: 10px; transition: all 0.3s;">
									<rect x="2" y="2" width="20" height="20" rx="5" fill="none" stroke="#4CAF50" stroke-width="2" />
									<path d="M6 12 L10 16 L18 8" fill="none" stroke="#4CAF50" stroke-width="2" class="check-path" style="opacity: 0;" />
								</svg>
								<?php esc_html_e('Enable Telegram Notifications', 'ai-content-wizard'); ?>
							</label>
							<div style="margin-left: 34px;">
								<label style="font-size: 14px; color: #616161; display: block; margin-bottom: 5px;"><?php esc_html_e('Telegram Bot Token:', 'ai-content-wizard'); ?></label>
								<input type="text" name="telegram_bot_token" value="<?php echo esc_attr($tg_bot_token); ?>" style="width: 100%; padding: 10px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 16px; color: #333; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); transition: border-color 0.3s; margin-bottom: 15px;" />
								<label style="font-size: 14px; color: #616161; display: block; margin-bottom: 5px;"><?php esc_html_e('Telegram Chat ID:', 'ai-content-wizard'); ?></label>
								<input type="text" name="telegram_chat_id" value="<?php echo esc_attr($tg_chat_id); ?>" style="width: 100%; padding: 10px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 16px; color: #333; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); transition: border-color 0.3s;" />
							</div>
						</div>

						<div class="ai-wizard-nav" style="display: flex; justify-content: space-between; align-items: center; margin-top: 30px;">
							<div class="nav-left">
								<a href="<?php echo esc_url( add_query_arg('ai_content_wizard_wizard_step', ai_content_wizard_get_previous_step($current_step, $steps)) ); ?>" style="background: #B0BEC5; color: white; padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background 0.3s, transform 0.3s; box-shadow: 0 5px 15px rgba(176, 190, 197, 0.3); text-decoration: none;">
									← <?php esc_html_e('Back', 'ai-content-wizard'); ?>
								</a>
							</div>
							<div class="nav-right">
								<button type="submit" name="skip_step" style="background: none; border: none; color: #E91E63; font-size: 16px; cursor: pointer; margin-right: 20px; transition: color 0.3s;"><?php esc_html_e('Skip', 'ai-content-wizard'); ?></button>
								<button type="submit" style="background: #E91E63; color: white; padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background 0.3s, transform 0.3s; box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3);">
									<?php esc_html_e('Next', 'ai-content-wizard'); ?>
								</button>
							</div>
						</div>
					</div>

					<style>
						/* Анимации для иконки колокольчика */
						@keyframes bellRing {
							0% { transform: rotate(0deg); }
							10% { transform: rotate(10deg); }
							20% { transform: rotate(-10deg); }
							30% { transform: rotate(5deg); }
							40% { transform: rotate(-5deg); }
							50% { transform: rotate(0deg); }
							100% { transform: rotate(0deg); }
						}
						@keyframes bellCurve {
							0% { transform: translateY(0); }
							50% { transform: translateY(5px); }
							100% { transform: translateY(0); }
						}
						@keyframes clapper {
							0% { transform: translateX(0); }
							10% { transform: translateX(5px); }
							20% { transform: translateX(-5px); }
							30% { transform: translateX(3px); }
							40% { transform: translateX(-3px); }
							50% { transform: translateX(0); }
							100% { transform: translateX(0); }
						}
						@keyframes sparkFly {
							0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
							25% { opacity: 1; transform: translate(-5px, -5px) scale(1.2); }
							100% { opacity: 0; transform: translate(-15px, -10px) scale(0.8); }
						}

						/* Стили для чекбоксов */
						.checkbox-icon.checked .check-path {
							opacity: 1;
							animation: drawCheck 0.3s ease forwards;
						}
						@keyframes drawCheck {
							0% { stroke-dasharray: 0, 30; }
							100% { stroke-dasharray: 30, 30; }
						}
						input[type="checkbox"]:focus + .checkbox-icon {
							outline: 2px solid #4CAF50;
							outline-offset: 2px;
						}

						/* Ховер-эффекты */
						input[type="email"]:hover,
						input[type="text"]:hover {
							border-color: #4CAF50;
						}
						input[type="email"]:focus,
						input[type="text"]:focus {
							border-color: #E91E63;
							outline: none;
							box-shadow: 0 0 5px rgba(233, 30, 99, 0.5);
						}
						button:hover,
						a:hover {
							transform: translateY(-5px);
							box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
						}
						a:hover {
							background: #90A4AE;
						}
						button[type="submit"]:hover {
							background: #C2185B;
						}
						button[name="skip_step"]:hover {
							color: #C2185B;
						}
					</style>
					<?php
					break;
				case 'finish':
				?>
				<div style="background: rgba(245, 247, 250, 0.8); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-width: 800px; margin: 20px auto; color: #333;">
					<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
						<div style="flex: 1;">
							<p style="font-size: 24px; line-height: 1.5; margin: 0 0 10px 0; color: #4A148C; font-weight: bold;">
								<?php esc_html_e( 'Mission Accomplished, Visionary!', 'ai-content-wizard' ); ?>
							</p>
							<p style="font-size: 18px; line-height: 1.5; margin: 0; color: #616161;">
								<?php esc_html_e( 'You’ve successfully set up the core AI models for text and images. Ready to unlock more magic? Click Finish to complete, or explore advanced settings for flexible configurations like watermarks, category options, article generation types, and more.', 'ai-content-wizard' ); ?>
							</p>
						</div>
						<div style="flex: 0; margin-left: 20px;">
							<svg class="finish-svg" style="width: 100px; height: 100px;" viewBox="0 0 100 100">
								<!-- Магический фейерверк -->
								<circle cx="50" cy="50" r="40" fill="none" stroke="#4CAF50" stroke-width="4" style="animation: pulse 2s infinite ease-in-out;"/>
								<path d="M40 60 L50 70 L60 60" fill="none" stroke="#8BC34A" stroke-width="4" stroke-linecap="round" style="animation: sparkle 1.5s infinite alternate;"/>
								<circle cx="50" cy="50" r="5" fill="#FFD700" style="animation: glow 1.5s infinite alternate;"/>
								<circle cx="45" cy="45" r="1.5" fill="#FF5722" style="animation: sparkFly 2s infinite ease-out;"/>
								<circle cx="55" cy="45" r="1.5" fill="#2196F3" style="animation: sparkFly 1.5s infinite ease-out 0.3s;"/>
								<circle cx="50" cy="55" r="1.5" fill="#E91E63" style="animation: sparkFly 2.5s infinite ease-out 0.6s;"/>
							</svg>
						</div>
					</div>

					<ul style="list-style: none; padding: 0; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px;">
						<li style="background: #FFFFFF; padding: 12px 20px; border-radius: 10px; font-size: 16px; color: #424242; flex: 1; min-width: 200px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; position: relative; border-left: 4px solid #2E7D32;">
							<span style="color: #F57C00; margin-right: 8px;">✅</span><?php esc_html_e( 'Core AI Models Configured', 'ai-content-wizard' ); ?>
						</li>
						<li style="background: #FFFFFF; padding: 12px 20px; border-radius: 10px; font-size: 16px; color: #424242; flex: 1; min-width: 200px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; position: relative; border-left: 4px solid #F57C00;">
							<span style="color: #D32F2F; margin-right: 8px;">🔔</span><?php esc_html_e( 'Notifications Activated', 'ai-content-wizard' ); ?>
						</li>
						<li style="background: #FFFFFF; padding: 12px 20px; border-radius: 10px; font-size: 16px; color: #424242; flex: 1; min-width: 200px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; position: relative; border-left: 4px solid #4CAF50;">
							<span style="color: #4CAF50; margin-right: 8px;">✔</span><?php esc_html_e( 'System Compatibility Confirmed', 'ai-content-wizard' ); ?>
						</li>
					</ul>

					<div style="margin-top: 20px;">
						<button style="display: inline-flex; align-items: center; background: #7B1FA2; color: white; padding: 12px 24px; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; transition: background 0.3s, transform 0.3s, box-shadow 0.3s; box-shadow: 0 5px 15px rgba(123, 31, 162, 0.3);">
							<span style="color: #FFD700; margin-right: 8px;">🔮</span><?php esc_html_e( 'Dive into Advanced Settings', 'ai-content-wizard' ); ?>
						</button>
					</div>

					<div class="ai-wizard-nav" style="display: flex; justify-content: space-between; align-items: center; margin-top: 30px;">
						<div class="nav-left">
							<a href="<?php echo esc_url( add_query_arg( 'ai_content_wizard_wizard_step', ai_content_wizard_get_previous_step( $current_step, $steps ) ) ); ?>" style="background: #B0BEC5; color: white; padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background 0.3s; box-shadow: 0 5px 15px rgba(176, 190, 197, 0.3); text-decoration: none;">
								← <?php esc_html_e( 'Back', 'ai-content-wizard' ); ?>
							</a>
						</div>
						<div class="nav-right">
							<button type="submit" style="background: #E91E63; color: white; padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background 0.3s; box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3);">
								<?php esc_html_e( 'Finish', 'ai-content-wizard' ); ?>
							</button>
						</div>
					</div>
				</div>

				<style>
				@keyframes pulse {
					0% { transform: scale(1); }
					50% { transform: scale(1.1); }
					100% { transform: scale(1); }
				}
				@keyframes glow {
					0% { opacity: 0.7; filter: blur(0.5px); }
					100% { opacity: 1; filter: blur(1px); transform: scale(1.2); }
				}
				@keyframes sparkle {
					0% { stroke-width: 4; stroke: #8BC34A; }
					100% { stroke-width: 6; stroke: #AED581; }
				}
				@keyframes sparkFly {
					0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
					25% { opacity: 1; transform: translate(5px, -5px) scale(1.2); }
					100% { opacity: 0; transform: translate(15px, -10px) scale(0.8); }
				}
				ul li:hover, button:hover, a:hover {
					transform: translateY(-5px);
					box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
				}
				a:hover {
					background: #90A4AE;
				}
				button:hover {
					background: #C2185B;
				}
				button:nth-child(2):hover {
					background: #512DA8;
				}
				</style>
				<?php
				break;
            }
            ?>
        </form>

        <!-- Затемняющие оверлеи -->
        <div id="hint-overlays" style="display:none;">
            <div id="top-overlay" class="hint-overlay" style="position:fixed; background:rgba(0,0,0,0.5); z-index:999; top:0; left:0; width:100%; height:100%;"></div>
        </div>
        <!-- Интерактивная подсказка -->
        <div id="interactive-hint" style="display:none; position:fixed; z-index:1001; background:linear-gradient(135deg, #ffffff, #f8f9fa); padding:20px; border-radius:12px; border:1px solid #e0e0e0; box-shadow:0 6px 20px rgba(0,0,0,0.15); font-family:'Segoe UI', sans-serif; max-width:320px; overflow:hidden; transition:all 0.3s ease; transform-origin:center; opacity:0; transform:scale(0.9);">
            <div style="position:relative;">
                <p id="hint-text-1" style="display:none; margin:0 0 15px 0; font-size:15px; color:#2c3e50; line-height:1.5; font-weight:500;"><?php esc_html_e( 'Step 1 of 3: Choose your text provider', 'ai-content-wizard' ); ?></p>
                <p id="hint-text-2" style="display:none; margin:0 0 15px 0; font-size:15px; color:#2c3e50; line-height:1.5; font-weight:500;"><?php esc_html_e( 'Step 2 of 3: Enter your API key for the selected provider', 'ai-content-wizard' ); ?></p>
                <p id="hint-text-3" style="display:none; margin:0 0 15px 0; font-size:15px; color:#2c3e50; line-height:1.5; font-weight:500;"><?php esc_html_e( 'Step 3 of 3: Select the text model', 'ai-content-wizard' ); ?></p>
                <p id="hint-text-4" style="display:none; margin:0 0 15px 0; font-size:15px; color:#2c3e50; line-height:1.5; font-weight:500;"><?php esc_html_e( 'Step 1 of 3: Choose your image provider', 'ai-content-wizard' ); ?></p>
                <p id="hint-text-5" style="display:none; margin:0 0 15px 0; font-size:15px; color:#2c3e50; line-height:1.5; font-weight:500;"><?php esc_html_e( 'Step 2 of 3: Enter your API key for the selected provider', 'ai-content-wizard' ); ?></p>
                <p id="hint-text-6" style="display:none; margin:0 0 15px 0; font-size:15px; color:#2c3e50; line-height:1.5; font-weight:500;"><?php esc_html_e( 'Step 3 of 3: Select the image model', 'ai-content-wizard' ); ?></p>
                <div id="hint-buttons" style="display:flex; gap:12px; justify-content:flex-end;">
                    <button id="hint-next" style="padding:8px 16px; background:#4CAF50; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:14px; font-weight:600; transition:background 0.2s, transform 0.1s; box-shadow:0 2px 5px rgba(76,175,80,0.3); transform:scale(1);"><?php esc_html_e( 'Next', 'ai-content-wizard' ); ?></button>
                    <button id="hint-skip" style="padding:8px 16px; background:#e9ecef; color:#495057; border:none; border-radius:6px; cursor:pointer; font-size:14px; font-weight:600; transition:background 0.2s, transform 0.1s; box-shadow:0 2px 5px rgba(0,0,0,0.1); transform:scale(1);"><?php esc_html_e( 'Skip', 'ai-content-wizard' ); ?></button>
                </div>
            </div>
        </div>
    </div>

    <div class="ai-wizard-footer">
        <div class="ai-wizard-footer-links">
            <a href="<?php echo esc_url( admin_url( 'admin.php?page=ai_content_wizard' ) ); ?>" class="footer-link">
                <svg viewBox="0 0 24 24" width="16" height="16">
                    <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-1 4v6h2V8h-2z" fill="#4CAF50"/>
                </svg>
                <?php esc_html_e( "I'll do it later", 'ai-content-wizard' ); ?>
            </a>
            <a href="<?php echo esc_url( admin_url( 'admin.php?page=ai_content_wizard_api_settings&manual=1' ) ); ?>" class="footer-link">
                <svg viewBox="0 0 24 24" width="16" height="16">
                    <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-2 6h4v8h-4V8zm0-2h4V4h-4v2z" fill="#4CAF50"/>
                </svg>
                <?php esc_html_e( "I'll configure manually", 'ai-content-wizard' ); ?>
            </a>
        </div>
    </div>
</div>
   
    
<!-- Модальные окна подсказок для мастера установки -->
<div id="helpTextProviders" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 600px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="color: #333; font-size: 22px; margin-bottom: 15px; display: flex; align-items: center;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <circle cx="12" cy="12" r="10"/>
                <path d="M12 16v.01M12 13a2 2 0 0 0 1.73-1 2 2 0 0 0-3.46 0A2 2 0 0 0 12 13zM12 9v-2"/>
            </svg>
            <?php echo esc_html__( 'Text Model Providers', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 15px;"><?php echo esc_html__( 'Select your text provider. Choose OpenAI, Anthropic or DeepSeek.', 'ai-content-wizard' ); ?></p>
        <ul style="list-style-type: none; padding: 0;">
            <li style="display: flex; align-items: flex-start; margin-bottom: 15px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px; margin-top: 3px;">
                    <path d="M12 2v20M2 12h20"/>
                </svg>
                <div>
                    <strong style="color: #333;"><?php echo esc_html__( 'OpenAI:', 'ai-content-wizard' ); ?></strong>
                    <span><?php echo wp_kses( __( 'Obtain your API key at <a href="https://platform.openai.com/account/api-keys" target="_blank" style="color: #3498db; text-decoration: none; transition: color 0.3s;">OpenAI Dashboard</a>.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></span>
                </div>
            </li>
            <li style="display: flex; align-items: flex-start; margin-bottom: 15px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px; margin-top: 3px;">
                    <path d="M12 2v20M2 12h20"/>
                </svg>
                <div>
                    <strong style="color: #333;"><?php echo esc_html__( 'Anthropic:', 'ai-content-wizard' ); ?></strong>
                    <span><?php echo wp_kses( __( 'Get your API key from <a href="https://console.anthropic.com/" target="_blank" style="color: #3498db; text-decoration: none; transition: color 0.3s;">Anthropic Console</a>.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></span>
                </div>
            </li>
            <li style="display: flex; align-items: flex-start;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px; margin-top: 3px;">
                    <path d="M12 2v20M2 12h20"/>
                </svg>
                <div>
                    <strong style="color: #333;"><?php echo esc_html__( 'DeepSeek:', 'ai-content-wizard' ); ?></strong>
                    <span><?php echo esc_html__( 'Obtain your API key from DeepSeek and refer to their documentation.', 'ai-content-wizard' ); ?></span>
                </div>
            </li>
        </ul>
    </div>
</div>

<div id="helpOpenAIKey" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 400px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="color: #333; font-size: 22px; margin-bottom: 15px; display: flex; align-items: center;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <path d="M10 15v4a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-4M5 12h14M12 5l7 7-7 7"/>
            </svg>
            <?php echo esc_html__( 'OpenAI API Key', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5;"><?php echo wp_kses( __( 'Enter your OpenAI API key. You can get it from your <a href="https://platform.openai.com/account/api-keys" target="_blank" style="color: #3498db; text-decoration: none; transition: color 0.3s;">OpenAI account dashboard</a>.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></p>
    </div>
</div>

<div id="helpAnthropicKey" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 400px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="color: #333; font-size: 22px; margin-bottom: 15px; display: flex; align-items: center;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <path d="M10 15v4a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-4M5 12h14M12 5l7 7-7 7"/>
            </svg>
            <?php echo esc_html__( 'Anthropic API Key', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5;"><?php echo wp_kses( __( 'Enter your Anthropic API key. Obtain it from your <a href="https://console.anthropic.com/" target="_blank" style="color: #3498db; text-decoration: none; transition: color 0.3s;">Anthropic account</a>.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></p>
    </div>
</div>

<div id="helpDeepSeekKey" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 400px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="color: #333; font-size: 22px; margin-bottom: 15px; display: flex; align-items: center;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <path d="M10 15v4a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-4M5 12h14M12 5l7 7-7 7"/>
            </svg>
            <?php echo esc_html__( 'DeepSeek API Key', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5;"><?php echo esc_html__( 'Enter your DeepSeek API key. Make sure you have an active account on DeepSeek and refer to their documentation for details.', 'ai-content-wizard' ); ?></p>
    </div>
</div>

<div id="helpTextModels" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 400px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="color: #333; font-size: 22px; margin-bottom: 15px; display: flex; align-items: center;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
            </svg>
            <?php echo esc_html__( 'Select Text Model', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5;"><?php echo esc_html__( 'Choose the text generation model for your provider. Hover over a model to see its cost details. Models unavailable in your account are grayed out.', 'ai-content-wizard' ); ?></p>
    </div>
</div>

<div id="helpImageProviders" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 600px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="color: #333; font-size: 22px; margin-bottom: 15px; display: flex; align-items: center;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                <circle cx="8.5" cy="8.5" r="1.5"/>
                <polyline points="21 15 16 10 5 21"/>
            </svg>
            <?php echo esc_html__( 'Select Image Model Provider', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 15px;"><?php echo esc_html__( 'Select your image provider from the available options:', 'ai-content-wizard' ); ?></p>
        <ul style="list-style-type: none; padding: 0;">
            <li style="display: flex; align-items: flex-start; margin-bottom: 15px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px; margin-top: 3px;">
                    <path d="M12 2v20M2 12h20"/>
                </svg>
                <div>
                    <strong style="color: #333;"><?php echo esc_html__( 'DALL-E (OpenAI):', 'ai-content-wizard' ); ?></strong>
                    <span><?php echo esc_html__( 'Uses the same OpenAI API key as text models.', 'ai-content-wizard' ); ?></span>
                </div>
            </li>
            <li style="display: flex; align-items: flex-start; margin-bottom: 15px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px; margin-top: 3px;">
                    <path d="M12 2v20M2 12h20"/>
                </svg>
                <div>
                    <strong style="color: #333;"><?php echo esc_html__( 'DeepAI:', 'ai-content-wizard' ); ?></strong>
                    <span><?php echo wp_kses( __( 'Obtain your API key at <a href="https://deepai.org/" target="_blank" style="color: #3498db; text-decoration: none; transition: color 0.3s;">DeepAI</a>.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></span>
                </div>
            </li>
            <li style="display: flex; align-items: flex-start; margin-bottom: 15px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px; margin-top: 3px;">
                    <path d="M12 2v20M2 12h20"/>
                </svg>
                <div>
                    <strong style="color: #333;"><?php echo esc_html__( 'Stable Diffusion:', 'ai-content-wizard' ); ?></strong>
                    <span><?php echo wp_kses( __( 'Obtain your API key at <a href="https://platform.stability.ai/" target="_blank" style="color: #3498db; text-decoration: none; transition: color 0.3s;">Stability AI</a>.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></span>
                </div>
            </li>
            <li style="display: flex; align-items: flex-start;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px; margin-top: 3px;">
                    <path d="M12 2v20M2 12h20"/>
                </svg>
                <div>
                    <strong style="color: #333;"><?php echo esc_html__( 'Ideogram:', 'ai-content-wizard' ); ?></strong>
                    <span><?php echo esc_html__( 'Get your API key from your Ideogram account.', 'ai-content-wizard' ); ?></span>
                </div>
            </li>
        </ul>
    </div>
</div>

<div id="helpDeepAIKey" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 400px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="color: #333; font-size: 22px; margin-bottom: 15px; display: flex; align-items: center;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <path d="M10 15v4a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-4M5 12h14M12 5l7 7-7 7"/>
            </svg>
            <?php echo esc_html__( 'DeepAI API Key', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5;"><?php echo wp_kses( __( 'Enter your DeepAI API key, which you can obtain from the <a href="https://deepai.org/" target="_blank" style="color: #3498db; text-decoration: none; transition: color 0.3s;">DeepAI website</a>.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></p>
    </div>
</div>

<div id="helpStableKey" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 400px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="color: #333; font-size: 22px; margin-bottom: 15px; display: flex; align-items: center;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <path d="M10 15v4a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-4M5 12h14M12 5l7 7-7 7"/>
            </svg>
            <?php echo esc_html__( 'Stable Diffusion API Key', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5;"><?php echo wp_kses( __( 'Enter your Stable Diffusion API key, obtainable from <a href="https://platform.stability.ai/" target="_blank" style="color: #3498db; text-decoration: none; transition: color 0.3s;">Stability AI</a>.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></p>
    </div>
</div>

<div id="helpIdeogramKey" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 400px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="color: #333; font-size: 22px; margin-bottom: 15px; display: flex; align-items: center;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <path d="M10 15v4a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-4M5 12h14M12 5l7 7-7 7"/>
            </svg>
            <?php echo esc_html__( 'Ideogram API Key', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5;"><?php echo esc_html__( 'Enter your Ideogram API key, which you can get from your Ideogram account.', 'ai-content-wizard' ); ?></p>
    </div>
</div>

<div id="helpDalleKey" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 400px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="color: #333; font-size: 22px; margin-bottom: 15px; display: flex; align-items: center;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <path d="M10 15v4a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-4M5 12h14M12 5l7 7-7 7"/>
            </svg>
            <?php echo esc_html__( 'DALL-E API Key', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5;"><?php echo esc_html__( 'DALL-E uses the same OpenAI API key as text models. No separate key is needed.', 'ai-content-wizard' ); ?></p>
    </div>
</div>


<!-- Модальные окна ошибок для мастера установки -->
<div id="openAIErrorModal" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 500px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="display: flex; align-items: center; color: #e74c3c; font-size: 22px; margin-bottom: 15px;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <circle cx="12" cy="12" r="10"/>
                <path d="M12 8v4M12 16h.01"/>
            </svg>
            <?php echo esc_html__( 'OpenAI API Key Error', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 15px;"><?php echo esc_html__( 'Your OpenAI API Key is invalid or your OpenAI account needs a linked credit card.', 'ai-content-wizard' ); ?></p>
        <div style="margin-bottom: 20px;">
            <h3 style="color: #333; font-size: 18px; margin-bottom: 10px;"><?php echo esc_html__( 'Steps to Fix:', 'ai-content-wizard' ); ?></h3>
            <ul style="list-style-type: none; padding: 0;">
                <li style="display: flex; align-items: center; margin-bottom: 15px;">
                    <span style="background: #3498db; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">1</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                        <path d="M10 15v4a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-4M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                    <span><?php echo wp_kses( __( 'Visit <a href="https://platform.openai.com/api-keys" target="_blank" style="color: #3498db; text-decoration: none;">OpenAI API Keys</a> to verify or generate your key.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></span>
                </li>
                <li style="display: flex; align-items: center; margin-bottom: 15px;">
                    <span style="background: #3498db; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">2</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                        <rect x="2" y="7" width="20" height="15" rx="2" ry="2"/>
                        <path d="M16 3H8a2 2 0 0 0-2 2v2h12V5a2 2 0 0 0-2-2z"/>
                    </svg>
                    <span><?php echo esc_html__( 'Link a credit card to your OpenAI account.', 'ai-content-wizard' ); ?></span>
                </li>
                <li style="display: flex; align-items: center;">
                    <span style="background: #3498db; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">3</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                        <polyline points="22 4 12 14.01 9 11.01"/>
                    </svg>
                    <span><?php echo wp_kses( __( 'Watch our <a href="https://youtu.be/R60YYsN0yD0" target="_blank" style="color: #3498db; text-decoration: none;">video tutorial</a> for a guide.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></span>
                </li>
            </ul>
        </div>
        <div>
            <h3 style="color: #333; font-size: 18px; margin-bottom: 10px;"><?php echo esc_html__( 'Things to Check:', 'ai-content-wizard' ); ?></h3>
            <ul style="list-style-type: none; padding: 0; color: #7f8c8d; font-size: 14px;">
                <li style="margin-bottom: 5px;"><?php echo esc_html__( 'Ensure the API key is copied correctly without extra spaces.', 'ai-content-wizard' ); ?></li>
                <li><?php echo esc_html__( 'Verify your OpenAI account has an active payment method.', 'ai-content-wizard' ); ?></li>
            </ul>
        </div>
    </div>
</div>

<div id="anthropicErrorModal" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 500px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="display: flex; align-items: center; color: #e74c3c; font-size: 22px; margin-bottom: 15px;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <circle cx="12" cy="12" r="10"/>
                <path d="M12 8v4M12 16h.01"/>
            </svg>
            <?php echo esc_html__( 'Anthropic API Key Error', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 15px;"><?php echo esc_html__( 'Your Anthropic API Key is invalid or there is an issue with your account.', 'ai-content-wizard' ); ?></p>
        <div style="margin-bottom: 20px;">
            <h3 style="color: #333; font-size: 18px; margin-bottom: 10px;"><?php echo esc_html__( 'Steps to Fix:', 'ai-content-wizard' ); ?></h3>
            <ul style="list-style-type: none; padding: 0;">
                <li style="display: flex; align-items: center; margin-bottom: 15px;">
                    <span style="background: #3498db; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">1</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                        <path d="M10 15v4a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-4M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                    <span><?php echo wp_kses( __( 'Visit <a href="https://console.anthropic.com/" target="_blank" style="color: #3498db; text-decoration: none;">Anthropic Console</a> to generate your API Key.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></span>
                </li>
                <li style="display: flex; align-items: center; margin-bottom: 15px;">
                    <span style="background: #3498db; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">2</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                        <rect x="2" y="7" width="20" height="15" rx="2" ry="2"/>
                        <path d="M16 3H8a2 2 0 0 0-2 2v2h12V5a2 2 0 0 0-2-2z"/>
                    </svg>
                    <span><?php echo esc_html__( 'Add valid payment information to your Anthropic account.', 'ai-content-wizard' ); ?></span>
                </li>
                <li style="display: flex; align-items: center;">
                    <span style="background: #3498db; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">3</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                        <polyline points="22 4 12 14.01 9 11.01"/>
                    </svg>
                    <span><?php echo esc_html__( 'Verify your account status is active.', 'ai-content-wizard' ); ?></span>
                </li>
            </ul>
        </div>
        <div>
            <h3 style="color: #333; font-size: 18px; margin-bottom: 10px;"><?php echo esc_html__( 'Things to Check:', 'ai-content-wizard' ); ?></h3>
            <ul style="list-style-type: none; padding: 0; color: #7f8c8d; font-size: 14px;">
                <li style="margin-bottom: 5px;"><?php echo esc_html__( 'Ensure the API key matches the one in the Anthropic Console.', 'ai-content-wizard' ); ?></li>
                <li><?php echo esc_html__( 'Confirm your payment method is up-to-date.', 'ai-content-wizard' ); ?></li>
            </ul>
        </div>
    </div>
</div>

<div id="deepseekErrorModal" class="ai-content-wizard-modal">
    <div class="ai-content-wizard-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 500px; margin: 0 auto;">
        <span class="ai-content-wizard-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="display: flex; align-items: center; color: #e74c3c; font-size: 22px; margin-bottom: 15px;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <circle cx="12" cy="12" r="10"/>
                <path d="M12 8v4M12 16h.01"/>
            </svg>
            <?php echo esc_html__( 'DeepSeek API Key Error', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 15px;"><?php echo esc_html__( 'Your DeepSeek API Key is invalid or there is an issue with your account.', 'ai-content-wizard' ); ?></p>
        <div style="margin-bottom: 20px;">
            <h3 style="color: #333; font-size: 18px; margin-bottom: 10px;"><?php echo esc_html__( 'Steps to Fix:', 'ai-content-wizard' ); ?></h3>
            <ul style="list-style-type: none; padding: 0;">
                <li style="display: flex; align-items: center; margin-bottom: 15px;">
                    <span style="background: #3498db; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">1</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                        <path d="M10 15v4a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-4M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                    <span><?php echo wp_kses( __( 'Visit <a href="https://platform.deepseek.com/api_keys" target="_blank" style="color: #3498db; text-decoration: none; transition: color 0.3s;">DeepSeek API Keys</a> to generate your API Key.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></span>
                </li>
                <li style="display: flex; align-items: center;">
                    <span style="background: #3498db; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">2</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                        <polyline points="22 4 12 14.01 9 11.01"/>
                    </svg>
                    <span><?php echo esc_html__( 'Verify your account status and key validity.', 'ai-content-wizard' ); ?></span>
                </li>
            </ul>
        </div>
    </div>
</div>

<div id="genericErrorModal" class="ai-help-modal" style="display:none;">
    <div class="ai-help-modal-content" style="background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; max-width: 400px; margin: 0 auto;">
        <span class="ai-help-modal-close" style="font-size: 24px; cursor: pointer;">×</span>
        <h2 style="display: flex; align-items: center; color: #e74c3c; font-size: 22px; margin-bottom: 15px;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                <circle cx="12" cy="12" r="10"/>
                <path d="M12 8v4M12 16h.01"/>
            </svg>
            <?php echo esc_html__( 'API Key Error', 'ai-content-wizard' ); ?>
        </h2>
        <p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 15px;"><?php echo esc_html__( 'There was an error with your API Key or selected model.', 'ai-content-wizard' ); ?></p>
        <div>
            <h3 style="color: #333; font-size: 18px; margin-bottom: 10px;"><?php echo esc_html__( 'Steps to Fix:', 'ai-content-wizard' ); ?></h3>
            <ul style="list-style-type: none; padding: 0;">
                <li style="display: flex; align-items: center; margin-bottom: 15px;">
                    <span style="background: #3498db; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">1</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                        <polyline points="22 4 12 14.01 9 11.01"/>
                    </svg>
                    <span><?php echo esc_html__( 'Check your API key and model settings.', 'ai-content-wizard' ); ?></span>
                </li>
                <li style="display: flex; align-items: center;">
                    <span style="background: #3498db; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">2</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
                        <path d="M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
                    </svg>
                    <span><?php echo esc_html__( 'Try saving the settings again.', 'ai-content-wizard' ); ?></span>
                </li>
            </ul>
        </div>
    </div>
</div>

    <?php
    ai_content_wizard_display_tooltips();
}