templates/analytics.html

{% extends 'base.html' %}
{% block title %}Analytics – {{ app_brand }}{% endblock %}
{% block head %}
<style>
  .ax-hero {
    position: relative;
    border-radius: var(--radius);
    padding: 2rem 1.75rem 1.75rem;
    margin-bottom: 2rem;
    overflow: hidden;
    border: 1px solid rgba(249,115,22,0.22);
    background:
      radial-gradient(ellipse 120% 80% at 20% -20%, rgba(249,115,22,0.18), transparent 55%),
      radial-gradient(ellipse 90% 70% at 100% 50%, rgba(59,130,246,0.12), transparent 50%),
      linear-gradient(165deg, var(--card) 0%, #0f1628 100%);
  }
  .ax-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.9;
  }
  .ax-hero-inner { position: relative; z-index: 1; }
  .ax-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--orange);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
  }
  .ax-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.75rem);
    letter-spacing: 3px;
    color: var(--white);
    line-height: 1.05;
    margin-bottom: 0.5rem;
  }
  .ax-sub { color: var(--muted2); font-size: 0.95rem; max-width: 520px; line-height: 1.5; }
  .ax-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
  }
  .ax-tile {
    background: rgba(10,14,26,0.55);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    transition: border-color 0.2s, transform 0.2s;
  }
  .ax-tile:hover { border-color: rgba(249,115,22,0.35); transform: translateY(-1px); }
  .ax-tile-val {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1.2;
  }
  .ax-tile-lbl {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--muted2);
    text-transform: uppercase;
    margin-top: 0.25rem;
    line-height: 1.35;
  }
  .ax-bar-row { margin-bottom: 0.65rem; }
  .ax-bar-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.82rem;
    margin-bottom: 0.25rem;
  }
  .ax-bar-name { color: var(--text); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ax-bar-count { font-family: var(--font-mono); color: var(--gold); font-weight: 700; }
  .ax-bar-track {
    height: 8px;
    border-radius: 99px;
    background: var(--bg3);
    overflow: hidden;
  }
  .ax-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--orange), var(--gold));
    min-width: 2px;
    transition: width 0.5s ease;
  }
  .ax-bin-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
  }
  .ax-bin-lbl { width: 88px; flex-shrink: 0; color: var(--muted2); }
  .ax-mini {
    font-size: 0.78rem;
    color: var(--muted2);
    line-height: 1.5;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
  }
  .ax-table { width: 100%; font-size: 0.85rem; border-collapse: collapse; }
  .ax-table th {
    text-align: left;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.35rem 0 0.5rem;
    border-bottom: 1px solid var(--border);
  }
  .ax-table td { padding: 0.55rem 0; border-bottom: 1px solid rgba(30,45,69,0.6); vertical-align: middle; }
  .ax-table tr:last-child td { border-bottom: none; }
  .ax-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: var(--bg3);
    color: var(--muted2);
  }
  .ax-insight {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-top: 1rem;
  }
  .ax-insight-b {
    background: var(--bg2);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
  }
  .ax-insight-b strong { color: var(--white); font-size: 0.92rem; display: block; margin-bottom: 0.25rem; }
  .ax-insight-b span { font-size: 0.82rem; color: var(--muted2); line-height: 1.45; }
  @media (max-width: 640px) {
    .ax-stat-grid { grid-template-columns: repeat(2, 1fr); }
  }
</style>
{% endblock %}
{% block content %}
<div class="page">
  <div class="ax-hero">
    <div class="ax-hero-inner">
      <div class="ax-kicker">Squad intelligence</div>
      <h1 class="ax-title">POOL ANALYTICS</h1>
      <p class="ax-sub">Every number here is aggregated across <strong style="color:var(--text);">all active teammates</strong> — picks, stakes, accuracy, and who’s leading the MOTM and P/L boards.</p>

      <div class="ax-stat-grid">
        <div class="ax-tile">
          <div class="ax-tile-val">{{ pool.members or 0 }}</div>
          <div class="ax-tile-lbl">Active members</div>
        </div>
        <div class="ax-tile">
          <div class="ax-tile-val">{{ pool.preds or 0 }}</div>
          <div class="ax-tile-lbl">Total predictions</div>
        </div>
        <div class="ax-tile">
          <div class="ax-tile-val">{{ pool.settled or 0 }}</div>
          <div class="ax-tile-lbl">Settled picks</div>
        </div>
        <div class="ax-tile">
          <div class="ax-tile-val">{% if win_acc is not none %}{{ win_acc }}%{% else %}—{% endif %}</div>
          <div class="ax-tile-lbl">Pool winner hit rate</div>
        </div>
        <div class="ax-tile">
          <div class="ax-tile-val">{% if motm_acc is not none %}{{ motm_acc }}%{% else %}—{% endif %}</div>
          <div class="ax-tile-lbl">Pool MOTM hit rate</div>
        </div>
        <div class="ax-tile">
          <div class="ax-tile-val">{{ '%.0f'|format(pool.total_staked or 0) }}</div>
          <div class="ax-tile-lbl">Points staked (all)</div>
        </div>
        <div class="ax-tile">
          <div class="ax-tile-val">{% if pool.avg_bid %}{{ '%.0f'|format(pool.avg_bid) }}{% else %}—{% endif %}</div>
          <div class="ax-tile-lbl">Avg bid / pick</div>
        </div>
        <div class="ax-tile">
          <div class="ax-tile-val">{{ '%.0f'|format(pool.avg_pts or 0) }}</div>
          <div class="ax-tile-lbl">Avg balance / member</div>
        </div>
      </div>
    </div>
  </div>

  <div class="grid grid-2" style="gap:1.25rem; margin-bottom:1.25rem;">
    <div class="card">
      <div class="card-title">🗓️ FIXTURE COVERAGE</div>
      <div class="ax-insight">
        <div class="ax-insight-b">
          <strong>Schedule</strong>
          <span>{{ match_counts.n_done or 0 }} completed · {{ match_counts.n_open or 0 }} still open · {{ match_counts.n_all or 0 }} total in system</span>
        </div>
        <div class="ax-insight-b">
          <strong>Engagement</strong>
          <span>{{ matches_touched }} distinct matches have at least one pool pick logged.</span>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-title">🧠 CROWD vs RESULT</div>
      {% if crowd.n %}
      <p style="font-size:1.15rem; font-weight:700; color:var(--gold); margin-bottom:0.35rem;">{{ crowd.pct }}%</p>
      <p style="font-size:0.88rem; color:var(--muted2); line-height:1.5;">
        On <strong style="color:var(--text);">{{ crowd.n }}</strong> finished matches with picks, the <strong>plurality crowd favourite</strong> matched the actual winner that many times.
      </p>
      {% else %}
      <p style="color:var(--muted2); font-size:0.9rem;">Not enough completed results with predictions to measure consensus yet.</p>
      {% endif %}
    </div>
  </div>

  <div class="grid grid-2" style="gap:1.25rem; margin-bottom:1.25rem;">
    <div class="card">
      <div class="card-title">🎯 POPULAR WINNER PICKS</div>
      <p style="font-size:0.82rem; color:var(--muted2); margin-bottom:1rem;">Which teams the pool backs most often (by full franchise name).</p>
      {% if pick_rows %}
      {% for row in pick_rows %}
      <div class="ax-bar-row">
        <div class="ax-bar-meta">
          <span class="ax-bar-name" title="{{ row.predicted_winner }}">{{ team_abbr.get(row.predicted_winner, row.predicted_winner[:3]) }} — {{ row.predicted_winner }}</span>
          <span class="ax-bar-count">{{ row.c }}</span>
        </div>
        <div class="ax-bar-track">
          <div class="ax-bar-fill" style="width:{{ (row.c / pick_max * 100)|round(1) }}%;"></div>
        </div>
      </div>
      {% endfor %}
      {% else %}
      <div class="empty-state" style="padding:1.5rem;">No picks in the pool yet.</div>
      {% endif %}
    </div>

    <div class="card">
      <div class="card-title">💰 BID SIZE MIX</div>
      <p style="font-size:0.82rem; color:var(--muted2); margin-bottom:1rem;">How aggressively the squad is staking (points per prediction).</p>
      {% set bins = [
        ('≤ 50', bid_bins.b_low or 0),
        ('51 – 150', bid_bins.b_mid or 0),
        ('151 – 300', bid_bins.b_high or 0),
        ('300+', bid_bins.b_whale or 0),
      ] %}
      {% for label, v in bins %}
      <div class="ax-bin-row">
        <span class="ax-bin-lbl">{{ label }}</span>
        <div class="ax-bar-track" style="flex:1;">
          <div class="ax-bar-fill" style="width:{{ (v / bin_max * 100)|round(1) if bin_max else 0 }}%; opacity:{% if v %}1{% else %}0.2{% endif %};"></div>
        </div>
        <span class="mono" style="font-size:0.78rem; color:var(--gold); width:2rem; text-align:right;">{{ v }}</span>
      </div>
      {% endfor %}
      <div class="ax-mini">
        Combined outstanding member balances: <strong class="mono" style="color:var(--text);">{{ '%.0f'|format(sum_balances) }}</strong> pts ·
        Net P/L summed over all settled picks: <strong class="mono" style="color:var(--text);">{{ '%+.0f'|format(settled_pl_sum) }}</strong> pts
      </div>
    </div>
  </div>

  <div class="grid grid-2" style="gap:1.25rem; margin-bottom:1.25rem;">
    <div class="card">
      <div class="card-title">⭐ MOTM BOARD</div>
      <p style="font-size:0.82rem; color:var(--muted2); margin-bottom:0.75rem;">Correct MOTM calls vs attempts (settled matches only).</p>
      {% if motm_board %}
      <table class="ax-table">
        <thead>
          <tr>
            <th>Player</th>
            <th style="text-align:right;">Hits</th>
            <th style="text-align:right;">Att.</th>
            <th style="text-align:right;">Rate</th>
          </tr>
        </thead>
        <tbody>
          {% for r in motm_board %}
          {% set rate = ((r.hits / r.attempts * 100)|round(1)) if r.attempts else 0 %}
          <tr>
            <td><strong>{{ r.display_name or r.username }}</strong></td>
            <td style="text-align:right; font-family:var(--font-mono); color:var(--green);">{{ r.hits }}</td>
            <td style="text-align:right; font-family:var(--font-mono); color:var(--muted2);">{{ r.attempts }}</td>
            <td style="text-align:right;"><span class="ax-pill">{{ rate }}%</span></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div class="empty-state" style="padding:1.5rem;">No MOTM outcomes recorded yet.</div>
      {% endif %}
    </div>

    <div class="card">
      <div class="card-title">🎯 WINNER ACCURACY LEADERS</div>
      <p style="font-size:0.82rem; color:var(--muted2); margin-bottom:0.75rem;">Min. 2 settled picks — ranked by hit rate, then volume.</p>
      {% if sharp_picks %}
      <table class="ax-table">
        <thead>
          <tr>
            <th>Player</th>
            <th style="text-align:right;">W / G</th>
            <th style="text-align:right;">Rate</th>
          </tr>
        </thead>
        <tbody>
          {% for r in sharp_picks %}
          {% set rate = ((r.w / r.g * 100)|round(1)) if r.g else 0 %}
          <tr>
            <td><strong>{{ r.display_name or r.username }}</strong></td>
            <td style="text-align:right; font-family:var(--font-mono);">{{ r.w }} / {{ r.g }}</td>
            <td style="text-align:right;"><span class="ax-pill">{{ rate }}%</span></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div class="empty-state" style="padding:1.5rem;">Need more settled results to rank the squad.</div>
      {% endif %}
    </div>
  </div>

  <div class="grid grid-2" style="gap:1.25rem; margin-bottom:1.25rem;">
    <div class="card">
      <div class="card-title">📈 NET P&amp;L FROM PICKS</div>
      <p style="font-size:0.82rem; color:var(--muted2); margin-bottom:0.75rem;">Net points won or lost on settled predictions (adds up everyone’s match results).</p>
      {% if pl_board %}
      <table class="ax-table">
        <thead>
          <tr>
            <th>Player</th>
            <th style="text-align:right;">Net P/L</th>
            <th style="text-align:right;">Balance</th>
          </tr>
        </thead>
        <tbody>
          {% for r in pl_board %}
          <tr>
            <td><strong>{{ r.display_name or r.username }}</strong></td>
            <td style="text-align:right; font-family:var(--font-mono); font-weight:700;" class="{{ r.season_pl|delta_class }}">{{ r.season_pl|delta_sign }}</td>
            <td style="text-align:right; font-family:var(--font-mono); color:var(--muted2);">{{ '%.0f'|format(r.points) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div class="empty-state" style="padding:1.5rem;">No settled P/L yet.</div>
      {% endif %}
    </div>

    <div class="card">
      <div class="card-title">⚡ EXTREMES &amp; MOTM VOLUME</div>
      <div class="ax-insight" style="margin-top:0;">
        <div class="ax-insight-b">
          <strong>Best single match</strong>
          <span class="mono" style="color:var(--green); font-size:1rem;">{% if extrema.best_single is not none %}{{ extrema.best_single|delta_sign }}{% else %}—{% endif %}</span>
          <span style="display:block; margin-top:0.35rem;">Largest one-off gain logged by anyone in the pool.</span>
        </div>
        <div class="ax-insight-b">
          <strong>Toughest single match</strong>
          <span class="mono text-red" style="font-size:1rem;">{% if extrema.worst_single is not none %}{{ extrema.worst_single|delta_sign }}{% else %}—{% endif %}</span>
          <span style="display:block; margin-top:0.35rem;">Biggest swing the other way on one result.</span>
        </div>
        <div class="ax-insight-b">
          <strong>MOTM tries</strong>
          <span><strong style="color:var(--gold); font-size:1.1rem;">{{ pool.motm_attempts or 0 }}</strong> settled rows with a MOTM name · <span class="text-green">{{ pool.motm_hits or 0 }}</span> correct · <span class="text-red">{{ pool.motm_misses or 0 }}</span> wrong</span>
        </div>
        <div class="ax-insight-b">
          <strong>Avg P/L when settled</strong>
          <span class="mono" style="color:var(--text);">{% if extrema.avg_settled_pl is not none %}{{ extrema.avg_settled_pl|delta_sign }}{% else %}—{% endif %}</span>
          <span style="display:block; margin-top:0.35rem;">Mean points change per settled prediction, squad-wide.</span>
        </div>
      </div>
    </div>
  </div>

  <div class="card" style="border-color:rgba(59,130,246,0.25); margin-bottom:1.25rem;">
    <div class="card-title" style="color:var(--blue);">✨ SQUAD TAKEAWAYS</div>
    <ul style="color:var(--muted2); font-size:0.9rem; line-height:1.85; margin-left:1.1rem;">
      <li><strong style="color:var(--text);">Winner accuracy</strong> blends bold calls and safe picks — the pool rate is the real “house view” on IPL nights.</li>
      <li><strong style="color:var(--text);">MOTM</strong> is high variance by design: a few correct calls move the MOTM board fast.</li>
      <li><strong style="color:var(--text);">Crowd vs result</strong> shows whether the group’s modal pick tracks reality — ties count if any tied favourite wins.</li>
      <li><strong style="color:var(--text);">Bid mix</strong> shows risk appetite: whale stakes (>300) are rare but memorable.</li>
      <li><strong style="color:var(--text);">Personal deep dive?</strong> Use <a href="{{ url_for('history') }}" style="color:var(--orange);">My stats</a> for your own history — this page stays squad-first.</li>
    </ul>
  </div>
</div>
{% endblock %}