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

{% block title %}Live Racing Leaderboard — WFBO{% endblock %}
{% block wfbo_title %}Live Racing Leaderboard{% endblock %}

{% block wfbo_content %}

<style>
.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; }
.badge-master { background: #4f46e5; color: #fff; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; text-decoration: none; }
.lb-sorted { font-weight: 800; }
th.lb-sorted { background: #eef2ff !important; }
/* Top-3 podium rows */
.lb-row--gold   > td { background: #fef7dc !important; }
.lb-row--silver > td { background: #f1f2f4 !important; }
.lb-row--bronze > td { background: #fcece0 !important; }
.lb-row--gold   > td:first-child { box-shadow: inset 4px 0 0 #d4a017; }
.lb-row--silver > td:first-child { box-shadow: inset 4px 0 0 #9ca3af; }
.lb-row--bronze > td:first-child { box-shadow: inset 4px 0 0 #b0673a; }
.lb-medal--gold   { background: radial-gradient(circle at 30% 30%, #fde68a, #d4a017); color: #78350f; box-shadow: 0 1px 3px rgba(180,130,0,.45); }
.lb-medal--silver { background: radial-gradient(circle at 30% 30%, #f3f4f6, #9ca3af); color: #374151; box-shadow: 0 1px 3px rgba(107,114,128,.45); }
.lb-medal--bronze { background: radial-gradient(circle at 30% 30%, #f5c7a1, #b0673a); color: #5b2a0e; box-shadow: 0 1px 3px rgba(140,70,30,.45); }
</style>

    {% set custom = period.period == 'custom' %}
    {% set baseParams = {bet_type: betType.value, sort: sort} %}
    {% set rangeParams = custom
        ? {date_from: period.dateFrom, date_to: period.dateTo}
        : {period: period.period} %}

    {# ── Period filter ── #}
    {% set presets = [
        {key: 'today',      label: 'Today'},
        {key: 'yesterday',  label: 'Yesterday'},
        {key: 'this_week',  label: 'This Week'},
        {key: 'last_week',  label: 'Last Week'},
        {key: 'this_month', label: 'This Month'},
        {key: 'last_month', label: 'Last Month'},
    ] %}
    <div class="period-filter-bar mb-3">
        {% for p in presets %}
            <a href="{{ path('app_wfbo_live_racing_leaderboard', baseParams|merge({period: p.key})) }}"
               class="period-pill {% if period.period == p.key %}is-active{% endif %}"
               data-testid="lr-lb-period-{{ p.key }}">
                {{ p.label }}
            </a>
        {% endfor %}
    </div>

    {# ── Filters ── #}
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ path('app_wfbo_live_racing_leaderboard') }}" class="row g-3 align-items-end" data-testid="lr-lb-filter-form">
                {% if not custom %}<input type="hidden" name="period" value="{{ period.period }}">{% endif %}
                <div class="col-12 col-md-3">
                    <label class="form-label" for="lr-lb-bet-type">Bet Type</label>
                    <select id="lr-lb-bet-type" name="bet_type" class="form-select form-select-sm" data-testid="lr-lb-bet-type">
                        {% for bt in betTypes %}
                            <option value="{{ bt.value }}" {{ betType == bt ? 'selected' : '' }}>{{ bt.label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label" for="lr-lb-date-from">From</label>
                    <input type="date" id="lr-lb-date-from" name="date_from" value="{{ custom ? period.dateFrom : '' }}"
                           class="form-control form-control-sm" data-testid="lr-lb-date-from">
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label" for="lr-lb-date-to">To</label>
                    <input type="date" id="lr-lb-date-to" name="date_to" value="{{ custom ? period.dateTo : '' }}"
                           class="form-control form-control-sm" data-testid="lr-lb-date-to">
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label" for="lr-lb-sort">Rank By</label>
                    <select id="lr-lb-sort" name="sort" class="form-select form-select-sm" data-testid="lr-lb-sort">
                        {% for key, label in sortLabels %}
                            <option value="{{ key }}" {{ sort == key ? 'selected' : '' }}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-12 col-md-2">
                    <button type="submit" class="btn btn-admin-save w-100" data-testid="lr-lb-apply">Apply</button>
                </div>
            </form>
        </div>
    </div>

    {# ── Info bar ── #}
    <p class="pagination-info mb-3" data-testid="lr-lb-info">
        {{ total }} player{{ total != 1 ? 's' : '' }}
        &mdash; <strong>{{ betType.label }}</strong>
        &mdash; <strong>{{ period.label }}</strong>
        &mdash; ranked by {{ sortLabels[sort] }}
    </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;" data-testid="lr-lb-table">
                <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 {{ sort == 'win_count' ? 'lb-sorted' }}" style="text-align:right;">Wins</th>
                        <th class="th-white" style="text-align:right;">Tickets</th>
                        <th class="th-white" style="text-align:right;">Win Rate</th>
                        <th class="th-white {{ sort == 'total_bet' ? 'lb-sorted' }}" style="text-align:right;">Total Bet</th>
                        <th class="th-white {{ sort == 'total_payout' ? 'lb-sorted' }}" style="text-align:right;">Total Winnings</th>
                        <th class="th-white {{ sort == 'biggest_win' ? 'lb-sorted' }}" style="text-align:right;">Biggest Win</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                        {% set rank = offset + loop.index %}
                        {% set medal = rank == 1 ? 'gold' : (rank == 2 ? 'silver' : (rank == 3 ? 'bronze' : 'plain')) %}
                        <tr data-testid="lr-lb-row-{{ row.id }}" data-rank="{{ rank }}"
                            {% if medal != 'plain' %}class="lb-row--{{ medal }}"{% endif %}>
                            <td>
                                <span class="lb-medal lb-medal--{{ medal }}">{{ rank }}</span>
                            </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 %}
                                    <span class="badge-master">{{ row.master_agent_first_name }} {{ row.master_agent_last_name }}</span>
                                {% else %}
                                    <span class="text-muted">—</span>
                                {% endif %}
                            </td>
                            <td style="text-align:right;" class="{{ sort == 'win_count' ? 'lb-sorted' }}" data-testid="lr-lb-wins-{{ row.id }}">{{ row.win_count }}</td>
                            <td style="text-align:right;" data-testid="lr-lb-tickets-{{ row.id }}">{{ row.ticket_count }}</td>
                            <td style="text-align:right;">
                                {{ row.ticket_count > 0 ? (row.win_count / row.ticket_count * 100)|number_format(1) ~ '%' : '—' }}
                            </td>
                            <td style="text-align:right;" class="{{ sort == 'total_bet' ? 'lb-sorted' }}">₱{{ row.total_bet|number_format(2) }}</td>
                            <td style="text-align:right; color:#16a34a;" class="{{ sort == 'total_payout' ? 'lb-sorted' }}">₱{{ row.total_payout|number_format(2) }}</td>
                            <td style="text-align:right;" class="{{ sort == 'biggest_win' ? 'lb-sorted' }}">₱{{ row.biggest_win|number_format(2) }}</td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="9" class="text-center" style="padding:40px; color:#9ca3af;" data-testid="lr-lb-empty">
                                No {{ betType.label }} {{ sort == 'win_count' ? 'winners' : 'bettors' }} 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_live_racing_leaderboard', baseParams|merge(rangeParams)|merge({page: currentPage - 1})) }}" class="btn-outline-sm">&larr; Prev</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_live_racing_leaderboard', baseParams|merge(rangeParams)|merge({page: currentPage + 1})) }}" class="btn-outline-sm">Next &rarr;</a>
            {% endif %}
        </div>
    </nav>
    {% endif %}

{% endblock %}