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

{% block title %}Analytics · 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>

<h1 class="text-2xl font-bold mb-6">📊 Advanced Analytics</h1>

<!-- User Growth -->
<div class="p-6 rounded-xl bg-slate-900 border border-slate-800 mb-6">
  <h2 class="text-lg font-semibold mb-4">User Growth</h2>
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    <div class="p-4 rounded-lg bg-slate-800/50">
      <div class="text-sm text-slate-400">New Users Today</div>
      <div class="text-3xl font-bold text-amber-400">{{ user_stats.new_today }}</div>
    </div>
    <div class="p-4 rounded-lg bg-slate-800/50">
      <div class="text-sm text-slate-400">New Users This Week</div>
      <div class="text-3xl font-bold text-blue-400">{{ user_stats.new_week }}</div>
    </div>
    <div class="p-4 rounded-lg bg-slate-800/50">
      <div class="text-sm text-slate-400">New Users This Month</div>
      <div class="text-3xl font-bold text-purple-400">{{ user_stats.new_month }}</div>
    </div>
  </div>
</div>

<!-- Transaction Analytics -->
<div class="p-6 rounded-xl bg-slate-900 border border-slate-800 mb-6">
  <h2 class="text-lg font-semibold mb-4">Transaction Flow</h2>
  
  <!-- Today -->
  <div class="mb-6">
    <h3 class="text-sm font-semibold text-slate-400 mb-3">Today</h3>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div class="p-4 rounded-lg bg-amber-900/20 border border-amber-800">
        <div class="text-sm text-amber-300">Deposits</div>
        <div class="text-2xl font-bold text-amber-400">${{ transaction_stats.deposits_today }}</div>
      </div>
      <div class="p-4 rounded-lg bg-red-900/20 border border-red-800">
        <div class="text-sm text-red-300">Withdrawals</div>
        <div class="text-2xl font-bold text-red-400">${{ transaction_stats.withdrawals_today }}</div>
      </div>
      <div class="p-4 rounded-lg bg-blue-900/20 border border-blue-800">
        <div class="text-sm text-blue-300">Net Flow</div>
        <div class="text-2xl font-bold {% if transaction_stats.net_today >= 0 %}text-amber-400{% else %}text-red-400{% endif %}">
          ${{ transaction_stats.net_today }}
        </div>
      </div>
    </div>
  </div>
  
  <!-- This Week -->
  <div class="mb-6">
    <h3 class="text-sm font-semibold text-slate-400 mb-3">This Week</h3>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div class="p-4 rounded-lg bg-amber-900/20 border border-amber-800">
        <div class="text-sm text-amber-300">Deposits</div>
        <div class="text-2xl font-bold text-amber-400">${{ transaction_stats.deposits_week }}</div>
      </div>
      <div class="p-4 rounded-lg bg-red-900/20 border border-red-800">
        <div class="text-sm text-red-300">Withdrawals</div>
        <div class="text-2xl font-bold text-red-400">${{ transaction_stats.withdrawals_week }}</div>
      </div>
      <div class="p-4 rounded-lg bg-blue-900/20 border border-blue-800">
        <div class="text-sm text-blue-300">Net Flow</div>
        <div class="text-2xl font-bold {% if transaction_stats.net_week >= 0 %}text-amber-400{% else %}text-red-400{% endif %}">
          ${{ transaction_stats.net_week }}
        </div>
      </div>
    </div>
  </div>
  
  <!-- This Month -->
  <div>
    <h3 class="text-sm font-semibold text-slate-400 mb-3">This Month</h3>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div class="p-4 rounded-lg bg-amber-900/20 border border-amber-800">
        <div class="text-sm text-amber-300">Deposits</div>
        <div class="text-2xl font-bold text-amber-400">${{ transaction_stats.deposits_month }}</div>
      </div>
      <div class="p-4 rounded-lg bg-red-900/20 border border-red-800">
        <div class="text-sm text-red-300">Withdrawals</div>
        <div class="text-2xl font-bold text-red-400">${{ transaction_stats.withdrawals_month }}</div>
      </div>
      <div class="p-4 rounded-lg bg-blue-900/20 border border-blue-800">
        <div class="text-sm text-blue-300">Net Flow</div>
        <div class="text-2xl font-bold {% if transaction_stats.net_month >= 0 %}text-amber-400{% else %}text-red-400{% endif %}">
          ${{ transaction_stats.net_month }}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Top Accounts -->
<div class="p-6 rounded-xl bg-slate-900 border border-slate-800 mb-6">
  <h2 class="text-lg font-semibold mb-4">Top 10 Accounts by Balance</h2>
  <div class="overflow-x-auto">
    <table class="min-w-full text-sm">
      <thead class="text-slate-400 border-b border-slate-800">
        <tr>
          <th class="text-left py-2 pr-4">Rank</th>
          <th class="text-left py-2 pr-4">User</th>
          <th class="text-left py-2 pr-4">Capital</th>
          <th class="text-left py-2 pr-4">Profit</th>
          <th class="text-left py-2 pr-4">Bonus</th>
          <th class="text-left py-2 pr-4">Total</th>
        </tr>
      </thead>
      <tbody>
        {% for account in top_accounts %}
          <tr class="border-b border-slate-800 hover:bg-slate-800/30">
            <td class="py-3 pr-4 font-bold">{{ forloop.counter }}</td>
            <td class="py-3 pr-4">
              <a href="{% url 'adminpanel:user_detail' account.user.id %}" class="text-blue-400 hover:text-blue-300">
                {{ account.user.email }}
              </a>
            </td>
            <td class="py-3 pr-4">${{ account.capital_balance|default:"0.00" }}</td>
            <td class="py-3 pr-4 text-amber-400">${{ account.profit_balance|default:"0.00" }}</td>
            <td class="py-3 pr-4 text-blue-400">${{ account.bonus_balance|default:"0.00" }}</td>
            <td class="py-3 pr-4 font-bold">${{ account.total|default:"0.00" }}</td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="6" class="py-4 text-slate-400 text-center">No accounts yet</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Recent Verifications -->
<div class="p-6 rounded-xl bg-slate-900 border border-slate-800">
  <h2 class="text-lg font-semibold mb-4">Recently Verified Users</h2>
  <div class="space-y-3">
    {% for user in recent_verifications %}
      <div class="flex items-center justify-between p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800">
        <div>
          <a href="{% url 'adminpanel:user_detail' user.id %}" class="font-medium text-blue-400 hover:text-blue-300">
            {{ user.email }}
          </a>
          <div class="text-sm text-slate-400">Joined: {{ user.date_joined|date:"Y-m-d" }}</div>
        </div>
        <span class="px-3 py-1 rounded-full text-xs bg-amber-600">Verified</span>
      </div>
    {% empty %}
      <p class="text-slate-400">No verified users yet</p>
    {% endfor %}
  </div>
</div>

{% endblock %}