<?php
/**
 * Livada SEO — AI Visibility Score View
 *
 * @package Livada_SEO
 */

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

if ( ! class_exists( 'Livada_SEO_AI_Visibility' ) ) {
	require_once LIVADA_SEO_PATH . 'includes/class-ai-visibility.php';
}

// Force refresh when requested (nonce-protected).
$force = false;
if ( isset( $_GET['refresh'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
	$nonce = isset( $_GET['_wpnonce'] ) ? sanitize_text_field( wp_unslash( $_GET['_wpnonce'] ) ) : '';
	if ( wp_verify_nonce( $nonce, 'livada_seo_ai_visibility_refresh' ) ) {
		$force = true;
	}
}

$report = Livada_SEO_AI_Visibility::get_report( $force );

$score = (int) $report['score'];
$grade = (string) $report['grade'];

// Gauge colour by score band (charte Indigo for excellent, orange mid, red low).
if ( $score >= 75 ) {
	$gauge_color = '#4F46E5'; // Indigo.
} elseif ( $score >= 55 ) {
	$gauge_color = '#0EA5E9';
} elseif ( $score >= 35 ) {
	$gauge_color = '#F59E0B';
} else {
	$gauge_color = '#DC2626';
}

// SVG arc maths (r = 70, circumference ≈ 439.82).
$radius        = 70;
$circumference = 2 * M_PI * $radius;
$offset        = $circumference * ( 1 - $score / 100 );

$dot_class = [
	'green'  => 'ls-dot--ok',
	'orange' => 'ls-dot--warn',
	'red'    => 'ls-dot--danger',
];

$refresh_url = wp_nonce_url(
	admin_url( 'admin.php?page=livada-seo-ai-visibility&refresh=1' ),
	'livada_seo_ai_visibility_refresh'
);

$generated_label = '';
if ( ! empty( $report['generated'] ) ) {
	$ts = strtotime( (string) $report['generated'] );
	if ( $ts ) {
		$generated_label = sprintf(
			/* translators: %s: human time diff */
			__( 'Computed %s ago', 'livada-seo' ),
			human_time_diff( $ts, time() )
		);
	}
}
?>
<div class="wrap livada-seo-wrap has-ls-hero">
<?php include LIVADA_SEO_PATH . 'includes/admin/views/_partials/header.php'; ?>
	<h1><?php esc_html_e( 'AI Visibility Score', 'livada-seo' ); ?></h1>

	<style>
		.ls-aiv-grid{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
		.ls-aiv-gauge{position:relative;width:180px;height:180px;flex:0 0 auto}
		.ls-aiv-gauge svg{transform:rotate(-90deg)}
		.ls-aiv-gauge__num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
		.ls-aiv-gauge__score{font-size:46px;font-weight:700;line-height:1;color:#2C2A29}
		.ls-aiv-gauge__grade{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin-top:4px}
		.ls-aiv-intro{flex:1 1 320px;min-width:280px}
		.ls-aiv-intro p{font-size:15px;margin:.2em 0 1em}
		.ls-aiv-checks{margin-top:8px}
		.ls-aiv-check{display:flex;gap:12px;padding:14px 0;border-top:1px solid #ececec;align-items:flex-start}
		.ls-aiv-check:first-child{border-top:0}
		.ls-aiv-check__main{flex:1}
		.ls-aiv-check__label{font-weight:600;color:#2C2A29}
		.ls-aiv-check__detail{color:#555;margin:2px 0 0}
		.ls-aiv-check__fix{color:#7c2d12;background:#fff7ed;border-left:3px solid #F59E0B;padding:6px 10px;margin:6px 0 0;font-size:13px;border-radius:0 4px 4px 0}
		.ls-aiv-check__pts{flex:0 0 auto;font-variant-numeric:tabular-nums;color:#6b7280;font-size:13px;font-weight:600;min-width:48px;text-align:right}
		.ls-dot--warn{background:#F59E0B}
	</style>

	<section class="ls-section">
		<div class="ls-aiv-grid">
			<div class="ls-aiv-gauge">
				<svg width="180" height="180" viewBox="0 0 180 180" role="img" aria-label="<?php echo esc_attr( sprintf( __( 'AI visibility score: %d out of 100', 'livada-seo' ), $score ) ); ?>">
					<circle cx="90" cy="90" r="<?php echo esc_attr( (string) $radius ); ?>" fill="none" stroke="#ececec" stroke-width="14"></circle>
					<circle cx="90" cy="90" r="<?php echo esc_attr( (string) $radius ); ?>" fill="none"
						stroke="<?php echo esc_attr( $gauge_color ); ?>" stroke-width="14" stroke-linecap="round"
						stroke-dasharray="<?php echo esc_attr( (string) $circumference ); ?>"
						stroke-dashoffset="<?php echo esc_attr( (string) $offset ); ?>"></circle>
				</svg>
				<div class="ls-aiv-gauge__num">
					<span class="ls-aiv-gauge__score"><?php echo esc_html( (string) $score ); ?></span>
					<span class="ls-aiv-gauge__grade"><?php echo esc_html( sprintf( __( 'Grade %s', 'livada-seo' ), $grade ) ); ?></span>
				</div>
			</div>
			<div class="ls-aiv-intro">
				<h2 style="margin-top:0;"><?php esc_html_e( 'Be found by Google. And by AI.', 'livada-seo' ); ?></h2>
				<p><?php echo esc_html( (string) $report['headline'] ); ?></p>
				<a href="<?php echo esc_url( $refresh_url ); ?>" class="button button-secondary">
					<span class="dashicons dashicons-update" aria-hidden="true" style="margin-top:4px;"></span>
					<?php esc_html_e( 'Recompute score', 'livada-seo' ); ?>
				</a>
				<?php if ( '' !== $generated_label ) : ?>
					<span style="color:#6b7280;margin-left:10px;font-size:13px;"><?php echo esc_html( $generated_label ); ?></span>
				<?php endif; ?>
			</div>
		</div>
	</section>

	<section class="ls-section">
		<header class="ls-section__head">
			<h2 class="ls-section__title">
				<span class="dashicons dashicons-list-view" aria-hidden="true"></span>
				<?php esc_html_e( 'What AI engines see', 'livada-seo' ); ?>
			</h2>
		</header>

		<div class="ls-aiv-checks">
			<?php foreach ( $report['checks'] as $c ) : ?>
				<?php $dc = $dot_class[ $c['status'] ] ?? 'ls-dot--warn'; ?>
				<div class="ls-aiv-check">
					<span class="ls-dot <?php echo esc_attr( $dc ); ?>" aria-hidden="true" style="margin-top:5px;"></span>
					<div class="ls-aiv-check__main">
						<div class="ls-aiv-check__label"><?php echo esc_html( $c['label'] ); ?></div>
						<p class="ls-aiv-check__detail"><?php echo esc_html( $c['detail'] ); ?></p>
						<?php if ( ! empty( $c['fix'] ) ) : ?>
							<p class="ls-aiv-check__fix"><?php echo esc_html( $c['fix'] ); ?></p>
						<?php endif; ?>
					</div>
					<div class="ls-aiv-check__pts"><?php echo esc_html( $c['points'] . ' / ' . $c['max'] ); ?></div>
				</div>
			<?php endforeach; ?>
		</div>
	</section>
</div>
