{% extends 'Game/index.html.twig' %}

{% block title %} - Battle Report{% endblock %}

{% block metas %}
  {%- set shareUrl = url('MineSeekerBundle_battle_share', { uuid: game.uuid }) | replace({'http://': 'https://'}) -%}
  {%- set _ogImage = url('MineSeekerBundle_og_battle', { uuid: game.uuid }) | replace({'http://': 'https://'}) -%}
  <meta property="og:url" content="{{ shareUrl }}"/>
  <meta property="og:type" content="article"/>
  <meta property="og:site_name" content="MineSeeker"/>
  <meta property="og:locale" content="en_US"/>
  <meta property="og:title" content="{{ ogTitle }}"/>
  <meta property="og:description" content="{{ ogDesc }}"/>
  <meta property="og:image" content="{{ _ogImage }}"/>
  <meta property="og:image:width" content="1600"/>
  <meta property="og:image:height" content="627"/>
  <meta property="og:image:alt" content="{{ ogTitle }}"/>
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:site" content="@MineSeeker"/>
  <meta name="twitter:title" content="{{ ogTitle }}"/>
  <meta name="twitter:description" content="{{ ogDesc }}"/>
  <meta name="twitter:image" content="{{ _ogImage }}"/>
  <meta name="twitter:image:alt" content="{{ ogTitle }}"/>
{% endblock %}

{% block body %}
  <div class="bshare-page">
    <div class="bshare-card">
      <div class="bshare-card__eyebrow">
        <i class="fas fa-crosshairs"></i> Battle Report
      </div>
      <div class="bshare-vs">
        <div class="bshare-player bshare-player--red">
          <div class="bshare-avatar bshare-avatar--red" style="position: relative;">
            {% if redAvatar %}
              <img src="{{ redAvatar|imagine_filter('avatar_thumb') }}"
                   alt="{{ redName }}"
                   class="bshare-avatar__img">
            {% else %}
              {{ redName|slice(0,2)|upper }}
            {% endif %}
            {% if redBonusPoints > blueBonusPoints %}
              <div style="position: absolute; bottom: -6px; right: -6px; background: #ffd700; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 0 0 2px rgba(7, 9, 13, 1); border: 2px solid rgba(0,0,0,0.5); z-index: 10;">
                <i class="fas fa-star" style="color: #000; font-size: 14px;"></i>
              </div>
            {% endif %}
          </div>
          <span class="bshare-player__name">{{ redName }}</span>
          <span class="bshare-player__side">Red</span>
        </div>
        <div class="bshare-vs__center">
          {% if redPts is not null and bluePts is not null %}
            <div class="bshare-score">
              <span class="bshare-score__red">{{ redPts }}</span>
              <span class="bshare-score__sep">:</span>
              <span class="bshare-score__blue">{{ bluePts }}</span>
            </div>
          {% else %}
            <div class="bshare-score bshare-score--na">— : —</div>
          {% endif %}
          <div style="display: flex; justify-content: center; gap: 0; align-items: center; margin-bottom: 8px;">
            <span style="font: 700 13px 'Rajdhani', sans-serif; color: #f67d52; display: flex; align-items: center; gap: 4px;">
              <i class="fas fa-star" style="font-size: 11px;"></i> {{ (redBonusPoints ?? 0)|number_format(1, '.', '') }}
            </span>
            <span style="font: 700 13px 'Rajdhani', sans-serif; color: rgba(255,255,255,0.3); margin: 0 8px;">:</span>
            <span style="font: 700 13px 'Rajdhani', sans-serif; color: #95cff5; display: flex; align-items: center; gap: 4px;">
              {{ (blueBonusPoints ?? 0)|number_format(1, '.', '') }} <i class="fas fa-star" style="font-size: 11px;"></i>
            </span>
          </div>
          <div class="bshare-vs__label">VS</div>
          {% if resign == 'red' %}
            <div class="bshare-badge bshare-badge--blue">
              <i class="fas fa-trophy"></i> Blue wins
            </div>
          {% elseif resign == 'blue' %}
            <div class="bshare-badge bshare-badge--red">
              <i class="fas fa-trophy"></i> Red wins
            </div>
          {% elseif redPts is not null and bluePts is not null %}
            {% if redPts > bluePts %}
              <div class="bshare-badge bshare-badge--red">
                <i class="fas fa-trophy"></i> Red wins
              </div>
            {% elseif bluePts > redPts %}
              <div class="bshare-badge bshare-badge--blue">
                <i class="fas fa-trophy"></i> Blue wins
              </div>
            {% else %}
              <div class="bshare-badge bshare-badge--draw">
                <i class="fas fa-minus"></i> Draw
              </div>
            {% endif %}
          {% endif %}
        </div>
        <div class="bshare-player bshare-player--blue">
          <div class="bshare-avatar bshare-avatar--blue" style="position: relative;">
            {% if blueAvatar %}
              <img src="{{ blueAvatar|imagine_filter('avatar_thumb') }}"
                   alt="{{ blueName }}"
                   class="bshare-avatar__img">
            {% else %}
              {{ blueName|slice(0,2)|upper }}
            {% endif %}
            {% if blueBonusPoints > redBonusPoints %}
              <div style="position: absolute; bottom: -6px; right: -6px; background: #ffd700; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 0 0 2px rgba(7, 9, 13, 1); border: 2px solid rgba(0,0,0,0.5); z-index: 10;">
                <i class="fas fa-star" style="color: #000; font-size: 14px;"></i>
              </div>
            {% endif %}
          </div>
          <span class="bshare-player__name">{{ blueName }}</span>
          <span class="bshare-player__side">Blue</span>
        </div>
      </div>
      <div class="bshare-details">
        {% if resign %}
          <div class="bshare-detail">
            <i class="fas fa-flag"></i>
            <span>{{ resign|capitalize }} resigned</span>
          </div>
        {% endif %}
        {% if game.redExplodedBomb %}
          <div class="bshare-detail bshare-detail--bomb">
            <i class="fas fa-bomb"></i>
            <span>{{ redName }} hit a mine</span>
          </div>
        {% endif %}
        {% if game.blueExplodedBomb %}
          <div class="bshare-detail bshare-detail--bomb">
            <i class="fas fa-bomb"></i>
            <span>{{ blueName }} hit a mine</span>
          </div>
        {% endif %}
        {% if game.updated %}
          <div class="bshare-detail">
            <i class="fas fa-calendar"></i>
            <span>{{ game.updated|date('Y-m-d H:i') }}</span>
          </div>
        {% endif %}
      </div>

      {# Bonus Stats Section #}
      {% set hasRedStats = redBonusStats is not empty and (redBonusStats.blindHits or redBonusStats.chainBest or redBonusStats.edgeMines or redBonusStats.lastMineHits or redBonusStats.biggestReveal) %}
      {% set hasBlueStats = blueBonusStats is not empty and (blueBonusStats.blindHits or blueBonusStats.chainBest or blueBonusStats.edgeMines or blueBonusStats.lastMineHits or blueBonusStats.biggestReveal) %}
      {% if redBonusPoints > 0 or blueBonusPoints > 0 or hasRedStats or hasBlueStats %}
      <div class="bshare-bonus">
        <div class="bshare-bonus__title">
          <i class="fas fa-star"></i> Bonus Statistics
        </div>
        <div class="bshare-bonus__grid">
          {# Red Bonus #}
          <div class="bshare-bonus__player bshare-bonus__player--red">
            <div class="bshare-bonus__header">
              <span class="bshare-bonus__points">{{ redBonusPoints|number_format(1, '.', '') }}</span>
              <span class="bshare-bonus__label">pts</span>
            </div>
            <div class="bshare-bonus__stats">
              {% if redBonusStats is not empty and redBonusStats.blindHits %}
                <div class="bshare-bonus__stat">
                  <span class="bshare-bonus__stat-label">Blind hits</span>
                  <span class="bshare-bonus__stat-value">{{ redBonusStats.blindHits }}</span>
                </div>
              {% endif %}
              {% if redBonusStats is not empty and redBonusStats.chainBest %}
                <div class="bshare-bonus__stat">
                  <span class="bshare-bonus__stat-label">Best chain</span>
                  <span class="bshare-bonus__stat-value">{{ redBonusStats.chainBest }}</span>
                </div>
              {% endif %}
              {% if redBonusStats is not empty and redBonusStats.edgeMines %}
                <div class="bshare-bonus__stat">
                  <span class="bshare-bonus__stat-label">Edge mines</span>
                  <span class="bshare-bonus__stat-value">{{ redBonusStats.edgeMines }}</span>
                </div>
              {% endif %}
              {% if redBonusStats is not empty and redBonusStats.lastMineHits %}
                <div class="bshare-bonus__stat">
                  <span class="bshare-bonus__stat-label">Endgame mines</span>
                  <span class="bshare-bonus__stat-value">{{ redBonusStats.lastMineHits }}</span>
                </div>
              {% endif %}
              {% if redBonusStats is not empty and redBonusStats.biggestReveal %}
                <div class="bshare-bonus__stat">
                  <span class="bshare-bonus__stat-label">Biggest reveal</span>
                  <span class="bshare-bonus__stat-value">{{ redBonusStats.biggestReveal }}</span>
                </div>
              {% endif %}
              {% if not hasRedStats %}
                <div class="bshare-bonus__stat bshare-bonus__stat--empty">
                  <span class="bshare-bonus__stat-label">No bonuses earned</span>
                </div>
              {% endif %}
            </div>
          </div>

          {# Blue Bonus #}
          <div class="bshare-bonus__player bshare-bonus__player--blue">
            <div class="bshare-bonus__header">
              <span class="bshare-bonus__points">{{ blueBonusPoints|number_format(1, '.', '') }}</span>
              <span class="bshare-bonus__label">pts</span>
            </div>
            <div class="bshare-bonus__stats">
              {% if blueBonusStats is not empty and blueBonusStats.blindHits %}
                <div class="bshare-bonus__stat">
                  <span class="bshare-bonus__stat-label">Blind hits</span>
                  <span class="bshare-bonus__stat-value">{{ blueBonusStats.blindHits }}</span>
                </div>
              {% endif %}
              {% if blueBonusStats is not empty and blueBonusStats.chainBest %}
                <div class="bshare-bonus__stat">
                  <span class="bshare-bonus__stat-label">Best chain</span>
                  <span class="bshare-bonus__stat-value">{{ blueBonusStats.chainBest }}</span>
                </div>
              {% endif %}
              {% if blueBonusStats is not empty and blueBonusStats.edgeMines %}
                <div class="bshare-bonus__stat">
                  <span class="bshare-bonus__stat-label">Edge mines</span>
                  <span class="bshare-bonus__stat-value">{{ blueBonusStats.edgeMines }}</span>
                </div>
              {% endif %}
              {% if blueBonusStats is not empty and blueBonusStats.lastMineHits %}
                <div class="bshare-bonus__stat">
                  <span class="bshare-bonus__stat-label">Endgame mines</span>
                  <span class="bshare-bonus__stat-value">{{ blueBonusStats.lastMineHits }}</span>
                </div>
              {% endif %}
              {% if blueBonusStats is not empty and blueBonusStats.biggestReveal %}
                <div class="bshare-bonus__stat">
                  <span class="bshare-bonus__stat-label">Biggest reveal</span>
                  <span class="bshare-bonus__stat-value">{{ blueBonusStats.biggestReveal }}</span>
                </div>
              {% endif %}
              {% if not hasBlueStats %}
                <div class="bshare-bonus__stat bshare-bonus__stat--empty">
                  <span class="bshare-bonus__stat-label">No bonuses earned</span>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      {% endif %}
      <div class="bshare-cta">
        <a href="{{ path('MineSeekerBundle_gamePlay') }}" class="bshare-btn">
          <i class="fas fa-play"></i> Play MineSeeker
        </a>
        <a href="{{ path('MineSeekerBundle_homepage') }}" class="bshare-btn bshare-btn--ghost">
          <i class="fas fa-house"></i> Homepage
        </a>
      </div>
    </div>
  </div>
{% endblock %}