<?php
/**
 * Cache module — Files (CSS / JS) tab view
 *
 * @var Blaminhor_Essentials_Module_Cache $module
 * @var array                             $settings
 *
 * @package BlaminhorEssentials
 */

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

<h2><?php esc_html_e( 'CSS', 'blaminhor-essentials' ); ?></h2>

<table class="form-table">
	<tr>
		<th scope="row"><?php esc_html_e( 'Minify CSS', 'blaminhor-essentials' ); ?></th>
		<td>
			<label>
				<input type="checkbox" name="minify_css" value="1" <?php checked( $settings['minify_css'] ); ?>>
				<?php esc_html_e( 'Strip whitespace and comments from inline <style> blocks at cache write time.', 'blaminhor-essentials' ); ?>
			</label>
		</td>
	</tr>
	<tr>
		<th scope="row">
			<label for="be-css-exclude"><?php esc_html_e( 'Exclude from minify', 'blaminhor-essentials' ); ?></label>
		</th>
		<td>
			<textarea id="be-css-exclude" name="css_exclude" rows="4" class="large-text code" placeholder="elementor&#10;wp-block-library"><?php echo esc_textarea( $settings['css_exclude'] ); ?></textarea>
			<p class="description"><?php esc_html_e( 'Handles or partial source URLs to leave untouched. One per line.', 'blaminhor-essentials' ); ?></p>
		</td>
	</tr>
</table>

<h2><?php esc_html_e( 'JavaScript', 'blaminhor-essentials' ); ?></h2>

<table class="form-table">
	<tr>
		<th scope="row"><?php esc_html_e( 'Defer JS', 'blaminhor-essentials' ); ?></th>
		<td>
			<label>
				<input type="checkbox" name="defer_js" value="1" <?php checked( $settings['defer_js'] ); ?>>
				<?php esc_html_e( 'Add the defer attribute to external scripts so they do not block the HTML parser.', 'blaminhor-essentials' ); ?>
			</label>
			<p class="description">
				<?php esc_html_e( 'Big PageSpeed Insights win: scripts stop blocking the initial display of the page. jQuery is always left alone to avoid breaking themes.', 'blaminhor-essentials' ); ?>
			</p>
		</td>
	</tr>
	<tr>
		<th scope="row"><?php esc_html_e( 'Delay JS until interaction', 'blaminhor-essentials' ); ?></th>
		<td>
			<label>
				<input type="checkbox" name="delay_js" value="1" <?php checked( $settings['delay_js'] ); ?>>
				<?php esc_html_e( 'Hold scripts until the visitor scrolls, clicks, hovers, or types. Massive Total Blocking Time savings.', 'blaminhor-essentials' ); ?>
			</label>
			<p class="description" style="color:#b35900;">
				<?php esc_html_e( 'Risk: if a visitor never clicks or scrolls, some scripts (analytics, marketing pixels) might never fire. Google Analytics, GTM and Facebook Pixel are already excluded by default to prevent that.', 'blaminhor-essentials' ); ?>
			</p>
		</td>
	</tr>
	<tr>
		<th scope="row">
			<label for="be-delay-js-exclude"><?php esc_html_e( 'Delay safelist', 'blaminhor-essentials' ); ?></label>
		</th>
		<td>
			<textarea id="be-delay-js-exclude" name="delay_js_exclude" rows="5" class="large-text code"><?php echo esc_textarea( $settings['delay_js_exclude'] ); ?></textarea>
			<p class="description"><?php esc_html_e( 'Substring matched against the script handle or src URL. One per line. Anything on the list will NOT be delayed.', 'blaminhor-essentials' ); ?></p>
		</td>
	</tr>
	<tr>
		<th scope="row">
			<label for="be-js-exclude"><?php esc_html_e( 'Defer safelist', 'blaminhor-essentials' ); ?></label>
		</th>
		<td>
			<textarea id="be-js-exclude" name="js_exclude" rows="5" class="large-text code"><?php echo esc_textarea( $settings['js_exclude'] ); ?></textarea>
			<p class="description"><?php esc_html_e( 'Scripts to never defer. jQuery and its dependencies are added by default to avoid breaking themes that rely on inline scripts running before jQuery.', 'blaminhor-essentials' ); ?></p>
		</td>
	</tr>
</table>

<h2><?php esc_html_e( 'Critical CSS', 'blaminhor-essentials' ); ?></h2>
<p class="description">
	<?php esc_html_e( 'Displays the styles for the top of the page (the part visible without scrolling) immediately, while the rest of the CSS keeps downloading in the background. Generated locally in your browser — no data sent to an external service.', 'blaminhor-essentials' ); ?>
</p>

<table class="form-table">
	<tr>
		<th scope="row"><?php esc_html_e( 'Enable critical CSS', 'blaminhor-essentials' ); ?></th>
		<td>
			<label>
				<input type="checkbox" name="critical_css_enabled" value="1" <?php checked( $settings['critical_css_enabled'] ); ?>>
				<?php esc_html_e( 'Inline the critical stylesheet on every page', 'blaminhor-essentials' ); ?>
			</label>
		</td>
	</tr>
	<?php
	// Safety gate: the async-loading checkbox is locked until at least one
	// critical CSS sheet has been generated. Without an inlined above-the-fold
	// sheet, async-loading the rest produces a brief flash of unstyled content
	// AND breaks page-builder JS that measures element positions at DOMReady
	// (Elementor Pro nav menu, Slider Revolution...). The runtime layer also
	// guards against this in maybe_async_stylesheet(); the UI lock just makes
	// the constraint visible to the user before they save broken settings.
	$be_async_unlocked = $module->critical_css->any_critical_generated();
	?>
	<tr>
		<th scope="row"><?php esc_html_e( 'Async load other CSS', 'blaminhor-essentials' ); ?></th>
		<td>
			<label<?php echo $be_async_unlocked ? '' : ' style="opacity:0.55;cursor:not-allowed;"'; ?>>
				<input type="checkbox" name="critical_async_loading" value="1"
					<?php checked( $be_async_unlocked && $settings['critical_async_loading'] ); ?>
					<?php disabled( ! $be_async_unlocked ); ?>>
				<?php esc_html_e( 'Load non-critical stylesheets asynchronously (rel=preload + onload swap)', 'blaminhor-essentials' ); ?>
			</label>
			<?php if ( $be_async_unlocked ) : ?>
				<p class="description" style="color:#b35900;">
					<?php esc_html_e( 'The browser stops waiting for CSS before painting the page. Risk: a brief moment where content may appear unstyled. Only enable after you have generated critical CSS for every template type (article, page, archive…).', 'blaminhor-essentials' ); ?>
				</p>
			<?php else : ?>
				<p class="description">
					<?php esc_html_e( 'Locked until you generate critical CSS for at least one template below. Without an inlined above-the-fold sheet, async loading produces an unstyled flash and can break page-builder navigation menus that measure element positions at load.', 'blaminhor-essentials' ); ?>
				</p>
			<?php endif; ?>
		</td>
	</tr>
</table>

<h3><?php esc_html_e( 'Generate critical CSS by template', 'blaminhor-essentials' ); ?></h3>

<?php
$templates = $module->critical_css->templates();
$manifest  = (array) get_option( 'blaminhor_essentials_cache_critical_manifest', array() );
?>

<table class="widefat striped" id="be-critical-templates" style="max-width:900px;">
	<thead>
		<tr>
			<th><?php esc_html_e( 'Template', 'blaminhor-essentials' ); ?></th>
			<th><?php esc_html_e( 'Mobile', 'blaminhor-essentials' ); ?></th>
			<th><?php esc_html_e( 'Desktop', 'blaminhor-essentials' ); ?></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<?php foreach ( $templates as $tpl_id => $tpl_label ) : ?>
			<?php
			$mob = isset( $manifest[ $tpl_id . '-mobile' ] ) ? $manifest[ $tpl_id . '-mobile' ] : null;
			$dsk = isset( $manifest[ $tpl_id . '-desktop' ] ) ? $manifest[ $tpl_id . '-desktop' ] : null;
			?>
			<tr data-template="<?php echo esc_attr( $tpl_id ); ?>">
				<td><strong><?php echo esc_html( $tpl_label ); ?></strong></td>
				<td data-variant="mobile">
					<?php echo $module->critical_css->render_cell( $mob ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- render_cell escapes its own output. ?>
				</td>
				<td data-variant="desktop">
					<?php echo $module->critical_css->render_cell( $dsk ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- render_cell escapes its own output. ?>
				</td>
				<td>
					<button type="button" class="button button-secondary be-critical-generate" data-template="<?php echo esc_attr( $tpl_id ); ?>">
						<?php esc_html_e( 'Generate', 'blaminhor-essentials' ); ?>
					</button>
					<button type="button" class="button-link be-critical-clear" data-template="<?php echo esc_attr( $tpl_id ); ?>">
						<?php esc_html_e( 'Clear', 'blaminhor-essentials' ); ?>
					</button>
				</td>
			</tr>
		<?php endforeach; ?>
	</tbody>
</table>

<p>
	<button type="button" class="button button-primary be-critical-generate-all">
		<?php esc_html_e( 'Generate all templates', 'blaminhor-essentials' ); ?>
	</button>
	<button type="button" class="button" id="be-critical-clear-all">
		<?php esc_html_e( 'Clear all', 'blaminhor-essentials' ); ?>
	</button>
	<span id="be-critical-status" class="description" style="margin-left:12px;"></span>
</p>

<div id="be-critical-iframe-container" style="position:fixed;top:-10000px;left:-10000px;width:1280px;height:720px;visibility:hidden;"></div>

<?php /*
 * Remove Unused CSS (RUCSS) UI temporarily withdrawn — the toggle was
 * exposed but its server-side application was never wired (only the
 * browser-side extractor existed). Surfacing a switch that does nothing
 * was misleading. The `rucss_enabled` and `rucss_safelist` settings stay
 * in defaults / sanitisation so existing configs are preserved when the
 * server-side application lands in a future release.
 */ ?>

<h2><?php esc_html_e( 'Web fonts', 'blaminhor-essentials' ); ?></h2>

<table class="form-table">
	<tr>
		<th scope="row"><?php esc_html_e( 'Google Fonts display=swap', 'blaminhor-essentials' ); ?></th>
		<td>
			<label>
				<input type="checkbox" name="fonts_display_swap" value="1" <?php checked( $settings['fonts_display_swap'] ); ?>>
				<?php esc_html_e( 'Append display=swap to all Google Fonts URLs to prevent invisible text while fonts load.', 'blaminhor-essentials' ); ?>
			</label>
			<p class="description"><?php esc_html_e( 'Closes the font-display PSI audit. Has no visible effect when fonts are already cached.', 'blaminhor-essentials' ); ?></p>
		</td>
	</tr>
	<tr>
		<th scope="row"><?php esc_html_e( 'Self-host Google Fonts', 'blaminhor-essentials' ); ?></th>
		<td>
			<label>
				<input type="checkbox" name="local_google_fonts_enabled" value="1" <?php checked( ! empty( $settings['local_google_fonts_enabled'] ) ); ?>>
				<?php esc_html_e( 'Replace remote Google Fonts links with self-hosted CSS + .woff2 files', 'blaminhor-essentials' ); ?>
			</label>
			<p class="description"><?php esc_html_e( 'Stops your visitors from connecting to Google to download the fonts: faster, plus GDPR-friendly (your visitors\' IP addresses are no longer leaked to Google). Files are stored under /wp-content/uploads/blaminhor-essentials/google-fonts/.', 'blaminhor-essentials' ); ?></p>
		</td>
	</tr>
</table>
