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

{% block title %}Player Monitor{% endblock %}

{% block agent_content %}

    <h1 class="fw-bold mb-1 text-white" data-testid="agent-player-monitor-title">Player Monitor</h1>
    <p class="mb-4" style="font-size:13px; color:#afafaf;">
        Last load, days since, and lifetime cash-in / cash-out per downline player.
        <span style="color:#6b7280;">Active = loaded ≤ {{ activeDays }}d &middot; Watch = {{ activeDays + 1 }}–{{ inactiveDays }}d &middot; Inactive = {{ inactiveDays }}d+ or never &middot; New = registered ≤ {{ newDays }}d ago (shown first).</span>
    </p>

    {% set scopes = [{key: 'direct', label: 'Direct players'}, {key: 'all', label: 'All downlines'}] %}
    <div class="period-filter-bar mb-3" data-testid="agent-player-monitor-scope-bar">
        {% for s in scopes %}
            <a href="{{ path('app_agent_player_monitor', {scope: s.key, filter: filter, search: search}) }}"
               class="period-pill--dark{{ scope == s.key ? ' is-active' : '' }}"
               data-testid="agent-player-monitor-scope-{{ s.key }}">{{ s.label }}</a>
        {% endfor %}
    </div>

    {% set filters = [
        {key: 'all',      label: 'All'},
        {key: 'new',      label: 'Newly Registered'},
        {key: 'active',   label: 'Active'},
        {key: 'watch',    label: 'Watch'},
        {key: 'inactive', label: 'Inactive'},
    ] %}
    <div class="period-filter-bar mb-3" data-testid="agent-player-monitor-filter-bar">
        {% for f in filters %}
            <a href="{{ path('app_agent_player_monitor', {scope: scope, filter: f.key, search: search}) }}"
               class="period-pill--dark{{ filter == f.key ? ' is-active' : '' }}"
               data-testid="agent-player-monitor-filter-{{ f.key }}">
                {{ f.label }} ({{ counts[f.key] }})
            </a>
        {% endfor %}
    </div>

    <form method="GET" action="{{ path('app_agent_player_monitor') }}" class="d-flex gap-2 mb-3" data-testid="agent-player-monitor-search-form">
        <input type="hidden" name="scope" value="{{ scope }}">
        <input type="hidden" name="filter" value="{{ filter }}">
        <input type="search" name="search" value="{{ search }}" placeholder="Search by name or mobile…"
               class="form-control"
               style="max-width:320px; background:#1a1a1a; border:1px solid #2a2a2a; color:#ffffff; border-radius:8px; padding:8px 12px; font-size:13px;"
               data-testid="agent-player-monitor-search-input">
        <button type="submit" style="padding:8px 18px; border-radius:8px; background:#ffffff; color:#000000; font-size:13px; font-weight:600; border:none; cursor:pointer;">Search</button>
        {% if search %}
            <a href="{{ path('app_agent_player_monitor', {scope: scope, filter: filter}) }}"
               style="padding:8px 14px; border-radius:8px; border:1px solid #2a2a2a; color:#afafaf; font-size:13px; text-decoration:none; display:inline-flex; align-items:center;">Clear</a>
        {% endif %}
    </form>

    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="agent-player-monitor-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">Player</th>
                        {% if scope == 'all' %}<th class="th-white" data-testid="agent-player-monitor-agent-head">Agent</th>{% endif %}
                        <th class="th-white">Mobile</th>
                        <th class="th-white">Last Load</th>
                        <th class="th-white">Days Since</th>
                        <th class="th-white">Cash In</th>
                        <th class="th-white">Cash Out</th>
                        <th class="th-white">Last Bet</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in rows %}
                    {% set tint = r.bucket == 'inactive' ? 'background:rgba(176,0,32,0.10);' : (r.bucket == 'watch' ? 'background:rgba(234,179,8,0.10);' : '') %}
                    <tr class="table-row" style="{{ tint }}" data-testid="agent-player-monitor-row-{{ r.id }}">
                        <td class="td-cell fw-semibold">
                            <a href="{{ path('app_agent_player_detail', {id: r.id}) }}" data-testid="agent-player-link-{{ r.id }}" style="color:inherit; text-decoration:underline; text-underline-offset:2px;">
                                {{ r.firstName }} {{ r.lastName }}
                            </a>
                            {% if r.isNew %}<span class="badge-status badge-status--approved ms-1" data-testid="badge-new-{{ r.id }}">New</span>{% endif %}
                            {% if r.bucket == 'inactive' %}<span class="badge-status badge-status--rejected ms-1" data-testid="badge-inactive-{{ r.id }}">Inactive</span>
                            {% elseif r.bucket == 'watch' %}<span class="badge-status badge-status--pending ms-1" data-testid="badge-watch-{{ r.id }}">Watch</span>{% endif %}
                        </td>
                        {% if scope == 'all' %}
                        <td class="td-cell td-cell--muted" data-testid="agent-player-monitor-agent-{{ r.id }}">
                            {{ r.agent ? r.agent.firstName ~ ' ' ~ r.agent.lastName : '—' }}
                        </td>
                        {% endif %}
                        <td class="td-cell td-cell--muted font-mono-sm">{{ r.mobileNumber }}</td>
                        <td class="td-cell td-cell--muted td-cell--nowrap" data-testid="agent-player-monitor-lastload-{{ r.id }}">
                            {{ r.lastLoadAt ? r.lastLoadAt|date('M d, Y') : 'Never' }}
                        </td>
                        <td class="td-cell fw-semibold" data-testid="agent-player-monitor-days-{{ r.id }}">
                            {{ r.daysSinceLoad is null ? '—' : r.daysSinceLoad ~ 'd' }}
                        </td>
                        <td class="td-cell">₱{{ r.cashIn|number_format(2) }}</td>
                        <td class="td-cell">₱{{ r.cashOut|number_format(2) }}</td>
                        <td class="td-cell td-cell--muted td-cell--nowrap">
                            {% if r.lastBet %}{{ r.lastBet.placedAt|date('M d, H:i') }} <span style="color:#6b7280;">· {{ r.lastBet.game }}</span>{% else %}—{% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="{{ scope == 'all' ? 8 : 7 }}" class="td-empty">No players match this filter.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

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

{% endblock %}