<?php
/**
 * Citations page — interactive AJAX query mgmt + chart.
 *
 * @package WPLens
 */

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

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
// phpcs:disable WordPress.Security.NonceVerification.Recommended

$repo         = new \WPLens\Citations\CitationRepository();
$queries      = $repo->all_queries();
$checks       = $repo->recent_checks( 25 );
$rate         = $repo->citation_rate( 30 );
$prov_default = \WPLens\AI\ProviderRegistry::default();
$ai_ready     = $prov_default && $prov_default->is_configured();
?>
<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( 'Citation Tracking', 'lens-ai-visibility-monitor' ); ?>
	</h1>

	<?php if ( ! $ai_ready ) : ?>
		<div class="lens-card" style="background:#fcf0d3;border-color:#d4a017;color:#8a5a00;">
			<strong><?php esc_html_e( 'Citation tracking needs an OpenAI key.', 'lens-ai-visibility-monitor' ); ?></strong>
			&nbsp;
			<a class="lens-btn" style="background:#fff;" href="<?php echo esc_url( admin_url( 'admin.php?page=lens-settings' ) ); ?>"><?php esc_html_e( 'Add a key →', 'lens-ai-visibility-monitor' ); ?></a>
		</div>
	<?php endif; ?>

	<div class="lens-grid cols-3" style="margin-top:16px;">
		<div class="lens-card lens-kpi">
			<span class="label"><?php esc_html_e( 'Citation rate', 'lens-ai-visibility-monitor' ); ?></span>
			<span class="value"><?php echo esc_html( $rate ); ?>%</span>
			<span class="sub"><?php esc_html_e( 'last 30 days', 'lens-ai-visibility-monitor' ); ?></span>
		</div>
		<div class="lens-card lens-kpi">
			<span class="label"><?php esc_html_e( 'Active queries', 'lens-ai-visibility-monitor' ); ?></span>
			<span class="value"><?php echo (int) count( array_filter( $queries, static function ( $q ) { return (int) $q['is_active'] === 1; } ) ); ?></span>
			<span class="sub"><?php esc_html_e( 'of 10 allowed', 'lens-ai-visibility-monitor' ); ?></span>
		</div>
		<div class="lens-card lens-kpi">
			<span class="label"><?php esc_html_e( 'Checks recorded', 'lens-ai-visibility-monitor' ); ?></span>
			<span class="value"><?php echo (int) count( $checks ); ?></span>
			<span class="sub"><?php esc_html_e( 'recent 25', 'lens-ai-visibility-monitor' ); ?></span>
		</div>
	</div>

	<div class="lens-card" style="margin-top:20px;">
		<header style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
			<h2 style="margin:0;font-size:18px;"><?php esc_html_e( 'Citation rate over time', 'lens-ai-visibility-monitor' ); ?></h2>
			<select id="lens-cite-range" class="lens-select" style="width:auto;">
				<option value="30">Last 30 days</option>
				<option value="90" selected>Last 90 days</option>
				<option value="180">Last 180 days</option>
			</select>
		</header>
		<div class="lens-chart-wrap"><canvas id="lens-chart-citations"></canvas></div>
	</div>

	<div class="lens-card" style="margin-top:20px;">
		<header style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap;">
			<h2 style="margin:0;font-size:18px;"><?php esc_html_e( 'Tracked queries', 'lens-ai-visibility-monitor' ); ?></h2>
			<div style="display:flex;gap:8px;align-items:center;">
				<input id="lens-new-query" type="text" maxlength="512" class="lens-input" style="width:340px;" placeholder="<?php esc_attr_e( 'e.g. best CRM for small architecture firms', 'lens-ai-visibility-monitor' ); ?>" />
				<button id="lens-add-query" type="button" class="lens-btn primary"><span class="spinner"></span><?php esc_html_e( 'Add query', 'lens-ai-visibility-monitor' ); ?></button>
				<button id="lens-run-all" type="button" class="lens-btn" <?php disabled( ! $ai_ready ); ?>><span class="spinner"></span><?php esc_html_e( 'Run all', 'lens-ai-visibility-monitor' ); ?></button>
			</div>
		</header>

		<div id="lens-queries-table">
			<?php if ( empty( $queries ) ) : ?>
				<div class="lens-empty">
					<h3><?php esc_html_e( 'No queries yet', 'lens-ai-visibility-monitor' ); ?></h3>
					<p><?php esc_html_e( 'Add up to ten seed queries you want to track. Lens will ask the major AI engines whether they cite your domain.', 'lens-ai-visibility-monitor' ); ?></p>
				</div>
			<?php else : ?>
				<table class="lens-table">
					<thead><tr>
						<th><?php esc_html_e( 'Query', 'lens-ai-visibility-monitor' ); ?></th>
						<th><?php esc_html_e( 'Status', 'lens-ai-visibility-monitor' ); ?></th>
						<th><?php esc_html_e( 'Created', 'lens-ai-visibility-monitor' ); ?></th>
						<th></th>
					</tr></thead>
					<tbody id="lens-queries-tbody">
					<?php foreach ( $queries as $q ) : ?>
						<tr data-query-id="<?php echo (int) $q['id']; ?>">
							<td><?php echo esc_html( $q['query'] ); ?></td>
							<td>
								<?php if ( (int) $q['is_active'] === 1 ) : ?>
									<span class="lens-pill ok"><?php esc_html_e( 'Active', 'lens-ai-visibility-monitor' ); ?></span>
								<?php else : ?>
									<span class="lens-pill"><?php esc_html_e( 'Paused', 'lens-ai-visibility-monitor' ); ?></span>
								<?php endif; ?>
							</td>
							<td class="muted"><?php echo esc_html( $q['created_at'] ); ?></td>
							<td>
								<button type="button" class="lens-btn ghost lens-run-query" <?php disabled( ! $ai_ready ); ?>>
									<span class="spinner"></span>
									<?php esc_html_e( 'Check now', 'lens-ai-visibility-monitor' ); ?>
								</button>
								<button type="button" class="lens-btn ghost lens-delete-query" style="color:#b32d2e;">
									<?php esc_html_e( 'Delete', 'lens-ai-visibility-monitor' ); ?>
								</button>
							</td>
						</tr>
					<?php endforeach; ?>
					</tbody>
				</table>
			<?php endif; ?>
		</div>
	</div>

	<div class="lens-card" style="margin-top:20px;">
		<header style="margin-bottom:12px;">
			<h2 style="margin:0;font-size:18px;"><?php esc_html_e( 'Recent checks', 'lens-ai-visibility-monitor' ); ?></h2>
		</header>
		<?php if ( empty( $checks ) ) : ?>
			<div class="lens-empty">
				<h3><?php esc_html_e( 'No checks recorded yet', 'lens-ai-visibility-monitor' ); ?></h3>
				<p><?php esc_html_e( 'Add at least one query above and click "Check now" or "Run all".', 'lens-ai-visibility-monitor' ); ?></p>
			</div>
		<?php else : ?>
			<table class="lens-table">
				<thead><tr>
					<th><?php esc_html_e( 'When', 'lens-ai-visibility-monitor' ); ?></th>
					<th><?php esc_html_e( 'Provider', 'lens-ai-visibility-monitor' ); ?></th>
					<th><?php esc_html_e( 'Query', 'lens-ai-visibility-monitor' ); ?></th>
					<th><?php esc_html_e( 'Cited?', 'lens-ai-visibility-monitor' ); ?></th>
					<th><?php esc_html_e( 'URL', 'lens-ai-visibility-monitor' ); ?></th>
				</tr></thead>
				<tbody>
				<?php foreach ( $checks as $c ) : ?>
					<tr>
						<td class="muted"><?php echo esc_html( $c['checked_at'] ); ?></td>
						<td><?php echo esc_html( $c['ai_provider'] ); ?></td>
						<td><?php echo esc_html( (string) ( $c['query'] ?? '' ) ); ?></td>
						<td><?php echo (int) $c['cited'] === 1 ? '<span class="lens-pill ok">Yes</span>' : '<span class="lens-pill bad">No</span>'; ?></td>
						<td><?php if ( ! empty( $c['cited_url'] ) ) : ?><a href="<?php echo esc_url( (string) $c['cited_url'] ); ?>" target="_blank" rel="noopener noreferrer" class="mono"><?php echo esc_html( (string) $c['cited_url'] ); ?></a><?php else : ?>—<?php endif; ?></td>
					</tr>
				<?php endforeach; ?>
				</tbody>
			</table>
		<?php endif; ?>
	</div>
</div>
