<?php
// Protection from direct access
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

require_once( plugin_dir_path( __FILE__ ) . 'api/api-settings-blocks.php' );
require_once( plugin_dir_path( __FILE__ ) . 'api/api-valid.php' );

/**
 * Enqueue styles and scripts for the settings page.
 */
function enqueue_api_settings_styles() {
	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 );	
	// Inline CSS: яркий yellow gradient, плавающее окно – центрированное, шире, чуть прозрачное и с collapse button;

}
add_action( 'admin_enqueue_scripts', 'enqueue_api_settings_styles' );


/* ------------------ Render Predefined Model Radios for non-Anthropic Providers ------------------ */
function render_predefined_model_radios( $model_assoc, $current_val, $available_models ) {
	foreach ( $model_assoc as $key => $label ) {
		$checked = ( $current_val === $key ) ? 'checked' : '';
		$class   = in_array( $key, $available_models ) ? '' : 'unavailable';
		echo '<input type="radio" id="txt_model_' . esc_attr( $key ) . '" name="text_model_selector" value="' . esc_attr( $key ) . '" ' . esc_attr( $checked ) . '>';

		// Используем wp_kses для разрешения тега <span>
		echo '<label for="txt_model_' . esc_attr( $key ) . '" class="' . esc_attr( $class ) . '">' . wp_kses( $label, array( 'span' => array( 'class' => array() ) ) ) . '</label>';
	}
}

/* ------------------ Main Settings Page ------------------ */
function ai_content_wizard_api_settings_page() {
	// Если была изменена модель изображений, показываем уведомление
	if ( get_transient( 'ai_content_wizard_image_model_changed' ) ) {
		echo '<div class="notice notice-warning is-dismissible"><p>' . esc_html__( 'You have changed the image model. Settings have been automatically updated.', 'ai-content-wizard' ) . '</p></div>';
		delete_transient( 'ai_content_wizard_image_model_changed' );
	}

	// Получаем текущие настройки
	$api_key                 = ai_content_wizard_get_setting( 'ai_content_wizard_api_key', '' );
	$anthropic_api_key       = ai_content_wizard_get_setting( 'ai_content_wizard_anthropic_api_key', '' );
	$deepai_api_key          = ai_content_wizard_get_setting( 'ai_content_wizard_deepai_api_key', '' );
	$deepseek_api_key        = ai_content_wizard_get_setting( 'deepseek_api_key', '' );
	$stable_diffusion_api_key = ai_content_wizard_get_setting( 'ai_content_wizard_stable_diffusion_api_key', '' );
	$bing_api_key            = ai_content_wizard_get_setting( 'ai_content_wizard_bing_api_key', '' );
	$google_api_key          = ai_content_wizard_get_setting( 'ai_content_wizard_google_api_key', '' );
	$google_cse_id           = ai_content_wizard_get_setting( 'ai_content_wizard_google_cse_id', '' );
	$rss_feed_url            = ai_content_wizard_get_setting( 'ai_content_wizard_rss_feed_url', '' );

	$text_model  = ai_content_wizard_get_setting( 'ai_content_wizard_text_model', 'gpt-4o-mini' );
	$image_model = ai_content_wizard_get_setting( 'ai_content_wizard_image_model', 'dall-e-3' );
	$models      = ai_content_wizard_get_setting( 'ai_content_wizard_available_models', array() );
	$fine_tuned_models = ai_content_wizard_get_setting( 'ai_content_wizard_fine_tuned_models', array() );
	if ( ! is_array( $models ) ) {
		$models = array();
	}
	if ( ! is_array( $fine_tuned_models ) ) {
		$fine_tuned_models = array();
	}

	// Обработка сброса ключей API
	if ( isset( $_POST['reset_api_key'] ) && $_POST['reset_api_key'] === '1' ) {
		ai_content_wizard_update_setting( 'ai_content_wizard_api_key', '' );
		$api_key = '';
	}
	if ( isset( $_POST['reset_anthropic_api_key'] ) && $_POST['reset_anthropic_api_key'] === '1' ) {
		ai_content_wizard_update_setting( 'ai_content_wizard_anthropic_api_key', '' );
		$anthropic_api_key = '';
	}
	if ( isset( $_POST['reset_deepseek_api_key'] ) && $_POST['reset_deepseek_api_key'] === '1' ) {
		ai_content_wizard_update_setting( 'deepseek_api_key', '' );
		$deepseek_api_key = '';
	}	
	if ( isset( $_POST['reset_deepai_api_key'] ) && $_POST['reset_deepai_api_key'] === '1' ) {
		ai_content_wizard_update_setting( 'ai_content_wizard_deepai_api_key', '' );
		$deepai_api_key = '';
	}
	if ( isset( $_POST['reset_stable_diffusion_api_key'] ) && $_POST['reset_stable_diffusion_api_key'] === '1' ) {
		ai_content_wizard_update_setting( 'ai_content_wizard_stable_diffusion_api_key', '' );
		$stable_diffusion_api_key = '';
	}
	if ( isset( $_POST['reset_bing_api_key'] ) && $_POST['reset_bing_api_key'] === '1' ) {
		ai_content_wizard_update_setting( 'ai_content_wizard_bing_api_key', '' );
		$bing_api_key = '';
	}
	if ( isset( $_POST['reset_google_api_key'] ) && $_POST['reset_google_api_key'] === '1' ) {
		ai_content_wizard_update_setting( 'ai_content_wizard_google_api_key', '' );
		$google_api_key = '';
	}
	if ( isset( $_POST['reset_google_cse_id'] ) && $_POST['reset_google_cse_id'] === '1' ) {
		ai_content_wizard_update_setting( 'ai_content_wizard_google_cse_id', '' );
		$google_cse_id = '';
	}
	// Новые сбросы для Ideogram
	if ( isset( $_POST['reset_ideogram_api_key'] ) && $_POST['reset_ideogram_api_key'] === '1' ) {
		ai_content_wizard_update_setting( 'ideogram_api_key', '' );
	}

	// Обработка сохранения формы и валидация ключей API
	$modalToShow = ''; // переменная для показа модального окна (будет установлена ниже)
	if ( $_SERVER['REQUEST_METHOD'] === 'POST' && ( isset( $_POST['ai_content_wizard_api_key'] ) || isset( $_POST['ai_content_wizard_anthropic_api_key'] ) ) ) {
		$is_reset = (
			( isset( $_POST['reset_api_key'] ) && $_POST['reset_api_key'] === '1' ) ||
			( isset( $_POST['reset_anthropic_api_key'] ) && $_POST['reset_anthropic_api_key'] === '1' ) ||
			( isset( $_POST['reset_deepai_api_key'] ) && $_POST['reset_deepai_api_key'] === '1' ) ||
			( isset( $_POST['reset_stable_diffusion_api_key'] ) && $_POST['reset_stable_diffusion_api_key'] === '1' ) ||
			( isset( $_POST['reset_bing_api_key'] ) && $_POST['reset_bing_api_key'] === '1' ) ||
			( isset( $_POST['reset_google_api_key'] ) && $_POST['reset_google_api_key'] === '1' ) ||
			( isset( $_POST['reset_google_cse_id'] ) && $_POST['reset_google_cse_id'] === '1' )
		);
		
		$temp_api_key           = sanitize_text_field( $_POST['ai_content_wizard_api_key'] );
		$temp_anthropic_api_key = sanitize_text_field( $_POST['ai_content_wizard_anthropic_api_key'] );
		$temp_deepseek_api_key  = sanitize_text_field( $_POST['deepseek_api_key'] );
		$selected_text_model    = sanitize_text_field( $_POST['ai_content_wizard_text_model'] );
		$image_model_in         = sanitize_text_field( $_POST['ai_content_wizard_image_model'] );
		$bing_api_key_in        = sanitize_text_field( $_POST['ai_content_wizard_bing_api_key'] );
		$google_api_key_in      = sanitize_text_field( $_POST['ai_content_wizard_google_api_key'] );
		$google_cse_id_in       = sanitize_text_field( $_POST['ai_content_wizard_google_cse_id'] );
		$rss_feed_url_in        = sanitize_text_field( $_POST['ai_content_wizard_rss_feed_url'] );
		$deepai_api_key_in      = sanitize_text_field( $_POST['ai_content_wizard_deepai_api_key'] );
		$stable_diffusion_api_key_in = sanitize_text_field( $_POST['ai_content_wizard_stable_diffusion_api_key'] );
		$ideogram_api_key       = sanitize_text_field( $_POST['ideogram_api_key'] );
		
		$is_valid_key = true;
		$provider_fail_type = 'generic';
		$selected_text_provider = sanitize_text_field( $_POST['text_provider'] );
		if ( ! $is_reset ) {
			if ( $selected_text_provider === 'openai' ) {
				if ( ! is_valid_openai_api_key( $temp_api_key, $selected_text_model ) ) {
					$is_valid_key = false;
					$provider_fail_type = 'openai';
				}
			} elseif ( $selected_text_provider === 'anthropic' ) {
				if ( ! is_valid_anthropic_api_key( $temp_anthropic_api_key, $selected_text_model ) ) {
					$is_valid_key = false;
					$provider_fail_type = 'anthropic';
				}
			} elseif ( $selected_text_provider === 'deepseek' ) {
				if ( ! is_valid_deepseek_api_key( $temp_deepseek_api_key, $selected_text_model ) ) {
					$is_valid_key = false;
					$provider_fail_type = 'deepseek';
				}
			} else {
				$is_valid_key = false;
				$provider_fail_type = 'generic';
			}
		}
		
		if ( $is_valid_key ) {
			ai_content_wizard_update_setting( 'ai_content_wizard_api_key', $temp_api_key );
			ai_content_wizard_update_setting( 'ai_content_wizard_anthropic_api_key', $temp_anthropic_api_key );
			ai_content_wizard_update_setting( 'deepseek_api_key', $temp_deepseek_api_key );
			ai_content_wizard_update_setting( 'ai_content_wizard_text_model', $selected_text_model );
			if ( $selected_text_provider === 'deepseek' ) {
				ai_content_wizard_update_setting( 'deepseek_api_key', $temp_deepseek_api_key );
			}
			
			$old_image_model = ai_content_wizard_get_setting( 'ai_content_wizard_image_model', 'dall-e-3' );
			ai_content_wizard_update_setting( 'ai_content_wizard_image_model', $image_model_in );
			ai_content_wizard_update_image_model_parameters( $image_model_in );

			if ( $old_image_model !== $image_model_in ) {
				set_transient( 'ai_content_wizard_image_model_changed', true, 5 * MINUTE_IN_SECONDS );
			}
			
			ai_content_wizard_update_setting( 'ai_content_wizard_bing_api_key', $bing_api_key_in );
			ai_content_wizard_update_setting( 'ai_content_wizard_google_api_key', $google_api_key_in );
			ai_content_wizard_update_setting( 'ai_content_wizard_google_cse_id', $google_cse_id_in );
			ai_content_wizard_update_setting( 'ai_content_wizard_rss_feed_url', $rss_feed_url_in );
			ai_content_wizard_update_setting( 'ai_content_wizard_deepai_api_key', $deepai_api_key_in );
			ai_content_wizard_update_setting( 'ai_content_wizard_stable_diffusion_api_key', $stable_diffusion_api_key_in );
			ai_content_wizard_update_setting( 'ideogram_api_key', $ideogram_api_key );
			


			$modalToShow = 'success';
		} else {
			switch ( $provider_fail_type ) {
				case 'openai':
					$modalToShow = 'openai';
					break;
				case 'anthropic':
					$modalToShow = 'anthropic';
					break;
				case 'deepseek':
					$modalToShow = 'deepseek';
					break;
				default:
					$modalToShow = 'generic';
					break;
			}
		}
		// Обновляем локальные переменные после сохранения
		$api_key                 = ai_content_wizard_get_setting( 'ai_content_wizard_api_key', '' );
		$anthropic_api_key       = ai_content_wizard_get_setting( 'ai_content_wizard_anthropic_api_key', '' );
		$deepseek_api_key        = ai_content_wizard_get_setting( 'deepseek_api_key', '' );
		$stable_diffusion_api_key = ai_content_wizard_get_setting( 'ai_content_wizard_stable_diffusion_api_key', '' );
		$bing_api_key            = ai_content_wizard_get_setting( 'ai_content_wizard_bing_api_key', '' );
		$google_api_key          = ai_content_wizard_get_setting( 'ai_content_wizard_google_api_key', '' );
		$google_cse_id           = ai_content_wizard_get_setting( 'ai_content_wizard_google_cse_id', '' );
		$rss_feed_url            = ai_content_wizard_get_setting( 'ai_content_wizard_rss_feed_url', '' );
		$text_model              = ai_content_wizard_get_setting( 'ai_content_wizard_text_model', 'gpt-4o-mini' );
		$image_model             = ai_content_wizard_get_setting( 'ai_content_wizard_image_model', 'dall-e-3' );
	}

	// Если нажата кнопка "Show available models" для OpenAI
	if ( isset( $_POST['aiw_update_openai_models'] ) ) {
		$api_key_temp = sanitize_text_field( $_POST['ai_content_wizard_api_key'] ?? $api_key );
		$openai_models = aiw_retrieve_openai_models( $api_key_temp );
		if ( ! empty( $openai_models ) ) {
			ai_content_wizard_update_setting( 'ai_content_wizard_available_models', $openai_models );
			echo "<script>document.addEventListener('DOMContentLoaded', function(){ showOpenAIModelsSuccess(); });</script>";
			$models = $openai_models;
		} else {
			echo "<script>document.addEventListener('DOMContentLoaded', function(){ showOpenAIModelsError(); });</script>";
		}
	}

	// Old update model names functionality
	if ( isset( $_POST['ai_content_wizard_update_models'] ) ) {
		update_model_names();
		$models = ai_content_wizard_get_setting( 'ai_content_wizard_available_models', array() );
	}

	// Выводим разметку настроек
	echo '<div class="ai-content-wizard-settings">';
	echo '<h1>' . esc_html__( 'AI Content Wizard - API Settings', 'ai-content-wizard' ) . '</h1>';

	if ( class_exists( 'AiContentWizard_PromoPilot' ) ) {
		AiContentWizard_PromoPilot::render_settings_banner();
	}
	?>

	<form method="post" action="">
		<!-- Tabs -->
		<div class="aiw-tabs">
			<div class="aiw-tab-button active" data-tab="tab-text-models">
				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
					<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
					<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
				</svg>
				<?php esc_html_e( 'Text Models', 'ai-content-wizard' ); ?>
			</div>
			<div class="aiw-tab-button" data-tab="tab-image-models">
				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
					<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
					<circle cx="8.5" cy="8.5" r="1.5"></circle>
					<polyline points="21 15 16 10 5 21"></polyline>
				</svg>
				<?php esc_html_e( 'Image Models', 'ai-content-wizard' ); ?>
			</div>
			<div class="aiw-tab-button" data-tab="tab-misc">
				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
					<circle cx="12" cy="12" r="3"></circle>
					<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
				</svg>
				<?php esc_html_e( 'Misc', 'ai-content-wizard' ); ?>
			</div>
		</div>

		<!-- Tab: Text Models -->
		<div id="tab-text-models" class="aiw-tab-content active">
			<?php render_text_models_settings(); ?>
		</div><!-- /tab-text-models -->

		<!-- Tab: Image Models -->
		<div id="tab-image-models" class="aiw-tab-content">
			<?php render_image_models_settings(); ?>
		</div>
		<!-- /tab-image-models -->

		<!-- Tab: Misc -->
		<div id="tab-misc" class="aiw-tab-content">
			<?php render_misc_settings(); ?>
		</div>
		<!-- /tab-misc -->

		<div class="ai-content-wizard-cost-notice" style="margin-top:20px;">
			<p><?php esc_html_e( 'Note: Model selection affects cost and token usage.', 'ai-content-wizard' ); ?></p>
		</div>

		<?php submit_button(); ?>
	</form>
</div><!-- /.ai-content-wizard-settings -->

<!-- ------------------ Modal Windows for Validation ------------------ -->
<!-- ------------------ Modal Windows for Validation ------------------ -->
<div id="successModal" 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: 400px; margin: 0 auto;">
		<span class="ai-content-wizard-close" style="font-size: 24px; cursor: pointer;">×</span>
		<div style="text-align: center; padding: 20px;">
			<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#2ecc71" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 15px;">
				<circle cx="12" cy="12" r="10" stroke="#2ecc71" fill="#e8f5e9"/>
				<polyline points="16 9 10 15 7 12" stroke="#2ecc71"/>
			</svg>
			<h2 style="color: #2ecc71; font-size: 24px; margin: 0 0 10px;"><?php echo esc_html__( 'Congratulations!', 'ai-content-wizard' ); ?></h2>
			<p style="color: #555; font-size: 16px; line-height: 1.5; margin: 0;"><?php echo esc_html__( 'Your API Key is valid. Settings have been saved successfully.', 'ai-content-wizard' ); ?></p>
		</div>
	</div>
</div>

<div id="openAIErrorModal" 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__( '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; transition: color 0.3s;">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; transition: color 0.3s;">video tutorial</a> for a step-by-step 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-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__( '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; transition: color 0.3s;">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-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: 400px; 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__( '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>

<!-- ------------------ Modal Windows for "Show available models" ------------------ -->
<div id="openaiModelsSuccessModal" 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: 400px; margin: 0 auto;">
		<span class="ai-content-wizard-close" style="font-size: 24px; cursor: pointer;">×</span>
		<div style="text-align: center; padding: 20px;">
			<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#2ecc71" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 15px;">
				<circle cx="12" cy="12" r="10" stroke="#2ecc71" fill="#e8f5e9"/>
				<polyline points="16 9 10 15 7 12" stroke="#2ecc71"/>
			</svg>
			<h2 style="color: #2ecc71; font-size: 24px; margin: 0 0 10px;"><?php echo esc_html__( 'Available Models Updated', 'ai-content-wizard' ); ?></h2>
			<p style="color: #555; font-size: 16px; line-height: 1.5; margin: 0;"><?php echo esc_html__( 'The list of available models has been updated. Outdated models are shown in gray.', 'ai-content-wizard' ); ?></p>
		</div>
	</div>
</div>

<div id="openaiModelsErrorModal" 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__( 'Error Retrieving Models', 'ai-content-wizard' ); ?>
		</h2>
		<p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 15px;"><?php echo esc_html__( 'Unable to retrieve available models. Please check your API key and try again.', '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( __( 'Verify 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>
				</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__( 'Re-enter the API key and retry fetching the models.', '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 your API key is active and has no typos.', 'ai-content-wizard' ); ?></li>
				<li><?php echo esc_html__( 'Confirm your account has a valid payment method.', 'ai-content-wizard' ); ?></li>
			</ul>
		</div>
	</div>
</div>

<!-- ------------------ Help Modal Windows ------------------ -->
<div id="helpTextProviders" 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: 600px; margin: 0 auto;">
		<span class="ai-content-wizard-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 between OpenAI (GPT-based), Anthropic (Claude), and DeepSeek providers.', '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>. Models include GPT-3.5, GPT-4, etc.', '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>. Models include Claude variants.', '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__( 'Use your DeepSeek API key (refer to DeepSeek documentation) to access DeepSeek V3 (Chat) or DeepSeek R1 (Reasoner).', 'ai-content-wizard' ); ?></span>
				</div>
			</li>
		</ul>
	</div>
</div>

<div id="helpOpenAIKey" 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: 400px; margin: 0 auto;">
		<span class="ai-content-wizard-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( __( '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>. Make sure your account has a linked payment method.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></p>
	</div>
</div>

<div id="helpAnthropicKey" 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: 400px; margin: 0 auto;">
		<span class="ai-content-wizard-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( __( 'Obtain 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>. A valid payment method is required.', 'ai-content-wizard' ), array( 'a' => array( 'href' => array(), 'target' => array(), 'style' => array() ) ) ); ?></p>
	</div>
</div>

<div id="helpDeepSeekKey" 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: 400px; margin: 0 auto;">
		<span class="ai-content-wizard-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 as provided by DeepSeek. Refer to the DeepSeek documentation for further details on obtaining your key and model pricing.', 'ai-content-wizard' ); ?></p>
	</div>
</div>

<div id="helpTextModels" 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: 400px; margin: 0 auto;">
		<span class="ai-content-wizard-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 from the predefined models for the selected provider. Models not available for your account will be shown in gray.', 'ai-content-wizard' ); ?></p>
	</div>
</div>

<div id="helpImageProviders" 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: 600px; margin: 0 auto;">
		<span class="ai-content-wizard-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__( 'Choose from the available providers:', '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__( 'Use your OpenAI API key. Models: DALL-E 2, DALL-E 3.', '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 esc_html__( 'Use your DeepAI API key. Models: DeepAI Standard, DeepAI HD.', '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__( 'Stable Diffusion:', 'ai-content-wizard' ); ?></strong>
					<span><?php echo esc_html__( 'Use your Stability AI key. Models: SDXL 1.0, Stable Diffusion 3, Stable Diffusion Ultra.', 'ai-content-wizard' ); ?></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__( 'Enter your Ideogram API key. Available models: V_1, V_1_TURBO, V_2, V_2_TURBO. The default model is V_2.', 'ai-content-wizard' ); ?></span>
				</div>
			</li>
		</ul>
	</div>
</div>

<div id="helpDalleKey" 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: 400px; margin: 0 auto;">
		<span class="ai-content-wizard-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__( 'This uses the same OpenAI API key as for text models.', 'ai-content-wizard' ); ?></p>
	</div>
</div>

<div id="helpDeepAIKey" 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: 400px; margin: 0 auto;">
		<span class="ai-content-wizard-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( __( '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() ) ) ); ?></p>
	</div>
</div>

<div id="helpStableKey" 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: 400px; margin: 0 auto;">
		<span class="ai-content-wizard-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( __( '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() ) ) ); ?></p>
	</div>
</div>

<div id="helpIdeogramKey" 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: 400px; margin: 0 auto;">
		<span class="ai-content-wizard-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. The available models are: V_1, V_1_TURBO, V_2, V_2_TURBO. The default model is V_2.', 'ai-content-wizard' ); ?></p>
	</div>
</div>

<div id="helpImageModels" 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="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', 'ai-content-wizard' ); ?>
		</h2>
		<p style="color: #555; font-size: 16px; line-height: 1.5;"><?php echo esc_html__( 'Choose the image generation model for your needs. Each provider offers different styles and quality. New providers like Ideogram include additional models – check their documentation for more details.', 'ai-content-wizard' ); ?></p>
	</div>
</div>

<!-- ------------------ Floating Status Window ------------------ -->
<div class="aiw-floating-status" id="aiw-floating-status">
	<div class="aiw-floating-status-header" id="aiw-floating-status-header">
		<h4 style="margin:0;"><?php esc_html_e( 'Selected Models', 'ai-content-wizard' ); ?></h4>
		<!-- По умолчанию окно свернуто, поэтому кнопка показывает "+" -->
		<button id="toggle-floating-status" style="background:none; border:none; font-size:18px; cursor:pointer;">&#x2b;</button>
	</div>
	<div class="aiw-floating-status-content">
		<div class="aiw-status-item">
			<strong><?php esc_html_e( 'Text Model:', 'ai-content-wizard' ); ?></strong>
			<span id="aiw-selected-text-model"><?php echo esc_html( $text_model ); ?></span>
			<span id="aiw-text-unsaved" class="aiw-unsaved" style="display:none;">(unsaved)</span>
		</div>
		<div class="aiw-status-item">
			<strong><?php esc_html_e( 'Image Model:', 'ai-content-wizard' ); ?></strong>
			<span id="aiw-selected-image-model"><?php echo esc_html( $image_model ); ?></span>
			<span id="aiw-image-unsaved" class="aiw-unsaved" style="display:none;">(unsaved)</span>
		</div>
	</div>
</div>

<!-- ------------------ Global Functions for Modal Windows ------------------ -->


<?php if ( ! empty( $modalToShow ) ) : ?>
	<script>
	document.addEventListener('DOMContentLoaded', function(){
		var modalToShow = <?php echo json_encode($modalToShow); ?>;
		if(modalToShow === 'success'){
			showSuccessModal();
		} else if(modalToShow === 'openai'){
			showOpenAIErrorModal();
		} else if(modalToShow === 'anthropic'){
			showAnthropicErrorModal();
		} else {
			showGenericErrorModal();
		}
	});
	</script>
<?php endif; ?>

<?php
}

/* ------------------ AJAX: Rename model ------------------ */
add_action('wp_ajax_rename_model','handle_rename_model');
function handle_rename_model(){
	$old_name = sanitize_text_field($_POST['old_name']);
	$new_name = sanitize_text_field($_POST['new_name']);
	if(!preg_match('/^ftjob-\w+$/', $old_name) || !preg_match('/^ft:gpt-3\.5-turbo.*/', $new_name)){
		wp_send_json_error('Invalid model ID or name format.');
	}
	$fine_tuned = ai_content_wizard_get_setting('ai_content_wizard_fine_tuned_models', array());
	$idx = array_search($old_name, $fine_tuned);
	if($idx !== false){
		$fine_tuned[$idx] = $new_name;
		ai_content_wizard_update_setting('ai_content_wizard_fine_tuned_models', $fine_tuned);
		wp_send_json_success('Model renamed successfully.');
	}else{
		wp_send_json_error('Model not found in fine-tuned models.');
	}
}

/* ------------------ Retrieve OpenAI Models ------------------ */
function aiw_retrieve_openai_models($api_key){
	if(empty($api_key)) return array();
	$headers = array(
		'Authorization' => 'Bearer ' . $api_key,
		'Content-Type'  => 'application/json'
	);
	$response = wp_remote_get('https://api.openai.com/v1/models', array(
		'headers' => $headers,
		'timeout' => 30
	));
	if(is_wp_error($response)){
		error_log('OpenAI model fetch error: ' . $response->get_error_message());
		return array();
	}
	$code = wp_remote_retrieve_response_code($response);
	if($code !== 200){
		error_log('OpenAI model fetch error code: ' . $code);
		return array();
	}
	$body = wp_remote_retrieve_body($response);
	$data = json_decode($body, true);
	if(!isset($data['data'])) return array();
	$allowed_models = array(
		'gpt-3.5-turbo',
		'gpt-3.5-turbo-16k',
		'gpt-4',
		'gpt-4-turbo',
		'gpt-4o',
		'gpt-4o-mini',
		'gpt-4.5-preview',
		'gpt-5-mini',
		'o1-preview',
		'o1-mini',
		'o1',
		'o3-mini'
	);
	$result = array();
	foreach($data['data'] as $model_info){
		if(!empty($model_info['id']) && in_array($model_info['id'], $allowed_models)){
			$result[] = $model_info['id'];
		}
	}
	return array_unique($result);
}

/* ------------------ update_model_names (old functionality) ------------------ */
function update_model_names(){
	$models = ai_content_wizard_get_setting('ai_content_wizard_available_models', array());
	$api_key = ai_content_wizard_get_setting('ai_content_wizard_api_key');
	$models_updated = false;
	foreach($models as $index => $model_id){
		if(strpos($model_id, 'ftjob-') === 0){
			error_log("Checking model with ID: $model_id");
			$model_name = get_model_name_by_job_id($model_id, $api_key);
			if(!empty($model_name) && $model_name !== $model_id){
				$models[$index] = $model_name;
				$models_updated = true;
				error_log("Updated model ID $model_id to name $model_name");
			}
		}
	}
	if($models_updated){
		ai_content_wizard_update_setting('ai_content_wizard_available_models', $models);
		error_log("Model names have been updated.");
	}
}
function get_model_name_by_job_id($job_id, $api_key){
	// Stub – here you can implement a real request to OpenAI for obtaining the model name by job ID.
	return '';
}

/**
 * Other helper functions (e.g. aiwizard_encrypt_data, aiwizard_send_data_to_api, etc.) can be left as-is.
 */

function aiwizard_encrypt_data($data, $key) {
    if (is_array($data)) {
        $data = wp_json_encode($data);
    }
    $iv = openssl_random_pseudo_bytes(openssl_cipher_iv_length('aes-256-cbc'));
    $encrypted = openssl_encrypt($data, 'aes-256-cbc', $key, 0, $iv);
    return base64_encode($encrypted . '::' . $iv);
}

function aiwizard_change_plugin_status_on_server($site_url, $action) {
    $key = 'ai-content-wizard';
    $data = array('site_url' => $site_url, 'action' => $action);
    $json_data = wp_json_encode(array(
        'data' => aiwizard_encrypt_data($data, $key)
    ));
    $response = wp_remote_post('https://aiwizard.buyreadysite.com/wp-json/my-stats-plugin/v1/change-status', array(
        'body' => $json_data,
        'method' => 'POST',
        'headers' => array('Content-Type' => 'application/json')
    ));
    if (is_wp_error($response)) {
        error_log('Error making POST request: ' . $response->get_error_message());
    } else {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body);
        if (isset($data->code) && $data->code === "Success") {
            return true;
        }
    }
    return false;
}

function aiwizard_send_data_to_api($data, $extended_data = null) {
    $key = 'ai-content-wizard';
    $json_data = wp_json_encode(array(
        'data' => aiwizard_encrypt_data($data, $key)
    ));
    $response = wp_remote_post('https://aiwizard.buyreadysite.com/wp-json/my-stats-plugin/v1/stats', array(
        'body' => $json_data,
        'method' => 'POST',
        'headers' => array('Content-Type' => 'application/json')
    ));
    if (is_wp_error($response)) {
        error_log('Error making POST request: ' . $response->get_error_message());
    }
}

function aiwizard_send_content_plan_to_api($data) {
    $key = 'ai-content-wizard';
    $json_data = wp_json_encode(array(
        'content_plan_data' => aiwizard_encrypt_data($data, $key)
    ));
    $response = wp_remote_post('https://aiwizard.buyreadysite.com/wp-json/my-stats-plugin/v1/content-plan', array(
        'body' => $json_data,
        'method' => 'POST',
        'headers' => array('Content-Type' => 'application/json')
    ));
    if (is_wp_error($response)) {
        error_log('Error making POST request: ' . $response->get_error_message());
        return false;
    }
    $body = wp_remote_retrieve_body($response);
    $response_data = json_decode($body);
    if (json_last_error() !== JSON_ERROR_NONE) {
        error_log("JSON decode error: " . json_last_error_msg());
        return false;
    }
    if (!is_object($response_data) || !property_exists($response_data, 'code')) {
        error_log("Invalid response format: " . $body);
        return false;
    }
    if ($response_data->code === "Success") {
        return true;
    }
    return false;
}

