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

{% block title %}Live Racing - History{% 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-4">
        <div>
            <h2 class="mb-1">Live Racing</h2>
            <p class="text-muted mb-0">Bet History</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ path('app_play_live_racing_results') }}" class="btn btn-outline-secondary" data-testid="link-live-racing-results">
                Race Results
            </a>
            <a href="{{ path('app_play_live_racing') }}" class="btn btn-outline-secondary" data-testid="link-back-to-live-racing">
                Back to Game
            </a>
        </div>
    </div>

    {% if tickets|length == 0 %}
        <div class="text-center py-5" data-testid="live-racing-history-empty-state">
            <h3 class="text-body">No Bets Yet</h3>
            <p class="text-body-secondary">Your bet history will appear here.</p>
            <a href="{{ path('app_play_live_racing') }}" class="btn btn-primary mt-3">
                Place Your First Bet
            </a>
        </div>
    {% else %}
        {% set per_ticket_keys = ['quartet', 'pentafecta', 'super_six', 'pick_4', 'pick_5', 'pick_6', 'wta'] %}
        <div class="row g-3">
            {% for ticket in tickets %}
                {% set event = ticket.event %}
                {% set arena = event.management.name %}
                {% set race_numbers = ticket.raceNumbersLabel %}
                {% set bet_type_key = ticket.betTypeKey %}
                {% set bet_type_label = bet_type_key|replace({'_': ' '})|title %}
                {% set combos = ticket.comboCount %}
                {% set total_stake = ticket.amount %}
                {% set per_combo = combos > 0 ? (total_stake / combos)|number_format(2) : '0.00' %}
                {% set is_per_ticket = bet_type_key in per_ticket_keys %}
                {% set status = ticket.status %}
                {% set payout = ticket.payout %}
                {% set selections = ticket.selectionsSummary %}
                {% set created = ticket.createdAt|date('M j, Y') %}

                <div class="col-12" data-testid="live-racing-history-row-{{ ticket.id }}" data-arena="{{ arena }}">
                    <div class="card bg-white" data-bs-theme="light" style="border-radius:12px;border:1px solid #e5e7eb;">
                        <div class="card-body p-3">
                            {# Line 1: Arena (left) | Race # (center) | Date (right) #}
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span style="color:#1f2937;font-weight:700;font-size:15px;">{{ event.management.name }}</span>
                                <span style="color:#6b7280;font-size:12px;font-weight:600;">{{ race_numbers }}</span>
                                <span style="color:#d4af37;font-weight:600;font-size:13px;">{{ created }}</span>
                            </div>

                            {# Line 2: Cost/Bet Amount | Bet Type | Combination (all inline) #}
                            <div style="font-size:13px;margin-bottom:10px;">
                                <span class="d-flex flex-wrap align-items-center gap-2">
                                    <span style="color:#4b5563;">₱{{ per_combo }}</span>
                                    <span style="color:#4b5563;">{{ bet_type_label }}</span>
                                    <span style="color:#4b5563;">{{ selections }}</span>
                                </span>
                            </div>

                            {# Total line #}
                            <div style="border-top:1px solid #e5e7eb;padding-top:10px;">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span style="color:#1f2937;font-weight:700;font-size:15px;">Total : ₱{{ total_stake|number_format(2) }}</span>
                                    <span>
                                        {% if status == 'pending' %}
                                            <span class="badge bg-warning text-dark">Bet Placed</span>
                                        {% elseif status == 'won' %}
                                            <span class="badge bg-success">Won</span>
                                        {% elseif status == 'void' %}
                                            <span class="badge bg-dark">Void</span>
                                        {% elseif status == 'mixed' %}
                                            <span class="badge" style="background:#4c1d95;color:#ddd6fe;">{{ ticket.statusLabel }}</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Lose</span>
                                        {% endif %}
                                    </span>
                                </div>
                                {% set credit = credits[ticket.id] ?? null %}
                                {% set refund = refunds[ticket.id] ?? null %}
                                {% if credit %}
                                    <div class="lr-credit-receipt" data-testid="ticket-credit-{{ ticket.id }}"
                                         style="margin-top:8px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:8px 10px;">
                                        <div style="color:#15803d;font-weight:700;font-size:13px;">
                                            ✓ ₱{{ credit.amount|number_format(2) }} credited to your wallet
                                        </div>
                                        <div style="color:#4b5563;font-size:12px;margin-top:2px;">
                                            Balance ₱{{ credit.balanceBefore|number_format(2) }} → ₱{{ credit.balanceAfter|number_format(2) }}
                                        </div>
                                        <div style="color:#6b7280;font-size:12px;margin-top:1px;">
                                            Credited {{ credit.creditedAt|date('M j, Y g:i A') }}
                                        </div>
                                    </div>
                                {% endif %}
                                {% if refund %}
                                    <div class="lr-refund-receipt" data-testid="ticket-refund-{{ ticket.id }}"
                                         style="margin-top:8px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px;padding:8px 10px;">
                                        <div style="color:#374151;font-weight:700;font-size:13px;">
                                            ↩ ₱{{ refund.amount|number_format(2) }} refunded to your wallet
                                        </div>
                                        <div style="color:#4b5563;font-size:12px;margin-top:2px;">
                                            Balance ₱{{ refund.balanceBefore|number_format(2) }} → ₱{{ refund.balanceAfter|number_format(2) }}
                                        </div>
                                        <div style="color:#6b7280;font-size:12px;margin-top:1px;">
                                            Refunded {{ refund.creditedAt|date('M j, Y g:i A') }}
                                        </div>
                                    </div>
                                {% endif %}
                                {% if not credit and not refund and payout %}
                                    <div style="color:#22c55e;font-size:13px;font-weight:600;margin-top:4px;">Payout: ₱{{ payout|number_format(2) }}</div>
                                {% endif %}
                            </div>

                            {# Reference #}
                            <div style="color:#9ca3af;font-size:13px;margin-top:6px;">
                                Ref: {{ ticket.baseReference }}
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% 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 %}