<?php
/**
 * Speed module page template.
 *
 * Wizard-style interface: auto-scans on load, shows score ring +
 * active optimizations + categorized analysis with actionable guidance.
 *
 * @package MonitorCat
 */

defined( 'ABSPATH' ) || exit;
?>

<div class="mc-module-page mc-speed-page">

	<div class="mc-page-header">
		<div class="mc-page-title-group">
			<div class="mc-pedestal mc-pedestal-sm mc-pedestal-cyan">
				<i class="fa-duotone fa-gauge-high mc-fa-cyan"></i>
			</div>
			<div>
				<h1><?php esc_html_e( 'Speed Optimizer', 'monitor-cat' ); ?></h1>
				<p class="mc-page-subtitle"><?php esc_html_e( 'Automatic performance improvements and speed analysis.', 'monitor-cat' ); ?></p>
			</div>
		</div>
		<div class="mc-page-actions">
			<button type="button" id="mc-speed-scan-btn" class="mc-btn mc-btn-primary mc-btn-sm" data-loading-text="<?php esc_attr_e( 'Scanning...', 'monitor-cat' ); ?>">
				<i class="fa-duotone fa-arrows-rotate"></i>
				<?php esc_html_e( 'Run Scan', 'monitor-cat' ); ?>
			</button>
		</div>
	</div>

	<!-- Loading state (shown on initial load) -->
	<div id="mc-speed-loading" class="mc-loading-state">
		<div class="mc-card mc-card-spacious mc-speed-loading-card">
			<div class="mc-spinner"></div>
			<h2><?php esc_html_e( 'Analyzing your site speed...', 'monitor-cat' ); ?></h2>
			<p class="mc-text-medium">
				<?php esc_html_e( 'Running 7 performance checks across your site.', 'monitor-cat' ); ?>
			</p>
			<ul id="mc-speed-loading-steps" class="mc-speed-loading-steps">
				<li class="mc-speed-loading-step" data-step="page">
					<i class="fa-duotone fa-spinner-third fa-spin"></i>
					<span><?php esc_html_e( 'Measuring page weight & HTML size...', 'monitor-cat' ); ?></span>
				</li>
				<li class="mc-speed-loading-step" data-step="assets">
					<i class="fa-duotone fa-ellipsis"></i>
					<span><?php esc_html_e( 'Counting CSS, JS & render-blocking resources...', 'monitor-cat' ); ?></span>
				</li>
				<li class="mc-speed-loading-step" data-step="cache">
					<i class="fa-duotone fa-ellipsis"></i>
					<span><?php esc_html_e( 'Checking caching & compression...', 'monitor-cat' ); ?></span>
				</li>
				<li class="mc-speed-loading-step" data-step="db">
					<i class="fa-duotone fa-ellipsis"></i>
					<span><?php esc_html_e( 'Analyzing database health & response time...', 'monitor-cat' ); ?></span>
				</li>
			</ul>
		</div>
	</div>

	<!-- Results (populated via JS) -->
	<div id="mc-speed-results" style="display: none;">

		<!-- Hero score card -->
		<div class="mc-card mc-card-spacious mc-speed-hero">
			<div class="mc-speed-hero-content">
				<div class="mc-speed-hero-ring">
					<div id="mc-speed-score-ring" class="mc-score-ring">
						<svg viewBox="0 0 120 120">
							<circle class="mc-ring-bg" cx="60" cy="60" r="52"></circle>
							<circle class="mc-ring-fill" cx="60" cy="60" r="52" stroke-dasharray="326.73" stroke-dashoffset="326.73"></circle>
						</svg>
						<div class="mc-score-ring-label">
							<span id="mc-speed-score-number">0</span>
							<span class="mc-score-ring-sublabel"><?php esc_html_e( 'Cat Score', 'monitor-cat' ); ?></span>
						</div>
					</div>
				</div>
				<div class="mc-speed-hero-info">
					<h2 id="mc-speed-hero-title"><?php esc_html_e( 'Monitor.Cat Speed Score', 'monitor-cat' ); ?></h2>
					<p id="mc-speed-hero-desc" class="mc-text-medium"></p>
					<div id="mc-speed-hero-badges" class="mc-speed-hero-badges"></div>
				</div>
			</div>
		</div>

		<!-- Lighthouse comparison card -->
		<div class="mc-card mc-card-compact mc-speed-lighthouse">
			<div class="mc-speed-lighthouse-inner">
				<div class="mc-speed-lighthouse-info">
					<div class="mc-speed-lighthouse-heading">
						<i class="fa-duotone fa-gauge-simple-high mc-fa-lavender"></i>
						<strong><?php esc_html_e( 'How is this different from Lighthouse?', 'monitor-cat' ); ?></strong>
					</div>
					<p class="mc-text-small mc-text-medium">
						<?php esc_html_e( 'The score above is the Monitor.Cat Speed Score — our own server-side analysis of caching, compression, database health, and asset optimization. It is not a Google Lighthouse score. Lighthouse measures real browser rendering performance (FCP, LCP, CLS). For a complete picture, run both!', 'monitor-cat' ); ?>
					</p>
				</div>
				<a
					id="mc-lighthouse-link"
					href="https://pagespeed.web.dev/"
					target="_blank"
					rel="noopener noreferrer"
					class="mc-btn mc-btn-secondary mc-btn-sm mc-speed-lighthouse-btn"
				>
					<i class="fa-duotone fa-arrow-up-right-from-square"></i>
					<?php esc_html_e( 'Run Google Lighthouse', 'monitor-cat' ); ?>
				</a>
			</div>
		</div>

		<!-- Active optimizations banner -->
		<div id="mc-speed-optimizations" class="mc-speed-optimizations mc-card mc-card-compact" style="display: none;">
			<div class="mc-speed-optimizations-header">
				<div class="mc-speed-optimizations-title">
					<i class="fa-duotone fa-rocket-launch mc-fa-cyan"></i>
					<strong><?php esc_html_e( 'Active Optimizations', 'monitor-cat' ); ?></strong>
				</div>
				<span id="mc-speed-opt-count" class="mc-badge mc-badge-success"></span>
			</div>
			<div id="mc-speed-optimizations-grid" class="mc-speed-optimizations-grid"></div>
		</div>

		<!-- Tab navigation -->
		<div class="mc-speed-tabs" data-mc-tabs>
			<div class="mc-tab-bar">
				<button class="mc-tab is-active" data-tab-target="performance"><?php esc_html_e( 'Performance', 'monitor-cat' ); ?></button>
				<button class="mc-tab" data-tab-target="infrastructure"><?php esc_html_e( 'Infrastructure', 'monitor-cat' ); ?></button>
				<button class="mc-tab" data-tab-target="database"><?php esc_html_e( 'Database', 'monitor-cat' ); ?></button>
			</div>

			<!-- Performance panel -->
			<div class="mc-tab-panel is-active" data-tab-panel="performance">
				<div id="mc-speed-perf-grid" class="mc-speed-category-grid"></div>
			</div>

			<!-- Infrastructure panel -->
			<div class="mc-tab-panel" data-tab-panel="infrastructure">
				<div id="mc-speed-infra-grid" class="mc-speed-category-grid"></div>
			</div>

			<!-- Database panel -->
			<div class="mc-tab-panel" data-tab-panel="database">
				<div id="mc-speed-db-grid" class="mc-speed-category-grid"></div>

				<!-- DB cleanup actions -->
				<div class="mc-card mc-card-spacious mc-db-cleanup-section">
					<div class="mc-db-cleanup-header">
						<div>
							<h3 class="mc-heading-sm">
								<i class="fa-duotone fa-broom mc-fa-cyan"></i>
								<?php esc_html_e( 'Database Cleanup', 'monitor-cat' ); ?>
							</h3>
							<p class="mc-text-medium"><?php esc_html_e( 'Remove unnecessary data to improve database performance.', 'monitor-cat' ); ?></p>
						</div>
						<button
							type="button"
							id="mc-db-clean-all-btn"
							class="mc-btn mc-btn-primary mc-btn-sm"
							data-loading-text="<?php esc_attr_e( 'Cleaning...', 'monitor-cat' ); ?>"
						>
							<i class="fa-duotone fa-sparkles"></i>
							<?php esc_html_e( 'Clean All', 'monitor-cat' ); ?>
						</button>
					</div>

					<div id="mc-db-stats" class="mc-db-stats-grid"></div>
				</div>
			</div>
		</div>

	</div>

	<!-- Empty state (only shown on error) -->
	<div id="mc-speed-empty" class="mc-empty-state" style="display: none;">
		<div class="mc-card mc-card-spacious mc-empty-card">
			<img
				src="<?php echo esc_url( MONITORCAT_URL . 'assets/img/cat.webp' ); ?>"
				alt="<?php esc_attr_e( 'Cat illustration', 'monitor-cat' ); ?>"
				class="mc-empty-illustration"
				width="120"
			/>
			<h2><?php esc_html_e( 'Couldn\'t run the scan', 'monitor-cat' ); ?></h2>
			<p class="mc-text-medium">
				<?php esc_html_e( 'Click "Run Scan" above to try again.', 'monitor-cat' ); ?>
			</p>
		</div>
	</div>

</div>
