<?php
/**
 * Dashboard view — interactive.
 *
 * Renders a static shell; dashboard.js fetches data via AJAX and renders
 * Chart.js visualisations into the placeholders.
 *
 * @package WPLens
 */

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

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
// phpcs:disable WordPress.Security.NonceVerification.Recommended
?>
<div class="wrap lens-wrap">
	<h1>
		<img class="lens-icon" src="<?php echo esc_url( WPLENS_PLUGIN_URL . 'assets/icon.svg' ); ?>" alt="" />
		<?php esc_html_e( 'AI Visibility Dashboard', 'lens-ai-visibility-monitor' ); ?>
	</h1>
	<p class="description">
		<?php esc_html_e( 'See which AI bots crawl your site, what they read, and whether the major answer engines actually cite you.', 'lens-ai-visibility-monitor' ); ?>
	</p>

	<?php settings_errors( 'lens-ai-visibility-monitor' ); ?>

	<div class="lens-grid cols-4" style="margin-top:16px;">
		<div class="lens-card lens-kpi" data-kpi="visits">
			<span class="label"><?php esc_html_e( 'AI bot visits', 'lens-ai-visibility-monitor' ); ?></span>
			<span class="value" data-value>—</span>
			<span class="sub"><span data-window>last 30 days</span></span>
		</div>
		<div class="lens-card lens-kpi" data-kpi="families">
			<span class="label"><?php esc_html_e( 'Bot families seen', 'lens-ai-visibility-monitor' ); ?></span>
			<span class="value" data-value>—</span>
			<span class="sub"><?php esc_html_e( 'distinct user agents', 'lens-ai-visibility-monitor' ); ?></span>
		</div>
		<div class="lens-card lens-kpi" data-kpi="citation_rate">
			<span class="label"><?php esc_html_e( 'Citation rate', 'lens-ai-visibility-monitor' ); ?></span>
			<span class="value" data-value>—</span>
			<span class="sub"><?php esc_html_e( '% of checks where you were cited', 'lens-ai-visibility-monitor' ); ?></span>
		</div>
		<div class="lens-card lens-kpi" data-kpi="blind_spots">
			<span class="label"><?php esc_html_e( 'Blind spots', 'lens-ai-visibility-monitor' ); ?></span>
			<span class="value" data-value>—</span>
			<span class="sub"><?php esc_html_e( 'published posts with no AI visits', 'lens-ai-visibility-monitor' ); ?></span>
		</div>
	</div>

	<div class="lens-grid cols-3" style="margin-top:20px;">
		<div class="lens-card" style="grid-column: span 2;">
			<div class="lens-section" style="margin:0;padding:0;border:0;">
				<header>
					<h2><?php esc_html_e( 'Visits over time', 'lens-ai-visibility-monitor' ); ?></h2>
					<div class="actions">
						<select id="lens-range" class="lens-select" style="width:auto">
							<option value="7"><?php esc_html_e( 'Last 7 days', 'lens-ai-visibility-monitor' ); ?></option>
							<option value="30" selected><?php esc_html_e( 'Last 30 days', 'lens-ai-visibility-monitor' ); ?></option>
							<option value="90"><?php esc_html_e( 'Last 90 days', 'lens-ai-visibility-monitor' ); ?></option>
						</select>
					</div>
				</header>
				<div class="lens-chart-wrap tall"><canvas id="lens-chart-visits"></canvas></div>
			</div>
		</div>

		<div class="lens-card">
			<header style="display:flex;justify-content:space-between;margin-bottom:8px;">
				<h2 style="margin:0;font-size:16px;"><?php esc_html_e( 'Bot family share', 'lens-ai-visibility-monitor' ); ?></h2>
			</header>
			<div class="lens-chart-wrap"><canvas id="lens-chart-families"></canvas></div>
		</div>
	</div>

	<div class="lens-grid cols-3" style="margin-top:20px;">
		<div class="lens-card" style="grid-column: span 2;">
			<header style="display:flex;justify-content:space-between;margin-bottom:8px;">
				<h2 style="margin:0;font-size:16px;"><?php esc_html_e( 'Top crawled pages', 'lens-ai-visibility-monitor' ); ?></h2>
			</header>
			<div id="lens-top-pages">
				<div class="lens-empty"><?php esc_html_e( 'Loading…', 'lens-ai-visibility-monitor' ); ?></div>
			</div>
		</div>
		<div class="lens-card">
			<header style="display:flex;justify-content:space-between;margin-bottom:8px;">
				<h2 style="margin:0;font-size:16px;"><?php esc_html_e( 'Blind spots', 'lens-ai-visibility-monitor' ); ?></h2>
			</header>
			<div id="lens-blind-spots">
				<div class="lens-empty"><?php esc_html_e( 'Loading…', 'lens-ai-visibility-monitor' ); ?></div>
			</div>
		</div>
	</div>
</div>
