{% extends 'base.html' %}

{% block title %}{{ _('Wallet') }}{% endblock %}

{% block content %}
<div class="page-container" style="max-width: 900px; margin: 0 auto; padding: var(--spacing-2xl);">
    <h1><i class="fas fa-wallet text-accent"></i> {{ _('My Wallet') }}</h1>

    <!-- Balance Card -->
    <div class="card mb-3" style="background: var(--accent-gradient); border: none;">
        <div style="text-align: center;">
            <div style="font-size: 0.9rem; opacity: 0.9; margin-bottom: var(--spacing-xs);">{{ _('Available Balance') }}
            </div>
            <div style="font-family: var(--font-display); font-size: 3rem; font-weight: 900;">
                {{ "{:,.0f}".format(current_user.balance) }} <span style="font-size: 1.5rem;">XAF</span>
            </div>
        </div>

        <div style="display: flex; gap: var(--spacing-md); justify-content: center; margin-top: var(--spacing-lg);">
            <a href="{{ url_for('wallet.deposit') }}" class="btn"
                style="background: rgba(255,255,255,0.2); color: white;">
                <i class="fas fa-plus"></i> {{ _('Deposit') }}
            </a>
            <a href="{{ url_for('wallet.withdraw') }}" class="btn"
                style="background: rgba(255,255,255,0.2); color: white;">
                <i class="fas fa-minus"></i> {{ _('Withdraw') }}
            </a>
        </div>
    </div>

    <!-- Quick Deposit (Demo) -->
    {% if config.get('ENABLE_DEMO_DEPOSITS') %}
    <div class="card mb-3">
        <h3><i class="fas fa-bolt text-warning"></i> {{ _('Quick Deposit (Demo)') }}</h3>
        <p style="color: var(--text-muted); font-size: 0.9rem;">{{ _('Add test funds instantly for demo purposes.') }}
        </p>

        <div style="display: flex; flex-wrap: wrap; gap: var(--spacing-sm);">
            <a href="{{ url_for('wallet.demo_deposit', amount=5000) }}" class="btn btn-secondary btn-sm">+5,000 XAF</a>
            <a href="{{ url_for('wallet.demo_deposit', amount=10000) }}" class="btn btn-secondary btn-sm">+10,000
                XAF</a>
            <a href="{{ url_for('wallet.demo_deposit', amount=25000) }}" class="btn btn-secondary btn-sm">+25,000
                XAF</a>
            <a href="{{ url_for('wallet.demo_deposit', amount=50000) }}" class="btn btn-secondary btn-sm">+50,000
                XAF</a>
            <a href="{{ url_for('wallet.demo_deposit', amount=100000) }}" class="btn btn-secondary btn-sm">+100,000
                XAF</a>
        </div>
    </div>
    {% endif %}

    <!-- Recent Transactions -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-exchange-alt"></i>
                {{ _('Recent Transactions') }}
            </h3>
            <a href="{{ url_for('wallet.transactions') }}" class="btn btn-secondary btn-sm">
                {{ _('View All') }}
            </a>
        </div>

        {% if transactions %}
        <table class="bets-table" style="width: 100%;">
            <thead>
                <tr>
                    <th>{{ _('Date') }}</th>
                    <th>{{ _('Type') }}</th>
                    <th>{{ _('Amount') }}</th>
                    <th>{{ _('Status') }}</th>
                </tr>
            </thead>
            <tbody>
                {% for tx in transactions %}
                <tr>
                    <td>{{ tx.created_at.strftime('%d/%m %H:%M') }}</td>
                    <td>
                        {% if tx.type == 'deposit' %}
                        <span style="color: var(--success);"><i class="fas fa-arrow-down"></i> {{ _('Deposit') }}</span>
                        {% elif tx.type == 'withdrawal' %}
                        <span style="color: var(--warning);"><i class="fas fa-arrow-up"></i> {{ _('Withdrawal')
                            }}</span>
                        {% elif tx.type == 'bet' %}
                        <span style="color: var(--danger);"><i class="fas fa-dice"></i> {{ _('Bet') }}</span>
                        {% elif tx.type == 'win' %}
                        <span style="color: var(--success);"><i class="fas fa-trophy"></i> {{ _('Win') }}</span>
                        {% endif %}
                    </td>
                    <td class="{% if tx.amount > 0 %}text-success{% else %}text-danger{% endif %}">
                        {{ "{:+,.0f}".format(tx.amount) }} XAF
                    </td>
                    <td>
                        {% if tx.status == 'completed' %}
                        <span style="color: var(--success);">✓</span>
                        {% elif tx.status == 'pending' %}
                        <span style="color: var(--warning);">⏳</span>
                        {% else %}
                        <span style="color: var(--danger);">✗</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="text-center" style="padding: var(--spacing-xl); color: var(--text-muted);">
            <i class="fas fa-receipt" style="font-size: 2rem; margin-bottom: var(--spacing-md);"></i>
            <p>{{ _('No transactions yet') }}</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}