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

{% block title %}Ticket History — Karera{% endblock %}

{% block body %}
<div class="game-page">
    <div class="game-page__inner">

        {# ── Header ── #}
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
            <div>
                <a href="{{ path('app_play_karera') }}" class="back-link" data-testid="karera-history-back-link" data-turbo="false">
                    ← Back to Game
                </a>
                <h1 class="fw-bold mb-0" style="letter-spacing: -.02em;" data-testid="karera-history-title">Ticket History</h1>
                <p class="text-muted mt-1 mb-0">All your karera bets — {{ totalBets }} total</p>
            </div>
        </div>

        {# ── Bets table ── #}
        <div class="dark-table-card">
            {% if bets is not empty %}
                <div class="table-scroll">
                    <table class="data-table" data-testid="karera-history-table">
                        <thead>
                            <tr class="thead-dark-row">
                                <th class="th-dark">#</th>
                                <th class="th-dark">Date</th>
                                <th class="th-dark">Bet Type</th>
                                <th class="th-dark">Amount</th>
                                <th class="th-dark">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for bet in bets %}
                                <tr class="tr-dark" data-testid="karera-history-row-{{ bet.id }}">
                                    <td data-label="#" class="td-dark">{{ bet.id }}</td>
                                    <td data-label="Date" class="td-dark td-dark--muted">
                                        {{ bet.createdAt|date('M d, H:i') }}
                                    </td>
                                    <td data-label="Bet Type" class="td-dark">
                                        {{ bet.betOffering.betType.label }}
                                    </td>
                                    <td data-label="Amount" class="td-dark">
                                        ₱{{ bet.amount|number_format(2) }}
                                    </td>
                                    <td data-label="Status" class="td-dark">
                                        {% if bet.status == 'won' %}
                                            <span class="badge-status badge-status--won">Won</span>
                                            {% if bet.payout %}<span class="td-dark--muted ms-1" style="font-size:12px;">₱{{ bet.payout|number_format(2) }}</span>{% endif %}
                                        {% elseif bet.status == 'lost' %}
                                            <span class="badge-status badge-status--lost">Lost</span>
                                        {% else %}
                                            <span class="badge-status badge-status--pending">Pending</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {# ── Pagination ── #}
                {% if totalPages > 1 %}
                <div class="d-flex align-items-center justify-content-center flex-wrap gap-2 mt-4">

                    {% if currentPage > 1 %}
                        <a href="{{ path('app_play_karera_history', {page: currentPage - 1}) }}"
                           class="page-btn page-btn--square page-btn--prev text-decoration-none">
                            ‹
                        </a>
                    {% else %}
                        <span class="page-btn page-btn--square page-btn--ellipsis">‹</span>
                    {% endif %}

                    {% set rangeStart = max(1, currentPage - 2) %}
                    {% set rangeEnd   = min(totalPages, currentPage + 2) %}

                    {% if rangeStart > 1 %}
                        <a href="{{ path('app_play_karera_history', {page: 1}) }}"
                           class="page-btn page-btn--wide page-btn--number text-decoration-none">1</a>
                        {% if rangeStart > 2 %}
                            <span class="page-btn--ellipsis">…</span>
                        {% endif %}
                    {% endif %}

                    {% for p in rangeStart..rangeEnd %}
                        {% if p == currentPage %}
                            <span class="page-btn page-btn--wide fw-bold" style="background-color:#16a34a; border:1px solid #16a34a; color:#ffffff;">{{ p }}</span>
                        {% else %}
                            <a href="{{ path('app_play_karera_history', {page: p}) }}"
                               class="page-btn page-btn--wide page-btn--number text-decoration-none">{{ p }}</a>
                        {% endif %}
                    {% endfor %}

                    {% if rangeEnd < totalPages %}
                        {% if rangeEnd < totalPages - 1 %}
                            <span class="page-btn--ellipsis">…</span>
                        {% endif %}
                        <a href="{{ path('app_play_karera_history', {page: totalPages}) }}"
                           class="page-btn page-btn--wide page-btn--number text-decoration-none">{{ totalPages }}</a>
                    {% endif %}

                    {% if currentPage < totalPages %}
                        <a href="{{ path('app_play_karera_history', {page: currentPage + 1}) }}"
                           class="page-btn page-btn--square page-btn--next text-decoration-none">
                            ›
                        </a>
                    {% else %}
                        <span class="page-btn page-btn--square page-btn--ellipsis">›</span>
                    {% endif %}

                </div>
                <div class="pagination-info text-center mt-2">
                    Page {{ currentPage }} of {{ totalPages }}
                </div>
                {% endif %}

            {% else %}
                <div class="text-center py-5 td-dark" data-testid="karera-history-empty">
                    No bets placed yet.
                </div>
            {% endif %}
        </div>

    </div>
</div>
{% endblock %}