<?php
/**
 * Analytics teaser view (free/unpaid users).
 *
 * Shows a blurred, non-interactive preview of the analytics dashboard
 * with a CTA overlay to upgrade.
 *
 * @package SlideMind
 * @since 2.3.0
 */

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

$upgrade_url = \SlideMind\Core\FeatureGate::get_upgrade_url();
?>
<div class="sm-wrap">
	<div class="sm-header">
		<h1><?php esc_html_e( 'Analytics', 'slidemind' ); ?></h1>
	</div>

	<div class="sm-teaser">
		<!-- CTA overlay -->
		<div class="sm-teaser__overlay">
			<div class="sm-teaser__card">
				<span class="dashicons dashicons-lock sm-teaser__lock-icon"></span>
				<h2 class="sm-teaser__title">
					<?php esc_html_e( 'Unlock Analytics', 'slidemind' ); ?>
				</h2>
				<p class="sm-teaser__desc">
					<?php esc_html_e( 'Track API usage, monitor costs, view error logs, and analyze learner interaction patterns with detailed charts and reports.', 'slidemind' ); ?>
				</p>
				<?php if ( $upgrade_url ) : ?>
					<a href="<?php echo esc_url( $upgrade_url ); ?>" class="sm-btn sm-btn-primary sm-teaser__cta-btn">
						<?php esc_html_e( 'Upgrade to Pro', 'slidemind' ); ?>
						<span class="dashicons dashicons-arrow-right-alt2"></span>
					</a>
				<?php endif; ?>
				<p class="sm-teaser__sub">
					<?php esc_html_e( 'Available with the Pro plan.', 'slidemind' ); ?>
				</p>
			</div>
		</div>

		<!-- Blurred preview -->
		<div class="sm-teaser__preview" aria-hidden="true">

			<!-- Demo KPI cards -->
			<div class="sm-dashboard-stats">
				<div class="sm-dashboard-stat-card">
					<div class="sm-dashboard-stat-icon sm-dashboard-stat-icon--info">
						<span class="dashicons dashicons-chart-bar"></span>
					</div>
					<div class="sm-dashboard-stat-body">
						<div class="sm-dashboard-stat-value">247</div>
						<div class="sm-dashboard-stat-label"><?php esc_html_e( 'API Calls', 'slidemind' ); ?></div>
						<div class="sm-dashboard-stat-sub"><?php esc_html_e( 'Last 30 days', 'slidemind' ); ?></div>
					</div>
				</div>
				<div class="sm-dashboard-stat-card">
					<div class="sm-dashboard-stat-icon sm-dashboard-stat-icon--warning">
						<span class="dashicons dashicons-database"></span>
					</div>
					<div class="sm-dashboard-stat-body">
						<div class="sm-dashboard-stat-value">38,420</div>
						<div class="sm-dashboard-stat-label"><?php esc_html_e( 'Tokens Used', 'slidemind' ); ?></div>
						<div class="sm-dashboard-stat-sub"><?php esc_html_e( 'Last 30 days', 'slidemind' ); ?></div>
					</div>
				</div>
				<div class="sm-dashboard-stat-card">
					<div class="sm-dashboard-stat-icon sm-dashboard-stat-icon--success">
						<span class="dashicons dashicons-money-alt"></span>
					</div>
					<div class="sm-dashboard-stat-body">
						<div class="sm-dashboard-stat-value">$1.84</div>
						<div class="sm-dashboard-stat-label"><?php esc_html_e( 'Estimated Cost', 'slidemind' ); ?></div>
						<div class="sm-dashboard-stat-sub"><?php esc_html_e( 'Last 30 days', 'slidemind' ); ?></div>
					</div>
				</div>
				<div class="sm-dashboard-stat-card">
					<div class="sm-dashboard-stat-icon sm-dashboard-stat-icon--primary">
						<span class="dashicons dashicons-groups"></span>
					</div>
					<div class="sm-dashboard-stat-body">
						<div class="sm-dashboard-stat-value">18</div>
						<div class="sm-dashboard-stat-label"><?php esc_html_e( 'Active Learners', 'slidemind' ); ?></div>
						<div class="sm-dashboard-stat-sub"><?php esc_html_e( 'Last 30 days', 'slidemind' ); ?></div>
					</div>
				</div>
				<div class="sm-dashboard-stat-card">
					<div class="sm-dashboard-stat-icon sm-dashboard-stat-icon--error">
						<span class="dashicons dashicons-warning"></span>
					</div>
					<div class="sm-dashboard-stat-body">
						<div class="sm-dashboard-stat-value">2</div>
						<div class="sm-dashboard-stat-label"><?php esc_html_e( 'Errors', 'slidemind' ); ?></div>
						<div class="sm-dashboard-stat-sub"><?php esc_html_e( 'Last 30 days', 'slidemind' ); ?></div>
					</div>
				</div>
			</div>

			<!-- Demo chart area -->
			<div class="sm-card">
				<div class="sm-card-header">
					<h2 class="sm-card-title"><?php esc_html_e( 'Usage Over Time', 'slidemind' ); ?></h2>
				</div>
				<div style="height: 200px; background: linear-gradient(180deg, var(--sm-primary-light) 0%, #fff 100%); border-radius: 6px; display: flex; align-items: flex-end; padding: 0 12px; gap: 6px;">
					<?php foreach ( array( 30, 45, 35, 60, 50, 70, 55, 80, 65, 45, 75, 90 ) as $h ) : ?>
						<div style="flex: 1; background: var(--sm-primary); opacity: 0.4; border-radius: 4px 4px 0 0; height: <?php echo (int) $h; ?>%;"></div>
					<?php endforeach; ?>
				</div>
			</div>

			<!-- Demo log table -->
			<div class="sm-card">
				<div class="sm-card-header">
					<h2 class="sm-card-title"><?php esc_html_e( 'Recent Calls', 'slidemind' ); ?></h2>
				</div>
				<table class="sm-table sm-log-table">
					<thead>
						<tr>
							<th><?php esc_html_e( 'Date', 'slidemind' ); ?></th>
							<th><?php esc_html_e( 'Configuration', 'slidemind' ); ?></th>
							<th><?php esc_html_e( 'Provider', 'slidemind' ); ?></th>
							<th><?php esc_html_e( 'Tokens', 'slidemind' ); ?></th>
							<th><?php esc_html_e( 'Cost', 'slidemind' ); ?></th>
							<th><?php esc_html_e( 'Status', 'slidemind' ); ?></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>2026-03-15 14:32</td>
							<td>Onboarding IA</td>
							<td><code>openrouter</code></td>
							<td>1,240</td>
							<td>$0.002</td>
							<td><span class="sm-badge sm-badge-success"><?php esc_html_e( 'OK', 'slidemind' ); ?></span></td>
						</tr>
						<tr>
							<td>2026-03-15 14:28</td>
							<td>Quiz adaptatif</td>
							<td><code>openai</code></td>
							<td>890</td>
							<td>$0.004</td>
							<td><span class="sm-badge sm-badge-success"><?php esc_html_e( 'OK', 'slidemind' ); ?></span></td>
						</tr>
						<tr>
							<td>2026-03-15 13:55</td>
							<td>Sandbox</td>
							<td><code>anthropic</code></td>
							<td>2,100</td>
							<td>$0.008</td>
							<td><span class="sm-badge sm-badge-success"><?php esc_html_e( 'OK', 'slidemind' ); ?></span></td>
						</tr>
						<tr>
							<td>2026-03-15 12:10</td>
							<td>Formation compliance</td>
							<td><code>openrouter</code></td>
							<td>650</td>
							<td>$0.001</td>
							<td><span class="sm-badge sm-badge-error"><?php esc_html_e( 'Error', 'slidemind' ); ?></span></td>
						</tr>
						<tr>
							<td>2026-03-15 11:42</td>
							<td>Onboarding IA</td>
							<td><code>openrouter</code></td>
							<td>1,580</td>
							<td>$0.003</td>
							<td><span class="sm-badge sm-badge-success"><?php esc_html_e( 'OK', 'slidemind' ); ?></span></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
