{% extends "webapp/base.html" %}
{% block title %}{{ t('wallet') }} — FIGHTSKILL{% endblock %}
{% block content %}
<div style="max-width:1280px;margin:0 auto">

  <!-- Header -->
  <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap">
    <a href="{{ url_for('web.home') }}" class="btn btn-ghost btn-sm" style="margin-right:0.5rem">← {{ t('back') }}</a>
    <div style="flex:1">
      <h1 style="font-size:1.8rem"><span style="color:var(--neon)">{{ t('wallet') }}</span></h1>
      <p style="color:var(--text-muted);font-size:0.9rem">{{ t('wallet_note') }}</p>
    </div>
  </div>

  <!-- Wallets -->
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem">
    {% for w in wallets %}
    {% if w.kind=='deposit' %}
    <!-- Deposit Wallet Card -->
    <div class="card" style="border-color:rgba(140,100,235,0.3);background:linear-gradient(135deg,rgba(140,100,235,0.05),rgba(0,229,255,0.03));position:relative;overflow:hidden">
      <div style="position:absolute;top:-20px;right:-20px;font-size:120px;opacity:0.03">💰</div>
      <div style="color:var(--text-muted);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.75rem;font-weight:600">
        💳 {{ t('deposit_wallet') }}
      </div>
      <div style="font-family:'Orbitron';font-size:2.5rem;font-weight:900;color:var(--neon);text-shadow:0 0 20px rgba(140,100,235,0.4);margin-bottom:0.5rem">
        {{ "%.2f"|format(w.balance) }} <span style="font-size:1.1rem;color:var(--text-muted);font-weight:600">USDT</span>
      </div>
      <div style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;line-height:1.4">
        Use this balance to enter matches and tournaments
      </div>
      <form method="POST" action="{{ url_for('api.charge') }}" style="margin-top:1rem">
        <div style="display:flex;gap:0.5rem">
          <input type="hidden" name="wallet_id" value="{{ w.id }}">
          <input type="hidden" name="ajax" value="1">
          <input class="input" name="amount" type="number" placeholder="Amount (USDT)" min="10" step="0.01" style="flex:1;background:rgba(0,0,0,0.3);border:1px solid rgba(140,100,235,0.2)">
          <button type="submit" class="btn btn-primary" style="background:var(--neon);color:#000;font-weight:700">{{ t('charge') }}</button>
        </div>
      </form>
    </div>
    {% else %}
    <!-- Withdrawal Wallet Card -->
    <div class="card" style="border-color:rgba(56,189,248,0.3);background:linear-gradient(135deg,rgba(56,189,248,0.05),rgba(99,102,241,0.03));position:relative;overflow:hidden">
      <div style="position:absolute;top:-20px;right:-20px;font-size:120px;opacity:0.03">🏆</div>
      <div style="color:var(--text-muted);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.75rem;font-weight:600">
        🏆 Withdrawal Wallet
      </div>
      <div style="font-family:'Orbitron';font-size:2.5rem;font-weight:900;color:#38BDF8;text-shadow:0 0 20px rgba(56,189,248,0.4);margin-bottom:0.5rem">
        {{ "%.2f"|format(w.balance) }} <span style="font-size:1.1rem;color:var(--text-muted);font-weight:600">USDT</span>
      </div>
      <div style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;line-height:1.4">
        Prize money from tournaments — available for withdrawal
      </div>
      <button class="btn" style="width:100%;background:rgba(56,189,248,0.1);color:#38BDF8;border:1px solid rgba(56,189,248,0.3);font-weight:600" disabled>
        Withdraw (Coming Soon)
      </button>
    </div>
    {% endif %}
    {% endfor %}
  </div>

  <!-- Transactions -->
  <h2 style="font-size:1.3rem;margin-bottom:1rem">{{ t('transactions') }}</h2>
  <div class="card" style="padding:0;overflow:hidden">
    <div style="overflow-x:auto">
      <table style="width:100%;border-collapse:collapse">
        <thead>
          <tr style="background:var(--surface2)">
            <th style="padding:0.875rem 1rem;text-align:right;font-size:0.75rem;text-transform:uppercase;color:var(--text-muted)">{{ t('type') }}</th>
            <th style="padding:0.875rem 1rem;text-align:right;font-size:0.75rem;text-transform:uppercase;color:var(--text-muted)">{{ t('amount') }}</th>
            <th style="padding:0.875rem 1rem;text-align:right;font-size:0.75rem;text-transform:uppercase;color:var(--text-muted)">{{ t('reason') }}</th>
            <th style="padding:0.875rem 1rem;text-align:right;font-size:0.75rem;text-transform:uppercase;color:var(--text-muted)">{{ t('date') }}</th>
            <th style="padding:0.875rem 1rem;text-align:right;font-size:0.75rem;text-transform:uppercase;color:var(--text-muted)">{{ t('status') }}</th>
          </tr>
        </thead>
        <tbody>
          {% for tx in transactions %}
          <tr style="border-bottom:1px solid var(--border)">
            <td style="padding:0.875rem 1rem;text-align:right"><span class="badge badge-blue">{{ tx.kind }}</span></td>
            <td style="padding:0.875rem 1rem;text-align:right;font-weight:700;font-size:1rem;color:{{ 'var(--neon)' if tx.amount>0 else 'var(--pink)' }}">
              {{ '+' if tx.amount>0 else '' }}{{ tx.amount }}
            </td>
            <td style="padding:0.875rem 1rem;text-align:right;color:var(--text-dim);font-size:0.85rem">{{ tx.reason or '—' }}</td>
            <td style="padding:0.875rem 1rem;text-align:right;font-size:0.8rem;color:var(--text-muted)">{{ tx.created_at.strftime('%m/%d %H:%M') }}</td>
            <td style="padding:0.875rem 1rem;text-align:right"><span class="badge badge-neon">{{ tx.status }}</span></td>
          </tr>
          {% else %}
          <tr>
            <td colspan="5" style="padding:2rem;text-align:center;color:var(--text-muted)">{{ t('no_data') }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}