<?php
/**
 * @license GPL-2.0-or-later
 */
defined( 'ABSPATH' ) || exit;
?>
<div class="volade-wrap volade-premium-page">
    <?php
    $tier       = $this->get_tier( $user['id'] );
    $is_premium = $this->is_premium( $user['id'] );
    $site_limit = $this->get_site_limit( $user['id'] );
    $sites_used = $this->get_active_sites_count( $user['id'] );
    $all_tiers  = $this->get_all_tiers();

    $hero_kicker  = __( 'Formules', 'php-compatibility-checker-by-volade' );
    $hero_title   = __( 'V+ Premium', 'php-compatibility-checker-by-volade' );
    $hero_lead    = $is_premium
        ? __( 'Premium actif sur tout l\'écosystème Volade — fonctionnalités avancées dans chaque plugin.', 'php-compatibility-checker-by-volade' )
        : __( 'Débloquez toutes les fonctionnalités premium sur l\'ensemble des plugins Volade, sans module payant par extension.', 'php-compatibility-checker-by-volade' );
    $hero_variant = 'indigo';
    $hero_orbs    = array( '⭐', '✨', '🚀' );

    ob_start();
    if ( $is_premium && $this->get_portal_url() ) :
        ?>
        <a href="<?php echo esc_url( $this->get_portal_url() ); ?>" class="volade-btn volade-btn-secondary" target="_blank" rel="noopener">
            <?php $this->_e( 'Gérer mon abonnement' ); ?>
        </a>
        <?php
    elseif ( ! $is_premium ) :
        ?>
        <a href="#volade-tier-cards" class="volade-btn volade-btn-primary">
            <?php $this->_e( 'Voir les offres' ); ?>
        </a>
        <?php
    endif;
    $hero_actions_html = ob_get_clean();
    include dirname( __FILE__ ) . '/partials/page-hero.php';
    ?>

    <div class="volade-plan-banner">
        <div>
            <h3>
                <?php if ( $is_premium ) : ?>
                    &#x2B50; <?php echo esc_html( $this->get_tier_label( $tier ) ); ?>
                <?php else : ?>
                    &#x26A1; <?php $this->_e( 'Formule gratuite' ); ?>
                <?php endif; ?>
            </h3>
            <p>
                <?php echo (int) $sites_used; ?> / <?php echo $site_limit === -1 ? '&#x221E;' : (int) $site_limit; ?> <?php $this->_e( 'sites utilisés' ); ?>
                <?php if ( $is_premium && $this->get_portal_url() ) : ?>
                    &mdash; <a href="<?php echo esc_url( $this->get_portal_url() ); ?>"><?php $this->_e( 'Gérer' ); ?></a>
                <?php endif; ?>
            </p>
        </div>
        <?php if ( ! $is_premium ) : ?>
            <span class="volade-plan-pill">
                <?php $this->_e( 'Premium = toutes les fonctionnalités + premium sur tout l\'écosystème' ); ?>
            </span>
        <?php endif; ?>
    </div>

    <div class="volade-billing-toggle">
        <button type="button" class="volade-billing-btn active" data-period="monthly"><?php $this->_e( 'Mensuel' ); ?></button>
        <button type="button" class="volade-billing-btn" data-period="yearly"><?php $this->_e( 'Annuel' ); ?> <span class="volade-billing-save"><?php $this->_e( '2 mois offerts' ); ?></span></button>
    </div>

    <div class="volade-tier-cards" id="volade-tier-cards">
        <?php foreach ( $all_tiers as $key => $t ) : ?>
            <?php if ( $key === 'free' ) continue; ?>
            <div class="volade-tier-card <?php echo $tier === $key ? 'volade-tier-current' : ''; ?>" data-tier="<?php echo esc_attr( $key ); ?>">
                <h3><?php echo esc_html( $this->get_tier_label( $key ) ); ?></h3>
                <div class="volade-tier-price">
                    <span class="price-amount" data-monthly="<?php echo esc_attr( $this->get_tier_price_display( $key, 'monthly' ) ); ?>" data-yearly="<?php echo esc_attr( $this->get_tier_price_display( $key, 'yearly' ) ); ?>">
                        <?php echo esc_html( $this->get_tier_price_display( $key, 'monthly' ) ); ?>
                    </span>
                    <span class="price-period"><?php esc_html_e( '/mois', 'php-compatibility-checker-by-volade' ); ?></span>
                </div>
                <ul class="volade-tier-features">
                    <li><?php echo $t['site_limit'] === -1 ? '&#x221E;' : (int) $t['site_limit']; ?> <?php $this->_e( 'sites WordPress' ); ?></li>
                    <li><?php $this->_e( 'Fonctionnalités premium dans chaque plugin Volade' ); ?></li>
                    <li><?php $this->_e( 'Premium débloqué sur tout l\'écosystème' ); ?></li>
                    <li><?php $this->_e( 'Pas de modules payants par plugin' ); ?></li>
                </ul>
                <?php if ( $tier !== $key ) : ?>
                    <button class="volade-tier-cta primary volade-checkout-btn" data-tier="<?php echo esc_attr( $key ); ?>" data-label="<?php echo esc_attr__( 'Passer à V+', 'php-compatibility-checker-by-volade' ); ?>">&#x2B50; <?php $this->_e( 'Passer à V+' ); ?></button>
                <?php else : ?>
                    <span class="volade-tier-cta secondary" style="display:block;text-align:center;"><?php $this->_e( 'Formule actuelle' ); ?></span>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<script>
jQuery(function($) {
    var period = 'monthly';
    var i18n = (window.voladeSDK && voladeSDK.i18n) || {};

    $('.volade-billing-btn').on('click', function() {
        period = $(this).data('period');
        $('.volade-billing-btn').removeClass('active');
        $(this).addClass('active');
        $('.price-amount').each(function() {
            var val = $(this).data(period);
            $(this).text(val);
        });
        $('.price-period').text(period === 'yearly' ? '/an' : '/mois');
    });

    $('.volade-checkout-btn').on('click', function() {
        var tier = $(this).data('tier');
        var label = $(this).data('label') || 'Passer à V+';
        var btn = $(this).prop('disabled', true).text(i18n.processing || 'Processing…');
        $.post(voladeSDK.ajax_url, {
            action: 'volade_checkout',
            nonce: voladeSDK.nonce,
            tier: tier,
            period: period
        }, function(res) {
            if (res.success && res.data.url) {
                window.location.href = res.data.url;
            } else {
                alert(res.data || i18n.error_generic || 'An error occurred.');
                btn.prop('disabled', false).html('&#x2B50; ' + label);
            }
        });
    });
});
</script>
