{% extends 'base.html' %}
{% block title %}My stats – {{ app_brand }}{% endblock %}
{% block content %}
<div class="page">
  <div class="page-header">
    <div class="page-title">MY STATS</div>
    <div class="page-subtitle">{{ current_user.display_name or current_user.username }}'s prediction history</div>
  </div>

  <!-- Summary stats -->
  {% set total = records|length %}
  {% set settled = records|selectattr('is_settled','equalto',1)|list|length %}
  {% set correct_w = records|selectattr('winner_correct','equalto',1)|list|length %}
  {% set correct_m = records|selectattr('motm_correct','equalto',1)|list|length %}
  {% set win_pct = (correct_w / settled * 100)|int if settled > 0 else 0 %}

  <div class="grid grid-4" style="margin-bottom:2rem;">
    <div class="stat-box">
      <div class="stat-value">{{ '%.0f'|format(current_user.points) }}</div>
      <div class="stat-label">Current Points</div>
    </div>
    <div class="stat-box">
      <div class="stat-value">{{ total }}</div>
      <div class="stat-label">Predictions Made</div>
    </div>
    <div class="stat-box">
      <div class="stat-value">{{ win_pct }}%</div>
      <div class="stat-label">Winner Accuracy</div>
    </div>
    <div class="stat-box">
      <div class="stat-value">{{ correct_m }}</div>
      <div class="stat-label">MOTM Correct</div>
    </div>
  </div>

  <!-- Prediction History -->
  <div class="section-title" id="prediction-history" style="scroll-margin-top:5rem;">📋 PREDICTION HISTORY</div>
  {% if records %}
  <div class="card" style="margin-bottom:2rem;">
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Match</th>
            <th>Date</th>
            <th>Your Pick</th>
            <th>MOTM Pick</th>
            <th>Bid</th>
            <th>Result</th>
            <th>P/L</th>
          </tr>
        </thead>
        <tbody>
          {% for r in records %}
          <tr>
            <td style="color:var(--muted); font-size:0.8rem;">{{ r.match_number or '—' }}</td>
            <td>
              <div style="font-weight:600;">
                {{ teams_abbr.get(r.team1, r.team1[:3]) }} vs {{ teams_abbr.get(r.team2, r.team2[:3]) }}
              </div>
              <span class="badge badge-{{ r.match_status }}" style="font-size:0.65rem;">{{ r.match_status }}</span>
            </td>
            <td style="font-size:0.85rem; color:var(--muted2);">{{ r.match_date|format_date }}</td>
            <td>
              <div style="font-weight:600; color:var(--orange);">{{ teams_abbr.get(r.predicted_winner, r.predicted_winner) }}</div>
              {% if r.is_settled %}
                {% if r.winner_correct %}✅{% else %}❌{% endif %}
                <span style="font-size:0.78rem; color:var(--muted2);">{{ r.match_winner }}</span>
              {% endif %}
            </td>
            <td style="font-size:0.85rem;">
              {% if r.predicted_motm %}
              <div>{{ r.predicted_motm }}</div>
              {% if r.is_settled and r.motm_correct is not none %}
                {% if r.motm_correct %}✅{% else %}❌{% endif %}
                <span style="font-size:0.78rem; color:var(--muted2);">{{ r.man_of_match or '?' }}</span>
              {% endif %}
              {% else %}
              <span style="color:var(--muted);">—</span>
              {% endif %}
            </td>
            <td style="font-family:var(--font-mono);">{{ '%.0f'|format(r.bid_amount) }}</td>
            <td>
              {% if r.is_settled %}
              <span class="badge {% if r.winner_correct %}badge-completed{% else %}badge-live{% endif %}">
                {{ 'WIN' if r.winner_correct else 'LOSS' }}
              </span>
              {% elif r.match_status in ('upcoming','locked','live') %}
              <span class="badge badge-upcoming">PENDING</span>
              {% else %}
              <span class="badge badge-abandoned">N/A</span>
              {% endif %}
            </td>
            <td>
              {% if r.is_settled %}
              <div class="{{ r.points_earned|delta_class }}" style="font-family:var(--font-mono); font-weight:700;">
                {{ r.points_earned|delta_sign }}
              </div>
              {% else %}—{% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% else %}
  <div class="empty-state card">
    <div class="icon">🎯</div>
    <div>No predictions yet. <a href="{{ url_for('dashboard') }}" style="color:var(--orange);">Start predicting!</a></div>
  </div>
  {% endif %}

  <!-- Points History -->
  <div class="section-title" id="points-history" style="scroll-margin-top:5rem;">💰 POINTS HISTORY</div>
  {% if ph %}
  <div class="card">
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Date</th>
            <th>Description</th>
            <th style="text-align:right;">Change</th>
            <th style="text-align:right;">Balance</th>
          </tr>
        </thead>
        <tbody>
          {% for h in ph %}
          <tr>
            <td style="font-size:0.8rem; color:var(--muted2); white-space:nowrap;">{{ h.created_at[:16] }}</td>
            <td style="font-size:0.875rem;">{{ h.reason or 'Adjustment' }}</td>
            <td style="text-align:right; font-family:var(--font-mono); font-weight:700;" class="{{ h.change_amount|delta_class }}">
              {{ h.change_amount|delta_sign }}
            </td>
            <td style="text-align:right; font-family:var(--font-mono);">{{ '%.0f'|format(h.balance_after) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% else %}
  <div class="empty-state card">
    <div class="icon">💸</div>
    <div>No transactions yet.</div>
  </div>
  {% endif %}
</div>
{% endblock %}