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

{% block title %}My Referrals{% endblock %}

{% block agent_content %}

    <h1 class="fw-bold mb-1 text-white" data-testid="agent-users-title">My Referrals</h1>
    <p class="mb-4" style="font-size:13px; color:#afafaf;">
        {{ total }} player{{ total != 1 ? 's' : '' }}{% if search %} matching "{{ search }}"{% else %} referred in total{% endif %}.
    </p>

    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ label == 'success' ? 'success' : 'danger' }} mb-3"
                 data-testid="{{ label == 'success' ? 'flash-success' : 'flash-error' }}"
                 style="border-radius:8px; font-size:13px;">
                {{ message }}
            </div>
        {% endfor %}
    {% endfor %}

    <form method="GET" action="{{ path('app_agent_users') }}" class="d-flex gap-2 mb-3" data-testid="agent-users-search-form">
        <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-users-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-users-search-btn">
            Search
        </button>
        {% if search %}
            <a href="{{ path('app_agent_users') }}"
               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-users-search-clear">
                Clear
            </a>
        {% endif %}
    </form>

    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="agent-users-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">Status</th>
                        <th class="th-white">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    {% set isAgent = 'ROLE_AGENT' in user.roles %}
                    {% set isSubAgent = 'ROLE_SUB_AGENT' in user.roles %}
                    <tr class="table-row" data-testid="agent-user-row-{{ user.id }}">
                        <td class="td-cell fw-semibold">
                            {% if not isAgent and not isSubAgent %}
                                <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>
                            {% else %}
                                {{ user.firstName }} {{ user.lastName }}
                            {% endif %}
                        </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">
                            {% if user.isSuspended %}
                                <span class="badge-status badge-status--rejected">Suspended</span>
                            {% else %}
                                <span class="badge-status badge-status--approved">Active</span>
                            {% endif %}
                        </td>
                        <td class="td-cell td-cell--nowrap">
                            {% set isMaster = is_granted('ROLE_MASTER_AGENT') %}
                            {% set promoteRole = isMaster ? 'Agent' : 'Sub-Agent' %}
                            {% if (isMaster or is_granted('ROLE_AGENT')) and not isAgent and not isSubAgent %}
                                <button type="button"
                                        onclick="openPromoteModal({{ user.id }}, '{{ user.firstName }} {{ user.lastName }}', '{{ path('app_agent_promote_agent', {id: user.id}) }}')"
                                        style="padding:5px 12px; border-radius:6px; background:#1a3a1a; color:#6bff6b; font-size:12px; font-weight:600; border:1px solid #2a5a2a; cursor:pointer;"
                                        data-testid="btn-promote-agent-{{ user.id }}">
                                    Set as {{ promoteRole }}
                                </button>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="td-empty">No referred 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-users-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_agent_users', {page: currentPage - 1, search: search}) }}" class="btn-page-prev">← Previous</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_agent_users', {page: currentPage + 1, search: search}) }}" class="btn-page-next">Next →</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {# Promote to Agent Modal #}
    <div id="promote-agent-modal"
         data-testid="promote-agent-modal"
         style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1000; align-items:center; justify-content:center;">
        <div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:12px; padding:28px 32px; width:100%; max-width:420px; position:relative;">
            <button onclick="closePromoteModal()"
                    style="position:absolute; top:12px; right:16px; background:none; border:none; color:#afafaf; font-size:20px; cursor:pointer; line-height:1;">×</button>
            <h3 style="color:#ffffff; font-size:16px; font-weight:700; margin-bottom:6px;">Promote to Agent</h3>
            <p id="promote-modal-subtitle" style="color:#afafaf; font-size:13px; margin-bottom:20px;"></p>

            <form id="promote-agent-form" method="POST" action="">
                <label style="color:#afafaf; font-size:12px; font-weight:600; display:block; margin-bottom:6px;">
                    Casino Commission Rate (%)
                </label>
                <p style="color:#6b6b6b; font-size:11px; margin-bottom:10px;">
                    Percentage of the master commission this agent will receive from casino games (VK, Pataasan).
                </p>
                <input type="number" name="commission_rate" id="promote-modal-rate"
                       data-testid="input-promote-commission-rate"
                       min="0" max="100" step="0.01" required
                       placeholder="e.g. 30"
                       style="width:100%; background:#111; border:1px solid #2a2a2a; color:#fff; border-radius:8px; padding:10px 12px; font-size:14px; margin-bottom:16px;">

                <label style="color:#afafaf; font-size:12px; font-weight:600; display:block; margin-bottom:6px;">
                    Live Racing Commission Rate (%)
                </label>
                <p style="color:#6b6b6b; font-size:11px; margin-bottom:10px;">
                    Percentage of the bet amount this agent will earn from Live Racing. Max is the upline's rate.
                </p>
                <input type="number" name="live_racing_commission_rate" id="promote-modal-lr-rate"
                       data-testid="input-promote-lr-commission-rate"
                       min="0" max="100" step="0.01"
                       placeholder="e.g. 5"
                       style="width:100%; background:#111; border:1px solid #2a2a2a; color:#fff; border-radius:8px; padding:10px 12px; font-size:14px; margin-bottom:20px;">
                <div class="d-flex gap-2">
                    <button type="submit"
                            data-testid="btn-confirm-promote"
                            style="flex:1; padding:10px; border-radius:8px; background:#ffffff; color:#000000; font-size:13px; font-weight:700; border:none; cursor:pointer;">
                        Confirm Promotion
                    </button>
                    <button type="button" onclick="closePromoteModal()"
                            style="padding:10px 16px; border-radius:8px; background:transparent; color:#afafaf; font-size:13px; font-weight:600; border:1px solid #2a2a2a; cursor:pointer;">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>

<script>
function openPromoteModal(userId, userName, actionUrl) {
    const modal = document.getElementById('promote-agent-modal');
    document.getElementById('promote-modal-subtitle').textContent = 'Set the commission split for ' + userName + '.';
    document.getElementById('promote-agent-form').action = actionUrl;
    document.getElementById('promote-modal-rate').value = '';
    modal.style.display = 'flex';
}

function closePromoteModal() {
    document.getElementById('promote-agent-modal').style.display = 'none';
}

document.getElementById('promote-agent-modal').addEventListener('click', function(e) {
    if (e.target === this) closePromoteModal();
});
</script>

{% endblock %}