<?php
if ( !defined( 'ABSPATH' ) ) {
	exit;
}

class AICA_Admin_Menu {
	private static $instance = null;

	public static function get_instance() {
		if ( null === self::$instance ) {
			self::$instance = new self();
		}
		return self::$instance;
	}

	private function __construct() {
		add_action( 'admin_menu', array( $this, 'add_menu' ) );
		add_action( 'admin_menu', array( $this, 'add_support_menu' ), 99 );
		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
	}

	public function enqueue_scripts( $hook ) {
		$screen = get_current_screen();
		if ( ! $screen ) {
			return;
		}

		// Indexer Page
		if ( strpos( $screen->id, 'aica-smart-ai-commerce-assistant-indexer' ) !== false ) {
			wp_enqueue_script(
				'aica-admin-indexer',
				AICA_PLUGIN_URL . 'assets/js/admin-indexer.js',
				array( 'jquery' ),
				AICA_VERSION,
				true
			);
			wp_localize_script(
				'aica-admin-indexer',
				'aicaIndexer',
				array(
					'nonce' => wp_create_nonce( 'aica_indexer' ),
					'i18n'  => array(
						'indexing'       => __( 'Indexing...', 'aica-smart-ai-commerce-assistant' ),
						'starting'       => __( 'Starting indexing process...', 'aica-smart-ai-commerce-assistant' ),
						'reindex'        => __( 'Re-index Products', 'aica-smart-ai-commerce-assistant' ),
						'unknownError'   => __( 'Unknown error occurred', 'aica-smart-ai-commerce-assistant' ),
						'startIndexing'  => __( 'Start Indexing', 'aica-smart-ai-commerce-assistant' ),
						'connectionFail' => __( 'Connection failed. Please check your internet connection.', 'aica-smart-ai-commerce-assistant' ),
					),
				)
			);
		}

		// Analytics Page
		if ( strpos( $screen->id, 'aica-smart-ai-commerce-assistant-analytics' ) !== false ) {
			wp_enqueue_script(
				'aica-admin-analytics',
				AICA_PLUGIN_URL . 'assets/js/admin-analytics.js',
				array( 'jquery' ),
				AICA_VERSION,
				true
			);
			wp_localize_script(
				'aica-admin-analytics',
				'aicaAnalytics',
				array(
					'adminUrl' => admin_url( 'admin.php?page=aica-smart-ai-commerce-assistant-analytics' ),
				)
			);
			wp_enqueue_style(
				'aica-admin-analytics',
				AICA_PLUGIN_URL . 'assets/css/admin-analytics.css',
				array(),
				AICA_VERSION
			);
		}
	}

	public function add_menu() {
		// Main menu
		add_menu_page(
			__( 'AI Assistant', 'aica-smart-ai-commerce-assistant' ),
			__( 'AI Assistant', 'aica-smart-ai-commerce-assistant' ),
			'manage_options',
			'aica-smart-ai-commerce-assistant',
			array( $this, 'render_dashboard' ),
			'dashicons-format-chat',
			58
		);

		// Dashboard submenu
		add_submenu_page(
			'aica-smart-ai-commerce-assistant',
			__( 'Dashboard', 'aica-smart-ai-commerce-assistant' ),
			__( 'Dashboard', 'aica-smart-ai-commerce-assistant' ),
			'manage_options',
			'aica-smart-ai-commerce-assistant',
			array( $this, 'render_dashboard' )
		);

		// Settings submenu
		add_submenu_page(
			'aica-smart-ai-commerce-assistant',
			__( 'Settings', 'aica-smart-ai-commerce-assistant' ),
			__( 'Settings', 'aica-smart-ai-commerce-assistant' ),
			'manage_options',
			'aica-smart-ai-commerce-assistant-settings',
			array( AICA_Admin_Settings::get_instance(), 'render_settings_page' )
		);

		// Index Products submenu
		add_submenu_page(
			'aica-smart-ai-commerce-assistant',
			__( 'Index Products', 'aica-smart-ai-commerce-assistant' ),
			__( 'Index Products', 'aica-smart-ai-commerce-assistant' ),
			'manage_options',
			'aica-smart-ai-commerce-assistant-indexer',
			array( $this, 'render_indexer_page' )
		);

		// Analytics submenu
		add_submenu_page(
			'aica-smart-ai-commerce-assistant',
			__( 'Analytics', 'aica-smart-ai-commerce-assistant' ),
			__( 'Analytics', 'aica-smart-ai-commerce-assistant' ),
			'manage_options',
			'aica-smart-ai-commerce-assistant-analytics',
			array( $this, 'render_analytics_page' )
		);
	}

	/**
	 * Add Support & Hire Me menu (separate hook with priority 99 to ensure it's last).
	 *
	 * @return void
	 */
	public function add_support_menu() {
		// Support & Hire Me submenu (last position)
		add_submenu_page(
			'aica-smart-ai-commerce-assistant',
			__( 'Support & Hire Me', 'aica-smart-ai-commerce-assistant' ),
			__( 'Support & Hire Me', 'aica-smart-ai-commerce-assistant' ),
			'manage_options',
			'aica-smart-ai-commerce-assistant-support',
			array( $this, 'render_support_page' )
		);
	}

	public function render_dashboard() {
		global $wpdb;

		// Get stats with caching
		$cached_stats = wp_cache_get( 'aica_dashboard_summary_stats', 'aica_admin' );
		
		if ( false === $cached_stats ) {
			// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching
			$total_conversations = $wpdb->get_var( "SELECT COUNT(DISTINCT session_id) FROM {$wpdb->prefix}aica_conversations" );
			// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching
			$total_messages      = $wpdb->get_var( "SELECT COUNT(*) FROM {$wpdb->prefix}aica_conversations" );
			// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching
			$indexed_products    = $wpdb->get_var( "SELECT COUNT(*) FROM {$wpdb->prefix}aica_indexed_products" );

			$cached_stats = array(
				'total_conversations' => $total_conversations,
				'total_messages'      => $total_messages,
				'indexed_products'    => $indexed_products,
			);

			wp_cache_set( 'aica_dashboard_summary_stats', $cached_stats, 'aica_admin', HOUR_IN_SECONDS );
		}

		$total_conversations = $cached_stats['total_conversations'];
		$total_messages      = $cached_stats['total_messages'];
		$indexed_products    = $cached_stats['indexed_products'];

		?>
		<div class="wrap">
			<h1><?php esc_html_e( 'AICA - Smart AI Commerce Assistant Dashboard', 'aica-smart-ai-commerce-assistant' ); ?></h1>
			
			<div style="max-width: 1200px;">
				<!-- Welcome Banner -->
				<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); margin: 30px 0; color: white;">
					<h2 style="margin: 0 0 10px 0; color: white; font-size: 28px;">
						👋 <?php esc_html_e( 'Welcome to AICA - Smart AI Commerce Assistant', 'aica-smart-ai-commerce-assistant' ); ?>
					</h2>
					<p style="font-size: 16px; margin: 0; opacity: 0.95;">
						<?php esc_html_e( 'Your intelligent AI-powered shopping assistant is ready to help customers find products and boost sales.', 'aica-smart-ai-commerce-assistant' ); ?>
					</p>
				</div>

				<!-- Stats Cards -->
				<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 30px 0;">
					<div style="background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-top: 4px solid #667eea;">
						<div style="display: flex; align-items: center; justify-content: space-between;">
							<div>
								<h3 style="margin: 0 0 10px 0; color: #666; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">
									<?php esc_html_e( 'Total Conversations', 'aica-smart-ai-commerce-assistant' ); ?>
								</h3>
								<p style="font-size: 36px; font-weight: bold; margin: 0; color: #667eea;">
									<?php echo esc_html( $total_conversations ); ?>
								</p>
							</div>
							<div style="font-size: 48px; opacity: 0.2;">💬</div>
						</div>
					</div>
					
					<div style="background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-top: 4px solid #10B981;">
						<div style="display: flex; align-items: center; justify-content: space-between;">
							<div>
								<h3 style="margin: 0 0 10px 0; color: #666; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">
									<?php esc_html_e( 'Total Messages', 'aica-smart-ai-commerce-assistant' ); ?>
								</h3>
								<p style="font-size: 36px; font-weight: bold; margin: 0; color: #10B981;">
									<?php echo esc_html( $total_messages ); ?>
								</p>
							</div>
							<div style="font-size: 48px; opacity: 0.2;">✉️</div>
						</div>
					</div>
					
					<div style="background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-top: 4px solid #F59E0B;">
						<div style="display: flex; align-items: center; justify-content: space-between;">
							<div>
								<h3 style="margin: 0 0 10px 0; color: #666; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">
									<?php esc_html_e( 'Indexed Products', 'aica-smart-ai-commerce-assistant' ); ?>
								</h3>
								<p style="font-size: 36px; font-weight: bold; margin: 0; color: #F59E0B;">
									<?php echo esc_html( $indexed_products ); ?>
								</p>
							</div>
							<div style="font-size: 48px; opacity: 0.2;">📦</div>
						</div>
					</div>
				</div>
				
				<!-- Quick Actions -->
				<div style="background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 30px 0;">
					<h2 style="margin: 0 0 20px 0; color: #333; font-size: 20px;">
						⚡ <?php esc_html_e( 'Quick Actions', 'aica-smart-ai-commerce-assistant' ); ?>
					</h2>
					<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=aica-smart-ai-commerce-assistant-settings' ) ); ?>" 
						   class="button button-primary button-large" 
						   style="text-align: center; padding: 15px; text-decoration: none; display: block;">
							⚙️ <?php esc_html_e( 'Configure Settings', 'aica-smart-ai-commerce-assistant' ); ?>
						</a>
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=aica-smart-ai-commerce-assistant-indexer' ) ); ?>" 
						   class="button button-large" 
						   style="text-align: center; padding: 15px; text-decoration: none; display: block; background: #10B981; border-color: #10B981; color: white;">
							🔄 <?php esc_html_e( 'Index Products', 'aica-smart-ai-commerce-assistant' ); ?>
						</a>
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=aica-smart-ai-commerce-assistant-analytics' ) ); ?>" 
						   class="button button-large" 
						   style="text-align: center; padding: 15px; text-decoration: none; display: block; background: #F59E0B; border-color: #F59E0B; color: white;">
							📊 <?php esc_html_e( 'View Analytics', 'aica-smart-ai-commerce-assistant' ); ?>
						</a>
					</div>
				</div>

				<!-- Getting Started Guide -->
				<div style="background: #f8f9fa; padding: 30px; border-radius: 12px; border-left: 4px solid #667eea; margin: 30px 0;">
					<h3 style="margin: 0 0 15px 0; color: #333;">
						🚀 <?php esc_html_e( 'Getting Started', 'aica-smart-ai-commerce-assistant' ); ?>
					</h3>
					<ol style="margin: 0; padding-left: 20px; color: #666; line-height: 1.8;">
						<li><?php esc_html_e( 'Configure your AI provider and API key in Settings', 'aica-smart-ai-commerce-assistant' ); ?></li>
						<li><?php esc_html_e( 'Index your products to enable AI-powered search', 'aica-smart-ai-commerce-assistant' ); ?></li>
						<li><?php esc_html_e( 'Customize the widget appearance and position', 'aica-smart-ai-commerce-assistant' ); ?></li>
						<li><?php esc_html_e( 'Set up Magic Prompts for quick customer actions', 'aica-smart-ai-commerce-assistant' ); ?></li>
						<li><?php esc_html_e( 'Monitor performance in the Analytics dashboard', 'aica-smart-ai-commerce-assistant' ); ?></li>
					</ol>
				</div>
			</div>
		</div>
		<?php
	}

	public function render_indexer_page() {
		?>
		<div class="wrap">
			<h1><?php esc_html_e( 'Index Products', 'aica-smart-ai-commerce-assistant' ); ?></h1>
			
			<div style="max-width: 1000px;">
				<!-- Header Banner -->
				<div style="background: linear-gradient(135deg, #10B981 0%, #059669 100%); padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); margin: 30px 0; color: white;">
					<h2 style="margin: 0 0 10px 0; color: white; font-size: 28px;">
						🔄 <?php esc_html_e( 'Product Indexing', 'aica-smart-ai-commerce-assistant' ); ?>
					</h2>
					<p style="font-size: 16px; margin: 0; opacity: 0.95;">
						<?php esc_html_e( 'Index your WooCommerce products to enable AI-powered semantic search and intelligent recommendations.', 'aica-smart-ai-commerce-assistant' ); ?>
					</p>
				</div>
			
			<?php
			// Show current stats
			$indexer = AICA_Product_Indexer::get_instance();
			$stats   = $indexer->get_stats();
			?>
			
			<!-- Current Status -->
			<div style="background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 30px 0;">
				<h2 style="margin: 0 0 20px 0; color: #333; font-size: 20px;">
					📊 <?php esc_html_e( 'Current Status', 'aica-smart-ai-commerce-assistant' ); ?>
				</h2>
				
				<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px;">
					<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #10B981;">
						<div style="font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;">
							<?php esc_html_e( 'Total Products', 'aica-smart-ai-commerce-assistant' ); ?>
						</div>
						<div style="font-size: 28px; font-weight: bold; color: #10B981;">
							<?php echo esc_html( $stats['total_products'] ); ?>
						</div>
					</div>
					
					<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #667eea;">
						<div style="font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;">
							<?php esc_html_e( 'Indexed Products', 'aica-smart-ai-commerce-assistant' ); ?>
						</div>
						<div style="font-size: 28px; font-weight: bold; color: #667eea;">
							<?php echo esc_html( $stats['total_indexed'] ); ?>
						</div>
					</div>
					
					<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #F59E0B;">
						<div style="font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;">
							<?php esc_html_e( 'With Embeddings', 'aica-smart-ai-commerce-assistant' ); ?>
						</div>
						<div style="font-size: 28px; font-weight: bold; color: #F59E0B;">
							<?php echo esc_html( $stats['with_embeddings'] ); ?>
						</div>
					</div>
					
					<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #8B5CF6;">
						<div style="font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;">
							<?php esc_html_e( 'Coverage', 'aica-smart-ai-commerce-assistant' ); ?>
						</div>
						<div style="font-size: 28px; font-weight: bold; color: #8B5CF6;">
							<?php echo esc_html( $stats['coverage'] ); ?>%
						</div>
					</div>
				</div>
				
				<?php if ( $stats['last_indexed'] ) : ?>
				<div style="background: #f0f9ff; padding: 15px; border-radius: 8px; border-left: 4px solid #0ea5e9; margin-top: 20px;">
					<strong style="color: #0369a1;"><?php esc_html_e( 'Last Indexed:', 'aica-smart-ai-commerce-assistant' ); ?></strong>
					<span style="color: #666; margin-left: 10px;">
						<?php echo esc_html( date_i18n( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), strtotime( $stats['last_indexed'] ) ) ); ?>
					</span>
				</div>
				<?php endif; ?>
			</div>
			
			<!-- Indexing Action -->
			<div id="aica-indexer-status" style="background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 30px 0;">
				<h2 style="margin: 0 0 20px 0; color: #333; font-size: 20px;">
					⚡ <?php esc_html_e( 'Start Indexing', 'aica-smart-ai-commerce-assistant' ); ?>
				</h2>
				<p style="color: #666; margin: 0 0 20px 0;">
					<?php esc_html_e( 'Click the button below to index or re-index all your products. This process may take a few minutes depending on your catalog size.', 'aica-smart-ai-commerce-assistant' ); ?>
				</p>
				<button id="aica-start-indexing" class="button button-primary button-large" style="background: #10B981; border-color: #10B981; padding: 12px 30px;">
					🔄 <?php esc_html_e( 'Start Indexing', 'aica-smart-ai-commerce-assistant' ); ?>
				</button>
				<div id="aica-indexer-progress" style="display: none; margin-top: 20px;">
					<progress id="aica-progress-bar" value="0" max="100" style="width: 100%; height: 30px;"></progress>
					<p id="aica-progress-text" style="margin-top: 10px; font-weight: 600;"></p>
				</div>
				<div id="aica-indexer-error" style="display: none; margin-top: 20px; padding: 15px; background: #fee2e2; border: 1px solid #fecaca; border-radius: 8px; color: #991b1b;">
				</div>
			</div>
			
			<!-- Info Box -->
			<div style="background: #f8f9fa; padding: 25px; border-radius: 12px; border-left: 4px solid #667eea; margin: 30px 0;">
				<h3 style="margin: 0 0 15px 0; color: #333;">
					💡 <?php esc_html_e( 'About Product Indexing', 'aica-smart-ai-commerce-assistant' ); ?>
				</h3>
				<ul style="margin: 0; padding-left: 20px; color: #666; line-height: 1.8;">
					<li><?php esc_html_e( 'Indexing creates a searchable database of your products for the AI assistant', 'aica-smart-ai-commerce-assistant' ); ?></li>
					<li><?php esc_html_e( 'Embeddings enable semantic search (understanding meaning, not just keywords)', 'aica-smart-ai-commerce-assistant' ); ?></li>
					<li><?php esc_html_e( 'Re-index after adding new products or updating product information', 'aica-smart-ai-commerce-assistant' ); ?></li>
					<li><?php esc_html_e( 'The process runs in the background and won\'t affect your store performance', 'aica-smart-ai-commerce-assistant' ); ?></li>
				</ul>
			</div>
		</div>
		</div>
		

		<?php
	}

	public function render_analytics_page() {
		// Check if Analytics class exists
		if ( !class_exists( 'AICA_Analytics' ) ) {
			?>
			<div class="wrap">
				<h1><?php esc_html_e( 'Analytics', 'aica-smart-ai-commerce-assistant' ); ?></h1>
				<div class="notice notice-error">
					<p><?php esc_html_e( 'Analytics module not loaded. Please check that includes/class-analytics.php exists.', 'aica-smart-ai-commerce-assistant' ); ?></p>
				</div>
			</div>
			<?php
			return;
		}

		$analytics = AICA_Analytics::get_instance();

		// Get period from query string
		$period = isset( $_GET['period'] ) ? sanitize_text_field( $_GET['period'] ) : 'month';

		// Get stats
		$stats           = $analytics->get_dashboard_stats( $period );
		$engagement      = $analytics->get_engagement_metrics( $period );
		$top_products    = $analytics->get_top_products( 5, $period );
		$popular_queries = $analytics->get_popular_queries( 10, $period );

		?>
		<div class="wrap">
			<h1 style="margin-bottom: 20px;"><?php esc_html_e( 'Analytics', 'aica-smart-ai-commerce-assistant' ); ?></h1>
			
			<div style="max-width: 1200px;">
				<!-- Header Banner -->
				<div style="background: linear-gradient(135deg, #0EA5E9 0%, #2563EB 100%); padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); margin-bottom: 30px; color: white;">
					<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;">
						<div>
							<h2 style="margin: 0 0 10px 0; color: white; font-size: 28px;">
								📊 <?php esc_html_e( 'Assistant Performance', 'aica-smart-ai-commerce-assistant' ); ?>
							</h2>
							<p style="font-size: 16px; margin: 0; opacity: 0.95;">
								<?php esc_html_e( 'Track how your AI assistant is helping your customers and boosting your sales.', 'aica-smart-ai-commerce-assistant' ); ?>
							</p>
						</div>
						
						<!-- Period Selector -->
						<div style="background: rgba(255,255,255,0.15); padding: 10px 20px; border-radius: 8px; backdrop-filter: blur(5px);">
							<label style="margin-right: 10px; font-weight: 500; font-size: 14px;"><?php esc_html_e( 'Time Period:', 'aica-smart-ai-commerce-assistant' ); ?></label>
							<select id="aica-analytics-period" style="background: white; border: none; border-radius: 4px; padding: 5px 10px; color: #333; font-weight: 500; cursor: pointer;">
								<option value="today" <?php selected( $period, 'today' ); ?>>Today</option>
								<option value="week" <?php selected( $period, 'week' ); ?>>Last 7 Days</option>
								<option value="month" <?php selected( $period, 'month' ); ?>>Last 30 Days</option>
								<option value="year" <?php selected( $period, 'year' ); ?>>Last Year</option>
								<option value="all" <?php selected( $period, 'all' ); ?>>All Time</option>
							</select>
						</div>
					</div>
				</div>
				
				<!-- Key Metrics -->
				<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; margin-bottom: 30px;">
					<div style="background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-top: 4px solid #0EA5E9;">
						<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
							<h3 style="margin: 0; color: #64748B; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">
								Conversations
							</h3>
							<span style="font-size: 20px;">💬</span>
						</div>
						<p style="font-size: 32px; font-weight: 800; margin: 0; color: #1E293B;">
							<?php echo esc_html( $stats['total_conversations'] ); ?>
						</p>
					</div>
					
					<div style="background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-top: 4px solid #2563EB;">
						<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
							<h3 style="margin: 0; color: #64748B; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">
								Messages Sent
							</h3>
							<span style="font-size: 20px;">✉️</span>
						</div>
						<p style="font-size: 32px; font-weight: 800; margin: 0; color: #1E293B;">
							<?php echo esc_html( $stats['total_messages'] ); ?>
						</p>
						<p style="font-size: 12px; color: #64748B; margin: 8px 0 0 0; font-weight: 500;">
							Avg: <?php echo esc_html( $stats['avg_messages_per_conversation'] ); ?> per conv.
						</p>
					</div>
					
					<div style="background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-top: 4px solid #F59E0B;">
						<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
							<h3 style="margin: 0; color: #64748B; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">
								Recommended
							</h3>
							<span style="font-size: 20px;">📦</span>
						</div>
						<p style="font-size: 32px; font-weight: 800; margin: 0; color: #1E293B;">
							<?php echo esc_html( $stats['products_recommended'] ); ?>
						</p>
						<p style="font-size: 12px; color: #64748B; margin: 8px 0 0 0; font-weight: 500;">
							Products shown to users
						</p>
					</div>
					
					<div style="background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-top: 4px solid #10B981;">
						<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
							<h3 style="margin: 0; color: #64748B; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">
								Cart Additions
							</h3>
							<span style="font-size: 20px;">🛒</span>
						</div>
						<p style="font-size: 32px; font-weight: 800; margin: 0; color: #1E293B;">
							<?php echo esc_html( $stats['cart_additions'] ); ?>
						</p>
						<p style="font-size: 12px; color: #059669; margin: 8px 0 0 0; font-weight: 600;">
							<?php echo esc_html( $stats['conversion_rate'] ); ?>% <?php esc_html_e( 'add-to-cart rate', 'aica-smart-ai-commerce-assistant' ); ?>
						</p>
					</div>
				</div>

				<!-- Engagement Details -->
				<div style="background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 30px; display: flex; align-items: center; gap: 20px; border-left: 5px solid #6366F1;">
					<div style="font-size: 28px; background: #EEF2FF; padding: 15px; border-radius: 50%;">⏱️</div>
					<div>
						<h4 style="margin: 0; color: #64748B; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;"><?php esc_html_e( 'Average Session Duration', 'aica-smart-ai-commerce-assistant' ); ?></h4>
						<p style="margin: 5px 0 0 0; font-size: 22px; font-weight: 700; color: #1E293B;">
							<?php echo esc_html( $engagement['avg_session_duration'] ); ?>m <?php esc_html_e( 'of continuous chat engagement', 'aica-smart-ai-commerce-assistant' ); ?>
						</p>
					</div>
				</div>
				
				<!-- Details Row -->
				<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-bottom: 40px;">
					<!-- Top Products -->
					<div style="background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
						<h3 style="margin: 0 0 25px 0; display: flex; align-items: center; gap: 10px; font-size: 18px; color: #1E293B;">
							<span style="font-size: 20px;">🏆</span> <?php esc_html_e( 'Top Recommended Products', 'aica-smart-ai-commerce-assistant' ); ?>
						</h3>
						<?php if ( !empty( $top_products ) ) : ?>
							<div class="aica-table-container">
								<table class="wp-list-table widefat fixed striped" style="border: none; box-shadow: none;">
									<thead>
										<tr style="background: #F8FAFC;">
											<th style="padding: 12px 15px; color: #64748B; font-weight: 700;"><?php esc_html_e( 'Product', 'aica-smart-ai-commerce-assistant' ); ?></th>
											<th style="padding: 12px 15px; color: #64748B; font-weight: 700; width: 100px; text-align: center;"><?php esc_html_e( 'Recs', 'aica-smart-ai-commerce-assistant' ); ?></th>
										</tr>
									</thead>
									<tbody>
										<?php foreach ( $top_products as $product ) : ?>
										<tr>
											<td style="padding: 15px;">
												<div style="display: flex; align-items: center; gap: 15px;">
													<?php if ( $product['image'] ) : ?>
														<img src="<?php echo esc_url( $product['image'] ); ?>" 
															style="width: 50px; height: 50px; object-fit: cover; border-radius: 8px; border: 1px solid #E2E8F0;" />
													<?php else: ?>
														<div style="width: 50px; height: 50px; background: #F1F5F9; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #94A3B8;">📦</div>
													<?php endif; ?>
													<div>
														<strong style="color: #1E293B; font-size: 14px;"><?php echo esc_html( $product['name'] ); ?></strong>
														<br>
														<span style="color: #64748B; font-size: 13px;">
															<?php echo wp_kses_post( wc_price( $product['price'] ) ); ?>
														</span>
													</div>
												</div>
											</td>
											<td style="padding: 15px; text-align: center;">
												<span style="background: #ECFDF5; color: #059669; padding: 4px 10px; border-radius: 20px; font-weight: 700; font-size: 13px;">
													<?php echo esc_html( $product['recommendation_count'] ); ?>
												</span>
											</td>
										</tr>
										<?php endforeach; ?>
									</tbody>
								</table>
							</div>
						<?php else : ?>
							<div style="text-align: center; padding: 40px 0; color: #94A3B8;">
								<p style="font-size: 40px; margin: 0;">📉</p>
								<p><?php esc_html_e( 'No product data yet for this period.', 'aica-smart-ai-commerce-assistant' ); ?></p>
							</div>
						<?php endif; ?>
					</div>
					
					<!-- Popular Queries -->
					<div style="background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
						<h3 style="margin: 0 0 25px 0; display: flex; align-items: center; gap: 10px; font-size: 18px; color: #1E293B;">
							<span style="font-size: 20px;">💡</span> <?php esc_html_e( 'Popular Customer Queries', 'aica-smart-ai-commerce-assistant' ); ?>
						</h3>
						<?php if ( !empty( $popular_queries ) ) : ?>
							<div class="aica-table-container">
								<table class="wp-list-table widefat fixed striped" style="border: none; box-shadow: none;">
									<thead>
										<tr style="background: #F8FAFC;">
											<th style="padding: 12px 15px; color: #64748B; font-weight: 700;"><?php esc_html_e( 'Query Text', 'aica-smart-ai-commerce-assistant' ); ?></th>
											<th style="padding: 12px 15px; color: #64748B; font-weight: 700; width: 100px; text-align: center;"><?php esc_html_e( 'Count', 'aica-smart-ai-commerce-assistant' ); ?></th>
										</tr>
									</thead>
									<tbody>
										<?php foreach ( $popular_queries as $query ) : ?>
										<tr>
											<td style="padding: 15px; color: #1E293B; font-weight: 500;">
												"<?php echo esc_html( wp_trim_words( $query['query'], 12 ) ); ?>"
											</td>
											<td style="padding: 15px; text-align: center;">
												<span style="background: #F1F5F9; color: #475569; padding: 4px 10px; border-radius: 20px; font-weight: 700; font-size: 13px;">
													<?php echo esc_html( $query['count'] ); ?>
												</span>
											</td>
										</tr>
										<?php endforeach; ?>
									</tbody>
								</table>
							</div>
						<?php else : ?>
							<div style="text-align: center; padding: 40px 0; color: #94A3B8;">
								<p style="font-size: 40px; margin: 0;">💬</p>
								<p><?php esc_html_e( 'No queries recorded for this period.', 'aica-smart-ai-commerce-assistant' ); ?></p>
							</div>
						<?php endif; ?>
					</div>
				</div>
			</div>
		</div>
		



		<?php
	}

	/**
	 * Render Support & Hire Me page.
	 *
	 * @return void
	 */
	public function render_support_page() {
		?>
		<div class="wrap">
			<h1><?php esc_html_e( 'Support & Hire Me', 'aica-smart-ai-commerce-assistant' ); ?></h1>
			
			<div style="max-width: 800px;">
				<!-- Developer Card -->
				<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); margin: 30px 0; color: white;">
					<div style="display: flex; align-items: center; gap: 30px; flex-wrap: wrap;">
						<div style="flex: 1; min-width: 300px;">
							<h2 style="margin: 0 0 15px 0; color: white; font-size: 28px;">
								👋 <?php esc_html_e( 'Hi, I\'m Giuseppe (joseph78developer)', 'aica-smart-ai-commerce-assistant' ); ?>
							</h2>
							<p style="font-size: 16px; line-height: 1.6; margin: 0 0 20px 0; opacity: 0.95;">
								<?php esc_html_e( 'I\'m the developer of AICA - Smart AI Commerce Assistant. I am a Senior Frontend Developer specialized in Angular, complex web applications, and custom WordPress templates.', 'aica-smart-ai-commerce-assistant' ); ?>
							</p>
							<p style="font-size: 16px; line-height: 1.6; margin: 0; opacity: 0.95;">
								<?php esc_html_e( 'Need a custom Angular application, a bespoke WordPress theme, or a high-performance AI integration? I\'m available for hire!', 'aica-smart-ai-commerce-assistant' ); ?>
							</p>
						</div>
					</div>
				</div>

				<!-- Services Offered -->
				<div style="background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 30px 0;">
					<h2 style="margin: 0 0 20px 0; color: #333;">
						💼 <?php esc_html_e( 'Professional Development Services', 'aica-smart-ai-commerce-assistant' ); ?>
					</h2>
					<ul style="list-style: none; padding: 0; margin: 0;">
						<li style="padding: 12px 0; border-bottom: 1px solid #eee; display: flex; align-items: start; gap: 10px;">
							<span style="color: #6366f1; font-size: 20px;">✓</span>
							<span><strong><?php esc_html_e( 'Angular Development:', 'aica-smart-ai-commerce-assistant' ); ?></strong> <?php esc_html_e( 'Specialized in building robust, scalable SPA and complex enterprise frontends.', 'aica-smart-ai-commerce-assistant' ); ?></span>
						</li>
						<li style="padding: 12px 0; border-bottom: 1px solid #eee; display: flex; align-items: start; gap: 10px;">
							<span style="color: #6366f1; font-size: 20px;">✓</span>
							<span><strong><?php esc_html_e( 'Custom WordPress Templates:', 'aica-smart-ai-commerce-assistant' ); ?></strong> <?php esc_html_e( 'Bespoke, high-performance themes tailored to your brand identity.', 'aica-smart-ai-commerce-assistant' ); ?></span>
						</li>
						<li style="padding: 12px 0; border-bottom: 1px solid #eee; display: flex; align-items: start; gap: 10px;">
							<span style="color: #6366f1; font-size: 20px;">✓</span>
							<span><strong><?php esc_html_e( 'AI Integrations:', 'aica-smart-ai-commerce-assistant' ); ?></strong> <?php esc_html_e( 'Intelligent chatbots and recommendation systems for WooCommerce.', 'aica-smart-ai-commerce-assistant' ); ?></span>
						</li>
						<li style="padding: 12px 0; border-bottom: 1px solid #eee; display: flex; align-items: start; gap: 10px;">
							<span style="color: #6366f1; font-size: 20px;">✓</span>
							<span><strong><?php esc_html_e( 'Modern UI/UX Design:', 'aica-smart-ai-commerce-assistant' ); ?></strong> <?php esc_html_e( 'Crafting beautiful, responsive, and accessible user interfaces.', 'aica-smart-ai-commerce-assistant' ); ?></span>
						</li>
						<li style="padding: 12px 0; display: flex; align-items: start; gap: 10px;">
							<span style="color: #6366f1; font-size: 20px;">✓</span>
							<span><strong><?php esc_html_e( 'Performance Optimization:', 'aica-smart-ai-commerce-assistant' ); ?></strong> <?php esc_html_e( 'Speeding up web applications and ensuring core web vitals compliance.', 'aica-smart-ai-commerce-assistant' ); ?></span>
						</li>
					</ul>
				</div>

				<!-- Contact & Support -->
				<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0;">
					<!-- LinkedIn Card -->
					<div style="background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center;">
						<div style="font-size: 48px; margin-bottom: 25px;">💼</div>
						<h3 style="margin: 0 0 15px 0; color: #333;"><?php esc_html_e( 'Connect on LinkedIn', 'aica-smart-ai-commerce-assistant' ); ?></h3>
						<p style="color: #666; margin: 0 0 20px 0; font-size: 14px;">
							<?php esc_html_e( 'Let\'s discuss your project requirements', 'aica-smart-ai-commerce-assistant' ); ?>
						</p>
						<a href="https://linkedin.com/in/giuseppe-musolino-7419b02b" 
						   target="_blank" 
						   rel="noopener noreferrer"
						   class="button button-primary button-large"
						   style="background: #0077B5; border-color: #0077B5; text-decoration: none; display: inline-block;">
							<span class="dashicons dashicons-linkedin" style="margin-top: 3px;"></span>
							<?php esc_html_e( 'View LinkedIn Profile', 'aica-smart-ai-commerce-assistant' ); ?>
						</a>
					</div>

					<!-- PayPal Donation Card -->
					<div style="background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center;">
						<div style="font-size: 48px; margin-bottom: 25px;">💳</div>
						<h3 style="margin: 0 0 15px 0; color: #333;"><?php esc_html_e( 'Support Development', 'aica-smart-ai-commerce-assistant' ); ?></h3>
						<p style="color: #666; margin: 0 0 20px 0; font-size: 14px;">
							<?php esc_html_e( 'If you enjoy this plugin, supporting me via PayPal!', 'aica-smart-ai-commerce-assistant' ); ?>
						</p>
						<a href="https://www.paypal.com/paypalme/GMusolino78" 
						   target="_blank" 
						   rel="noopener noreferrer"
						   class="button button-large"
						   style="background: #0070ba; border-color: #0070ba; color: #fff; text-decoration: none; display: inline-block; font-weight: 600; ">
							🔵 <?php esc_html_e( 'Donate via PayPal', 'aica-smart-ai-commerce-assistant' ); ?>
						</a>
					</div>
				</div>

				<!-- Testimonial / Why Hire Me -->
				<div style="background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 30px 0;">
					<h2 style="margin: 0 0 20px 0; color: #333;">
						⭐ <?php esc_html_e( 'Why Work With Me?', 'aica-smart-ai-commerce-assistant' ); ?>
					</h2>
					<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
						<div style="text-align: center; padding: 15px;">
							<div style="font-size: 32px; margin-bottom: 10px;">🚀</div>
							<h4 style="margin: 0 0 8px 0; color: #333;"><?php esc_html_e( 'Fast Delivery', 'aica-smart-ai-commerce-assistant' ); ?></h4>
							<p style="margin: 0; color: #666; font-size: 13px;"><?php esc_html_e( 'Quick turnaround times without compromising quality', 'aica-smart-ai-commerce-assistant' ); ?></p>
						</div>
						<div style="text-align: center; padding: 15px;">
							<div style="font-size: 32px; margin-bottom: 10px;">💡</div>
							<h4 style="margin: 0 0 8px 0; color: #333;"><?php esc_html_e( 'Expert Knowledge', 'aica-smart-ai-commerce-assistant' ); ?></h4>
							<p style="margin: 0; color: #666; font-size: 13px;"><?php esc_html_e( 'Deep expertise in AI, WordPress & WooCommerce', 'aica-smart-ai-commerce-assistant' ); ?></p>
						</div>
						<div style="text-align: center; padding: 15px;">
							<div style="font-size: 32px; margin-bottom: 10px;">🛠️</div>
							<h4 style="margin: 0 0 8px 0; color: #333;"><?php esc_html_e( 'Clean Code', 'aica-smart-ai-commerce-assistant' ); ?></h4>
							<p style="margin: 0; color: #666; font-size: 13px;"><?php esc_html_e( 'Well-documented, maintainable code following best practices', 'aica-smart-ai-commerce-assistant' ); ?></p>
						</div>
						<div style="text-align: center; padding: 15px;">
							<div style="font-size: 32px; margin-bottom: 10px;">🤝</div>
							<h4 style="margin: 0 0 8px 0; color: #333;"><?php esc_html_e( 'Ongoing Support', 'aica-smart-ai-commerce-assistant' ); ?></h4>
							<p style="margin: 0; color: #666; font-size: 13px;"><?php esc_html_e( 'Post-project support and maintenance available', 'aica-smart-ai-commerce-assistant' ); ?></p>
						</div>
					</div>
				</div>

				<!-- Call to Action -->
				<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 12px; text-align: center; color: white; margin: 30px 0;">
					<h2 style="margin: 0 0 15px 0; color: white; font-size: 24px;">
						<?php esc_html_e( 'Ready to Take Your Store to the Next Level?', 'aica-smart-ai-commerce-assistant' ); ?>
					</h2>
					<p style="margin: 0 0 25px 0; font-size: 16px; opacity: 0.95;">
						<?php esc_html_e( 'Let\'s build something amazing together. Contact me today for a free consultation!', 'aica-smart-ai-commerce-assistant' ); ?>
					</p>
					<a href="https://linkedin.com/in/giuseppe-musolino-7419b02b" 
					   target="_blank" 
					   rel="noopener noreferrer"
					   class="button button-large"
					   style="background: white; border-color: white; color: #667eea; text-decoration: none; display: inline-block; font-weight: 600; padding: 12px 30px;">
						<?php esc_html_e( 'Get Started Now', 'aica-smart-ai-commerce-assistant' ); ?> →
					</a>
				</div>
			</div>
		</div>
		<?php
	}
}