{% extends 'agent/_layout.html.twig' %}

{% block title %}{{ player.firstName }} {{ player.lastName }}{% endblock %}

{% block agent_content %}

    <a href="{{ path('app_agent_player_monitor') }}" style="font-size:13px; color:#afafaf; text-decoration:none;" data-testid="agent-player-detail-back">← Back to Player Monitor</a>

    <h1 class="fw-bold mb-1 mt-2 text-white" data-testid="agent-player-detail-title">{{ player.firstName }} {{ player.lastName }}</h1>
    <p class="mb-4 font-mono-sm" style="color:#afafaf;">{{ player.mobileNumber }}</p>

    <div class="row g-3 mb-4">
        {% set cards = [
            {label: 'Cash In (all-time)',  value: '₱' ~ cashIn|number_format(2),  testid: 'stat-player-detail-cash-in'},
            {label: 'Cash Out (all-time)', value: '₱' ~ cashOut|number_format(2), testid: 'stat-player-detail-cash-out'},
            {label: 'Last Load',           value: lastLoadAt ? lastLoadAt|date('M d, Y') : 'Never', testid: 'stat-player-detail-last-load'},
            {label: 'Last Bet',            value: lastBet ? (lastBet.placedAt|date('M d') ~ ' · ' ~ lastBet.game) : '—', testid: 'stat-player-detail-last-bet'},
        ] %}
        {% for c in cards %}
            <div class="col-6 col-md-3">
                <div class="card-body--compact dark-card h-100">
                    <p class="stat-label--sm mb-2">{{ c.label }}</p>
                    <p class="stat-value--lg mb-0 text-white" style="font-size:18px;" data-testid="{{ c.testid }}">{{ c.value }}</p>
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="d-flex gap-2 mb-3 flex-wrap">
        {% for t in [{label: 'Deposits (' ~ depositCount ~ ')', value: 'deposits'}, {label: 'Withdrawals (' ~ withdrawalCount ~ ')', value: 'withdrawals'}, {label: 'Bets (' ~ betCount ~ ')', value: 'bets'}] %}
            <a href="{{ path('app_agent_player_detail', {id: player.id, tab: t.value}) }}"
               class="filter-pill {% if tab == t.value %}is-active{% endif %}"
               data-testid="agent-player-detail-tab-{{ t.value }}">{{ t.label }}</a>
        {% endfor %}
    </div>

    <div class="card table-card">
        <div class="table-scroll">
        {% if tab == 'bets' %}
            <table class="data-table stack-table" data-testid="agent-player-detail-bets-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">Date</th>
                        <th class="th-white">Game</th>
                        <th class="th-white">Ref #</th>
                        <th class="th-white">Detail</th>
                        <th class="th-white">Amount</th>
                        <th class="th-white">Payout</th>
                        <th class="th-white">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                    <tr class="table-row" data-testid="agent-player-detail-bet-row-{{ row.id }}">
                        <td data-label="Date" class="td-cell td-cell--muted td-cell--nowrap">{{ row.createdAt|date('M d, Y H:i') }}</td>

                        <td data-label="Game" class="td-cell" style="white-space: nowrap;">
                            {% if row.game == 'vk' %}
                                <span class="badge-status" style="background:#1e1b4b;color:#a5b4fc;border-color:#3730a3;">Video Karera</span>
                            {% elseif row.game == 'high-low' %}
                                <span class="badge-status" style="background:#14532d;color:#4ade80;border-color:#166534;">Pataasan</span>
                            {% elseif row.game == 'mines' %}
                                <span class="badge-status" style="background:#312e81;color:#c7d2fe;border-color:#4338ca;">Mines</span>
                            {% elseif row.game == 'fk' %}
                                <span class="badge-status" style="background:#4c1d95;color:#ddd6fe;border-color:#5b21b6;">Fruit King</span>
                            {% elseif row.game == 'pk' %}
                                <span class="badge-status" style="background:#1e1b4b;color:#a5b4fc;border-color:#3730a3;">Pachinko</span>
                            {% elseif row.game == 'sw' %}
                                <span class="badge-status" style="background:#881337;color:#fecdd3;border-color:#be123c;">Spin &amp; Win</span>
                            {% elseif row.game == 'pd' %}
                                <span class="badge-status" style="background:#064e3b;color:#a7f3d0;border-color:#047857;">Pusoy Dos</span>
                            {% elseif row.game == 'lr' %}
                                <span class="badge-status" style="background:#1e3a5f;color:#93c5fd;border-color:#2563eb;">Live Racing</span>
                            {% elseif row.game == 'cg' %}
                                <span class="badge-status" style="background:#7c2d12;color:#fed7aa;border-color:#9a3412;">Color Game</span>
                            {% endif %}
                        </td>

                        <td data-label="Ref #" class="td-cell td-cell--dark font-mono-sm fw-semibold">
                            {{ row.refId ? '#' ~ row.refId : '—' }}
                        </td>

                        <td data-label="Detail" class="td-cell">
                            {% if row.game == 'high-low' %}
                                {% if row.roundCards is not null %}
                                    {% set cards = row.roundCards|split('|') %}
                                    {% set winnerCard = row.roundResult in ['card1', 'card2'] ? attribute({card1: cards[0], card2: cards[1]}, row.roundResult) : null %}
                                    <div>
                                        <div style="white-space:nowrap;margin-bottom:4px;">
                                            <img src="{{ asset('game/small_cards/' ~ cards[0] ~ '.png') }}" alt="" style="height:30px;width:auto;margin-right:2px;border-radius:2px;">
                                            <img src="{{ asset('game/small_cards/' ~ cards[1] ~ '.png') }}" alt="" style="height:30px;width:auto;border-radius:2px;">
                                        </div>
                                        <div>
                                            <span class="font-mono-sm fw-semibold" style="color:#374151;">
                                                Bet:
                                                <span style="background:#fef2f2;color:#dc2626;border:1px solid #fca5a5;padding:1px 6px;border-radius:4px;font-weight:700;">
                                                    Card {{ row.description|slice(4) }}
                                                </span>
                                            </span>
                                            {% if row.roundResult is not null %}
                                            <span style="margin-left:6px;" class="font-mono-sm fw-semibold" style="color:#374151;">
                                                Result:
                                                <span style="background:#f0fdf4;color:#16a34a;border:1px solid #86efac;padding:1px 6px;border-radius:4px;font-weight:700;">
                                                    Card {{ row.roundResult|slice(4) }} ↑
                                                </span>
                                                {% if winnerCard %}
                                                <img src="{{ asset('game/small_cards/' ~ winnerCard ~ '.png') }}" alt="" style="height:20px;width:auto;vertical-align:middle;margin-left:3px;border-radius:2px;">
                                                {% endif %}
                                            </span>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% else %}
                                    <div>
                                        <span class="font-mono-sm fw-semibold" style="color:#374151;">
                                            Bet:
                                            <span style="background:#fef2f2;color:#dc2626;border:1px solid #fca5a5;padding:1px 6px;border-radius:4px;font-weight:700;">
                                                Card {{ row.description|slice(4) }}
                                            </span>
                                        </span>
                                    </div>
                                {% endif %}
                            {% elseif row.game == 'cg' %}
                                {% set dice = row.roundResult ? row.roundResult|split(',') : [] %}
                                {% set cgDiceBg = {'yellow':'#F4B942','white':'#F5F5F5','pink':'#FF3E9A','blue':'#3D87E8','red':'#E63946','green':'#3FB65D'} %}
                                {% set cgDiceFg = {'yellow':'#3a2606','white':'#1a1330','pink':'#ffffff','blue':'#ffffff','red':'#ffffff','green':'#ffffff'} %}
                                <div>
                                    <span class="badge-detail">{{ row.description }}</span>
                                    {% if dice|length == 3 %}
                                    <div style="white-space:nowrap;margin-top:4px;">
                                        {% for d in dice %}
                                            <span title="{{ d|capitalize }}" style="display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:{{ cgDiceBg[d]|default('#e5e7eb') }};color:{{ cgDiceFg[d]|default('#374151') }};border:1px solid rgba(0,0,0,0.15);font-weight:700;font-size:11px;text-transform:uppercase;margin-right:3px;">{{ d|slice(0, 1) }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            {% elseif row.game == 'mines' %}
                                <span class="badge-detail">
                                    {{ row.description|replace({'_': ' '})|capitalize }} — {{ row.roundResult }} tile{{ row.roundResult == '1' ? '' : 's' }} revealed
                                </span>
                            {% elseif row.game == 'fk' %}
                                <span class="badge-detail">
                                    Bet: {{ row.description|capitalize }}{% if row.roundResult %} — Landed: {{ row.roundResult|capitalize }}{% endif %}
                                </span>
                            {% elseif row.game == 'pd' %}
                                <span class="badge-detail">{{ row.description }}{% if row.roundResult %} — finished {{ row.roundResult }}{% endif %}</span>
                            {% elseif row.game == 'lr' %}
                                <span class="badge-detail">{{ row.description|title }}{% if row.legSummary %} — {{ row.legSummary }}{% endif %}</span>{% if row.comboCount is not null and row.comboCount > 1 %} <span class="text-muted">(×{{ row.comboCount }})</span>{% endif %}
                            {% else %}
                                <span class="badge-detail">{{ row.description }}</span>
                            {% endif %}
                        </td>

                        <td data-label="Amount" class="td-cell td-cell--nowrap fw-semibold">₱{{ row.amount|number_format(2) }}</td>

                        <td data-label="Payout" class="td-cell td-cell--muted td-cell--nowrap">
                            {% if (row.status == 'won' or row.status == 'mixed') and row.payout and row.payout > 0 %}
                                ₱{{ row.payout|number_format(2) }}
                            {% else %}
                                —
                            {% endif %}
                        </td>

                        <td data-label="Status" class="td-cell">
                            {% if row.status == 'won' %}<span class="badge-status badge-status--won">Won</span>
                            {% elseif row.status == 'lost' %}<span class="badge-status badge-status--lost">Lose</span>
                            {% elseif row.status == 'void' %}<span class="badge-status" style="background:#374151;color:#e5e7eb;">Void</span>
                            {% elseif row.status == 'mixed' %}
                                {% set counts = row.statusCounts is not null ? row.statusCounts|json_decode : null %}
                                {% set mixedParts = [] %}
                                {% if counts %}
                                    {% if counts.pending > 0 %}{% set mixedParts = mixedParts|merge([counts.pending ~ ' pending']) %}{% endif %}
                                    {% if counts.won > 0 %}{% set mixedParts = mixedParts|merge([counts.won ~ ' won']) %}{% endif %}
                                    {% if counts.lost > 0 %}{% set mixedParts = mixedParts|merge([counts.lost ~ ' lose']) %}{% endif %}
                                    {% if counts.void > 0 %}{% set mixedParts = mixedParts|merge([counts.void ~ ' void']) %}{% endif %}
                                {% endif %}
                                <span class="badge-status" style="background:#4c1d95;color:#ddd6fe;">{{ mixedParts|length > 0 ? mixedParts|join(', ') : 'Mixed' }}</span>
                            {% else %}<span class="badge-status badge-status--neutral">Pending</span>{% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="7" class="td-empty">No bets yet.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <table class="data-table stack-table" data-testid="agent-player-detail-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">#</th>
                        <th class="th-white">Amount</th>
                        <th class="th-white">{{ tab == 'deposits' ? 'Ref. No.' : 'Bank' }}</th>
                        <th class="th-white">Submitted</th>
                        <th class="th-white">Status</th>
                        <th class="th-white">Reviewed</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                    <tr class="table-row" data-testid="agent-player-detail-row-{{ row.id }}">
                        <td data-label="#" class="td-cell td-cell--id">{{ row.id }}</td>
                        <td data-label="Amount" class="td-cell td-cell--nowrap fw-semibold">
                            ₱{{ row.amount|number_format(2) }}
                            {% if tab == 'deposits' and row.approvedAmount is not null %}
                                <p class="td-cell--muted mb-0" style="font-size:11px;">Approved: ₱{{ row.approvedAmount|number_format(2) }}</p>
                            {% endif %}
                        </td>
                        {% if tab == 'deposits' %}
                            <td data-label="Ref. No." class="td-cell td-cell--muted td-cell--nowrap font-mono-sm">{{ row.transactionReference ?? '—' }}</td>
                        {% else %}
                            <td data-label="Bank" class="td-cell td-cell--muted"><span class="font-mono-sm">{{ row.bankName }}</span></td>
                        {% endif %}
                        <td data-label="Submitted" class="td-cell td-cell--muted td-cell--nowrap">{{ row.createdAt|date('M d, Y H:i') }}</td>
                        <td data-label="Status" class="td-cell">
                            {% if row.status == 'pending' %}<span class="badge-status badge-status--pending">Pending</span>
                            {% elseif row.status == 'approved' %}<span class="badge-status badge-status--approved">Approved</span>
                            {% else %}<span class="badge-status badge-status--rejected">Rejected</span>{% endif %}
                        </td>
                        <td data-label="Reviewed" class="td-cell td-cell--muted td-cell--nowrap">
                            {{ row.reviewedAt ? row.reviewedAt|date('M d, Y H:i') : '—' }}
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="6" class="td-empty">No {{ tab }} yet.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
        </div>
    </div>

    {% if totalPages > 1 %}
    <div class="d-flex align-items-center justify-content-between mt-4" data-testid="agent-player-detail-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }} &middot; {{ total }} total</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}<a href="{{ path('app_agent_player_detail', {id: player.id, tab: tab, page: currentPage - 1}) }}" class="btn-page-prev">← Previous</a>{% endif %}
            {% if currentPage < totalPages %}<a href="{{ path('app_agent_player_detail', {id: player.id, tab: tab, page: currentPage + 1}) }}" class="btn-page-next">Next →</a>{% endif %}
        </div>
    </div>
    {% endif %}

{% endblock %}