{# Live region for the Insight page. Rendered inside insight.html.twig on first
   load AND standalone by AgentController::insightData(), re-fetched by the
   agent-insight Stimulus controller every ~15s. Keep markup identical between
   the two so the innerHTML swap is diff-free where data is unchanged. Every
   table is `data-insight-paginate` + carries an `.insight-pager` footer; the
   Stimulus controller slices each to 10 rows/page (state survives the swap). #}
{% import _self as insight %}

{# ── Headline tiles ── #}
<div class="row g-3 mb-4">
    {% set p = periodLabel %}
    {% set tiles = [
        {key: 'online',      label: 'Online · ' ~ p,             value: onlineCount,                                sub: 'seen on the site'},
        {key: 'played',      label: 'Played · ' ~ p,             value: playedCount,                                sub: 'placed at least one bet'},
        {key: 'bets',        label: 'Total Bets · ' ~ p,         value: '₱' ~ betTotals.betAmount|number_format(2),  sub: betTotals.betCount ~ ' bet' ~ (betTotals.betCount == 1 ? '' : 's')},
        {key: 'wins',        label: 'Total Wins · ' ~ p,         value: '₱' ~ betTotals.winAmount|number_format(2),  sub: 'paid out to your downline'},
        {key: 'winrate',     label: 'Players Win Rate · ' ~ p,   value: playersWinRate|number_format(2) ~ '%',       sub: 'wins ÷ bets across your downline'},
        {key: 'commission',  label: 'Commission Earned · ' ~ p,  value: '₱' ~ commissionToday|number_format(2),      sub: 'your share'},
        {key: 'deposits',    label: 'Deposit Requests · ' ~ p,   value: '₱' ~ depositsToday|number_format(2),        sub: 'requested by your downline'},
        {key: 'withdrawals', label: 'Withdrawal Requests · ' ~ p, value: '₱' ~ withdrawalsToday|number_format(2),    sub: 'requested by your downline'},
    ] %}
    {% for tile in tiles %}
        <div class="col-6 col-md-4" data-testid="stat-insight-{{ tile.key }}">
            <div class="card-body--compact dark-card h-100">
                <p class="stat-label--sm mb-2">{{ tile.label }}</p>
                <p class="stat-value--lg mb-1 text-white">{{ tile.value }}</p>
                <p class="mb-0" style="font-size:11px; color:#afafaf;">{{ tile.sub }}</p>
            </div>
        </div>
    {% endfor %}
</div>

{# ── Deposit & withdrawal requests ── #}
<p class="text-white fw-semibold text-uppercase mb-2" style="font-size:11px; letter-spacing:.06em;">
    Deposit &amp; Withdrawal Requests
</p>
<div class="card table-card mb-4">
    <div class="table-scroll">
        <table class="data-table" data-insight-paginate data-testid="agent-insight-requests-table">
            <thead>
                <tr class="thead-row--light">
                    <th class="th-white">Time</th>
                    <th class="th-white">Player</th>
                    <th class="th-white">Kind</th>
                    <th class="th-white th-gray--right">Amount</th>
                    <th class="th-white">Status</th>
                </tr>
            </thead>
            <tbody>
                {% for req in requests %}
                <tr class="table-row" data-testid="agent-insight-request-row">
                    <td class="td-cell td-cell--muted td-cell--nowrap">{{ req.createdAt|date('M d, H:i') }}</td>
                    <td class="td-cell fw-semibold">{{ req.entity.user.firstName }} {{ req.entity.user.lastName }}</td>
                    <td class="td-cell">
                        {% if req.kind == 'deposit' %}
                            <span class="badge-status" style="background:#dcfce7; color:#15803d;">Deposit</span>
                        {% else %}
                            <span class="badge-status" style="background:#fee2e2; color:#b00020;">Withdrawal</span>
                        {% endif %}
                    </td>
                    <td class="td-cell td-cell--nowrap text-end fw-semibold">₱{{ req.entity.amount|number_format(2) }}</td>
                    <td class="td-cell">
                        {% if req.entity.status == 'approved' %}
                            <span class="badge-status badge-status--approved">Approved</span>
                        {% elseif req.entity.status == 'rejected' %}
                            <span class="badge-status badge-status--rejected">Rejected</span>
                        {% else %}
                            <span class="badge-status badge-status--pending">Pending</span>
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="td-empty">No deposit or withdrawal requests from your downline.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {{ insight.insight_pager('agent-insight-requests-table') }}
</div>

{# ── Players seen on-site ── #}
<p class="text-white fw-semibold text-uppercase mb-2" style="font-size:11px; letter-spacing:.06em;">
    Players Online &middot; {{ periodLabel }}
</p>
<div class="card table-card mb-4">
    <div class="table-scroll">
        <table class="data-table" data-insight-paginate data-testid="agent-insight-online-table">
            <thead>
                <tr class="thead-row--light">
                    <th class="th-white">Name</th>
                    <th class="th-white">Mobile</th>
                    <th class="th-white">Last Seen</th>
                </tr>
            </thead>
            <tbody>
                {% for row in onlineUsers %}
                <tr class="table-row" data-testid="agent-insight-online-row-{{ row.id }}">
                    <td class="td-cell fw-semibold">
                        <a href="{{ path('app_agent_player_detail', {id: row.id}) }}"
                           data-testid="agent-player-link-{{ row.id }}"
                           style="color:inherit; text-decoration:underline; text-underline-offset:2px;">
                            {{ row.firstName }} {{ row.lastName }}
                        </a>
                    </td>
                    <td class="td-cell td-cell--muted font-mono-sm">{{ row.mobileNumber }}</td>
                    <td class="td-cell td-cell--muted td-cell--nowrap">
                        {% if isToday %}{{ row.minutesAgo == 0 ? 'just now' : row.minutesAgo ~ ' min ago' }}
                        {% else %}{{ row.lastSeenAt|date('M j, H:i') }}{% endif %}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="3" class="td-empty">No one in your downline was seen on {{ periodLabel }}.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {{ insight.insight_pager('agent-insight-online-table') }}
</div>

{# ── Players who placed a bet ── #}
<p class="text-white fw-semibold text-uppercase mb-2" style="font-size:11px; letter-spacing:.06em;">
    Players Who Played &middot; {{ periodLabel }}
</p>
<div class="card table-card mb-4">
    <div class="table-scroll">
        <table class="data-table" data-insight-paginate data-testid="agent-insight-played-table">
            <thead>
                <tr class="thead-row--light">
                    <th class="th-white">Name</th>
                    <th class="th-white">Mobile</th>
                    <th class="th-white">Bets</th>
                    <th class="th-white">Staked</th>
                </tr>
            </thead>
            <tbody>
                {% for row in playedPlayers %}
                <tr class="table-row" data-testid="agent-insight-played-row-{{ row.id }}">
                    <td class="td-cell fw-semibold">
                        <a href="{{ path('app_agent_player_detail', {id: row.id}) }}"
                           data-testid="agent-player-link-{{ row.id }}"
                           style="color:inherit; text-decoration:underline; text-underline-offset:2px;">
                            {{ row.firstName }} {{ row.lastName }}
                        </a>
                    </td>
                    <td class="td-cell td-cell--muted font-mono-sm">{{ row.mobileNumber }}</td>
                    <td class="td-cell">{{ row.betCount }}</td>
                    <td class="td-cell fw-semibold">₱{{ row.betAmount|number_format(2) }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="4" class="td-empty">No one in your downline placed a bet on {{ periodLabel }}.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {{ insight.insight_pager('agent-insight-played-table') }}
</div>

{# ── Player activity: last deposit request + last bet per player ── #}
<p class="text-white fw-semibold text-uppercase mb-2" style="font-size:11px; letter-spacing:.06em;">
    Player Activity — Last Deposit &amp; Last Bet
</p>
<div class="card table-card mb-4">
    <div class="table-scroll">
        <table class="data-table" data-insight-paginate data-testid="agent-insight-player-activity-table">
            <thead>
                <tr class="thead-row--light">
                    <th class="th-white">Player</th>
                    <th class="th-white">Mobile</th>
                    <th class="th-white">Last Deposit Request</th>
                    <th class="th-white">Last Bet</th>
                    <th class="th-white">Game</th>
                </tr>
            </thead>
            <tbody>
                {% for row in playerActivity %}
                <tr class="table-row" data-testid="agent-insight-player-activity-row-{{ row.id }}">
                    <td class="td-cell fw-semibold">
                        <a href="{{ path('app_agent_player_detail', {id: row.id}) }}"
                           data-testid="agent-player-link-{{ row.id }}"
                           style="color:inherit; text-decoration:underline; text-underline-offset:2px;">
                            {{ row.firstName }} {{ row.lastName }}
                        </a>
                    </td>
                    <td class="td-cell td-cell--muted font-mono-sm">{{ row.mobileNumber }}</td>
                    <td class="td-cell td-cell--nowrap">
                        {% if row.lastDeposit %}
                            ₱{{ row.lastDeposit.amount|number_format(2) }}
                            <span class="td-cell--muted">&middot; {{ row.lastDeposit.createdAt|date('M d, H:i') }}</span>
                            {% if row.lastDeposit.status == 'approved' %}
                                <span class="badge-status badge-status--approved">Approved</span>
                            {% elseif row.lastDeposit.status == 'rejected' %}
                                <span class="badge-status badge-status--rejected">Rejected</span>
                            {% else %}
                                <span class="badge-status badge-status--pending">Pending</span>
                            {% endif %}
                        {% else %}
                            <span class="td-cell--muted">—</span>
                        {% endif %}
                    </td>
                    <td class="td-cell td-cell--nowrap">
                        {% if row.lastBet %}
                            ₱{{ row.lastBet.amount|number_format(2) }}
                            <span class="td-cell--muted">&middot; {{ row.lastBet.placedAt|date('M d, H:i') }}</span>
                        {% else %}
                            <span class="td-cell--muted">—</span>
                        {% endif %}
                    </td>
                    <td class="td-cell">{{ row.lastBet ? row.lastBet.game : '—' }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="td-empty">
                        No deposit or bet activity from your {{ scope == 'all' ? 'downline' : 'direct players' }} yet.
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {{ insight.insight_pager('agent-insight-player-activity-table') }}
</div>

{# ── Recent transactions: direct players / sub-agent players ── #}
{% macro tx_type_badge(type) %}
    {% if type == 'deposit' %}
        <span class="badge-status badge-status--approved">Deposit</span>
    {% elseif type == 'withdrawal' %}
        <span class="badge-status badge-status--pending">Withdrawal</span>
    {% elseif type == 'win' %}
        <span class="badge-status badge-status--won">Win</span>
    {% elseif type == 'bet' %}
        <span class="badge-status badge-status--rejected">Bet</span>
    {% elseif type == 'commission' %}
        <span class="badge-status" style="background:#dbeafe; color:#1d4ed8;">Commission</span>
    {% else %}
        <span class="badge-status badge-status--neutral">{{ type|capitalize }}</span>
    {% endif %}
{% endmacro %}

{% macro insight_pager(testid) %}
    <div class="insight-pager" data-insight-pager="{{ testid }}" hidden>
        <button type="button" class="insight-pager__btn" data-insight-pager-prev>&lsaquo; Prev</button>
        <span class="insight-pager__info" data-insight-pager-info></span>
        <button type="button" class="insight-pager__btn" data-insight-pager-next>Next &rsaquo;</button>
    </div>
{% endmacro %}

{% macro tx_table(rows, testid, emptyText) %}
    {% import _self as helper %}
    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table" data-insight-paginate data-testid="{{ testid }}">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">Time</th>
                        <th class="th-white">Player</th>
                        <th class="th-white">Type</th>
                        <th class="th-white th-gray--right">Amount</th>
                        <th class="th-white th-gray--right">Balance After</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tx in rows %}
                    <tr class="table-row" data-testid="{{ testid }}-row">
                        <td class="td-cell td-cell--muted td-cell--nowrap">{{ tx.createdAt|date('M d, H:i') }}</td>
                        <td class="td-cell fw-semibold">{{ tx.user.firstName }} {{ tx.user.lastName }}</td>
                        <td class="td-cell">{{ helper.tx_type_badge(tx.type) }}</td>
                        <td class="td-cell td-cell--nowrap text-end fw-semibold">₱{{ tx.amount|number_format(2) }}</td>
                        <td class="td-cell td-cell--muted td-cell--nowrap text-end">₱{{ tx.balanceAfter|number_format(2) }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="td-empty">{{ emptyText }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {{ helper.insight_pager(testid) }}
    </div>
{% endmacro %}

<div class="row g-4">
    <div class="{{ scope == 'all' ? 'col-12 col-xl-6' : 'col-12' }}">
        <p class="text-white fw-semibold text-uppercase mb-2" style="font-size:11px; letter-spacing:.06em;">
            Direct Players — Recent Transactions
        </p>
        {{ insight.tx_table(directTx, 'agent-insight-direct-tx-table', 'No recent transactions from your direct players.') }}
    </div>
    {% if scope == 'all' %}
    <div class="col-12 col-xl-6">
        <p class="text-white fw-semibold text-uppercase mb-2" style="font-size:11px; letter-spacing:.06em;">
            Sub-Agents' Players — Recent Transactions
        </p>
        {{ insight.tx_table(subAgentTx, 'agent-insight-subagent-tx-table', 'No recent transactions from your sub-agents\' players.') }}
    </div>
    {% endif %}
</div>