{% extends 'base.html.twig' %}

{% block title %}Transactions{% endblock %}

{% block body %}
{% set _setting = setting_service.getSettings() %}
<div class="container page-container">

    {# ── Header ── #}
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-2">
        <h1 class="mb-0" data-testid="transactions-page-title">
            Transactions
        </h1>
        <div class="d-flex gap-2 flex-wrap">
            {% if not is_granted('ROLE_AGENT_PORTAL') and _setting.withdrawalRequestsEnabled %}
            <a href="{{ path('app_withdrawal') }}"
               class="pill-link--secondary"
               data-testid="btn-new-withdrawal">
                − Withdraw
            </a>
            {% endif %}
            <a href="{{ path('app_deposit') }}"
               class="pill-link--primary"
               data-testid="btn-new-deposit">
                + New Deposit
            </a>
        </div>
    </div>
    <p class="wfbo-card-desc">
        Full history of your wallet transactions.
    </p>

    {# ── Type tabs ── #}
    <div class="d-flex gap-2 mb-4 tabs-border-bottom">

        <a href="{{ path('app_transactions', {type: 'all'}) }}"
           class="tab-link {% if currentType == 'all' %}is-active{% endif %}"
           data-testid="tab-all">
            All
            <span class="tab-count">{{ total }}</span>
        </a>

        <a href="{{ path('app_transactions', {type: 'deposits'}) }}"
           class="tab-link {% if currentType == 'deposits' %}is-active{% endif %}"
           data-testid="tab-deposits">
            Deposits
            {% if depositCount > 0 %}
                <span class="tab-count">{{ depositCount }}</span>
            {% endif %}
        </a>

        {% if not is_granted('ROLE_AGENT_PORTAL') %}
        <a href="{{ path('app_transactions', {type: 'withdrawals'}) }}"
           class="tab-link {% if currentType == 'withdrawals' %}is-active{% endif %}"
           data-testid="tab-withdrawals">
            Withdrawals
            {% if withdrawalCount > 0 %}
                <span class="tab-count">{{ withdrawalCount }}</span>
            {% endif %}
        </a>
        {% endif %}

        <a href="{{ path('app_transactions', {type: 'adjustments'}) }}"
           class="tab-link {% if currentType == 'adjustments' %}is-active{% endif %}"
           data-testid="tab-adjustments">
            Adjustments
            {% if adjustmentCount > 0 %}
                <span class="tab-count">{{ adjustmentCount }}</span>
            {% endif %}
        </a>

    </div>

    {# ── Unified transactions table ── #}
    {% set showTable = currentType in ['all', 'deposits', 'withdrawals', 'adjustments'] %}
    {% if showTable %}
    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="transactions-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-gray">Date</th>
                        <th class="th-gray">Type</th>
                        <th class="th-gray">Description</th>
                        <th class="th-gray th-gray--right">Amount</th>
                        <th class="th-gray th-gray--right">Balance</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tx in transactions %}
                    <tr class="table-row" data-testid="transaction-row-{{ tx.id }}">
                        <td class="td-cell td-cell--muted td-cell--nowrap">
                            <p class="date-primary">{{ tx.createdAt|date('M d, Y') }}</p>
                            <p class="date-secondary">{{ tx.createdAt|date('h:i A') }}</p>
                        </td>
                        <td class="td-cell">
                            {% if tx.type == 'deposit' %}
                                <span class="badge-status badge-status--approved">Deposit</span>
                            {% elseif tx.type == 'withdrawal' %}
                                <span class="badge-status badge-status--pending">Withdrawal</span>
                            {% elseif tx.type == 'bet' %}
                                <span class="badge-status" style="background:#fef3c7; color:#92400e;">Bet</span>
                            {% elseif tx.type == 'win' %}
                                <span class="badge-status badge-status--approved">Win</span>
                            {% elseif tx.type == 'adjustment' %}
                                <span class="badge-status" style="background:#e0e7ff; color:#3730a3;">Adjustment</span>
                            {% elseif tx.type == 'refund' %}
                                <span class="badge-status badge-status--approved">Refund</span>
                            {% else %}
                                <span class="badge-status">{{ tx.type|capitalize }}</span>
                            {% endif %}
                        </td>
                        <td class="td-cell td-cell--dark" style="max-width: 240px;">
                            <span class="text-truncate-cell">{{ tx.description ?? '—' }}</span>
                        </td>
                        <td class="td-cell text-end text-nowrap">
                            {% set absAmount = tx.absoluteAmount %}
                            {% if tx.amount > 0 %}
                                <p class="amount-approved">+₱{{ absAmount|number_format(2) }}</p>
                            {% else %}
                                <p class="amount-rejected">-₱{{ absAmount|number_format(2) }}</p>
                            {% endif %}
                        </td>
                        <td class="td-cell text-end text-nowrap td-cell--dark">
                            ₱{{ tx.balanceAfter|number_format(2) }}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="td-empty td-empty--lg">
                            <p class="fs-4 mb-2">📋</p>
                            <p class="fw-semibold mb-1">No transactions yet</p>
                            <p class="wfbo-card-desc mb-0">Your wallet activity will appear here.</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {# ── Pagination ── #}
    {% if totalPages > 1 %}
    <div class="d-flex align-items-center justify-content-between mt-4" data-testid="transactions-pagination">
        <p class="pagination-info">
            Page {{ currentPage }} of {{ totalPages }} &nbsp;·&nbsp; {{ total }} total
        </p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_transactions', {page: currentPage - 1, type: currentType}) }}"
                   class="btn-page-prev">
                    ← Previous
                </a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_transactions', {page: currentPage + 1, type: currentType}) }}"
                   class="btn-page-next">
                    Next →
                </a>
            {% endif %}
        </div>
    </div>
    {% endif %}

</div>
{% endblock %}