<?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é', 'php-compatibility-checker-by-volade' );
    $hero_title   = __( 'Parrainage', 'php-compatibility-checker-by-volade' );
    $hero_lead    = __( 'Partagez Volade avec vos amis et gagnez de l\'XP à chaque inscription.', 'php-compatibility-checker-by-volade' );
    $hero_variant = 'indigo';
    $hero_orbs    = array( '🔗', '🤝', '⭐' );
    include dirname( __FILE__ ) . '/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é !', 'php-compatibility-checker-by-volade' ); ?>" data-label="<?php echo esc_attr__( 'Copier', 'php-compatibility-checker-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>
