<?php
/**
 * Heatmaps Views Trait
 *
 * Provides rendering methods for heatmaps page.
 *
 * @package Opti_Behavior
 * @copyright 2025 OptiUser
 * @version 1.0.3
 */

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

if ( ! trait_exists( 'Opti_Behavior_Heatmaps_Views_Trait' ) ) {
	/**
	 * Heatmaps Views Trait
	 *
	 * Provides methods for rendering heatmaps page components.
	 *
	 * @since 1.0.0
	 */
	trait Opti_Behavior_Heatmaps_Views_Trait {

		/**
		 * Render heatmaps page header.
		 *
		 * @since 1.0.0
		 */
		private function render_heatmaps_header() {
			$tooltips = opti_behavior_get_heatmaps_tooltips();
			?>
			<div class="heatmaps-header">
				<div class="heatmaps-header-content">
					<div class="heatmaps-title-section">
						<div class="heatmaps-icon"><i data-lucide="flame"></i></div>
						<div class="heatmaps-title-text">
							<h1 class="heatmaps-title"><?php esc_html_e( 'Heatmaps', 'opti-behavior' ); ?><?php opti_behavior_tooltip_e( $tooltips['heatmap_overview']['title'], $tooltips['heatmap_overview']['content'], $tooltips['heatmap_overview']['simple'], '', array( 'position' => 'bottom' ) ); ?></h1>
							<div class="heatmaps-subtitle"><?php esc_html_e( 'View and analyze user interaction heatmaps', 'opti-behavior' ); ?></div>
						</div>
					</div>
				</div>
			</div>
			<?php
		}

		/**
		 * Render heatmaps statistics section.
		 *
		 * @since 1.0.0
		 */
		private function render_heatmaps_stats() {
			$stats = $this->get_heatmap_statistics();
			$tooltips = opti_behavior_get_heatmaps_tooltips();
			?>
			<div class="heatmaps-stats">
				<div class="stats-grid">
					<div class="stat-card">
						<div class="stat-icon"><i data-lucide="flame"></i></div>
						<div class="stat-content">
							<div class="stat-number"><?php echo esc_html( $stats['total_heatmaps'] ); ?></div>
							<div class="stat-label"><?php esc_html_e( 'Total Heatmaps', 'opti-behavior' ); ?><?php opti_behavior_tooltip_e( $tooltips['total_heatmaps']['title'], $tooltips['total_heatmaps']['content'], $tooltips['total_heatmaps']['simple'], '', array( 'position' => 'bottom' ) ); ?></div>
							<div class="stat-change <?php echo $stats['heatmaps_growth'] >= 0 ? 'positive' : 'negative'; ?>"><?php
								$change_text = $stats['heatmaps_growth'] > 0 ? '+' . $stats['heatmaps_growth'] : $stats['heatmaps_growth'];
								echo esc_html( $change_text );
							?>% <?php esc_html_e( 'this week', 'opti-behavior' ); ?></div>
						</div>
					</div>

					<div class="stat-card">
						<div class="stat-icon"><i data-lucide="mouse-pointer-click"></i></div>
						<div class="stat-content">
							<div class="stat-number"><?php echo esc_html( number_format( $stats['total_clicks'] ) ); ?></div>
							<div class="stat-label"><?php esc_html_e( 'Total Clicks', 'opti-behavior' ); ?><?php opti_behavior_tooltip_e( $tooltips['total_clicks']['title'], $tooltips['total_clicks']['content'], $tooltips['total_clicks']['simple'], '', array( 'position' => 'bottom' ) ); ?></div>
							<div class="stat-change <?php echo $stats['clicks_growth'] >= 0 ? 'positive' : 'negative'; ?>"><?php
								$change_text = $stats['clicks_growth'] > 0 ? '+' . $stats['clicks_growth'] : $stats['clicks_growth'];
								echo esc_html( $change_text );
							?>% <?php esc_html_e( 'this week', 'opti-behavior' ); ?></div>
						</div>
					</div>

					<div class="stat-card">
						<div class="stat-icon"><i data-lucide="smartphone"></i></div>
						<div class="stat-content">
							<div class="stat-number"><?php echo esc_html( $stats['mobile_percentage'] ); ?>%</div>
							<div class="stat-label"><?php esc_html_e( 'Mobile Traffic', 'opti-behavior' ); ?><?php opti_behavior_tooltip_e( $tooltips['mobile_traffic']['title'], $tooltips['mobile_traffic']['content'], $tooltips['mobile_traffic']['simple'], '', array( 'position' => 'bottom' ) ); ?></div>
							<div class="stat-change <?php echo $stats['mobile_change'] >= 0 ? 'positive' : 'negative'; ?>"><?php
								$change_text = $stats['mobile_change'] > 0 ? '+' . $stats['mobile_change'] : $stats['mobile_change'];
								echo esc_html( $change_text );
							?>% <?php esc_html_e( 'this week', 'opti-behavior' ); ?></div>
						</div>
					</div>

					<div class="stat-card">
						<div class="stat-icon"><i data-lucide="clock"></i></div>
						<div class="stat-content">
							<div class="stat-number"><?php echo esc_html( $stats['avg_time'] ); ?>s</div>
							<div class="stat-label"><?php esc_html_e( 'Avg. Time on Page', 'opti-behavior' ); ?><?php opti_behavior_tooltip_e( $tooltips['avg_time_on_page']['title'], $tooltips['avg_time_on_page']['content'], $tooltips['avg_time_on_page']['simple'], '', array( 'position' => 'bottom' ) ); ?></div>
							<div class="stat-change <?php echo $stats['time_improvement'] >= 0 ? 'positive' : 'negative'; ?>"><?php
								$change_text = $stats['time_improvement'] > 0 ? '+' . $stats['time_improvement'] : $stats['time_improvement'];
								echo esc_html( $change_text );
							?>% <?php esc_html_e( 'this week', 'opti-behavior' ); ?></div>
						</div>
					</div>

					<div class="stat-card">
						<div class="stat-icon"><i data-lucide="target"></i></div>
						<div class="stat-content">
							<div class="stat-number"><?php echo esc_html( $stats['hottest_page_clicks'] ); ?></div>
							<div class="stat-label"><?php esc_html_e( 'Hottest Page', 'opti-behavior' ); ?><?php opti_behavior_tooltip_e( $tooltips['hottest_page']['title'], $tooltips['hottest_page']['content'], $tooltips['hottest_page']['simple'], '', array( 'position' => 'bottom' ) ); ?></div>
							<div class="stat-change neutral"><?php echo esc_html( $stats['hottest_page_name'] ); ?></div>
						</div>
					</div>

					<div class="stat-card">
						<div class="stat-icon"><i data-lucide="bar-chart-3"></i></div>
						<div class="stat-content">
							<div class="stat-number"><?php echo esc_html( $stats['conversion_rate'] ); ?>%</div>
							<div class="stat-label"><?php esc_html_e( 'Click-through Rate', 'opti-behavior' ); ?><?php opti_behavior_tooltip_e( $tooltips['click_through_rate']['title'], $tooltips['click_through_rate']['content'], $tooltips['click_through_rate']['simple'], '', array( 'position' => 'bottom' ) ); ?></div>
							<div class="stat-change <?php echo $stats['ctr_improvement'] >= 0 ? 'positive' : 'negative'; ?>"><?php
								$change_text = $stats['ctr_improvement'] > 0 ? '+' . $stats['ctr_improvement'] : $stats['ctr_improvement'];
								echo esc_html( $change_text );
							?>% <?php esc_html_e( 'this week', 'opti-behavior' ); ?></div>
						</div>
					</div>
				</div>
			</div>
			<?php
		}

		/**
		 * Render heatmaps content section.
		 *
		 * @since 1.0.0
		 */
		private function render_heatmaps_content() {
			$tooltips = opti_behavior_get_heatmaps_tooltips();
			?>
			<div class="heatmaps-content">
				<div class="heatmaps-panel">
					<div class="panel-header">
						<h3 class="panel-title">
							<i data-lucide="folder-open"></i>
							<?php esc_html_e( 'Available Heatmaps', 'opti-behavior' ); ?><?php opti_behavior_tooltip_e( $tooltips['available_heatmaps']['title'], $tooltips['available_heatmaps']['content'], $tooltips['available_heatmaps']['simple'], '', array( 'position' => 'bottom' ) ); ?>
						</h3>
						<div class="heatmaps-search-wrapper">
							<i data-lucide="search" class="heatmaps-search-icon" style="color: #6366f1;"></i>
							<input type="text"
								   id="heatmaps-search"
								   class="heatmaps-search-input"
								   placeholder="<?php esc_attr_e( 'Search heatmaps...', 'opti-behavior' ); ?>"
								   autocomplete="off" />
						</div>
					</div>

					<?php $this->render_simplified_heatmap_table(); ?>
				</div>
			</div>
			<?php
		}
	}
}

