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

{% block title %}Admin Dashboard · Trademont{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold">Admin Control Panel</h1>
  <div class="flex gap-3">
    <a href="{% url 'adminpanel:analytics' %}" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm font-medium transition">
      📊 Analytics
    </a>
    <a href="{% url 'adminpanel:system_health' %}" class="px-4 py-2 bg-amber-600 hover:bg-amber-700 rounded-lg text-sm font-medium transition">
      🏥 System Health
    </a>
  </div>
</div>

<!-- Quick Actions -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
  <a href="{% url 'adminpanel:users' %}" class="p-4 rounded-xl bg-gradient-to-br from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 transition shadow-lg">
    <div class="text-3xl mb-2">👥</div>
    <div class="font-semibold">Manage Users</div>
    <div class="text-sm text-blue-100">View & control all users</div>
  </a>
  
  <a href="{% url 'adminpanel:accounts' %}" class="p-4 rounded-xl bg-gradient-to-br from-amber-600 to-amber-700 hover:from-amber-700 hover:to-amber-800 transition shadow-lg">
    <div class="text-3xl mb-2">💰</div>
    <div class="font-semibold">Accounts</div>
    <div class="text-sm text-amber-100">Manage balances</div>
  </a>
  
  <a href="{% url 'adminpanel:transactions' %}" class="p-4 rounded-xl bg-gradient-to-br from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 transition shadow-lg">
    <div class="text-3xl mb-2">💳</div>
    <div class="font-semibold">Transactions</div>
    <div class="text-sm text-purple-100">Approve/reject payments</div>
  </a>
  
  <a href="{% url 'adminpanel:search_users' %}" class="p-4 rounded-xl bg-gradient-to-br from-orange-600 to-orange-700 hover:from-orange-700 hover:to-orange-800 transition shadow-lg">
    <div class="text-3xl mb-2">🔍</div>
    <div class="font-semibold">Search</div>
    <div class="text-sm text-orange-100">Find users quickly</div>
  </a>
</div>

<!-- Withdrawal Alerts -->
{% if metrics.pending_withdrawals > 0 %}
<div class="p-4 rounded-xl bg-yellow-900/20 border border-yellow-800 mb-8">
  <div class="flex items-center justify-between">
    <div class="flex items-center gap-3">
      <div class="text-3xl">⚠️</div>
      <div>
        <div class="font-semibold text-yellow-400">{{ metrics.pending_withdrawals }} Pending Withdrawal{{ metrics.pending_withdrawals|pluralize }}</div>
        <div class="text-sm text-yellow-300">Require your attention</div>
      </div>
    </div>
    <a href="{% url 'adminpanel:withdrawals' %}" class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg transition">
      Review Now →
    </a>
  </div>
</div>
{% endif %}

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Users</div>
    <div class="text-2xl font-semibold">{{ metrics.total_users|default:0 }}</div>
  </div>
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Investors</div>
    <div class="text-2xl font-semibold">{{ metrics.investors|default:0 }}</div>
  </div>
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Traders</div>
    <div class="text-2xl font-semibold">{{ metrics.traders|default:0 }}</div>
  </div>
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Verified</div>
    <div class="text-2xl font-semibold">{{ metrics.verified|default:0 }}</div>
  </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-8">
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Capital Total</div>
    <div class="text-xl font-semibold">{{ metrics.capital_total|default:"0.00" }}</div>
  </div>
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Profit Total</div>
    <div class="text-xl font-semibold">{{ metrics.profit_total|default:"0.00" }}</div>
  </div>
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Bonus Total</div>
    <div class="text-xl font-semibold">{{ metrics.bonus_total|default:"0.00" }}</div>
  </div>
</div>

<div class="p-4 rounded-xl bg-slate-900 border border-slate-800 mb-8">
  <div class="flex items-center justify-between mb-4">
    <h2 class="font-semibold">Transactions by Category</h2>
  </div>
  <div class="overflow-x-auto">
    <table class="min-w-full text-sm">
      <thead class="text-slate-400">
        <tr>
          <th class="text-left py-2 pr-4">Category</th>
          <th class="text-left py-2 pr-4">Count</th>
          <th class="text-left py-2 pr-4">Total</th>
        </tr>
      </thead>
      <tbody>
        {% for cat, data in transactions.by_category_items %}
          <tr class="border-t border-slate-800">
            <td class="py-2 pr-4">{{ cat|title }}</td>
            <td class="py-2 pr-4">{{ data.count }}</td>
            <td class="py-2 pr-4">{{ data.total }}</td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="3" class="py-4 text-slate-400">No transactions yet.</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}