{% extends 'base.html' %} {% load static %} {% block title %}Admin Dashboard -
AIBOTXCHANGE{% endblock %} {% block extra_head %}
<style>
  .admin-card {
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
    color: white;
  }
  .stat-card-admin {
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    color: white;
  }
</style>
{% endblock %} {% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Admin Header -->
  <div class="mb-8">
    <div class="flex justify-between items-center">
      <div>
        <h1 class="text-3xl font-bold text-gray-900">Admin Dashboard</h1>
        <p class="mt-2 text-gray-600">
          Manage users, strategies, and system settings
        </p>
      </div>
      <div class="flex space-x-4">
        <a href="{% url 'admin_panel:manage_users' %}" class="btn-secondary"
          >Manage Users</a
        >
        <a href="{% url 'admin_panel:manage_strategies' %}" class="btn-primary"
          >Manage Strategies</a
        >
      </div>
    </div>
  </div>

  <!-- Statistics Overview -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="admin-card rounded-lg shadow-lg p-6">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <i class="fas fa-users text-2xl"></i>
        </div>
        <div class="ml-4">
          <div class="text-sm font-medium opacity-80">Total Users</div>
          <div class="text-2xl font-bold">{{ stats.total_users }}</div>
        </div>
      </div>
    </div>

    <div class="stat-card-admin rounded-lg shadow-lg p-6">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <i class="fas fa-robot text-2xl"></i>
        </div>
        <div class="ml-4">
          <div class="text-sm font-medium opacity-80">Active Strategies</div>
          <div class="text-2xl font-bold">{{ stats.active_strategies }}</div>
        </div>
      </div>
    </div>

    <div
      class="bg-gradient-to-r from-orange-500 to-red-600 rounded-lg shadow-lg p-6 text-white"
    >
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <i class="fas fa-chart-line text-2xl"></i>
        </div>
        <div class="ml-4">
          <div class="text-sm font-medium opacity-80">Total Subscriptions</div>
          <div class="text-2xl font-bold">{{ stats.total_subscriptions }}</div>
        </div>
      </div>
    </div>

    <div
      class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg shadow-lg p-6 text-white"
    >
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <i class="fas fa-dollar-sign text-2xl"></i>
        </div>
        <div class="ml-4">
          <div class="text-sm font-medium opacity-80">Monthly Revenue</div>
          <div class="text-2xl font-bold">
            ${{ stats.monthly_revenue|floatformat:0 }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Main Content -->
    <div class="lg:col-span-2 space-y-8">
      <!-- Recent Users -->
      <div class="bg-white shadow rounded-lg">
        <div
          class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"
        >
          <h2 class="text-lg font-medium text-gray-900">Recent Users</h2>
          <a
            href="{% url 'admin_panel:manage_users' %}"
            class="text-sm text-blue-600 hover:text-blue-500"
          >
            View All Users
          </a>
        </div>
        <div class="px-6 py-6">
          {% if recent_users %}
          <div class="space-y-4">
            {% for user in recent_users %}
            <div
              class="flex items-center justify-between p-4 border rounded-lg"
            >
              <div class="flex items-center">
                <div
                  class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center mr-4"
                >
                  <span class="text-white font-semibold"
                    >{{ user.first_name|first|default:user.username|first
                    }}</span
                  >
                </div>
                <div>
                  <div class="font-semibold text-gray-900">
                    {{ user.get_full_name|default:user.username }}
                  </div>
                  <div class="text-sm text-gray-500">{{ user.email }}</div>
                  <div class="text-xs text-gray-400">
                    Joined {{ user.date_joined|timesince }} ago
                  </div>
                </div>
              </div>
              <div class="flex items-center space-x-2">
                <span
                  class="status-badge status-{% if user.is_active %}active{% else %}inactive{% endif %}"
                >
                  {% if user.is_active %}Active{% else %}Inactive{% endif %}
                </span>
                <a
                  href="{% url 'admin_panel:user_detail' user.id %}"
                  class="text-blue-600 hover:text-blue-500"
                >
                  <i class="fas fa-eye"></i>
                </a>
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <div class="text-center py-8">
            <i class="fas fa-users text-4xl text-gray-400 mb-4"></i>
            <p class="text-gray-500">No users yet</p>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- Recent Subscriptions -->
      <div class="bg-white shadow rounded-lg">
        <div
          class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"
        >
          <h2 class="text-lg font-medium text-gray-900">
            Recent Subscriptions
          </h2>
          <a
            href="{% url 'admin_panel:manage_subscriptions' %}"
            class="text-sm text-blue-600 hover:text-blue-500"
          >
            View All Subscriptions
          </a>
        </div>
        <div class="px-6 py-6">
          {% if recent_subscriptions %}
          <div class="space-y-4">
            {% for subscription in recent_subscriptions %}
            <div
              class="flex items-center justify-between p-4 border rounded-lg"
            >
              <div>
                <div class="font-semibold text-gray-900">
                  {{ subscription.strategy.name }}
                </div>
                <div class="text-sm text-gray-500">
                  {{
                  subscription.user.get_full_name|default:subscription.user.username
                  }}
                </div>
                <div class="text-xs text-gray-400">
                  {{ subscription.created_at|timesince }} ago
                </div>
              </div>
              <div class="text-right">
                <span class="status-badge status-{{ subscription.status }}">
                  {{ subscription.get_status_display }}
                </span>
                <div class="text-sm font-semibold text-gray-900 mt-1">
                  ${{ subscription.strategy.monthly_fee|floatformat:0 }}/mo
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <div class="text-center py-8">
            <i class="fas fa-chart-line text-4xl text-gray-400 mb-4"></i>
            <p class="text-gray-500">No subscriptions yet</p>
          </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="space-y-8">
      <!-- System Status -->
      <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
          <h2 class="text-lg font-medium text-gray-900">System Status</h2>
        </div>
        <div class="px-6 py-6">
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-600">Database</span>
              <span class="status-badge status-active">Online</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-600">MetaAPI</span>
              <span class="status-badge status-active">Connected</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-600">Payment Gateway</span>
              <span class="status-badge status-active">Active</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-600">Email Service</span>
              <span class="status-badge status-active">Working</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Pending Actions -->
      <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
          <h2 class="text-lg font-medium text-gray-900">Pending Actions</h2>
        </div>
        <div class="px-6 py-6">
          <div class="space-y-3">
            {% if pending_subscriptions > 0 %}
            <a
              href="{% url 'admin_panel:pending_subscriptions' %}"
              class="flex items-center justify-between p-3 border border-orange-200 rounded-lg hover:bg-orange-50 transition duration-300"
            >
              <div class="flex items-center">
                <i class="fas fa-clock text-orange-600 mr-3"></i>
                <span class="text-sm font-medium text-gray-900"
                  >Pending Subscriptions</span
                >
              </div>
              <span
                class="bg-orange-100 text-orange-800 text-xs font-semibold px-2 py-1 rounded"
                >{{ pending_subscriptions }}</span
              >
            </a>
            {% endif %} {% if pending_withdrawals > 0 %}
            <a
              href="{% url 'admin_panel:pending_withdrawals' %}"
              class="flex items-center justify-between p-3 border border-blue-200 rounded-lg hover:bg-blue-50 transition duration-300"
            >
              <div class="flex items-center">
                <i class="fas fa-money-bill-wave text-blue-600 mr-3"></i>
                <span class="text-sm font-medium text-gray-900"
                  >Pending Withdrawals</span
                >
              </div>
              <span
                class="bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded"
                >{{ pending_withdrawals }}</span
              >
            </a>
            {% endif %} {% if support_tickets > 0 %}
            <a
              href="{% url 'admin_panel:support_tickets' %}"
              class="flex items-center justify-between p-3 border border-red-200 rounded-lg hover:bg-red-50 transition duration-300"
            >
              <div class="flex items-center">
                <i class="fas fa-life-ring text-red-600 mr-3"></i>
                <span class="text-sm font-medium text-gray-900"
                  >Support Tickets</span
                >
              </div>
              <span
                class="bg-red-100 text-red-800 text-xs font-semibold px-2 py-1 rounded"
                >{{ support_tickets }}</span
              >
            </a>
            {% endif %}
            
            {% if pending_subscriptions == 0 and pending_withdrawals == 0 and support_tickets == 0 %}
            <div class="text-center py-4">
              <i class="fas fa-check-circle text-green-500 text-2xl mb-2"></i>
              <p class="text-sm text-gray-500">All caught up!</p>
            </div>
            {% endif %}
          </div>
        </div>
      </div>

      <!-- Quick Actions -->
      <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
          <h2 class="text-lg font-medium text-gray-900">Quick Actions</h2>
        </div>
        <div class="px-6 py-6">
          <div class="space-y-3">
            <a
              href="{% url 'admin_panel:add_strategy' %}"
              class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-300"
            >
              <i class="fas fa-plus text-green-600 mr-3"></i>
              <span class="text-sm font-medium text-gray-900"
                >Add New Strategy</span
              >
            </a>
            <a
              href="{% url 'admin_panel:send_message' %}"
              class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-300"
            >
              <i class="fas fa-envelope text-blue-600 mr-3"></i>
              <span class="text-sm font-medium text-gray-900"
                >Send Message to Users</span
              >
            </a>
            <a
              href="{% url 'admin_panel:system_settings' %}"
              class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-300"
            >
              <i class="fas fa-cog text-purple-600 mr-3"></i>
              <span class="text-sm font-medium text-gray-900"
                >System Settings</span
              >
            </a>
            <a
              href="{% url 'admin_panel:reports' %}"
              class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-300"
            >
              <i class="fas fa-chart-bar text-orange-600 mr-3"></i>
              <span class="text-sm font-medium text-gray-900"
                >Generate Reports</span
              >
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
  // Auto-refresh dashboard every 30 seconds
  setInterval(function () {
    // In production, this would update real-time stats via AJAX
    console.log("Auto-refreshing admin dashboard...");
  }, 30000);
</script>
{% endblock %}