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

{% block title %}Bonuses — WFBO{% endblock %}
{% block wfbo_title %}Player Bonuses{% endblock %}

{% block wfbo_content %}

<style>
.bonus-status { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.bonus-status--active    { background: #dcfce7; color: #166534; }
.bonus-status--scheduled { background: #e0e7ff; color: #3730a3; }
.bonus-status--claimed   { background: #fef3c7; color: #92400e; }
.bonus-status--expired   { background: #f3f4f6; color: #6b7280; }
.bonus-status--cancelled { background: #fee2e2; color: #991b1b; }
.bonus-sub { font-size: 11px; color: #9ca3af; }
</style>

    {% for flash in app.flashes('success') %}
        <div class="alert alert-success mb-4" role="alert" data-testid="flash-success">{{ flash }}</div>
    {% endfor %}
    {% for flash in app.flashes('error') %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">{{ flash }}</div>
    {% endfor %}

    <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
        <p class="wfbo-card-desc mb-0">
            Bonuses granted to a specific user. They pop up on the player's home page during the claim period and are credited when clicked.
        </p>
        <a href="{{ path('app_wfbo_bonus_new') }}" class="pill-link--primary" data-testid="btn-new-bonus">+ New Bonus</a>
    </div>

    <div class="period-filter-bar mb-3">
        <a href="{{ path('app_wfbo_bonuses') }}" class="period-pill {% if status is null %}is-active{% endif %}" data-testid="bonus-filter-all">All</a>
        {% for s in statuses %}
            <a href="{{ path('app_wfbo_bonuses', {status: s}) }}"
               class="period-pill {% if status == s %}is-active{% endif %}"
               data-testid="bonus-filter-{{ s }}">{{ s|capitalize }}</a>
        {% endfor %}
    </div>

    <p class="pagination-info mb-3">{{ total }} bonus{{ total != 1 ? 'es' : '' }}{% if status %} &mdash; <strong>{{ status|capitalize }}</strong>{% endif %}</p>

    <div class="table-card">
        <div class="card-body p-0">
            {% if bonuses is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state">No bonuses found.</p>
            {% else %}
                <div class="table-scroll">
                <table class="w-100" data-testid="bonuses-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Image</th>
                            <th class="th-white">User</th>
                            <th class="th-white" style="text-align:right;">Amount</th>
                            <th class="th-white">Claim Period</th>
                            <th class="th-white">Status</th>
                            <th class="th-white">Created By</th>
                            <th class="th-white">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for bonus in bonuses %}
                        {% set st = bonus.status(now) %}
                        <tr class="table-row" data-testid="bonus-row-{{ bonus.id }}">
                            <td class="td-cell">
                                <img src="{{ bonus.imageUrl }}" alt="Bonus #{{ bonus.id }}" style="height: 40px; width: auto; border-radius: 4px;">
                            </td>
                            <td class="td-cell">
                                <a href="{{ path('app_wfbo_user_transactions', {id: bonus.user.id}) }}" class="td-cell--dark fw-semibold" style="text-decoration:none;">
                                    {{ bonus.user.firstName }} {{ bonus.user.lastName }}
                                </a>
                                <div class="bonus-sub">{{ bonus.user.mobileNumber }}</div>
                            </td>
                            <td class="td-cell fw-semibold" style="text-align:right;" data-testid="bonus-amount-{{ bonus.id }}">₱{{ bonus.amount|number_format(2) }}</td>
                            <td class="td-cell">
                                {{ bonus.claimFrom|date('M j, Y g:i A') }}
                                <div class="bonus-sub">to {{ bonus.claimUntil|date('M j, Y g:i A') }}</div>
                            </td>
                            <td class="td-cell">
                                <span class="bonus-status bonus-status--{{ st }}" data-testid="bonus-status-{{ bonus.id }}">{{ st }}</span>
                                {% if bonus.claimedAt %}
                                    <div class="bonus-sub" data-testid="bonus-claimed-at-{{ bonus.id }}">{{ bonus.claimedAt|date('M j, Y g:i A') }}</div>
                                {% elseif bonus.cancelledAt %}
                                    <div class="bonus-sub">{{ bonus.cancelledAt|date('M j, Y g:i A') }} by {{ bonus.cancelledBy.firstName }}</div>
                                {% endif %}
                            </td>
                            <td class="td-cell">
                                {{ bonus.createdBy.firstName }} {{ bonus.createdBy.lastName }}
                                <div class="bonus-sub">{{ bonus.createdAt|date('M j, Y g:i A') }}</div>
                                {% if bonus.updatedBy %}
                                    <div class="bonus-sub">edited by {{ bonus.updatedBy.firstName }}, {{ bonus.updatedAt|date('M j g:i A') }}</div>
                                {% endif %}
                            </td>
                            <td class="td-cell">
                                {% if bonus.open %}
                                <div class="d-flex gap-2 align-items-center">
                                    <a href="{{ path('app_wfbo_bonus_edit', {id: bonus.id}) }}" class="pill-link--secondary" data-testid="btn-edit-bonus-{{ bonus.id }}">Edit</a>
                                    <form method="POST" action="{{ path('app_wfbo_bonus_cancel', {id: bonus.id}) }}" class="m-0"
                                          onsubmit="return confirm('Cancel this ₱{{ bonus.amount|number_format(2) }} bonus? The player will no longer be able to claim it.');">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_bonus_cancel_' ~ bonus.id) }}">
                                        <input type="hidden" name="status" value="{{ status }}">
                                        <button type="submit" class="btn-reject" data-testid="btn-cancel-bonus-{{ bonus.id }}">Cancel</button>
                                    </form>
                                </div>
                                {% else %}
                                    <span class="text-muted">—</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                </div>
            {% endif %}
        </div>
    </div>

    {% if totalPages > 1 %}
    <nav class="d-flex align-items-center justify-content-between mt-3 flex-wrap gap-2">
        <p class="pagination-info" style="margin:0;">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_wfbo_bonuses', {page: currentPage - 1, status: status}) }}" class="btn-outline-sm">&larr; Prev</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_bonuses', {page: currentPage + 1, status: status}) }}" class="btn-outline-sm">Next &rarr;</a>
            {% endif %}
        </div>
    </nav>
    {% endif %}

{% endblock %}