{% extends 'wfbo/_layout.html.twig' %}

{% block title %}Leaderboard — WFBO{% endblock %}
{% block wfbo_title %}User Leaderboard{% endblock %}

{% block wfbo_content %}

<style>
.lb-rank { font-size: 15px; font-weight: 800; color: #6b7280; min-width: 32px; }
.lb-rank--1 { color: #b7791f; }
.lb-rank--2 { color: #718096; }
.lb-rank--3 { color: #7a4a24; }
.lb-medal { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 800; }
.lb-medal--gold   { background: #fef3c7; color: #92400e; }
.lb-medal--silver { background: #f3f4f6; color: #4b5563; }
.lb-medal--bronze { background: #fde8d8; color: #7c3d1a; }
.lb-medal--plain  { background: #f9fafb; color: #6b7280; }
.positive { color: #16a34a; }
.negative { color: #dc2626; }
.badge-master { background: #4f46e5; color: #fff; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.master-agent-link { text-decoration: none; }
.master-agent-link:hover { opacity: 0.85; }
</style>

    {# ── Period filter ── #}
    {% set presets = [
        {key: 'today',      label: 'Today'},
        {key: 'yesterday',  label: 'Yesterday'},
        {key: 'this_month', label: 'This Month'},
        {key: 'last_month', label: 'Last Month'},
        {key: 'this_year',  label: 'This Year'},
        {key: 'last_year',  label: 'Last Year'},
    ] %}
    <div class="period-filter-bar mb-3">
        {% for p in presets %}
            <a href="{{ path('app_wfbo_leaderboard', {period: p.key}) }}"
               class="period-pill {% if period.period == p.key %}is-active{% endif %}">
                {{ p.label }}
            </a>
        {% endfor %}
    </div>

    {# ── Info bar ── #}
    <p class="pagination-info mb-3">
        {{ total }} player{{ total != 1 ? 's' : '' }} with bets
        &mdash; <strong>{{ period.label }}</strong> &mdash; ranked by house revenue
    </p>

    {# ── Table ── #}
    <div class="card table-card">
        <div class="table-scroll">
            <table class="table data-table" style="margin:0; --bs-table-color:#000; --bs-table-bg:#fff;">
                <thead>
                    <tr class="thead-row--strong">
                        <th class="th-white" style="width:48px;">#</th>
                        <th class="th-white">Player</th>
                        <th class="th-white">Master Agent</th>
                        <th class="th-white" style="text-align:right;">Total Deposit</th>
                        <th class="th-white" style="text-align:right;">Total Cashout</th>
                        <th class="th-white" style="text-align:right;">House Revenue</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                        {% set rank = offset + loop.index %}
                        <tr>
                            <td>
                                {% if rank == 1 %}
                                    <span class="lb-medal lb-medal--gold">1</span>
                                {% elseif rank == 2 %}
                                    <span class="lb-medal lb-medal--silver">2</span>
                                {% elseif rank == 3 %}
                                    <span class="lb-medal lb-medal--bronze">3</span>
                                {% else %}
                                    <span class="lb-medal lb-medal--plain">{{ rank }}</span>
                                {% endif %}
                            </td>
                            <td>
                                <a href="{{ path('app_wfbo_user_transactions', {id: row.id}) }}"
                                   style="font-weight:600; color:#111; text-decoration:none;">
                                    {{ row.first_name }} {{ row.last_name }}
                                </a>
                                <div style="font-size:11px; color:#9ca3af;">{{ row.mobile_number }}</div>
                            </td>
                            <td>
                                {% if row.master_agent_id %}
                                    <a href="{{ path('app_wfbo_master_agents', {search: row.master_agent_first_name ~ ' ' ~ row.master_agent_last_name}) }}"
                                       class="badge-master master-agent-link"
                                       data-testid="master-agent-link-{{ row.id }}"
                                       title="Filter master agents by {{ row.master_agent_first_name }} {{ row.master_agent_last_name }}">
                                        {{ row.master_agent_first_name }} {{ row.master_agent_last_name }}
                                    </a>
                                {% else %}
                                    <span class="text-muted">—</span>
                                {% endif %}
                            </td>
                            <td style="text-align:right; color:#2563eb; font-weight:600;">₱{{ row.total_deposit|number_format(2) }}</td>
                            <td style="text-align:right; color:#dc2626; font-weight:600;">₱{{ row.total_cashout|number_format(2) }}</td>
                            <td style="text-align:right; font-weight:700;"
                                class="{{ row.house_revenue >= 0 ? 'positive' : 'negative' }}">
                                ₱{{ row.house_revenue|number_format(2) }}
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="6" class="text-center" style="padding:40px; color:#9ca3af;">
                                No player bets found for <strong>{{ period.label }}</strong>.
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# ── Pagination ── #}
    {% if totalPages > 1 %}
    <nav class="d-flex align-items-center justify-content-between mt-3 flex-wrap gap-2">
        <p class="pagination-info" style="margin:0;">
            Page {{ currentPage }} of {{ totalPages }}
        </p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_wfbo_leaderboard', {page: currentPage - 1, period: period.period}) }}"
                   class="btn-outline-sm">
                    &larr; Prev
                </a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_leaderboard', {page: currentPage + 1, period: period.period}) }}"
                   class="btn-outline-sm">
                    Next &rarr;
                </a>
            {% endif %}
        </div>
    </nav>
    {% endif %}

{% endblock %}