<?php
/**
 * AccessIQ — Overview page (Stitch Design System).
 *
 * @package AccessIQ
 */
if ( ! defined( 'ABSPATH' ) ) { exit; }

global $wpdb;
$accessiq_settings = AccessIQ_Settings::instance();

// ── Accessibility stats ──────────────────────────────────────────
$accessiq_total_scans = (int) wp_count_posts( ACCESSIQ_SCAN_CPT )->publish;
$accessiq_last_scan   = get_posts( array(
	'post_type'      => ACCESSIQ_SCAN_CPT,
	'posts_per_page' => 1,
	'orderby'        => 'date',
	'order'          => 'DESC',
) );
$accessiq_last_scan_date   = ! empty( $accessiq_last_scan ) ? human_time_diff( get_post_time( 'U', false, $accessiq_last_scan[0] ), current_time( 'timestamp' ) ) . ' ' . __( 'ago', 'accessiq' ) : __( 'Never', 'accessiq' ); // phpcs:ignore WordPress.DateTime.CurrentTimeTimestamp.Requested
$accessiq_last_scan_errors = 0;
$accessiq_last_scan_warns  = 0;
if ( ! empty( $accessiq_last_scan ) ) {
	$accessiq_issues_table = $wpdb->prefix . 'accessiq_issues';
	$accessiq_scan_id      = (int) $accessiq_last_scan[0]->ID;

	// Use severity column if it exists (added in DB v1.2), fall back to level.
	$accessiq_has_severity = (bool) $wpdb->get_var( // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.NotPrepared
		"SELECT COUNT(*) FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = '" . esc_sql( $accessiq_issues_table ) . "' AND COLUMN_NAME = 'severity'"
	);

	if ( $accessiq_has_severity ) {
		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotPrepared
		$accessiq_last_scan_errors = (int) $wpdb->get_var( $wpdb->prepare( 'SELECT COUNT(id) FROM `' . esc_sql( $accessiq_issues_table ) . '` WHERE scan_id = %d AND severity = %s', $accessiq_scan_id, 'error' ) );
		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotPrepared
		$accessiq_last_scan_warns  = (int) $wpdb->get_var( $wpdb->prepare( 'SELECT COUNT(id) FROM `' . esc_sql( $accessiq_issues_table ) . '` WHERE scan_id = %d AND severity = %s', $accessiq_scan_id, 'warning' ) );
	} else {
		// Fallback: Level A = critical errors, AA/AAA = warnings.
		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotPrepared
		$accessiq_last_scan_errors = (int) $wpdb->get_var( $wpdb->prepare( 'SELECT COUNT(id) FROM `' . esc_sql( $accessiq_issues_table ) . '` WHERE scan_id = %d AND level = %s', $accessiq_scan_id, 'A' ) );
		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotPrepared
		$accessiq_last_scan_warns  = (int) $wpdb->get_var( $wpdb->prepare( 'SELECT COUNT(id) FROM `' . esc_sql( $accessiq_issues_table ) . '` WHERE scan_id = %d AND level != %s', $accessiq_scan_id, 'A' ) );
	}

	// ── Debug: log actual issue_type values (temporary — remove after confirming) ──
	if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotPrepared
		$accessiq_debug_types = $wpdb->get_results( 'SELECT issue_type, wcag_id, COUNT(*) AS total FROM `' . esc_sql( $accessiq_issues_table ) . '` GROUP BY issue_type, wcag_id ORDER BY total DESC LIMIT 20' );
		// phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_error_log, WordPress.PHP.DevelopmentFunctions.error_log_print_r
		error_log( 'AccessIQ issue_types in DB: ' . print_r( $accessiq_debug_types, true ) );
	}
}
$accessiq_widget_enabled = (bool) $accessiq_settings->get( 'widget_enabled', true );

// ── InsightForge stats (last 7 days) ────────────────────────────
$accessiq_clicks_table   = $wpdb->prefix . 'accessiq_clicks';
$accessiq_sessions_table = $wpdb->prefix . 'accessiq_sessions';

// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.NotPrepared
$accessiq_if_clicks = (int) $wpdb->get_var( 'SELECT COUNT(id) FROM `' . esc_sql( $accessiq_clicks_table ) . '` WHERE created_at >= NOW() - INTERVAL 7 DAY' );
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.NotPrepared
$accessiq_if_sessions = (int) $wpdb->get_var( 'SELECT COUNT(id) FROM `' . esc_sql( $accessiq_sessions_table ) . '` WHERE created_at >= NOW() - INTERVAL 7 DAY' );
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.NotPrepared
$accessiq_if_bounces   = (int) $wpdb->get_var( 'SELECT COUNT(id) FROM `' . esc_sql( $accessiq_sessions_table ) . '` WHERE created_at >= NOW() - INTERVAL 7 DAY AND is_bounce = 1' );
$accessiq_if_bounce_rate = $accessiq_if_sessions > 0 ? round( ( $accessiq_if_bounces / $accessiq_if_sessions ) * 100 ) : 0;
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.NotPrepared
$accessiq_if_top_url  = $wpdb->get_var( 'SELECT page_url FROM `' . esc_sql( $accessiq_clicks_table ) . '` WHERE created_at >= NOW() - INTERVAL 7 DAY GROUP BY page_url ORDER BY COUNT(id) DESC LIMIT 1' );
$accessiq_if_top_page = $accessiq_if_top_url ? preg_replace( '#^https?://[^/]+#', '', $accessiq_if_top_url ) : '—';
$accessiq_if_top_page = mb_strlen( $accessiq_if_top_page ) > 32 ? mb_substr( $accessiq_if_top_page, 0, 32 ) . '…' : $accessiq_if_top_page;

// ── Avg time on page (last 7 days) ───────────────────────────────
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.NotPrepared
$accessiq_avg_time_raw = (int) $wpdb->get_var( 'SELECT AVG(time_spent) FROM `' . esc_sql( $accessiq_sessions_table ) . '` WHERE created_at >= NOW() - INTERVAL 7 DAY AND time_spent > 0' );
if ( $accessiq_avg_time_raw > 0 ) {
	$accessiq_avg_m        = (int) floor( $accessiq_avg_time_raw / 60 );
	$accessiq_avg_s        = $accessiq_avg_time_raw % 60;
	$accessiq_avg_time_fmt = $accessiq_avg_m . 'm ' . str_pad( (string) $accessiq_avg_s, 2, '0', STR_PAD_LEFT ) . 's';
} else {
	$accessiq_avg_time_fmt = '—';
}

// ── Overview: latest scan score + grade + violations by category ──
$accessiq_score = 0;
if ( ! empty( $accessiq_last_scan ) ) {
	$accessiq_score = (int) get_post_meta( $accessiq_last_scan[0]->ID, '_accessiq_score', true );
}
if ( $accessiq_score >= 90 ) {
	$accessiq_grade             = 'Excellent';
	$accessiq_grade_color       = '#10d98e';
	$accessiq_grade_color_stitch = '#57f1db';
} elseif ( $accessiq_score >= 70 ) {
	$accessiq_grade             = 'Good';
	$accessiq_grade_color       = '#10d98e';
	$accessiq_grade_color_stitch = '#57f1db';
} elseif ( $accessiq_score >= 50 ) {
	$accessiq_grade             = 'Fair';
	$accessiq_grade_color       = '#fbbf24';
	$accessiq_grade_color_stitch = '#fbbf24';
} else {
	$accessiq_grade             = 'Poor';
	$accessiq_grade_color       = '#f87171';
	$accessiq_grade_color_stitch = '#f87171';
}

// Bounce rate color (Card B)
if ( $accessiq_if_bounce_rate > 70 ) {
	$accessiq_bounce_color = '#f87171';
} elseif ( $accessiq_if_bounce_rate > 40 ) {
	$accessiq_bounce_color = '#fbbf24';
} else {
	$accessiq_bounce_color = '#57f1db';
}

$accessiq_issues_tbl = $wpdb->prefix . 'accessiq_issues';
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.NotPrepared
$accessiq_issues_by_type = $wpdb->get_results(
	'SELECT
		CASE
			WHEN issue_type LIKE \'%alt%\'
			  OR issue_type LIKE \'%image%\'
			     THEN \'Images\'
			WHEN issue_type LIKE \'%contrast%\'
			  OR wcag_id = \'1.4.3\'
			  OR wcag_id = \'1.4.11\'
			     THEN \'Contrast\'
			WHEN issue_type LIKE \'%heading%\'
			  OR wcag_id = \'1.3.1\'
			     THEN \'Headings\'
			WHEN issue_type LIKE \'%link%\'
			  OR issue_type LIKE \'%descriptive%\'
			  OR wcag_id = \'2.4.4\'
			  OR wcag_id = \'2.4.6\'
			     THEN \'Links\'
			WHEN issue_type LIKE \'%aria%\'
			  OR issue_type LIKE \'%button%\'
			  OR issue_type LIKE \'%duplicate%\'
			  OR issue_type LIKE \'%accessible%\'
			  OR issue_type LIKE \'%role%\'
			  OR wcag_id IN (\'4.1.1\', \'4.1.2\')
			     THEN \'ARIA\'
			WHEN issue_type LIKE \'%label%\'
			  OR issue_type LIKE \'%form%\'
			  OR issue_type LIKE \'%input%\'
			  OR wcag_id = \'1.3.5\'
			     THEN \'Forms\'
			ELSE \'Other\'
		END AS category,
		COUNT(*) AS total
	FROM `' . esc_sql( $accessiq_issues_tbl ) . '`
	GROUP BY category
	ORDER BY total DESC
	LIMIT 6'
);
$accessiq_total_issues_all = (int) $wpdb->get_var( 'SELECT COUNT(*) FROM `' . esc_sql( $accessiq_issues_tbl ) . '`' ); // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.NotPrepared

// ── Device breakdown (sessions by device) ───────────────────────────
$accessiq_sessions_tbl = $wpdb->prefix . 'accessiq_sessions';
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.NotPrepared
$accessiq_device_data  = $wpdb->get_results(
	'SELECT COALESCE(device_type, \'Desktop\') AS device, COUNT(*) AS total FROM `' . esc_sql( $accessiq_sessions_tbl ) . '` GROUP BY device_type ORDER BY total DESC'
);
$accessiq_devices      = array( 'Desktop' => 0, 'Mobile' => 0, 'Tablet' => 0 );
foreach ( (array) $accessiq_device_data as $accessiq_d ) {
	$accessiq_key = ucfirst( strtolower( trim( $accessiq_d->device ) ) );
	if ( isset( $accessiq_devices[ $accessiq_key ] ) ) {
		$accessiq_devices[ $accessiq_key ] = (int) $accessiq_d->total;
	}
}
$accessiq_total_sessions = array_sum( $accessiq_devices );

// ── Card D: Recent 5 scans ───────────────────────────────────────
$accessiq_card_d_scans = get_posts( array(
	'post_type'      => ACCESSIQ_SCAN_CPT,
	'posts_per_page' => 5,
	'orderby'        => 'date',
	'order'          => 'DESC',
) );

// ── Violations tab: last 50 issues from DB ─────────────────────────
$accessiq_issues_table   = $wpdb->prefix . 'accessiq_issues';
$accessiq_violations_sql = $wpdb->prepare(
	'SELECT i.id, i.scan_id, i.wcag_id, i.level, i.element, i.issue_type, i.suggestion, p.meta_value AS page_url
	FROM `' . esc_sql( $accessiq_issues_table ) . '` i
	LEFT JOIN `' . esc_sql( $wpdb->postmeta ) . '` p ON i.scan_id = p.post_id AND p.meta_key = %s
	ORDER BY i.id DESC
	LIMIT 50',
	'_accessiq_url'
);
// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.NotPrepared
$accessiq_dashboard_issues = $wpdb->get_results( $accessiq_violations_sql );
?>
<div class="aiq-wrap">

  <!-- Plugin Header Bar + Tab Navigation -->
  <div class="aiq-dashboard-header">
    <div class="aiq-brand">
      <span class="aiq-brand-icon">⚡</span>
      <div>
        <span class="aiq-brand-name">AccessIQ</span>
        <span class="aiq-brand-tagline">WordPress Accessibility Dashboard</span>
      </div>
    </div>
    <nav class="aiq-tab-nav">
      <button type="button" class="aiq-tab active" data-tab="overview"><?php esc_html_e( 'Overview', 'accessiq' ); ?></button>
      <button type="button" class="aiq-tab" data-tab="violations"><?php esc_html_e( 'Violations', 'accessiq' ); ?></button>
      <button type="button" class="aiq-tab" data-tab="reports"><?php esc_html_e( 'Reports', 'accessiq' ); ?></button>
    </nav>
  </div>

  <div class="aiq-tab-content">

  <!-- ═══════════════════════════════════════════════════════════
       TAB 1: Overview — Stitch Design
  ═══════════════════════════════════════════════════════════ -->
  <div class="aiq-panel active" id="aiq-panel-overview">

    <!-- Section 1: Top Header Bar -->
    <div class="aiq-ov-header">
      <div class="aiq-ov-header-left">
        <h2 class="aiq-ov-title"><?php esc_html_e( 'Overview', 'accessiq' ); ?></h2>
        <span class="aiq-ov-subtitle">
          <?php
          printf(
            /* translators: %s: human-readable time difference e.g. "5 minutes ago" */
            esc_html__( 'Last updated: %s', 'accessiq' ),
            esc_html( $accessiq_last_scan_date )
          );
          ?>
        </span>
      </div>
      <div class="aiq-ov-header-right">
        <span class="aiq-ov-live-pill">
          <span class="aiq-ov-pulse-dot"></span>
          <?php esc_html_e( 'Live Status: Protected', 'accessiq' ); ?>
        </span>
        <button type="button" class="aiq-ov-refresh-btn" id="aiq-ov-refresh" title="<?php esc_attr_e( 'Refresh', 'accessiq' ); ?>">
          &#8635;
        </button>
      </div>
    </div>

    <!-- Section 2: Bento Grid -->
    <div class="aiq-ov-bento">

      <!-- ─── Card A: Score Ring (4 cols) ─────────────────────── -->
      <div class="aiq-ov-card aiq-ov-card-score">
        <div class="aiq-ov-card-accent"></div>
        <h3 class="aiq-ov-card-title"><?php esc_html_e( 'Overall Accessibility Score', 'accessiq' ); ?></h3>
        <p class="aiq-ov-card-subtitle"><?php esc_html_e( 'Based on your last scan', 'accessiq' ); ?></p>

        <div class="aiq-ov-ring-wrap">
          <div class="aiq-ring-canvas-wrap">
            <canvas id="aiq-score-ring-canvas" width="180" height="180"></canvas>
            <div class="aiq-ov-ring-center">
              <span class="aiq-ov-ring-score" id="aiq-ring-display" style="color:<?php echo esc_attr( $accessiq_grade_color_stitch ); ?>">0</span>
              <span class="aiq-ov-ring-unit">/100</span>
              <span class="aiq-ov-ring-grade" style="color:<?php echo esc_attr( $accessiq_grade_color_stitch ); ?>"><?php echo esc_html( $accessiq_grade ); ?></span>
            </div>
          </div>
        </div>

        <div class="aiq-ov-score-meta">
          <div class="aiq-ov-score-stat">
            <span class="aiq-ov-score-stat-val" style="color:#f87171"><?php echo (int) $accessiq_total_issues_all; ?></span>
            <span class="aiq-ov-score-stat-lbl"><?php esc_html_e( 'Total Issues', 'accessiq' ); ?></span>
          </div>
          <div class="aiq-ov-score-stat-sep"></div>
          <div class="aiq-ov-score-stat">
            <span class="aiq-ov-score-stat-val" style="color:#57f1db"><?php echo (int) $accessiq_total_scans; ?></span>
            <span class="aiq-ov-score-stat-lbl"><?php esc_html_e( 'Scans Run', 'accessiq' ); ?></span>
          </div>
        </div>
      </div>

      <!-- ─── Card B: Stats Row (8 cols) ──────────────────────── -->
      <div class="aiq-ov-card aiq-ov-card-stats">
        <div class="aiq-ov-card-accent"></div>
        <div class="aiq-ov-stats-grid">

          <!-- Sessions -->
          <div class="aiq-ov-stat-mini">
            <div class="aiq-ov-stat-top-row">
              <span class="aiq-ov-stat-icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#57f1db" 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>
              </span>
              <span class="aiq-ov-stat-trend"><?php esc_html_e( '7d', 'accessiq' ); ?></span>
            </div>
            <span class="aiq-ov-stat-value"><?php echo esc_html( number_format( $accessiq_if_sessions ) ); ?></span>
            <span class="aiq-ov-stat-label"><?php esc_html_e( 'TOTAL SESSIONS', 'accessiq' ); ?></span>
            <div class="aiq-ov-sparkline">
              <div class="aiq-ov-spark-bar" style="height:<?php echo esc_attr( '10px' ); ?>"></div>
              <div class="aiq-ov-spark-bar" style="height:<?php echo esc_attr( '16px' ); ?>"></div>
              <div class="aiq-ov-spark-bar" style="height:<?php echo esc_attr( '12px' ); ?>"></div>
              <div class="aiq-ov-spark-bar active" style="height:<?php echo esc_attr( '22px' ); ?>"></div>
              <div class="aiq-ov-spark-bar" style="height:<?php echo esc_attr( '18px' ); ?>"></div>
              <div class="aiq-ov-spark-bar active" style="height:<?php echo esc_attr( '24px' ); ?>"></div>
              <div class="aiq-ov-spark-bar active" style="height:<?php echo esc_attr( '28px' ); ?>"></div>
            </div>
          </div>

          <!-- Avg time on page -->
          <div class="aiq-ov-stat-mini">
            <div class="aiq-ov-stat-top-row">
              <span class="aiq-ov-stat-icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#57f1db" stroke-width="2" aria-hidden="true" focusable="false">
                  <circle cx="12" cy="12" r="10"/>
                  <polyline points="12 6 12 12 16 14"/>
                </svg>
              </span>
              <span class="aiq-ov-stat-trend"><?php esc_html_e( '7d', 'accessiq' ); ?></span>
            </div>
            <span class="aiq-ov-stat-value"><?php echo esc_html( $accessiq_avg_time_fmt ); ?></span>
            <span class="aiq-ov-stat-label"><?php esc_html_e( 'AVG. TIME ON PAGE', 'accessiq' ); ?></span>
            <div class="aiq-ov-sparkline">
              <div class="aiq-ov-spark-bar" style="height:<?php echo esc_attr( '14px' ); ?>"></div>
              <div class="aiq-ov-spark-bar active" style="height:<?php echo esc_attr( '20px' ); ?>"></div>
              <div class="aiq-ov-spark-bar" style="height:<?php echo esc_attr( '16px' ); ?>"></div>
              <div class="aiq-ov-spark-bar" style="height:<?php echo esc_attr( '12px' ); ?>"></div>
              <div class="aiq-ov-spark-bar active" style="height:<?php echo esc_attr( '26px' ); ?>"></div>
              <div class="aiq-ov-spark-bar" style="height:<?php echo esc_attr( '20px' ); ?>"></div>
              <div class="aiq-ov-spark-bar active" style="height:<?php echo esc_attr( '24px' ); ?>"></div>
            </div>
          </div>

          <!-- Bounce rate -->
          <div class="aiq-ov-stat-mini">
            <div class="aiq-ov-stat-top-row">
              <span class="aiq-ov-stat-icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f87171" 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>
              </span>
              <span class="aiq-ov-stat-trend" style="color:<?php echo esc_attr( $accessiq_bounce_color ); ?>"><?php echo (int) $accessiq_if_bounce_rate > 70 ? esc_html__( 'HIGH', 'accessiq' ) : ( (int) $accessiq_if_bounce_rate > 40 ? esc_html__( 'MED', 'accessiq' ) : esc_html__( 'LOW', 'accessiq' ) ); ?></span>
            </div>
            <span class="aiq-ov-stat-value" style="color:<?php echo esc_attr( $accessiq_bounce_color ); ?>"><?php echo (int) $accessiq_if_bounce_rate; ?>%</span>
            <span class="aiq-ov-stat-label"><?php esc_html_e( 'BOUNCE RATE', 'accessiq' ); ?></span>
            <div class="aiq-ov-sparkline">
              <div class="aiq-ov-spark-bar" style="height:<?php echo esc_attr( '20px' ); ?>"></div>
              <div class="aiq-ov-spark-bar active" style="height:<?php echo esc_attr( '16px' ); ?>"></div>
              <div class="aiq-ov-spark-bar" style="height:<?php echo esc_attr( '24px' ); ?>"></div>
              <div class="aiq-ov-spark-bar active" style="height:<?php echo esc_attr( '18px' ); ?>"></div>
              <div class="aiq-ov-spark-bar" style="height:<?php echo esc_attr( '14px' ); ?>"></div>
              <div class="aiq-ov-spark-bar" style="height:<?php echo esc_attr( '22px' ); ?>"></div>
              <div class="aiq-ov-spark-bar active" style="height:<?php echo esc_attr( '12px' ); ?>"></div>
            </div>
          </div>

        </div>
      </div>

      <!-- ─── Card C: Violations by Category (12 cols) ─────────── -->
      <div class="aiq-ov-card aiq-ov-card-cats">
        <div class="aiq-ov-card-accent"></div>
        <div class="aiq-ov-card-header-row">
          <div>
            <h3 class="aiq-ov-card-title"><?php esc_html_e( 'Violations by Category', 'accessiq' ); ?></h3>
            <p class="aiq-ov-card-subtitle"><?php esc_html_e( 'Impact distribution across WCAG criteria', 'accessiq' ); ?></p>
          </div>
        </div>

        <?php if ( empty( $accessiq_issues_by_type ) ) : ?>
          <div class="aiq-ov-empty">
            <span class="aiq-ov-empty-icon">✅</span>
            <p class="aiq-ov-empty-text"><?php esc_html_e( 'No violations found yet. Run a scan to see the breakdown.', 'accessiq' ); ?></p>
          </div>
        <?php else :
          $accessiq_max = max( array_column( (array) $accessiq_issues_by_type, 'total' ) );
          ?>
          <div class="aiq-ov-bars-wrap">
            <?php foreach ( $accessiq_issues_by_type as $accessiq_cat ) :
              $accessiq_pct = $accessiq_max > 0 ? round( ( (int) $accessiq_cat->total / $accessiq_max ) * 100 ) : 0;
              ?>
              <div class="aiq-ov-bar-row">
                <span class="aiq-ov-bar-label"><?php echo esc_html( $accessiq_cat->category ); ?></span>
                <div class="aiq-ov-bar-track">
                  <div class="aiq-ov-bar-fill" data-width="<?php echo (int) $accessiq_pct; ?>%"></div>
                </div>
                <span class="aiq-ov-bar-count"><?php echo (int) $accessiq_cat->total; ?></span>
              </div>
            <?php endforeach; ?>
          </div>
        <?php endif; ?>
      </div>

      <!-- ─── Card D: Recent Scans Table (8 cols) ─────────────── -->
      <div class="aiq-ov-card aiq-ov-card-scans">
        <div class="aiq-ov-card-accent"></div>
        <div class="aiq-ov-scans-header">
          <div>
            <h3 class="aiq-ov-card-title"><?php esc_html_e( 'Recent Scans', 'accessiq' ); ?></h3>
            <p class="aiq-ov-card-subtitle"><?php esc_html_e( 'Your last 5 WCAG scans', 'accessiq' ); ?></p>
          </div>
          <a href="<?php echo esc_url( admin_url( 'admin.php?page=accessiq-reports' ) ); ?>" class="aiq-ov-view-all">
            <?php esc_html_e( 'View all →', 'accessiq' ); ?>
          </a>
        </div>

        <?php if ( empty( $accessiq_card_d_scans ) ) : ?>
          <div class="aiq-ov-empty">
            <span class="aiq-ov-empty-icon">📋</span>
            <p class="aiq-ov-empty-text"><?php esc_html_e( 'No scans yet. Run your first scan.', 'accessiq' ); ?></p>
          </div>
        <?php else : ?>
          <table class="aiq-ov-scans-table">
            <thead>
              <tr>
                <th><?php esc_html_e( 'PAGE', 'accessiq' ); ?></th>
                <th><?php esc_html_e( 'SCORE', 'accessiq' ); ?></th>
                <th><?php esc_html_e( 'LEVEL', 'accessiq' ); ?></th>
                <th><?php esc_html_e( 'ISSUES', 'accessiq' ); ?></th>
                <th><?php esc_html_e( 'DATE', 'accessiq' ); ?></th>
                <th><?php esc_html_e( 'ACTION', 'accessiq' ); ?></th>
              </tr>
            </thead>
            <tbody>
              <?php foreach ( $accessiq_card_d_scans as $accessiq_ds ) :
                $accessiq_ds_url    = get_post_meta( $accessiq_ds->ID, '_accessiq_url', true );
                $accessiq_ds_score  = (int) get_post_meta( $accessiq_ds->ID, '_accessiq_score', true );
                $accessiq_ds_level  = get_post_meta( $accessiq_ds->ID, '_accessiq_level', true );
                $accessiq_ds_total  = (int) get_post_meta( $accessiq_ds->ID, '_accessiq_total', true );
                $accessiq_ds_path   = $accessiq_ds_url ? preg_replace( '#^https?://[^/]+#', '', $accessiq_ds_url ) : '—';
                $accessiq_ds_path   = mb_strlen( $accessiq_ds_path ) > 38 ? mb_substr( $accessiq_ds_path, 0, 38 ) . '…' : $accessiq_ds_path;
                if ( $accessiq_ds_score >= 80 ) {
                  $accessiq_ds_pill = 'aiq-ov-score-pill-green';
                } elseif ( $accessiq_ds_score >= 50 ) {
                  $accessiq_ds_pill = 'aiq-ov-score-pill-amber';
                } else {
                  $accessiq_ds_pill = 'aiq-ov-score-pill-red';
                }
                ?>
                <tr>
                  <td class="aiq-ov-td-page" title="<?php echo esc_attr( $accessiq_ds_url ); ?>"><?php echo esc_html( $accessiq_ds_path ? $accessiq_ds_path : '—' ); ?></td>
                  <td><span class="aiq-ov-score-pill <?php echo esc_attr( $accessiq_ds_pill ); ?>"><?php echo $accessiq_ds_score ? (int) $accessiq_ds_score : '—'; ?></span></td>
                  <td><span class="aiq-ov-level-badge"><?php echo esc_html( $accessiq_ds_level ? $accessiq_ds_level : 'AA' ); ?></span></td>
                  <td class="aiq-ov-td-issues"><?php echo (int) $accessiq_ds_total; ?></td>
                  <td class="aiq-ov-td-date"><?php echo esc_html( get_the_date( 'M j, Y', $accessiq_ds->ID ) ); ?></td>
                  <td>
                    <a href="<?php echo esc_url( wp_nonce_url( admin_url( 'admin.php?page=accessiq-reports&scan_id=' . intval( $accessiq_ds->ID ) ), 'accessiq_view_report' ) ); ?>" class="aiq-ov-action-link">
                      <?php esc_html_e( 'View →', 'accessiq' ); ?>
                    </a>
                  </td>
                </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        <?php endif; ?>
      </div>

      <!-- ─── Card E: Quick Actions (4 cols) ──────────────────── -->
      <div class="aiq-ov-card aiq-ov-card-actions">
        <div class="aiq-ov-card-accent"></div>
        <h3 class="aiq-ov-card-title"><?php esc_html_e( 'Quick Actions', 'accessiq' ); ?></h3>
        <p class="aiq-ov-card-subtitle"><?php esc_html_e( 'Jump to any section', 'accessiq' ); ?></p>

        <div class="aiq-ov-actions-list">

          <a href="<?php echo esc_url( admin_url( 'admin.php?page=accessiq-scanner' ) ); ?>" class="aiq-ov-action-btn">
            <span class="aiq-ov-action-btn-icon">🔬</span>
            <span><?php esc_html_e( 'Run New Scan', 'accessiq' ); ?></span>
            <span class="aiq-ov-action-btn-arrow">&rarr;</span>
          </a>

          <a href="<?php echo esc_url( admin_url( 'admin.php?page=accessiq-heatmap' ) ); ?>" class="aiq-ov-action-btn">
            <span class="aiq-ov-action-btn-icon">🔥</span>
            <span><?php esc_html_e( 'View Heatmap', 'accessiq' ); ?></span>
            <span class="aiq-ov-action-btn-arrow">&rarr;</span>
          </a>

          <a href="<?php echo esc_url( admin_url( 'admin.php?page=accessiq-analytics' ) ); ?>" class="aiq-ov-action-btn">
            <span class="aiq-ov-action-btn-icon">📈</span>
            <span><?php esc_html_e( 'View Analytics', 'accessiq' ); ?></span>
            <span class="aiq-ov-action-btn-arrow">&rarr;</span>
          </a>

          <a href="<?php echo esc_url( admin_url( 'admin.php?page=accessiq-settings' ) ); ?>" class="aiq-ov-action-btn">
            <span class="aiq-ov-action-btn-icon">⚙️</span>
            <span><?php esc_html_e( 'Settings', 'accessiq' ); ?></span>
            <span class="aiq-ov-action-btn-arrow">&rarr;</span>
          </a>

        </div>
      </div>

    </div><!-- .aiq-ov-bento -->

  </div><!-- #aiq-panel-overview -->

  <!-- ═══════════════════════════════════════════════════════════
       TAB 2: Violations
  ═══════════════════════════════════════════════════════════ -->
  <div class="aiq-panel" id="aiq-panel-violations">
    <?php
    $accessiq_v_errors   = array_filter( (array) $accessiq_dashboard_issues, function ( $accessiq_i ) {
      return ( $accessiq_i->level === 'A' ) || ( stripos( (string) $accessiq_i->issue_type, 'error' ) !== false );
    } );
    $accessiq_v_warnings = array_filter( (array) $accessiq_dashboard_issues, function ( $accessiq_i ) {
      return ! ( ( $accessiq_i->level === 'A' ) || ( stripos( (string) $accessiq_i->issue_type, 'error' ) !== false ) );
    } );
    ?>
    <div class="aiq-violations-filter">
      <button type="button" class="aiq-filter-btn active" data-filter="all"><?php esc_html_e( 'All', 'accessiq' ); ?> <span class="aiq-count-badge"><?php echo count( (array) $accessiq_dashboard_issues ); ?></span></button>
      <button type="button" class="aiq-filter-btn" data-filter="error"><?php esc_html_e( 'Errors', 'accessiq' ); ?> <span class="aiq-count-badge red"><?php echo count( $accessiq_v_errors ); ?></span></button>
      <button type="button" class="aiq-filter-btn" data-filter="warning"><?php esc_html_e( 'Warnings', 'accessiq' ); ?> <span class="aiq-count-badge amber"><?php echo count( $accessiq_v_warnings ); ?></span></button>
    </div>
    <div class="aiq-card" style="margin-top:16px;">
      <?php if ( empty( $accessiq_dashboard_issues ) ) : ?>
        <div class="aiq-empty-state" style="padding:48px;text-align:center">
          <div style="font-size:40px;margin-bottom:12px">✅</div>
          <h3 style="color:#e2e8f0;margin:0 0 8px"><?php esc_html_e( 'No violations found', 'accessiq' ); ?></h3>
          <p style="color:#64748b;font-size:13px;margin:0"><?php esc_html_e( 'Run a scan to see accessibility issues here', 'accessiq' ); ?></p>
        </div>
      <?php else : ?>
        <table class="aiq-table aiq-table-hoverable">
          <thead>
            <tr>
              <th><?php esc_html_e( 'VIOLATION', 'accessiq' ); ?></th>
              <th><?php esc_html_e( 'ELEMENT', 'accessiq' ); ?></th>
              <th><?php esc_html_e( 'PAGE', 'accessiq' ); ?></th>
              <th><?php esc_html_e( 'SEVERITY', 'accessiq' ); ?></th>
            </tr>
          </thead>
          <tbody>
            <?php
            foreach ( (array) $accessiq_dashboard_issues as $accessiq_issue ) :
              $accessiq_row_type = ( $accessiq_issue->level === 'A' || stripos( (string) $accessiq_issue->issue_type, 'error' ) !== false ) ? 'error' : 'warning';
              $accessiq_message  = ! empty( $accessiq_issue->issue_type ) ? $accessiq_issue->issue_type : ( $accessiq_issue->wcag_id . ' (WCAG)' );
              ?>
            <tr data-type="<?php echo esc_attr( $accessiq_row_type ); ?>">
              <td style="font-weight:600;color:#e2e8f0;max-width:220px"><?php echo esc_html( $accessiq_message ); ?></td>
              <td>
                <code style="font-family:'DM Mono',monospace;font-size:11px;background:rgba(255,255,255,0.06);padding:3px 8px;border-radius:5px;color:#94a3b8;max-width:160px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><?php echo esc_html( $accessiq_issue->element ?? '—' ); ?></code>
              </td>
              <td style="color:#64748b;font-size:12px">
                <?php
                $accessiq_url  = $accessiq_issue->page_url ?? '—';
                $accessiq_path = wp_parse_url( $accessiq_url, PHP_URL_PATH );
                echo esc_html( $accessiq_path ? $accessiq_path : $accessiq_url );
                ?>
              </td>
              <td>
                <?php
                $accessiq_severity_map = array(
                  'error'   => array( 'CRITICAL', 'rgba(248,113,113,0.15)', '#f87171' ),
                  'warning' => array( 'SERIOUS', 'rgba(251,191,36,0.15)', '#fbbf24' ),
                );
                $accessiq_sev = $accessiq_severity_map[ $accessiq_row_type ] ?? array( 'MODERATE', 'rgba(167,139,250,0.15)', '#a78bfa' );
                ?>
                <span style="background:<?php echo esc_attr( $accessiq_sev[1] ); ?>;color:<?php echo esc_attr( $accessiq_sev[2] ); ?>;font-size:10px;font-weight:800;padding:3px 10px;border-radius:4px;letter-spacing:0.5px;border:1px solid <?php echo esc_attr( $accessiq_sev[2] ); ?>33"><?php echo esc_html( $accessiq_sev[0] ); ?></span>
              </td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      <?php endif; ?>
    </div>
  </div>

  <!-- ═══════════════════════════════════════════════════════════
       TAB 3: Reports
  ═══════════════════════════════════════════════════════════ -->
  <div class="aiq-panel" id="aiq-panel-reports">
    <?php
    $accessiq_recent_scans = get_posts( array(
      'post_type'      => ACCESSIQ_SCAN_CPT,
      'posts_per_page' => 8,
      'orderby'        => 'date',
      'order'          => 'DESC',
    ) );
    ?>
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
      <div>
        <h2 style="font-size:17px;font-weight:800;color:#e2e8f0;margin:0 0 4px"><?php esc_html_e( 'Recent Scans', 'accessiq' ); ?></h2>
        <p style="font-size:13px;color:#64748b;margin:0">
          <?php
          printf(
            /* translators: %d: number of scans */
            esc_html( _n( '%d scan total', '%d scans total', count( $accessiq_recent_scans ), 'accessiq' ) ),
            count( $accessiq_recent_scans )
          );
          ?>
        </p>
      </div>
      <a href="<?php echo esc_url( admin_url( 'admin.php?page=accessiq-reports' ) ); ?>" class="aiq-btn-secondary"><?php esc_html_e( 'View All Reports →', 'accessiq' ); ?></a>
    </div>
    <div class="aiq-card">
      <?php if ( empty( $accessiq_recent_scans ) ) : ?>
        <div class="aiq-empty-state" style="padding:48px;text-align:center">
          <div style="font-size:40px;margin-bottom:12px">📋</div>
          <h3 style="color:#e2e8f0;margin:0 0 8px"><?php esc_html_e( 'No reports yet', 'accessiq' ); ?></h3>
          <p style="color:#64748b;font-size:13px;margin:0 0 16px"><?php esc_html_e( 'Run your first scan to see reports here', 'accessiq' ); ?></p>
          <a href="<?php echo esc_url( admin_url( 'admin.php?page=accessiq-scanner' ) ); ?>" class="aiq-btn-primary"><?php esc_html_e( 'Run First Scan →', 'accessiq' ); ?></a>
        </div>
      <?php else : ?>
        <table class="aiq-table aiq-table-hoverable">
          <thead>
            <tr>
              <th><?php esc_html_e( 'PAGE', 'accessiq' ); ?></th>
              <th><?php esc_html_e( 'SCORE', 'accessiq' ); ?></th>
              <th><?php esc_html_e( 'DATE', 'accessiq' ); ?></th>
              <th><?php esc_html_e( 'ACTIONS', 'accessiq' ); ?></th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ( $accessiq_recent_scans as $accessiq_scan ) : ?>
              <?php
              $accessiq_report_url   = get_post_meta( $accessiq_scan->ID, '_accessiq_url', true );
              $accessiq_report_score = (int) get_post_meta( $accessiq_scan->ID, '_accessiq_score', true );
              $accessiq_report_color = $accessiq_report_score >= 80 ? '#10d98e' : ( $accessiq_report_score >= 50 ? '#fbbf24' : '#f87171' );
              ?>
            <tr>
              <td style="font-weight:600;color:#e2e8f0;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">🌐 <?php echo esc_html( $accessiq_report_url ); ?></td>
              <td>
                <span style="width:34px;height:34px;border-radius:50%;border:2.5px solid <?php echo esc_attr( $accessiq_report_color ); ?>;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:<?php echo esc_attr( $accessiq_report_color ); ?>"><?php echo $accessiq_report_score ? (int) $accessiq_report_score : '—'; ?></span>
              </td>
              <td style="color:#64748b;font-size:12px"><?php echo esc_html( get_the_date( 'M j, Y', $accessiq_scan->ID ) ); ?></td>
              <td><a href="<?php echo esc_url( wp_nonce_url( admin_url( 'admin.php?page=accessiq-reports&scan_id=' . intval( $accessiq_scan->ID ) ), 'accessiq_view_report' ) ); ?>" class="aiq-btn-sm"><?php esc_html_e( 'View →', 'accessiq' ); ?></a></td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      <?php endif; ?>
    </div>
  </div>

  </div><!-- .aiq-tab-content -->

</div>