<?php
if ( ! defined( 'WPINC' ) ) {
	die;
}

$aio_ht_status = class_exists( 'AIO_Htaccess_Cache' )
	? AIO_Htaccess_Cache::get_status()
	: array(
		'is_nginx'          => false,
		'exists'            => false,
		'writable'          => false,
		'supported'         => false,
		'active'            => false,
		'page_cache_active' => false,
		'webp_active'       => false,
	);
$aio_nginx_snippet     = class_exists( 'AIO_Htaccess_Cache' ) ? AIO_Htaccess_Cache::get_nginx_config_snippet() : '';
$aio_async_protect_chk = ! isset( $settings['optAsyncCssProtectTheme'] ) || ! empty( $settings['optAsyncCssProtectTheme'] );

$aio_adv_status = class_exists( 'AIO_Dropin_Manager' )
	? AIO_Dropin_Manager::get_advanced_cache_status()
	: array(
		'exists'           => false,
		'is_ours'          => false,
		'foreign_name'     => '',
		'wp_cache_const'   => false,
		'wp_config_write'  => false,
		'wp_content_write' => false,
		'active'           => false,
	);

$aio_obj_status = class_exists( 'AIO_Object_Cache_Manager' )
	? AIO_Object_Cache_Manager::get_status()
	: array(
		'capabilities' => array(
			'phpredis'     => false,
			'redis_socket' => false,
			'redis_any'    => false,
			'memcached'    => false,
			'memcache'     => false,
			'apcu'         => false,
		),
		'dropin'       => array(
			'exists'       => false,
			'is_ours'      => false,
			'foreign_name' => '',
			'ext_active'   => false,
		),
		'config'       => array(
			'driver'   => 'redis',
			'host'     => '127.0.0.1',
			'port'     => 6379,
			'database' => 0,
		),
		'telemetry'    => array(
			'connected'    => false,
			'driver_used'  => 'REDIS',
			'ping_ms'      => null,
			'memory_human' => '—',
			'keys_count'   => 0,
			'hit_ratio'    => 0,
			'error'        => '',
		),
	);

$aio_competing        = class_exists( 'AIO_Caching' ) ? AIO_Caching::detect_competing_cache_plugins() : array();
$aio_safe_preview_url = add_query_arg( 'aio_no_opt', '1', home_url( '/' ) );
$aio_delay_mode       = isset( $settings['optDelayJsMode'] ) && $settings['optDelayJsMode'] === 'all' ? 'all' : 'targeted';
$aio_obj_driver       = isset( $settings['optObjectCacheDriver'] ) && in_array( $settings['optObjectCacheDriver'], array( 'redis', 'memcached', 'memcache', 'apcu' ), true )
	? $settings['optObjectCacheDriver']
	: 'redis';
$aio_ttl_hours        = isset( $settings['optCacheTtlHours'] ) && absint( $settings['optCacheTtlHours'] ) > 0 ? absint( $settings['optCacheTtlHours'] ) : 24;
$aio_adv_dropin_chk   = ! isset( $settings['optEnableAdvCacheDropin'] ) || ! empty( $settings['optEnableAdvCacheDropin'] );
$aio_ht_page_chk      = ! isset( $settings['optEnableHtaccessPageCache'] ) || ! empty( $settings['optEnableHtaccessPageCache'] );
$aio_ignore_trk_chk   = ! isset( $settings['optCacheIgnoreTracking'] ) || ! empty( $settings['optCacheIgnoreTracking'] );

$aio_pc_on   = ! empty( $settings['optEnablePageCache'] );
$aio_webp_on = ! empty( $settings['opt-perf-webp'] );
$aio_oc_on   = ! empty( $aio_obj_status['dropin']['ext_active'] ) || ! empty( $aio_obj_status['telemetry']['connected'] );
$aio_tier_on = ! empty( $aio_adv_status['active'] ) || ! empty( $aio_ht_status['page_cache_active'] );

$aio_preset_safe = array(
	'opt-module-performance'     => true,
	'optEnablePageCache'         => true,
	'optEnableAdvCacheDropin'    => true,
	'optEnableHtaccessPageCache' => true,
	'optCacheIgnoreTracking'     => true,
	'optEnableBrowserCache'      => true,
	'optEnableSmartLcp'          => true,
	'optEnableAutoImageDims'     => true,
	'optEnableFontSwap'          => true,
	'opt-perf-lazyload'          => true,
	'opt-perf-webp'              => true,
	'optEnableWebpRewrite'       => true,
	'opt-perf-disable-emoji'     => true,
	'opt-perf-disable-embed'     => true,
	'opt-perf-control-heartbeat' => true,
	'optDisableDashicons'        => true,
	'optDisableJqueryMigrate'    => false,
	'optOptimizeWcFragments'     => false,
	'optEnableMinify'            => false,
	'optEnableMinifyCss'         => false,
	'optEnableMinifyJs'          => false,
	'optEnableAsyncCss'          => false,
	'optAsyncCssProtectTheme'    => true,
	'optAsyncGoogleFonts'        => false,
	'optSelfHostGoogleFonts'     => false,
	'optLazyLoadBg'              => false,
	'optEnableDeferJS'           => false,
	'optEnableDelayJS'           => false,
	'optDelayJsMode'             => 'targeted',
	'optEnableYoutubeFacade'     => false,
	'optEnableInstantPage'       => false,
	'optEnableCachePreload'      => false,
	'optEnableRemoveQueryString' => false,
);

$aio_preset_recommended = array_merge(
	$aio_preset_safe,
	array(
		'optDisableJqueryMigrate' => true,
		'optOptimizeWcFragments'  => true,
		'optEnableMinify'         => true,
		'optEnableMinifyCss'      => true,
		'optEnableMinifyJs'       => true,
		'optEnableDeferJS'        => true,
		'optEnableDelayJS'        => true,
		'optDelayJsMode'          => 'targeted',
		'optEnableYoutubeFacade'  => true,
		'optEnableInstantPage'    => true,
		'optEnableCachePreload'   => true,
	)
);

$aio_preset_rocket = array_merge(
	$aio_preset_recommended,
	array(
		'optEnableAsyncCss'          => true,
		'optAsyncCssProtectTheme'    => true,
		'optAsyncGoogleFonts'        => true,
		'optSelfHostGoogleFonts'     => true,
		'optLazyLoadBg'              => true,
		'optDelayJsMode'             => 'all',
		'optEnableRemoveQueryString' => true,
	)
);

$aio_preset_profiles = array(
	'safe'        => $aio_preset_safe,
	'recommended' => $aio_preset_recommended,
	'rocket'      => $aio_preset_rocket,
);

$aio_detect_speed_preset = static function ( $opts, $profiles ) {
	$default_true = array(
		'opt-module-performance',
		'optEnableAdvCacheDropin',
		'optEnableHtaccessPageCache',
		'optCacheIgnoreTracking',
		'optAsyncCssProtectTheme',
	);
	$legacy_opt_keys = array(
		'optEnableWebpRewrite',
		'optOptimizeWcFragments',
		'optSelfHostGoogleFonts',
	);
	$has_saved_preset_key = is_array( $opts ) && isset( $opts['optSpeedPreset'] );

	foreach ( array( 'rocket', 'recommended', 'safe' ) as $preset_id ) {
		$map     = $profiles[ $preset_id ];
		$matched = true;
		foreach ( $map as $k => $expected ) {
			if ( 'optDelayJsMode' === $k ) {
				if ( empty( $map['optEnableDelayJS'] ) ) {
					continue;
				}
				$actual_mode = ( isset( $opts['optDelayJsMode'] ) && 'all' === $opts['optDelayJsMode'] ) ? 'all' : 'targeted';
				if ( $actual_mode !== $expected ) {
					$matched = false;
					break;
				}
				continue;
			}
			if ( 'optAsyncCssProtectTheme' === $k && empty( $map['optEnableAsyncCss'] ) ) {
				continue;
			}
			if ( ! $has_saved_preset_key && in_array( $k, $legacy_opt_keys, true ) && ! array_key_exists( $k, $opts ) ) {
				continue;
			}
			$actual = array_key_exists( $k, $opts )
				? ! empty( $opts[ $k ] )
				: in_array( $k, $default_true, true );
			if ( (bool) $actual !== (bool) $expected ) {
				$matched = false;
				break;
			}
		}
		if ( $matched ) {
			return $preset_id;
		}
	}

	$core_probe = array(
		'optEnablePageCache',
		'optEnableBrowserCache',
		'optEnableSmartLcp',
		'optEnableMinify',
		'optEnableMinifyCss',
		'optEnableMinifyJs',
		'optEnableDeferJS',
		'optEnableDelayJS',
		'optEnableAsyncCss',
		'opt-perf-lazyload',
		'opt-perf-webp',
	);
	foreach ( $core_probe as $ck ) {
		if ( ! empty( $opts[ $ck ] ) ) {
			return 'custom';
		}
	}
	return 'none';
};

$aio_active_preset = $aio_detect_speed_preset( is_array( $settings ) ? $settings : array(), $aio_preset_profiles );
$aio_preset_labels = array(
	'safe'        => __( 'Safe Mode', 'aio-tools' ),
	'recommended' => __( 'Recommended', 'aio-tools' ),
	'rocket'      => __( 'Rocket', 'aio-tools' ),
);
?>
<style>
.aio-perf-topbar {
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.aio-status-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.aio-status-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #475569;
}
.aio-status-chip.on {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #065f46;
}
.aio-status-chip .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #94a3b8;
}
.aio-status-chip.on .dot {
	background: #10b981;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.aio-perf-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 6px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.aio-perf-subbtn {
	border: none;
	background: transparent;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #475569;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: all 0.18s ease;
}
.aio-perf-subbtn:hover {
	background: #f8fafc;
	color: #0f172a;
}
.aio-perf-subbtn.active {
	background: #eff6ff;
	color: #2563eb;
	box-shadow: inset 0 0 0 1px #bfdbfe;
}
.aio-perf-subpane {
	display: none;
}
.aio-perf-subpane.active {
	display: block;
}
.aio-preset-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}
.aio-preset-grid.is-saving {
	pointer-events: none;
	opacity: 0.82;
}
.aio-preset-box {
	position: relative;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 18px 20px;
	background: #f8fafc;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.aio-preset-box:hover {
	border-color: #93c5fd;
	background: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.12);
}
.aio-preset-box:hover .aio-preset-radio {
	border-color: #60a5fa;
}
.aio-preset-box:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}
.aio-preset-box.is-active {
	border-color: #2563eb;
	background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14), 0 10px 24px -8px rgba(37, 99, 235, 0.20);
}
.aio-preset-title {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-weight: 700;
	color: #0f172a;
	font-size: 15px;
	transition: color 0.18s ease;
}
.aio-preset-box.is-active .aio-preset-title {
	color: #1d4ed8;
}
.aio-preset-desc {
	font-size: 12.5px;
	color: #64748b;
	margin: 2px 0 0;
	line-height: 1.55;
}
.aio-preset-box.is-active .aio-preset-desc {
	color: #334155;
}
.aio-preset-best-tag {
	font-size: 10px;
	background: #fef3c7;
	color: #b45309;
	border: 1px solid #fde68a;
	padding: 1px 7px;
	border-radius: 99px;
	font-weight: 700;
	letter-spacing: 0.3px;
}
.aio-preset-radio {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #cbd5e1;
	background: #ffffff;
	flex-shrink: 0;
	transition: border-color 0.18s ease;
}
.aio-preset-active-pill {
	display: none;
	align-items: center;
	gap: 4px;
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #86efac;
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 99px;
	white-space: nowrap;
	flex-shrink: 0;
}
.aio-preset-box.is-active .aio-preset-radio {
	display: none;
}
.aio-preset-box.is-active .aio-preset-active-pill {
	display: inline-flex;
}
.aio-preset-header-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 99px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #64748b;
}
.aio-preset-header-chip.is-preset {
	background: #eff6ff;
	border-color: #bfdbfe;
	color: #1d4ed8;
}
.aio-preset-header-chip.is-custom {
	background: #fffbeb;
	border-color: #fde68a;
	color: #b45309;
}
.aio-metric-pills {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
	gap: 10px;
	margin-top: 16px;
}
.aio-metric-pill {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 12px;
}
.aio-metric-pill .lbl {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #64748b;
	font-weight: 600;
}
.aio-metric-pill .val {
	font-size: 15.5px;
	font-weight: 700;
	color: #0f172a;
	margin-top: 3px;
}
.aio-audit-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #ffffff;
	margin-bottom: 8px;
}
.aio-audit-item.high {
	border-left: 4px solid #ef4444;
	background: #fef2f2;
}
.aio-audit-item.medium {
	border-left: 4px solid #f59e0b;
	background: #fffbeb;
}
.aio-audit-item.passed {
	border-left: 4px solid #10b981;
}
.aio-cwv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	margin-top: 14px;
}
.aio-cwv-card {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px;
	background: #ffffff;
}
.aio-cwv-card.good { border-top: 3px solid #10b981; }
.aio-cwv-card.average { border-top: 3px solid #f59e0b; }
.aio-cwv-card.poor { border-top: 3px solid #ef4444; }
.aio-driver-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	margin-bottom: 16px;
}
.aio-driver-pill {
	padding: 9px 11px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 6px;
}
.aio-driver-pill.ready {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #166534;
}
</style>

<div style="display: flex; flex-direction: column; gap: 20px;">

	<?php if ( ! empty( $aio_competing ) ) : ?>
		<div style="background:#fffbeb; border:1px solid #fde68a; border-left:4px solid #f59e0b; border-radius:10px; padding:14px 18px; display:flex; align-items:flex-start; gap:12px;">
			<span class="ph ph-warning-circle" style="color:#d97706; font-size:22px; flex-shrink:0; margin-top:1px;"></span>
			<div style="font-size:13px; color:#92400e; line-height:1.55;">
				<strong><?php echo esc_html__( 'Competing Cache Plugin Detected:', 'aio-tools' ); ?> <?php echo esc_html( implode( ', ', $aio_competing ) ); ?></strong><br>
				<?php echo esc_html__( 'AIO Tools Turbo Speed Engine operates 100% standalone (3-Tier Page Cache + Redis/Memcached Object Cache + CSS/JS Minify). To prevent double HTML buffering or script conflicts, we recommend deactivating redundant cache plugins.', 'aio-tools' ); ?>
			</div>
		</div>
	<?php endif; ?>

	<!-- Top Live Status Strip & Quick Actions -->
	<div class="aio-perf-topbar">
		<div class="aio-status-badges">
			<span id="aio-chip-pagecache" class="aio-status-chip <?php echo $aio_pc_on ? 'on' : ''; ?>">
				<span class="dot"></span>
				<?php echo esc_html__( 'Page Cache:', 'aio-tools' ); ?>
				<strong id="aio-chip-pagecache-txt"><?php echo $aio_pc_on ? esc_html__( 'ON', 'aio-tools' ) : esc_html__( 'OFF', 'aio-tools' ); ?></strong>
			</span>
			<span id="aio-chip-tier" class="aio-status-chip <?php echo ( $aio_pc_on && $aio_tier_on ) ? 'on' : ''; ?>">
				<span class="dot"></span>
				<?php echo esc_html__( 'Turbo Tier:', 'aio-tools' ); ?>
				<strong>
					<?php
					if ( ! empty( $aio_ht_status['page_cache_active'] ) ) {
						echo esc_html__( '.htaccess 0ms', 'aio-tools' );
					} elseif ( ! empty( $aio_adv_status['active'] ) ) {
						echo esc_html__( 'Drop-in ~15ms', 'aio-tools' );
					} else {
						echo esc_html__( 'Standard', 'aio-tools' );
					}
					?>
				</strong>
			</span>
			<span id="aio-chip-objcache" class="aio-status-chip <?php echo $aio_oc_on ? 'on' : ''; ?>">
				<span class="dot"></span>
				<?php echo esc_html__( 'Object Cache:', 'aio-tools' ); ?>
				<strong id="aio-chip-objcache-txt"><?php echo $aio_oc_on ? esc_html( $aio_obj_status['telemetry']['driver_used'] ) : esc_html__( 'OFF', 'aio-tools' ); ?></strong>
			</span>
			<span id="aio-chip-webp" class="aio-status-chip <?php echo $aio_webp_on ? 'on' : ''; ?>">
				<span class="dot"></span>
				<?php echo esc_html__( 'WebP:', 'aio-tools' ); ?>
				<strong id="aio-chip-webp-txt"><?php echo $aio_webp_on ? esc_html__( 'ON', 'aio-tools' ) : esc_html__( 'OFF', 'aio-tools' ); ?></strong>
			</span>
		</div>

		<div style="display:flex; flex-wrap:wrap; align-items:center; gap:8px;">
			<button type="button" class="aio-btn-outline" onclick="aioPurgeAllCaches()">
				<span class="ph ph-broom"></span> <?php echo esc_html__( 'Purge All Caches', 'aio-tools' ); ?>
			</button>
			<button type="button" class="aio-btn-outline" onclick="aioStartCachePreload()">
				<span class="ph ph-fire"></span> <?php echo esc_html__( 'Preload Cache', 'aio-tools' ); ?>
			</button>
			<a href="<?php echo esc_url( $aio_safe_preview_url ); ?>" target="_blank" rel="noopener" class="aio-btn-secondary" style="text-decoration:none; display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:8px 14px;" title="<?php echo esc_attr__( 'Preview your site temporarily bypassing all AIO speed optimizations and page cache', 'aio-tools' ); ?>">
				<span class="ph ph-shield-check"></span> <?php echo esc_html__( 'Safe Preview (?aio_no_opt=1)', 'aio-tools' ); ?>
			</a>
		</div>
	</div>

	<!-- 6-Sub-Tab Horizontal Navigation -->
	<div class="aio-perf-subnav" role="tablist">
		<button type="button" class="aio-perf-subbtn active" data-perf-subtab="overview" onclick="aioSwitchPerfSubtab('overview')">
			<span class="ph ph-gauge"></span> <?php echo esc_html__( 'Overview & Diagnostics', 'aio-tools' ); ?>
		</button>
		<button type="button" class="aio-perf-subbtn" data-perf-subtab="page-cache" onclick="aioSwitchPerfSubtab('page-cache')">
			<span class="ph ph-lightning"></span> <?php echo esc_html__( 'Page Cache', 'aio-tools' ); ?>
		</button>
		<button type="button" class="aio-perf-subbtn" data-perf-subtab="object-cache" onclick="aioSwitchPerfSubtab('object-cache')">
			<span class="ph ph-cpu"></span> <?php echo esc_html__( 'Object Cache (RAM)', 'aio-tools' ); ?>
		</button>
		<button type="button" class="aio-perf-subbtn" data-perf-subtab="css-js" onclick="aioSwitchPerfSubtab('css-js')">
			<span class="ph ph-code"></span> <?php echo esc_html__( 'CSS & JavaScript', 'aio-tools' ); ?>
		</button>
		<button type="button" class="aio-perf-subbtn" data-perf-subtab="media" onclick="aioSwitchPerfSubtab('media')">
			<span class="ph ph-image-square"></span> <?php echo esc_html__( 'Media & Video', 'aio-tools' ); ?>
		</button>
		<button type="button" class="aio-perf-subbtn" data-perf-subtab="cdn-core" onclick="aioSwitchPerfSubtab('cdn-core')">
			<span class="ph ph-globe-hemisphere-west"></span> <?php echo esc_html__( 'CDN & WP Core', 'aio-tools' ); ?>
		</button>
	</div>

	<!-- =================================================================== -->
	<!-- SUB-TAB 1: OVERVIEW, PRESETS & SMART ANALYZER                       -->
	<!-- =================================================================== -->
	<div id="aio-perf-pane-overview" class="aio-perf-subpane active">
		<div style="display:flex; flex-direction:column; gap:20px;">

			<!-- 1-Click Smart Optimization Presets -->
			<div class="aio-card" style="margin-bottom:0;">
				<div style="display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid #f1f5f9; padding-bottom:12px; margin-bottom:14px;">
					<div style="display:flex; flex-wrap:wrap; align-items:center; gap:10px;">
						<h3 style="margin:0; display:flex; align-items:center; gap:8px;">
							<span class="ph ph-sliders-horizontal" style="color:#2563eb; font-size:22px;"></span> <?php echo esc_html__( '1-Click Optimization Presets', 'aio-tools' ); ?>
						</h3>
						<?php
						$aio_hdr_cls = isset( $aio_preset_labels[ $aio_active_preset ] )
							? 'is-preset'
							: ( 'custom' === $aio_active_preset ? 'is-custom' : '' );
						?>
						<span id="aio-preset-header-badge" class="aio-preset-header-chip <?php echo esc_attr( $aio_hdr_cls ); ?>">
							<?php if ( isset( $aio_preset_labels[ $aio_active_preset ] ) ) : ?>
								<span class="ph ph-check-circle" style="font-size:14px;"></span>
								<?php echo esc_html__( 'Active Profile:', 'aio-tools' ) . ' ' . esc_html( $aio_preset_labels[ $aio_active_preset ] ); ?>
							<?php elseif ( 'custom' === $aio_active_preset ) : ?>
								<span class="ph ph-faders" style="font-size:14px;"></span>
								<?php echo esc_html__( 'Custom Profile', 'aio-tools' ); ?>
							<?php else : ?>
								<?php echo esc_html__( 'Not Selected', 'aio-tools' ); ?>
							<?php endif; ?>
						</span>
					</div>
					<small style="color:#64748b;"><?php echo esc_html__( 'Click directly on any profile card to activate — WooCommerce Cart, Checkout & logged-in admins are protected automatically.', 'aio-tools' ); ?></small>
				</div>

				<div id="aio-preset-grid" class="aio-preset-grid">
					<div class="aio-preset-box <?php echo 'safe' === $aio_active_preset ? 'is-active' : ''; ?>" data-preset="safe" role="button" tabindex="0" aria-pressed="<?php echo 'safe' === $aio_active_preset ? 'true' : 'false'; ?>" onclick="aioApplySpeedPreset('safe')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();aioApplySpeedPreset('safe');}">
						<div style="display:flex; align-items:flex-start; justify-content:space-between; gap:10px;">
							<span class="aio-preset-title">
								<span class="ph ph-shield-check" style="color:#10b981;"></span> <?php echo esc_html__( 'Safe Mode (100% Compatible)', 'aio-tools' ); ?>
							</span>
							<span class="aio-preset-radio" aria-hidden="true"></span>
							<span class="aio-preset-active-pill"><span class="ph ph-check-circle" style="font-size:14px;"></span> <?php echo esc_html__( 'Selected', 'aio-tools' ); ?></span>
						</div>
						<p class="aio-preset-desc">
							<?php echo esc_html__( 'Activates 3-Tier Page Cache (.htaccess + Drop-in), Browser Cache, Smart LCP, Full-Site Image/SVG Dimensions, Google Fonts Swap, Lazy Load, WebP & WP Core Debloat.', 'aio-tools' ); ?>
						</p>
					</div>

					<div class="aio-preset-box <?php echo 'recommended' === $aio_active_preset ? 'is-active' : ''; ?>" data-preset="recommended" role="button" tabindex="0" aria-pressed="<?php echo 'recommended' === $aio_active_preset ? 'true' : 'false'; ?>" onclick="aioApplySpeedPreset('recommended')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();aioApplySpeedPreset('recommended');}">
						<div style="display:flex; align-items:flex-start; justify-content:space-between; gap:10px;">
							<span class="aio-preset-title">
								<span class="ph ph-star" style="color:#f59e0b;"></span> <?php echo esc_html__( 'Recommended (Balanced)', 'aio-tools' ); ?>
								<span class="aio-preset-best-tag">BEST</span>
							</span>
							<span class="aio-preset-radio" aria-hidden="true"></span>
							<span class="aio-preset-active-pill"><span class="ph ph-check-circle" style="font-size:14px;"></span> <?php echo esc_html__( 'Selected', 'aio-tools' ); ?></span>
						</div>
						<p class="aio-preset-desc">
							<?php echo esc_html__( 'Includes Safe + HTML/CSS/JS Minify, Defer JS, Targeted Delay JS (GTM, GA4, Pixel, LiveChat), YouTube Facade, Instant Page & Tracking Query Ignore.', 'aio-tools' ); ?>
						</p>
					</div>

					<div class="aio-preset-box <?php echo 'rocket' === $aio_active_preset ? 'is-active' : ''; ?>" data-preset="rocket" role="button" tabindex="0" aria-pressed="<?php echo 'rocket' === $aio_active_preset ? 'true' : 'false'; ?>" onclick="aioApplySpeedPreset('rocket')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();aioApplySpeedPreset('rocket');}">
						<div style="display:flex; align-items:flex-start; justify-content:space-between; gap:10px;">
							<span class="aio-preset-title">
								<span class="ph ph-rocket-launch" style="color:#ef4444;"></span> <?php echo esc_html__( 'Rocket (Max PageSpeed 95+)', 'aio-tools' ); ?>
							</span>
							<span class="aio-preset-radio" aria-hidden="true"></span>
							<span class="aio-preset-active-pill"><span class="ph ph-check-circle" style="font-size:14px;"></span> <?php echo esc_html__( 'Selected', 'aio-tools' ); ?></span>
						</div>
						<p class="aio-preset-desc">
							<?php echo esc_html__( 'Includes Recommended + Async Render-Blocking CSS, Non-Blocking Google Fonts, CSS Background Lazy-Load, Full Delay JS on interaction & Query String removal.', 'aio-tools' ); ?>
						</p>
					</div>
				</div>
			</div>

			<!-- Side-by-Side Full-Width Diagnostics: Local Audit + Google PageSpeed Live -->
			<div class="aio-grid-2">
				<!-- Left: Local Instant Speed Audit -->
				<div id="aio-analyzer-pane-local" class="aio-card" style="margin-bottom:0;">
					<div style="display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid #f1f5f9; padding-bottom:12px; margin-bottom:14px;">
						<div style="display:flex; align-items:center; gap:9px;">
							<span class="ph ph-stethoscope" style="color:#2563eb; font-size:24px;"></span>
							<div>
								<h3 style="margin:0; font-size:16px;"><?php echo esc_html__( 'Local Instant Speed Audit (< 2s)', 'aio-tools' ); ?></h3>
								<small style="color:#64748b;"><?php echo esc_html__( 'Scans TTFB, 3-Tier Cache, Object Cache, Blocking CSS/JS, LCP, CLS & WebP.', 'aio-tools' ); ?></small>
							</div>
						</div>
						<button type="button" id="aio-btn-local-audit" class="aio-btn-primary" onclick="aioRunLocalAudit()">
							<span class="ph ph-magnifying-glass"></span> <?php echo esc_html__( 'Analyze Website Now', 'aio-tools' ); ?>
						</button>
					</div>

					<div id="aio-local-audit-placeholder" style="padding:26px 18px; text-align:center; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:10px; color:#64748b; font-size:13px;">
						<span class="ph ph-pulse" style="font-size:28px; color:#3b82f6; display:block; margin-bottom:6px;"></span>
						<?php echo esc_html__( 'Click "Analyze Website Now" to run a real-time loopback scan and unlock 1-Click Fixes.', 'aio-tools' ); ?>
					</div>
					<div id="aio-local-audit-output" style="display:none;"></div>
				</div>

				<!-- Right: Google PageSpeed Insights v5 API -->
				<div id="aio-analyzer-pane-psi" class="aio-card" style="margin-bottom:0;">
					<div style="display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid #f1f5f9; padding-bottom:12px; margin-bottom:14px;">
						<div style="display:flex; align-items:center; gap:9px;">
							<span class="ph ph-google-logo" style="color:#10b981; font-size:24px;"></span>
							<div>
								<h3 style="margin:0; font-size:16px;"><?php echo esc_html__( 'Google PageSpeed Insights Live', 'aio-tools' ); ?></h3>
								<small style="color:#64748b;"><?php echo esc_html__( 'Official Google Lighthouse v5 Mobile & Desktop Core Web Vitals.', 'aio-tools' ); ?></small>
							</div>
						</div>
					</div>

					<div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:10px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:14px;">
						<div>
							<label style="font-size:12px; font-weight:600; color:#475569; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Target URL', 'aio-tools' ); ?></label>
							<input type="url" id="aio-psi-url" class="aio-form-control" value="<?php echo esc_url( home_url( '/' ) ); ?>" placeholder="https://example.com">
						</div>
						<div>
							<label style="font-size:12px; font-weight:600; color:#475569; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Device Strategy', 'aio-tools' ); ?></label>
							<select id="aio-psi-strategy" class="aio-form-control">
								<option value="mobile"><?php echo esc_html__( 'Mobile (Lighthouse Moto G)', 'aio-tools' ); ?></option>
								<option value="desktop"><?php echo esc_html__( 'Desktop', 'aio-tools' ); ?></option>
							</select>
						</div>
						<div>
							<label style="font-size:12px; font-weight:600; color:#475569; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Google API Key (Optional)', 'aio-tools' ); ?></label>
							<input type="password" id="aio-psi-apikey" class="aio-form-control" data-aio-opt="txtPagespeedApiKey" value="<?php echo esc_attr( isset( $settings['txtPagespeedApiKey'] ) ? $settings['txtPagespeedApiKey'] : '' ); ?>" onchange="handleChange('txtPagespeedApiKey', this.value)" placeholder="<?php echo esc_attr__( 'Prevents 429 quota limit', 'aio-tools' ); ?>">
						</div>
						<div style="display:flex; align-items:flex-end;">
							<button type="button" id="aio-btn-psi-run" class="aio-btn-primary" style="width:100%; justify-content:center;" onclick="aioRunPagespeedApi(false)">
								<span class="ph ph-lightning"></span> <?php echo esc_html__( 'Run PageSpeed', 'aio-tools' ); ?>
							</button>
						</div>
					</div>

					<div id="aio-psi-output" style="margin-top:14px; display:none;"></div>
				</div>
			</div>

		</div>
	</div>

	<!-- =================================================================== -->
	<!-- SUB-TAB 2: 3-TIER STANDALONE PAGE CACHE                             -->
	<!-- =================================================================== -->
	<div id="aio-perf-pane-page-cache" class="aio-perf-subpane">
		<div class="aio-grid-2">

			<!-- Left: 3-Tier Architecture & Disk Status -->
			<div class="aio-card" style="margin-bottom:0;">
				<h3 style="margin-top:0; border-bottom:1px solid #f1f5f9; padding-bottom:12px; display:flex; align-items:center; gap:8px;">
					<span class="ph ph-lightning" style="color:#eab308; font-size:24px;"></span> <?php echo esc_html__( '3-Tier Standalone Full-Page Cache', 'aio-tools' ); ?>
				</h3>
				<p style="font-size:13px; color:#64748b; margin-bottom:18px;"><?php echo esc_html__( 'Delivers pre-compressed static .html.gz pages with sub-25ms TTFB — zero WordPress or MySQL overhead.', 'aio-tools' ); ?></p>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-database"></span> <?php echo esc_html__( 'Enable Disk Page Cache + Gzip (.html.gz)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Caches public pages as static HTML & pre-compressed Gzip files. Automatically bypasses logged-in users & WooCommerce carts.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnablePageCache" <?php echo ! empty( $settings['optEnablePageCache'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnablePageCache', this.checked); aioUpdateTopChips();">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; flex-wrap:wrap; gap:6px;">
								<span class="ph ph-rocket"></span> <?php echo esc_html__( 'Tier 2: WordPress advanced-cache.php Drop-in (~15ms TTFB)', 'aio-tools' ); ?>
								<?php if ( ! empty( $aio_adv_status['active'] ) ) : ?>
									<span style="font-size:11px; background:#dcfce7; color:#15803d; padding:2px 8px; border-radius:99px;"><?php echo esc_html__( 'Drop-in Active', 'aio-tools' ); ?></span>
								<?php elseif ( ! empty( $aio_adv_status['foreign_name'] ) ) : ?>
									<span style="font-size:11px; background:#fef3c7; color:#b45309; padding:2px 8px; border-radius:99px;"><?php echo esc_html( $aio_adv_status['foreign_name'] ); ?></span>
								<?php else : ?>
									<span style="font-size:11px; background:#f1f5f9; color:#475569; padding:2px 8px; border-radius:99px;"><?php echo esc_html__( 'Ready to Install on Save', 'aio-tools' ); ?></span>
								<?php endif; ?>
							</strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Automatically enables WP_CACHE and serves cached pages before WordPress plugins or MySQL connect.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableAdvCacheDropin" <?php echo $aio_adv_dropin_chk ? 'checked' : ''; ?> onchange="handleChange('optEnableAdvCacheDropin', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
					<?php if ( ! empty( $aio_adv_status['foreign_name'] ) || empty( $aio_adv_status['active'] ) ) : ?>
						<div style="margin-top:8px;">
							<button type="button" class="aio-btn-outline" style="font-size:12px; padding:5px 11px;" onclick="aioReinstallAdvCache()">
								<span class="ph ph-wrench"></span> <?php echo esc_html__( 'Install / Repair advanced-cache.php Drop-in Now', 'aio-tools' ); ?>
							</button>
						</div>
					<?php endif; ?>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; flex-wrap:wrap; gap:6px;">
								<span class="ph ph-gauge"></span> <?php echo esc_html__( 'Tier 1: .htaccess Zero-PHP Direct Disk Rewrite (0ms PHP)', 'aio-tools' ); ?>
								<?php if ( ! empty( $aio_ht_status['is_nginx'] ) ) : ?>
									<span style="font-size:11px; background:#f1f5f9; color:#475569; padding:2px 8px; border-radius:99px;">Nginx (Uses Tier 2 Drop-in)</span>
								<?php elseif ( ! empty( $aio_ht_status['page_cache_active'] ) ) : ?>
									<span style="font-size:11px; background:#dcfce7; color:#15803d; padding:2px 8px; border-radius:99px;"><?php echo esc_html__( 'Active in .htaccess', 'aio-tools' ); ?></span>
								<?php elseif ( ! empty( $aio_ht_status['writable'] ) ) : ?>
									<span style="font-size:11px; background:#e0f2fe; color:#0369a1; padding:2px 8px; border-radius:99px;"><?php echo esc_html__( '.htaccess Writable', 'aio-tools' ); ?></span>
								<?php endif; ?>
							</strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Apache / LiteSpeed serves .html.gz directly from disk without spawning a PHP worker process.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableHtaccessPageCache" <?php echo $aio_ht_page_chk ? 'checked' : ''; ?> onchange="handleChange('optEnableHtaccessPageCache', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
					<?php if ( ! empty( $aio_nginx_snippet ) ) : ?>
						<div style="margin-top:8px;">
							<button type="button" class="aio-btn-outline" style="font-size:12px; padding:5px 11px;" onclick="aioToggleNginxBox()">
								<span class="ph ph-terminal-window"></span> <?php echo esc_html__( 'View Nginx Zero-PHP Config (nginx.conf)', 'aio-tools' ); ?>
							</button>
							<div id="aio-nginx-conf-box" style="display:<?php echo ! empty( $aio_ht_status['is_nginx'] ) ? 'block' : 'none'; ?>; margin-top:10px; background:#0f172a; color:#e2e8f0; border-radius:8px; padding:12px;">
								<div style="display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px;">
									<small style="color:#94a3b8;"><?php echo esc_html__( 'For Nginx VPS admins: paste inside your server {} block and reload Nginx for 0ms PHP static serving.', 'aio-tools' ); ?></small>
									<button type="button" class="aio-btn-outline" style="font-size:11.5px; padding:4px 10px; background:#1e293b; color:#f8fafc; border-color:#334155;" onclick="aioCopyNginxSnippet()">
										<span class="ph ph-copy"></span> <?php echo esc_html__( 'Copy', 'aio-tools' ); ?>
									</button>
								</div>
								<textarea id="aio-nginx-conf-code" rows="8" readonly class="aio-form-control" style="font-family:monospace; font-size:11.5px; background:#020617 !important; color:#93c5fd !important; border-color:#1e293b !important;"><?php echo esc_textarea( $aio_nginx_snippet ); ?></textarea>
							</div>
						</div>
					<?php endif; ?>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-hard-drives"></span> <?php echo esc_html__( 'Browser Cache (1-Year TTL) & Static Gzip (.htaccess)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Adds Cache-Control max-age=31536000, mod_expires, and mod_deflate for static CSS, JS, fonts, and images.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableBrowserCache" <?php echo ! empty( $settings['optEnableBrowserCache'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableBrowserCache', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<!-- Live Disk Cache Telemetry Box -->
				<div style="margin-top:16px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:14px 16px;">
					<div style="display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px;">
						<div>
							<div style="font-size:11.5px; text-transform:uppercase; color:#64748b; font-weight:700;"><?php echo esc_html__( 'Cached Pages on Disk', 'aio-tools' ); ?></div>
							<div style="font-size:18px; font-weight:800; color:#0f172a; margin-top:3px;">
								<span id="aio-pc-stats-pages">—</span> <?php echo esc_html__( 'pages', 'aio-tools' ); ?>
								<span style="font-size:13px; color:#2563eb; font-weight:600;">(<span id="aio-pc-stats-size">0 B</span>)</span>
							</div>
							<div id="aio-pc-preload-state" style="font-size:12px; color:#64748b; margin-top:2px;"></div>
						</div>
						<div style="display:flex; flex-wrap:wrap; gap:8px;">
							<button type="button" class="aio-btn-outline" onclick="aioStartCachePreload()">
								<span class="ph ph-fire"></span> <?php echo esc_html__( 'Warm Cache', 'aio-tools' ); ?>
							</button>
							<button type="button" class="aio-btn-primary" onclick="aioClearPageCache()">
								<span class="ph ph-trash"></span> <?php echo esc_html__( 'Clear Page Cache', 'aio-tools' ); ?>
							</button>
						</div>
					</div>
				</div>
			</div>

			<!-- Right: Cache Rules, Preloader, TTL & Exclusions -->
			<div class="aio-card" style="margin-bottom:0;">
				<h3 style="margin-top:0; border-bottom:1px solid #f1f5f9; padding-bottom:12px; display:flex; align-items:center; gap:8px;">
					<span class="ph ph-funnel" style="color:#3b82f6; font-size:24px;"></span> <?php echo esc_html__( 'Smart Cache Rules, Preloader & Exclusions', 'aio-tools' ); ?>
				</h3>
				<p style="font-size:13px; color:#64748b; margin-bottom:18px;"><?php echo esc_html__( 'Maximize cache hit ratios for Facebook/Google/TikTok ad traffic while protecting dynamic pages.', 'aio-tools' ); ?></p>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-megaphone"></span> <?php echo esc_html__( 'Ignore Marketing & Analytics Query Strings', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Serves lightning-fast cached pages to visitors arriving with ?fbclid=, ?gclid=, ?utm_source=, ?ttclid=, ?zarsrc=.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optCacheIgnoreTracking" <?php echo $aio_ignore_trk_chk ? 'checked' : ''; ?> onchange="handleChange('optCacheIgnoreTracking', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-device-mobile"></span> <?php echo esc_html__( 'Separate Mobile Device Cache', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Only enable if your theme uses wp_is_mobile() to render completely different PHP HTML for phones vs desktops.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optCacheSeparateMobile" <?php echo ! empty( $settings['optCacheSeparateMobile'] ) ? 'checked' : ''; ?> onchange="handleChange('optCacheSeparateMobile', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-arrows-clockwise"></span> <?php echo esc_html__( 'Auto-Preload Top Pages After Cache Purge', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Automatically crawls Homepage, recent Pages, Posts, Products & Categories in background batches so visitors never hit a cold cache.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableCachePreload" <?php echo ! empty( $settings['optEnableCachePreload'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableCachePreload', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Cache Lifespan (TTL in Hours)', 'aio-tools' ); ?></label>
					<input type="number" min="1" max="720" class="aio-form-control" style="max-width:160px;" data-aio-opt="optCacheTtlHours" value="<?php echo esc_attr( $aio_ttl_hours ); ?>" onchange="handleChange('optCacheTtlHours', parseInt(this.value, 10) || 24)">
				</div>

				<div class="aio-form-group">
					<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Never Cache These URL Paths (One per line)', 'aio-tools' ); ?></label>
					<small style="color:#64748b; display:block; margin-bottom:6px;"><?php echo esc_html__( 'Note: /wp-admin/, /cart/, /checkout/, /my-account/, and /gio-hang/ are already excluded automatically.', 'aio-tools' ); ?></small>
					<textarea rows="3" class="aio-form-control" style="font-family:monospace; font-size:12.5px;" data-aio-opt="optCacheExcludeUrls" onblur="handleChange('optCacheExcludeUrls', this.value)" placeholder="/flash-sale/&#10;/custom-portal/"><?php echo esc_textarea( isset( $settings['optCacheExcludeUrls'] ) ? $settings['optCacheExcludeUrls'] : '' ); ?></textarea>
				</div>

				<div class="aio-form-group" style="margin-bottom:0;">
					<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Never Cache When Cookies Match (One prefix per line)', 'aio-tools' ); ?></label>
					<textarea rows="2" class="aio-form-control" style="font-family:monospace; font-size:12.5px;" data-aio-opt="optCacheExcludeCookies" onblur="handleChange('optCacheExcludeCookies', this.value)" placeholder="edd_items_in_cart&#10;member_logged_in"><?php echo esc_textarea( isset( $settings['optCacheExcludeCookies'] ) ? $settings['optCacheExcludeCookies'] : '' ); ?></textarea>
				</div>
			</div>

		</div>
	</div>

	<!-- =================================================================== -->
	<!-- SUB-TAB 3: PERSISTENT OBJECT CACHE (REDIS / MEMCACHED / APCU)       -->
	<!-- =================================================================== -->
	<div id="aio-perf-pane-object-cache" class="aio-perf-subpane">
		<div class="aio-grid-2">

			<!-- Left: Server Driver Matrix & Live Telemetry -->
			<div class="aio-card" style="margin-bottom:0;">
				<h3 style="margin-top:0; border-bottom:1px solid #f1f5f9; padding-bottom:12px; display:flex; align-items:center; gap:8px;">
					<span class="ph ph-cpu" style="color:#8b5cf6; font-size:24px;"></span> <?php echo esc_html__( 'Persistent Object Cache Engine (RAM)', 'aio-tools' ); ?>
				</h3>
				<p style="font-size:13px; color:#64748b; margin-bottom:14px;"><?php echo esc_html__( 'Caches WordPress database objects, options, and transients in RAM (Redis, Memcached, Memcache, or APCu) to accelerate WP-Admin, WooCommerce & logged-in requests.', 'aio-tools' ); ?></p>

				<div style="font-size:12px; font-weight:700; color:#475569; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.3px;"><?php echo esc_html__( 'Detected Server Drivers', 'aio-tools' ); ?></div>
				<div style="font-size:11.5px; color:#64748b; margin-bottom:8px;"><?php echo esc_html__( 'Note: Green checkmarks indicate PHP client extensions are installed; Redis/Memcached service must also be running on TCP port or Unix Socket.', 'aio-tools' ); ?></div>
				<div class="aio-driver-grid">
					<?php
					$aio_drivers_list = array(
						'phpredis'     => 'PhpRedis (C-Ext)',
						'redis_socket' => 'Redis Socket',
						'memcached'    => 'Memcached',
						'memcache'     => 'Memcache',
						'apcu'         => 'APCu RAM',
					);
					foreach ( $aio_drivers_list as $drv_key => $drv_label ) :
						$drv_ready = ! empty( $aio_obj_status['capabilities'][ $drv_key ] );
						?>
						<div class="aio-driver-pill <?php echo $drv_ready ? 'ready' : ''; ?>">
							<span style="font-weight:600;"><?php echo esc_html( $drv_label ); ?></span>
							<span class="ph <?php echo $drv_ready ? 'ph-check-circle' : 'ph-minus-circle'; ?>" style="font-size:16px; color:<?php echo $drv_ready ? '#16a34a' : '#94a3b8'; ?>;"></span>
						</div>
					<?php endforeach; ?>
				</div>

				<div id="aio-oc-foreign-alert" style="display:<?php echo ! empty( $aio_obj_status['dropin']['foreign_name'] ) ? 'block' : 'none'; ?>; background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:8px; padding:10px 12px; font-size:12.5px; margin-bottom:14px;">
					<strong><?php echo esc_html__( 'External Drop-in Detected:', 'aio-tools' ); ?></strong>
					<span id="aio-oc-foreign-name"><?php echo esc_html( $aio_obj_status['dropin']['foreign_name'] ); ?></span>.
					<?php echo esc_html__( 'You can replace it with AIO Tools standalone fail-open Drop-in below.', 'aio-tools' ); ?>
				</div>

				<!-- Live Telemetry Grid -->
				<div class="aio-metric-pills" style="margin-top:0; margin-bottom:16px;">
					<div class="aio-metric-pill">
						<div class="lbl"><?php echo esc_html__( 'Drop-in Status', 'aio-tools' ); ?></div>
						<div class="val" id="aio-oc-status" style="color:<?php echo $aio_oc_on ? '#10b981' : '#64748b'; ?>;">
							<?php echo ! empty( $aio_obj_status['dropin']['is_ours'] ) ? esc_html__( 'Active (AIO)', 'aio-tools' ) : ( ! empty( $aio_obj_status['dropin']['ext_active'] ) ? esc_html__( 'External', 'aio-tools' ) : esc_html__( 'Inactive', 'aio-tools' ) ); ?>
						</div>
					</div>
					<div class="aio-metric-pill">
						<div class="lbl"><?php echo esc_html__( 'Active Driver', 'aio-tools' ); ?></div>
						<div class="val" id="aio-oc-driver"><?php echo esc_html( $aio_obj_status['telemetry']['driver_used'] ); ?></div>
					</div>
					<div class="aio-metric-pill">
						<div class="lbl"><?php echo esc_html__( 'Ping Latency', 'aio-tools' ); ?></div>
						<div class="val" id="aio-oc-ping"><?php echo $aio_obj_status['telemetry']['ping_ms'] !== null ? esc_html( $aio_obj_status['telemetry']['ping_ms'] . ' ms' ) : '—'; ?></div>
					</div>
					<div class="aio-metric-pill">
						<div class="lbl"><?php echo esc_html__( 'RAM Used', 'aio-tools' ); ?></div>
						<div class="val" id="aio-oc-memory"><?php echo esc_html( $aio_obj_status['telemetry']['memory_human'] ); ?></div>
					</div>
					<div class="aio-metric-pill">
						<div class="lbl"><?php echo esc_html__( 'Cached Keys', 'aio-tools' ); ?></div>
						<div class="val" id="aio-oc-keys"><?php echo esc_html( (string) $aio_obj_status['telemetry']['keys_count'] ); ?></div>
					</div>
					<div class="aio-metric-pill">
						<div class="lbl"><?php echo esc_html__( 'Request Hit Ratio', 'aio-tools' ); ?></div>
						<div class="val" id="aio-oc-ratio"><?php echo esc_html( $aio_obj_status['telemetry']['hit_ratio'] . '%' ); ?></div>
					</div>
				</div>

				<div style="display:flex; flex-wrap:wrap; gap:8px;">
					<button type="button" id="aio-btn-oc-enable" class="aio-btn-primary" style="display:<?php echo ! empty( $aio_obj_status['dropin']['is_ours'] ) ? 'none' : 'inline-flex'; ?>;" onclick="aioToggleObjectCache(true, false)">
						<span class="ph ph-plugs-connected"></span> <?php echo esc_html__( 'Enable Object Cache Drop-in', 'aio-tools' ); ?>
					</button>
					<?php if ( ! empty( $aio_obj_status['dropin']['foreign_name'] ) ) : ?>
						<button type="button" id="aio-btn-oc-overwrite" class="aio-btn-outline" onclick="aioToggleObjectCache(true, true)">
							<span class="ph ph-arrows-clockwise"></span> <?php echo esc_html__( 'Take Over Foreign Drop-in', 'aio-tools' ); ?>
						</button>
					<?php endif; ?>
					<button type="button" id="aio-btn-oc-disable" class="aio-btn-danger" style="display:<?php echo ! empty( $aio_obj_status['dropin']['is_ours'] ) ? 'inline-flex' : 'none'; ?>;" onclick="aioToggleObjectCache(false, false)">
						<span class="ph ph-power"></span> <?php echo esc_html__( 'Disable Object Cache', 'aio-tools' ); ?>
					</button>
					<button type="button" class="aio-btn-outline" onclick="aioFlushObjectCache()">
						<span class="ph ph-broom"></span> <?php echo esc_html__( 'Flush Object Cache', 'aio-tools' ); ?>
					</button>
					<button type="button" class="aio-btn-secondary" onclick="aioRefreshObjectCacheStatus()">
						<span class="ph ph-arrows-clockwise"></span> <?php echo esc_html__( 'Refresh', 'aio-tools' ); ?>
					</button>
				</div>
			</div>

			<!-- Right: Connection Configuration & Live Tester -->
			<div class="aio-card" style="margin-bottom:0;">
				<h3 style="margin-top:0; border-bottom:1px solid #f1f5f9; padding-bottom:12px; display:flex; align-items:center; gap:8px;">
					<span class="ph ph-sliders" style="color:#2563eb; font-size:24px;"></span> <?php echo esc_html__( 'Backend Connection & Fail-Open Safety', 'aio-tools' ); ?>
				</h3>
				<p style="font-size:13px; color:#64748b; margin-bottom:18px;"><?php echo esc_html__( 'Fail-Open Architecture: if Redis or Memcached restarts or goes offline, AIO Tools automatically falls back to standard WordPress memory in 250ms with zero site downtime.', 'aio-tools' ); ?></p>

				<div class="aio-form-group">
					<label style="font-size:13px; font-weight:600; display:block; margin-bottom:5px;"><?php echo esc_html__( 'Cache Backend Driver', 'aio-tools' ); ?></label>
					<select id="aio-oc-sel-driver" class="aio-form-control" data-aio-opt="optObjectCacheDriver" onchange="handleChange('optObjectCacheDriver', this.value); aioOnObjDriverChange(this.value);">
						<option value="redis" <?php selected( $aio_obj_driver, 'redis' ); ?>><?php echo esc_html__( 'Redis (Auto: PhpRedis C-Extension or Pure-PHP Socket)', 'aio-tools' ); ?></option>
						<option value="memcached" <?php selected( $aio_obj_driver, 'memcached' ); ?>><?php echo esc_html__( 'Memcached (Modern Extension)', 'aio-tools' ); ?></option>
						<option value="memcache" <?php selected( $aio_obj_driver, 'memcache' ); ?>><?php echo esc_html__( 'Memcache (Legacy Extension)', 'aio-tools' ); ?></option>
						<option value="apcu" <?php selected( $aio_obj_driver, 'apcu' ); ?>><?php echo esc_html__( 'APCu Shared Memory (No Daemon Needed)', 'aio-tools' ); ?></option>
					</select>
				</div>

				<div id="aio-oc-network-fields" style="display:<?php echo $aio_obj_driver === 'apcu' ? 'none' : 'block'; ?>;">
					<?php
					$aio_saved_oc_host  = isset( $settings['txtObjectCacheHost'] ) && $settings['txtObjectCacheHost'] !== '' ? (string) $settings['txtObjectCacheHost'] : '127.0.0.1';
					$aio_is_sock_host   = strpos( $aio_saved_oc_host, '/' ) === 0 || stripos( $aio_saved_oc_host, 'unix://' ) === 0;
					$aio_saved_oc_port  = $aio_is_sock_host ? 0 : ( isset( $settings['txtObjectCachePort'] ) && absint( $settings['txtObjectCachePort'] ) > 0 ? absint( $settings['txtObjectCachePort'] ) : ( $aio_obj_driver === 'redis' ? 6379 : 11211 ) );
					$aio_detected_socks = ! empty( $aio_obj_status['config']['detected_sockets'] ) && is_array( $aio_obj_status['config']['detected_sockets'] ) ? $aio_obj_status['config']['detected_sockets'] : array();
					?>
					<div class="aio-form-grid-2-1" style="margin-bottom:10px;">
						<div>
							<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Host or Unix Socket Path', 'aio-tools' ); ?></label>
							<input type="text" id="aio-oc-inp-host" class="aio-form-control" data-aio-opt="txtObjectCacheHost" value="<?php echo esc_attr( $aio_saved_oc_host ); ?>" onchange="handleChange('txtObjectCacheHost', this.value)" placeholder="127.0.0.1 or /home/user/.redis/redis.sock">
						</div>
						<div>
							<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Port', 'aio-tools' ); ?></label>
							<input type="number" min="0" max="65535" id="aio-oc-inp-port" class="aio-form-control" data-aio-opt="txtObjectCachePort" value="<?php echo esc_attr( (string) $aio_saved_oc_port ); ?>" onchange="handleChange('txtObjectCachePort', parseInt(this.value, 10) || 0)" placeholder="6379">
						</div>
					</div>
					<?php if ( ! empty( $aio_detected_socks ) ) : ?>
						<div style="margin-bottom:12px; font-size:12px; color:#0369a1; background:#f0f9ff; border:1px solid #bae6fd; border-radius:8px; padding:8px 10px; display:flex; flex-wrap:wrap; align-items:center; gap:6px;">
							<span class="ph ph-plug" style="font-size:15px;"></span>
							<strong><?php echo esc_html__( 'Detected Unix Socket on Hosting:', 'aio-tools' ); ?></strong>
							<?php foreach ( $aio_detected_socks as $aio_sock_item ) : ?>
								<button type="button" onclick="aioUseDetectedSocket('<?php echo esc_js( $aio_sock_item ); ?>')" style="background:#fff; border:1px solid #7dd3fc; color:#0284c7; border-radius:6px; padding:2px 8px; font-family:monospace; font-size:11.5px; font-weight:600; cursor:pointer;">
									<?php echo esc_html( $aio_sock_item ); ?>
								</button>
							<?php endforeach; ?>
						</div>
					<?php endif; ?>

					<div id="aio-oc-redis-extra" class="aio-form-grid-2-1" style="display:<?php echo $aio_obj_driver === 'redis' ? 'grid' : 'none'; ?>; margin-bottom:14px;">
						<div>
							<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Redis Password / AUTH (Optional — AES-256 Encrypted)', 'aio-tools' ); ?></label>
							<input type="password" id="aio-oc-inp-pass" class="aio-form-control" data-aio-opt="txtObjectCachePassword" value="<?php echo esc_attr( isset( $settings['txtObjectCachePassword'] ) ? $settings['txtObjectCachePassword'] : '' ); ?>" onchange="handleChange('txtObjectCachePassword', this.value)" placeholder="<?php echo esc_attr__( 'Leave blank if local Redis has no password', 'aio-tools' ); ?>">
						</div>
						<div>
							<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Database Index (0–15)', 'aio-tools' ); ?></label>
							<input type="number" min="0" max="15" id="aio-oc-inp-db" class="aio-form-control" data-aio-opt="txtObjectCacheDb" value="<?php echo esc_attr( isset( $settings['txtObjectCacheDb'] ) ? absint( $settings['txtObjectCacheDb'] ) : 0 ); ?>" onchange="handleChange('txtObjectCacheDb', parseInt(this.value, 10) || 0)">
						</div>
					</div>
				</div>

				<div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px;">
					<button type="button" id="aio-btn-oc-test" class="aio-btn-outline" onclick="aioTestObjectCache()">
						<span class="ph ph-pulse"></span> <?php echo esc_html__( 'Test Connection (Ping)', 'aio-tools' ); ?>
					</button>
					<span id="aio-oc-test-msg" style="font-size:13px; font-weight:600;"></span>
				</div>
			</div>

		</div>
	</div>

	<!-- =================================================================== -->
	<!-- SUB-TAB 4: CSS & JAVASCRIPT DELIVERY PRO                            -->
	<!-- =================================================================== -->
	<div id="aio-perf-pane-css-js" class="aio-perf-subpane">
		<div class="aio-grid-2">

			<!-- Left: CSS, Critical CSS & Google Fonts -->
			<div class="aio-card" style="margin-bottom:0;">
				<h3 style="margin-top:0; border-bottom:1px solid #f1f5f9; padding-bottom:12px; display:flex; align-items:center; gap:8px;">
					<span class="ph ph-paint-brush" style="color:#0ea5e9; font-size:24px;"></span> <?php echo esc_html__( 'HTML, CSS & Google Fonts Optimization', 'aio-tools' ); ?>
				</h3>
				<p style="font-size:13px; color:#64748b; margin-bottom:18px;"><?php echo esc_html__( 'Eliminate "Render-Blocking Resources" warnings and compress stylesheets without breaking relative background/font URLs.', 'aio-tools' ); ?></p>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-arrows-in"></span> <?php echo esc_html__( 'Safe HTML Minifier', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Strips redundant HTML comments and whitespace while preserving inline code, pre, and textarea blocks.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableMinify" <?php echo ! empty( $settings['optEnableMinify'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableMinify', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-file-css"></span> <?php echo esc_html__( 'Minify Local CSS Files (.min.css)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Minifies unminified theme & plugin stylesheets into uploads/aio-assets/ with automatic relative url(...) rewriting.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableMinifyCss" <?php echo ! empty( $settings['optEnableMinifyCss'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableMinifyCss', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-lightning-slash"></span> <?php echo esc_html__( 'Eliminate Render-Blocking CSS (Async CSS)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Loads stylesheets asynchronously via media="print" + onload swap with noscript fallback to boost First Contentful Paint.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableAsyncCss" <?php echo ! empty( $settings['optEnableAsyncCss'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableAsyncCss', this.checked); aioToggleAsyncCssBox(this.checked);">
							<span class="aio-slider"></span>
						</label>
					</div>

					<div id="aio-async-css-box" style="margin-top:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:14px; display:<?php echo ! empty( $settings['optEnableAsyncCss'] ) ? 'block' : 'none'; ?>;">
						<div style="margin-bottom:12px; padding-bottom:12px; border-bottom:1px dashed #cbd5e1;">
							<div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0;">
								<span>
									<strong style="font-size:13px; color:#0f172a; display:block;"><?php echo esc_html__( 'Smart Anti-FOUC Protection (Keep Main Theme Layout CSS Synchronous)', 'aio-tools' ); ?></strong>
									<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Prevents unstyled flash (FOUC) & layout shifts (CLS) when Critical CSS below is blank by keeping your active theme core stylesheet synchronous while plugins load async.', 'aio-tools' ); ?></small>
								</span>
								<label class="aio-switch">
									<input type="checkbox" data-aio-opt="optAsyncCssProtectTheme" <?php echo $aio_async_protect_chk ? 'checked' : ''; ?> onchange="handleChange('optAsyncCssProtectTheme', this.checked)">
									<span class="aio-slider"></span>
								</label>
							</div>
						</div>
						<div style="margin-bottom:12px;">
							<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Above-the-Fold Critical CSS (Optional — Overrides Anti-FOUC)', 'aio-tools' ); ?></label>
							<small style="color:#64748b; display:block; margin-bottom:6px;"><?php echo esc_html__( 'Paste minimal header/hero CSS rules to inline directly in <head> before async stylesheets finish loading.', 'aio-tools' ); ?></small>
							<textarea rows="3" class="aio-form-control" style="font-family:monospace; font-size:12px;" data-aio-opt="optCriticalCss" onblur="handleChange('optCriticalCss', this.value)" placeholder="body{margin:0}.site-header{display:flex}"><?php echo esc_textarea( isset( $settings['optCriticalCss'] ) ? $settings['optCriticalCss'] : '' ); ?></textarea>
						</div>
						<div>
							<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Keep Specific CSS Synchronous (One filename/keyword per line)', 'aio-tools' ); ?></label>
							<small style="color:#64748b; display:block; margin-bottom:6px;"><?php echo esc_html__( 'Example: flatsome.css or style.css if you want your main theme layout synchronous while plugins load async.', 'aio-tools' ); ?></small>
							<textarea rows="2" class="aio-form-control" style="font-family:monospace; font-size:12px;" data-aio-opt="optAsyncCssExcludes" onblur="handleChange('optAsyncCssExcludes', this.value)" placeholder="flatsome.css&#10;elementor-frontend"><?php echo esc_textarea( isset( $settings['optAsyncCssExcludes'] ) ? $settings['optAsyncCssExcludes'] : '' ); ?></textarea>
						</div>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-text-aa"></span> <?php echo esc_html__( 'Google Fonts display=swap & Preconnect', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Prevents invisible text flash (FOIT) and warms TLS handshake to fonts.gstatic.com.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableFontSwap" <?php echo ! empty( $settings['optEnableFontSwap'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableFontSwap', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-cloud-arrow-down"></span> <?php echo esc_html__( 'Load Google Fonts Non-Blocking (Async Fonts)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Converts render-blocking fonts.googleapis.com stylesheets into non-blocking async stylesheets.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optAsyncGoogleFonts" <?php echo ! empty( $settings['optAsyncGoogleFonts'] ) ? 'checked' : ''; ?> onchange="handleChange('optAsyncGoogleFonts', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group" style="margin-bottom:0;">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-hard-drives"></span> <?php echo esc_html__( 'Self-Host Google Fonts Locally (.woff2 + Auto Preload)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Automatically downloads Google Fonts CSS & .woff2 files into uploads/aio-fonts/ to eliminate 3rd-party Google DNS/TLS requests.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optSelfHostGoogleFonts" <?php echo ! empty( $settings['optSelfHostGoogleFonts'] ) ? 'checked' : ''; ?> onchange="handleChange('optSelfHostGoogleFonts', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>
			</div>

			<!-- Right: JavaScript Minify, Defer & Delay JS -->
			<div class="aio-card" style="margin-bottom:0;">
				<h3 style="margin-top:0; border-bottom:1px solid #f1f5f9; padding-bottom:12px; display:flex; align-items:center; gap:8px;">
					<span class="ph ph-file-js" style="color:#f59e0b; font-size:24px;"></span> <?php echo esc_html__( 'JavaScript Execution & TBT Booster', 'aio-tools' ); ?>
				</h3>
				<p style="font-size:13px; color:#64748b; margin-bottom:18px;"><?php echo esc_html__( 'Slash Mobile Total Blocking Time (TBT) and Interaction to Next Paint (INP) while keeping jQuery & WooCommerce safe.', 'aio-tools' ); ?></p>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-brackets-curly"></span> <?php echo esc_html__( 'Minify Local JavaScript Files (.min.js)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Safely strips JS comments and indentation from unminified theme/plugin scripts while preserving string & regex literals.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableMinifyJs" <?php echo ! empty( $settings['optEnableMinifyJs'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableMinifyJs', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Exclude CSS / JS Files from Minification (One handle or filename per line)', 'aio-tools' ); ?></label>
					<small style="color:#64748b; display:block; margin-bottom:6px;"><?php echo esc_html__( 'Skip specific plugin/theme .css or .js files from being rewritten into uploads/aio-assets/.', 'aio-tools' ); ?></small>
					<textarea rows="2" class="aio-form-control" style="font-family:monospace; font-size:12px;" data-aio-opt="optMinifyExcludes" onblur="handleChange('optMinifyExcludes', this.value)" placeholder="custom-slider.js&#10;legacy-style.css"><?php echo esc_textarea( isset( $settings['optMinifyExcludes'] ) ? $settings['optMinifyExcludes'] : '' ); ?></textarea>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-fast-forward"></span> <?php echo esc_html__( 'Defer Non-Critical JavaScript', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Adds defer attribute to render-blocking scripts while protecting jQuery core, WooCommerce Cart/Checkout, and CAPTCHAs.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableDeferJS" <?php echo ! empty( $settings['optEnableDeferJS'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableDeferJS', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group" style="border-top:1px dashed #e2e8f0; padding-top:14px; margin-bottom:0;">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-timer"></span> <?php echo esc_html__( 'Delay JavaScript Execution until User Interaction', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Holds back heavy 3rd-party trackers & scripts until first scroll, touch, mouse move, click, or 5s fallback.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" id="aio-chk-delay-js" data-aio-opt="optEnableDelayJS" <?php echo ! empty( $settings['optEnableDelayJS'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableDelayJS', this.checked); aioToggleDelayJsBox(this.checked);">
							<span class="aio-slider"></span>
						</label>
					</div>

					<div id="aio-delay-js-box" style="margin-top:14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:14px; display:<?php echo ! empty( $settings['optEnableDelayJS'] ) ? 'block' : 'none'; ?>;">
						<div style="margin-bottom:12px;">
							<label style="font-size:13px; font-weight:600; display:block; margin-bottom:5px;"><?php echo esc_html__( 'Delay JS Strategy', 'aio-tools' ); ?></label>
							<select id="aio-sel-delay-mode" class="aio-form-control" data-aio-opt="optDelayJsMode" onchange="handleChange('optDelayJsMode', this.value)">
								<option value="targeted" <?php selected( $aio_delay_mode, 'targeted' ); ?>><?php echo esc_html__( 'Targeted (Safe — Only delay GTM, GA4, FB Pixel, Tawk.to, Chative, TikTok, Zalo, Ads)', 'aio-tools' ); ?></option>
								<option value="all" <?php selected( $aio_delay_mode, 'all' ); ?>><?php echo esc_html__( 'All Scripts (Max PageSpeed — Delay all non-excluded scripts)', 'aio-tools' ); ?></option>
							</select>
						</div>
						<div>
							<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Exclude Scripts from Delay (One keyword or filename per line)', 'aio-tools' ); ?></label>
							<small style="color:#64748b; display:block; margin-bottom:6px;"><?php echo esc_html__( 'Note: jQuery core, WooCommerce Cart/Checkout, Turnstile, and reCAPTCHA are protected automatically.', 'aio-tools' ); ?></small>
							<textarea id="aio-delay-excludes" rows="3" class="aio-form-control" style="font-family:monospace; font-size:12.5px;" data-aio-opt="optDelayJsExcludes" onblur="handleChange('optDelayJsExcludes', this.value)" placeholder="swiper.min.js&#10;elementor-frontend"><?php echo esc_textarea( isset( $settings['optDelayJsExcludes'] ) ? $settings['optDelayJsExcludes'] : '' ); ?></textarea>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>

	<!-- =================================================================== -->
	<!-- SUB-TAB 5: MEDIA, VIDEO & ZERO-CLS                                  -->
	<!-- =================================================================== -->
	<div id="aio-perf-pane-media" class="aio-perf-subpane">
		<div class="aio-grid-2">

			<!-- Left: LCP, Full-Site Dimensions, Lazy Load & YouTube Facade -->
			<div class="aio-card" style="margin-bottom:0;">
				<h3 style="margin-top:0; border-bottom:1px solid #f1f5f9; padding-bottom:12px; display:flex; align-items:center; gap:8px;">
					<span class="ph ph-frame-corners" style="color:#10b981; font-size:24px;"></span> <?php echo esc_html__( 'Core Web Vitals Media & Zero-CLS', 'aio-tools' ); ?>
				</h3>
				<p style="font-size:13px; color:#64748b; margin-bottom:18px;"><?php echo esc_html__( 'Prioritize your hero image (LCP), lock layout dimensions across themes/plugins/SVGs (CLS = 0), and lazy-load offscreen media.', 'aio-tools' ); ?></p>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-crown"></span> <?php echo esc_html__( 'Smart LCP & FetchPriority="high"', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Strips accidental loading="lazy" from the hero image, injects fetchpriority="high", and preloads singular featured images.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableSmartLcp" <?php echo ! empty( $settings['optEnableSmartLcp'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableSmartLcp', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-bounding-box"></span> <?php echo esc_html__( 'Auto Add Missing Image & SVG Dimensions (Full-Site Zero CLS)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Resolves width & height across Uploads, Theme icons, Plugin assets, and .svg viewBox attributes.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableAutoImageDims" <?php echo ! empty( $settings['optEnableAutoImageDims'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableAutoImageDims', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-hourglass-high"></span> <?php echo esc_html__( 'Smart Lazy Load (Below-the-Fold Images & Iframes)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Defers offscreen images and iframes while pairing with Smart LCP so hero images are never delayed.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="opt-perf-lazyload" <?php echo ! empty( $settings['opt-perf-lazyload'] ) ? 'checked' : ''; ?> onchange="handleChange('opt-perf-lazyload', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-selection-background"></span> <?php echo esc_html__( 'Lazy-Load CSS Background Images', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Defers offscreen inline style="background-image:..." section banners via IntersectionObserver while skipping hero headers.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optLazyLoadBg" <?php echo ! empty( $settings['optLazyLoadBg'] ) ? 'checked' : ''; ?> onchange="handleChange('optLazyLoadBg', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-youtube-logo"></span> <?php echo esc_html__( 'YouTube Smart Facade (~800KB JS Saver)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Replaces heavy YouTube iframes with crisp preview + SVG Play button until clicked.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableYoutubeFacade" <?php echo ! empty( $settings['optEnableYoutubeFacade'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableYoutubeFacade', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group" style="margin-bottom:0;">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-arrows-left-right"></span> <?php echo esc_html__( 'Enable Seamless Media Replace', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Replace any Media Library attachment file while preserving its attachment ID and links.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableMediaReplace" <?php echo ! empty( $settings['optEnableMediaReplace'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableMediaReplace', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>
			</div>

			<!-- Right: WebP Engine & Background Bulk Converter -->
			<div id="aio-bulk-webp-card" class="aio-card" style="margin-bottom:0;">
				<h3 style="margin-top:0; border-bottom:1px solid #f1f5f9; padding-bottom:12px; display:flex; align-items:center; gap:8px;">
					<span class="ph ph-magic-wand" style="color:#8b5cf6; font-size:24px;"></span> <?php echo esc_html__( 'Next-Gen WebP Engine & Bulk Optimizer', 'aio-tools' ); ?>
				</h3>
				<p style="font-size:13px; color:#64748b; margin-bottom:18px;"><?php echo esc_html__( 'Automatically convert new uploads to WebP and batch-optimize existing Media Library images in the background.', 'aio-tools' ); ?></p>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-file-image"></span> <?php echo esc_html__( 'Auto Convert Uploads to WebP', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Converts newly uploaded JPG/PNG images and all intermediate thumbnail sizes to WebP.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="opt-perf-webp" <?php echo ! empty( $settings['opt-perf-webp'] ) ? 'checked' : ''; ?> onchange="handleChange('opt-perf-webp', this.checked); aioUpdateTopChips();">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-swap"></span> <?php echo esc_html__( 'Smart Frontend WebP Rewrite & .htaccess Delivery', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Automatically rewrites hardcoded .jpg/.png URLs in old posts, srcset & CSS backgrounds to .webp when verified on disk, plus transparent .htaccess WebP serving.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableWebpRewrite" <?php echo ! empty( $settings['optEnableWebpRewrite'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableWebpRewrite', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-trash"></span> <?php echo esc_html__( 'Delete Original JPG/PNG after WebP Conversion', 'aio-tools' ); ?></strong>
							<small style="color:#f59e0b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Saves disk storage by deleting original JPG/PNG files. Keep "Smart Frontend WebP Rewrite" enabled above so old hardcoded post URLs never 404.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="opt-perf-webp-delete-original" <?php echo ! empty( $settings['opt-perf-webp-delete-original'] ) ? 'checked' : ''; ?> onchange="handleChange('opt-perf-webp-delete-original', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div style="background:#f8fafc; border:1px solid #e2e8f0; padding:18px; border-radius:10px; margin-top:16px;">
					<div style="font-weight:700; font-size:14px; color:#0f172a; margin-bottom:6px;"><?php echo esc_html__( 'Background Bulk WebP Converter', 'aio-tools' ); ?></div>
					<p style="font-size:12.5px; color:#64748b; margin:0 0 14px;"><?php echo esc_html__( 'Scans your entire Media Library and converts existing JPG/PNG attachments safely in background batches.', 'aio-tools' ); ?></p>

					<div id="aio-bulk-webp-init">
						<button type="button" class="aio-btn-primary" onclick="aioStartBulkWebP()"><span class="ph ph-play-circle"></span> <?php echo esc_html__( 'Start Bulk Conversion', 'aio-tools' ); ?></button>
						<span id="aio-bulk-webp-status-msg" style="margin-left: 12px; font-size: 13px; color: #475569;"></span>
					</div>

					<div id="aio-bulk-webp-progress-wrap" style="display:none; margin-top: 5px;">
						<div style="display:flex; justify-content:space-between; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: #334155;">
							<span id="aio-bulk-webp-text"><?php echo esc_html__( 'Processing in background...', 'aio-tools' ); ?></span>
							<span id="aio-bulk-webp-percent">0%</span>
						</div>
						<div style="background: #e2e8f0; height: 10px; border-radius: 5px; overflow: hidden; width: 100%;">
							<div id="aio-bulk-webp-bar" style="background: linear-gradient(90deg, #3b82f6, #0ea5e9); height: 100%; width: 0%; transition: width 0.3s;"></div>
						</div>
						<div style="display:flex; justify-content:space-between; align-items:center; margin-top: 15px;">
							<div style="font-size: 13px; color: #475569;">
								<span class="ph ph-hard-drives"></span> <?php echo esc_html__( 'Storage Saved: ', 'aio-tools' ); ?> <strong id="aio-bulk-webp-saved" style="color: #10b981;">0 MB</strong>
								<span id="aio-bulk-webp-saved-percent" style="color: #64748b; font-size: 12px;"></span>
							</div>
							<button type="button" class="aio-btn-danger" style="padding: 6px 12px; font-size: 12px;" onclick="aioStopBulkWebP()">
								<span class="ph ph-stop-circle"></span> <?php echo esc_html__( 'Stop', 'aio-tools' ); ?>
							</button>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>

	<!-- =================================================================== -->
	<!-- SUB-TAB 6: CDN, NETWORK HINTS & WP CORE DEBLOAT                     -->
	<!-- =================================================================== -->
	<div id="aio-perf-pane-cdn-core" class="aio-perf-subpane">
		<div class="aio-grid-2">

			<!-- Left: CDN Rewriter, Instant Page & Resource Hints -->
			<div class="aio-card" style="margin-bottom:0;">
				<h3 style="margin-top:0; border-bottom:1px solid #f1f5f9; padding-bottom:12px; display:flex; align-items:center; gap:8px;">
					<span class="ph ph-globe-hemisphere-west" style="color:#0ea5e9; font-size:24px;"></span> <?php echo esc_html__( 'CDN Rewriter, Instant Page & Resource Hints', 'aio-tools' ); ?>
				</h3>
				<p style="font-size:13px; color:#64748b; margin-bottom:18px;"><?php echo esc_html__( 'Offload static assets to an edge CDN, prefetch internal pages on hover, and warm external DNS/TLS connections.', 'aio-tools' ); ?></p>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-cloud-check"></span> <?php echo esc_html__( 'Enable Static Asset CDN URL Rewriter', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Rewrites static CSS, JS, fonts, and images under /wp-content/ and /wp-includes/ to your CDN hostname (BunnyCDN, CloudFront, KeyCDN...).', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableCdn" <?php echo ! empty( $settings['optEnableCdn'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableCdn', this.checked); aioToggleCdnBox(this.checked);">
							<span class="aio-slider"></span>
						</label>
					</div>
					<div id="aio-cdn-url-box" style="margin-top:10px; display:<?php echo ! empty( $settings['optEnableCdn'] ) ? 'block' : 'none'; ?>;">
						<input type="url" class="aio-form-control" data-aio-opt="txtCdnUrl" value="<?php echo esc_attr( isset( $settings['txtCdnUrl'] ) ? $settings['txtCdnUrl'] : '' ); ?>" onchange="handleChange('txtCdnUrl', this.value)" placeholder="https://cdn.yourdomain.com">
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-cursor-click"></span> <?php echo esc_html__( 'Instant Page Prefetch (Speculation Rules API)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Uses Chrome Speculation Rules + Safari/Firefox hover fallback so internal links open instantaneously.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableInstantPage" <?php echo ! empty( $settings['optEnableInstantPage'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableInstantPage', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Preconnect & DNS-Prefetch Domains (One per line)', 'aio-tools' ); ?></label>
					<textarea id="aio-prefetch-domains" rows="3" class="aio-form-control" style="font-family:monospace; font-size:12.5px;" data-aio-opt="optPrefetchDomains" onblur="handleChange('optPrefetchDomains', this.value)" placeholder="https://fonts.googleapis.com&#10;https://fonts.gstatic.com"><?php echo esc_textarea( isset( $settings['optPrefetchDomains'] ) ? $settings['optPrefetchDomains'] : '' ); ?></textarea>
				</div>

				<div class="aio-form-group" style="margin-bottom:0;">
					<label style="font-size:13px; font-weight:600; display:block; margin-bottom:4px;"><?php echo esc_html__( 'Preload Critical Assets (Full URLs, one per line)', 'aio-tools' ); ?></label>
					<textarea id="aio-preload-assets" rows="3" class="aio-form-control" style="font-family:monospace; font-size:12.5px;" data-aio-opt="optPreloadAssets" onblur="handleChange('optPreloadAssets', this.value)" placeholder="https://yourdomain.com/wp-content/themes/theme/fonts/main.woff2"><?php echo esc_textarea( isset( $settings['optPreloadAssets'] ) ? $settings['optPreloadAssets'] : '' ); ?></textarea>
				</div>
			</div>

			<!-- Right: WP Core Debloat -->
			<div class="aio-card" style="margin-bottom:0;">
				<h3 style="margin-top:0; border-bottom:1px solid #f1f5f9; padding-bottom:12px; display:flex; align-items:center; gap:8px;">
					<span class="ph ph-broom" style="color:#ef4444; font-size:24px;"></span> <?php echo esc_html__( 'WP Core Debloat', 'aio-tools' ); ?>
				</h3>
				<p style="font-size:13px; color:#64748b; margin-bottom:18px;"><?php echo esc_html__( 'Strip unused WordPress core CSS/JS bloat for anonymous visitors to save HTTP requests, bandwidth, and CPU.', 'aio-tools' ); ?></p>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-smiley"></span> <?php echo esc_html__( 'Disable Default Emoji Script & Styles', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Removes wp-emoji-release.min.js (~18KB) since modern OS/browsers render native emojis.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="opt-perf-disable-emoji" <?php echo ! empty( $settings['opt-perf-disable-emoji'] ) ? 'checked' : ''; ?> onchange="handleChange('opt-perf-disable-emoji', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-eye-slash"></span> <?php echo esc_html__( 'Unload Dashicons CSS for Logged-Out Visitors', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Prevents loading dashicons.min.css (~36KB CSS) for guests while keeping wp-admin & wp-login intact.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optDisableDashicons" <?php echo ! empty( $settings['optDisableDashicons'] ) ? 'checked' : ''; ?> onchange="handleChange('optDisableDashicons', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-file-js"></span> <?php echo esc_html__( 'Disable Frontend jQuery Migrate', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Removes legacy jquery-migrate.min.js dependency on the frontend.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optDisableJqueryMigrate" <?php echo ! empty( $settings['optDisableJqueryMigrate'] ) ? 'checked' : ''; ?> onchange="handleChange('optDisableJqueryMigrate', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-cube"></span> <?php echo esc_html__( 'Disable Gutenberg Block Library CSS on Frontend', 'aio-tools' ); ?></strong>
							<small style="color:#f59e0b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Only enable if your site uses Classic Editor, Flatsome UX Builder, or Elementor without Gutenberg blocks.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optDisableBlockCss" <?php echo ! empty( $settings['optDisableBlockCss'] ) ? 'checked' : ''; ?> onchange="handleChange('optDisableBlockCss', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-link-break"></span> <?php echo esc_html__( 'Disable OEmbed Script & Discovery Links', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Removes wp-embed.min.js and oEmbed head links.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="opt-perf-disable-embed" <?php echo ! empty( $settings['opt-perf-disable-embed'] ) ? 'checked' : ''; ?> onchange="handleChange('opt-perf-disable-embed', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-link-simple-horizontal"></span> <?php echo esc_html__( 'Remove Query Strings (?ver=) from Static Files', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Strips ?ver= parameters for logged-out visitors to improve proxy/CDN cache hit rates.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optEnableRemoveQueryString" <?php echo ! empty( $settings['optEnableRemoveQueryString'] ) ? 'checked' : ''; ?> onchange="handleChange('optEnableRemoveQueryString', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-shopping-cart-simple"></span> <?php echo esc_html__( 'Optimize WooCommerce Cart Fragments (Empty Cart Bypass)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Skips uncached ?wc-ajax=get_refreshed_fragments requests when a visitor cart is empty while preserving live AJAX Add-to-Cart updates.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="optOptimizeWcFragments" <?php echo ! empty( $settings['optOptimizeWcFragments'] ) ? 'checked' : ''; ?> onchange="handleChange('optOptimizeWcFragments', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>

				<div class="aio-form-group" style="margin-bottom:0;">
					<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
						<span>
							<strong style="display:flex; align-items:center; gap:6px;"><span class="ph ph-heartbeat"></span> <?php echo esc_html__( 'Throttle Heartbeat API (60s)', 'aio-tools' ); ?></strong>
							<small style="color:#64748b; font-weight:normal; display:block; margin-top:2px;"><?php echo esc_html__( 'Reduces background admin-ajax.php polling from 15s to 60s to lower server CPU usage.', 'aio-tools' ); ?></small>
						</span>
						<label class="aio-switch">
							<input type="checkbox" data-aio-opt="opt-perf-control-heartbeat" <?php echo ! empty( $settings['opt-perf-control-heartbeat'] ) ? 'checked' : ''; ?> onchange="handleChange('opt-perf-control-heartbeat', this.checked)">
							<span class="aio-slider"></span>
						</label>
					</div>
				</div>
			</div>

		</div>
	</div>

</div>

<script>
let aioWebpPollInterval = null;
let aioLastAuditItems = [];

function aioSwitchPerfSubtab(subtabId) {
	document.querySelectorAll('.aio-perf-subbtn').forEach(function(btn) {
		if (btn.getAttribute('data-perf-subtab') === subtabId) {
			btn.classList.add('active');
			if (typeof btn.scrollIntoView === 'function') {
				btn.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
			}
		} else {
			btn.classList.remove('active');
		}
	});
	document.querySelectorAll('.aio-perf-subpane').forEach(function(pane) {
		if (pane.id === 'aio-perf-pane-' + subtabId) {
			pane.classList.add('active');
			pane.style.display = 'block';
		} else {
			pane.classList.remove('active');
			pane.style.display = 'none';
		}
	});
	if (subtabId === 'page-cache') {
		aioLoadPageCacheStats();
	}
	if (subtabId === 'object-cache') {
		aioRefreshObjectCacheStatus();
	}
}

function aioSwitchAnalyzerMode(mode) {
	aioSwitchPerfSubtab('overview');
	const target = document.getElementById(mode === 'psi' ? 'aio-analyzer-pane-psi' : 'aio-analyzer-pane-local');
	if (target && target.scrollIntoView) {
		target.scrollIntoView({ behavior: 'smooth', block: 'start' });
	}
}

function aioToggleDelayJsBox(enabled) {
	const box = document.getElementById('aio-delay-js-box');
	if (box) box.style.display = enabled ? 'block' : 'none';
}

function aioToggleAsyncCssBox(enabled) {
	const box = document.getElementById('aio-async-css-box');
	if (box) box.style.display = enabled ? 'block' : 'none';
}

function aioToggleCdnBox(enabled) {
	const box = document.getElementById('aio-cdn-url-box');
	if (box) box.style.display = enabled ? 'block' : 'none';
}

function aioToggleNginxBox() {
	const box = document.getElementById('aio-nginx-conf-box');
	if (box) box.style.display = box.style.display === 'none' ? 'block' : 'none';
}

function aioCopyNginxSnippet() {
	const el = document.getElementById('aio-nginx-conf-code');
	if (!el) return;
	if (navigator.clipboard && navigator.clipboard.writeText) {
		navigator.clipboard.writeText(el.value).then(function() {
			showToast('<?php echo esc_js( __( 'Copied Nginx config to clipboard!', 'aio-tools' ) ); ?>', 'success');
		});
	} else {
		el.select();
		document.execCommand('copy');
		showToast('<?php echo esc_js( __( 'Copied Nginx config to clipboard!', 'aio-tools' ) ); ?>', 'success');
	}
}

function aioOnObjDriverChange(driver) {
	const netBox = document.getElementById('aio-oc-network-fields');
	const redisBox = document.getElementById('aio-oc-redis-extra');
	const portInp = document.getElementById('aio-oc-inp-port');
	if (netBox) netBox.style.display = driver === 'apcu' ? 'none' : 'block';
	if (redisBox) redisBox.style.display = driver === 'redis' ? 'grid' : 'none';
	if (portInp) {
		const cur = parseInt(portInp.value, 10) || 0;
		if (driver === 'redis' && (cur === 11211 || cur === 0)) {
			portInp.value = 6379;
			handleChange('txtObjectCachePort', 6379);
		} else if ((driver === 'memcached' || driver === 'memcache') && (cur === 6379 || cur === 0)) {
			portInp.value = 11211;
			handleChange('txtObjectCachePort', 11211);
		}
	}
}

function aioUpdateTopChips() {
	const pcChip = document.getElementById('aio-chip-pagecache');
	const pcTxt = document.getElementById('aio-chip-pagecache-txt');
	if (pcChip && pcTxt) {
		const on = !!settings.optEnablePageCache;
		pcChip.classList.toggle('on', on);
		pcTxt.innerText = on ? '<?php echo esc_js( __( 'ON', 'aio-tools' ) ); ?>' : '<?php echo esc_js( __( 'OFF', 'aio-tools' ) ); ?>';
	}
	const wpChip = document.getElementById('aio-chip-webp');
	const wpTxt = document.getElementById('aio-chip-webp-txt');
	if (wpChip && wpTxt) {
		const on = !!settings['opt-perf-webp'];
		wpChip.classList.toggle('on', on);
		wpTxt.innerText = on ? '<?php echo esc_js( __( 'ON', 'aio-tools' ) ); ?>' : '<?php echo esc_js( __( 'OFF', 'aio-tools' ) ); ?>';
	}
}

function aioBuildScoreGauge(score) {
	const s = Math.max(0, Math.min(100, parseInt(score, 10) || 0));
	const color = s >= 90 ? '#10b981' : (s >= 55 ? '#f59e0b' : '#ef4444');
	const bgRing = s >= 90 ? '#d1fae5' : (s >= 55 ? '#fef3c7' : '#fee2e2');
	const r = 38;
	const c = 2 * Math.PI * r;
	const offset = c - (s / 100) * c;

	return '<div style="position:relative; width:94px; height:94px; flex-shrink:0;">'
		+ '<svg width="94" height="94" viewBox="0 0 94 94" style="transform:rotate(-90deg);">'
		+ '<circle cx="47" cy="47" r="' + r + '" fill="none" stroke="' + bgRing + '" stroke-width="8"></circle>'
		+ '<circle cx="47" cy="47" r="' + r + '" fill="none" stroke="' + color + '" stroke-width="8" stroke-linecap="round" stroke-dasharray="' + c.toFixed(1) + '" stroke-dashoffset="' + offset.toFixed(1) + '"></circle>'
		+ '</svg>'
		+ '<div style="position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;">'
		+ '<span style="font-size:24px; font-weight:800; color:' + color + '; line-height:1;">' + s + '</span>'
		+ '<span style="font-size:10px; color:#64748b; font-weight:600; margin-top:2px;">/ 100</span>'
		+ '</div></div>';
}

let aioPresetSaving = false;

function aioGetSpeedPresetProfiles() {
	const safe = {
		'opt-module-performance': true,
		'optEnablePageCache': true,
		'optEnableAdvCacheDropin': true,
		'optEnableHtaccessPageCache': true,
		'optCacheIgnoreTracking': true,
		'optEnableBrowserCache': true,
		'optEnableSmartLcp': true,
		'optEnableAutoImageDims': true,
		'optEnableFontSwap': true,
		'opt-perf-lazyload': true,
		'opt-perf-webp': true,
		'optEnableWebpRewrite': true,
		'opt-perf-disable-emoji': true,
		'opt-perf-disable-embed': true,
		'opt-perf-control-heartbeat': true,
		'optDisableDashicons': true,
		'optDisableJqueryMigrate': false,
		'optOptimizeWcFragments': false,
		'optEnableMinify': false,
		'optEnableMinifyCss': false,
		'optEnableMinifyJs': false,
		'optEnableAsyncCss': false,
		'optAsyncCssProtectTheme': true,
		'optAsyncGoogleFonts': false,
		'optSelfHostGoogleFonts': false,
		'optLazyLoadBg': false,
		'optEnableDeferJS': false,
		'optEnableDelayJS': false,
		'optDelayJsMode': 'targeted',
		'optEnableYoutubeFacade': false,
		'optEnableInstantPage': false,
		'optEnableCachePreload': false,
		'optEnableRemoveQueryString': false
	};
	const recommended = Object.assign({}, safe, {
		'optDisableJqueryMigrate': true,
		'optOptimizeWcFragments': true,
		'optEnableMinify': true,
		'optEnableMinifyCss': true,
		'optEnableMinifyJs': true,
		'optEnableDeferJS': true,
		'optEnableDelayJS': true,
		'optDelayJsMode': 'targeted',
		'optEnableYoutubeFacade': true,
		'optEnableInstantPage': true,
		'optEnableCachePreload': true
	});
	const rocket = Object.assign({}, recommended, {
		'optEnableAsyncCss': true,
		'optAsyncCssProtectTheme': true,
		'optAsyncGoogleFonts': true,
		'optSelfHostGoogleFonts': true,
		'optLazyLoadBg': true,
		'optDelayJsMode': 'all',
		'optEnableRemoveQueryString': true
	});
	return { safe: safe, recommended: recommended, rocket: rocket };
}

function aioDetectActiveSpeedPreset() {
	const profiles = aioGetSpeedPresetProfiles();
	const defaultTrue = [
		'opt-module-performance',
		'optEnableAdvCacheDropin',
		'optEnableHtaccessPageCache',
		'optCacheIgnoreTracking',
		'optAsyncCssProtectTheme'
	];
	const legacyOptKeys = [
		'optEnableWebpRewrite',
		'optOptimizeWcFragments',
		'optSelfHostGoogleFonts'
	];
	const opts = (typeof settings === 'object' && settings) ? settings : {};
	const hasSavedPresetKey = Object.prototype.hasOwnProperty.call(opts, 'optSpeedPreset');
	const order = ['rocket', 'recommended', 'safe'];

	for (let i = 0; i < order.length; i++) {
		const id = order[i];
		const map = profiles[id];
		const keys = Object.keys(map);
		let matched = true;
		for (let j = 0; j < keys.length; j++) {
			const k = keys[j];
			const expected = map[k];
			if (k === 'optDelayJsMode') {
				if (!map.optEnableDelayJS) continue;
				const actualMode = opts.optDelayJsMode === 'all' ? 'all' : 'targeted';
				if (actualMode !== expected) {
					matched = false;
					break;
				}
				continue;
			}
			if (k === 'optAsyncCssProtectTheme' && !map.optEnableAsyncCss) {
				continue;
			}
			if (!hasSavedPresetKey && legacyOptKeys.indexOf(k) !== -1 && !Object.prototype.hasOwnProperty.call(opts, k)) {
				continue;
			}
			const actual = Object.prototype.hasOwnProperty.call(opts, k)
				? !!opts[k]
				: (defaultTrue.indexOf(k) !== -1);
			if (actual !== !!expected) {
				matched = false;
				break;
			}
		}
		if (matched) return id;
	}

	const coreProbe = [
		'optEnablePageCache',
		'optEnableBrowserCache',
		'optEnableSmartLcp',
		'optEnableMinify',
		'optEnableMinifyCss',
		'optEnableMinifyJs',
		'optEnableDeferJS',
		'optEnableDelayJS',
		'optEnableAsyncCss',
		'opt-perf-lazyload',
		'opt-perf-webp'
	];
	for (let c = 0; c < coreProbe.length; c++) {
		if (opts[coreProbe[c]]) return 'custom';
	}
	return 'none';
}

function aioRefreshPresetCardsUI() {
	const activeId = aioDetectActiveSpeedPreset();
	const labelMap = {
		safe: '<?php echo esc_js( __( 'Safe Mode', 'aio-tools' ) ); ?>',
		recommended: '<?php echo esc_js( __( 'Recommended', 'aio-tools' ) ); ?>',
		rocket: '<?php echo esc_js( __( 'Rocket', 'aio-tools' ) ); ?>'
	};

	document.querySelectorAll('.aio-preset-box[data-preset]').forEach(function(box) {
		const p = box.getAttribute('data-preset');
		const isSelected = (p === activeId);
		box.classList.toggle('is-active', isSelected);
		box.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
	});

	const hdr = document.getElementById('aio-preset-header-badge');
	if (hdr) {
		hdr.classList.remove('is-preset', 'is-custom');
		if (labelMap[activeId]) {
			hdr.classList.add('is-preset');
			hdr.innerHTML = '<span class="ph ph-check-circle" style="font-size:14px;"></span> '
				+ aioEscapeHtml('<?php echo esc_js( __( 'Active Profile:', 'aio-tools' ) ); ?> ' + labelMap[activeId]);
		} else if (activeId === 'custom') {
			hdr.classList.add('is-custom');
			hdr.innerHTML = '<span class="ph ph-faders" style="font-size:14px;"></span> '
				+ aioEscapeHtml('<?php echo esc_js( __( 'Custom Profile', 'aio-tools' ) ); ?>');
		} else {
			hdr.innerText = '<?php echo esc_js( __( 'Not Selected', 'aio-tools' ) ); ?>';
		}
	}
}

function aioSyncPerfInputsFromSettings() {
	const root = document.getElementById('tab-performance');
	if (!root) {
		aioRefreshPresetCardsUI();
		return;
	}
	root.querySelectorAll('[data-aio-opt]').forEach(function(el) {
		const key = el.getAttribute('data-aio-opt');
		if (!(key in settings)) return;
		if (el.type === 'checkbox') {
			el.checked = !!settings[key];
		} else {
			el.value = settings[key] == null ? '' : settings[key];
		}
	});
	aioToggleDelayJsBox(!!settings.optEnableDelayJS);
	aioToggleAsyncCssBox(!!settings.optEnableAsyncCss);
	aioToggleCdnBox(!!settings.optEnableCdn);
	aioUpdateTopChips();
	aioRefreshPresetCardsUI();
}

function aioPersistSettingsSilent(onDone, onAlways) {
	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_update_settings',
		security: aio_smtp_param.settings_nonce,
		settings: JSON.stringify(settings)
	}, function(res) {
		if (res && res.success) {
			if (typeof window.aioMarkClean === 'function') window.aioMarkClean();
			if (typeof onDone === 'function') onDone();
		} else {
			const msg = (res && typeof res.data === 'string') ? res.data : 'Failed to save settings';
			showToast(msg, 'error');
		}
	}).fail(function() {
		showToast('Server connection error.', 'error');
	}).always(function() {
		if (typeof onAlways === 'function') onAlways();
	});
}

function aioApplySpeedPreset(preset) {
	if (aioPresetSaving) return;
	const profiles = aioGetSpeedPresetProfiles();
	const targetMap = profiles[preset];
	if (!targetMap) return;

	Object.keys(targetMap).forEach(function(k) {
		handleChange(k, targetMap[k]);
	});
	handleChange('optSpeedPreset', preset);

	const dashPerfChk = document.querySelector('input[onchange*="opt-module-performance"]');
	if (dashPerfChk) dashPerfChk.checked = true;

	aioSyncPerfInputsFromSettings();

	const grid = document.getElementById('aio-preset-grid');
	aioPresetSaving = true;
	if (grid) grid.classList.add('is-saving');

	aioPersistSettingsSilent(function() {
		const labelMap = {
			safe: '<?php echo esc_js( __( 'Safe Mode', 'aio-tools' ) ); ?>',
			recommended: '<?php echo esc_js( __( 'Recommended', 'aio-tools' ) ); ?>',
			rocket: '<?php echo esc_js( __( 'Rocket', 'aio-tools' ) ); ?>'
		};
		showToast('<?php echo esc_js( __( 'Applied preset:', 'aio-tools' ) ); ?> ' + (labelMap[preset] || preset) + '!', 'success');
		const out = document.getElementById('aio-local-audit-output');
		if (out && out.style.display !== 'none') {
			aioRunLocalAudit();
		}
	}, function() {
		aioPresetSaving = false;
		if (grid) grid.classList.remove('is-saving');
	});
}

function aioRunLocalAudit() {
	const btn = document.getElementById('aio-btn-local-audit');
	const out = document.getElementById('aio-local-audit-output');
	const ph = document.getElementById('aio-local-audit-placeholder');
	if (!btn || !out) return;

	if (ph) ph.style.display = 'none';
	const origHtml = btn.innerHTML;
	btn.disabled = true;
	btn.innerHTML = '<span class="ph ph-hourglass-high"></span> <?php echo esc_js( __( 'Scanning...', 'aio-tools' ) ); ?>';
	out.style.display = 'block';
	out.innerHTML = '<div style="padding:20px; text-align:center; color:#64748b; font-size:13px;"><?php echo esc_js( __( 'Running live loopback & database diagnostics...', 'aio-tools' ) ); ?></div>';

	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_run_local_speed_audit',
		security: aio_smtp_param.settings_nonce
	}, function(res) {
		if (!res || !res.success || !res.data) {
			const err = (res && typeof res.data === 'string') ? res.data : 'Audit failed.';
			out.innerHTML = '<div style="padding:14px; background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:8px;">' + aioEscapeHtml(err) + '</div>';
			return;
		}
		aioRenderLocalAudit(res.data);
	}).fail(function() {
		out.innerHTML = '<div style="padding:14px; background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:8px;">Server connection error.</div>';
	}).always(function() {
		btn.disabled = false;
		btn.innerHTML = origHtml;
	});
}

function aioRenderLocalAudit(data) {
	const out = document.getElementById('aio-local-audit-output');
	const ph = document.getElementById('aio-local-audit-placeholder');
	if (!out) return;
	if (ph) ph.style.display = 'none';
	out.style.display = 'block';

	aioLastAuditItems = Array.isArray(data.items) ? data.items : [];
	const m = data.metrics || {};
	const issueCount = aioLastAuditItems.filter(function(it) { return it.status !== 'passed'; }).length;
	const statusTitle = data.score >= 90
		? '<?php echo esc_js( __( 'Excellent! Your site is well-optimized for Core Web Vitals.', 'aio-tools' ) ); ?>'
		: (data.score >= 55
			? '<?php echo esc_js( __( 'Good progress — fix the highlighted items below to push into 90+ green score.', 'aio-tools' ) ); ?>'
			: '<?php echo esc_js( __( 'Critical speed bottlenecks detected — use Preset or 1-Click Fix buttons below.', 'aio-tools' ) ); ?>');

	let html = '<div style="border:1px solid #e2e8f0; border-radius:10px; padding:16px; background:#ffffff;">';
	html += '<div style="display:flex; flex-wrap:wrap; align-items:center; gap:16px;">';
	html += aioBuildScoreGauge(data.score);
	html += '<div style="flex:1; min-width:200px;">';
	html += '<div style="font-size:15.5px; font-weight:700; color:#0f172a;">' + aioEscapeHtml(statusTitle) + '</div>';
	html += '<div style="font-size:12.5px; color:#64748b; margin-top:4px;">';
	html += '<?php echo esc_js( __( 'Scanned at', 'aio-tools' ) ); ?> ' + aioEscapeHtml(data.scanned_at || '') + ' · ';
	html += '<strong>' + issueCount + '</strong> <?php echo esc_js( __( 'actionable items', 'aio-tools' ) ); ?>';
	if (!data.loopback_ok && data.loopback_error) {
		html += ' · <span style="color:#d97706;">Loopback note: ' + aioEscapeHtml(data.loopback_error) + '</span>';
	}
	html += '</div></div></div>';

	html += '<div class="aio-metric-pills">';
	html += '<div class="aio-metric-pill"><div class="lbl">TTFB / Cache</div><div class="val">' + (m.ttfb_ms != null ? aioEscapeHtml(m.ttfb_ms + ' ms') : '—') + ' <small style="font-size:10.5px; color:#2563eb;">(' + aioEscapeHtml(m.cache_status || 'OFF') + ')</small></div></div>';
	html += '<div class="aio-metric-pill"><div class="lbl">HTML Size</div><div class="val">' + aioEscapeHtml((m.html_kb || 0) + ' KB') + '</div></div>';
	html += '<div class="aio-metric-pill"><div class="lbl">DOM Nodes</div><div class="val">' + aioEscapeHtml(String(m.dom_nodes || 0)) + '</div></div>';
	html += '<div class="aio-metric-pill"><div class="lbl">Blocking CSS/JS</div><div class="val">' + aioEscapeHtml(String(m.blocking_assets || 0)) + '</div></div>';
	html += '<div class="aio-metric-pill"><div class="lbl">Missing Dims</div><div class="val">' + aioEscapeHtml(String(m.missing_dims || 0)) + '</div></div>';
	html += '<div class="aio-metric-pill"><div class="lbl">WebP Backlog</div><div class="val">' + aioEscapeHtml(String(m.unconverted_webp || 0)) + '</div></div>';
	html += '<div class="aio-metric-pill"><div class="lbl">DB Autoload</div><div class="val">' + aioEscapeHtml((m.autoload_kb || 0) + ' KB') + '</div></div>';
	html += '</div>';

	html += '<div style="margin-top:16px;">';
	aioLastAuditItems.forEach(function(item, idx) {
		const st = ['high', 'medium', 'passed'].includes(item.status) ? item.status : 'medium';
		const icon = st === 'passed'
			? '<span class="ph ph-check-circle" style="color:#10b981; font-size:20px;"></span>'
			: (st === 'high'
				? '<span class="ph ph-warning-octagon" style="color:#ef4444; font-size:20px;"></span>'
				: '<span class="ph ph-info" style="color:#f59e0b; font-size:20px;"></span>');

		html += '<div class="aio-audit-item ' + st + '">';
		html += '<div style="display:flex; align-items:flex-start; gap:10px; flex:1;">' + icon + '<div>';
		html += '<div style="font-size:13px; font-weight:600; color:#0f172a;">'
			+ '<span style="font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px; background:#e2e8f0; color:#334155; margin-right:6px;">' + aioEscapeHtml(item.category || 'Speed') + '</span>'
			+ aioEscapeHtml(item.title || '') + '</div>';
		if (item.desc) {
			html += '<div style="font-size:12px; color:#475569; margin-top:3px;">' + aioEscapeHtml(item.desc) + '</div>';
		}
		html += '</div></div>';

		if (st !== 'passed' && item.fix_type && item.fix_label) {
			html += '<button type="button" class="aio-btn-primary" style="font-size:12px; padding:6px 11px; white-space:nowrap;" onclick="aioExecuteAuditFix(' + idx + ')">'
				+ '<span class="ph ph-magic-wand"></span> ' + aioEscapeHtml(item.fix_label)
				+ '</button>';
		}
		html += '</div>';
	});
	html += '</div></div>';

	out.innerHTML = html;
}

function aioExecuteAuditFix(idx) {
	const item = aioLastAuditItems[idx];
	if (!item) return;

	if (item.fix_type === 'toggle' && item.fix_key) {
		if (typeof settings === 'object' && settings) delete settings.optSpeedPreset;
		handleChange('opt-module-performance', true);
		handleChange(item.fix_key, true);
		aioSyncPerfInputsFromSettings();
		aioPersistSettingsSilent(function() {
			showToast('<?php echo esc_js( __( 'Enabled optimization:', 'aio-tools' ) ); ?> ' + item.fix_key, 'success');
			aioRunLocalAudit();
		});
		return;
	}

	if (item.fix_type === 'preconnect' && Array.isArray(item.fix_data)) {
		const current = (settings.optPrefetchDomains || '').split(/\r?\n/).map(function(s) { return s.trim(); }).filter(Boolean);
		item.fix_data.forEach(function(dom) {
			if (dom && !current.includes(dom)) current.push(dom);
		});
		const merged = current.join('\n');
		handleChange('optPrefetchDomains', merged);
		aioSyncPerfInputsFromSettings();
		aioPersistSettingsSilent(function() {
			showToast('<?php echo esc_js( __( 'Added Preconnect domains!', 'aio-tools' ) ); ?>', 'success');
			aioRunLocalAudit();
		});
		return;
	}

	if (item.fix_type === 'bulk_webp') {
		handleChange('opt-perf-webp', true);
		aioSyncPerfInputsFromSettings();
		aioPersistSettingsSilent(function() {
			aioSwitchPerfSubtab('media');
			const card = document.getElementById('aio-bulk-webp-card');
			if (card && card.scrollIntoView) {
				card.scrollIntoView({ behavior: 'smooth', block: 'center' });
			}
			aioStartBulkWebP();
		});
		return;
	}

	if (item.fix_type === 'subtab' && item.fix_key) {
		aioSwitchPerfSubtab(item.fix_key);
		return;
	}

	if (item.fix_type === 'goto_tab' && item.fix_key) {
		const nav = document.querySelector('.aio-nav-item[data-tab="' + item.fix_key + '"]');
		if (nav) nav.click();
	}
}

function aioRunPagespeedApi(forceRefresh) {
	const btn = document.getElementById('aio-btn-psi-run');
	const out = document.getElementById('aio-psi-output');
	const urlEl = document.getElementById('aio-psi-url');
	const stratEl = document.getElementById('aio-psi-strategy');
	const keyEl = document.getElementById('aio-psi-apikey');
	if (!btn || !out) return;

	const origHtml = btn.innerHTML;
	btn.disabled = true;
	btn.innerHTML = '<span class="ph ph-hourglass-high"></span> <?php echo esc_js( __( 'Testing (10-30s)...', 'aio-tools' ) ); ?>';
	out.style.display = 'block';
	out.innerHTML = '<div style="padding:20px; text-align:center; color:#64748b; font-size:13px;"><?php echo esc_js( __( 'Google Lighthouse is auditing your page in real time (typically takes 10–25 seconds)...', 'aio-tools' ) ); ?></div>';

	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_run_pagespeed_api',
		security: aio_smtp_param.settings_nonce,
		url: urlEl ? urlEl.value : '',
		strategy: stratEl ? stratEl.value : 'mobile',
		api_key: keyEl ? keyEl.value : '',
		force: forceRefresh ? 1 : 0
	}, function(res) {
		if (!res || !res.success || !res.data) {
			const err = (res && typeof res.data === 'string') ? res.data : 'Google PageSpeed request failed.';
			out.innerHTML = '<div style="padding:14px; background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:8px; font-size:13px;">' + aioEscapeHtml(err) + '</div>';
			return;
		}
		aioRenderPagespeedResult(res.data);
	}).fail(function() {
		out.innerHTML = '<div style="padding:14px; background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:8px;">Request timed out or server connection error.</div>';
	}).always(function() {
		btn.disabled = false;
		btn.innerHTML = origHtml;
	});
}

function aioRenderPagespeedResult(d) {
	const out = document.getElementById('aio-psi-output');
	if (!out) return;

	let html = '<div style="border:1px solid #e2e8f0; border-radius:10px; padding:16px; background:#ffffff;">';
	html += '<div style="display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px;">';
	html += '<div style="display:flex; align-items:center; gap:14px;">';
	html += aioBuildScoreGauge(d.score);
	html += '<div>';
	html += '<div style="font-size:15.5px; font-weight:700; color:#0f172a;">Google Lighthouse (' + aioEscapeHtml((d.strategy || 'mobile').toUpperCase()) + ')</div>';
	html += '<div style="font-size:12px; color:#64748b; margin-top:4px;">' + aioEscapeHtml(d.url || '') + ' · ' + aioEscapeHtml(d.fetched_at || '');
	if (d.cached) html += ' <em>(Cached 10m)</em>';
	html += '</div></div></div>';
	html += '<button type="button" class="aio-btn-secondary" style="font-size:12px;" onclick="aioRunPagespeedApi(true)"><span class="ph ph-arrows-clockwise"></span> <?php echo esc_js( __( 'Re-test Fresh', 'aio-tools' ) ); ?></button>';
	html += '</div>';

	if (Array.isArray(d.cwv) && d.cwv.length > 0) {
		html += '<div class="aio-cwv-grid">';
		d.cwv.forEach(function(m) {
			const st = ['good', 'average', 'poor'].includes(m.state) ? m.state : 'average';
			const vColor = st === 'good' ? '#15803d' : (st === 'average' ? '#b45309' : '#b91c1c');
			html += '<div class="aio-cwv-card ' + st + '">';
			html += '<div style="font-size:11px; color:#64748b; font-weight:600;">' + aioEscapeHtml(m.label || '') + '</div>';
			html += '<div style="font-size:17px; font-weight:800; color:' + vColor + '; margin-top:4px;">' + aioEscapeHtml(m.value || '—') + '</div>';
			html += '</div>';
		});
		html += '</div>';
	}

	if (Array.isArray(d.opportunities) && d.opportunities.length > 0) {
		html += '<div style="margin-top:14px;">';
		html += '<div style="font-size:13px; font-weight:700; color:#334155; margin-bottom:8px;"><?php echo esc_js( __( 'Top Lighthouse Opportunities:', 'aio-tools' ) ); ?></div>';
		d.opportunities.forEach(function(op) {
			html += '<div style="display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 12px; border:1px solid #f1f5f9; background:#f8fafc; border-radius:6px; margin-bottom:6px; font-size:12.5px;">';
			html += '<span style="font-weight:500; color:#0f172a;">' + aioEscapeHtml(op.title || '') + '</span>';
			html += '<span style="color:#dc2626; font-weight:600; white-space:nowrap;">' + aioEscapeHtml(op.display || '') + '</span>';
			html += '</div>';
		});
		html += '</div>';
	}

	html += '</div>';
	out.innerHTML = html;
}

/* ---------------- Page Cache & Preloader Handlers ---------------- */
function aioRenderDiskStats(st) {
	if (!st) return;
	const pEl = document.getElementById('aio-pc-stats-pages');
	const sEl = document.getElementById('aio-pc-stats-size');
	const prEl = document.getElementById('aio-pc-preload-state');
	if (pEl) pEl.innerText = st.pages != null ? String(st.pages) : '0';
	if (sEl) sEl.innerText = st.size_human || '0 B';
	if (prEl) {
		prEl.innerText = st.preloading
			? ('<?php echo esc_js( __( 'Preloader running:', 'aio-tools' ) ); ?> ' + (st.preload_done || 0) + ' / ' + (st.preload_total || 0) + ' URLs')
			: '';
	}
}

function aioLoadPageCacheStats() {
	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_get_page_cache_stats',
		security: aio_smtp_param.settings_nonce
	}, function(res) {
		if (res && res.success && res.data) {
			aioRenderDiskStats(res.data);
		}
	});
}

function aioClearPageCache() {
	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_clear_page_cache',
		security: aio_smtp_param.settings_nonce
	}, function(res) {
		if (res && res.success) {
			const msg = (res.data && res.data.message) ? res.data.message : (typeof res.data === 'string' ? res.data : 'Cache cleared!');
			showToast(msg, 'success');
			if (res.data && res.data.stats) aioRenderDiskStats(res.data.stats);
		} else {
			showToast('Error: ' + (res && res.data ? res.data : 'Failed'), 'error');
		}
	});
}

function aioStartCachePreload() {
	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_start_cache_preload',
		security: aio_smtp_param.settings_nonce
	}, function(res) {
		if (res && res.success) {
			const msg = (res.data && res.data.message) ? res.data.message : 'Cache preloader started!';
			showToast(msg, 'success');
			if (res.data && res.data.stats) aioRenderDiskStats(res.data.stats);
		} else {
			showToast(res && typeof res.data === 'string' ? res.data : 'Preload failed', 'error');
		}
	});
}

function aioReinstallAdvCache() {
	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_reinstall_adv_cache',
		security: aio_smtp_param.settings_nonce
	}, function(res) {
		if (res && res.success) {
			showToast(typeof res.data === 'string' ? res.data : 'Installed advanced-cache.php!', 'success');
		} else {
			showToast(res && typeof res.data === 'string' ? res.data : 'Could not install Drop-in', 'error');
		}
	});
}

function aioPurgeAllCaches() {
	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_purge_all_caches',
		security: aio_smtp_param.settings_nonce
	}, function(res) {
		if (res && res.success) {
			const msg = (res.data && res.data.message) ? res.data.message : 'All caches purged!';
			showToast(msg, 'success');
			aioLoadPageCacheStats();
		} else {
			showToast(res && typeof res.data === 'string' ? res.data : 'Purge failed', 'error');
		}
	});
}

/* ---------------- Object Cache (Redis / Memcached / APCu) Handlers ---------------- */
function aioCollectObjCacheForm() {
	const drv = document.getElementById('aio-oc-sel-driver');
	const host = document.getElementById('aio-oc-inp-host');
	const port = document.getElementById('aio-oc-inp-port');
	const db = document.getElementById('aio-oc-inp-db');
	const pass = document.getElementById('aio-oc-inp-pass');
	return {
		driver: drv ? drv.value : 'redis',
		host: host ? host.value : '127.0.0.1',
		port: port ? port.value : 6379,
		db: db ? db.value : 0,
		password: pass ? pass.value : ''
	};
}

function aioRenderObjectCacheStatus(st) {
	if (!st || !st.telemetry || !st.dropin) return;
	const t = st.telemetry;
	const d = st.dropin;

	const stEl = document.getElementById('aio-oc-status');
	const drvEl = document.getElementById('aio-oc-driver');
	const pingEl = document.getElementById('aio-oc-ping');
	const memEl = document.getElementById('aio-oc-memory');
	const keysEl = document.getElementById('aio-oc-keys');
	const ratioEl = document.getElementById('aio-oc-ratio');
	const btnEn = document.getElementById('aio-btn-oc-enable');
	const btnDis = document.getElementById('aio-btn-oc-disable');
	const ocChip = document.getElementById('aio-chip-objcache');
	const ocChipTxt = document.getElementById('aio-chip-objcache-txt');

	const active = !!d.is_ours && !!t.connected;
	if (stEl) {
		stEl.innerText = d.is_ours
			? (t.connected ? '<?php echo esc_js( __( 'Connected (AIO)', 'aio-tools' ) ); ?>' : '<?php echo esc_js( __( 'Fail-Open Standby', 'aio-tools' ) ); ?>')
			: (d.ext_active ? '<?php echo esc_js( __( 'External', 'aio-tools' ) ); ?>' : '<?php echo esc_js( __( 'Inactive', 'aio-tools' ) ); ?>');
		stEl.style.color = active ? '#10b981' : '#64748b';
	}
	if (drvEl) drvEl.innerText = t.driver_used || '—';
	if (pingEl) pingEl.innerText = t.ping_ms != null ? (t.ping_ms + ' ms') : '—';
	if (memEl) memEl.innerText = t.memory_human || '—';
	if (keysEl) keysEl.innerText = String(t.keys_count || 0);
	if (ratioEl) ratioEl.innerText = (t.hit_ratio || 0) + '%';

	if (btnEn) btnEn.style.display = d.is_ours ? 'none' : 'inline-flex';
	if (btnDis) btnDis.style.display = d.is_ours ? 'inline-flex' : 'none';

	if (ocChip && ocChipTxt) {
		const anyOn = active || !!d.ext_active;
		ocChip.classList.toggle('on', anyOn);
		ocChipTxt.innerText = anyOn ? (t.driver_used || 'ON') : '<?php echo esc_js( __( 'OFF', 'aio-tools' ) ); ?>';
	}
}

function aioRefreshObjectCacheStatus() {
	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_object_cache_status',
		security: aio_smtp_param.settings_nonce
	}, function(res) {
		if (res && res.success && res.data) {
			aioRenderObjectCacheStatus(res.data);
		}
	});
}

function aioUseDetectedSocket(sockPath) {
	const hostEl = document.getElementById('aio-oc-inp-host');
	const portEl = document.getElementById('aio-oc-inp-port');
	if (hostEl) {
		hostEl.value = sockPath;
		handleChange('txtObjectCacheHost', sockPath);
	}
	if (portEl) {
		portEl.value = '0';
		handleChange('txtObjectCachePort', 0);
	}
	aioTestObjectCache();
}

function aioSyncResolvedEndpoint(data, persistedOnServer) {
	if (!data) return;
	const drvEl = document.getElementById('aio-oc-sel-driver');
	const hostEl = document.getElementById('aio-oc-inp-host');
	const portEl = document.getElementById('aio-oc-inp-port');
	const dbEl = document.getElementById('aio-oc-inp-db');
	if (data.resolved_driver) {
		if (drvEl && drvEl.value !== data.resolved_driver) drvEl.value = data.resolved_driver;
		settings['optObjectCacheDriver'] = data.resolved_driver;
		aioOnObjDriverChange(data.resolved_driver);
	}
	if (data.resolved_host) {
		if (hostEl && hostEl.value !== data.resolved_host) hostEl.value = data.resolved_host;
		settings['txtObjectCacheHost'] = data.resolved_host;
		if (!persistedOnServer && window.aioDirtyKeys) window.aioDirtyKeys.add('txtObjectCacheHost');
	}
	if (data.resolved_port !== undefined) {
		if (portEl && String(portEl.value) !== String(data.resolved_port)) portEl.value = String(data.resolved_port);
		settings['txtObjectCachePort'] = parseInt(data.resolved_port, 10) || 0;
		if (!persistedOnServer && window.aioDirtyKeys) window.aioDirtyKeys.add('txtObjectCachePort');
	}
	if (data.resolved_db !== undefined) {
		if (dbEl && String(dbEl.value) !== String(data.resolved_db)) dbEl.value = String(data.resolved_db);
		settings['txtObjectCacheDb'] = parseInt(data.resolved_db, 10) || 0;
	}
	if (persistedOnServer && window.aioDirtyKeys) {
		['optEnableObjectCache', 'optObjectCacheDriver', 'txtObjectCacheHost', 'txtObjectCachePort', 'txtObjectCacheDb', 'txtObjectCachePassword'].forEach(function(k) {
			window.aioDirtyKeys.delete(k);
		});
	}
	if (typeof window.aioUpdateDirtyUI === 'function') window.aioUpdateDirtyUI();
}

function aioTestObjectCache() {
	const btn = document.getElementById('aio-btn-oc-test');
	const msgEl = document.getElementById('aio-oc-test-msg');
	if (!btn || !msgEl) return;

	const payload = aioCollectObjCacheForm();
	payload.action = 'aio_object_cache_test';
	payload.security = aio_smtp_param.settings_nonce;

	btn.disabled = true;
	msgEl.style.color = '#64748b';
	msgEl.innerText = '<?php echo esc_js( __( 'Pinging backend...', 'aio-tools' ) ); ?>';

	jQuery.post(aio_smtp_param.ajaxurl, payload, function(res) {
		if (res && res.success && res.data) {
			aioSyncResolvedEndpoint(res.data, false);
			msgEl.style.color = '#15803d';
			const sockNote = res.data.auto_socket ? (' [' + res.data.auto_socket + ']') : '';
			msgEl.innerText = '✓ ' + (res.data.driver_used || 'OK') + ' — ' + res.data.ping_ms + ' ms (' + (res.data.memory_human || 'Active') + ')' + sockNote;
		} else {
			msgEl.style.color = '#dc2626';
			msgEl.innerText = '✕ ' + (res && typeof res.data === 'string' ? res.data : 'Connection failed');
		}
	}).fail(function() {
		msgEl.style.color = '#dc2626';
		msgEl.innerText = '✕ <?php echo esc_js( __( 'Server connection error.', 'aio-tools' ) ); ?>';
	}).always(function() {
		btn.disabled = false;
	});
}

function aioToggleObjectCache(enable, forceOverwrite) {
	const payload = aioCollectObjCacheForm();
	const msgEl = document.getElementById('aio-oc-test-msg');
	payload.action = 'aio_object_cache_toggle';
	payload.security = aio_smtp_param.settings_nonce;
	payload.enable = enable ? 1 : 0;
	payload.force = forceOverwrite ? 1 : 0;

	jQuery.post(aio_smtp_param.ajaxurl, payload, function(res) {
		if (res && res.success && res.data) {
			settings['optEnableObjectCache'] = !!enable;
			aioSyncResolvedEndpoint(res.data, true);
			if (msgEl) {
				msgEl.style.color = '#15803d';
				msgEl.innerText = enable ? ('✓ ' + (res.data.message || '')) : '';
			}
			showToast(res.data.message || 'Updated Object Cache!', 'success');
			if (res.data.status) aioRenderObjectCacheStatus(res.data.status);
		} else {
			const errTxt = res && typeof res.data === 'string' ? res.data : 'Object Cache operation failed';
			if (msgEl) {
				msgEl.style.color = '#dc2626';
				msgEl.innerText = '✕ ' + errTxt;
			}
			showToast(errTxt, 'error');
		}
	}).fail(function() {
		showToast('<?php echo esc_js( __( 'Server connection error.', 'aio-tools' ) ); ?>', 'error');
	});
}

function aioFlushObjectCache() {
	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_object_cache_flush',
		security: aio_smtp_param.settings_nonce
	}, function(res) {
		if (res && res.success) {
			const msg = (res.data && res.data.message) ? res.data.message : 'Object Cache flushed!';
			showToast(msg, 'success');
			if (res.data && res.data.status) aioRenderObjectCacheStatus(res.data.status);
		} else {
			showToast(res && typeof res.data === 'string' ? res.data : 'Flush failed', 'error');
		}
	}).fail(function() {
		showToast('<?php echo esc_js( __( 'Server connection error.', 'aio-tools' ) ); ?>', 'error');
	});
}

/* ---------------- Bulk WebP Optimization Handlers ---------------- */
function aioFormatBytes(bytes, decimals = 2) {
	if (bytes === 0) return '0 Bytes';
	const k = 1024;
	const dm = decimals < 0 ? 0 : decimals;
	const sizes = ['Bytes', 'KB', 'MB', 'GB'];
	const i = Math.floor(Math.log(bytes) / Math.log(k));
	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

async function aioStartBulkWebP() {
	const ok = await window.aioConfirmModal({
		title: "<?php echo esc_js( __( 'Start Bulk WebP Conversion', 'aio-tools' ) ); ?>",
		message: "<?php echo esc_js( __( 'This process may take some time depending on your media library size. It will run securely in the background. Do you want to continue?', 'aio-tools' ) ); ?>",
		confirmText: "<?php echo esc_js( __( 'Start Conversion', 'aio-tools' ) ); ?>"
	});
	if (!ok) return;

	document.getElementById('aio-bulk-webp-init').style.display = 'none';
	document.getElementById('aio-bulk-webp-progress-wrap').style.display = 'block';
	document.getElementById('aio-bulk-webp-text').innerText = "<?php echo esc_js( __( 'Scanning media library and starting background job...', 'aio-tools' ) ); ?>";

	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_start_bulk_webp',
		security: aio_smtp_param.settings_nonce
	}, function(res) {
		if (res.success) {
			aioUpdateWebpStatsUI(res.data);
			aioStartPollingWebpStatus();
		} else {
			showToast(typeof res.data === 'string' ? res.data : 'Unable to start job', 'warning');
			document.getElementById('aio-bulk-webp-init').style.display = 'block';
			document.getElementById('aio-bulk-webp-progress-wrap').style.display = 'none';
		}
	});
}

function aioStartPollingWebpStatus() {
	if (aioWebpPollInterval) clearInterval(aioWebpPollInterval);

	aioWebpPollInterval = setInterval(function() {
		jQuery.post(aio_smtp_param.ajaxurl, {
			action: 'aio_get_webp_bulk_status',
			security: aio_smtp_param.settings_nonce
		}, function(res) {
			if (res.success) {
				aioUpdateWebpStatsUI(res.data);
				if (!res.data.is_running) {
					clearInterval(aioWebpPollInterval);
				}
			}
		});
	}, 5000);
}

function aioUpdateWebpStatsUI(stats) {
	document.getElementById('aio-bulk-webp-init').style.display = 'none';
	document.getElementById('aio-bulk-webp-progress-wrap').style.display = 'block';

	let percent = stats.total > 0 ? Math.round((stats.processed / stats.total) * 100) : 0;
	document.getElementById('aio-bulk-webp-percent').innerText = percent + '%';
	document.getElementById('aio-bulk-webp-bar').style.width = percent + '%';
	document.getElementById('aio-bulk-webp-text').innerText = "<?php echo esc_js( __( 'Processing...', 'aio-tools' ) ); ?> (" + stats.processed + " / " + stats.total + ")";

	let savedBytes = stats.original_bytes - stats.webp_bytes;
	if (savedBytes < 0) savedBytes = 0;

	let savedPercent = stats.original_bytes > 0 ? Math.round((savedBytes / stats.original_bytes) * 100) : 0;

	document.getElementById('aio-bulk-webp-saved').innerText = aioFormatBytes(savedBytes);
	document.getElementById('aio-bulk-webp-saved-percent').innerText = "(↓ " + savedPercent + "%)";

	if (!stats.is_running) {
		if (stats.processed > 0 && stats.processed >= stats.total) {
			document.getElementById('aio-bulk-webp-text').innerText = "<?php echo esc_js( __( 'Bulk conversion completed successfully!', 'aio-tools' ) ); ?>";
		} else {
			document.getElementById('aio-bulk-webp-init').style.display = 'block';
			document.getElementById('aio-bulk-webp-progress-wrap').style.display = 'none';
		}
	}
}

async function aioStopBulkWebP() {
	const ok = await window.aioConfirmModal({
		title: "<?php echo esc_js( __( 'Stop Background Optimization', 'aio-tools' ) ); ?>",
		message: "<?php echo esc_js( __( 'Are you sure you want to stop the background optimization?', 'aio-tools' ) ); ?>",
		confirmText: "<?php echo esc_js( __( 'Stop Now', 'aio-tools' ) ); ?>",
		danger: true
	});
	if (!ok) return;

	if (aioWebpPollInterval) clearInterval(aioWebpPollInterval);

	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_stop_bulk_webp',
		security: aio_smtp_param.settings_nonce
	}, function() {
		document.getElementById('aio-bulk-webp-init').style.display = 'block';
		document.getElementById('aio-bulk-webp-progress-wrap').style.display = 'none';
		document.getElementById('aio-bulk-webp-status-msg').innerText = "<?php echo esc_js( __( 'Optimization stopped.', 'aio-tools' ) ); ?>";
	});
}

let aioWebpBulkChecked = false;
function aioCheckWebpBulkStatusOnce() {
	if (aioWebpBulkChecked || typeof jQuery === 'undefined') return;
	aioWebpBulkChecked = true;
	jQuery.post(aio_smtp_param.ajaxurl, {
		action: 'aio_get_webp_bulk_status',
		security: aio_smtp_param.settings_nonce
	}, function(res) {
		if (res && res.success && res.data && res.data.is_running) {
			aioUpdateWebpStatsUI(res.data);
			aioStartPollingWebpStatus();
		}
	});
}

document.addEventListener('DOMContentLoaded', function() {
	aioRefreshPresetCardsUI();

	const perfPane = document.getElementById('tab-performance');
	if (perfPane && perfPane.addEventListener) {
		perfPane.addEventListener('change', function(e) {
			if (e && e.target && e.target.getAttribute && e.target.getAttribute('data-aio-opt')) {
				if (typeof settings === 'object' && settings) {
					delete settings.optSpeedPreset;
				}
				aioRefreshPresetCardsUI();
			}
		});
	}

	document.addEventListener('aio:tab-activated', function(ev) {
		if (ev && ev.detail && ev.detail.tabId === 'performance') {
			aioCheckWebpBulkStatusOnce();
		}
	});
	if (perfPane && perfPane.style.display !== 'none') {
		aioCheckWebpBulkStatusOnce();
	}
});
</script>