{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h1 class="display-6 fw-bold">🔐 Crypto Operations Center</h1>
      <p class="text-muted">Review, verify, and manage all crypto deposits & withdrawals</p>
    </div>
    <a href="{% url 'core:admin_investment_management' %}" class="btn btn-outline-secondary">
      ← Back to Main Dashboard
    </a>
  </div>

  <!-- Summary Stats -->
  <div class="row g-4 mb-5">
    <div class="col-md-3">
      <div class="card border-0 shadow-sm h-100 bg-primary text-white">
        <div class="card-body">
          <h6 class="text-uppercase">Pending Deposits</h6>
          <h2 class="mb-0">{{ pending_deposits_count }}</h2>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm h-100 bg-warning text-dark">
        <div class="card-body">
          <h6 class="text-uppercase">Pending Withdrawals</h6>
          <h2 class="mb-0">{{ pending_withdrawals_count }}</h2>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <h6 class="text-uppercase text-muted">Today's Volume</h6>
          <h4 class="mb-0 text-success">$12,450</h4>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <h6 class="text-uppercase text-muted">Auto-Verified</h6>
          <h4 class="mb-0 text-info">87%</h4>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-4">
    <!-- Pending Deposits -->
    <div class="col-lg-7">
      <div class="card shadow-sm">
        <div class="card-header bg-dark text-white d-flex justify-content-between">
          <h5 class="mb-0">Pending Deposits</h5>
          <span class="badge bg-light text-dark">{{ pending_deposits|length }} items</span>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th>User</th>
                  <th>Amount</th>
                  <th>Method</th>
                  <th>Submitted</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for tx in pending_deposits %}
                <tr>
                  <td><strong>{{ tx.user.username }}</strong></td>
                  <td><strong>${{ tx.amount|floatformat:2 }}</strong></td>
                  <td><span class="badge bg-info">{{ tx.provider|upper }}</span></td>
                  <td>{{ tx.created_at|date:"M d, H:i" }}</td>
                  <td>
                    <!-- Auto Verify -->
                    <button onclick="autoVerifyDeposit({{ tx.pk }})" 
                            class="btn btn-sm btn-outline-primary me-1">
                      🔍 Auto Verify
                    </button>
                    
                    <!-- Approve -->
                    <form method="post" action="{% url 'core:approve_crypto_deposit' tx.pk %}" class="d-inline">
                      {% csrf_token %}
                      <input type="text" name="tx_hash" placeholder="TX Hash" 
                             class="form-control form-control-sm d-inline-block w-50" required>
                      <button type="submit" class="btn btn-success btn-sm">Approve</button>
                    </form>
                    
                    <!-- Reject -->
                    <form method="post" action="{% url 'core:reject_crypto_deposit' tx.pk %}" class="d-inline">
                      {% csrf_token %}
                      <button type="submit" class="btn btn-danger btn-sm">Reject</button>
                    </form>
                  </td>
                </tr>
                {% empty %}
                <tr>
                  <td colspan="5" class="text-center py-4 text-muted">No pending deposits.</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Pending Withdrawals -->
    <div class="col-lg-5">
      <div class="card shadow-sm">
        <div class="card-header bg-dark text-white">
          <h5 class="mb-0">Pending Withdrawals</h5>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th>User</th>
                  <th>Amount</th>
                  <th>Method</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for wd in pending_withdrawals %}
                <tr>
                  <td><strong>{{ wd.user.username }}</strong></td>
                  <td>${{ wd.amount|floatformat:2 }}</td>
                  <td>{{ wd.provider|title }}</td>
                  <td>
                    <form method="post" action="{% url 'core:approve_withdrawal' wd.pk %}" class="d-inline">
                      {% csrf_token %}
                      <button type="submit" class="btn btn-success btn-sm">Approve</button>
                    </form>
                    <form method="post" action="{% url 'core:reject_withdrawal' wd.pk %}" class="d-inline">
                      {% csrf_token %}
                      <button type="submit" class="btn btn-danger btn-sm">Reject</button>
                    </form>
                  </td>
                </tr>
                {% empty %}
                <tr>
                  <td colspan="4" class="text-center py-4 text-muted">No pending withdrawals.</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Charts Section -->
  <div class="row mt-5">
    <div class="col-lg-6">
      <div class="card shadow-sm">
        <div class="card-header">
          <h5>Deposit Trend (Last 7 Days)</h5>
        </div>
        <div class="card-body">
          <canvas id="depositChart" height="180"></canvas>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card shadow-sm">
        <div class="card-header">
          <h5>Withdrawal Trend (Last 7 Days)</h5>
        </div>
        <div class="card-body">
          <canvas id="withdrawalChart" height="180"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
function autoVerifyDeposit(txId) {
  if (confirm("Run blockchain auto-verification?")) {
    fetch(`/admin/auto-verify-deposit/${txId}/`, {
      method: 'POST',
      headers: {'X-CSRFToken': '{{ csrf_token }}'}
    }).then(response => {
      if (response.ok) location.reload();
      else alert("Verification failed. Check logs.");
    });
  }
}

// Sample Charts
const ctx1 = document.getElementById('depositChart');
new Chart(ctx1, {
  type: 'line',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [{
      label: 'Deposits ($)',
      data: [2450, 1890, 3200, 4100, 2780, 1950, 3670],
      borderColor: '#10b981',
      tension: 0.4
    }]
  },
  options: { responsive: true, plugins: { legend: { display: false } } }
});

const ctx2 = document.getElementById('withdrawalChart');
new Chart(ctx2, {
  type: 'bar',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [{
      label: 'Withdrawals ($)',
      data: [1200, 980, 1450, 2100, 890, 1670, 1340],
      backgroundColor: '#f59e0b'
    }]
  },
  options: { responsive: true, plugins: { legend: { display: false } } }
});
</script>
{% endblock %}