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

{% block title %}User: {{ user_obj.email }} · Admin Panel{% endblock %}

{% block content %}
<div class="mb-6">
  <a href="{% url 'adminpanel:users' %}" class="text-blue-400 hover:text-blue-300 text-sm">← Back to Users</a>
</div>

<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold">User Details</h1>
  <div class="flex gap-2">
    {% if not user_obj.verified %}
      <form method="post" action="{% url 'adminpanel:user_verify' user_obj.id %}">
        {% csrf_token %}
        <button type="submit" class="px-4 py-2 bg-amber-600 hover:bg-amber-700 rounded-lg text-sm">✓ Verify User</button>
      </form>
    {% else %}
      <form method="post" action="{% url 'adminpanel:user_unverify' user_obj.id %}">
        {% csrf_token %}
        <button type="submit" class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg text-sm">⚠ Unverify</button>
      </form>
    {% endif %}
    
    <form method="post" action="{% url 'adminpanel:user_toggle_active' user_obj.id %}">
      {% csrf_token %}
      <button type="submit" class="px-4 py-2 {% if user_obj.is_active %}bg-red-600 hover:bg-red-700{% else %}bg-green-600 hover:bg-green-700{% endif %} rounded-lg text-sm">
        {% if user_obj.is_active %}🔒 Deactivate{% else %}🔓 Activate{% endif %}
      </button>
    </form>
  </div>
</div>

<!-- User Info Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
  <!-- Basic Info -->
  <div class="p-6 rounded-xl bg-slate-900 border border-slate-800">
    <h2 class="text-lg font-semibold mb-4">Basic Information</h2>
    <div class="space-y-3">
      <div>
        <div class="text-sm text-slate-400">Email</div>
        <div class="font-medium">{{ user_obj.email }}</div>
      </div>
      <div>
        <div class="text-sm text-slate-400">Username</div>
        <div class="font-medium">{{ user_obj.username }}</div>
      </div>
      <div>
        <div class="text-sm text-slate-400">Full Name</div>
        <div class="font-medium">{{ user_obj.first_name }} {{ user_obj.last_name }}</div>
      </div>
      <div>
        <div class="text-sm text-slate-400">Phone</div>
        <div class="font-medium">{{ user_obj.phone_number|default:"Not provided" }}</div>
      </div>
      <div>
        <div class="text-sm text-slate-400">Country</div>
        <div class="font-medium">{{ user_obj.country|default:"Not provided" }}</div>
      </div>
      <div>
        <div class="text-sm text-slate-400">Joined</div>
        <div class="font-medium">{{ user_obj.date_joined|date:"Y-m-d H:i" }}</div>
      </div>
    </div>
  </div>
  
  <!-- Status & Role -->
  <div class="p-6 rounded-xl bg-slate-900 border border-slate-800">
    <h2 class="text-lg font-semibold mb-4">Status & Permissions</h2>
    <div class="space-y-3">
      <div>
        <div class="text-sm text-slate-400">Role</div>
        <div class="flex items-center gap-2">
          <span class="px-3 py-1 rounded-full text-sm {% if user_obj.role == 'trader' %}bg-purple-600{% else %}bg-blue-600{% endif %}">
            {{ user_obj.get_role_display }}
          </span>
          <form method="post" action="{% url 'adminpanel:user_change_role' user_obj.id %}" class="inline">
            {% csrf_token %}
            <select name="role" onchange="this.form.submit()" class="px-2 py-1 bg-slate-800 border border-slate-700 rounded text-sm">
              <option value="">Change...</option>
              <option value="investor">Investor</option>
              <option value="trader">Trader</option>
            </select>
          </form>
        </div>
      </div>
      <div>
        <div class="text-sm text-slate-400">Account Status</div>
        <div>
          {% if user_obj.is_active %}
            <span class="text-amber-400">✓ Active</span>
          {% else %}
            <span class="text-red-400">✗ Inactive</span>
          {% endif %}
        </div>
      </div>
      <div>
        <div class="text-sm text-slate-400">Verification Status</div>
        <div>
          {% if user_obj.verified %}
            <span class="text-amber-400">✓ Verified</span>
          {% else %}
            <span class="text-yellow-400">⚠ Not Verified</span>
          {% endif %}
        </div>
      </div>
      <div>
        <div class="text-sm text-slate-400">Superuser</div>
        <div>
          {% if user_obj.is_superuser %}
            <span class="text-purple-400">✓ Yes</span>
          {% else %}
            <span class="text-slate-400">No</span>
          {% endif %}
        </div>
      </div>
      <div>
        <div class="text-sm text-slate-400">Onboarding</div>
        <div>
          {% if user_obj.is_onboarding_complete %}
            <span class="text-amber-400">✓ Completed</span>
          {% else %}
            <span class="text-yellow-400">⚠ Incomplete</span>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Account Balance -->
{% if account %}
<div class="p-6 rounded-xl bg-slate-900 border border-slate-800 mb-6">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-lg font-semibold">Account Balance</h2>
    <a href="{% url 'adminpanel:account_detail' account.id %}" class="text-blue-400 hover:text-blue-300 text-sm">View Full Account →</a>
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    <div>
      <div class="text-sm text-slate-400">Capital</div>
      <div class="text-xl font-semibold">${{ account.capital_balance|default:"0.00" }}</div>
    </div>
    <div>
      <div class="text-sm text-slate-400">Profit</div>
      <div class="text-xl font-semibold text-amber-400">${{ account.profit_balance|default:"0.00" }}</div>
    </div>
    <div>
      <div class="text-sm text-slate-400">Bonus</div>
      <div class="text-xl font-semibold text-blue-400">${{ account.bonus_balance|default:"0.00" }}</div>
    </div>
  </div>
</div>
{% endif %}

<!-- Transaction Stats -->
<div class="p-6 rounded-xl bg-slate-900 border border-slate-800 mb-6">
  <h2 class="text-lg font-semibold mb-4">Transaction Statistics</h2>
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    <div>
      <div class="text-sm text-slate-400">Total Deposits</div>
      <div class="text-xl font-semibold text-amber-400">${{ txn_stats.total_deposits|default:"0.00" }}</div>
    </div>
    <div>
      <div class="text-sm text-slate-400">Total Withdrawals</div>
      <div class="text-xl font-semibold text-red-400">${{ txn_stats.total_withdrawals|default:"0.00" }}</div>
    </div>
    <div>
      <div class="text-sm text-slate-400">Pending</div>
      <div class="text-xl font-semibold text-yellow-400">{{ txn_stats.pending_count|default:0 }}</div>
    </div>
  </div>
</div>

<!-- Recent Transactions -->
<div class="p-6 rounded-xl bg-slate-900 border border-slate-800 mb-6">
  <h2 class="text-lg font-semibold mb-4">Recent Transactions</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">Date</th>
          <th class="text-left py-2 pr-4">Category</th>
          <th class="text-left py-2 pr-4">Amount</th>
          <th class="text-left py-2 pr-4">Status</th>
        </tr>
      </thead>
      <tbody>
        {% for txn in transactions %}
          <tr class="border-b border-slate-800 hover:bg-slate-800/30">
            <td class="py-3 pr-4">{{ txn.created_at|date:"Y-m-d H:i" }}</td>
            <td class="py-3 pr-4">{{ txn.get_category_display }}</td>
            <td class="py-3 pr-4 font-semibold">${{ txn.amount }}</td>
            <td class="py-3 pr-4">
              <span class="px-2 py-1 rounded text-xs {% if txn.status == 'completed' %}bg-amber-600{% elif txn.status == 'pending' %}bg-yellow-600{% else %}bg-red-600{% endif %}">
                {{ txn.get_status_display }}
              </span>
            </td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="4" class="py-4 text-slate-400 text-center">No transactions yet</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Danger Zone -->
{% if not user_obj.is_superuser %}
<div class="p-6 rounded-xl bg-red-900/20 border border-red-800 mb-6">
  <h2 class="text-lg font-semibold text-red-400 mb-4">⚠️ Danger Zone</h2>
  <p class="text-sm text-slate-400 mb-4">Deactivating this user will prevent them from logging in and accessing their account.</p>
  <form method="post" action="{% url 'adminpanel:user_delete' user_obj.id %}" onsubmit="return confirm('Are you sure you want to deactivate this user?');">
    {% csrf_token %}
    <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg text-sm font-medium">
      🗑️ Deactivate User
    </button>
  </form>
</div>
{% endif %}

{% endblock %}