{% extends 'base.html.twig' %}
{% block title %}{{ player.username }} — Profil joueur — CSI World{% endblock %}

{% block stylesheets %}
<style>
  .profile-wrap {
    flex: 1;
    max-width: 820px;
    margin: 0 auto;
    padding: 36px 16px;
    width: 100%;
  }
  .profile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 16px;
  }

  /* ── Identity card ── */
  .profile-identity {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
    flex-shrink: 0;
  }
  .profile-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg);
    border: 3px solid var(--border);
    flex-shrink: 0;
  }
  .profile-identity-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .profile-identity-text h1 { margin: 0; font-size: 1.5rem; color: var(--text); }
  .profile-since { color: var(--muted); font-size: .83rem; }
  .profile-description {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.55;
    margin: 16px 0 0;
    white-space: pre-line;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }

  /* ── Stats card ── */
  .profile-stats { display: flex; gap: 32px; }
  .profile-stat { display: flex; flex-direction: column; }
  .profile-stat-val { font-size: 1.6rem; font-weight: 700; color: var(--accent); line-height: 1; }
  .profile-stat-label { font-size: .75rem; color: var(--muted); margin-top: 2px; }

  /* ── Achievements ── */
  .game-section { margin-bottom: 32px; }
  .game-title {
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .game-title img { height: 100px; width: auto; object-fit: contain; border: 2px solid var(--text); border-radius: 6px; padding: 1px; }
  .game-title::after { content: ''; width: 100%; height: 1px; background: var(--border); }
  .achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
  }
  .achievement-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .15s;
  }
  .achievement-card.unlocked { border-color: rgba(240,136,62,.4); }
  .achievement-card.locked { opacity: .45; filter: grayscale(1); }
  .achievement-name { font-size: .9rem; font-weight: 600; color: var(--text); }
  .achievement-desc { font-size: .78rem; color: var(--muted); line-height: 1.4; }
  .achievement-date { font-size: .72rem; color: var(--accent); margin-top: 4px; }
  .empty-achievements { color: var(--muted); font-size: .88rem; }
</style>
{% endblock %}

{% block body %}
<main class="profile-wrap">
  {% set totalUnlocked = 0 %}
  {% set totalCount = 0 %}
  {% set totalPoints = 0 %}
  {% for gameId, entries in byGame %}
    {% for e in entries %}
      {% set totalCount = totalCount + 1 %}
      {% if e.unlockedAt %}
        {% set totalUnlocked = totalUnlocked + 1 %}
        {% set totalPoints = totalPoints + e.achievement.pointsValue %}
      {% endif %}
    {% endfor %}
  {% endfor %}

  {% set profileTier = subscriber_tier(player) %}
  <div class="profile-card">
    <div class="profile-identity">
      {% if player.avatar %}
        <img class="profile-avatar {% if profileTier %}premium-avatar tier-{{ profileTier }}{% endif %}" src="{{ asset('uploads/avatars/' ~ player.avatar.content) }}" alt="{{ player.username }}">
      {% else %}
        <div class="profile-avatar-placeholder {% if profileTier %}premium-avatar tier-{{ profileTier }}{% endif %}"></div>
      {% endif %}
      <div class="profile-identity-text">
        <h1 class="{% if profileTier %}premium-name tier-{{ profileTier }}{% endif %}" style="display:inline-flex;align-items:center;gap:6px;margin:0">
          {{ player.username }}
          {% if profileTier %}
            <img src="{{ asset('images/premium_tier_' ~ profileTier ~ '.png') }}" class="premium-badge-icon" alt="Abonné" title="Abonné Premium">
          {% endif %}
        </h1>
        {% if player.playerBadges|length > 0 %}
          <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:8px">
            {% for pb in player.playerBadges %}
              <span class="player-badge">
                <img src="{{ asset(pb.badge.icon) }}" alt="" style="width:32px;height:32px;image-rendering:pixelated">
                {{ pb.badge.displayName }}
              </span>
            {% endfor %}
          </div>
        {% endif %}
        <span class="profile-since">Membre depuis {{ player.createdAt|date('d/m/Y') }}</span>
      </div>
    </div>
    {% if player.description %}
      <p class="profile-description">{{ player.description }}</p>
    {% endif %}
  </div>

  <div class="profile-card">
    <div class="profile-stats">
      <div class="profile-stat">
        <span class="profile-stat-val">{{ totalUnlocked }}</span>
        <span class="profile-stat-label">succès débloqué{{ totalUnlocked != 1 ? 's' }}</span>
      </div>
      <div class="profile-stat">
        <span class="profile-stat-val">{{ totalPoints }} G</span>
        <span class="profile-stat-label">points de jeu</span>
      </div>
      {% if totalCount > 0 %}
      <div class="profile-stat">
        <span class="profile-stat-val">{{ ((totalUnlocked / totalCount) * 100)|round }}%</span>
        <span class="profile-stat-label">complétion</span>
      </div>
      {% endif %}
    </div>
  </div>

  {% set gameBanners = {
    0: 'CSI_Banner.png',
    1: 'CSII_Banner.png',
    2: 'CSR_Banner.png',
    3: 'Narval_Banner.png'
  } %}
  {% set gameLabels = {0: 'CSI Forever', 1: 'CSII Forever', 2: 'CSI Rogue', 3: 'Narval Souls'} %}

  {% if byGame is empty %}
    <p class="empty-achievements">Aucun succès disponible pour le moment.</p>
  {% else %}
    {% for gameId, entries in byGame %}
    <div class="game-section">
      <div class="game-title">
        {% if gameBanners[gameId] is defined %}
          <img src="{{ asset('images/' ~ gameBanners[gameId]) }}"
               alt="{{ gameLabels[gameId] ?? ('Jeu ' ~ gameId) }}">
        {% else %}
          {{ gameLabels[gameId] ?? ('Jeu ' ~ gameId) }}
        {% endif %}
      </div>
      <div class="achievement-grid">
        {% for e in entries %}
        <div class="achievement-card {{ e.unlockedAt ? 'unlocked' : 'locked' }}">
          <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px">
            {% if e.achievement.icon %}
              <img src="{{ path('api_icon', {gameId: e.achievement.gameId, id: e.achievement.icon}) }}"
                   style="width:24px;height:24px;image-rendering:pixelated;flex-shrink:0{% if not e.unlockedAt %};filter:grayscale(1){% endif %}" alt="">
            {% endif %}
            <div class="achievement-name">{{ e.achievement.name }}</div>
          </div>
          {% if e.achievement.description %}
            <div class="achievement-desc">{{ e.achievement.description }}</div>
          {% endif %}
          {% if e.unlockedAt %}
            <div class="achievement-date">{{ e.unlockedAt|date('d/m/Y à H:i') }}</div>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  {% endif %}
</main>
{% endblock %}