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

{% block title %}System Health · 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">🏥 System Health Monitor</h1>
  <div class="px-4 py-2 rounded-lg {% if system_status == 'healthy' %}bg-amber-600{% else %}bg-yellow-600{% endif %}">
    {% if system_status == 'healthy' %}
      ✓ System Healthy
    {% else %}
      ⚠ Needs Attention
    {% endif %}
  </div>
</div>

<!-- Health Metrics -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
  <!-- Pending Transactions -->
  <div class="p-6 rounded-xl {% if pending_transactions > 10 %}bg-yellow-900/20 border-yellow-800{% else %}bg-slate-900 border-slate-800{% endif %} border">
    <div class="flex items-center justify-between mb-2">
      <h3 class="font-semibold">Pending Transactions</h3>
      {% if pending_transactions > 10 %}
        <span class="text-2xl">⚠️</span>
      {% else %}
        <span class="text-2xl">✅</span>
      {% endif %}
    </div>
    <div class="text-3xl font-bold {% if pending_transactions > 10 %}text-yellow-400{% else %}text-amber-400{% endif %}">
      {{ pending_transactions }}
    </div>
    <p class="text-sm text-slate-400 mt-2">
      {% if pending_transactions > 10 %}
        High volume - review needed
      {% else %}
        Normal levels
      {% endif %}
    </p>
    {% if pending_transactions > 0 %}
      <a href="{% url 'adminpanel:transactions' %}" class="mt-3 inline-block text-blue-400 hover:text-blue-300 text-sm">
        Review transactions →
      </a>
    {% endif %}
  </div>
  
  <!-- Unverified Users -->
  <div class="p-6 rounded-xl {% if unverified_users > 20 %}bg-yellow-900/20 border-yellow-800{% else %}bg-slate-900 border-slate-800{% endif %} border">
    <div class="flex items-center justify-between mb-2">
      <h3 class="font-semibold">Unverified Users</h3>
      {% if unverified_users > 20 %}
        <span class="text-2xl">⚠️</span>
      {% else %}
        <span class="text-2xl">✅</span>
      {% endif %}
    </div>
    <div class="text-3xl font-bold {% if unverified_users > 20 %}text-yellow-400{% else %}text-amber-400{% endif %}">
      {{ unverified_users }}
    </div>
    <p class="text-sm text-slate-400 mt-2">
      {% if unverified_users > 20 %}
        Many pending verifications
      {% else %}
        Under control
      {% endif %}
    </p>
    {% if unverified_users > 0 %}
      <a href="{% url 'adminpanel:users' %}" class="mt-3 inline-block text-blue-400 hover:text-blue-300 text-sm">
        Review users →
      </a>
    {% endif %}
  </div>
  
  <!-- Users Without Accounts -->
  <div class="p-6 rounded-xl {% if users_no_account > 0 %}bg-blue-900/20 border-blue-800{% else %}bg-slate-900 border-slate-800{% endif %} border">
    <div class="flex items-center justify-between mb-2">
      <h3 class="font-semibold">Users Without Accounts</h3>
      {% if users_no_account > 0 %}
        <span class="text-2xl">ℹ️</span>
      {% else %}
        <span class="text-2xl">✅</span>
      {% endif %}
    </div>
    <div class="text-3xl font-bold {% if users_no_account > 0 %}text-blue-400{% else %}text-amber-400{% endif %}">
      {{ users_no_account }}
    </div>
    <p class="text-sm text-slate-400 mt-2">
      Active users without trading accounts
    </p>
  </div>
  
  <!-- Failed Transactions (Last 7 Days) -->
  <div class="p-6 rounded-xl {% if failed_transactions_week > 5 %}bg-red-900/20 border-red-800{% else %}bg-slate-900 border-slate-800{% endif %} border">
    <div class="flex items-center justify-between mb-2">
      <h3 class="font-semibold">Failed Transactions</h3>
      {% if failed_transactions_week > 5 %}
        <span class="text-2xl">❌</span>
      {% else %}
        <span class="text-2xl">✅</span>
      {% endif %}
    </div>
    <div class="text-3xl font-bold {% if failed_transactions_week > 5 %}text-red-400{% else %}text-amber-400{% endif %}">
      {{ failed_transactions_week }}
    </div>
    <p class="text-sm text-slate-400 mt-2">
      {% if failed_transactions_week > 5 %}
        Higher than normal - investigate
      {% else %}
        Past 7 days
      {% endif %}
    </p>
    {% if failed_transactions_week > 0 %}
      <a href="{% url 'adminpanel:transactions' %}" class="mt-3 inline-block text-blue-400 hover:text-blue-300 text-sm">
        View failed →
      </a>
    {% endif %}
  </div>
  
  <!-- Negative Balances -->
  <div class="p-6 rounded-xl {% if negative_accounts > 0 %}bg-red-900/20 border-red-800{% else %}bg-slate-900 border-slate-800{% endif %} border">
    <div class="flex items-center justify-between mb-2">
      <h3 class="font-semibold">Negative Balances</h3>
      {% if negative_accounts > 0 %}
        <span class="text-2xl">⚠️</span>
      {% else %}
        <span class="text-2xl">✅</span>
      {% endif %}
    </div>
    <div class="text-3xl font-bold {% if negative_accounts > 0 %}text-red-400{% else %}text-amber-400{% endif %}">
      {{ negative_accounts }}
    </div>
    <p class="text-sm text-slate-400 mt-2">
      {% if negative_accounts > 0 %}
        Accounts need correction
      {% else %}
        All balances positive
      {% endif %}
    </p>
    {% if negative_accounts > 0 %}
      <a href="{% url 'adminpanel:accounts' %}" class="mt-3 inline-block text-blue-400 hover:text-blue-300 text-sm">
        Review accounts →
      </a>
    {% endif %}
  </div>
  
  <!-- System Status Summary -->
  <div class="p-6 rounded-xl bg-gradient-to-br {% if system_status == 'healthy' %}from-amber-900/40 to-amber-800/40 border-amber-700{% else %}from-yellow-900/40 to-yellow-800/40 border-yellow-700{% endif %} border">
    <div class="flex items-center justify-between mb-2">
      <h3 class="font-semibold">Overall Status</h3>
      <span class="text-2xl">
        {% if system_status == 'healthy' %}
          💚
        {% else %}
          💛
        {% endif %}
      </span>
    </div>
    <div class="text-2xl font-bold {% if system_status == 'healthy' %}text-amber-300{% else %}text-yellow-300{% endif %}">
      {% if system_status == 'healthy' %}
        All Systems Operational
      {% else %}
        Monitoring Required
      {% endif %}
    </div>
    <p class="text-sm {% if system_status == 'healthy' %}text-amber-200{% else %}text-yellow-200{% endif %} mt-2">
      {% if system_status == 'healthy' %}
        Everything running smoothly
      {% else %}
        Some areas need attention
      {% endif %}
    </p>
  </div>
</div>

<!-- Quick Actions -->
<div class="p-6 rounded-xl bg-slate-900 border border-slate-800">
  <h2 class="text-lg font-semibold mb-4">Quick Actions</h2>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
    <a href="{% url 'adminpanel:transactions' %}" class="p-4 text-center rounded-lg bg-slate-800 hover:bg-slate-700 transition">
      <div class="text-2xl mb-2">💳</div>
      <div class="text-sm">Review Transactions</div>
    </a>
    <a href="{% url 'adminpanel:users' %}" class="p-4 text-center rounded-lg bg-slate-800 hover:bg-slate-700 transition">
      <div class="text-2xl mb-2">👥</div>
      <div class="text-sm">Manage Users</div>
    </a>
    <a href="{% url 'adminpanel:accounts' %}" class="p-4 text-center rounded-lg bg-slate-800 hover:bg-slate-700 transition">
      <div class="text-2xl mb-2">💰</div>
      <div class="text-sm">Check Accounts</div>
    </a>
    <a href="{% url 'adminpanel:analytics' %}" class="p-4 text-center rounded-lg bg-slate-800 hover:bg-slate-700 transition">
      <div class="text-2xl mb-2">📊</div>
      <div class="text-sm">View Analytics</div>
    </a>
  </div>
</div>

{% endblock %}