{% extends 'base_dashboard.html' %}

{% block title %}Manage Users — Online LMS{% endblock %}

{% block extra_css %}
<style>
  .stat-pill {
    border-radius: .75rem;
    padding: .9rem 1.25rem;
    border: 0;
    transition: transform .15s, box-shadow .15s;
  }
  .stat-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.09) !important; }
  .stat-pill .sp-icon {
    width: 44px; height: 44px; border-radius: .625rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
  }
  .filter-pill-bar .fp-btn {
    border-radius: 2rem; padding: .35rem 1rem;
    font-size: .82rem; font-weight: 500; border: 1.5px solid #e5e7eb;
    background: #fff; color: #6b7280; transition: all .15s;
    text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
  }
  .filter-pill-bar .fp-btn.active,
  .filter-pill-bar .fp-btn:hover { background: #1a56db; color: #fff; border-color: #1a56db; }
  .filter-pill-bar .fp-btn.active-student { background: #1a56db; color: #fff; border-color: #1a56db; }
  .filter-pill-bar .fp-btn.active-teacher { background: #059669; color: #fff; border-color: #059669; }
  .filter-pill-bar .fp-btn.active-admin   { background: #dc2626; color: #fff; border-color: #dc2626; }
  .u-table thead th {
    font-size: .71rem; text-transform: uppercase; letter-spacing: .07em;
    color: #9ca3af; font-weight: 600; background: #fafafa;
    border-bottom: 1px solid #f3f4f6; padding: .9rem 1rem;
  }
  .u-table tbody td { border-color: #f3f4f6; vertical-align: middle; padding: .75rem 1rem; font-size: .875rem; }
  .u-table tbody tr { transition: background .1s; }
  .u-table tbody tr:hover { background: #f9fafb; }
  .avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .85rem; }
</style>
{% endblock %}

{% block content %}

<!-- Header -->
<div class="d-flex justify-content-between align-items-start mb-4">
  <div>
    <h4 class="fw-bold mb-1">Manage Users</h4>
    <p class="text-muted small mb-0">View, assign roles, and manage all platform users</p>
  </div>
  <div class="d-flex gap-2">
    <a href="{% url 'dashboard:manage_roles' %}" class="btn btn-outline-secondary">
      <i class="bi bi-shield-lock me-1"></i>Roles
    </a>
    <a href="{% url 'dashboard:admin_user_add' %}" class="btn btn-primary">
      <i class="bi bi-person-plus me-1"></i>Add User
    </a>
  </div>
</div>

<!-- Stat Pills -->
<div class="row g-3 mb-4">
  <div class="col-6 col-lg-2">
    <a href="{% url 'dashboard:manage_users' %}" class="card stat-pill shadow-sm text-decoration-none d-flex flex-row align-items-center gap-3">
      <div class="sp-icon bg-dark bg-opacity-10"><i class="bi bi-people-fill text-dark"></i></div>
      <div>
        <div class="fw-bold fs-4 lh-1 text-dark">{{ total_users }}</div>
        <div class="text-muted" style="font-size:.75rem;">All Users</div>
      </div>
    </a>
  </div>
  <div class="col-6 col-lg-2">
    <a href="?role=student" class="card stat-pill shadow-sm text-decoration-none d-flex flex-row align-items-center gap-3">
      <div class="sp-icon bg-primary bg-opacity-10"><i class="bi bi-mortarboard-fill text-primary"></i></div>
      <div>
        <div class="fw-bold fs-4 lh-1 text-dark">{{ student_count }}</div>
        <div class="text-muted" style="font-size:.75rem;">Students</div>
      </div>
    </a>
  </div>
  <div class="col-6 col-lg-2">
    <a href="?role=teacher" class="card stat-pill shadow-sm text-decoration-none d-flex flex-row align-items-center gap-3">
      <div class="sp-icon bg-success bg-opacity-10"><i class="bi bi-person-badge-fill text-success"></i></div>
      <div>
        <div class="fw-bold fs-4 lh-1 text-dark">{{ teacher_count }}</div>
        <div class="text-muted" style="font-size:.75rem;">Teachers</div>
      </div>
    </a>
  </div>
  <div class="col-6 col-lg-2">
    <a href="?role=admin" class="card stat-pill shadow-sm text-decoration-none d-flex flex-row align-items-center gap-3">
      <div class="sp-icon bg-danger bg-opacity-10"><i class="bi bi-shield-fill text-danger"></i></div>
      <div>
        <div class="fw-bold fs-4 lh-1 text-dark">{{ admin_count }}</div>
        <div class="text-muted" style="font-size:.75rem;">Admins</div>
      </div>
    </a>
  </div>
  <div class="col-6 col-lg-2">
    <a href="?role=support_staff" class="card stat-pill shadow-sm text-decoration-none d-flex flex-row align-items-center gap-3">
      <div class="sp-icon bg-warning bg-opacity-10"><i class="bi bi-headset text-warning"></i></div>
      <div>
        <div class="fw-bold fs-4 lh-1 text-dark">{{ support_staff_count }}</div>
        <div class="text-muted" style="font-size:.75rem;">Support</div>
      </div>
    </a>
  </div>
</div>

<!-- Filter & Table Card -->
<div class="card border-0 shadow-sm rounded-4">
  <!-- Filter Bar inside card -->
  <div class="px-4 pt-4 pb-3 border-bottom d-flex align-items-center justify-content-between flex-wrap gap-3">
    <div class="filter-pill-bar d-flex gap-2 flex-wrap">
      <a href="{% url 'dashboard:manage_users' %}" class="fp-btn {% if not role_filter %}active{% endif %}">
        <i class="bi bi-grid-3x3-gap"></i>All
      </a>
      <a href="?role=student" class="fp-btn {% if role_filter == 'student' %}active-student{% endif %}">
        <i class="bi bi-mortarboard"></i>Students
      </a>
      <a href="?role=teacher" class="fp-btn {% if role_filter == 'teacher' %}active-teacher{% endif %}">
        <i class="bi bi-person-badge"></i>Teachers
      </a>
      <a href="?role=admin" class="fp-btn {% if role_filter == 'admin' %}active-admin{% endif %}">
        <i class="bi bi-shield"></i>Admins
      </a>
      <a href="?role=support_staff" class="fp-btn {% if role_filter == 'support_staff' %}active{% endif %}">
        <i class="bi bi-headset"></i>Support Staff
      </a>
    </div>
    <span class="text-muted small">{{ users|length }} user{{ users|length|pluralize }} shown</span>
  </div>

  <div class="table-responsive">
    <table class="table u-table mb-0">
      <thead>
        <tr>
          <th class="ps-4">User</th>
          <th>Email</th>
          <th>CNIC</th>
          <th>Role</th>
          <th>Status</th>
          <th>Joined</th>
          <th class="pe-4">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for user_obj in users %}
        <tr>
          <td class="ps-4">
            <div class="d-flex align-items-center gap-3">
              {% if user_obj.profile_picture %}
                <img src="{{ user_obj.profile_picture.url }}" class="avatar" style="object-fit:cover;" alt="">
              {% else %}
                <div class="avatar
                  {% if user_obj.role == 'admin' %}bg-danger{% elif user_obj.role == 'teacher' %}bg-success{% else %}bg-primary{% endif %}
                  bg-opacity-15">
                  <i class="bi bi-person-fill
                    {% if user_obj.role == 'admin' %}text-danger{% elif user_obj.role == 'teacher' %}text-success{% else %}text-primary{% endif %}"
                    style="font-size:.8rem;"></i>
                </div>
              {% endif %}
              <div>
                <div class="fw-semibold" style="font-size:.875rem;">{{ user_obj.get_display_name }}</div>
                <div class="text-muted" style="font-size:.75rem;">@{{ user_obj.username }}</div>
              </div>
            </div>
          </td>
          <td><span class="text-muted" style="font-size:.82rem;">{{ user_obj.email|default:"—" }}</span></td>
          <td>
            {% if user_obj.cnic %}
              <span class="font-monospace text-muted" style="font-size:.78rem;">
                {{ user_obj.cnic|slice:":5" }}-{{ user_obj.cnic|slice:"5:12" }}-{{ user_obj.cnic|slice:"12:" }}
              </span>
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </td>
          <td>
            {% if user_obj.role == 'admin' %}
              <span class="badge rounded-pill px-2" style="background:#fee2e2;color:#b91c1c;font-size:.72rem;">Admin</span>
            {% elif user_obj.role == 'accounts_staff' %}
              <span class="badge rounded-pill px-2" style="background:#fef3c7;color:#92400e;font-size:.72rem;">Accounts Staff</span>
            {% elif user_obj.role == 'support_staff' %}
              <span class="badge rounded-pill px-2" style="background:#ffedd5;color:#c2410c;font-size:.72rem;">Support Staff</span>
            {% elif user_obj.role == 'teacher' %}
              <span class="badge rounded-pill px-2" style="background:#dcfce7;color:#15803d;font-size:.72rem;">Teacher</span>
            {% else %}
              <span class="badge rounded-pill px-2" style="background:#dbeafe;color:#1d4ed8;font-size:.72rem;">Student</span>
            {% endif %}
          </td>
          <td>
            {% if user_obj.is_active %}
              <span class="d-flex align-items-center gap-1" style="font-size:.82rem;color:#15803d;">
                <span style="width:7px;height:7px;border-radius:50%;background:#22c55e;display:inline-block;"></span>Active
              </span>
            {% else %}
              <span class="d-flex align-items-center gap-1" style="font-size:.82rem;color:#6b7280;">
                <span style="width:7px;height:7px;border-radius:50%;background:#d1d5db;display:inline-block;"></span>Inactive
              </span>
            {% endif %}
          </td>
          <td><span class="text-muted" style="font-size:.78rem;">{{ user_obj.date_joined|date:"M d, Y" }}</span></td>
          <td class="pe-4">
            <div class="d-flex gap-2">
              <a href="{% url 'dashboard:admin_user_edit' pk=user_obj.pk %}"
                 class="btn btn-sm" style="background:#eff6ff;color:#1d4ed8;border:none;" title="Edit role & details">
                <i class="bi bi-pencil-square" style="font-size:.8rem;"></i>
              </a>
              <a href="{% url 'dashboard:admin_user_reset_password' pk=user_obj.pk %}"
                 class="btn btn-sm" style="background:#fef9c3;color:#854d0e;border:none;" title="Set / reset password">
                <i class="bi bi-key-fill" style="font-size:.8rem;"></i>
              </a>
              {% if user_obj != request.user %}
              <button type="button"
                      class="btn btn-sm" style="background:#fee2e2;color:#b91c1c;border:none;"
                      data-bs-toggle="modal" data-bs-target="#deleteUserModal"
                      data-user-id="{{ user_obj.pk }}" data-username="{{ user_obj.username }}"
                      title="Delete user">
                <i class="bi bi-trash3-fill" style="font-size:.8rem;"></i>
              </button>
              {% else %}
              <span class="badge rounded-pill align-self-center" style="background:#f3f4f6;color:#6b7280;font-size:.7rem;">You</span>
              {% endif %}
            </div>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="7" class="text-center py-5">
            <i class="bi bi-people text-muted" style="font-size:3rem;opacity:.25;"></i>
            <p class="text-muted small mt-3 mb-0">No users found for this filter.</p>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold" id="deleteUserModalLabel">
                    <i class="bi bi-exclamation-triangle-fill text-danger me-2"></i>Delete User
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-2">
                <p class="text-muted mb-0">Are you sure you want to delete <strong id="deleteUsername"></strong>? This action cannot be undone.</p>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteUserForm" method="post" action="">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger btn-sm">Delete User</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('deleteUserModal').addEventListener('show.bs.modal', function (event) {
    const btn = event.relatedTarget;
    const userId = btn.getAttribute('data-user-id');
    const username = btn.getAttribute('data-username');
    document.getElementById('deleteUsername').textContent = '@' + username;
    document.getElementById('deleteUserForm').action = '/dashboard/admin/users/' + userId + '/delete/';
});
</script>
{% endblock %}