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

{% block title %}Downline{% endblock %}

{% block agent_content %}

    <h1 class="fw-bold mb-1 text-white" data-testid="agent-downline-title">My Downline</h1>
    <p class="mb-4" style="font-size:13px; color:#afafaf;">
        {{ total }} player{{ total != 1 ? 's' : '' }}
        {%- if selectedAgentName %} referred by {{ selectedAgentName }}{% endif %}
        {%- if search %} matching "{{ search }}"{% elseif not selectedAgentName %}
            across your whole downline{% if agentCount > 0 %} &middot; {{ agentCount }} agent{{ agentCount != 1 ? 's' : '' }}{% endif %}
        {%- endif %}.
    </p>

    <form method="GET" action="{{ path('app_agent_downline') }}" class="d-flex gap-2 mb-3 flex-wrap" data-testid="agent-downline-search-form">
        <select name="agent"
                class="form-select"
                onchange="this.form.submit()"
                style="max-width:260px; background-color:#1a1a1a; border:1px solid #2a2a2a; color:#ffffff; border-radius:8px; padding:8px 32px 8px 12px; font-size:13px;"
                aria-label="Filter by agent"
                data-testid="agent-downline-agent-filter">
            <option value="">All agents</option>
            <option value="{{ app.user.id }}" {{ selectedAgent == app.user.id ? 'selected' }}>Me — my direct players</option>
            {% for a in downlineAgents %}
                <option value="{{ a.id }}" {{ selectedAgent == a.id ? 'selected' }}>
                    {{ a.firstName }} {{ a.lastName }} ({{ 'ROLE_SUB_AGENT' in a.roles ? 'Sub-agent' : 'Agent' }})
                </option>
            {% endfor %}
        </select>
        <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-downline-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; white-space:nowrap;"
                data-testid="agent-downline-search-btn">
            Search
        </button>
        {% if search or selectedAgent %}
            <a href="{{ path('app_agent_downline') }}"
               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;"
               data-testid="agent-downline-search-clear">
                Clear
            </a>
        {% endif %}
    </form>

    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="agent-downline-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">Name</th>
                        <th class="th-white">Mobile</th>
                        <th class="th-white">Wallet</th>
                        <th class="th-white">Registered</th>
                        <th class="th-white">Referred By</th>
                        <th class="th-white">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in players %}
                    <tr class="table-row" data-testid="agent-downline-row-{{ user.id }}">
                        <td class="td-cell fw-semibold">
                            <a href="{{ path('app_agent_player_detail', {id: user.id}) }}" data-testid="agent-player-link-{{ user.id }}" style="color:inherit; text-decoration:underline; text-underline-offset:2px;">
                                {{ user.firstName }} {{ user.lastName }}
                            </a>
                        </td>
                        <td class="td-cell td-cell--muted font-mono-sm">{{ user.mobileNumber }}</td>
                        <td class="td-cell fw-semibold">₱{{ user.walletBalance|number_format(2) }}</td>
                        <td class="td-cell td-cell--muted td-cell--nowrap">
                            {{ user.createdAt ? user.createdAt|date('M d, Y') : '—' }}
                        </td>
                        <td class="td-cell td-cell--muted">
                            {{ user.referredBy ? user.referredBy.firstName ~ ' ' ~ user.referredBy.lastName : '—' }}
                        </td>
                        <td class="td-cell">
                            {% if user.isSuspended %}
                                <span class="badge-status badge-status--rejected">Suspended</span>
                            {% else %}
                                <span class="badge-status badge-status--approved">Active</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="td-empty">No downline players yet.</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-downline-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_agent_downline', {page: currentPage - 1, search: search, agent: selectedAgent}) }}" class="btn-page-prev">← Previous</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_agent_downline', {page: currentPage + 1, search: search, agent: selectedAgent}) }}" class="btn-page-next">Next →</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

{% endblock %}