{% extends "base.html" %}
{% block title %}Users // Synapse-Cortex{% endblock %}
{% block header %}Admin // User Accounts{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-4">
  <div class="text-xs text-cortex-muted uppercase tracking-wider">Tenant Users ({{ users|length }})</div>
  <button onclick="document.getElementById('new-user-modal').classList.remove('hidden')"
          class="bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs px-4 py-2 rounded hover:bg-accent-blue-bright transition">
    + New User
  </button>
</div>

<div class="border border-cortex-border bg-cortex-panel rounded-md">
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left text-[10px] text-cortex-muted uppercase tracking-wider border-b border-cortex-border">
        <th class="px-4 py-2">Name</th>
        <th class="px-4 py-2">Email</th>
        <th class="px-4 py-2">Role</th>
        <th class="px-4 py-2">Status</th>
        <th class="px-4 py-2">MFA</th>
        <th class="px-4 py-2"></th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
      <tr class="border-b border-cortex-border/60 hover:bg-cortex-panel2" data-user-id="{{ u.id }}">
        <td class="px-4 py-2">
          {{ u.full_name }}
          {% if u.id == user.id %}<span class="text-[10px] text-cortex-muted">(you)</span>{% endif %}
        </td>
        <td class="px-4 py-2 text-xs text-chrome-dim">{{ u.email }}</td>
        <td class="px-4 py-2">
          <select class="role-select bg-cortex-panel2 border border-cortex-border rounded px-2 py-1 text-[10px] uppercase" {% if u.id == user.id %}disabled{% endif %}>
            {% for r in ['global_admin', 'tenant_admin', 'agent', 'requester'] %}
            <option value="{{ r }}" {% if u.role.value == r %}selected{% endif %}>{{ r.replace('_',' ') }}</option>
            {% endfor %}
          </select>
        </td>
        <td class="px-4 py-2">
          <button class="active-toggle text-[10px] px-2 py-0.5 rounded uppercase border {% if u.is_active %}bg-accent-green/15 text-accent-green border-accent-green/30{% else %}bg-cortex-panel2 text-cortex-muted border-cortex-border{% endif %}"
                  data-active="{{ u.is_active|lower }}" {% if u.id == user.id %}disabled{% endif %}>
            {{ 'active' if u.is_active else 'disabled' }}
          </button>
        </td>
        <td class="px-4 py-2">
          <button class="mfa-toggle text-[10px] px-2 py-0.5 rounded uppercase border {% if u.mfa_enabled %}bg-accent-blue/15 text-accent-blue border-accent-blue/30{% elif u.mfa_required %}bg-accent-orange/15 text-accent-orange border-accent-orange/30{% else %}bg-cortex-panel2 text-cortex-muted border-cortex-border{% endif %}"
                  data-required="{{ u.mfa_required|lower }}" title="Click to toggle 'MFA required'">
            {% if u.mfa_enabled %}enrolled{% elif u.mfa_required %}required{% else %}optional{% endif %}
          </button>
        </td>
        <td class="px-4 py-2 text-right">
          {% if u.id != user.id %}
          <button class="delete-btn text-[10px] uppercase text-accent-red hover:underline">Delete</button>
          {% endif %}
        </td>
      </tr>
      {% else %}
      <tr><td colspan="6" class="px-4 py-6 text-center text-cortex-muted text-xs">No users yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div id="new-user-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-50 px-4">
  <div class="w-full max-w-md border border-cortex-border bg-cortex-panel rounded-md p-6">
    <div class="flex items-center justify-between mb-4">
      <div class="text-xs uppercase tracking-wider text-accent-blue">New User</div>
      <button onclick="document.getElementById('new-user-modal').classList.add('hidden')" class="text-cortex-muted hover:text-accent-red">&times;</button>
    </div>
    <div id="user-form-error" class="hidden mb-3 text-xs border border-accent-red/40 bg-accent-red/10 text-accent-red px-3 py-2 rounded"></div>
    <form id="user-form" class="space-y-3 text-sm">
      <div>
        <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Full Name</label>
        <input required name="full_name" type="text" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Email</label>
        <input required name="email" type="email" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Password</label>
        <input required name="password" type="password" minlength="8" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Role</label>
        <select name="role" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2">
          <option value="requester" selected>Requester</option>
          <option value="agent">Agent</option>
          <option value="tenant_admin">Tenant Admin</option>
          {% if user.role.value == 'global_admin' %}<option value="global_admin">Global Admin</option>{% endif %}
        </select>
      </div>
      <button type="submit" class="w-full bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs py-2.5 rounded hover:bg-accent-blue-bright transition">
        Create User
      </button>
    </form>
  </div>
</div>

<script>
  document.getElementById('user-form').addEventListener('submit', async function (e) {
    e.preventDefault();
    const errorBox = document.getElementById('user-form-error');
    errorBox.classList.add('hidden');
    const data = Object.fromEntries(new FormData(e.target).entries());

    const res = await fetch('/api/v1/admin/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    if (res.ok) {
      window.location.reload();
    } else {
      const err = await res.json().catch(() => ({}));
      errorBox.textContent = err.detail ? JSON.stringify(err.detail) : 'Failed to create user.';
      errorBox.classList.remove('hidden');
    }
  });

  document.querySelectorAll('.role-select').forEach(function (sel) {
    sel.addEventListener('change', async function () {
      const userId = sel.closest('tr').getAttribute('data-user-id');
      await fetch('/api/v1/admin/users/' + userId, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ role: sel.value }),
      });
      window.location.reload();
    });
  });

  document.querySelectorAll('.active-toggle').forEach(function (btn) {
    btn.addEventListener('click', async function () {
      const userId = btn.closest('tr').getAttribute('data-user-id');
      const newValue = btn.getAttribute('data-active') !== 'true';
      await fetch('/api/v1/admin/users/' + userId, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ is_active: newValue }),
      });
      window.location.reload();
    });
  });

  document.querySelectorAll('.mfa-toggle').forEach(function (btn) {
    btn.addEventListener('click', async function () {
      const userId = btn.closest('tr').getAttribute('data-user-id');
      const newValue = btn.getAttribute('data-required') !== 'true';
      await fetch('/api/v1/admin/users/' + userId, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ mfa_required: newValue }),
      });
      window.location.reload();
    });
  });

  document.querySelectorAll('.delete-btn').forEach(function (btn) {
    btn.addEventListener('click', async function () {
      if (!confirm('Delete this user?')) return;
      const userId = btn.closest('tr').getAttribute('data-user-id');
      const res = await fetch('/api/v1/admin/users/' + userId, { method: 'DELETE' });
      if (res.ok) window.location.reload();
    });
  });
</script>
{% endblock %}