<?php
/**
 * @license GPL-2.0-or-later
 */
defined( 'ABSPATH' ) || exit;
?>
<div class="volade-wrap volade-referrals-page">
	<?php
	$stats = $this->get_referral_stats( $user['id'] );

	$hero_kicker  = __( 'Communauté', 'core-version-switcher-by-volade' );
	$hero_title   = __( 'Parrainage', 'core-version-switcher-by-volade' );
	$hero_lead    = __( 'Partagez Volade avec vos amis et gagnez de l\'XP à chaque inscription.', 'core-version-switcher-by-volade' );
	$hero_variant = 'indigo';
	$hero_orbs    = array( '🔗', '🤝', '⭐' );
	require __DIR__ . '/partials/page-hero.php';
	?>

	<div class="volade-dash-grid">
		<div class="volade-stat-card">
			<div class="volade-stat-icon volade-stat-icon--blue">👁</div>
			<span class="volade-stat-number"><?php echo (int) $stats['total_clicks']; ?></span>
			<span class="volade-stat-label"><?php $this->_e( 'Clics' ); ?></span>
		</div>
		<div class="volade-stat-card">
			<div class="volade-stat-icon volade-stat-icon--green">✔</div>
			<span class="volade-stat-number"><?php echo (int) $stats['total_converted']; ?></span>
			<span class="volade-stat-label"><?php $this->_e( 'Conversions' ); ?></span>
		</div>
		<div class="volade-stat-card">
			<div class="volade-stat-icon volade-stat-icon--amber">📈</div>
			<span class="volade-stat-number"><?php echo esc_html( $stats['conversion_rate'] ); ?>%</span>
			<span class="volade-stat-label"><?php $this->_e( 'Taux' ); ?></span>
		</div>
		<div class="volade-stat-card">
			<div class="volade-stat-icon volade-stat-icon--indigo">⭐</div>
			<span class="volade-stat-number">+<?php echo (int) $stats['xp_earned']; ?></span>
			<span class="volade-stat-label"><?php $this->_e( 'XP gagnés' ); ?></span>
		</div>
	</div>

	<div class="volade-card">
		<div class="volade-card-header">
			<span class="volade-card-icon-md">🔗</span>
			<h2><?php $this->_e( 'Votre lien de parrainage' ); ?></h2>
		</div>
		<div class="volade-ref-link-box">
			<input type="text" id="volade-referral-link" value="<?php echo esc_url( $this->get_referral_link( $user['id'] ) ); ?>" readonly />
			<button type="button" class="volade-btn volade-btn-primary volade-copy-ref-btn" data-copied="<?php echo esc_attr__( 'Copié !', 'core-version-switcher-by-volade' ); ?>" data-label="<?php echo esc_attr__( 'Copier', 'core-version-switcher-by-volade' ); ?>">
				<?php $this->_e( 'Copier' ); ?>
			</button>
		</div>
		<p class="volade-ref-hint">ℹ️ <?php $this->_e( 'Partagez ce lien avec vos amis. Quand ils s\'inscrivent, vous gagnez tous les deux de l\'XP !' ); ?></p>
	</div>
</div>

<script>
jQuery(function($) {
	$('.volade-copy-ref-btn').on('click', function() {
		var $btn = $(this);
		var input = document.getElementById('volade-referral-link');
		input.select();
		navigator.clipboard.writeText(input.value);
		$btn.text($btn.data('copied'));
		setTimeout(function() { $btn.text($btn.data('label')); }, 1500);
	});
});
</script>
