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

{% block title %}Race History — Video Karera{% endblock %}

{% block body %}
<style>
@media (max-width: 480px) {
    .vk-stack-table thead { display: none; }
    .vk-stack-table tbody tr {
        display: block;
        padding: 12px;
        margin-bottom: 12px;
        border: 1px solid #2a2a2a;
        border-radius: 8px;
        background: #141414;
    }
    .vk-stack-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border: none !important;
        border-bottom: 1px solid #1f1f1f !important;
        text-align: left !important;
        color: #d1d5db !important;
    }
    .vk-stack-table tbody td:last-child { border-bottom: none !important; }
    .vk-stack-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        font-size: 11px;
        text-transform: uppercase;
        flex-shrink: 0;
        margin-right: 10px;
    }
    .vk-stack-table tbody td[data-label=""] { display: none; }
}
@keyframes vk-div-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(74,222,128,0.4); }
    50%      { box-shadow: 0 0 16px rgba(74,222,128,0.8); }
}
.vk-div-win {
    background-color: #0f2d1a !important;
    border-color: #4ade80 !important;
    color: #4ade80 !important;
    font-weight: 700 !important;
    animation: vk-div-glow 1.2s ease-in-out infinite !important;
}
</style>
<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_video_karera') }}" class="back-link" data-testid="race-history-back-link" data-turbo="false">
                    ← Back to Game
                </a>
                <h1 class="fw-bold mb-0" style="letter-spacing: -.02em;" data-testid="race-history-title">Race History</h1>
                <p class="text-muted mt-1 mb-0">All finished races — {{ totalRaces }} total</p>
            </div>
        </div>

        {# ── Results table ── #}
        <div class="dark-table-card">
            {% if pastRaces is not empty %}
                <div class="table-scroll">
                    <table class="data-table vk-stack-table" data-testid="race-history-table">
                        <thead>
                            <tr class="thead-dark-row">
                                <th class="th-dark">#</th>
                                <th class="th-dark">Time</th>
                                <th class="th-dark">Winning Pair</th>
                                <th class="th-dark">Your Bet</th>
                                <th class="th-dark" style="width:1px;"></th>
                                <th class="th-dark">Outcome</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for pastRace in pastRaces %}
                                {% set wp = pastRace.winningPair %}
                                {% set myRaceBets = pastBets[pastRace.id] ?? [] %}
                                <tr class="tr-dark">
                                    <td data-label="Race" class="td-dark">{{ pastRace.id }}</td>
                                    <td data-label="Time" class="td-dark td-dark--muted">
                                        {{ pastRace.scheduledAt|date('M d, H:i') }}
                                    </td>
                                    <td data-label="Winners" class="td-dark">
                                        <div class="d-flex gap-1 align-items-center">
                                            {% for horse in pastRace.result|slice(0, 2) %}
                                                <span class="horse-position-badge horse-position-badge--top2">
                                                    {{ horse }}
                                                </span>
                                            {% endfor %}
                                        </div>
                                    </td>
                                    <td data-label="Bet" class="td-dark td-dark--bet">
                                        {% if myRaceBets is not empty %}
                                            {% for b in myRaceBets %}
                                                <div>{{ b.firstHorse }} &amp; {{ b.secondHorse }} <span class="td-dark">₱{{ b.amount|number_format(2) }}</span></div>
                                            {% endfor %}
                                        {% else %}
                                            <span class="page-btn--ellipsis">—</span>
                                        {% endif %}
                                    </td>
                                    <td data-label="Dividends" class="td-dark" style="text-align:center;">
                                        <button type="button" onclick="openDivModal({{ pastRace.id }})"
                                                style="font-size:11px;padding:3px 10px;border-radius:6px;background:#1a1a1a;border:1px solid #3f3f3f;color:#9ca3af;cursor:pointer;white-space:nowrap;line-height:1.5;">
                                            Dividends
                                        </button>
                                    </td>
                                    <td data-label="Result" class="td-dark">
                                        {% if myRaceBets is not empty %}
                                            {% for b in myRaceBets %}
                                                <div>
                                                {% if b.status == 'won' %}
                                                    <span class="badge-status badge-status--won">Won</span>
                                                    <span class="td-dark--muted ms-1" style="font-size:12px;">₱{{ b.payout|number_format(2) }}</span>
                                                {% elseif b.status == 'lost' %}
                                                    <span class="badge-status badge-status--lost">Lost</span>
                                                {% else %}
                                                    <span class="badge-status badge-status--pending">Processing</span>
                                                {% endif %}
                                                </div>
                                            {% endfor %}
                                        {% else %}
                                            <span class="page-btn--ellipsis">—</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">

                    {# Prev #}
                    {% if currentPage > 1 %}
                        <a href="{{ path('app_play_video_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 %}

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

                    {% if rangeStart > 1 %}
                        <a href="{{ path('app_play_video_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_video_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_video_karera_history', {page: totalPages}) }}"
                           class="page-btn page-btn--wide page-btn--number text-decoration-none">{{ totalPages }}</a>
                    {% endif %}

                    {# Next #}
                    {% if currentPage < totalPages %}
                        <a href="{{ path('app_play_video_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="race-history-empty">
                    No finished races yet.
                </div>
            {% endif %}
        </div>

    </div>
</div>

<dialog id="div-modal"
        style="background:#141414;border:1px solid #2a2a2a;border-radius:12px;
               padding:0;color:#ffffff;max-width:440px;width:calc(100% - 32px);">
    <div style="display:flex;align-items:center;justify-content:space-between;
                padding:20px 24px 0;margin-bottom:16px;">
        <span id="div-modal-title" style="font-size:14px;font-weight:700;color:#d1d5db;"></span>
        <button onclick="closeDivModal()"
                style="background:none;border:none;color:#6b7280;font-size:22px;cursor:pointer;line-height:1;padding:0;">
            &times;
        </button>
    </div>
    <div id="div-modal-body" style="padding:0 24px 24px;overflow-x:auto;"></div>
</dialog>

<script>
var raceDividends = {{ raceDividends|json_encode|raw }};
var raceWinningPairs = {{ raceWinningPairs|json_encode|raw }};

function openDivModal(raceId) {
    const divs = raceDividends[raceId];
    if (!divs) return;
    const winKey = raceWinningPairs[raceId];

    let html = '<table style="border-collapse:collapse;font-size:13px;width:100%;">';
    html += '<thead><tr><th style="padding:6px 10px;color:#6b7280;font-weight:600;text-align:center;width:40px;"></th>';
    for (let c = 6; c >= 2; c--) {
        html += '<th style="padding:6px 10px;color:#6b7280;font-weight:600;text-align:center;">' + c + '</th>';
    }
    html += '</tr></thead><tbody>';

    for (let r = 1; r <= 5; r++) {
        html += '<tr><td style="padding:8px 10px;color:#6b7280;font-weight:600;text-align:center;">' + r + '</td>';
        for (let c = 6; c >= 2; c--) {
            if (c > r) {
                const key = r + '-' + c;
                const val = divs[key] || '0';
                const winClass = key === winKey ? ' vk-div-win' : '';
                html += '<td class="' + winClass.trim() + '" style="padding:8px 10px;text-align:center;color:#e5e7eb;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:4px;">'
                     + val.replace('.00', '') + '</td>';
            } else {
                html += '<td style="padding:8px 10px;background:#0d0d0d;border:1px solid #1a1a1a;border-radius:4px;"></td>';
            }
        }
        html += '</tr>';
    }
    html += '</tbody></table>';

    document.getElementById('div-modal-body').innerHTML = html;
    document.getElementById('div-modal-title').textContent = 'Race #' + raceId + ' — Dividends';
    document.getElementById('div-modal').showModal();
}

function closeDivModal() {
    document.getElementById('div-modal').close();
}
document.getElementById('div-modal')?.addEventListener('click', function(e) {
    if (e.target === this) this.close();
});
</script>
{% endblock %}