{% 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 %}
                                    {# ── Race Result ── #}
                                    <h6 class="fw-semibold mb-2" style="color:#1f2937;">Finish Order</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:#6b7280;font-weight:600;font-size:12px;">{{ loop.index }}{{ loop.first ? 'st' : (loop.index == 2 ? 'nd' : (loop.index == 3 ? 'rd' : 'th')) }}:</span>
                                                <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>
                                        {% 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>Dividend</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for row in dividendRows %}
                                                        <tr>
                                                            <td>{{ row.label }}{% if row.kind == 'multi' %} (whole combo){% endif %}</td>
                                                            <td>
                                                                {% if row.refund %}
                                                                    <span class="badge bg-dark">Refunded</span>
                                                                {% elseif row.deadHeatDividendA is not null or row.deadHeatDividendB is not null %}
                                                                    Dead Heat {{ row.deadHeatDividendA }} / {{ row.deadHeatDividendB }}
                                                                {% else %}
                                                                    {% set winnerNumber = race.result[0].horseNumber ?? null %}
                                                                    {% if row.kind == 'multi' and row.legPrefix is not empty and winnerNumber %}
                                                                        Dividend ({{ row.legPrefix }}{{ winnerNumber }}): {{ row.dividend }}
                                                                    {% else %}
                                                                        {{ row.dividend }}
                                                                    {% endif %}
                                                                    {%- if row.substituteDividend is not null %} <span class="text-muted">(Substitute: {{ row.substituteDividend }})</span>{% endif %}
                                                                    {%- if row.scratchDividends is not null and row.scratchDividends is not empty %}
                                                                        {% for horseId, div in row.scratchDividends %}
                                                                            {% set scratchHorse = horses|filter(h => h.id == horseId)|first %}
                                                                            {% set scratchNumber = scratchHorse ? scratchHorse.horseNumber : ('#' ~ horseId) %}
                                                                            {% if row.legPrefix is not empty %}
                                                                                <span class="text-muted">Scratch ({{ row.legPrefix }}{{ scratchNumber }}): {{ div }}</span>
                                                                            {% else %}
                                                                                <span class="text-muted">Scratch Horse #{{ horseId }}: {{ div }}</span>
                                                                            {% endif %}
                                                                            {% if not loop.last %}, {% endif %}
                                                                        {% endfor %}
                                                                    {% endif %}
                                                                {% endif %}
                                                            </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 %}