<?php
/**
 * Behavior Analytics page — Stitch Design System.
 *
 * @package AccessIQ
 */
defined( 'ABSPATH' ) || exit;

global $wpdb;
$accessiq_days         = AccessIQ_Analytics_Menu::get_validated_analytics_days();
$accessiq_sessions_tbl = $wpdb->prefix . 'accessiq_sessions';
$accessiq_clicks_tbl   = $wpdb->prefix . 'accessiq_clicks';
$accessiq_cutoff       = gmdate( 'Y-m-d H:i:s', strtotime( '-' . $accessiq_days . ' days', current_time( 'timestamp' ) ) );

// ── Top pages ──────────────────────────────────────────────────────────────
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery,WordPress.DB.DirectDatabaseQuery.NoCaching
$accessiq_top_pages = $wpdb->get_results( $wpdb->prepare(
	'SELECT
		t.page_url,
		COUNT(*) AS sessions,
		AVG(t.time_spent) AS avg_duration,
		SUM(CASE WHEN t.is_bounce = 1 THEN 1 ELSE 0 END) AS bounces,
		(SELECT s2.device_type FROM `' . esc_sql( $accessiq_sessions_tbl ) . '` s2
		 WHERE s2.page_url = t.page_url
		   AND s2.created_at >= %s
		 GROUP BY s2.device_type ORDER BY COUNT(*) DESC LIMIT 1) AS device_type
	FROM `' . esc_sql( $accessiq_sessions_tbl ) . '` t
	WHERE t.created_at >= %s
	  AND t.page_url IS NOT NULL AND TRIM(t.page_url) != \'\'
	GROUP BY t.page_url
	ORDER BY sessions DESC
	LIMIT 10',
	$accessiq_cutoff,
	$accessiq_cutoff
) );

// ── KPI: Total sessions ────────────────────────────────────────────────────
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery,WordPress.DB.DirectDatabaseQuery.NoCaching
$accessiq_stat_total_sessions = (int) $wpdb->get_var( $wpdb->prepare(
	'SELECT COUNT(*) FROM `' . esc_sql( $accessiq_sessions_tbl ) . '` WHERE created_at >= %s',
	$accessiq_cutoff
) );

// ── KPI: Avg time ──────────────────────────────────────────────────────────
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery,WordPress.DB.DirectDatabaseQuery.NoCaching
$accessiq_stat_avg_time_raw  = $wpdb->get_var( $wpdb->prepare(
	'SELECT AVG(time_spent) FROM `' . esc_sql( $accessiq_sessions_tbl ) . '` WHERE created_at >= %s AND time_spent < 3600',
	$accessiq_cutoff
) );
$accessiq_stat_avg_time_secs = $accessiq_stat_avg_time_raw ? (int) round( (float) $accessiq_stat_avg_time_raw ) : 0;
$accessiq_stat_avg_time      = $accessiq_stat_avg_time_secs >= 60
	? ( floor( $accessiq_stat_avg_time_secs / 60 ) . 'm ' . ( $accessiq_stat_avg_time_secs % 60 ) . 's' )
	: ( $accessiq_stat_avg_time_secs . 's' );

// ── KPI: Bounce rate ───────────────────────────────────────────────────────
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery,WordPress.DB.DirectDatabaseQuery.NoCaching
$accessiq_stat_bounces     = (int) $wpdb->get_var( $wpdb->prepare(
	'SELECT COUNT(*) FROM `' . esc_sql( $accessiq_sessions_tbl ) . '` WHERE created_at >= %s AND is_bounce = 1',
	$accessiq_cutoff
) );
$accessiq_stat_bounce_rate = $accessiq_stat_total_sessions > 0
	? round( ( $accessiq_stat_bounces / $accessiq_stat_total_sessions ) * 100 )
	: 0;
$accessiq_br_cls           = $accessiq_stat_bounce_rate > 70 ? 'aiq-ba-val--red' : ( $accessiq_stat_bounce_rate >= 40 ? 'aiq-ba-val--amber' : 'aiq-ba-val--green' );
$accessiq_br_hint          = $accessiq_stat_bounce_rate > 70
	? __( 'High — review content', 'accessiq' )
	: ( $accessiq_stat_bounce_rate >= 40 ? __( 'Average range', 'accessiq' ) : __( 'Excellent engagement', 'accessiq' ) );

// ── KPI: Top device (kept for JS compat, moved to hidden) ─────────────────
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery,WordPress.DB.DirectDatabaseQuery.NoCaching
$accessiq_stat_top_device = $wpdb->get_var( $wpdb->prepare(
	'SELECT device_type FROM `' . esc_sql( $accessiq_sessions_tbl ) . '` WHERE created_at >= %s GROUP BY device_type ORDER BY COUNT(*) DESC LIMIT 1',
	$accessiq_cutoff
) );
$accessiq_stat_top_device = $accessiq_stat_top_device ? $accessiq_stat_top_device : '—';

// ── KPI: Total clicks ─────────────────────────────────────────────────────
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery,WordPress.DB.DirectDatabaseQuery.NoCaching
$accessiq_stat_total_clicks = (int) $wpdb->get_var( $wpdb->prepare(
	'SELECT COUNT(*) FROM `' . esc_sql( $accessiq_clicks_tbl ) . '` WHERE created_at >= %s',
	$accessiq_cutoff
) );

$accessiq_current_days = $accessiq_days;

// ── Data retention ────────────────────────────────────────────────────────
$accessiq_retention_days = absint( get_option( 'accessiq_analytics_data_retention', 90 ) );
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery,WordPress.DB.DirectDatabaseQuery.NoCaching,WordPress.DB.PreparedSQL.NotPrepared
$accessiq_oldest_raw = $wpdb->get_var( 'SELECT MIN(created_at) FROM `' . esc_sql( $accessiq_sessions_tbl ) . '`' );
$accessiq_days_stored    = $accessiq_oldest_raw
	? (int) ceil( ( time() - strtotime( $accessiq_oldest_raw ) ) / DAY_IN_SECONDS )
	: 0;
$accessiq_retention_pct  = $accessiq_retention_days > 0
	? min( 100, (int) round( ( $accessiq_days_stored / $accessiq_retention_days ) * 100 ) )
	: 0;

// ── Sparklines: last 7-day session counts ─────────────────────────────────
$accessiq_spark_cutoff = gmdate( 'Y-m-d H:i:s', strtotime( '-7 days', current_time( 'timestamp' ) ) );
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery,WordPress.DB.DirectDatabaseQuery.NoCaching
$accessiq_spark_raw = $wpdb->get_results(
	$wpdb->prepare(
		// phpcs:ignore WordPress.DB.PreparedSQL.InterpolatedNotPrepared
		'SELECT DATE(created_at) AS day, COUNT(*) AS cnt FROM `' . esc_sql( $accessiq_sessions_tbl ) . '` WHERE created_at >= %s GROUP BY DATE(created_at) ORDER BY day ASC',
		$accessiq_spark_cutoff
	)
);
$accessiq_spark_map = array();
foreach ( (array) $accessiq_spark_raw as $accessiq_spark_row ) {
	$accessiq_spark_map[ $accessiq_spark_row->day ] = (int) $accessiq_spark_row->cnt;
}
$accessiq_spark_vals = array();
for ( $accessiq_si = 6; $accessiq_si >= 0; $accessiq_si-- ) {
	$accessiq_spark_vals[] = isset( $accessiq_spark_map[ gmdate( 'Y-m-d', strtotime( '-' . $accessiq_si . ' days' ) ) ] )
		? (int) $accessiq_spark_map[ gmdate( 'Y-m-d', strtotime( '-' . $accessiq_si . ' days' ) ) ]
		: 0;
}
$accessiq_spark_max = max( array_merge( array( 1 ), $accessiq_spark_vals ) );

// ── Export nonce ──────────────────────────────────────────────────────────
$accessiq_export_nonce = wp_create_nonce( 'accessiq_export_nonce' );
?>

<div class="wrap aiq-wrap aiq-ba-wrap">

  <!-- ── Page Header ────────────────────────────────────────────────── -->
  <div class="aiq-ba-header">
    <div class="aiq-ba-header-left">
      <div class="aiq-ba-title-row">
        <h1 class="aiq-ba-title"><?php esc_html_e( 'Behavior Analytics', 'accessiq' ); ?></h1>
        <span class="aiq-ba-live-badge">
          <span class="aiq-ba-live-dot"></span>
          <?php esc_html_e( 'LIVE', 'accessiq' ); ?>
        </span>
      </div>
      <p class="aiq-ba-subtitle"><?php esc_html_e( 'Detailed user interaction patterns and accessibility session metrics.', 'accessiq' ); ?></p>
    </div>
    <div class="aiq-ba-header-right">
      <span class="aiq-ba-updated-pill">
        <?php esc_html_e( 'Last updated: Just now', 'accessiq' ); ?>
      </span>
      <form method="get" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" class="aiq-ba-export-form">
        <input type="hidden" name="action" value="accessiq_export_sessions_csv">
        <input type="hidden" name="nonce" value="<?php echo esc_attr( $accessiq_export_nonce ); ?>">
        <button type="submit" class="aiq-ba-btn-secondary">
          <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          <?php esc_html_e( 'Export CSV', 'accessiq' ); ?>
        </button>
      </form>
    </div>
  </div>

  <!-- ── Privacy Banner ─────────────────────────────────────────────── -->
  <div class="aiq-ba-privacy-banner" id="aiq-ba-privacy-banner">
    <div class="aiq-ba-privacy-left">
      <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
      <svg class="aiq-ba-privacy-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#57f1db" stroke-width="1.8" aria-hidden="true" focusable="false"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
      <div>
        <strong class="aiq-ba-privacy-title"><?php esc_html_e( 'Privacy-First Data Architecture', 'accessiq' ); ?></strong>
        <span class="aiq-ba-privacy-sub"><?php esc_html_e( 'All data stored locally on your WordPress server. No third-party data leaks.', 'accessiq' ); ?></span>
      </div>
    </div>
    <button type="button" class="aiq-ba-privacy-dismiss" id="aiq-ba-privacy-dismiss" aria-label="<?php esc_attr_e( 'Dismiss privacy banner', 'accessiq' ); ?>">&#x2715;</button>
  </div>

  <!-- ── Date Filter Pills ──────────────────────────────────────────── -->
  <div class="aiq-ba-filter-row">
    <div id="aiq-rep-daterange" class="aiq-ba-filter-pills">
      <?php foreach ( array( 7, 30, 90 ) as $accessiq_fd ) : ?>
        <a
          href="<?php echo esc_url( AccessIQ_Analytics_Menu::get_analytics_days_filter_url( $accessiq_fd ) ); ?>"
          class="aiq-ba-filter-pill aiq-btn-outline<?php echo $accessiq_current_days === $accessiq_fd ? ' active' : ''; ?>"
        ><?php echo (int) $accessiq_fd; ?>D</a>
      <?php endforeach; ?>
    </div>
  </div>

  <!-- ── KPI Stats Row ──────────────────────────────────────────────── -->
  <div class="aiq-ba-kpi-grid">

    <!-- Card 1: Total Sessions -->
    <div class="aiq-ba-kpi-card">
      <div class="aiq-ba-kpi-icon aiq-ba-kpi-icon--blue">
        <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
      </div>
      <div class="aiq-ba-kpi-body">
        <span class="aiq-ba-kpi-label"><?php esc_html_e( 'TOTAL SESSIONS', 'accessiq' ); ?></span>
        <span class="aiq-ba-kpi-val" id="aiq-stat-sessions"><?php echo (int) $accessiq_stat_total_sessions; ?></span>
        <span class="aiq-ba-kpi-sub"><?php printf( /* translators: %d: number of days */ esc_html__( 'Last %d days', 'accessiq' ), (int) $accessiq_current_days ); ?></span>
      </div>
      <div class="aiq-ba-sparkline">
        <?php foreach ( $accessiq_spark_vals as $accessiq_sv ) :
          $accessiq_bar_h = $accessiq_spark_max > 0 ? max( 3, (int) round( ( $accessiq_sv / $accessiq_spark_max ) * 28 ) ) : 3;
        ?>
          <div class="aiq-ba-spark-bar" style="height:<?php echo (int) $accessiq_bar_h; ?>px"></div>
        <?php endforeach; ?>
      </div>
    </div>

    <!-- Card 2: Avg Time on Page -->
    <div class="aiq-ba-kpi-card">
      <div class="aiq-ba-kpi-icon aiq-ba-kpi-icon--teal">
        <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      </div>
      <div class="aiq-ba-kpi-body">
        <span class="aiq-ba-kpi-label"><?php esc_html_e( 'AVG. TIME ON PAGE', 'accessiq' ); ?></span>
        <span class="aiq-ba-kpi-val" id="aiq-rep-time"><?php echo esc_html( $accessiq_stat_avg_time ); ?></span>
        <span class="aiq-ba-kpi-sub"><?php esc_html_e( 'Per session', 'accessiq' ); ?></span>
      </div>
      <div class="aiq-ba-sparkline">
        <?php foreach ( $accessiq_spark_vals as $accessiq_sv ) :
          $accessiq_bar_h = $accessiq_spark_max > 0 ? max( 3, (int) round( ( $accessiq_sv / $accessiq_spark_max ) * 28 ) ) : 3;
        ?>
          <div class="aiq-ba-spark-bar aiq-ba-spark-bar--teal" style="height:<?php echo (int) $accessiq_bar_h; ?>px"></div>
        <?php endforeach; ?>
      </div>
    </div>

    <!-- Card 3: Bounce Rate -->
    <div class="aiq-ba-kpi-card">
      <div class="aiq-ba-kpi-icon aiq-ba-kpi-icon--red">
        <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>
      </div>
      <div class="aiq-ba-kpi-body">
        <span class="aiq-ba-kpi-label"><?php esc_html_e( 'BOUNCE RATE', 'accessiq' ); ?></span>
        <span class="aiq-ba-kpi-val <?php echo esc_attr( $accessiq_br_cls ); ?>" id="aiq-stat-bounce-rate"><?php echo (int) $accessiq_stat_bounce_rate; ?>%</span>
        <span class="aiq-ba-kpi-sub"><?php echo esc_html( $accessiq_br_hint ); ?></span>
      </div>
      <div class="aiq-ba-sparkline">
        <?php foreach ( $accessiq_spark_vals as $accessiq_sv ) :
          $accessiq_bar_h = $accessiq_spark_max > 0 ? max( 3, (int) round( ( $accessiq_sv / $accessiq_spark_max ) * 28 ) ) : 3;
        ?>
          <div class="aiq-ba-spark-bar aiq-ba-spark-bar--red" style="height:<?php echo (int) $accessiq_bar_h; ?>px"></div>
        <?php endforeach; ?>
      </div>
    </div>

    <!-- Card 4: Total Clicks -->
    <div class="aiq-ba-kpi-card">
      <div class="aiq-ba-kpi-icon aiq-ba-kpi-icon--purple">
        <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/></svg>
      </div>
      <div class="aiq-ba-kpi-body">
        <span class="aiq-ba-kpi-label"><?php esc_html_e( 'TOTAL CLICKS', 'accessiq' ); ?></span>
        <span class="aiq-ba-kpi-val aiq-ba-val--purple" id="aiq-stat-clicks"><?php echo (int) $accessiq_stat_total_clicks; ?></span>
        <span class="aiq-ba-kpi-sub"><?php printf( /* translators: %d: number of days */ esc_html__( 'Last %d days', 'accessiq' ), (int) $accessiq_current_days ); ?></span>
      </div>
      <div class="aiq-ba-sparkline">
        <?php foreach ( $accessiq_spark_vals as $accessiq_sv ) :
          $accessiq_bar_h = $accessiq_spark_max > 0 ? max( 3, (int) round( ( $accessiq_sv / $accessiq_spark_max ) * 28 ) ) : 3;
        ?>
          <div class="aiq-ba-spark-bar aiq-ba-spark-bar--purple" style="height:<?php echo (int) $accessiq_bar_h; ?>px"></div>
        <?php endforeach; ?>
      </div>
    </div>

  </div><!-- .aiq-ba-kpi-grid -->

  <!-- ── Main Grid: Charts ──────────────────────────────────────────── -->
  <div class="aiq-ba-grid">

    <!-- Card A: Daily Sessions Chart (8 cols) -->
    <div class="aiq-ba-chart-card aiq-ba-col-8">
      <div class="aiq-ba-chart-header">
        <div>
          <h3 class="aiq-ba-chart-title" role="heading" aria-level="2"><?php esc_html_e( 'Daily Sessions', 'accessiq' ); ?></h3>
          <p class="aiq-ba-chart-sub"><?php esc_html_e( 'Visitor activity over selected period', 'accessiq' ); ?></p>
        </div>
        <div class="aiq-ba-chart-legend">
          <span class="aiq-ba-legend-line"></span>
          <?php esc_html_e( 'Sessions', 'accessiq' ); ?>
        </div>
      </div>
      <div class="aiq-ba-chart-canvas-wrap">
        <canvas id="aiq-sessions-chart"></canvas>
      </div>
    </div>

    <!-- Card B: Device Breakdown (4 cols) -->
    <div class="aiq-ba-chart-card aiq-ba-col-4">
      <div class="aiq-ba-chart-header">
        <div>
          <h3 class="aiq-ba-chart-title"><?php esc_html_e( 'Device Breakdown', 'accessiq' ); ?></h3>
          <p class="aiq-ba-chart-sub"><?php esc_html_e( 'Sessions by device type', 'accessiq' ); ?></p>
        </div>
      </div>
      <div class="aiq-ba-device-wrap">
        <canvas id="aiq-ba-device-chart"></canvas>
      </div>
      <div class="aiq-ba-device-legend">
        <span class="aiq-ba-legend-item">
          <span class="aiq-ba-legend-dot aiq-ba-legend-dot--desktop"></span>
          <?php esc_html_e( 'Desktop', 'accessiq' ); ?>
        </span>
        <span class="aiq-ba-legend-item">
          <span class="aiq-ba-legend-dot aiq-ba-legend-dot--mobile"></span>
          <?php esc_html_e( 'Mobile', 'accessiq' ); ?>
        </span>
        <span class="aiq-ba-legend-item">
          <span class="aiq-ba-legend-dot aiq-ba-legend-dot--tablet"></span>
          <?php esc_html_e( 'Tablet', 'accessiq' ); ?>
        </span>
      </div>
    </div>

  </div><!-- .aiq-ba-grid -->

  <!-- ── Top Pages Table ────────────────────────────────────────────── -->
  <div class="aiq-ba-table-card">
    <div class="aiq-ba-table-header">
      <h3 class="aiq-ba-chart-title"><?php esc_html_e( 'Top Pages Performance', 'accessiq' ); ?></h3>
      <span class="aiq-ba-table-sub"><?php esc_html_e( 'Ranked by session count', 'accessiq' ); ?></span>
    </div>
    <div class="aiq-ba-table-wrap">
      <table class="aiq-ba-table">
        <thead>
          <tr>
            <th><?php esc_html_e( 'PAGE URL', 'accessiq' ); ?></th>
            <th><?php esc_html_e( 'SESSIONS', 'accessiq' ); ?></th>
            <th><?php esc_html_e( 'AVG TIME', 'accessiq' ); ?></th>
            <th><?php esc_html_e( 'BOUNCE RATE', 'accessiq' ); ?></th>
            <th><?php esc_html_e( 'TOP DEVICE', 'accessiq' ); ?></th>
          </tr>
        </thead>
        <tbody id="aiq-rep-pages-body">
          <?php if ( empty( $accessiq_top_pages ) ) : ?>
            <tr>
              <td colspan="5" class="aiq-ba-table-empty">
                <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
                <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#57f1db" stroke-width="1.5" aria-hidden="true" focusable="false"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
                <p><?php esc_html_e( 'No page data yet for this period.', 'accessiq' ); ?></p>
                <span><?php esc_html_e( 'Visitors will appear here after browsing your site.', 'accessiq' ); ?></span>
              </td>
            </tr>
          <?php else : ?>
            <?php foreach ( $accessiq_top_pages as $accessiq_pg ) :
              $accessiq_path     = wp_parse_url( $accessiq_pg->page_url, PHP_URL_PATH );
              $accessiq_path     = ( is_string( $accessiq_path ) && $accessiq_path !== '' ) ? $accessiq_path : '/';
              $accessiq_avg_secs = (int) $accessiq_pg->avg_duration;
              $accessiq_avg_time = $accessiq_avg_secs >= 60
                ? ( floor( $accessiq_avg_secs / 60 ) . 'm ' . ( $accessiq_avg_secs % 60 ) . 's' )
                : ( $accessiq_avg_secs . 's' );
              $accessiq_pg_bounces     = isset( $accessiq_pg->bounces ) ? (int) $accessiq_pg->bounces : 0;
              $accessiq_pg_sessions    = isset( $accessiq_pg->sessions ) ? (int) $accessiq_pg->sessions : 0;
              $accessiq_bounce_pct     = $accessiq_pg_sessions > 0 ? round( ( $accessiq_pg_bounces / $accessiq_pg_sessions ) * 100 ) : 0;
              $accessiq_bounce_cls     = $accessiq_bounce_pct > 60 ? 'aiq-ba-br--red' : ( $accessiq_bounce_pct >= 30 ? 'aiq-ba-br--amber' : 'aiq-ba-br--green' );
              $accessiq_pg_device      = isset( $accessiq_pg->device_type ) ? $accessiq_pg->device_type : 'desktop';
              $accessiq_pg_device_map  = array( 'desktop' => '💻', 'mobile' => '📱', 'tablet' => '📟' );
              $accessiq_pg_icon        = isset( $accessiq_pg_device_map[ strtolower( $accessiq_pg_device ) ] ) ? $accessiq_pg_device_map[ strtolower( $accessiq_pg_device ) ] : '💻';
            ?>
            <tr class="aiq-ba-table-row">
              <td class="aiq-ba-td-url">
                <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#859490" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                <span title="<?php echo esc_attr( $accessiq_pg->page_url ); ?>"><?php echo esc_html( $accessiq_path ); ?></span>
              </td>
              <td class="aiq-ba-td-num"><?php echo (int) $accessiq_pg->sessions; ?></td>
              <td class="aiq-ba-td-time"><?php echo esc_html( $accessiq_avg_time ); ?></td>
              <td>
                <div class="aiq-ba-bounce-row">
                  <span class="aiq-ba-bounce-pct <?php echo esc_attr( $accessiq_bounce_cls ); ?>"><?php echo (int) $accessiq_bounce_pct; ?>%</span>
                  <div class="aiq-ba-bounce-bar">
                    <div class="aiq-ba-bounce-bar-fill <?php echo esc_attr( $accessiq_bounce_cls ); ?>" style="width:<?php echo (int) min( 100, $accessiq_bounce_pct ); ?>%"></div>
                  </div>
                </div>
              </td>
              <td class="aiq-ba-td-device"><?php echo esc_html( $accessiq_pg_icon . ' ' . ucfirst( $accessiq_pg_device ) ); ?></td>
            </tr>
            <?php endforeach; ?>
          <?php endif; ?>
        </tbody>
      </table>
    </div>
  </div>

  <!-- ── Insights Row ───────────────────────────────────────────────── -->
  <div class="aiq-ba-insights-row">

    <!-- Card 1: Trend -->
    <div class="aiq-ba-insight-card aiq-ba-trend-card">
      <div class="aiq-ba-insight-icon">
        <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#57f1db" stroke-width="2" aria-hidden="true" focusable="false"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
      </div>
      <div class="aiq-ba-insight-label"><?php esc_html_e( 'Trend Detected', 'accessiq' ); ?></div>
      <div class="aiq-ba-insight-body" id="aiq-ba-trend-body">
        <?php esc_html_e( 'Traffic is stable', 'accessiq' ); ?>
      </div>
    </div>

    <!-- Card 2: Data Storage -->
    <div class="aiq-ba-insight-card">
      <div class="aiq-ba-insight-icon">
        <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#57f1db" stroke-width="2" aria-hidden="true" focusable="false"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
      </div>
      <div class="aiq-ba-insight-label"><?php esc_html_e( 'Data Storage', 'accessiq' ); ?></div>
      <div class="aiq-ba-storage-bar-wrap">
        <div class="aiq-ba-storage-bar">
          <div class="aiq-ba-storage-fill" style="width:<?php echo (int) $accessiq_retention_pct; ?>%"></div>
        </div>
        <span class="aiq-ba-storage-pct"><?php echo (int) $accessiq_retention_pct; ?>%</span>
      </div>
      <p class="aiq-ba-storage-info">
        <?php printf(
          /* translators: %d: number of days stored */
          esc_html__( '%d days of data stored', 'accessiq' ),
          (int) $accessiq_days_stored
        ); ?>
      </p>
      <p class="aiq-ba-storage-info aiq-ba-storage-info--sub">
        <?php printf(
          /* translators: %d: retention days setting */
          esc_html__( 'Retention set to %d days', 'accessiq' ),
          (int) $accessiq_retention_days
        ); ?>
      </p>
    </div>

    <!-- Card 3: Quick Actions -->
    <div class="aiq-ba-insight-card">
      <div class="aiq-ba-insight-icon">
        <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#57f1db" stroke-width="2" aria-hidden="true" focusable="false"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
      </div>
      <div class="aiq-ba-insight-label"><?php esc_html_e( 'Quick Actions', 'accessiq' ); ?></div>
      <div class="aiq-ba-quick-actions">
        <a href="<?php echo esc_url( admin_url( 'admin.php?page=accessiq-heatmap' ) ); ?>" class="aiq-ba-action-link">
          <?php esc_html_e( 'View Heatmap', 'accessiq' ); ?> &rarr;
        </a>
        <a href="<?php echo esc_url( admin_url( 'admin.php?page=accessiq-journey' ) ); ?>" class="aiq-ba-action-link">
          <?php esc_html_e( 'View Journey Tracker', 'accessiq' ); ?> &rarr;
        </a>
      </div>
    </div>

  </div><!-- .aiq-ba-insights-row -->

  <!-- Hidden spans for JS backward compatibility (analytics-reports.js) -->
  <span id="aiq-rep-total" hidden></span>
  <span id="aiq-rep-bounce" hidden></span>
  <span id="aiq-rep-topdev" hidden><?php echo esc_html( $accessiq_stat_top_device ); ?></span>

</div><!-- .aiq-ba-wrap -->