<?php
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Class AIEditor_Settings_Page
 * The settings page for the AI Editor plugin.
 */
class AIEditor_Settings_Page {

	/**
	 * Maximum allowed characters for the saved theme style context.
	 */
	const THEME_STYLE_CONTEXT_MAX_LENGTH = 500;

	/**
	 * Intialize the class.
	 * Set up actions for admin menu and settings initialization.
	 */
	public static function init() {
		add_action( 'admin_menu', array( 'AIEditor_Settings_Page', 'add_settings_menu' ) );
		add_action( 'admin_init', array( 'AIEditor_Settings_Page', 'initialize_settings' ) );
	}

	/**
	 * Adds the settings menu to the WordPress admin.
	 */
	public static function add_settings_menu() {
		if ( ! current_user_can( 'manage_options' ) ) {
			return;
		}

		add_options_page(
			__( 'AI Editor Settings', 'ai-editor' ),
			__( 'AI Editor', 'ai-editor' ),
			'manage_options',
			'ai-editor',
			array( 'AIEditor_Settings_Page', 'render_settings_page' )
		);
	}

	/**
	 * Initializes the plugin settings.
	 */
	public static function initialize_settings() {
		register_setting( 'aie_openai_page', 'ai_editor_settings', array( 'AIEditor_Settings_Page', 'sanitize' ) );

		add_settings_section(
			'ai_editor_aie_openai_page_section',
			'',
			array( 'AIEditor_Settings_Page', 'settings_section_callback' ),
			'aie_openai_page'
		);

		$options = get_option( 'ai_editor_settings' );
		self::add_settings_field( 'ai_editor_api_key', __( 'OpenAI API Key', 'ai-editor' ), $options );
		self::add_settings_field( 'ai_editor_model', __( 'GPT Model', 'ai-editor' ), $options );
		self::add_settings_field( 'ai_editor_reasoning_effort', __( 'Reasoning Effort', 'ai-editor' ), $options );
		self::add_settings_field( 'ai_editor_theme_style_context', __( 'Theme Style Context For AI', 'ai-editor' ), $options );
		self::add_settings_field( 'ai_editor_trim_chat_history_enabled', __( 'Limit Conversation Context Sent To OpenAI', 'ai-editor' ), $options );
		self::add_settings_field( 'ai_editor_trim_chat_history_max_messages', __( 'Max Messages In Conversation Context', 'ai-editor' ), $options );
	}

	/**
	 * Sanitizes the input received from the settings form.
	 *
	 * @param array $input The input received from the settings form.
	 *
	 * @return array The sanitized input.
	 */
	public static function sanitize( $input ) {
		$existing_options = get_option( 'ai_editor_settings', array() );
		$sanitized_input = is_array( $existing_options ) ? $existing_options : array();

		if ( isset( $input['ai_editor_api_key'] ) ) {
			$sanitized_input['ai_editor_api_key'] = sanitize_text_field( $input['ai_editor_api_key'] );
		}

		if ( isset( $input['ai_editor_model'] ) ) {
			$model = sanitize_text_field( $input['ai_editor_model'] );
			$sanitized_input['ai_editor_model'] = in_array( $model, AIEditor_Model_Config::get_supported_model_keys(), true ) ? $model : AIEditor_Model_Config::get_recommended_model_key();
		}

		if ( isset( $input['ai_editor_reasoning_effort'] ) ) {
			$reasoning_effort = sanitize_text_field( $input['ai_editor_reasoning_effort'] );
			$sanitized_input['ai_editor_reasoning_effort'] = in_array( $reasoning_effort, AIEditor_Model_Config::get_reasoning_effort_keys(), true )
				? $reasoning_effort
				: AIEditor_Model_Config::get_default_reasoning_effort();
		}

		if ( isset( $input['ai_editor_model'] ) || isset( $input['ai_editor_reasoning_effort'] ) ) {
			$model_key = isset( $sanitized_input['ai_editor_model'] ) ? $sanitized_input['ai_editor_model'] : AIEditor_Model_Config::get_recommended_model_key();
			$sanitized_input['ai_editor_reasoning_effort'] = AIEditor_Model_Config::normalize_reasoning_effort(
				isset( $sanitized_input['ai_editor_reasoning_effort'] ) ? $sanitized_input['ai_editor_reasoning_effort'] : AIEditor_Model_Config::get_default_reasoning_effort(),
				AIEditor_Model_Config::get_openai_model_name( $model_key )
			);
		}

		if ( isset( $input['ai_editor_theme_style_context'] ) ) {
			$active_theme_slug = self::get_active_theme_slug();
			$sanitized_theme_style_context = self::sanitize_theme_style_context( $input['ai_editor_theme_style_context'] );
			$theme_style_contexts = self::get_saved_theme_style_contexts( $sanitized_input );

			if ( '' !== $active_theme_slug ) {
				$theme_style_contexts[ $active_theme_slug ] = $sanitized_theme_style_context;
			}

			$sanitized_input['ai_editor_theme_style_contexts'] = $theme_style_contexts;
			$sanitized_input['ai_editor_theme_style_context'] = $sanitized_theme_style_context;
			$sanitized_input['ai_editor_theme_style_context_theme_slug'] = $active_theme_slug;
		}

		$sanitized_input['ai_editor_trim_chat_history_enabled'] = ! empty( $input['ai_editor_trim_chat_history_enabled'] ) ? '1' : '0';

		if ( isset( $input['ai_editor_trim_chat_history_max_messages'] ) ) {
			$max_messages = absint( $input['ai_editor_trim_chat_history_max_messages'] );
			$sanitized_input['ai_editor_trim_chat_history_max_messages'] = max( 1, min( 100, $max_messages ) );
		} elseif ( empty( $sanitized_input['ai_editor_trim_chat_history_max_messages'] ) ) {
			$sanitized_input['ai_editor_trim_chat_history_max_messages'] = 50;
		}

		return $sanitized_input;
	}

	/**
	 * Adds a settings field.
	 *
	 * @param string $id      The ID of the settings field.
	 * @param string $title   The title of the settings field.
	 * @param array  $options The options for the settings field.
	 */
	private static function add_settings_field( $id, $title, $options ) {
		add_settings_field(
			$id,
			$title,
			array( 'AIEditor_Settings_Page', 'render_settings_field' ),
			'aie_openai_page',
			'ai_editor_aie_openai_page_section',
			array(
				'id'        => $id,
				'label_for' => $id,
				'options'   => $options,
			)
		);
	}

	/**
	 * Renders a settings field.
	 *
	 * @param array $args Arguments for the settings field.
	 */
	public static function render_settings_field( $args ) {
		$options = $args['options'];
		$value   = isset( $options[ $args['id'] ] ) ? esc_attr( $options[ $args['id'] ] ) : '';
		$html    = '';
		$theme_description = self::get_active_theme_description();
		$active_theme_slug = self::get_active_theme_slug();
		$current_theme_style_context = self::get_saved_theme_style_context_for_slug( $options, $active_theme_slug );
		$has_saved_theme_contexts = ! empty( self::get_saved_theme_style_contexts( $options ) );
		$description_id = $args['id'] . '_description';

		switch ( $args['id'] ) {
			case 'ai_editor_api_key':
				$html .= '<input type="password" id="' . esc_attr( $args['id'] ) . '" name="ai_editor_settings[' . esc_attr( $args['id'] ) . ']" value="' . $value . '" class="regular-text" aria-describedby="' . esc_attr( $description_id ) . '">';
				$html .= '<p class="description" id="' . esc_attr( $description_id ) . '">' . sprintf(
					wp_kses(
						/* translators: %s: OpenAI API keys page URL. */
						__( 'Enter your <a href="%s" target="_blank" rel="noopener noreferrer" aria-label="OpenAI API key (opens in a new tab)">OpenAI API key</a>. The API key will be stored in your database. You are responsible for charges and usage limits.', 'ai-editor' ),
						array(
							'a' => array(
								'href'   => array(),
								'target' => array(),
								'rel'    => array(),
								'aria-label' => array(),
							),
						)
					),
					esc_url( 'https://platform.openai.com/api-keys' )
				) . '</p>';
				break;
			case 'ai_editor_model':
				$value = $value !== '' ? $value : AIEditor_Model_Config::get_recommended_model_key();
				$html .= '<select id="' . esc_attr( $args['id'] ) . '" name="ai_editor_settings[' . esc_attr( $args['id'] ) . ']" class="regular-text" aria-describedby="' . esc_attr( $description_id ) . '">';
				foreach ( AIEditor_Model_Config::get_supported_models() as $model_key => $model_config ) {
					$option_label = $model_config['label'] . ( ! empty( $model_config['recommended'] ) ? ' (Recommended)' : '' );
					$html .= '<option value="' . esc_attr( $model_key ) . '"' . selected( $value, $model_key, false ) . '>' . esc_html( $option_label ) . '</option>';
				}
				$html .= '</select>';
				$html .= '<p class="description" id="' . esc_attr( $description_id ) . '">' . esc_html( AIEditor_Model_Config::get_recommended_model_note() ) . '</p>';
				break;
			case 'ai_editor_reasoning_effort':
				$value = $value !== '' ? $value : AIEditor_Model_Config::get_default_reasoning_effort();
				$html .= '<select id="' . esc_attr( $args['id'] ) . '" name="ai_editor_settings[' . esc_attr( $args['id'] ) . ']" class="regular-text" aria-describedby="' . esc_attr( $description_id ) . '">';
				foreach ( AIEditor_Model_Config::get_reasoning_effort_options() as $effort_key => $effort_label ) {
					$html .= '<option value="' . esc_attr( $effort_key ) . '"' . selected( $value, $effort_key, false ) . '>' . esc_html( $effort_label ) . '</option>';
				}
				$html .= '</select>';
				$html .= '<p class="description" id="' . esc_attr( $description_id ) . '">' . esc_html( AIEditor_Model_Config::get_reasoning_effort_note() ) . '</p>';
				$html .= '<div class="aie-settings-table-wrap" role="region" aria-label="' . esc_attr__( 'Reasoning effort guidance', 'ai-editor' ) . '" tabindex="0">';
				$html .= '<table class="aie-settings-table">';
				$html .= '<caption class="screen-reader-text">' . esc_html__( 'Reasoning effort options and when to use them', 'ai-editor' ) . '</caption>';
				$html .= '<thead><tr><th scope="col">' . esc_html__( 'Effort', 'ai-editor' ) . '</th><th scope="col">' . esc_html__( 'Best for', 'ai-editor' ) . '</th></tr></thead>';
				$html .= '<tbody>';
				$html .= '<tr><th scope="row"><code>none</code></th><td>' . esc_html__( 'You want the fastest replies for simple block edits, quick insertions, or straightforward text changes.', 'ai-editor' ) . '</td></tr>';
				$html .= '<tr><th scope="row"><code>low</code></th><td>' . esc_html__( 'A little extra thinking may help the model follow your block instructions more reliably without adding much delay.', 'ai-editor' ) . '</td></tr>';
				$html .= '<tr><th scope="row"><code>medium</code></th><td>' . esc_html__( 'Your request involves bigger layout changes, multiple sections, or more careful block restructuring.', 'ai-editor' ) . '</td></tr>';
				$html .= '<tr><th scope="row"><code>high</code></th><td>' . esc_html__( 'Use only if tougher layout requests clearly improve enough to justify the extra time and token cost.', 'ai-editor' ) . '</td></tr>';
				$html .= '</tbody></table></div>';
				break;
			case 'ai_editor_theme_style_context':
				$value = '' !== $current_theme_style_context ? $current_theme_style_context : $theme_description;
				if ( '' === $current_theme_style_context && '' !== $active_theme_slug && $has_saved_theme_contexts ) {
					$html .= '<div class="notice notice-warning inline"><p>' . esc_html__( 'The active theme changed, so this field is currently using the new theme description instead of the saved style context. Review the text below and rewrite it with AI if needed.', 'ai-editor' ) . '</p></div>';
				}
				$html .= '<textarea id="' . esc_attr( $args['id'] ) . '" name="ai_editor_settings[' . esc_attr( $args['id'] ) . ']" rows="5" class="large-text code" style="width:100%;" maxlength="' . esc_attr( (string) self::THEME_STYLE_CONTEXT_MAX_LENGTH ) . '" aria-describedby="' . esc_attr( $description_id ) . '">' . esc_textarea( $value ) . '</textarea>';
				/* translators: %d: Maximum number of characters allowed. */
				$html .= '<p class="description" id="' . esc_attr( $description_id ) . '">' . esc_html__( 'Provide a short style instruction the AI can use as design direction for this theme. Until you save an edit or AI rewrite, this field uses the current theme description. Do not include preset values, token names, color hex codes, or similar raw theme data because AI Editor already provides that context.', 'ai-editor' ) . ' ' . sprintf( esc_html__( 'Maximum %d characters.', 'ai-editor' ), self::THEME_STYLE_CONTEXT_MAX_LENGTH ) . '</p>';
				$html .= '<p class="aie-theme-style-actions"><button type="button" class="button button-secondary" id="ai_editor_generate_theme_style_context">' . esc_html__( 'Rewrite With AI', 'ai-editor' ) . '</button> <button type="button" class="button button-link-delete" id="ai_editor_reset_theme_style_context">' . esc_html__( 'Reset', 'ai-editor' ) . '</button> <span id="ai_editor_theme_style_context_status" class="aie-theme-style-status" role="status" aria-live="polite" aria-atomic="true"></span></p>';
				break;
			case 'ai_editor_trim_chat_history_enabled':
				$checked = $value === '' ? '1' : $value;
				$html .= '<div class="aie-checkbox-field">';
				$html .= '<input type="checkbox" id="' . esc_attr( $args['id'] ) . '" name="ai_editor_settings[' . esc_attr( $args['id'] ) . ']" value="1" aria-describedby="' . esc_attr( $description_id ) . '"' . checked( $checked, '1', false ) . '>';
				$html .= '<p class="description" id="' . esc_attr( $description_id ) . '">' . esc_html__( 'When enabled, AI Editor sends only the configured number of most recent chat messages with each request.', 'ai-editor' ) . '</p>';
				$html .= '</div>';
				break;
			case 'ai_editor_trim_chat_history_max_messages':
				$value = $value !== '' ? $value : '50';
				$html .= '<input type="number" min="1" max="100" step="1" id="' . esc_attr( $args['id'] ) . '" name="ai_editor_settings[' . esc_attr( $args['id'] ) . ']" value="' . esc_attr( $value ) . '" class="small-text" aria-describedby="' . esc_attr( $description_id ) . '">';
				$html .= '<p class="description" id="' . esc_attr( $description_id ) . '">' . esc_html__( 'Controls how much recent chat history AI Editor remembers when continuing a conversation. Default: 50.', 'ai-editor' ) . '</p>';
				break;
		}

		$allowed_html = array(
			'a' => array(
				'href' => array(),
				'target' => array(),
				'rel' => array(),
				'aria-label' => array(),
			),
			'input' => array(
				'type' => array(),
				'id' => array(),
				'name' => array(),
				'value' => array(),
				'class' => array(),
				'min' => array(),
				'max' => array(),
				'step' => array(),
				'checked' => array(),
				'aria-describedby' => array(),
			),
			'label' => array(
				'for' => array(),
			),
			'select' => array(
				'id' => array(),
				'name' => array(),
				'class' => array(),
				'aria-describedby' => array(),
			),
			'option' => array(
				'value' => array(),
				'selected' => array(),
			),
			'p' => array(
				'class' => array(),
				'id' => array(),
			),
			'div' => array(
				'class' => array(),
				'role' => array(),
				'aria-label' => array(),
				'tabindex' => array(),
			),
			'table' => array(
				'class' => array(),
				'aria-label' => array(),
			),
			'caption' => array(
				'class' => array(),
			),
			'thead' => array(),
			'tbody' => array(),
			'tr' => array(),
			'th' => array(
				'scope' => array(),
			),
			'td' => array(),
			'strong' => array(),
			'code' => array(),
			'textarea' => array(
				'id' => array(),
				'name' => array(),
				'rows' => array(),
				'class' => array(),
				'readonly' => array(),
				'style' => array(),
				'maxlength' => array(),
				'aria-describedby' => array(),
			),
			'button' => array(
				'type' => array(),
				'class' => array(),
				'id' => array(),
			),
			'span' => array(
				'id' => array(),
				'class' => array(),
				'role' => array(),
				'aria-live' => array(),
				'aria-atomic' => array(),
			),
		);

		echo wp_kses($html, $allowed_html);

	}

	/**
	 * Get the current active theme description for settings display.
	 *
	 * @return string
	 */
	private static function get_active_theme_description() {
		if ( ! function_exists( 'wp_get_theme' ) ) {
			return '';
		}

		$theme = wp_get_theme();

		if ( ! $theme || ! method_exists( $theme, 'get' ) ) {
			return '';
		}

		return trim( preg_replace( '/\s+/', ' ', wp_strip_all_tags( (string) $theme->get( 'Description' ) ) ) );
	}

	/**
	 * Sanitize and clamp the theme style context to the supported max length.
	 *
	 * @param string $value Raw submitted value.
	 * @return string
	 */
	public static function sanitize_theme_style_context( $value ) {
		$sanitized = sanitize_textarea_field( $value );

		if ( function_exists( 'mb_substr' ) ) {
			return mb_substr( $sanitized, 0, self::THEME_STYLE_CONTEXT_MAX_LENGTH );
		}

		return substr( $sanitized, 0, self::THEME_STYLE_CONTEXT_MAX_LENGTH );
	}

	/**
	 * Return saved theme style contexts indexed by theme slug.
	 *
	 * Also folds the legacy single saved context into the map for backward compatibility.
	 *
	 * @param array $options Saved plugin options.
	 * @return array
	 */
	public static function get_saved_theme_style_contexts( $options ) {
		if ( ! is_array( $options ) ) {
			return array();
		}

		$contexts = array();

		if ( ! empty( $options['ai_editor_theme_style_contexts'] ) && is_array( $options['ai_editor_theme_style_contexts'] ) ) {
			foreach ( $options['ai_editor_theme_style_contexts'] as $theme_slug => $theme_style_context ) {
				$normalized_theme_slug = sanitize_key( (string) $theme_slug );
				$normalized_theme_style_context = self::sanitize_theme_style_context( $theme_style_context );

				if ( '' !== $normalized_theme_slug && '' !== $normalized_theme_style_context ) {
					$contexts[ $normalized_theme_slug ] = $normalized_theme_style_context;
				}
			}
		}

		$legacy_theme_slug = isset( $options['ai_editor_theme_style_context_theme_slug'] ) ? sanitize_key( (string) $options['ai_editor_theme_style_context_theme_slug'] ) : '';
		$legacy_theme_style_context = isset( $options['ai_editor_theme_style_context'] ) ? self::sanitize_theme_style_context( $options['ai_editor_theme_style_context'] ) : '';

		if ( '' !== $legacy_theme_slug && '' !== $legacy_theme_style_context && ! isset( $contexts[ $legacy_theme_slug ] ) ) {
			$contexts[ $legacy_theme_slug ] = $legacy_theme_style_context;
		}

		return $contexts;
	}

	/**
	 * Return the saved theme style context for a given theme slug.
	 *
	 * @param array       $options Saved plugin options.
	 * @param string|null $theme_slug Theme stylesheet slug. Defaults to active theme.
	 * @return string
	 */
	public static function get_saved_theme_style_context_for_slug( $options, $theme_slug = null ) {
		$contexts = self::get_saved_theme_style_contexts( $options );
		$theme_slug = null === $theme_slug ? self::get_active_theme_slug() : sanitize_key( (string) $theme_slug );

		if ( '' === $theme_slug || empty( $contexts[ $theme_slug ] ) ) {
			return '';
		}

		return $contexts[ $theme_slug ];
	}

	/**
	 * Build a compatibility checklist for the active theme.
	 *
	 * @param array $options Saved plugin options.
	 * @return array
	 */
	private static function get_theme_compatibility_report( $options ) {
		$theme = function_exists( 'wp_get_theme' ) ? wp_get_theme() : null;
		$global_settings = function_exists( 'wp_get_global_settings' ) ? wp_get_global_settings() : array();
		$report = array(
			'status'       => 'good',
			'status_label' => __( 'Ready', 'ai-editor' ),
			'summary'      => __( 'This theme is compatible with AI Editor and supports Gutenberg layouts, presets, and editor settings.', 'ai-editor' ),
			'items'        => array(),
		);

		$stylesheet_dir = ( $theme && method_exists( $theme, 'get_stylesheet_directory' ) ) ? (string) $theme->get_stylesheet_directory() : '';
		$template_dir   = ( $theme && method_exists( $theme, 'get_template_directory' ) ) ? (string) $theme->get_template_directory() : '';
		$theme_json_present = ( '' !== $stylesheet_dir && file_exists( trailingslashit( $stylesheet_dir ) . 'theme.json' ) )
			|| ( '' !== $template_dir && $template_dir !== $stylesheet_dir && file_exists( trailingslashit( $template_dir ) . 'theme.json' ) );
		$is_block_theme = function_exists( 'wp_is_block_theme' ) ? wp_is_block_theme() : false;
		$supports_editor_styles = current_theme_supports( 'editor-styles' ) || current_theme_supports( 'editor-style' );
		$supports_align_wide = current_theme_supports( 'align-wide' );
		$page_editor_enabled = function_exists( 'use_block_editor_for_post_type' ) ? use_block_editor_for_post_type( 'page' ) : false;
		$post_editor_enabled = function_exists( 'use_block_editor_for_post_type' ) ? use_block_editor_for_post_type( 'post' ) : false;
		$current_theme_style_context = self::get_saved_theme_style_context_for_slug( $options, self::get_active_theme_slug() );

		$preset_group_count = 0;
		$preset_entry_count = 0;
		$preset_paths = array(
			array( 'color', 'palette' ),
			array( 'color', 'gradients' ),
			array( 'typography', 'fontSizes' ),
			array( 'typography', 'fontFamilies' ),
			array( 'spacing', 'spacingSizes' ),
			array( 'dimensions', 'aspectRatios' ),
		);

		foreach ( $preset_paths as $preset_path ) {
			$group = $global_settings;
			foreach ( $preset_path as $path_key ) {
				if ( ! is_array( $group ) || ! isset( $group[ $path_key ] ) ) {
					$group = array();
					break;
				}
				$group = $group[ $path_key ];
			}

			if ( ! is_array( $group ) || empty( $group ) ) {
				continue;
			}

			$entries = self::flatten_theme_preset_groups( $group );
			if ( empty( $entries ) ) {
				continue;
			}

			++$preset_group_count;
			$preset_entry_count += count( $entries );
		}

		$registered_blocks = array();
		if ( class_exists( 'WP_Block_Type_Registry' ) ) {
			$registered_blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();
		}

		$custom_block_names = array();
		$has_core_blocks = false;
		foreach ( $registered_blocks as $block_name => $block_type ) {
			if ( 0 === strpos( (string) $block_name, 'core/' ) ) {
				$has_core_blocks = true;
			} else {
				$custom_block_names[] = (string) $block_name;
			}
		}

		$custom_block_count = count( $custom_block_names );
		$warning_count = 0;
		$has_hard_fail = false;

		$add_item = static function ( $status, $title, $message ) use ( &$report, &$warning_count, &$has_hard_fail ) {
			if ( 'warn' === $status ) {
				++$warning_count;
			}
			if ( 'fail' === $status ) {
				$has_hard_fail = true;
			}

			$report['items'][] = array(
				'status'  => $status,
				'title'   => $title,
				'message' => $message,
			);
		};

		if ( $is_block_theme ) {
			$add_item(
				'pass',
				__( 'Block theme support', 'ai-editor' ),
				__( 'This is a block theme. AI Editor tends to work best here because layouts, templates, and editor settings are built around Gutenberg.', 'ai-editor' )
			);
		} elseif ( $theme_json_present ) {
			$add_item(
				'pass',
				__( 'Hybrid block support', 'ai-editor' ),
				__( 'This theme includes a theme.json file, so it should still give AI Editor useful presets and editor-side design context even though it is not a full block theme.', 'ai-editor' )
			);
		} else {
			$add_item(
				'warn',
				__( 'Theme structure', 'ai-editor' ),
				__( 'No theme.json file was detected. AI Editor can still generate core blocks, but styling and layout decisions may feel less connected to the active theme.', 'ai-editor' )
			);
		}

		if ( $page_editor_enabled || $post_editor_enabled ) {
			$add_item(
				'pass',
				__( 'Gutenberg editor availability', 'ai-editor' ),
				__( 'The block editor is enabled for standard content types, so AI Editor can work in the environments it expects.', 'ai-editor' )
			);
		} else {
			$add_item(
				'fail',
				__( 'Gutenberg editor availability', 'ai-editor' ),
				__( 'The block editor does not appear to be enabled for posts or pages. AI Editor depends on Gutenberg, so this theme or site setup may limit where it can be used.', 'ai-editor' )
			);
		}

		if ( $preset_group_count >= 3 && $preset_entry_count >= 8 ) {
			$add_item(
				'pass',
				__( 'Theme presets and design tokens', 'ai-editor' ),
				sprintf(
					/* translators: 1: number of preset groups, 2: number of preset entries */
					__( 'The theme exposes %1$d preset groups and %2$d preset values through global settings. That gives AI Editor useful colors, spacing, typography, and layout hints.', 'ai-editor' ),
					$preset_group_count,
					$preset_entry_count
				)
			);
		} else {
			$add_item(
				'warn',
				__( 'Theme presets and design tokens', 'ai-editor' ),
				__( 'The theme exposes only a limited set of presets through global settings. AI Editor can still work, but generated layouts may rely more on generic core-block defaults.', 'ai-editor' )
			);
		}

		if ( $supports_editor_styles || $supports_align_wide ) {
			$editor_support_bits = array();
			if ( $supports_editor_styles ) {
				$editor_support_bits[] = __( 'editor styles', 'ai-editor' );
			}
			if ( $supports_align_wide ) {
				$editor_support_bits[] = __( 'wide alignment', 'ai-editor' );
			}

			$add_item(
				'pass',
				__( 'Editor support flags', 'ai-editor' ),
				sprintf(
					/* translators: %s: comma-separated support labels */
					__( 'The active theme supports %s, which usually makes AI-generated layouts look more natural inside the editor and on the front end.', 'ai-editor' ),
					implode( ', ', $editor_support_bits )
				)
			);
		} else {
			$add_item(
				'warn',
				__( 'Editor support flags', 'ai-editor' ),
				__( 'No editor-style or wide-alignment support was detected. Core blocks will still work, but section layouts may feel more constrained.', 'ai-editor' )
			);
		}

		if ( 0 === $custom_block_count ) {
			$add_item(
				'note',
				__( 'Custom block reminder', 'ai-editor' ),
				__( 'No custom blocks are registered. AI Editor is designed primarily around canonical core Gutenberg blocks.', 'ai-editor' )
			);
		} elseif ( $custom_block_count <= 8 ) {
			$add_item(
				'note',
				__( 'Custom block reminder', 'ai-editor' ),
				sprintf(
					/* translators: %d: number of custom blocks */
					__( '%d custom blocks are registered. AI Editor can update custom blocks after you add and select them, but custom block behavior depends on each block’s own contract.', 'ai-editor' ),
					$custom_block_count
				)
			);
		} else {
			$add_item(
				'note',
				__( 'Custom block reminder', 'ai-editor' ),
				sprintf(
					/* translators: %d: number of custom blocks */
					__( '%d custom blocks are registered. AI Editor is most predictable with core-block layouts, while custom block updates depend on each block’s own contract.', 'ai-editor' ),
					$custom_block_count
				)
			);
		}

		if ( $has_core_blocks ) {
			$add_item(
				'pass',
				__( 'Core block coverage', 'ai-editor' ),
				__( 'Core Gutenberg blocks are available, which gives AI Editor the normal building blocks it expects for inserts and edits.', 'ai-editor' )
			);
		}

		if ( '' !== $current_theme_style_context ) {
			$add_item(
				'pass',
				__( 'Saved theme direction', 'ai-editor' ),
				__( 'This theme already has a saved “Theme Style Context For AI”, so the assistant can follow a theme-specific design brief instead of relying only on the raw theme description.', 'ai-editor' )
			);
		} else {
			$add_item(
				'warn',
				__( 'Saved theme direction', 'ai-editor' ),
				__( 'No saved “Theme Style Context For AI” exists for this theme yet. AI Editor can still work, but saving a short theme-specific design brief usually improves consistency.', 'ai-editor' )
			);
		}

		if ( $has_hard_fail ) {
			$report['status'] = 'fail';
			$report['status_label'] = __( 'Not compatible in current setup', 'ai-editor' );
			$report['summary'] = __( 'AI Editor depends on Gutenberg. Until the block editor is enabled for normal content types, this theme or site setup should be treated as incompatible.', 'ai-editor' );
		} elseif ( $warning_count >= 4 ) {
			$report['status'] = 'limited';
			$report['status_label'] = __( 'Compatibility needs review', 'ai-editor' );
			$report['summary'] = __( 'AI Editor should still function, but this theme has several signals that make generated results less predictable.', 'ai-editor' );
		} elseif ( $warning_count >= 2 ) {
			$report['status'] = 'mixed';
			$report['status_label'] = __( 'Mostly compatible with caveats', 'ai-editor' );
			$report['summary'] = __( 'AI Editor should work, but a few theme-level choices may make the output less polished or more dependent on manual cleanup.', 'ai-editor' );
		}

		return $report;
	}

	/**
	 * Flatten grouped preset structures from wp_get_global_settings().
	 *
	 * @param array $items Raw preset items.
	 * @return array
	 */
	private static function flatten_theme_preset_groups( $items ) {
		if ( ! is_array( $items ) ) {
			return array();
		}

		$is_list = array_keys( $items ) === range( 0, count( $items ) - 1 );
		if ( $is_list ) {
			return $items;
		}

		$flattened = array();
		foreach ( $items as $group_items ) {
			if ( is_array( $group_items ) ) {
				$flattened = array_merge( $flattened, $group_items );
			}
		}

		return $flattened;
	}

	/**
	 * Build a plain-text preset summary from wp_get_global_settings() for AI prompts.
	 *
	 * @param array $global_settings Theme global settings.
	 * @return string
	 */
	private static function build_ai_prompt_presets_text( $global_settings ) {
		if ( ! is_array( $global_settings ) || isset( $global_settings['error'] ) ) {
			return is_array( $global_settings ) && isset( $global_settings['error'] )
				? (string) $global_settings['error']
				: 'wp_get_global_settings() is unavailable.';
		}

		$lines   = array();
		$lines[] = 'Available preset values:';
		$lines[] = '';
		$layout_widths = array();

		$colors = isset( $global_settings['color']['palette'] ) && is_array( $global_settings['color']['palette'] )
			? self::flatten_theme_preset_groups( $global_settings['color']['palette'] )
			: array();
		if ( ! empty( $colors ) ) {
			$lines[] = 'colors:';
			foreach ( $colors as $color ) {
				if ( empty( $color['slug'] ) ) {
					continue;
				}
				$label = $color['slug'];
				if ( ! empty( $color['color'] ) ) {
					$label .= ' (' . $color['color'] . ')';
				}
				$lines[] = '- ' . $label;
			}
			$lines[] = '';
		}

		$gradients = isset( $global_settings['color']['gradients'] ) && is_array( $global_settings['color']['gradients'] )
			? self::flatten_theme_preset_groups( $global_settings['color']['gradients'] )
			: array();
		if ( ! empty( $gradients ) ) {
			$lines[] = 'gradients:';
			foreach ( $gradients as $gradient ) {
				if ( empty( $gradient['slug'] ) ) {
					continue;
				}
				$label = $gradient['slug'];
				if ( ! empty( $gradient['gradient'] ) ) {
					$label .= ' (' . $gradient['gradient'] . ')';
				}
				$lines[] = '- ' . $label;
			}
			$lines[] = '';
		}

		$font_sizes = isset( $global_settings['typography']['fontSizes'] ) && is_array( $global_settings['typography']['fontSizes'] )
			? self::flatten_theme_preset_groups( $global_settings['typography']['fontSizes'] )
			: array();
		if ( ! empty( $font_sizes ) ) {
			$lines[] = 'fontSizes:';
			foreach ( $font_sizes as $font_size ) {
				if ( empty( $font_size['slug'] ) ) {
					continue;
				}
				$label = $font_size['slug'];
				if ( ! empty( $font_size['size'] ) ) {
					$label .= ' (' . $font_size['size'] . ')';
				}
				$lines[] = '- ' . $label;
			}
			$lines[] = '';
		}

		$spacing_sizes = isset( $global_settings['spacing']['spacingSizes'] ) && is_array( $global_settings['spacing']['spacingSizes'] )
			? self::flatten_theme_preset_groups( $global_settings['spacing']['spacingSizes'] )
			: array();
		if ( ! empty( $spacing_sizes ) ) {
			$lines[] = 'spacingSizes:';
			foreach ( $spacing_sizes as $spacing_size ) {
				if ( empty( $spacing_size['slug'] ) ) {
					continue;
				}
				$label = $spacing_size['slug'];
				if ( ! empty( $spacing_size['size'] ) ) {
					$label .= ' (' . $spacing_size['size'] . ')';
				}
				$lines[] = '- ' . $label;
			}
			$lines[] = '';
		}

		$aspect_ratios = isset( $global_settings['dimensions']['aspectRatios'] ) && is_array( $global_settings['dimensions']['aspectRatios'] )
			? self::flatten_theme_preset_groups( $global_settings['dimensions']['aspectRatios'] )
			: array();
		if ( ! empty( $aspect_ratios ) ) {
			$lines[] = 'aspectRatios (for images):';
			foreach ( $aspect_ratios as $aspect_ratio ) {
				if ( empty( $aspect_ratio['ratio'] ) ) {
					continue;
				}
				$lines[] = '- ' . $aspect_ratio['ratio'];
			}
			$lines[] = '';
		}

		$layout = isset( $global_settings['layout'] ) && is_array( $global_settings['layout'] )
			? $global_settings['layout']
			: array();
		if ( ! empty( $layout ) ) {
			$lines[] = 'layout:';
			foreach ( $layout as $key => $value ) {
				if ( is_scalar( $value ) ) {
					$lines[] = '- ' . $key . ': ' . $value;
				}
			}

		}

		if ( current_theme_supports( 'align-wide' ) ) {
			$layout_widths[] = 'wide align supported';
			$layout_widths[] = 'full align supported';
		}

		if ( ! empty( $layout_widths ) ) {
			$lines[] = '';
			$lines[] = 'layoutWidths:';
			foreach ( array_unique( $layout_widths ) as $layout_width ) {
				$lines[] = '- ' . $layout_width;
			}
		}

		return trim( implode( "\n", $lines ) );
	}

	/**
	 * Get the current active theme stylesheet slug.
	 *
	 * @return string
	 */
	private static function get_active_theme_slug() {
		if ( ! function_exists( 'wp_get_theme' ) ) {
			return '';
		}

		$theme = wp_get_theme();

		if ( ! $theme || ! method_exists( $theme, 'get_stylesheet' ) ) {
			return '';
		}

		return trim( (string) $theme->get_stylesheet() );
	}

	/**
	 * Callback for the settings section description.
	 */
	public static function settings_section_callback() {
		echo '';
	}

	/**
	 * Renders the settings page in the WordPress admin.
	 */
	public static function render_settings_page() {
		$options = get_option( 'ai_editor_settings', array() );
		$theme_compatibility_report = self::get_theme_compatibility_report( $options );
		$theme_compatibility_failure_count = count(
			array_filter(
				$theme_compatibility_report['items'],
				static function ( $item ) {
					return is_array( $item ) && isset( $item['status'] ) && 'fail' === $item['status'];
				}
			)
		);
		$global_settings = function_exists( 'wp_get_global_settings' ) ? wp_get_global_settings() : array( 'error' => 'wp_get_global_settings() is unavailable.' );
		$global_styles = function_exists( 'wp_get_global_styles' ) ? wp_get_global_styles() : array( 'error' => 'wp_get_global_styles() is unavailable.' );
		$global_settings_payload = isset( $global_settings['error'] )
			? $global_settings
			: array(
				'colors'       => isset( $global_settings['color']['palette'] ) ? $global_settings['color']['palette'] : array(),
				'gradients'    => isset( $global_settings['color']['gradients'] ) ? $global_settings['color']['gradients'] : array(),
				'fontSizes'    => isset( $global_settings['typography']['fontSizes'] ) ? $global_settings['typography']['fontSizes'] : array(),
				'spacingSizes' => isset( $global_settings['spacing']['spacingSizes'] ) ? $global_settings['spacing']['spacingSizes'] : array(),
				'aspectRatios' => isset( $global_settings['dimensions']['aspectRatios'] ) ? $global_settings['dimensions']['aspectRatios'] : array(),
				'layoutWidths' => array_values(
					array_filter(
						array(
							current_theme_supports( 'align-wide' ) ? 'wide align supported' : '',
							current_theme_supports( 'align-wide' ) ? 'full align supported' : '',
						)
					)
				),
				'layout'       => isset( $global_settings['layout'] ) ? $global_settings['layout'] : array(),
			);
		$global_styles_payload = isset( $global_styles['error'] )
			? $global_styles
			: array(
				'color'      => isset( $global_styles['color'] ) ? $global_styles['color'] : array(),
				'typography' => isset( $global_styles['typography'] ) ? $global_styles['typography'] : array(),
				'spacing'    => isset( $global_styles['spacing'] ) ? $global_styles['spacing'] : array(),
				'layout'     => isset( $global_styles['layout'] ) ? $global_styles['layout'] : array(),
				'blocks'     => isset( $global_styles['blocks'] ) ? $global_styles['blocks'] : array(),
			);
		$global_settings_prompt_text = self::build_ai_prompt_presets_text( $global_settings );
		?>
		<div class="wrap ai_editor-settings-page">
			<h1><?php echo esc_html__( 'AI Editor Settings', 'ai-editor' ); ?></h1>
			<section class="aie-compatibility-panel" aria-labelledby="aie_theme_compatibility_heading">
				<div class="aie-compatibility-panel__header">
					<div>
						<h2 id="aie_theme_compatibility_heading"><?php echo esc_html__( 'Theme Compatibility For AI Editor', 'ai-editor' ); ?></h2>
						<p><?php echo esc_html__( 'Review the active theme’s Gutenberg support, design presets, and editor settings used by AI Editor.', 'ai-editor' ); ?></p>
					</div>
					<div class="aie-compatibility-panel__actions">
						<?php if ( $theme_compatibility_failure_count > 0 ) : ?>
							<?php /* translators: %d: Number of theme compatibility failures. */ ?>
							<span class="aie-compatibility-panel__failure-count" aria-label="<?php echo esc_attr( sprintf( _n( '%d compatibility failure', '%d compatibility failures', $theme_compatibility_failure_count, 'ai-editor' ), $theme_compatibility_failure_count ) ); ?>">
								<?php echo esc_html( (string) $theme_compatibility_failure_count ); ?>
							</span>
						<?php endif; ?>
						<button type="button" class="button button-secondary" id="aie_toggle_theme_compatibility" aria-expanded="false" aria-controls="aie_theme_compatibility_report">
							<?php echo esc_html__( 'Show Report', 'ai-editor' ); ?>
						</button>
					</div>
				</div>
				<div class="aie-compatibility-report is-<?php echo esc_attr( $theme_compatibility_report['status'] ); ?>" id="aie_theme_compatibility_report" role="region" aria-labelledby="aie_theme_compatibility_heading" aria-describedby="aie_theme_compatibility_summary" hidden>
					<p class="aie-compatibility-report__summary" id="aie_theme_compatibility_summary"><?php echo esc_html( $theme_compatibility_report['summary'] ); ?></p>
					<div class="aie-compatibility-table-wrap" role="region" aria-label="<?php echo esc_attr__( 'Theme compatibility checks', 'ai-editor' ); ?>" tabindex="0">
					<table class="widefat striped aie-compatibility-table">
						<caption class="screen-reader-text"><?php echo esc_html__( 'Theme compatibility checks and details', 'ai-editor' ); ?></caption>
						<thead>
							<tr>
								<th scope="col"><?php echo esc_html__( 'Status', 'ai-editor' ); ?></th>
								<th scope="col"><?php echo esc_html__( 'Check', 'ai-editor' ); ?></th>
								<th scope="col"><?php echo esc_html__( 'Details', 'ai-editor' ); ?></th>
							</tr>
						</thead>
						<tbody>
							<?php foreach ( $theme_compatibility_report['items'] as $item ) : ?>
								<?php
								$item_status_label = 'pass' === $item['status']
									? __( 'Pass', 'ai-editor' )
									: ( 'fail' === $item['status'] ? __( 'Fail', 'ai-editor' ) : ( 'note' === $item['status'] ? __( 'Note', 'ai-editor' ) : __( 'Review', 'ai-editor' ) ) );
								?>
								<tr class="aie-compatibility-item is-<?php echo esc_attr( $item['status'] ); ?>">
									<td>
										<?php /* translators: %s: Compatibility item status such as Pass, Fail, Note, or Review. */ ?>
										<span class="aie-compatibility-item__badge" aria-label="<?php echo esc_attr( sprintf( __( 'Status: %s', 'ai-editor' ), $item_status_label ) ); ?>">
											<?php echo esc_html( $item_status_label ); ?>
										</span>
									</td>
									<th scope="row"><?php echo esc_html( $item['title'] ); ?></th>
									<td><?php echo esc_html( $item['message'] ); ?></td>
								</tr>
							<?php endforeach; ?>
						</tbody>
					</table>
					</div>
					<div class="aie-compatibility-report__footer">
						<span class="aie-compatibility-report__result-label"><?php echo esc_html__( 'Compatibility:', 'ai-editor' ); ?></span>
						<?php /* translators: %s: Overall theme compatibility status. */ ?>
						<span class="aie-compatibility-report__status" aria-label="<?php echo esc_attr( sprintf( __( 'Overall compatibility: %s', 'ai-editor' ), $theme_compatibility_report['status_label'] ) ); ?>"><?php echo esc_html( $theme_compatibility_report['status_label'] ); ?></span>
					</div>
				</div>
			</section>
			<h2 id="aie_editor_configuration_heading"><?php echo esc_html__( 'AI Editor Configuration', 'ai-editor' ); ?></h2>
			<form action="options.php" method="post" aria-labelledby="aie_editor_configuration_heading">
				<?php
				settings_fields( 'aie_openai_page' );
				do_settings_sections( 'aie_openai_page' );
				submit_button();
				?>
			</form>
			<?php if ( false ) : // Enable temporarily when testing/debugging theme JSON and AI prompt context output. ?>
				<div class="aie-debug-dump">
					<h2><?php echo esc_html__( 'Theme JSON Debug', 'ai-editor' ); ?></h2>
					<h3><code>wp_get_global_settings()</code> trimmed</h3>
					<pre><?php echo esc_html( wp_json_encode( $global_settings_payload, JSON_PRETTY_PRINT ) ); ?></pre>
					<h3><?php echo esc_html__( 'AI prompt text from wp_get_global_settings()', 'ai-editor' ); ?></h3>
					<pre><?php echo esc_html( $global_settings_prompt_text ); ?></pre>
					<h3><code>wp_get_global_styles()</code> trimmed</h3>
					<pre><?php echo esc_html( wp_json_encode( $global_styles_payload, JSON_PRETTY_PRINT ) ); ?></pre>
				</div>
			<?php endif; ?>

		</div>
		<style>
			.ai_editor-settings-page .aie-checkbox-field {
				display: flex;
				align-items: flex-start;
				gap: 8px;
			}

			.ai_editor-settings-page .aie-checkbox-field input[type="checkbox"] {
				flex-shrink: 0;
				margin: 2px 0 0;
			}

			.ai_editor-settings-page .aie-checkbox-field .description {
				min-width: 0;
				margin: 0;
			}

			.ai_editor-settings-page .aie-debug-dump {
				margin-top: 32px;
				max-width: 1100px;
			}

			.ai_editor-settings-page .aie-compatibility-panel {
				max-width: 1100px;
				margin: 18px 0 26px;
				border: 1px solid #c3c4c7;
				background: #fff;
				border-radius: 4px;
				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
				overflow: hidden;
			}

			.ai_editor-settings-page .aie-compatibility-panel__header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 24px;
				padding: 18px 20px;
				border-bottom: 1px solid #dcdcde;
				background: #fff;
			}

			.ai_editor-settings-page .aie-compatibility-panel__header h2 {
				margin: 0 0 6px;
				color: #1d2327;
				font-size: 15px;
				font-weight: 600;
				line-height: 1.35;
			}

			.ai_editor-settings-page .aie-compatibility-panel__header p {
				margin: 0;
				color: #646970;
				font-size: 13px;
				line-height: 1.55;
				max-width: 720px;
			}

			.ai_editor-settings-page .aie-compatibility-panel__actions {
				display: flex;
				flex: 0 0 auto;
				align-items: center;
				gap: 10px;
			}

			.ai_editor-settings-page .aie-compatibility-panel__failure-count {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				min-width: 22px;
				height: 22px;
				padding: 0 7px;
				border: 1px solid #f2c8cd;
				border-radius: 999px;
				background: #fff4f5;
				color: #8a2424;
				font-size: 12px;
				font-weight: 600;
				line-height: 1;
				white-space: nowrap;
			}

			.ai_editor-settings-page #aie_toggle_theme_compatibility {
				flex: 0 0 auto;
			}

			.ai_editor-settings-page .aie-compatibility-report {
				padding: 0;
				background: #fff;
			}

			.ai_editor-settings-page .aie-compatibility-report__summary {
				margin: 0;
				padding: 14px 16px;
				border-bottom: 1px solid #dcdcde;
				color: #1d2327;
				font-size: 13px;
				line-height: 1.5;
			}

			.ai_editor-settings-page .aie-compatibility-table-wrap {
				overflow-x: auto;
			}

			.ai_editor-settings-page .aie-compatibility-report__status {
				display: inline-flex;
				align-items: center;
				padding: 3px 9px;
				border: 1px solid #e3e6ea;
				border-radius: 999px;
				background: #fff;
				color: #1d2327;
				font-size: 12px;
				font-weight: 600;
				line-height: 1.35;
				white-space: nowrap;
			}

			.ai_editor-settings-page .aie-compatibility-report.is-good .aie-compatibility-report__status {
				border-color: #9cc9b8;
				background: #edf7f3;
				color: #185640;
			}

			.ai_editor-settings-page .aie-compatibility-report.is-mixed .aie-compatibility-report__status {
				border-color: #d8bd7a;
				background: #fbf5e7;
				color: #684a10;
			}

			.ai_editor-settings-page .aie-compatibility-report.is-limited .aie-compatibility-report__status {
				border-color: #d8a2a6;
				background: #fbefef;
				color: #713038;
			}

			.ai_editor-settings-page .aie-compatibility-report__footer {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 8px;
				padding: 12px 16px;
				border-top: 1px solid #dcdcde;
				background: #f6f7f7;
			}

			.ai_editor-settings-page .aie-compatibility-report__result-label {
				color: #50575e;
				font-size: 13px;
				font-weight: 600;
				line-height: 1.4;
			}

			.ai_editor-settings-page .aie-compatibility-report.is-fail .aie-compatibility-report__status {
				border-color: #d8a2a6;
				background: #fbefef;
				color: #713038;
			}

			.ai_editor-settings-page .aie-compatibility-item__badge {
				display: inline-flex;
				align-items: center;
				justify-content: flex-start;
				width: max-content;
				min-width: 0;
				padding: 2px 8px;
				border: 1px solid #9cc9b8;
				border-radius: 999px;
				background: #edf7f3;
				color: #185640;
				font-size: 11px;
				font-weight: 600;
				line-height: 1.35;
				text-transform: uppercase;
				letter-spacing: 0.02em;
			}

			.ai_editor-settings-page .aie-compatibility-table {
				border: 0;
				box-shadow: none;
			}

			.ai_editor-settings-page .aie-compatibility-table th,
			.ai_editor-settings-page .aie-compatibility-table td {
				padding: 12px 14px;
				color: #1d2327;
				font-size: 13px;
				line-height: 1.5;
				vertical-align: top;
			}

			.ai_editor-settings-page .aie-compatibility-table thead th {
				background: #f6f7f7;
				border-bottom: 1px solid #dcdcde;
				color: #1d2327;
				font-weight: 600;
			}

			.ai_editor-settings-page .aie-compatibility-table.striped > tbody > :nth-child(odd) {
				background-color: #fff;
			}

			.ai_editor-settings-page .aie-compatibility-table.striped > tbody > :nth-child(even) {
				background-color: #f6f7f7;
			}

			.ai_editor-settings-page .aie-compatibility-table th:first-child,
			.ai_editor-settings-page .aie-compatibility-table td:first-child {
				width: 1%;
				white-space: nowrap;
			}

			.ai_editor-settings-page .aie-compatibility-table tbody th {
				font-weight: 600;
			}

			.ai_editor-settings-page .aie-compatibility-table tbody td:last-child {
				color: #50575e;
			}

			.ai_editor-settings-page .aie-compatibility-item.is-warn .aie-compatibility-item__badge {
				border-color: #d8bd7a;
				background: #fbf5e7;
				color: #684a10;
			}

			.ai_editor-settings-page .aie-compatibility-item.is-note .aie-compatibility-item__badge {
				border-color: #c3c4c7;
				background: #f6f7f7;
				color: #50575e;
			}

			.ai_editor-settings-page .aie-compatibility-item.is-fail .aie-compatibility-item__badge {
				border-color: #d8a2a6;
				background: #fbefef;
				color: #713038;
			}

			.ai_editor-settings-page .aie-compatibility-item__content h3 {
				margin: 0 0 2px;
				color: #1d2327;
				font-size: 13px;
				font-weight: 600;
				line-height: 1.5;
			}

			.ai_editor-settings-page .aie-compatibility-item__content p {
				margin: 0;
				color: #50575e;
				font-size: 13px;
				line-height: 1.5;
			}

			@media screen and (max-width: 782px) {
				.ai_editor-settings-page .aie-compatibility-panel__header {
					display: block;
					padding: 16px;
				}

				.ai_editor-settings-page #aie_toggle_theme_compatibility {
					margin-top: 12px;
				}

				.ai_editor-settings-page .aie-compatibility-panel__actions {
					align-items: flex-start;
					flex-direction: column;
					gap: 8px;
					margin-top: 12px;
				}

				.ai_editor-settings-page .aie-compatibility-panel__actions #aie_toggle_theme_compatibility {
					margin-top: 0;
				}

				.ai_editor-settings-page .aie-compatibility-report__footer {
					justify-content: flex-start;
				}
			}

			.ai_editor-settings-page .aie-debug-dump pre {
				max-height: 360px;
				overflow: auto;
				padding: 12px;
				border: 1px solid #dcdcde;
				background: #fff;
				font-size: 12px;
				line-height: 1.45;
				white-space: pre-wrap;
				word-break: break-word;
			}

			.aie-theme-style-actions {
				margin-top: 10px;
			}

			.ai_editor-settings-page .aie-settings-table-wrap {
				max-width: 880px;
				margin-top: 12px;
				overflow-x: auto;
				border: 1px solid #dcdcde;
				border-radius: 8px;
				background: #fff;
				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
			}

			.ai_editor-settings-page .aie-compatibility-table-wrap:focus,
			.ai_editor-settings-page .aie-settings-table-wrap:focus {
				outline: 2px solid #2271b1;
				outline-offset: -2px;
			}

			.ai_editor-settings-page .aie-settings-table {
				width: 100%;
				border-collapse: collapse;
			}

			.ai_editor-settings-page .aie-settings-table th,
			.ai_editor-settings-page .aie-settings-table td {
				padding: 12px 14px;
				text-align: left;
				vertical-align: top;
				font-size: 13px;
				line-height: 1.5;
				border-bottom: 1px solid #f0f0f1;
			}

			.ai_editor-settings-page .aie-settings-table thead th {
				background: #f6f7f7;
				color: #1d2327;
				font-weight: 600;
				border-bottom: 1px solid #dcdcde;
			}

			.ai_editor-settings-page .aie-settings-table tbody th:first-child {
				width: 1%;
				white-space: nowrap;
				padding-right: 18px;
			}

			.ai_editor-settings-page .aie-settings-table th + th,
			.ai_editor-settings-page .aie-settings-table tbody th + td {
				padding-left: 16px;
			}

			.ai_editor-settings-page .aie-settings-table tbody tr:last-child th,
			.ai_editor-settings-page .aie-settings-table tbody tr:last-child td {
				border-bottom: 0;
			}

			.ai_editor-settings-page .aie-settings-table code {
				display: inline-block;
				padding: 2px 8px;
				border: 1px solid #dcdcde;
				border-radius: 999px;
				background: #f6f7f7;
				color: #1d2327;
				font-size: 12px;
				line-height: 1.4;
				font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
			}

			#ai_editor_theme_style_context_status.aie-theme-style-status {
				margin-left: 10px;
				font-size: 12px;
				font-weight: 500;
				line-height: 1.4;
				opacity: 0;
				transform: translateY(1px);
				transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
				pointer-events: none;
			}

			#ai_editor_theme_style_context_status.aie-theme-style-status.has-message {
				opacity: 1;
				transform: translateY(0);
			}

			#ai_editor_theme_style_context_status.aie-theme-style-status.is-success {
				color: #128045;
			}

			#ai_editor_theme_style_context_status.aie-theme-style-status.is-loading {
				color: #50575e;
			}

			#ai_editor_theme_style_context_status.aie-theme-style-status.is-error {
				color: #8a2424;
			}

			@media (prefers-reduced-motion: reduce) {
				#ai_editor_theme_style_context_status.aie-theme-style-status {
					transition: none;
					transform: none;
				}
			}
		</style>
		<script>
			document.addEventListener('DOMContentLoaded', function () {
				const toggle = document.getElementById('ai_editor_trim_chat_history_enabled');
				const maxMessagesInput = document.getElementById('ai_editor_trim_chat_history_max_messages');
				const generateThemeStyleButton = document.getElementById('ai_editor_generate_theme_style_context');
				const resetThemeStyleButton = document.getElementById('ai_editor_reset_theme_style_context');
				const themeStyleContextInput = document.getElementById('ai_editor_theme_style_context');
				const themeStyleContextStatus = document.getElementById('ai_editor_theme_style_context_status');
				const themeCompatibilityToggle = document.getElementById('aie_toggle_theme_compatibility');
				const themeCompatibilityReport = document.getElementById('aie_theme_compatibility_report');
				const originalThemeDescription = <?php echo wp_json_encode( self::get_active_theme_description() ); ?>;
				const restNonce = <?php echo wp_json_encode( wp_create_nonce( 'wp_rest' ) ); ?>;
				const themeStyleContextEndpoint = <?php echo wp_json_encode( rest_url( 'ai-editor/v1/settings/theme-style-context/generate' ) ); ?>;
				const showCompatibilityLabel = <?php echo wp_json_encode( esc_html__( 'Show Report', 'ai-editor' ) ); ?>;
				const hideCompatibilityLabel = <?php echo wp_json_encode( esc_html__( 'Hide Report', 'ai-editor' ) ); ?>;
				const rewriteThemeStyleLabel = <?php echo wp_json_encode( esc_html__( 'Rewrite With AI', 'ai-editor' ) ); ?>;
				const rewritingThemeStyleLabel = <?php echo wp_json_encode( esc_html__( 'Rewriting…', 'ai-editor' ) ); ?>;
				let themeStyleRequestInProgress = false;
				const setThemeStyleContextStatus = function (message, status) {
					if (!themeStyleContextStatus) {
						return;
					}

					themeStyleContextStatus.textContent = message || '';
					themeStyleContextStatus.classList.remove('has-message', 'is-success', 'is-loading', 'is-error');

					if (!message) {
						return;
					}

					themeStyleContextStatus.classList.add('has-message');

					if (status) {
						themeStyleContextStatus.classList.add(status);
					}
				};

				if (toggle && maxMessagesInput) {
					const maxMessagesRow = maxMessagesInput.closest('tr');

					if (maxMessagesRow) {
						maxMessagesRow.id = 'aie_max_messages_row';
						toggle.setAttribute('aria-controls', maxMessagesRow.id);
						const updateMaxMessagesVisibility = function () {
							maxMessagesRow.hidden = !toggle.checked;
							maxMessagesInput.disabled = !toggle.checked;
						};

						toggle.addEventListener('change', updateMaxMessagesVisibility);
						updateMaxMessagesVisibility();
					}
				}

				if (themeCompatibilityToggle && themeCompatibilityReport) {
					themeCompatibilityToggle.addEventListener('click', function () {
						const isExpanded = themeCompatibilityToggle.getAttribute('aria-expanded') === 'true';
						themeCompatibilityToggle.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
						themeCompatibilityReport.hidden = isExpanded;
						themeCompatibilityToggle.textContent = isExpanded ? showCompatibilityLabel : hideCompatibilityLabel;
					});
				}

				if (generateThemeStyleButton && themeStyleContextInput && themeStyleContextStatus) {
					generateThemeStyleButton.addEventListener('click', async function () {
						if (themeStyleRequestInProgress) {
							return;
						}

						themeStyleRequestInProgress = true;
						generateThemeStyleButton.setAttribute('aria-busy', 'true');
						generateThemeStyleButton.setAttribute('aria-disabled', 'true');
						generateThemeStyleButton.textContent = rewritingThemeStyleLabel;
						if (resetThemeStyleButton) {
							resetThemeStyleButton.disabled = true;
						}
						setThemeStyleContextStatus(<?php echo wp_json_encode( esc_html__( 'Generating…', 'ai-editor' ) ); ?>, 'is-loading');

						try {
							const response = await fetch(themeStyleContextEndpoint, {
								method: 'POST',
								headers: {
									'Content-Type': 'application/json',
									'X-WP-Nonce': restNonce,
								},
								body: JSON.stringify({
									theme_description: originalThemeDescription || '',
								}),
							});

							const data = await response.json();

							if (!response.ok || data?.error || !data?.theme_style_context) {
								throw new Error(data?.message || <?php echo wp_json_encode( esc_html__( 'Failed to generate theme style context.', 'ai-editor' ) ); ?>);
							}

							themeStyleContextInput.value = data.theme_style_context;
							setThemeStyleContextStatus(<?php echo wp_json_encode( esc_html__( 'Theme style context updated. Save changes to keep it.', 'ai-editor' ) ); ?>, 'is-success');
						} catch (error) {
							setThemeStyleContextStatus(error?.message || <?php echo wp_json_encode( esc_html__( 'Failed to generate theme style context.', 'ai-editor' ) ); ?>, 'is-error');
						} finally {
							themeStyleRequestInProgress = false;
							generateThemeStyleButton.removeAttribute('aria-busy');
							generateThemeStyleButton.removeAttribute('aria-disabled');
							generateThemeStyleButton.textContent = rewriteThemeStyleLabel;
							if (resetThemeStyleButton) {
								resetThemeStyleButton.disabled = false;
							}
						}
					});
				}

				if (resetThemeStyleButton && themeStyleContextInput) {
					resetThemeStyleButton.addEventListener('click', function () {
						themeStyleContextInput.value = originalThemeDescription || '';
						setThemeStyleContextStatus(<?php echo wp_json_encode( esc_html__( 'Theme style context reset. Save changes to keep it.', 'ai-editor' ) ); ?>, 'is-success');
					});
				}
			});
		</script>
		<?php
	}
}

AIEditor_Settings_Page::init();