<?php
/**
 * Diagnostics module page template.
 *
 * Hero health score + actionable insights + tabbed detail sections
 * (Environment, WordPress, Plugins & Theme, Health Checks).
 *
 * @package MonitorCat
 */

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

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

	<div class="mc-page-header">
		<div class="mc-page-title-group">
			<div class="mc-pedestal mc-pedestal-sm mc-pedestal-mint">
				<i class="fa-duotone fa-stethoscope mc-fa-mint"></i>
			</div>
			<div>
				<h1><?php esc_html_e( 'Site Diagnostics', 'monitor-cat' ); ?></h1>
				<p class="mc-page-subtitle"><?php esc_html_e( 'System health checks and environment information.', 'monitor-cat' ); ?></p>
			</div>
		</div>
		<div class="mc-page-actions">
			<button
				type="button"
				id="mc-diag-copy-btn"
				class="mc-btn mc-btn-secondary mc-btn-sm"
				data-loading-text="<?php esc_attr_e( 'Copying...', 'monitor-cat' ); ?>"
				data-success-text="<?php esc_attr_e( 'Copied!', 'monitor-cat' ); ?>"
			>
				<i class="fa-duotone fa-clipboard"></i>
				<?php esc_html_e( 'Copy to Clipboard', 'monitor-cat' ); ?>
			</button>
			<button
				type="button"
				id="mc-diag-refresh-btn"
				class="mc-btn mc-btn-primary mc-btn-sm"
				data-loading-text="<?php esc_attr_e( 'Refreshing...', 'monitor-cat' ); ?>"
			>
				<i class="fa-duotone fa-arrows-rotate"></i>
				<?php esc_html_e( 'Refresh', 'monitor-cat' ); ?>
			</button>
		</div>
	</div>

	<!-- Loading state -->
	<div id="mc-diag-loading" class="mc-loading-state">
		<div class="mc-card mc-card-spacious mc-diag-loading-card">
			<div class="mc-spinner"></div>
			<h2><?php esc_html_e( 'Running diagnostics...', 'monitor-cat' ); ?></h2>
			<p class="mc-text-medium">
				<?php esc_html_e( 'Checking 6 system areas for potential issues.', 'monitor-cat' ); ?>
			</p>
			<ul id="mc-diag-loading-steps" class="mc-diag-loading-steps">
				<li class="mc-diag-loading-step" data-step="env">
					<i class="fa-duotone fa-spinner-third fa-spin"></i>
					<span><?php esc_html_e( 'Checking PHP & server environment...', 'monitor-cat' ); ?></span>
				</li>
				<li class="mc-diag-loading-step" data-step="wp">
					<i class="fa-duotone fa-ellipsis"></i>
					<span><?php esc_html_e( 'Analyzing WordPress configuration...', 'monitor-cat' ); ?></span>
				</li>
				<li class="mc-diag-loading-step" data-step="plugins">
					<i class="fa-duotone fa-ellipsis"></i>
					<span><?php esc_html_e( 'Scanning plugins & themes...', 'monitor-cat' ); ?></span>
				</li>
				<li class="mc-diag-loading-step" data-step="health">
					<i class="fa-duotone fa-ellipsis"></i>
					<span><?php esc_html_e( 'Running health checks...', 'monitor-cat' ); ?></span>
				</li>
			</ul>
		</div>
	</div>

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

		<!-- Hero health card -->
		<div class="mc-card mc-card-spacious mc-diag-hero">
			<div class="mc-diag-hero-content">
				<div class="mc-diag-hero-ring">
					<div id="mc-diag-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-diag-score-number">0</span>
							<span class="mc-score-ring-sublabel"><?php esc_html_e( 'Health', 'monitor-cat' ); ?></span>
						</div>
					</div>
				</div>
				<div class="mc-diag-hero-info">
					<h2 id="mc-diag-hero-title"><?php esc_html_e( 'Your Site Health', 'monitor-cat' ); ?></h2>
					<p id="mc-diag-hero-desc" class="mc-text-medium"></p>
					<div id="mc-diag-hero-badges" class="mc-diag-hero-badges"></div>
				</div>
			</div>
		</div>

		<!-- Actionable insights banner -->
		<div id="mc-diag-insights" class="mc-diag-insights mc-card mc-card-compact" style="display: none;">
			<div class="mc-diag-insights-header">
				<div class="mc-diag-insights-title">
					<i class="fa-duotone fa-lightbulb-on mc-fa-primary"></i>
					<strong><?php esc_html_e( 'Actionable Insights', 'monitor-cat' ); ?></strong>
				</div>
				<span id="mc-diag-insight-count" class="mc-badge mc-badge-warning"></span>
			</div>
			<div id="mc-diag-insights-list" class="mc-diag-insights-list"></div>
		</div>

		<!-- Tab navigation -->
		<div class="mc-diag-tabs">
			<div class="mc-tab-bar">
				<button class="mc-tab is-active" data-tab-target="environment">
					<i class="fa-duotone fa-microchip"></i>
					<?php esc_html_e( 'Environment', 'monitor-cat' ); ?>
				</button>
				<button class="mc-tab" data-tab-target="wordpress">
					<i class="fa-duotone fa-globe"></i>
					<?php esc_html_e( 'WordPress', 'monitor-cat' ); ?>
				</button>
				<button class="mc-tab" data-tab-target="plugins">
					<i class="fa-duotone fa-puzzle-piece"></i>
					<?php esc_html_e( 'Plugins & Theme', 'monitor-cat' ); ?>
				</button>
				<button class="mc-tab" data-tab-target="health">
					<i class="fa-duotone fa-heart-pulse"></i>
					<?php esc_html_e( 'Health Checks', 'monitor-cat' ); ?>
				</button>
			</div>

			<!-- Environment panel -->
			<div class="mc-tab-panel is-active" data-tab-panel="environment">
				<div id="mc-diag-env-grid" class="mc-diag-detail-grid"></div>
			</div>

			<!-- WordPress panel -->
			<div class="mc-tab-panel" data-tab-panel="wordpress">
				<div id="mc-diag-wp-grid" class="mc-diag-detail-grid"></div>
			</div>

			<!-- Plugins & Theme panel -->
			<div class="mc-tab-panel" data-tab-panel="plugins">
				<div id="mc-diag-plugins-grid" class="mc-diag-plugins-section"></div>
			</div>

			<!-- Health Checks panel -->
			<div class="mc-tab-panel" data-tab-panel="health">
				<div id="mc-diag-health-grid" class="mc-diag-detail-grid"></div>
			</div>
		</div>

	</div>

	<!-- Empty state (only shown on error) -->
	<div id="mc-diag-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 load diagnostics', 'monitor-cat' ); ?></h2>
			<p class="mc-text-medium">
				<?php esc_html_e( 'Click "Refresh" above to try again.', 'monitor-cat' ); ?>
			</p>
		</div>
	</div>

</div>
