{% extends "base.html" %}
{% block title %}User Management — Ain El Aql{% endblock %}

{% block body %}
<div class="app-layout">
  {% with role='admin', active='users' %}
  {% include "partials/sidebar.html" %}
  {% endwith %}

  <main class="main-content">
    <div class="page-header fade-in">
      <h1 class="page-title">User Management</h1>
      <p class="page-subtitle">View and manage all registered users.</p>
    </div>

    <div class="card fade-in">
      <div class="card-header">
        <span class="card-title">👥 All Users</span>
        <button class="btn btn-outline" onclick="loadUsers()">🔄 Refresh</button>
      </div>
      <div class="table-wrapper">
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Username</th>
              <th>Role</th>
              <th>Phone</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody id="usersBody">
            <tr><td colspan="5" class="text-center" style="padding:2rem;color:var(--text-muted);">Loading users...</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </main>
</div>
{% endblock %}

{% block scripts %}
<script>
async function loadUsers() {
  const body = document.getElementById('usersBody');
  try {
    const res = await fetch('/admin/api/users');
    const data = await res.json();
    const users = Array.isArray(data) ? data : (data.users || data.data || []);
    
    if (!users.length) {
      body.innerHTML = '<tr><td colspan="5" class="text-center" style="padding:2rem;color:var(--text-muted);">No users found.</td></tr>';
      return;
    }
    
    body.innerHTML = users.map(u => {
      const name = u.full_name || (u.first_name + ' ' + (u.last_name || '')) || '—';
      const role = u.role || 'user';
      const roleClass = role === 'admin' ? 'status-registered' : (role === 'security' ? 'status-active' : 'status-unregistered');
      return `<tr>
        <td style="font-weight:bold;color:white;">${name}</td>
        <td class="mono">${u.username || '—'}</td>
        <td><span class="status ${roleClass}">${role.toUpperCase()}</span></td>
        <td>${u.phone_number || '—'}</td>
        <td>${u.email || '—'}</td>
      </tr>`;
    }).join('');
  } catch (err) {
    console.error(err);
    body.innerHTML = '<tr><td colspan="5" class="text-center" style="padding:2rem;color:var(--error);">Failed to load users.</td></tr>';
  }
}

loadUsers();
</script>
{% endblock %}