{% extends "webapp/base.html" %}
{% block title %}{{ t('rewards') | default('Rewards') }} — {{ t('brand') }}{% endblock %}

{% block content %}
<div class="section" style="padding-top:2rem">

  <!-- Hero -->
  <div class="scroll-reveal" style="text-align:center;margin-bottom:2.5rem">
    <h1 class="hero-headline">
      <span class="line neon-text">{{ t('rewards') | default('REWARDS') }}</span>
    </h1>
    <p style="color:var(--text-dim);font-size:1.05rem;margin-top:0.75rem;max-width:600px;margin-left:auto;margin-right:auto">
      {{ t('rewards_desc') | default('Earn XP, coins, and exclusive rewards by competing in tournaments and climbing the leaderboard.') }}
    </p>
  </div>

  <!-- XP / Level System -->
  {% if user %}
  <div class="scroll-reveal" style="margin-bottom:2rem">
    <div class="card" style="max-width:700px;margin:0 auto">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem">
        <div class="reward-level">
          LEVEL <span class="level-num">{{ user.level | default(1) }}</span>
        </div>
        <div style="text-align:right;font-size:0.82rem">
          <span style="color:var(--text-dim)">{{ user.xp | default(4820) }} / {{ (user.level + 1) * 1000 if user.level else 5000 }} XP</span>
        </div>
      </div>
      <div class="xp-bar">
        <div class="xp-bar-fill" style="width:{{ user.xp_progress | default(96) }}%"></div>
      </div>
    </div>
  </div>

  <!-- Wallet Balances -->
  <div class="scroll-reveal" style="margin-bottom:2rem">
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;max-width:700px;margin:0 auto">
      <div class="card" style="text-align:center">
        <div class="stat-num" style="color:var(--neon)">${{ entry_balance }}</div>
        <div class="stat-label">{{ t('deposit_wallet') | default('Deposit Wallet') }}</div>
      </div>
      <div class="card" style="text-align:center">
        <div class="stat-num" style="color:var(--amber)">${{ payout_balance | default(0) }}</div>
        <div class="stat-label">{{ t('payout_wallet') | default('Payout Wallet') }}</div>
      </div>
      <div class="card" style="text-align:center">
        <div class="stat-num" style="color:var(--purple)">{{ user.xp | default(4820) }}</div>
        <div class="stat-label">{{ t('total_xp') | default('Total XP') }}</div>
      </div>
    </div>
  </div>
  {% else %}
  <div class="empty-state scroll-reveal">
    <div class="empty-icon">🎁</div>
    <h3 class="empty-title">{{ t('login_required') | default('Login to View Rewards') }}</h3>
    <p class="empty-desc">{{ t('login_to_see_rewards') | default('Log in to see your rewards, XP progress, and wallet balances.') }}</p>
    <a href="{{ url_for('auth.login') }}" class="btn btn-primary">{{ t('login') }} →</a>
  </div>
  {% endif %}

  <!-- Rewards Store -->
  <div class="section-header" style="margin-bottom:1.5rem">
    <h2>{{ t('rewards_store') | default('REWARDS STORE') }}</h2>
  </div>
  <div class="prize-grid">
    <div class="reward-card scroll-reveal delay-1" style="min-width:180px">
      <div class="reward-level">LEVEL 42</div>
      <div class="xp-bar">
        <div class="xp-bar-fill" style="width:96%"></div>
      </div>
      <div style="font-size:0.82rem;color:var(--text-dim);margin-top:0.5rem">4,820 / 5,000 XP</div>
      <div style="font-size:0.8rem;color:var(--amber);margin-top:0.5rem">⚡ Next: <strong>+50 XP</strong> bonus</div>
    </div>

    <div class="reward-card scroll-reveal delay-2">
      <div style="font-size:2rem;margin-bottom:0.5rem">💎</div>
      <h3 style="font-family:'Orbitron';font-size:1rem;color:var(--blue);margin-bottom:0.4rem">{{ t('diamond_pack') | default('DIAMOND PACK') }}</h3>
      <div style="font-size:0.8rem;color:var(--text-dim);margin-bottom:0.75rem">{{ t('diamond_desc') | default('5,000 coins + exclusive skin') }}</div>
      <span class="badge badge-blue">2,500 {{ t('coins') | default('Coins') }}</span>
    </div>

    <div class="reward-card scroll-reveal delay-3">
      <div style="font-size:2rem;margin-bottom:0.5rem">🎟️</div>
      <h3 style="font-family:'Orbitron';font-size:1rem;color:var(--neon);margin-bottom:0.4rem">{{ t('tournament_pass') | default('TOURNAMENT PASS') }}</h3>
      <div style="font-size:0.8rem;color:var(--text-dim);margin-bottom:0.75rem">{{ t('pass_desc') | default('10 premium tournament entries') }}</div>
      <span class="badge badge-neon">500 {{ t('coins') | default('Coins') }}</span>
    </div>

    <div class="reward-card scroll-reveal delay-4">
      <div style="font-size:2rem;margin-bottom:0.5rem">🏆</div>
      <h3 style="font-family:'Orbitron';font-size:1rem;color:var(--amber);margin-bottom:0.4rem">{{ t('champion_skin') | default('CHAMPION SKIN') }}</h3>
      <div style="font-size:0.8rem;color:var(--text-dim);margin-bottom:0.75rem">{{ t('skin_desc') | default('Exclusive tournament winner skin') }}</div>
      <span style="font-size:0.8rem;color:#ffd700">1,200 {{ t('coins') | default('Coins') }}</span>
    </div>

    <div class="reward-card scroll-reveal delay-5">
      <div style="font-size:2rem;margin-bottom:0.5rem">⚡</div>
      <h3 style="font-family:'Orbitron';font-size:1rem;color:var(--pink);margin-bottom:0.4rem">{{ t('xp_boost') | default('XP BOOST') }}</h3>
      <div style="font-size:0.8rem;color:var(--text-dim);margin-bottom:0.75rem">{{ t('boost_desc') | default('2x XP for 24 hours') }}</div>
      <span class="badge badge-pink">800 {{ t('coins') | default('Coins') }}</span>
    </div>
  </div>

  <!-- Achievements -->
  <div class="section-header" style="margin-top:2rem;margin-bottom:1.5rem">
    <h2>{{ t('achievements') | default('ACHIEVEMENTS') }}</h2>
  </div>
  <div style="display:flex;flex-wrap:wrap;gap:1rem;justify-content:center">
    <div class="achievement unlocked scroll-reveal delay-1" style="flex:1;min-width:200px;max-width:240px">
      <div style="font-size:1.75rem;margin-bottom:0.4rem">🏆</div>
      <div style="font-family:'Orbitron';font-weight:700;font-size:0.85rem">{{ t('tournament_winner') | default('Tournament Winner') }}</div>
      <div style="font-size:0.7rem;color:var(--text-dim);margin-top:0.2rem">{{ t('first_tournament_win') | default('Win your first tournament') }}</div>
    </div>
    <div class="achievement unlocked scroll-reveal delay-2" style="flex:1;min-width:200px;max-width:240px">
      <div style="font-size:1.75rem;margin-bottom:0.4rem">🔥</div>
      <div style="font-family:'Orbitron';font-weight:700;font-size:0.85rem">{{ t('win_streak') | default('10 Win Streak') }}</div>
      <div style="font-size:0.7rem;color:var(--text-dim);margin-top:0.2rem">{{ t('streak_desc') | default('Win 10 matches in a row') }}</div>
    </div>
    <div class="achievement scroll-reveal delay-3" style="flex:1;min-width:200px;max-width:240px">
      <div style="font-size:1.75rem;margin-bottom:0.4rem;opacity:0.3">⚡</div>
      <div style="font-family:'Orbitron';font-weight:700;font-size:0.85rem;color:var(--text-muted)">{{ t('speed_demon') | default('Speed Demon') }}</div>
      <div style="font-size:0.7rem;color:var(--text-muted);margin-top:0.2rem">{{ t('speed_desc') | default('Win 5 tournaments in one day') }}</div>
    </div>
    <div class="achievement unlocked scroll-reveal delay-4" style="flex:1;min-width:200px;max-width:240px">
      <div style="font-size:1.75rem;margin-bottom:0.4rem">⭐</div>
      <div style="font-family:'Orbitron';font-weight:700;font-size:0.85rem">{{ t('rising_star') | default('Rising Star') }}</div>
      <div style="font-size:0.7rem;color:var(--text-dim);margin-top:0.2rem">{{ t('rising_desc') | default('Reach level 10') }}</div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const bar = document.querySelector('.xp-bar-fill');
    if (bar) {
      const width = bar.style.width;
      bar.style.width = '0%';
      setTimeout(() => { bar.style.width = width; }, 300);
    }
  });
</script>
{% endblock %}