{# Panel de usuarios + roles + audit.

   Contrato con el router `make_users_router`:
     mount_prefix  → prefijo del router (ej: "/admin/users")
     catalog       → dict {permission_key: human_label}

   Todos los endpoints son relativos a `mount_prefix`:
     GET    {mount_prefix}/data                          → JSON users
     POST   {mount_prefix}/invite                        → form invite
     POST   {mount_prefix}/create                        → form crear con password
     PATCH  {mount_prefix}/{user_id}/roles               → JSON roles
     POST   {mount_prefix}/{user_id}/password/reset
     DELETE {mount_prefix}/{user_id}
     GET    {mount_prefix}/{user_id}/effective-permissions
     GET    {mount_prefix}/roles
     POST   {mount_prefix}/roles
     PATCH  {mount_prefix}/roles/{slug}/permissions
     DELETE {mount_prefix}/roles/{slug}
     GET    {mount_prefix}/audit

   La pagina carga los datos en JS via fetch para evitar acoplar el
   render server-side a un layout especifico del host. El host es
   responsable de incluir HTMX/fetch y de envolver este template con su
   propio layout (sidebar, header, etc.).
#}
{% from "dg/components/page_header.html" import page_header %}
{% from "dg/components/button.html" import button %}

{% set base = mount_prefix | default('/admin/users') %}

{% call page_header(title="Usuarios", subtitle="Gestión de cuentas, roles y permisos") %}
  {{ button("Invitar", variant="primary",
            attrs="onclick=\"document.getElementById('dg-invite').showModal()\"") }}
  {{ button("Crear con contraseña", variant="ghost",
            attrs="onclick=\"document.getElementById('dg-create').showModal()\"") }}
{% endcall %}

<div role="tablist" class="flex gap-2 border-b mb-4" data-dg-tabs>
  <button role="tab" class="px-3 py-2 border-b-2 border-transparent
          aria-selected:border-current" aria-selected="true"
          data-dg-tab="users">Usuarios</button>
  <button role="tab" class="px-3 py-2 border-b-2 border-transparent
          aria-selected:border-current" aria-selected="false"
          data-dg-tab="roles">Roles</button>
  <button role="tab" class="px-3 py-2 border-b-2 border-transparent
          aria-selected:border-current" aria-selected="false"
          data-dg-tab="audit">Audit log</button>
</div>

<section data-dg-pane="users">
  <table class="w-full text-sm" id="dg-users-table">
    <thead class="text-left text-xs uppercase tracking-wide">
      <tr><th class="py-2">Email</th><th>Roles</th><th>Permisos efectivos</th><th></th></tr>
    </thead>
    <tbody id="dg-users-body">
      <tr><td colspan="4" class="py-6 text-center opacity-60">Cargando…</td></tr>
    </tbody>
  </table>
</section>

<section data-dg-pane="roles" hidden>
  <div class="flex justify-end mb-3">
    {{ button("Crear rol", variant="primary",
              attrs="onclick=\"document.getElementById('dg-create-role').showModal()\"") }}
  </div>
  <table class="w-full text-sm" id="dg-roles-table">
    <thead class="text-left text-xs uppercase tracking-wide">
      <tr><th class="py-2">Slug</th><th>Etiqueta</th><th>Permisos</th><th></th></tr>
    </thead>
    <tbody id="dg-roles-body"></tbody>
  </table>
</section>

<section data-dg-pane="audit" hidden>
  <table class="w-full text-sm" id="dg-audit-table">
    <thead class="text-left text-xs uppercase tracking-wide">
      <tr><th class="py-2">Fecha</th><th>Acción</th><th>Actor</th><th>Target</th><th>Metadata</th></tr>
    </thead>
    <tbody id="dg-audit-body"></tbody>
  </table>
</section>

{# ---------- Modales ---------- #}

<dialog id="dg-invite" class="rounded-xl p-6 max-w-md w-full">
  <form method="dialog" data-dg-form="invite" class="flex flex-col gap-3">
    <h2 class="text-lg font-semibold">Invitar usuario</h2>
    <label class="flex flex-col text-sm">
      Email
      <input type="email" name="email" required maxlength="254"
             class="border rounded px-2 py-1 mt-1">
    </label>
    <fieldset class="flex flex-col text-sm" data-dg-role-picker>
      <legend>Roles</legend>
      <div class="flex flex-wrap gap-2 mt-1" data-dg-role-options></div>
    </fieldset>
    <div class="flex justify-end gap-2 mt-2">
      <button type="button" value="cancel"
              onclick="document.getElementById('dg-invite').close()">Cancelar</button>
      <button type="submit" value="ok" class="font-semibold">Enviar invitación</button>
    </div>
  </form>
</dialog>

<dialog id="dg-create" class="rounded-xl p-6 max-w-md w-full">
  <form method="dialog" data-dg-form="create" class="flex flex-col gap-3">
    <h2 class="text-lg font-semibold">Crear con contraseña</h2>
    <label class="flex flex-col text-sm">
      Email
      <input type="email" name="email" required maxlength="254"
             class="border rounded px-2 py-1 mt-1">
    </label>
    <label class="flex flex-col text-sm">
      Contraseña
      <input type="password" name="password" required minlength="8" maxlength="128"
             pattern="^(?=.*[A-Z])(?=.*\d).{8,128}$"
             class="border rounded px-2 py-1 mt-1">
      <span class="text-xs opacity-60 mt-1">Min 8, 1 mayúscula, 1 dígito.</span>
    </label>
    <fieldset class="flex flex-col text-sm" data-dg-role-picker>
      <legend>Roles</legend>
      <div class="flex flex-wrap gap-2 mt-1" data-dg-role-options></div>
    </fieldset>
    <div class="flex justify-end gap-2 mt-2">
      <button type="button"
              onclick="document.getElementById('dg-create').close()">Cancelar</button>
      <button type="submit" class="font-semibold">Crear</button>
    </div>
  </form>
</dialog>

<dialog id="dg-edit-roles" class="rounded-xl p-6 max-w-md w-full">
  <form method="dialog" data-dg-form="edit-roles" class="flex flex-col gap-3">
    <h2 class="text-lg font-semibold">Editar roles</h2>
    <p class="text-sm opacity-70" data-dg-edit-email></p>
    <input type="hidden" name="user_id" data-dg-edit-userid>
    <fieldset class="flex flex-col text-sm" data-dg-role-picker>
      <legend>Roles</legend>
      <div class="flex flex-wrap gap-2 mt-1" data-dg-role-options></div>
    </fieldset>
    <div class="flex justify-end gap-2 mt-2">
      <button type="button"
              onclick="document.getElementById('dg-edit-roles').close()">Cancelar</button>
      <button type="submit" class="font-semibold">Guardar</button>
    </div>
  </form>
</dialog>

<dialog id="dg-effective" class="rounded-xl p-6 max-w-md w-full">
  <h2 class="text-lg font-semibold mb-3">Permisos efectivos</h2>
  <ul class="text-sm flex flex-col gap-1" id="dg-effective-list"></ul>
  <div class="flex justify-end mt-3">
    <button onclick="document.getElementById('dg-effective').close()">Cerrar</button>
  </div>
</dialog>

<dialog id="dg-create-role" class="rounded-xl p-6 max-w-md w-full">
  <form method="dialog" data-dg-form="create-role" class="flex flex-col gap-3">
    <h2 class="text-lg font-semibold">Crear rol</h2>
    <label class="flex flex-col text-sm">
      Slug
      <input type="text" name="slug" required pattern="^[a-z][a-z0-9_-]{0,63}$"
             maxlength="64" class="border rounded px-2 py-1 mt-1">
    </label>
    <label class="flex flex-col text-sm">
      Etiqueta
      <input type="text" name="label" required minlength="1" maxlength="120"
             class="border rounded px-2 py-1 mt-1">
    </label>
    <fieldset class="flex flex-col text-sm" data-dg-permission-picker>
      <legend>Permisos</legend>
      <div class="flex flex-col gap-1 mt-1 max-h-64 overflow-auto" data-dg-permission-options></div>
    </fieldset>
    <div class="flex justify-end gap-2 mt-2">
      <button type="button"
              onclick="document.getElementById('dg-create-role').close()">Cancelar</button>
      <button type="submit" class="font-semibold">Crear</button>
    </div>
  </form>
</dialog>

<script>
(function () {
  const BASE = {{ base | tojson }};
  const CATALOG = {{ catalog | tojson }};

  const $ = (s, root) => (root || document).querySelector(s);
  const $$ = (s, root) => Array.from((root || document).querySelectorAll(s));

  // ---------- Tabs ----------
  $$('[data-dg-tab]').forEach(btn => {
    btn.addEventListener('click', () => {
      const target = btn.dataset.dgTab;
      $$('[data-dg-tab]').forEach(b => b.setAttribute(
        'aria-selected', String(b === btn)));
      $$('[data-dg-pane]').forEach(p => {
        p.hidden = p.dataset.dgPane !== target;
      });
      if (target === 'roles') loadRoles();
      if (target === 'audit') loadAudit();
    });
  });

  // ---------- Fetch helpers ----------
  async function api(method, path, body) {
    const opts = { method, headers: { 'Accept': 'application/json' } };
    if (body !== undefined) {
      opts.headers['Content-Type'] = 'application/json';
      opts.body = JSON.stringify(body);
    }
    const r = await fetch(BASE + path, opts);
    const data = await r.json().catch(() => ({}));
    if (!r.ok || data.error) {
      const msg = (data.error && data.error.message) || ('http-' + r.status);
      throw new Error(msg);
    }
    return data.data;
  }

  // ---------- Estado ----------
  let ROLES = [];   // [{slug, label, is_system, permissions: [...]}]

  // ---------- Pickers ----------
  function renderRolePickers(selectedBySource) {
    // selectedBySource: dialog id -> Set<slug>
    $$('[data-dg-role-options]').forEach(container => {
      const dialog = container.closest('dialog');
      const selected = (selectedBySource && selectedBySource[dialog.id]) || new Set();
      container.innerHTML = '';
      for (const role of ROLES) {
        const wrap = document.createElement('label');
        wrap.className = 'inline-flex items-center gap-1 px-2 py-1 border rounded text-xs';
        const input = document.createElement('input');
        input.type = 'checkbox';
        input.name = 'role_slugs';
        input.value = role.slug;
        if (selected.has(role.slug)) input.checked = true;
        wrap.appendChild(input);
        wrap.append(' ' + (role.label || role.slug));
        container.appendChild(wrap);
      }
    });
  }

  function renderPermissionPicker() {
    $$('[data-dg-permission-options]').forEach(container => {
      container.innerHTML = '';
      for (const [key, label] of Object.entries(CATALOG)) {
        const wrap = document.createElement('label');
        wrap.className = 'inline-flex items-center gap-2 text-sm';
        const input = document.createElement('input');
        input.type = 'checkbox';
        input.name = 'permissions';
        input.value = key;
        const keySpan = document.createElement('span');
        keySpan.className = 'font-mono text-xs opacity-70';
        keySpan.textContent = key;
        const labelSpan = document.createElement('span');
        labelSpan.textContent = label;
        wrap.append(input, keySpan, labelSpan);
        container.appendChild(wrap);
      }
    });
  }

  // ---------- Users ----------
  async function loadUsers() {
    const body = $('#dg-users-body');
    body.innerHTML = '<tr><td colspan="4" class="py-6 text-center opacity-60">Cargando…</td></tr>';
    try {
      const data = await api('GET', '/data?limit=50');
      const rows = data.users.map(u => `
        <tr class="border-t">
          <td class="py-2">${escapeHtml(u.email || '')}</td>
          <td>${(u.role_slugs || []).map(escapeHtml).join(', ') || '—'}</td>
          <td><button data-dg-effective="${u.id}" class="text-xs underline">ver</button></td>
          <td class="text-right text-xs">
            <button data-dg-edit="${u.id}" data-dg-email="${escapeHtml(u.email || '')}"
                    data-dg-roles="${(u.role_slugs || []).join(',')}">editar</button>
            <button data-dg-reset="${u.id}" data-dg-reset-email="${escapeHtml(u.email || '')}">reset</button>
            <button data-dg-delete="${u.id}">borrar</button>
          </td>
        </tr>`).join('');
      body.innerHTML = rows || '<tr><td colspan="4" class="py-6 text-center opacity-60">Sin usuarios.</td></tr>';
      wireUserRowActions();
    } catch (e) {
      body.innerHTML = `<tr><td colspan="4" class="py-6 text-red-600">${escapeHtml(e.message)}</td></tr>`;
    }
  }

  function wireUserRowActions() {
    $$('[data-dg-effective]').forEach(b => b.addEventListener('click', async () => {
      const uid = b.dataset.dgEffective;
      const data = await api('GET', `/${uid}/effective-permissions`);
      const list = $('#dg-effective-list');
      list.innerHTML = data.permissions.map(p =>
        `<li class="flex justify-between gap-2"><code class="text-xs">${escapeHtml(p.key)}</code>
         <span>${escapeHtml(p.label)}</span></li>`).join('') ||
        '<li class="opacity-60">Sin permisos.</li>';
      $('#dg-effective').showModal();
    }));
    $$('[data-dg-edit]').forEach(b => b.addEventListener('click', () => {
      const uid = b.dataset.dgEdit;
      const email = b.dataset.dgEmail || '';
      const current = new Set((b.dataset.dgRoles || '').split(',').filter(Boolean));
      $('[data-dg-edit-email]').textContent = email;
      $('[data-dg-edit-userid]').value = uid;
      renderRolePickers({ 'dg-edit-roles': current });
      $('#dg-edit-roles').showModal();
    }));
    $$('[data-dg-reset]').forEach(b => b.addEventListener('click', async () => {
      const uid = b.dataset.dgReset;
      const email = b.dataset.dgResetEmail;
      if (!confirm(`¿Enviar reset password a ${email}?`)) return;
      const fd = new FormData(); fd.append('email', email);
      await fetch(`${BASE}/${uid}/password/reset`, { method: 'POST', body: fd });
      alert('Email enviado.');
    }));
    $$('[data-dg-delete]').forEach(b => b.addEventListener('click', async () => {
      const uid = b.dataset.dgDelete;
      if (!confirm('¿Borrar este usuario? Esta acción es irreversible.')) return;
      await api('DELETE', `/${uid}`);
      loadUsers();
    }));
  }

  // ---------- Roles ----------
  async function loadRoles() {
    ROLES = await api('GET', '/roles');
    const body = $('#dg-roles-body');
    body.innerHTML = ROLES.map(r => `
      <tr class="border-t">
        <td class="py-2"><code class="text-xs">${escapeHtml(r.slug)}</code>
            ${r.is_system ? '<span class="text-xs opacity-60">(sistema)</span>' : ''}</td>
        <td>${escapeHtml(r.label)}</td>
        <td class="text-xs">${(r.permissions || []).map(escapeHtml).join(', ') || '—'}</td>
        <td class="text-right text-xs">
          ${r.is_system ? '' :
            `<button data-dg-delete-role="${escapeHtml(r.slug)}">borrar</button>`}
        </td>
      </tr>`).join('');
    $$('[data-dg-delete-role]').forEach(b => b.addEventListener('click', async () => {
      const slug = b.dataset.dgDeleteRole;
      if (!confirm(`¿Borrar rol ${slug}?`)) return;
      try { await api('DELETE', `/roles/${slug}`); loadRoles(); }
      catch (e) { alert(e.message); }
    }));
  }

  // ---------- Audit ----------
  async function loadAudit() {
    const data = await api('GET', '/audit?limit=50');
    $('#dg-audit-body').innerHTML = data.entries.map(e => `
      <tr class="border-t">
        <td class="py-2 text-xs">${escapeHtml(e.created_at || '')}</td>
        <td><code class="text-xs">${escapeHtml(e.action)}</code></td>
        <td class="text-xs">${escapeHtml(e.actor_id || '')}</td>
        <td class="text-xs">${escapeHtml(e.target_user_id)}</td>
        <td class="text-xs"><pre class="whitespace-pre-wrap">${escapeHtml(JSON.stringify(e.metadata))}</pre></td>
      </tr>`).join('') || '<tr><td colspan="5" class="py-6 opacity-60">Sin eventos.</td></tr>';
  }

  // ---------- Forms ----------
  document.addEventListener('submit', async (ev) => {
    const form = ev.target;
    if (!form.matches('[data-dg-form]')) return;
    ev.preventDefault();
    const type = form.dataset.dgForm;
    const fd = new FormData(form);
    const roleSlugs = fd.getAll('role_slugs');
    try {
      if (type === 'invite') {
        await api('POST', '/invite', { email: fd.get('email'), role_slugs: roleSlugs });
        form.closest('dialog').close(); loadUsers();
      } else if (type === 'create') {
        await api('POST', '/create', {
          email: fd.get('email'), password: fd.get('password'), role_slugs: roleSlugs,
        });
        form.closest('dialog').close(); form.reset(); loadUsers();
      } else if (type === 'edit-roles') {
        await api('PATCH', `/${fd.get('user_id')}/roles`, { role_slugs: roleSlugs });
        form.closest('dialog').close(); loadUsers();
      } else if (type === 'create-role') {
        await api('POST', '/roles', {
          slug: fd.get('slug'),
          label: fd.get('label'),
          permissions: fd.getAll('permissions'),
        });
        form.closest('dialog').close(); form.reset(); loadRoles();
      }
    } catch (e) {
      alert(e.message);
    }
  });

  // ---------- Util ----------
  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, c => ({
      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
    }[c]));
  }

  // ---------- Init ----------
  (async function init() {
    try { ROLES = await api('GET', '/roles'); } catch (_) { ROLES = []; }
    renderRolePickers();
    renderPermissionPicker();
    loadUsers();
  })();
})();
</script>