<?php
/**
 * Appearance settings view for Agentorie Chat.
 *
 * @package    Agentorie_Chat
 * @subpackage Agentorie_Chat/admin/views
 * @since      1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Current appearance settings with defaults.
$agentorie_settings = array(
	// Bot Identity.
	'bot_name'             => agentorie_chat_get_setting( 'bot_name', 'Stella' ),
	'bot_subtitle'         => agentorie_chat_get_setting( 'bot_subtitle', __( 'Virtual Assistant', 'agentorie-chat' ) ),
	'bot_avatar'           => agentorie_chat_get_setting( 'bot_avatar', '🤖' ),
	'availability_text'    => agentorie_chat_get_setting( 'availability_text', __( 'Available 24/7', 'agentorie-chat' ) ),
	'welcome_title'        => agentorie_chat_get_setting( 'welcome_title', __( 'Hello 👋', 'agentorie-chat' ) ),
	'welcome_message'      => agentorie_chat_get_setting( 'welcome_message', __( 'I am here to answer your questions.', 'agentorie-chat' ) ),
	'welcome_font_weight'  => agentorie_chat_get_setting( 'welcome_font_weight', '600' ),

	// Input Placeholders.
	'input_placeholder'    => agentorie_chat_get_setting( 'input_placeholder', __( 'Type your message...', 'agentorie-chat' ) ),
	'voice_placeholder'    => agentorie_chat_get_setting( 'voice_placeholder', __( 'Speak or write your message...', 'agentorie-chat' ) ),
	'lang_selector_title'  => agentorie_chat_get_setting( 'lang_selector_title', __( 'Select your language', 'agentorie-chat' ) ),

	// Voice Features.
	'speech_to_text'       => agentorie_chat_get_setting( 'speech_to_text', false ),
	'text_to_speech'       => agentorie_chat_get_setting( 'text_to_speech', false ),

	// Colors.
	'primary_color'        => agentorie_chat_get_setting( 'primary_color', '#6366f1' ),
	'primary_text_color'   => agentorie_chat_get_setting( 'primary_text_color', '#ffffff' ),
	'user_bubble_color'    => agentorie_chat_get_setting( 'user_bubble_color', '#e5e7eb' ),
	'user_text_color'      => agentorie_chat_get_setting( 'user_text_color', '#1f2937' ),
	'bot_bubble_color'     => agentorie_chat_get_setting( 'bot_bubble_color', '#f3f4f6' ),
	'bot_text_color'       => agentorie_chat_get_setting( 'bot_text_color', '#1f2937' ),
	'background_color'     => agentorie_chat_get_setting( 'background_color', '#ffffff' ),

	// Button.
	'button_size'          => agentorie_chat_get_setting( 'button_size', 'medium' ),
	'button_icon'          => agentorie_chat_get_setting( 'button_icon', '💬' ),
	'button_style'         => agentorie_chat_get_setting( 'button_style', 'solid' ),
	'button_pulse'         => agentorie_chat_get_setting( 'button_pulse', true ),

	// Chat window.
	'chat_width'           => agentorie_chat_get_setting( 'chat_width', '380' ),
	'chat_height'          => agentorie_chat_get_setting( 'chat_height', '550' ),
	'border_radius'        => agentorie_chat_get_setting( 'border_radius', '16' ),
	'shadow_style'         => agentorie_chat_get_setting( 'shadow_style', 'medium' ),

	// Header.
	'header_style'         => agentorie_chat_get_setting( 'header_style', 'solid' ),
	'header_effect'        => agentorie_chat_get_setting( 'header_effect', 'none' ),
	'show_header_avatar'   => agentorie_chat_get_setting( 'show_header_avatar', true ),

	// Button effects.
	'button_effect'        => agentorie_chat_get_setting( 'button_effect', 'none' ),
	'button_animation'     => agentorie_chat_get_setting( 'button_animation', 'pulse' ),
	'button_margin_bottom' => agentorie_chat_get_setting( 'button_margin_bottom', '20' ),

	// Messages.
	'show_client_avatar'   => agentorie_chat_get_setting( 'show_client_avatar', false ),
	'client_avatar'        => agentorie_chat_get_setting( 'client_avatar', '👤' ),

	// Language selector.
	'show_lang_selector'   => agentorie_chat_get_setting( 'show_lang_selector', true ),
);

// Check if license has multiple languages (for language selector preview).
$agentorie_features            = agentorie_chat_get_setting( 'license_features', array() );
$agentorie_default_language    = agentorie_chat_get_setting( 'default_language', 'en-US' );
$agentorie_has_multi_languages = false;

// Count authorized languages from pack (active_languages) or legacy features.
$agentorie_lang_count   = 1; // default language always counts.
$agentorie_active_langs = agentorie_chat_get_setting( 'active_languages', array() );
if ( is_array( $agentorie_active_langs ) && ! empty( $agentorie_active_langs ) ) {
	$agentorie_lang_count += count( $agentorie_active_langs );
} else {
	foreach ( $agentorie_features as $agentorie_feature ) {
		if ( is_string( $agentorie_feature ) && 0 === strpos( $agentorie_feature, 'lang_' ) && 0 !== strpos( $agentorie_feature, 'lang_pack_' ) ) {
			++$agentorie_lang_count;
		}
	}
}
$agentorie_demo_lang = agentorie_chat_get_setting( 'demo_lang_active', false );
if ( $agentorie_demo_lang ) {
	++$agentorie_lang_count;
}
$agentorie_has_multi_languages = ( $agentorie_lang_count > 1 );

// Presets.
$agentorie_presets = array(
	'default'   => array(
		'label'              => __( 'Modern Indigo', 'agentorie-chat' ),
		'primary_color'      => '#6366f1',
		'primary_text_color' => '#ffffff',
		'user_bubble_color'  => '#6366f1',
		'user_text_color'    => '#ffffff',
		'bot_bubble_color'   => '#f3f4f6',
		'bot_text_color'     => '#1f2937',
		'background_color'   => '#ffffff',
	),
	'corporate' => array(
		'label'              => __( 'Corporate Blue', 'agentorie-chat' ),
		'primary_color'      => '#1e40af',
		'primary_text_color' => '#ffffff',
		'user_bubble_color'  => '#1e40af',
		'user_text_color'    => '#ffffff',
		'bot_bubble_color'   => '#e5e7eb',
		'bot_text_color'     => '#111827',
		'background_color'   => '#f9fafb',
	),
	'nature'    => array(
		'label'              => __( 'Nature Green', 'agentorie-chat' ),
		'primary_color'      => '#059669',
		'primary_text_color' => '#ffffff',
		'user_bubble_color'  => '#059669',
		'user_text_color'    => '#ffffff',
		'bot_bubble_color'   => '#ecfdf5',
		'bot_text_color'     => '#064e3b',
		'background_color'   => '#ffffff',
	),
	'sunset'    => array(
		'label'              => __( 'Sunset Orange', 'agentorie-chat' ),
		'primary_color'      => '#ea580c',
		'primary_text_color' => '#ffffff',
		'user_bubble_color'  => '#ea580c',
		'user_text_color'    => '#ffffff',
		'bot_bubble_color'   => '#fff7ed',
		'bot_text_color'     => '#7c2d12',
		'background_color'   => '#ffffff',
	),
	'dark'      => array(
		'label'              => __( 'Dark Mode', 'agentorie-chat' ),
		'primary_color'      => '#8b5cf6',
		'primary_text_color' => '#ffffff',
		'user_bubble_color'  => '#8b5cf6',
		'user_text_color'    => '#ffffff',
		'bot_bubble_color'   => '#374151',
		'bot_text_color'     => '#f3f4f6',
		'background_color'   => '#1f2937',
	),
	'minimal'   => array(
		'label'              => __( 'Minimal Gray', 'agentorie-chat' ),
		'primary_color'      => '#374151',
		'primary_text_color' => '#ffffff',
		'user_bubble_color'  => '#374151',
		'user_text_color'    => '#ffffff',
		'bot_bubble_color'   => '#f3f4f6',
		'bot_text_color'     => '#1f2937',
		'background_color'   => '#ffffff',
	),
	'rosegold'  => array(
		'label'              => __( 'Rose Gold', 'agentorie-chat' ),
		'primary_color'      => '#e11d48',
		'primary_text_color' => '#ffffff',
		'user_bubble_color'  => '#e11d48',
		'user_text_color'    => '#ffffff',
		'bot_bubble_color'   => '#fff1f2',
		'bot_text_color'     => '#881337',
		'background_color'   => '#ffffff',
	),
	'ocean'     => array(
		'label'              => __( 'Ocean Teal', 'agentorie-chat' ),
		'primary_color'      => '#0891b2',
		'primary_text_color' => '#ffffff',
		'user_bubble_color'  => '#0891b2',
		'user_text_color'    => '#ffffff',
		'bot_bubble_color'   => '#ecfeff',
		'bot_text_color'     => '#164e63',
		'background_color'   => '#ffffff',
	),
);
?>

<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" id="appearance-form">
	<?php wp_nonce_field( 'agentorie_chat_save_settings', 'agentorie_chat_settings_nonce' ); ?>
	<input type="hidden" name="action" value="agentorie_chat_save_settings">
	<input type="hidden" name="section" value="appearance">

	<div class="appearance-layout">

		<!-- ============================================================
			LEFT COLUMN — Settings panels
			============================================================ -->
		<div class="appearance-settings">

			<!-- Bot Identity -->
			<div class="agentorie-card">
				<div class="card-header">
					<h2><span class="dashicons dashicons-admin-users"></span> <?php esc_html_e( 'Bot Identity', 'agentorie-chat' ); ?></h2>
				</div>
				<div class="card-body">
					<div class="identity-grid">
						<div class="identity-field">
							<label for="bot_name"><?php esc_html_e( 'Bot Name', 'agentorie-chat' ); ?></label>
							<input type="text" name="bot_name" id="bot_name" value="<?php echo esc_attr( $agentorie_settings['bot_name'] ); ?>" class="regular-text" maxlength="50">
							<p class="description"><?php esc_html_e( 'Displayed in the chat header.', 'agentorie-chat' ); ?></p>
						</div>
						<div class="identity-field">
							<label for="bot_subtitle"><?php esc_html_e( 'Subtitle', 'agentorie-chat' ); ?></label>
							<input type="text" name="bot_subtitle" id="bot_subtitle" value="<?php echo esc_attr( $agentorie_settings['bot_subtitle'] ); ?>" class="regular-text" maxlength="50">
							<p class="description"><?php esc_html_e( 'E.g. "Virtual Assistant", "Online".', 'agentorie-chat' ); ?></p>
						</div>
						<div class="identity-field">
							<label for="availability_text"><?php esc_html_e( 'Availability', 'agentorie-chat' ); ?></label>
							<input type="text" name="availability_text" id="availability_text" value="<?php echo esc_attr( $agentorie_settings['availability_text'] ); ?>" class="regular-text" maxlength="50">
							<p class="description"><?php esc_html_e( 'Status text (e.g. "Available 24/7").', 'agentorie-chat' ); ?></p>
						</div>
						<div class="identity-field">
							<label><?php esc_html_e( 'Avatar', 'agentorie-chat' ); ?></label>
							<div class="icon-selector" id="bot-avatar-selector">
								<?php
								$agentorie_bot_icons = array( '🤖', '💬', '🎯', '⭐', '🚀', '💡', '🎧', '👋' );
								foreach ( $agentorie_bot_icons as $agentorie_icon ) :
									?>
								<label class="icon-option <?php echo esc_attr( $agentorie_icon === $agentorie_settings['bot_avatar'] ? 'active' : '' ); ?>">
									<input type="radio" name="bot_avatar" value="<?php echo esc_attr( $agentorie_icon ); ?>" <?php checked( $agentorie_settings['bot_avatar'], $agentorie_icon ); ?>>
									<span><?php echo esc_html( $agentorie_icon ); ?></span>
								</label>
								<?php endforeach; ?>
							</div>
							<p class="description"><?php esc_html_e( 'Or enter custom emoji/letter:', 'agentorie-chat' ); ?></p>
							<input type="text" name="bot_avatar_custom" id="bot_avatar_custom" class="small-text" maxlength="4" placeholder="S" value="<?php echo esc_attr( ! in_array( $agentorie_settings['bot_avatar'], $agentorie_bot_icons, true ) ? $agentorie_settings['bot_avatar'] : '' ); ?>">
						</div>
					</div>

					<div class="identity-welcome-section">
						<div class="identity-field">
							<label for="welcome_title"><?php esc_html_e( 'Welcome Title', 'agentorie-chat' ); ?></label>
							<input type="text" name="welcome_title" id="welcome_title" value="<?php echo esc_attr( $agentorie_settings['welcome_title'] ); ?>" class="regular-text" maxlength="100">
							<p class="description"><?php esc_html_e( 'Title in the welcome bubble (e.g. "Hello 👋").', 'agentorie-chat' ); ?></p>
						</div>
						<div class="identity-field">
							<label for="welcome_message"><?php esc_html_e( 'Welcome Message', 'agentorie-chat' ); ?></label>
							<textarea name="welcome_message" id="welcome_message" rows="2" class="large-text" maxlength="200"><?php echo esc_textarea( $agentorie_settings['welcome_message'] ); ?></textarea>
							<p class="description"><?php esc_html_e( 'Message shown below the welcome title.', 'agentorie-chat' ); ?></p>
						</div>
						<div class="identity-field">
							<label for="welcome_font_weight"><?php esc_html_e( 'Welcome Font Weight', 'agentorie-chat' ); ?></label>
							<select name="welcome_font_weight" id="welcome_font_weight">
								<?php
								$agentorie_weights = array(
									'300' => __( '300 — Light', 'agentorie-chat' ),
									'400' => __( '400 — Regular', 'agentorie-chat' ),
									'500' => __( '500 — Medium', 'agentorie-chat' ),
									'600' => __( '600 — Semi-bold', 'agentorie-chat' ),
									'700' => __( '700 — Bold', 'agentorie-chat' ),
									'800' => __( '800 — Extra-bold', 'agentorie-chat' ),
									'900' => __( '900 — Black', 'agentorie-chat' ),
								);
								foreach ( $agentorie_weights as $agentorie_w_val => $agentorie_w_lbl ) :
									?>
								<option value="<?php echo esc_attr( $agentorie_w_val ); ?>" <?php selected( $agentorie_settings['welcome_font_weight'], $agentorie_w_val ); ?>><?php echo esc_html( $agentorie_w_lbl ); ?></option>
								<?php endforeach; ?>
							</select>
							<p class="description"><?php esc_html_e( 'Font weight for the welcome title and message.', 'agentorie-chat' ); ?></p>
						</div>
					</div>

					<!-- Input Placeholders -->
					<div class="identity-welcome-section">
						<div class="identity-field">
							<label for="input_placeholder"><?php esc_html_e( 'Input Placeholder', 'agentorie-chat' ); ?></label>
							<input type="text" name="input_placeholder" id="input_placeholder" value="<?php echo esc_attr( $agentorie_settings['input_placeholder'] ); ?>" class="regular-text" maxlength="50">
							<p class="description"><?php esc_html_e( 'Placeholder text in the message input field.', 'agentorie-chat' ); ?></p>
						</div>
						<div class="identity-field">
							<label for="voice_placeholder"><?php esc_html_e( 'Voice Placeholder', 'agentorie-chat' ); ?></label>
							<input type="text" name="voice_placeholder" id="voice_placeholder" value="<?php echo esc_attr( $agentorie_settings['voice_placeholder'] ); ?>" class="regular-text" maxlength="50">
							<p class="description"><?php esc_html_e( 'Used when Speech-to-Text is enabled.', 'agentorie-chat' ); ?></p>
						</div>
						<div class="identity-field">
							<label for="lang_selector_title"><?php esc_html_e( 'Language Selector Title', 'agentorie-chat' ); ?></label>
							<input type="text" name="lang_selector_title" id="lang_selector_title" value="<?php echo esc_attr( $agentorie_settings['lang_selector_title'] ); ?>" class="regular-text" maxlength="50">
							<p class="description"><?php esc_html_e( 'Shown above the language selector when multiple languages are available.', 'agentorie-chat' ); ?></p>
						</div>
					</div>
				</div>
			</div>

			<!-- Theme Presets -->
			<div class="agentorie-card">
				<div class="card-header">
					<h2><span class="dashicons dashicons-art"></span> <?php esc_html_e( 'Theme Presets', 'agentorie-chat' ); ?></h2>
				</div>
				<div class="card-body">
					<p class="description"><?php esc_html_e( 'Quick start with a pre-designed theme, then customize.', 'agentorie-chat' ); ?></p>
					<div class="preset-grid">
						<?php foreach ( $agentorie_presets as $agentorie_preset_id => $agentorie_preset ) : ?>
						<button type="button" class="preset-button" data-preset="<?php echo esc_attr( $agentorie_preset_id ); ?>" data-colors="<?php echo esc_attr( wp_json_encode( $agentorie_preset ) ); ?>">
							<span class="preset-swatch" style="background: <?php echo esc_attr( $agentorie_preset['primary_color'] ); ?>;"></span>
							<span class="preset-label"><?php echo esc_html( $agentorie_preset['label'] ); ?></span>
						</button>
						<?php endforeach; ?>
					</div>
				</div>
			</div>

			<!-- Colors -->
			<div class="agentorie-card">
				<div class="card-header">
					<h2><span class="dashicons dashicons-admin-customizer"></span> <?php esc_html_e( 'Colors', 'agentorie-chat' ); ?></h2>
				</div>
				<div class="card-body">
					<div class="color-grid">
						<div class="color-group">
							<h4><?php esc_html_e( 'Brand', 'agentorie-chat' ); ?></h4>
							<div class="color-field">
								<label for="primary_color"><?php esc_html_e( 'Primary', 'agentorie-chat' ); ?></label>
								<div class="color-input-wrapper">
									<input type="color" id="primary_color" name="primary_color" value="<?php echo esc_attr( $agentorie_settings['primary_color'] ); ?>">
									<input type="text" class="color-hex" value="<?php echo esc_attr( $agentorie_settings['primary_color'] ); ?>" maxlength="7" pattern="^#[0-9A-Fa-f]{6}$">
								</div>
								<p class="description"><?php esc_html_e( 'Header, buttons, accents', 'agentorie-chat' ); ?></p>
							</div>
							<div class="color-field">
								<label for="primary_text_color"><?php esc_html_e( 'Primary Text', 'agentorie-chat' ); ?></label>
								<div class="color-input-wrapper">
									<input type="color" id="primary_text_color" name="primary_text_color" value="<?php echo esc_attr( $agentorie_settings['primary_text_color'] ); ?>">
									<input type="text" class="color-hex" value="<?php echo esc_attr( $agentorie_settings['primary_text_color'] ); ?>" maxlength="7" pattern="^#[0-9A-Fa-f]{6}$">
								</div>
							</div>
						</div>
						<div class="color-group">
							<h4><?php esc_html_e( 'User Messages', 'agentorie-chat' ); ?></h4>
							<div class="color-field">
								<label for="user_bubble_color"><?php esc_html_e( 'Bubble', 'agentorie-chat' ); ?></label>
								<div class="color-input-wrapper">
									<input type="color" id="user_bubble_color" name="user_bubble_color" value="<?php echo esc_attr( $agentorie_settings['user_bubble_color'] ); ?>">
									<input type="text" class="color-hex" value="<?php echo esc_attr( $agentorie_settings['user_bubble_color'] ); ?>" maxlength="7" pattern="^#[0-9A-Fa-f]{6}$">
								</div>
							</div>
							<div class="color-field">
								<label for="user_text_color"><?php esc_html_e( 'Text', 'agentorie-chat' ); ?></label>
								<div class="color-input-wrapper">
									<input type="color" id="user_text_color" name="user_text_color" value="<?php echo esc_attr( $agentorie_settings['user_text_color'] ); ?>">
									<input type="text" class="color-hex" value="<?php echo esc_attr( $agentorie_settings['user_text_color'] ); ?>" maxlength="7" pattern="^#[0-9A-Fa-f]{6}$">
								</div>
							</div>
						</div>
						<div class="color-group">
							<h4><?php esc_html_e( 'Bot Messages', 'agentorie-chat' ); ?></h4>
							<div class="color-field">
								<label for="bot_bubble_color"><?php esc_html_e( 'Bubble', 'agentorie-chat' ); ?></label>
								<div class="color-input-wrapper">
									<input type="color" id="bot_bubble_color" name="bot_bubble_color" value="<?php echo esc_attr( $agentorie_settings['bot_bubble_color'] ); ?>">
									<input type="text" class="color-hex" value="<?php echo esc_attr( $agentorie_settings['bot_bubble_color'] ); ?>" maxlength="7" pattern="^#[0-9A-Fa-f]{6}$">
								</div>
							</div>
							<div class="color-field">
								<label for="bot_text_color"><?php esc_html_e( 'Text', 'agentorie-chat' ); ?></label>
								<div class="color-input-wrapper">
									<input type="color" id="bot_text_color" name="bot_text_color" value="<?php echo esc_attr( $agentorie_settings['bot_text_color'] ); ?>">
									<input type="text" class="color-hex" value="<?php echo esc_attr( $agentorie_settings['bot_text_color'] ); ?>" maxlength="7" pattern="^#[0-9A-Fa-f]{6}$">
								</div>
							</div>
						</div>
						<div class="color-group">
							<h4><?php esc_html_e( 'Background', 'agentorie-chat' ); ?></h4>
							<div class="color-field">
								<label for="background_color"><?php esc_html_e( 'Chat Background', 'agentorie-chat' ); ?></label>
								<div class="color-input-wrapper">
									<input type="color" id="background_color" name="background_color" value="<?php echo esc_attr( $agentorie_settings['background_color'] ); ?>">
									<input type="text" class="color-hex" value="<?php echo esc_attr( $agentorie_settings['background_color'] ); ?>" maxlength="7" pattern="^#[0-9A-Fa-f]{6}$">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Chat Button -->
			<div class="agentorie-card">
				<div class="card-header">
					<h2><span class="dashicons dashicons-button"></span> <?php esc_html_e( 'Chat Button', 'agentorie-chat' ); ?></h2>
				</div>
				<div class="card-body">
					<div class="btn-settings-grid">
						<div class="btn-setting">
							<label><?php esc_html_e( 'Size', 'agentorie-chat' ); ?></label>
							<div class="button-group button-group-row">
								<?php
								$agentorie_sizes = array(
									'small'  => array( 'Small', '50px' ),
									'medium' => array( 'Medium', '60px' ),
									'large'  => array( 'Large', '70px' ),
								);
								foreach ( $agentorie_sizes as $agentorie_val => $agentorie_lbl ) :
									?>
								<label class="button-option-sm <?php echo esc_attr( $agentorie_val === $agentorie_settings['button_size'] ? 'active' : '' ); ?>">
									<input type="radio" name="button_size" value="<?php echo esc_attr( $agentorie_val ); ?>" <?php checked( $agentorie_settings['button_size'], $agentorie_val ); ?>>
									<span><?php echo esc_html( $agentorie_lbl[0] ); ?></span>
									<small><?php echo esc_html( $agentorie_lbl[1] ); ?></small>
								</label>
								<?php endforeach; ?>
							</div>
						</div>
						<div class="btn-setting">
							<label><?php esc_html_e( 'Style', 'agentorie-chat' ); ?></label>
							<div class="button-group button-group-row">
								<?php
								$agentorie_styles = array(
									'solid'    => 'Solid',
									'gradient' => 'Gradient',
									'outline'  => 'Outline',
								);
								foreach ( $agentorie_styles as $agentorie_val => $agentorie_lbl ) :
									?>
								<label class="button-option-sm <?php echo esc_attr( $agentorie_val === $agentorie_settings['button_style'] ? 'active' : '' ); ?>">
									<input type="radio" name="button_style" value="<?php echo esc_attr( $agentorie_val ); ?>" <?php checked( $agentorie_settings['button_style'], $agentorie_val ); ?>>
									<span><?php echo esc_html( $agentorie_lbl ); ?></span>
								</label>
								<?php endforeach; ?>
							</div>
						</div>
						<div class="btn-setting">
							<label><?php esc_html_e( 'Effect', 'agentorie-chat' ); ?></label>
							<div class="button-group button-group-row">
								<?php
								$agentorie_effects = array(
									'none'          => __( 'None', 'agentorie-chat' ),
									'glossy'        => __( 'Glossy', 'agentorie-chat' ),
									'radiant'       => __( 'Radiant', 'agentorie-chat' ),
									'glassmorphism' => __( 'Glass', 'agentorie-chat' ),
								);
								foreach ( $agentorie_effects as $agentorie_val => $agentorie_lbl ) :
									?>
								<label class="button-option-sm <?php echo esc_attr( $agentorie_val === $agentorie_settings['button_effect'] ? 'active' : '' ); ?>">
									<input type="radio" name="button_effect" value="<?php echo esc_attr( $agentorie_val ); ?>" <?php checked( $agentorie_settings['button_effect'], $agentorie_val ); ?>>
									<span><?php echo esc_html( $agentorie_lbl ); ?></span>
								</label>
								<?php endforeach; ?>
							</div>
						</div>
						<div class="btn-setting">
							<label><?php esc_html_e( 'Animation', 'agentorie-chat' ); ?></label>
							<div class="button-group button-group-row">
								<?php
								$agentorie_anims = array(
									'none'   => __( 'None', 'agentorie-chat' ),
									'pulse'  => __( 'Pulse', 'agentorie-chat' ),
									'bounce' => __( 'Bounce', 'agentorie-chat' ),
									'shake'  => __( 'Shake', 'agentorie-chat' ),
									'rotate' => __( 'Rotate', 'agentorie-chat' ),
								);
								foreach ( $agentorie_anims as $agentorie_val => $agentorie_lbl ) :
									?>
								<label class="button-option-sm <?php echo esc_attr( $agentorie_val === $agentorie_settings['button_animation'] ? 'active' : '' ); ?>">
									<input type="radio" name="button_animation" value="<?php echo esc_attr( $agentorie_val ); ?>" <?php checked( $agentorie_settings['button_animation'], $agentorie_val ); ?>>
									<span><?php echo esc_html( $agentorie_lbl ); ?></span>
								</label>
								<?php endforeach; ?>
							</div>
						</div>
					</div>

					<div class="btn-extras">
						<div class="btn-extra-row">
							<label><?php esc_html_e( 'Icon', 'agentorie-chat' ); ?></label>
							<div class="icon-selector">
								<?php
								$agentorie_icons = array( '💬', '🗨️', '💭', '✉️', '👋', '🤖', '💡', '❓', '🎯', '⚡' );
								foreach ( $agentorie_icons as $agentorie_icon ) :
									?>
								<label class="icon-option <?php echo esc_attr( $agentorie_icon === $agentorie_settings['button_icon'] ? 'active' : '' ); ?>">
									<input type="radio" name="button_icon" value="<?php echo esc_attr( $agentorie_icon ); ?>" <?php checked( $agentorie_settings['button_icon'], $agentorie_icon ); ?>>
									<span><?php echo esc_html( $agentorie_icon ); ?></span>
								</label>
								<?php endforeach; ?>
							</div>
							<p class="description"><?php esc_html_e( 'Or enter custom emoji/letter:', 'agentorie-chat' ); ?></p>
							<input type="text" name="button_icon_custom" class="small-text" maxlength="4" placeholder="🚀" value="<?php echo esc_attr( ! in_array( $agentorie_settings['button_icon'], $agentorie_icons, true ) ? $agentorie_settings['button_icon'] : '' ); ?>">
						</div>
						<div class="btn-extra-row">
							<label for="button_margin_bottom"><?php esc_html_e( 'Bottom Margin', 'agentorie-chat' ); ?></label>
							<select name="button_margin_bottom" id="button_margin_bottom">
								<?php
								$agentorie_margins = array( '0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100' );
								foreach ( $agentorie_margins as $agentorie_m ) :
									?>
								<option value="<?php echo esc_attr( $agentorie_m ); ?>" <?php selected( $agentorie_settings['button_margin_bottom'], $agentorie_m ); ?>><?php echo esc_html( $agentorie_m . 'px' ); ?></option>
								<?php endforeach; ?>
							</select>
							<p class="description"><?php esc_html_e( 'Adjust if the button overlaps page elements.', 'agentorie-chat' ); ?></p>
						</div>
					</div>
				</div>
			</div>

			<!-- Chat Window -->
			<div class="agentorie-card">
				<div class="card-header">
					<h2><span class="dashicons dashicons-welcome-widgets-menus"></span> <?php esc_html_e( 'Chat Window', 'agentorie-chat' ); ?></h2>
				</div>
				<div class="card-body">
					<div class="window-grid">
						<div class="window-col">
							<div class="window-field">
								<label><?php esc_html_e( 'Width', 'agentorie-chat' ); ?></label>
								<select name="chat_width">
									<option value="350" <?php selected( $agentorie_settings['chat_width'], '350' ); ?>>350px</option>
									<option value="380" <?php selected( $agentorie_settings['chat_width'], '380' ); ?>>380px</option>
									<option value="420" <?php selected( $agentorie_settings['chat_width'], '420' ); ?>>420px</option>
									<option value="450" <?php selected( $agentorie_settings['chat_width'], '450' ); ?>>450px</option>
								</select>
							</div>
							<div class="window-field">
								<label><?php esc_html_e( 'Height', 'agentorie-chat' ); ?></label>
								<select name="chat_height">
									<option value="500" <?php selected( $agentorie_settings['chat_height'], '500' ); ?>>500px</option>
									<option value="550" <?php selected( $agentorie_settings['chat_height'], '550' ); ?>>550px</option>
									<option value="600" <?php selected( $agentorie_settings['chat_height'], '600' ); ?>>600px</option>
									<option value="650" <?php selected( $agentorie_settings['chat_height'], '650' ); ?>>650px</option>
									<option value="70vh" <?php selected( $agentorie_settings['chat_height'], '70vh' ); ?>>70% viewport</option>
								</select>
							</div>
							<div class="window-field">
								<label><?php esc_html_e( 'Border Radius', 'agentorie-chat' ); ?></label>
								<div class="button-group button-group-row">
									<?php
									$agentorie_radii = array(
										'8'  => '8',
										'12' => '12',
										'16' => '16',
										'20' => '20',
										'24' => '24',
									);
									foreach ( $agentorie_radii as $agentorie_val => $agentorie_lbl ) :
										?>
									<label class="button-option-sm <?php echo esc_attr( $agentorie_val === $agentorie_settings['border_radius'] ? 'active' : '' ); ?>">
										<input type="radio" name="border_radius" value="<?php echo esc_attr( $agentorie_val ); ?>" <?php checked( $agentorie_settings['border_radius'], $agentorie_val ); ?>>
										<span><?php echo esc_html( $agentorie_lbl . 'px' ); ?></span>
									</label>
									<?php endforeach; ?>
								</div>
							</div>
							<div class="window-field">
								<label><?php esc_html_e( 'Shadow', 'agentorie-chat' ); ?></label>
								<div class="button-group button-group-row">
									<?php
									$agentorie_shadows = array(
										'none'   => __( 'None', 'agentorie-chat' ),
										'light'  => __( 'Light', 'agentorie-chat' ),
										'medium' => __( 'Medium', 'agentorie-chat' ),
										'strong' => __( 'Strong', 'agentorie-chat' ),
									);
									foreach ( $agentorie_shadows as $agentorie_val => $agentorie_lbl ) :
										?>
									<label class="button-option-sm <?php echo esc_attr( $agentorie_val === $agentorie_settings['shadow_style'] ? 'active' : '' ); ?>">
										<input type="radio" name="shadow_style" value="<?php echo esc_attr( $agentorie_val ); ?>" <?php checked( $agentorie_settings['shadow_style'], $agentorie_val ); ?>>
										<span><?php echo esc_html( $agentorie_lbl ); ?></span>
									</label>
									<?php endforeach; ?>
								</div>
							</div>
						</div>
						<div class="window-col">
							<div class="window-field">
								<label><?php esc_html_e( 'Header Style', 'agentorie-chat' ); ?></label>
								<div class="button-group button-group-row">
									<label class="button-option-sm <?php echo esc_attr( 'solid' === $agentorie_settings['header_style'] ? 'active' : '' ); ?>">
										<input type="radio" name="header_style" value="solid" <?php checked( $agentorie_settings['header_style'], 'solid' ); ?>>
										<span><?php esc_html_e( 'Solid', 'agentorie-chat' ); ?></span>
									</label>
									<label class="button-option-sm <?php echo esc_attr( 'gradient' === $agentorie_settings['header_style'] ? 'active' : '' ); ?>">
										<input type="radio" name="header_style" value="gradient" <?php checked( $agentorie_settings['header_style'], 'gradient' ); ?>>
										<span><?php esc_html_e( 'Gradient', 'agentorie-chat' ); ?></span>
									</label>
								</div>
							</div>
							<div class="window-field">
								<label><?php esc_html_e( 'Header Effect', 'agentorie-chat' ); ?></label>
								<div class="button-group button-group-row">
									<?php
									$agentorie_header_effects = array(
										'none'          => __( 'None', 'agentorie-chat' ),
										'glossy'        => __( 'Glossy', 'agentorie-chat' ),
										'glassmorphism' => __( 'Glass', 'agentorie-chat' ),
									);
									foreach ( $agentorie_header_effects as $agentorie_val => $agentorie_lbl ) :
										?>
									<label class="button-option-sm <?php echo esc_attr( $agentorie_val === $agentorie_settings['header_effect'] ? 'active' : '' ); ?>">
										<input type="radio" name="header_effect" value="<?php echo esc_attr( $agentorie_val ); ?>" <?php checked( $agentorie_settings['header_effect'], $agentorie_val ); ?>>
										<span><?php echo esc_html( $agentorie_lbl ); ?></span>
									</label>
									<?php endforeach; ?>
								</div>
							</div>
							<div class="window-field">
								<label><?php esc_html_e( 'Show Avatar in Header', 'agentorie-chat' ); ?></label>
								<label class="agentorie-toggle">
									<input type="checkbox" name="show_header_avatar" value="1" <?php checked( $agentorie_settings['show_header_avatar'] ); ?>>
									<span class="toggle-slider"></span>
								</label>
							</div>
							<div class="window-field">
								<label>
									<?php esc_html_e( 'Show Language Selector', 'agentorie-chat' ); ?>
									<span class="agentorie-tooltip" title="<?php esc_attr_e( 'When enabled and your license includes multiple languages, the language selector will appear in the chat header and welcome screen. Disable to hide it even with multi-language support.', 'agentorie-chat' ); ?>">?</span>
								</label>
								<label class="agentorie-toggle">
									<input type="checkbox" name="show_lang_selector" value="1" <?php checked( $agentorie_settings['show_lang_selector'] ); ?>>
									<span class="toggle-slider"></span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Messages -->
			<div class="agentorie-card">
				<div class="card-header">
					<h2><span class="dashicons dashicons-format-chat"></span> <?php esc_html_e( 'Messages', 'agentorie-chat' ); ?></h2>
				</div>
				<div class="card-body">
					<table class="form-table">
						<tr>
							<th><?php esc_html_e( 'Show Client Avatar', 'agentorie-chat' ); ?></th>
							<td>
								<label class="agentorie-toggle">
									<input type="checkbox" name="show_client_avatar" value="1" <?php checked( $agentorie_settings['show_client_avatar'] ); ?>>
									<span class="toggle-slider"></span>
								</label>
								<p class="description"><?php esc_html_e( 'Display an avatar next to visitor messages.', 'agentorie-chat' ); ?></p>
							</td>
						</tr>
						<tr>
							<th><?php esc_html_e( 'Client Avatar', 'agentorie-chat' ); ?></th>
							<td>
								<div class="icon-selector">
									<?php
									$agentorie_client_icons = array( '👤', '🙂', '😊', '🧑', '👨', '👩', '🙋', '💬' );
									foreach ( $agentorie_client_icons as $agentorie_icon ) :
										?>
									<label class="icon-option <?php echo esc_attr( $agentorie_icon === $agentorie_settings['client_avatar'] ? 'active' : '' ); ?>">
										<input type="radio" name="client_avatar" value="<?php echo esc_attr( $agentorie_icon ); ?>" <?php checked( $agentorie_settings['client_avatar'], $agentorie_icon ); ?>>
										<span><?php echo esc_html( $agentorie_icon ); ?></span>
									</label>
									<?php endforeach; ?>
								</div>
								<p class="description"><?php esc_html_e( 'Or enter custom emoji/letter:', 'agentorie-chat' ); ?></p>
								<input type="text" name="client_avatar_custom" class="small-text" maxlength="4" placeholder="V" value="<?php echo esc_attr( ! in_array( $agentorie_settings['client_avatar'], $agentorie_client_icons, true ) ? $agentorie_settings['client_avatar'] : '' ); ?>">
							</td>
						</tr>
					</table>
				</div>
			</div>

			<!-- Voice Features -->
			<div class="agentorie-card">
				<div class="card-header">
					<h2><span class="dashicons dashicons-microphone"></span> <?php esc_html_e( 'Voice Features', 'agentorie-chat' ); ?></h2>
				</div>
				<div class="card-body">
					<p class="description voice-features-intro">
						<?php
						printf(
							/* translators: %s: link to Agentorie dashboard */
							esc_html__( 'Enable voice features to allow visitors to speak to the chatbot and hear responses. %s', 'agentorie-chat' ),
							'<a href="https://app.agentorie.com/account" target="_blank" rel="noopener">' . esc_html__( 'Manage in your Agentorie account', 'agentorie-chat' ) . '</a>'
						);
						?>
					</p>
					<table class="form-table">
						<tr>
							<th><?php esc_html_e( 'Speech-to-Text (STT)', 'agentorie-chat' ); ?></th>
							<td>
								<label class="agentorie-toggle">
									<input type="checkbox" name="speech_to_text" value="1" <?php checked( $agentorie_settings['speech_to_text'] ); ?>>
									<span class="toggle-slider"></span>
								</label>
								<p class="description"><?php esc_html_e( 'Show microphone button.', 'agentorie-chat' ); ?></p>
							</td>
						</tr>
						<tr>
							<th><?php esc_html_e( 'Text-to-Speech (TTS)', 'agentorie-chat' ); ?></th>
							<td>
								<label class="agentorie-toggle">
									<input type="checkbox" name="text_to_speech" value="1" <?php checked( $agentorie_settings['text_to_speech'] ); ?>>
									<span class="toggle-slider"></span>
								</label>
								<p class="description"><?php esc_html_e( 'Allow visitors to listen to bot responses.', 'agentorie-chat' ); ?></p>
							</td>
						</tr>
					</table>
				</div>
			</div>

			<?php submit_button( __( 'Save Appearance', 'agentorie-chat' ), 'primary', 'submit', true ); ?>

		</div>

		<!-- ============================================================
			RIGHT COLUMN — Live Preview (faithful to real widget)
			============================================================ -->
		<div class="appearance-preview">
			<div class="preview-toolbar">
				<h3><?php esc_html_e( 'Live Preview', 'agentorie-chat' ); ?></h3>
				<div class="preview-toolbar-actions">
					<button type="button" class="button button-small" id="reset-preview"><?php esc_html_e( 'Reset', 'agentorie-chat' ); ?></button>
				</div>
			</div>

			<div class="preview-stage">
				<div class="preview-device">
					<div class="preview-device-notch"></div>
					<div class="preview-device-screen">

						<!-- ===== Chat Window ===== -->
						<div class="pw" id="preview-widget">

							<!-- Header (matches template-widget.php structure) -->
							<div class="pw-header" id="pw-header">
								<div class="pw-header-info">
									<div class="pw-avatar" id="pw-header-avatar"><?php echo esc_html( $agentorie_settings['bot_avatar'] ); ?></div>
									<div class="pw-header-text">
										<div class="pw-header-name">
											<span id="pw-bot-name"><?php echo esc_html( $agentorie_settings['bot_name'] ); ?></span> -
											<span id="pw-bot-subtitle"><?php echo esc_html( $agentorie_settings['bot_subtitle'] ); ?></span>
										</div>
										<div class="pw-header-status">
											<span class="pw-status-dot"></span>
											<span id="pw-availability"><?php echo esc_html( $agentorie_settings['availability_text'] ); ?></span>
										</div>
									</div>
								</div>
								<div class="pw-header-actions">
									<span class="pw-lang-btn <?php echo esc_attr( $agentorie_has_multi_languages && $agentorie_settings['show_lang_selector'] ? '' : 'pw-hidden' ); ?>" id="pw-lang-btn">
										<span class="pw-lang-code"><?php echo esc_html( strtoupper( substr( $agentorie_default_language, 0, 2 ) ) ); ?></span>
										<svg class="pw-lang-chevron" width="8" height="8" viewBox="0 0 10 10" fill="currentColor"><path d="M2 3.5L5 7L8 3.5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
									</span>
									<span class="pw-close-btn">&times;</span>
								</div>
							</div>

							<!-- Messages area -->
							<div class="pw-messages" id="pw-messages">

								<?php $agentorie_all_languages = Agentorie_Admin::get_supported_languages(); ?>

								<!-- Single view: Welcome compact + Conversation -->
								<div class="pw-view active" id="pw-view-conversation">
									<!-- Compact welcome -->
									<div class="pw-welcome pw-welcome-compact">
										<div class="pw-welcome-title" id="pw-welcome-title"><?php echo esc_html( $agentorie_settings['welcome_title'] ); ?></div>
										<div class="pw-welcome-text" id="pw-welcome-text"><?php echo esc_html( $agentorie_settings['welcome_message'] ); ?></div>
									</div>
									<?php if ( $agentorie_has_multi_languages ) : ?>
									<div class="pw-lang-selector pw-lang-compact <?php echo esc_attr( $agentorie_settings['show_lang_selector'] ? '' : 'pw-hidden' ); ?>" id="pw-lang-selector">
										<div class="pw-lang-selector-title">
											<span class="pw-lang-globe">🌐</span>
											<span id="pw-lang-title"><?php echo esc_html( $agentorie_settings['lang_selector_title'] ); ?></span>
										</div>
										<div class="pw-lang-grid">
											<span class="pw-lang-option active">
												<span class="pw-lang-badge"><?php echo esc_html( strtoupper( substr( $agentorie_default_language, 0, 2 ) ) ); ?></span>
												<?php
												echo esc_html( isset( $agentorie_all_languages[ $agentorie_default_language ] ) ? $agentorie_all_languages[ $agentorie_default_language ] : 'English' );
												?>
											</span>
											<span class="pw-lang-option">
												<span class="pw-lang-badge">+<?php echo esc_html( $agentorie_lang_count - 1 ); ?></span>
												<?php esc_html_e( 'more', 'agentorie-chat' ); ?>
											</span>
										</div>
									</div>
									<?php endif; ?>
									<!-- User message -->
									<div class="pw-msg pw-msg-user">
										<div class="pw-msg-content">
											<div class="pw-msg-bubble pw-bubble-user"><?php esc_html_e( 'Hi, I have a question.', 'agentorie-chat' ); ?></div>
											<div class="pw-msg-meta pw-meta-right">16:15</div>
										</div>
										<div class="pw-msg-avatar pw-avatar-user <?php echo esc_attr( $agentorie_settings['show_client_avatar'] ? '' : 'pw-hidden' ); ?>" id="pw-client-avatar"><?php echo esc_html( $agentorie_settings['client_avatar'] ); ?></div>
									</div>
									<!-- Bot message -->
									<div class="pw-msg pw-msg-bot">
										<div class="pw-msg-avatar pw-avatar-bot" id="pw-msg-bot-avatar"><?php echo esc_html( $agentorie_settings['bot_avatar'] ); ?></div>
										<div class="pw-msg-content">
											<div class="pw-msg-bubble pw-bubble-bot"><?php esc_html_e( 'Of course! I\'d be happy to help. What would you like to know?', 'agentorie-chat' ); ?></div>
											<div class="pw-msg-meta">
												<span>16:15</span>
												<button type="button" class="pw-tts-btn <?php echo esc_attr( $agentorie_settings['text_to_speech'] ? '' : 'pw-hidden' ); ?>" id="pw-tts-btn" title="<?php esc_attr_e( 'Listen', 'agentorie-chat' ); ?>">
													<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
												</button>
											</div>
										</div>
									</div>
								</div>

							</div>

							<!-- Input footer (matches real widget) -->
							<div class="pw-input" id="pw-input">
								<div class="pw-input-wrapper">
									<button type="button" class="pw-mic-btn <?php echo esc_attr( $agentorie_settings['speech_to_text'] ? '' : 'pw-hidden' ); ?>" id="pw-stt-btn" title="<?php esc_attr_e( 'Record voice', 'agentorie-chat' ); ?>">
										<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="1" width="6" height="11" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
									</button>
									<span class="pw-input-placeholder" id="pw-placeholder"><?php echo esc_html( $agentorie_settings['speech_to_text'] ? $agentorie_settings['voice_placeholder'] : $agentorie_settings['input_placeholder'] ); ?></span>
									<button type="button" class="pw-send-btn" id="pw-send-btn">
										<svg viewBox="0 0 24 24" width="16" height="16"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z" fill="currentColor"/></svg>
									</button>
								</div>
							</div>
						</div>

						<!-- ===== Launcher Button ===== -->
						<div class="pw-launcher" id="pw-launcher">
							<span class="pw-launcher-icon" id="pw-launcher-icon"><?php echo esc_html( $agentorie_settings['button_icon'] ); ?></span>
						</div>

					</div>
				</div>
			</div>
		</div>

	</div>
</form>