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

{% block title %}Withdrawal Request{% endblock %}

{% block body %}
<div class="container page-container">

    {# Flash messages #}
    {% 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('danger') %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-danger">{{ flash }}</div>
    {% endfor %}

    <h1 data-testid="withdrawal-page-title">
        Withdrawal
    </h1>
    <p class="wfbo-card-desc mb-5">
        Request a withdrawal from your wallet balance.
    </p>

    {# ── Approval hours notice ── #}
    <div class="alert alert-warning mb-4" role="alert" data-testid="approval-hours-banner">
        <strong>Note:</strong> Approvals are processed from <strong>9:00 AM to 11:59 PM</strong> only.
    </div>

    {# ── Wallet balance hint ── #}
    <div class="wallet-hint">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/>
        </svg>
        <p class="wallet-hint__text">
            Available balance:
            <strong data-testid="available-balance">₱{{ app.user.walletBalance|number_format(2) }}</strong>
        </p>
    </div>

    {# ── WITHDRAWALS DISABLED ── #}
    {% if not allowed %}
        <div class="card text-center mb-5" style="border: 1px solid #e5e7eb; padding: 40px 24px;"
             data-testid="withdrawal-unavailable-card">
            <div class="unavailable-icon-circle">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                </svg>
            </div>
            <p class="mb-2" style="font-size: 16px; font-weight: 700; color: #ffffff;" data-testid="withdrawal-unavailable-title">
                Withdrawals temporarily unavailable
            </p>
            <p class="text-white mb-0" style="font-size: 14px;">
                Withdrawal requests are currently turned off. Please check back later.
            </p>
        </div>

    {# ── Withdrawal Form ── #}
    {% else %}
    <div class="card card--white mb-5" style="border: 1px solid #e5e7eb; padding: 28px 24px;">
        <h2 class="wfbo-card-title mb-4">New Withdrawal Request</h2>

        {{ form_start(withdrawalForm, {attr: {
            'data-testid': 'withdrawal-form',
            'data-controller': 'form-validate',
            'data-form-validate-min-value': min_withdrawal_amount > 0 ? min_withdrawal_amount : 1,
            'data-form-validate-max-value': app.user.walletBalance,
            'novalidate': 'novalidate',
            'data-turbo': 'false'
        }}) }}

            {# Error summary #}
            {% if withdrawalForm.vars.submitted and not withdrawalForm.vars.valid %}
                <div class="alert alert-danger mb-3" role="alert" data-testid="form-error-summary">
                    Please fix the errors below and try again.
                </div>
            {% endif %}

            {# Amount #}
            <div class="mb-3">
                {{ form_label(withdrawalForm.amount, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(withdrawalForm.amount) }}
                {{ form_errors(withdrawalForm.amount) }}
                <p class="form-hint">
                    Maximum: ₱{{ app.user.walletBalance|number_format(2) }}
                </p>
            </div>

            {# Bank details section #}
            <p class="form-section-title">
                Bank / E-Wallet Details
            </p>

            <div class="mb-3">
                {{ form_label(withdrawalForm.bankName, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(withdrawalForm.bankName) }}
                {{ form_errors(withdrawalForm.bankName) }}
            </div>

            <div class="mb-3">
                {{ form_label(withdrawalForm.bankAccountName, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(withdrawalForm.bankAccountName) }}
                {{ form_errors(withdrawalForm.bankAccountName) }}
            </div>

            <div class="mb-3">
                {{ form_label(withdrawalForm.bankAccountNumber, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(withdrawalForm.bankAccountNumber) }}
                {{ form_errors(withdrawalForm.bankAccountNumber) }}
            </div>

            <div class="mb-4">
                {{ form_label(withdrawalForm.notes, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(withdrawalForm.notes) }}
            </div>

            <button type="submit"
                    class="btn btn-form-submit"
                    data-testid="btn-withdrawal-submit">
                Submit Withdrawal Request
            </button>

        {{ form_end(withdrawalForm) }}
    </div>
    {% endif %}

    {# ── Withdrawal History ── #}
    <h2 class="mb-3">History</h2>

    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="withdrawal-history-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">Date</th>
                        <th class="th-white">Amount</th>
                        <th class="th-white">Bank Details</th>
                        <th class="th-white">Status</th>
                        <th class="th-white">Review Note</th>
                    </tr>
                </thead>
                <tbody>
                    {% for withdrawal in withdrawals %}
                    <tr class="table-row" data-testid="withdrawal-row-{{ withdrawal.id }}">
                        <td class="td-cell td-cell--muted td-cell--nowrap">
                            {{ withdrawal.createdAt|date('M d, Y') }}
                        </td>
                        <td class="td-cell td-cell--nowrap fw-semibold">
                            ₱{{ withdrawal.amount|number_format(2) }}
                        </td>
                        <td class="td-cell td-cell--dark">
                            <p class="fw-semibold mb-0" style="font-size: 13px;">{{ withdrawal.bankName }}</p>
                            <p class="text-muted mb-0" style="font-size: 12px;">{{ withdrawal.bankAccountName }}</p>
                            <p class="font-mono-sm mb-0" style="color: #374151;">{{ withdrawal.bankAccountNumber }}</p>
                        </td>
                        <td class="td-cell td-cell--nowrap">
                            {% if withdrawal.status == 'pending' %}
                                <span class="badge-status badge-status--pending" data-testid="badge-withdrawal-{{ withdrawal.id }}">Pending</span>
                            {% elseif withdrawal.status == 'approved' %}
                                <span class="badge-status badge-status--approved" data-testid="badge-withdrawal-{{ withdrawal.id }}">Approved</span>
                            {% else %}
                                <span class="badge-status badge-status--rejected" data-testid="badge-withdrawal-{{ withdrawal.id }}">Rejected</span>
                            {% endif %}
                        </td>
                        <td class="td-cell td-cell--muted">
                            {{ withdrawal.reviewNote ?? '—' }}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="td-empty">
                            No withdrawal requests yet.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

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

</div>
{% endblock %}