{% extends 'base.html.twig' %}

{% block title %}Live Racing - Race Results{% endblock %}

{% block body %}
<div class="container page-container" style="padding-top: 16px; padding-bottom: 100px;">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h2 class="mb-1">Race Results</h2>
            <p class=" mb-0">View results and dividends for past events</p>
        </div>
        <div class="d-flex gap-2">
        </div>
    </div>

    {% if allEvents|length == 0 %}
        <div class="text-center py-5" data-testid="live-racing-results-empty-state">
            <h3 class="text-body">No Events Found</h3>
            <p class="text-body-secondary">No events have been published yet.</p>
        </div>
    {% else %}

        {# ── Step 1: Event Selector ── #}
        <form method="GET" class="mb-4" data-testid="results-event-selector">
            <label for="event-select" class="form-label fw-semibold" style="color:#1f2937;">Select Event</label>
            <select id="event-select"
                    name="event_id"
                    class="form-select"
                    data-testid="select-event"
                    onchange="this.form.submit()">
                {% for e in allEvents %}
                    <option value="{{ e.id }}" {% if event and event.id == e.id %}selected{% endif %}>
                        {{ e.management.name }} — {{ e.eventDate|date('M j, Y') }}
                    </option>
                {% endfor %}
            </select>
        </form>

        {% if event and raceResults|length > 0 %}

            {# ── Step 2 & 3: Race tabs with result + dividends ── #}
            <div class="card bg-white" data-bs-theme="light" style="border-radius:12px;border:1px solid #e5e7eb;">
                <div class="card-body p-3">

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0" style="color:#1f2937;">{{ event.management.name }}</h5>
                        <span style="color:#6b7280;font-size:13px;">{{ event.eventDate|date('l, F j, Y') }}</span>
                    </div>

                    {# Race tabs #}
                    <ul class="nav nav-tabs mb-3" data-testid="results-race-tabs">
                        {% for rr in raceResults %}
                            {% set race = rr.race %}
                            {% set tab_id = 'race-tab-' ~ race.id %}
                            {% set pane_id = 'race-pane-' ~ race.id %}
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{ loop.first ? 'active' : '' }}"
                                        id="{{ tab_id }}"
                                        data-bs-toggle="tab"
                                        data-bs-target="#{{ pane_id }}"
                                        type="button"
                                        role="tab"
                                        data-testid="tab-race-{{ race.id }}">
                                    Race {{ race.raceNumber }}
                                    {% if race.isSettled() %}
                                        <span class="badge bg-success ms-1" style="font-size:9px;">✓</span>
                                    {% elseif not race.isOpen() %}
                                        <span class="badge bg-secondary ms-1" style="font-size:9px;">Closed</span>
                                    {% else %}
                                        <span class="badge bg-warning text-dark ms-1" style="font-size:9px;">Open</span>
                                    {% endif %}
                                </button>
                            </li>
                        {% endfor %}
                    </ul>

                    {# Race panes #}
                    <div class="tab-content">
                        {% for rr in raceResults %}
                            {% set race = rr.race %}
                            {% set horses = rr.horses %}
                            {% set dividendRows = rr.dividendRows %}
                            {% set pane_id = 'race-pane-' ~ race.id %}

                            <div class="tab-pane fade {{ loop.first ? 'show active' : '' }}"
                                 id="{{ pane_id }}"
                                 role="tabpanel"
                                 data-testid="race-pane-{{ race.id }}">

                                {% if race.result is not null %}
                                    {# ── Race Winner(s) ── #}
                                    <h6 class="fw-semibold mb-2" style="color:#1f2937;">Winner{{ race.result|length > 1 ? 's' : '' }}</h6>
                                    <div class="d-flex flex-wrap gap-2 mb-3">
                                        {% for finisher in race.result %}
                                            {% set horse = horses|filter(h => h.id == finisher.horseId)|first %}
                                            <div class="d-flex align-items-center gap-1"
                                                 style="background:#f3f4f6;border-radius:8px;padding:6px 12px;">
                                                <span style="color:#1f2937;font-weight:600;font-size:14px;">#{{ finisher.horseNumber }}</span>
                                                {% if horse %}
                                                    <span style="color:#6b7280;font-size:12px;">{{ horse.horseName }}</span>
                                                {% endif %}
                                            </div>
                                        {% else %}
                                            <span style="color:#6b7280;font-size:13px;">—</span>
                                        {% endfor %}
                                    </div>

                                    {# ── Dividends ── #}
                                    {% if dividendRows|length > 0 %}
                                        <h6 class="fw-semibold mb-2" style="color:#1f2937;">Dividends</h6>
                                        <div class="table-responsive">
                                            <table class="table table-sm table-bordered mb-0" style="font-size:13px;">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th>Bet Type</th>
                                                        <th>Winning combinations</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for row in dividendRows %}
                                                        <tr>
                                                            <td>{{ row.label }}</td>
                                                            <td>
                                                                {% if row.refund %}<span class="badge bg-dark">Refunded</span>{% endif %}
                                                                {% for c in row.combinations %}
                                                                    {{ not loop.first ? ' · ' : (row.refund ? ' · ' : '') }}{% if c.selection %}{{ c.selection|capitalize }}{% else %}{{ c.numbers|join('-') }}{% endif %}: {{ c.dividend }}
                                                                {% else %}
                                                                    {% if not row.refund %}—{% endif %}
                                                                {% endfor %}
                                                            </td>
                                                        </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    {% endif %}

                                {% else %}
                                    <p class="text-body-secondary mb-0" data-testid="race-result-pending-{{ race.id }}">Result pending.</p>
                                {% endif %}

                            </div>
                        {% endfor %}
                    </div>

                </div>
            </div>

        {% elseif event and totalRaceCount > 0 %}
            <div class="text-center py-5" data-testid="results-not-finalized">
                <p class="text-body-secondary">Results for this event aren't final yet. Check back once the races have been settled.</p>
            </div>
        {% elseif event %}
            <div class="text-center py-5" data-testid="results-no-races">
                <p class="text-body-secondary">No races found for this event.</p>
            </div>
        {% endif %}

    {% endif %}

</div>

{# Wallet Bar #}
<div class="wallet-bar" data-testid="wallet-bar">
    <div class="wallet-bar__balance"
         data-controller="balance-counter"
         data-balance-counter-amount-value="{{ app.user.walletBalance }}">
        <p class="wallet-bar__label">Balance</p>
        <p class="wallet-bar__amount" data-testid="wallet-bar-amount"
           data-balance-counter-target="display">₱{{ app.user.walletBalance|number_format(2) }}</p>
    </div>
    <div class="wallet-bar__actions">
        <a href="{{ path('app_deposit') }}"
           class="pill-link--ghost"
           style="font-size: 12px; padding: 7px 14px;"
           data-testid="wallet-bar-add-funds">+ Add Funds</a>
    </div>
</div>

{% endblock %}