{% extends 'adminpanel/base.html' %}

{% block title %}Withdrawal Management · Admin Panel{% endblock %}

{% block content %}
<div class="mb-6">
  <a href="{% url 'adminpanel:dashboard' %}" class="text-blue-400 hover:text-blue-300 text-sm">← Back to Dashboard</a>
</div>

<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold">💸 Withdrawal Management</h1>
  <a href="{% url 'adminpanel:transactions' %}" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm transition">
    View All Transactions
  </a>
</div>

<!-- Statistics -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
  <div class="p-4 rounded-xl bg-yellow-900/20 border border-yellow-800">
    <div class="text-sm text-yellow-300">Pending Withdrawals</div>
    <div class="text-2xl font-bold text-yellow-400">{{ stats.pending_count }}</div>
    <div class="text-xs text-yellow-300 mt-1">Total: ${{ stats.pending_amount }}</div>
  </div>
  
  <div class="p-4 rounded-xl bg-amber-900/20 border border-amber-800">
    <div class="text-sm text-amber-300">Completed Today</div>
    <div class="text-2xl font-bold text-amber-400">{{ stats.completed_today }}</div>
    <div class="text-xs text-amber-300 mt-1">Total: ${{ stats.completed_amount_today }}</div>
  </div>
  
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Average Processing Time</div>
    <div class="text-2xl font-bold">~2h</div>
    <div class="text-xs text-slate-400 mt-1">Last 24 hours</div>
  </div>
  
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Success Rate</div>
    <div class="text-2xl font-bold text-amber-400">98%</div>
    <div class="text-xs text-slate-400 mt-1">Last 30 days</div>
  </div>
</div>

<!-- Filter Tabs -->
<div class="mb-6">
  <div class="flex gap-2 flex-wrap">
    <a href="?status=pending" class="px-4 py-2 rounded-lg {% if status_filter == 'pending' %}bg-yellow-600{% else %}bg-slate-800 hover:bg-slate-700{% endif %} transition">
      ⏳ Pending
    </a>
    <a href="?status=completed" class="px-4 py-2 rounded-lg {% if status_filter == 'completed' %}bg-amber-600{% else %}bg-slate-800 hover:bg-slate-700{% endif %} transition">
      ✓ Completed
    </a>
    <a href="?status=failed" class="px-4 py-2 rounded-lg {% if status_filter == 'failed' %}bg-red-600{% else %}bg-slate-800 hover:bg-slate-700{% endif %} transition">
      ✗ Declined
    </a>
    <a href="?status=all" class="px-4 py-2 rounded-lg {% if status_filter == 'all' %}bg-blue-600{% else %}bg-slate-800 hover:bg-slate-700{% endif %} transition">
      📋 All
    </a>
  </div>
</div>

<!-- Withdrawals List -->
<div class="p-6 rounded-xl bg-slate-900 border border-slate-800">
  {% if status_filter == 'pending' and withdrawals %}
    <!-- Bulk Actions for Pending -->
    <form method="post" id="bulkForm" class="mb-4">
      {% csrf_token %}
      <div class="flex gap-2 flex-wrap">
        <button type="submit" formaction="{% url 'adminpanel:bulk_approve_withdrawals' %}" 
                onclick="return confirm('Approve selected withdrawals?')"
                class="px-4 py-2 bg-amber-600 hover:bg-amber-700 rounded-lg text-sm transition">
          ✓ Approve Selected
        </button>
        <button type="button" onclick="showDeclineModal()" 
                class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg text-sm transition">
          ✗ Decline Selected
        </button>
        <button type="button" onclick="toggleAll()" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm transition">
          Select All
        </button>
      </div>
  {% endif %}
  
  <div class="overflow-x-auto mt-4">
    <table class="min-w-full text-sm">
      <thead class="text-slate-400 border-b border-slate-800">
        <tr>
          {% if status_filter == 'pending' %}
            <th class="text-left py-2 pr-4">
              <input type="checkbox" id="selectAllCheckbox" class="w-4 h-4" onclick="toggleAll()">
            </th>
          {% endif %}
          <th class="text-left py-2 pr-4">Date</th>
          <th class="text-left py-2 pr-4">User</th>
          <th class="text-left py-2 pr-4">Amount</th>
          <th class="text-left py-2 pr-4">Bucket</th>
          <th class="text-left py-2 pr-4">Status</th>
          <th class="text-left py-2 pr-4">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for withdrawal in withdrawals %}
          <tr class="border-b border-slate-800 hover:bg-slate-800/30">
            {% if status_filter == 'pending' %}
              <td class="py-3 pr-4">
                <input type="checkbox" name="withdrawal_ids" value="{{ withdrawal.id }}" class="withdrawal-checkbox w-4 h-4">
              </td>
            {% endif %}
            <td class="py-3 pr-4">
              <div>{{ withdrawal.created_at|date:"Y-m-d" }}</div>
              <div class="text-xs text-slate-400">{{ withdrawal.created_at|date:"H:i" }}</div>
            </td>
            <td class="py-3 pr-4">
              <a href="{% url 'adminpanel:user_detail' withdrawal.user.id %}" class="text-blue-400 hover:text-blue-300">
                {{ withdrawal.user.email }}
              </a>
              <div class="text-xs text-slate-400">{{ withdrawal.user.username }}</div>
            </td>
            <td class="py-3 pr-4">
              <div class="font-bold text-lg">${{ withdrawal.amount }}</div>
            </td>
            <td class="py-3 pr-4">
              <span class="px-2 py-1 rounded text-xs {% if withdrawal.account_bucket == 'capital' %}bg-blue-600{% elif withdrawal.account_bucket == 'profit' %}bg-amber-600{% else %}bg-purple-600{% endif %}">
                {{ withdrawal.get_account_bucket_display }}
              </span>
            </td>
            <td class="py-3 pr-4">
              <span class="px-2 py-1 rounded text-xs {% if withdrawal.status == 'completed' %}bg-amber-600{% elif withdrawal.status == 'pending' %}bg-yellow-600{% else %}bg-red-600{% endif %}">
                {{ withdrawal.get_status_display }}
              </span>
            </td>
            <td class="py-3 pr-4">
              {% if withdrawal.status == 'pending' %}
                <div class="flex gap-2">
                  <form method="post" action="{% url 'adminpanel:withdrawal_approve' withdrawal.id %}" class="inline">
                    {% csrf_token %}
                    <button type="submit" onclick="return confirm('Approve this withdrawal of ${{ withdrawal.amount }}?')"
                            class="px-3 py-1 bg-amber-600 hover:bg-amber-700 rounded text-xs transition">
                      ✓ Approve
                    </button>
                  </form>
                  <button type="button" onclick="showSingleDeclineModal({{ withdrawal.id }}, '{{ withdrawal.user.email }}', '{{ withdrawal.amount }}')"
                          class="px-3 py-1 bg-red-600 hover:bg-red-700 rounded text-xs transition">
                    ✗ Decline
                  </button>
                </div>
              {% else %}
                <a href="{% url 'adminpanel:transaction_detail' withdrawal.id %}" class="text-blue-400 hover:text-blue-300 text-xs">
                  View Details →
                </a>
              {% endif %}
            </td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="{% if status_filter == 'pending' %}7{% else %}6{% endif %}" class="py-8 text-slate-400 text-center">
              <div class="text-4xl mb-2">📭</div>
              <div>No withdrawals found</div>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  
  {% if status_filter == 'pending' and withdrawals %}
    </form>
  {% endif %}
</div>

<!-- Decline Modal -->
<div id="declineModal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50" onclick="hideDeclineModal(event)">
  <div class="bg-slate-900 rounded-xl p-6 max-w-md w-full mx-4 border border-slate-800" onclick="event.stopPropagation()">
    <h3 class="text-lg font-bold mb-4">Decline Withdrawal(s)</h3>
    <form method="post" id="declineForm">
      {% csrf_token %}
      <div class="mb-4">
        <label class="block text-sm text-slate-400 mb-2">Reason for declining:</label>
        <textarea name="reason" rows="3" required
                  class="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-red-500"
                  placeholder="Enter reason..."></textarea>
      </div>
      <div class="flex gap-3">
        <button type="submit" class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition">
          Decline
        </button>
        <button type="button" onclick="hideDeclineModal()" class="flex-1 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition">
          Cancel
        </button>
      </div>
    </form>
  </div>
</div>

<script>
function toggleAll() {
  const checkboxes = document.querySelectorAll('.withdrawal-checkbox');
  const selectAll = document.getElementById('selectAllCheckbox');
  checkboxes.forEach(cb => cb.checked = selectAll.checked);
}

function showDeclineModal() {
  const checked = document.querySelectorAll('.withdrawal-checkbox:checked');
  if (checked.length === 0) {
    alert('Please select at least one withdrawal to decline.');
    return;
  }
  document.getElementById('declineForm').action = "{% url 'adminpanel:bulk_decline_withdrawals' %}";
  
  // Copy selected checkboxes to modal form
  checked.forEach(cb => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'withdrawal_ids';
    input.value = cb.value;
    document.getElementById('declineForm').appendChild(input);
  });
  
  document.getElementById('declineModal').classList.remove('hidden');
}

function showSingleDeclineModal(id, email, amount) {
  document.getElementById('declineForm').action = "{% url 'adminpanel:withdrawals' %}".replace('withdrawals/', `withdrawals/${id}/decline/`);
  document.getElementById('declineModal').classList.remove('hidden');
}

function hideDeclineModal(event) {
  if (!event || event.target === event.currentTarget) {
    document.getElementById('declineModal').classList.add('hidden');
    document.getElementById('declineForm').reset();
    // Remove added hidden inputs
    document.querySelectorAll('#declineForm input[type="hidden"]').forEach(input => {
      if (input.name === 'withdrawal_ids') input.remove();
    });
  }
}
</script>

{% endblock %}