{% extends "base.html" %}
{% block title %}User Management — Supavision{% endblock %}
{% block content %}
<div class="page-header">
  <div class="page-header-left">
    <h2>User Management</h2>
    <span class="page-subtitle">Create accounts and manage access to Supavision.</span>
  </div>
</div>

<div class="settings-tabs">
  <a href="/settings" class="settings-tab">System</a>
  {% if is_admin %}
  <a href="/settings/users" class="settings-tab settings-tab--active">Users</a>
  {% endif %}
</div>

{# ── Create User Form ── #}
<div class="settings-section">
  <h4>Create User</h4>
  <form method="post" action="/settings/users/create">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label" for="email">Email</label>
        <input class="form-input" type="email" id="email" name="email" required placeholder="user@example.com">
      </div>
      <div class="form-group">
        <label class="form-label" for="name">Name</label>
        <input class="form-input" type="text" id="name" name="name" placeholder="Display name">
      </div>
      <div class="form-group">
        <label class="form-label" for="password">Password</label>
        <input class="form-input" type="password" id="password" name="password" required minlength="8">
      </div>
      <div class="form-group">
        <label class="form-label" for="role">Role</label>
        <select class="form-select" id="role" name="role">
          <option value="viewer">Viewer</option>
          <option value="admin">Admin</option>
        </select>
        <span class="form-hint">Viewers can browse dashboards and reports. Admins can also manage users and settings.</span>
      </div>
    </div>
    <div class="form-actions">
      <button type="submit" class="btn">Create User</button>
    </div>
  </form>
</div>

{# ── Users List ── #}
<div class="settings-section">
  <h4>Users ({{ users | length }})</h4>
  {% if users %}
  <table class="table">
    <thead>
      <tr>
        <th>Email</th>
        <th>Name</th>
        <th>Role</th>
        <th>Status</th>
        <th>Last Login</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
    {% for user in users %}
      <tr>
        <td>{{ user.email }}</td>
        <td>{{ user.name }}</td>
        <td><span class="badge badge--{{ 'type' if user.role == 'admin' else 'unknown' }}">{{ user.role }}</span></td>
        <td>
          {% if user.is_active %}
          <span class="badge badge--healthy">Active</span>
          {% else %}
          <span class="badge badge--unknown">Inactive</span>
          {% endif %}
        </td>
        <td class="text-muted">
          {% if user.last_login_at %}
          <span data-timestamp="{{ user.last_login_at }}">{{ user.last_login_at }}</span>
          {% else %}
          Never
          {% endif %}
        </td>
        <td>
          <button class="btn btn-sm btn-outline"
                  hx-post="/settings/users/{{ user.id }}/toggle" hx-swap="none"
                  data-success-msg="{{ 'Deactivated' if user.is_active else 'Activated' }}"
                  data-error-msg="Failed">
            {{ "Deactivate" if user.is_active else "Activate" }}
          </button>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="text-muted">No users yet. Create one above or run <code>supavision create-admin</code>.</p>
  {% endif %}
</div>

{# ── Audit Log ── #}
<div class="settings-section">
  <h4>Recent Auth Activity</h4>
  <p class="text-muted text-sm mb-2">Login attempts, session events, and account changes.</p>
  {% if audit_log %}
  <table class="table">
    <thead>
      <tr><th>Event</th><th>Email</th><th>IP</th><th>Detail</th><th>Time</th></tr>
    </thead>
    <tbody>
    {% for entry in audit_log %}
      <tr>
        <td><span class="badge badge--{{ 'healthy' if 'success' in entry.event else ('critical' if 'failure' in entry.event else 'unknown') }}">{{ entry.event }}</span></td>
        <td>{{ entry.email or '—' }}</td>
        <td class="text-muted">{{ entry.ip or '—' }}</td>
        <td class="text-muted text-sm">{{ entry.detail or '—' }}</td>
        <td class="text-muted"><span data-timestamp="{{ entry.created_at }}">{{ entry.created_at }}</span></td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="text-muted">No auth events recorded yet.</p>
  {% endif %}
</div>
{% endblock %}