<?php
/**
 * SEO & GEO module page template.
 *
 * Two-section layout:
 * 1. Site Health — loads immediately with site-wide checks (sitemap, robots, AI crawlers, llms.txt)
 * 2. Page Analysis — per-page checks with page picker (meta, OG, headings, links, readability, GEO)
 *
 * @package MonitorCat
 */

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

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

	<div class="mc-page-header">
		<div class="mc-page-title-group">
			<div class="mc-pedestal mc-pedestal-sm mc-pedestal-primary">
				<i class="fa-duotone fa-magnifying-glass-chart mc-fa-primary"></i>
			</div>
			<div>
				<h1><?php esc_html_e( 'SEO & GEO', 'monitor-cat' ); ?></h1>
				<p class="mc-page-subtitle"><?php esc_html_e( 'Actively improving your visibility on search engines and AI platforms.', 'monitor-cat' ); ?></p>
			</div>
		</div>
	</div>

	<!-- ================================================================= -->
	<!-- SECTION 1: Site Health (loads immediately, no page selection)      -->
	<!-- ================================================================= -->
	<div id="mc-seo-site-section" class="mc-seo-section">

		<!-- Site health loading -->
		<div id="mc-site-health-loading" class="mc-seo-inline-loading">
			<i class="fa-duotone fa-spinner-third fa-spin"></i>
			<span><?php esc_html_e( 'Checking active protections...', 'monitor-cat' ); ?></span>
		</div>

		<!-- Active protections — what Monitor.Cat is generating -->
		<div id="mc-seo-protections" class="mc-seo-protections mc-card mc-card-compact" style="display: none;">
			<div class="mc-seo-protections-header">
				<i class="fa-duotone fa-wand-magic-sparkles mc-fa-mint"></i>
				<strong><?php esc_html_e( 'Monitor.Cat is automatically generating:', 'monitor-cat' ); ?></strong>
			</div>
			<div id="mc-seo-protections-items" class="mc-seo-protections-items"></div>
		</div>

		<!-- Site health checks grid -->
		<div id="mc-site-health-grid" class="mc-seo-category-grid" style="display: none;"></div>
	</div>

	<!-- ================================================================= -->
	<!-- SECTION 2: Page Analysis (with page picker)                       -->
	<!-- ================================================================= -->
	<div id="mc-seo-page-section" class="mc-seo-section">
		<div class="mc-seo-section-header">
			<div class="mc-pedestal mc-pedestal-xs mc-pedestal-lavender">
				<i class="fa-duotone fa-wand-sparkles mc-fa-lavender"></i>
			</div>
			<div>
				<h2 class="mc-heading-sm"><?php esc_html_e( 'Page Analysis & Improvements', 'monitor-cat' ); ?></h2>
				<p class="mc-text-small mc-text-medium"><?php esc_html_e( 'What Monitor.Cat is doing for this page, and what you can improve.', 'monitor-cat' ); ?></p>
			</div>
			<div class="mc-seo-page-actions">
				<div class="mc-seo-post-switcher-wrap">
					<div class="mc-seo-post-switcher">
						<select id="mc-seo-post-select" class="mc-select mc-select-sm" aria-label="<?php esc_attr_e( 'Select page to analyze', 'monitor-cat' ); ?>">
							<option value=""><?php esc_html_e( 'Loading...', 'monitor-cat' ); ?></option>
						</select>
					</div>
					<!-- Dismissible tooltip -->
					<div id="mc-seo-deeplink-tip" class="mc-seo-tooltip" style="display: none;">
						<div class="mc-seo-tooltip-icon">
							<i class="fa-duotone fa-lightbulb"></i>
						</div>
						<div class="mc-seo-tooltip-body">
							<strong><?php esc_html_e( 'Don\'t just check the homepage!', 'monitor-cat' ); ?></strong>
							<?php esc_html_e( 'Analyze your key landing pages, blog posts, and deeplinks to maximize search visibility across your entire site.', 'monitor-cat' ); ?>
						</div>
						<button type="button" class="mc-seo-tooltip-close" aria-label="<?php esc_attr_e( 'Dismiss', 'monitor-cat' ); ?>">
							<i class="fa-duotone fa-xmark"></i>
						</button>
					</div>
				</div>
				<button type="button" id="mc-seo-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( 'Rescan', 'monitor-cat' ); ?>
				</button>
			</div>
		</div>

		<!-- Page scan loading -->
		<div id="mc-seo-loading" class="mc-loading-state" style="display: none;">
			<div class="mc-card mc-card-spacious mc-seo-loading-card">
				<div class="mc-spinner"></div>
				<h2><?php esc_html_e( 'Analyzing page content...', 'monitor-cat' ); ?></h2>
				<p class="mc-text-medium">
					<?php esc_html_e( 'Running SEO & GEO checks on this page.', 'monitor-cat' ); ?>
				</p>
				<ul id="mc-seo-loading-steps" class="mc-seo-loading-steps">
					<li class="mc-seo-loading-step" data-step="meta">
						<i class="fa-duotone fa-spinner-third fa-spin"></i>
						<span><?php esc_html_e( 'Checking meta tags & descriptions...', 'monitor-cat' ); ?></span>
					</li>
					<li class="mc-seo-loading-step" data-step="content">
						<i class="fa-duotone fa-ellipsis"></i>
						<span><?php esc_html_e( 'Analyzing content structure & readability...', 'monitor-cat' ); ?></span>
					</li>
					<li class="mc-seo-loading-step" data-step="schema">
						<i class="fa-duotone fa-ellipsis"></i>
						<span><?php esc_html_e( 'Validating structured data & schema...', 'monitor-cat' ); ?></span>
					</li>
					<li class="mc-seo-loading-step" data-step="geo">
						<i class="fa-duotone fa-ellipsis"></i>
						<span><?php esc_html_e( 'Scoring GEO readiness, citations & entity clarity...', 'monitor-cat' ); ?></span>
					</li>
				</ul>
			</div>
		</div>

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

			<!-- Hero score card -->
			<div class="mc-card mc-card-spacious mc-seo-hero">
				<div class="mc-seo-hero-content">
					<div class="mc-seo-hero-ring">
						<div id="mc-seo-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-seo-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-seo-hero-info">
						<h2 id="mc-seo-hero-title"><?php esc_html_e( 'Monitor.Cat SEO & GEO Score', 'monitor-cat' ); ?></h2>
						<p id="mc-seo-hero-desc" class="mc-text-medium"></p>
						<div id="mc-seo-hero-badges" class="mc-seo-hero-badges"></div>
					</div>
				</div>
			</div>

			<!-- Google SERP preview -->
			<div class="mc-card mc-card-compact mc-seo-serp-card">
				<div class="mc-seo-serp-label">
					<i class="fa-duotone fa-magnifying-glass mc-fa-text"></i>
					<?php esc_html_e( 'Google Search Preview', 'monitor-cat' ); ?>
				</div>
				<div class="mc-seo-serp-preview">
					<div id="mc-serp-url" class="mc-seo-serp-url"></div>
					<div id="mc-serp-title" class="mc-seo-serp-title"></div>
					<div id="mc-serp-desc" class="mc-seo-serp-desc"></div>
				</div>
			</div>

			<!-- Page checks grid -->
			<div id="mc-seo-page-checks" class="mc-seo-category-grid"></div>
		</div>

		<!-- Empty state (only shown on error) -->
		<div id="mc-seo-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( 'Select a page from the dropdown above and click Rescan to try again.', 'monitor-cat' ); ?>
				</p>
			</div>
		</div>
	</div>

</div>
