{# 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}
     directory_caps  → capacidades del directorio de identidades (opcional)

   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
     POST   {mount_prefix}/{user_id}/password/set
     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 página carga los datos en JS vía fetch para evitar acoplar el
   render server-side a un layout específico del host. El host es
   responsable de envolver este template con su propio layout (sidebar,
   header, etc.) y de cargar `htmx-events.js` (dgConfirm), `toasts.js`
   (dgToast; sin la región `#dg-toasts` los avisos van a alert()) y
   `reveal.js` (mostrar contraseña). `sidebar_shell` ya los carga.
   Los estilos propios viven en el bloque dg-users de `_tailwind.source.css`;
   pila, pestañas, diálogos, avisos y campos son componentes del paquete.
#}
{% from "core/components/page_header.html" import page_header %}
{% from "core/components/search_field.html" import search_field %}
{% from "core/components/icon.html" import icon, icon_tile %}
{% from "core/components/skeleton.html" import skeleton %}

{% set base = mount_prefix | default('/admin/users') %}
{# Capabilities del directorio de identidades (Supabase/Clerk). El default
   replica el set completo de Supabase para contextos que no las pasan. #}
{% set caps = directory_caps | default(['invite', 'create_password', 'password_reset_email', 'password_set', 'delete']) %}

{# `cols` lleva la clase de cada columna: las que se ocultan en anchos
   estrechos deben ocultarse también en el esqueleto o aparece una columna
   sin cabecera. La fecha de Actividad lleva ancho fijo: al apilarse, su
   celda se ajusta al contenido y un porcentaje la dejaría a cero. #}
{% macro _skeleton_rows(cols, lead=false) -%}
{%- for _ in range(3) %}
<tr class="dg-users-skel-row" aria-hidden="true">
  {%- for col_class in cols %}
  <td{% if col_class %} class="{{ col_class }}"{% endif %}>
    {%- if loop.first and lead %}<span class="dg-users-who">{{ skeleton("2rem", "2rem", "dg-users-skel") }}{{ skeleton("60%", "0.75rem", "dg-users-skel") }}</span>
    {%- elif loop.first %}{{ skeleton("7rem", "0.75rem", "dg-users-skel") }}
    {%- else %}{{ skeleton("60%", "0.75rem", "dg-users-skel") }}{% endif -%}
  </td>
  {%- endfor %}
</tr>
{%- endfor %}
{%- endmacro %}

{# El subtítulo describe el diálogo (aria-describedby="<id>-subtitle"). #}
{% macro _dialog_head(id, tile, title, tone="neutral") -%}
<div class="dg-dialog-head">
  {{ icon_tile(tile, tone=tone) }}
  <div class="dg-dialog-titles">
    <h2 id="{{ id }}-title" class="dg-dialog-title">{{ title }}</h2>
    <p id="{{ id }}-subtitle" class="dg-dialog-subtitle">{{ caller() }}</p>
  </div>
  <button type="button" class="btn-icon dg-dialog-close" aria-label="Cerrar" data-dg-close>{{ icon("x") }}</button>
</div>
{%- endmacro %}

{% macro _dialog_foot(label, icon_name=none) -%}
<div class="dg-dialog-foot">
  <button type="button" class="btn-ghost" data-dg-close>Cancelar</button>
  <button type="submit" class="btn-primary">{% if icon_name %}{{ icon(icon_name) }}{% endif %}<span>{{ label }}</span></button>
</div>
{%- endmacro %}

{% macro _form_error() -%}
<p class="dg-callout dg-callout-sm dg-tone-danger" role="alert" data-dg-form-error hidden>{{ icon("circle-alert") }}<span></span></p>
{%- endmacro %}

{% set _meta = [
  {"icon": "users", "label": '<span data-dg-users-total><strong>…</strong> usuarios</span>' | safe},
  {"icon": "circle-dashed", "label": '<span data-dg-users-norole></span>' | safe},
] %}

<div class="dg-users dg-stack" data-dg-users-panel>

{% call page_header(title="Usuarios",
    subtitle="Cuentas con acceso a la app, sus roles y los permisos que les dan.",
    icon="users", meta=_meta) %}
  <button type="button" class="btn-secondary" data-dg-open="dg-create">{{ icon("lock") }}<span>Crear con contraseña</span></button>
  <button type="button" class="btn-primary" data-dg-open="dg-invite">{{ icon("user-plus") }}<span>Invitar usuario</span></button>
{% endcall %}

<div class="dg-tabs" role="tablist" aria-label="Secciones del panel de usuarios" data-dg-tabs>
  <button type="button" role="tab" id="dg-tab-users" class="dg-tab" aria-selected="true"
          aria-controls="dg-pane-users" data-dg-tab="users">{{ icon("users") }}<span>Usuarios</span></button>
  <button type="button" role="tab" id="dg-tab-roles" class="dg-tab" aria-selected="false" tabindex="-1"
          aria-controls="dg-pane-roles" data-dg-tab="roles">{{ icon("shield-check") }}<span>Roles</span></button>
  <button type="button" role="tab" id="dg-tab-audit" class="dg-tab" aria-selected="false" tabindex="-1"
          aria-controls="dg-pane-audit" data-dg-tab="audit">{{ icon("history") }}<span>Actividad</span></button>
</div>

<section id="dg-pane-users" class="dg-users-pane" role="tabpanel" aria-labelledby="dg-tab-users" data-dg-pane="users">
  <div class="dg-users-toolbar">
    {{ search_field("dg-users-search", placeholder="Buscar por correo o rol", label="Buscar usuario", attrs="data-dg-users-search", shortcut="/") }}
  </div>
  <div class="dg-list dg-users-list">
    <table class="dg-users-table dg-users-table--users" id="dg-users-table" aria-busy="true">
      <thead>
        <tr class="dg-list-head">
          <th scope="col">Usuario</th>
          <th scope="col" class="dg-users-col-roles">Roles</th>
          <th scope="col" class="dg-users-col-act"><span class="sr-only">Acciones</span></th>
        </tr>
      </thead>
      <tbody id="dg-users-body">{{ _skeleton_rows(['', 'dg-users-col-roles', 'dg-users-col-act'], lead=true) }}</tbody>
    </table>
  </div>
  <p class="dg-users-foot" data-dg-users-more hidden></p>
  <p class="sr-only" aria-live="polite" data-dg-users-status></p>
</section>

<section id="dg-pane-roles" class="dg-users-pane" role="tabpanel" aria-labelledby="dg-tab-roles" data-dg-pane="roles" hidden>
  <div class="dg-users-toolbar">
    <p class="dg-users-lead">Cada rol agrupa permisos. Los roles de sistema no se pueden borrar.</p>
    <button type="button" class="btn-secondary" data-dg-open="dg-create-role">{{ icon("plus") }}<span>Crear rol</span></button>
  </div>
  <div class="dg-list dg-users-list">
    <table class="dg-users-table dg-users-table--roles" id="dg-roles-table" aria-busy="true">
      <thead>
        <tr class="dg-list-head">
          <th scope="col">Rol</th>
          <th scope="col" class="dg-users-col-perms">Permisos</th>
          <th scope="col" class="dg-users-col-act"><span class="sr-only">Acciones</span></th>
        </tr>
      </thead>
      <tbody id="dg-roles-body">{{ _skeleton_rows(['', 'dg-users-col-perms', 'dg-users-col-act'], lead=true) }}</tbody>
    </table>
  </div>
</section>

{# Sin nada enfocable dentro, el panel se enfoca para que el teclado llegue
   a la tabla (patrón de pestañas de la APG). #}
<section id="dg-pane-audit" class="dg-users-pane" role="tabpanel" aria-labelledby="dg-tab-audit" data-dg-pane="audit" tabindex="0" hidden>
  <div class="dg-users-toolbar">
    <p class="dg-users-lead">Los 50 cambios más recientes en cuentas, roles y permisos.</p>
  </div>
  {# Los roles ARIA explícitos conservan la semántica de tabla cuando, en
     anchos estrechos, las filas se apilan con display: grid. #}
  <div class="dg-list dg-users-list">
    <table class="dg-users-table dg-users-table--audit" id="dg-audit-table" role="table" aria-busy="true">
      <thead role="rowgroup">
        <tr class="dg-list-head" role="row">
          <th scope="col" role="columnheader">Fecha</th>
          <th scope="col" role="columnheader">Acción</th>
          <th scope="col" role="columnheader">Hecho por</th>
          <th scope="col" role="columnheader">Usuario afectado</th>
          <th scope="col" role="columnheader">Detalle</th>
        </tr>
      </thead>
      <tbody id="dg-audit-body" role="rowgroup">{{ _skeleton_rows(['', '', '', '', '']) }}</tbody>
    </table>
  </div>
</section>

{# Un único menú para todas las filas: el JS lo coloca junto al botón que lo
   abre y guarda en él a qué usuario se refiere. #}
<div id="dg-row-menu" class="dg-menu dg-users-menu" role="menu" aria-label="Acciones del usuario" hidden>
  <button type="button" class="dg-menu-item" role="menuitem" data-dg-menu-action="edit">{{ icon("pencil") }}<span>Editar roles</span></button>
  <button type="button" class="dg-menu-item" role="menuitem" data-dg-menu-action="effective">{{ icon("eye") }}<span>Ver permisos efectivos</span></button>
  <hr class="dg-menu-sep" role="separator">
  {% if 'password_reset_email' in caps %}
  <button type="button" class="dg-menu-item" role="menuitem" data-dg-menu-action="reset">{{ icon("mail") }}<span>Enviar correo para recuperar la contraseña</span></button>
  {% endif %}
  <button type="button" class="dg-menu-item" role="menuitem" data-dg-menu-action="set-pwd">{{ icon("lock") }}<span>Fijar contraseña</span></button>
  <hr class="dg-menu-sep" role="separator">
  <button type="button" class="dg-menu-item dg-menu-item--danger" role="menuitem" data-dg-menu-action="delete">{{ icon("trash-2") }}<span>Borrar usuario</span></button>
</div>

{# ---------- Modales ----------
   Anatomía del paquete (.dg-dialog-flush): cabecera con tile, cuerpo con
   scroll propio y pie tintado fijo, dentro del <form> (.dg-dialog-form). #}

<dialog id="dg-invite" class="dg-dialog dg-dialog-flush" aria-labelledby="dg-invite-title" aria-describedby="dg-invite-subtitle">
  <form method="dialog" class="dg-dialog-form" data-dg-form="invite">
    {% call _dialog_head("dg-invite", "user-plus", "Invitar usuario", tone="brand") %}Recibirá un correo con un enlace para activar su cuenta.{% endcall %}
    <div class="dg-dialog-body">
      <div class="dg-field">
        <label class="form-label" for="dg-invite-email">Correo electrónico</label>
        {# Sin autocompletar: el navegador propondría el correo del propio admin. #}
        <input id="dg-invite-email" type="email" name="email" required maxlength="254"
               class="form-input" placeholder="nombre@empresa.com" autocomplete="off">
      </div>
      <fieldset class="dg-field" data-dg-role-picker>
        <legend class="form-label">Roles</legend>
        <div class="dg-users-options dg-users-options--scroll" data-dg-role-options></div>
      </fieldset>
      {{ _form_error() }}
    </div>
    {{ _dialog_foot("Enviar invitación", "send") }}
  </form>
</dialog>

<dialog id="dg-create" class="dg-dialog dg-dialog-flush" aria-labelledby="dg-create-title" aria-describedby="dg-create-subtitle">
  <form method="dialog" class="dg-dialog-form" data-dg-form="create">
    {% call _dialog_head("dg-create", "lock", "Crear usuario con contraseña", tone="brand") %}La cuenta queda activa al momento y no se envía ningún correo.{% endcall %}
    <div class="dg-dialog-body">
      <div class="dg-field">
        <label class="form-label" for="dg-create-email">Correo electrónico</label>
        {# El gestor de contraseñas no debe rellenar aquí las credenciales del admin. #}
        <input id="dg-create-email" type="email" name="email" required maxlength="254"
               class="form-input" placeholder="nombre@empresa.com" autocomplete="off">
      </div>
      <div class="dg-field">
        <label class="form-label" for="dg-create-password">Contraseña</label>
        <div class="dg-input-control">
          <input id="dg-create-password" type="password" name="password" required minlength="8" maxlength="128"
                 pattern="^(?=.*[A-Z])(?=.*\d).{8,128}$"
                 class="form-input" autocomplete="new-password" aria-describedby="dg-create-password-hint">
          <button type="button" class="dg-reveal" data-dg-reveal aria-controls="dg-create-password"
                  aria-pressed="false" aria-label="Mostrar contraseña" hidden>
            {{ icon("eye", attrs='data-reveal-icon="show"') }}{{ icon("eye-off", attrs='data-reveal-icon="hide"') }}
          </button>
        </div>
        <span id="dg-create-password-hint" class="form-hint">Mínimo 8 caracteres, una mayúscula y un número.</span>
      </div>
      <fieldset class="dg-field" data-dg-role-picker>
        <legend class="form-label">Roles</legend>
        <div class="dg-users-options dg-users-options--scroll" data-dg-role-options></div>
      </fieldset>
      {{ _form_error() }}
    </div>
    {{ _dialog_foot("Crear usuario", "user-plus") }}
  </form>
</dialog>

<dialog id="dg-edit-roles" class="dg-dialog dg-dialog-flush" aria-labelledby="dg-edit-roles-title" aria-describedby="dg-edit-roles-subtitle">
  <form method="dialog" class="dg-dialog-form" data-dg-form="edit-roles">
    {% call _dialog_head("dg-edit-roles", "shield-check", "Editar roles") %}<span data-dg-edit-email></span>{% endcall %}
    <input type="hidden" name="user_id" data-dg-edit-userid>
    <div class="dg-dialog-body">
      <fieldset class="dg-field" data-dg-role-picker>
        <legend class="form-label">Roles</legend>
        <p class="form-hint">Sus permisos son la suma de los de todos sus roles.</p>
        <div class="dg-users-options dg-users-options--scroll" data-dg-role-options></div>
      </fieldset>
      {{ _form_error() }}
    </div>
    {{ _dialog_foot("Guardar", "save") }}
  </form>
</dialog>

<dialog id="dg-set-pwd" class="dg-dialog dg-dialog-flush" aria-labelledby="dg-set-pwd-title" aria-describedby="dg-set-pwd-subtitle">
  <form method="dialog" class="dg-dialog-form" data-dg-form="set-pwd">
    {% call _dialog_head("dg-set-pwd", "lock", "Fijar contraseña") %}<code class="dg-users-mono" data-dg-set-pwd-target></code>{% endcall %}
    <input type="hidden" name="user_id" data-dg-set-pwd-userid>
    <div class="dg-dialog-body">
      <p class="dg-callout dg-callout-sm dg-tone-info">{{ icon("info") }}<span>La contraseña se aplica al momento y no se envía ningún correo: comunícasela por un canal seguro.</span></p>
      <div class="dg-field">
        <label class="form-label" for="dg-set-pwd-password">Nueva contraseña</label>
        <input id="dg-set-pwd-password" type="text" name="password" required minlength="8" maxlength="128"
               pattern="^(?=.*[A-Z])(?=.*\d).{8,128}$"
               class="form-input form-input-mono"
               autocomplete="new-password" aria-describedby="dg-set-pwd-password-hint">
        <span id="dg-set-pwd-password-hint" class="form-hint">Mínimo 8 caracteres, una mayúscula y un número.</span>
      </div>
      {{ _form_error() }}
    </div>
    {{ _dialog_foot("Aplicar contraseña", "check") }}
  </form>
</dialog>

<dialog id="dg-effective" class="dg-dialog dg-dialog-flush" aria-labelledby="dg-effective-title" aria-describedby="dg-effective-subtitle">
  {% call _dialog_head("dg-effective", "eye", "Permisos efectivos") %}<span data-dg-effective-email></span>{% endcall %}
  <div class="dg-dialog-body">
    <ul class="dg-users-perms" id="dg-effective-list"></ul>
  </div>
  <div class="dg-dialog-foot">
    <button type="button" class="btn-secondary" data-dg-close>Cerrar</button>
  </div>
</dialog>

<dialog id="dg-edit-role-perms" class="dg-dialog dg-dialog-flush" aria-labelledby="dg-edit-role-perms-title" aria-describedby="dg-edit-role-perms-subtitle">
  <form method="dialog" class="dg-dialog-form" data-dg-form="edit-role-perms">
    {% call _dialog_head("dg-edit-role-perms", "shield-check", "Editar permisos del rol") %}<code class="dg-users-mono" data-dg-edit-role-slug></code><span data-dg-edit-role-label></span>{% endcall %}
    <input type="hidden" name="slug" data-dg-edit-role-slug-input>
    <div class="dg-dialog-body">
      <fieldset class="dg-field" data-dg-permission-picker>
        <legend class="form-label">Permisos</legend>
        <div class="dg-users-options dg-users-options--scroll" data-dg-permission-options></div>
      </fieldset>
      {{ _form_error() }}
    </div>
    {{ _dialog_foot("Guardar", "save") }}
  </form>
</dialog>

<dialog id="dg-create-role" class="dg-dialog dg-dialog-flush" aria-labelledby="dg-create-role-title" aria-describedby="dg-create-role-subtitle">
  <form method="dialog" class="dg-dialog-form" data-dg-form="create-role">
    {% call _dialog_head("dg-create-role", "shield-check", "Crear rol", tone="brand") %}Agrupa permisos para asignarlos de una vez.{% endcall %}
    <div class="dg-dialog-body">
      <div class="dg-field">
        <label class="form-label" for="dg-create-role-slug">Identificador</label>
        <input id="dg-create-role-slug" type="text" name="slug" required pattern="^[a-z][a-z0-9_-]{0,63}$"
               maxlength="64" class="form-input form-input-mono" placeholder="p. ej. supervisor"
               aria-describedby="dg-create-role-slug-hint">
        <span id="dg-create-role-slug-hint" class="form-hint">Minúsculas, números, guion y guion bajo. Empieza por una letra.</span>
      </div>
      <div class="dg-field">
        <label class="form-label" for="dg-create-role-label">Nombre visible</label>
        <input id="dg-create-role-label" type="text" name="label" required minlength="1" maxlength="120"
               class="form-input" placeholder="p. ej. Supervisor">
      </div>
      <fieldset class="dg-field" data-dg-permission-picker>
        <legend class="form-label">Permisos</legend>
        <div class="dg-users-options dg-users-options--scroll" data-dg-permission-options></div>
      </fieldset>
      {{ _form_error() }}
    </div>
    {{ _dialog_foot("Crear rol", "plus") }}
  </form>
</dialog>

</div>

{% set _audit_icons = ["send", "user-plus", "shield-check", "user-minus", "mail", "lock", "trash-2", "plus", "pencil", "activity"] %}
<script>
(function () {
  const root = document.querySelector('[data-dg-users-panel]');
  if (!root) return;

  const BASE = {{ base | tojson }};
  const CATALOG = {{ catalog | tojson }};

  // SVG del registro de iconos, renderizados en servidor: el JS no puede
  // llamar a los macros y no debe pegar SVG a mano.
  const IC = {
    more: {{ icon("ellipsis-vertical") | tojson }},
    pencil: {{ icon("pencil") | tojson }},
    trash: {{ icon("trash-2") | tojson }},
    refresh: {{ icon("refresh-cw") | tojson }},
    userPlus: {{ icon("user-plus") | tojson }},
    check: {{ icon("check") | tojson }},
    shieldOpt: {{ icon("shield-check") | tojson }},
    shield: {{ icon("shield-check", class="dg-status-icon") | tojson }},
    noRole: {{ icon("circle-dashed", class="dg-status-icon") | tojson }},
    lock: {{ icon("lock", class="dg-status-icon") | tojson }},
  };
  const TILE = {
    error: {{ icon_tile("circle-alert", tone="danger", size="lg") | tojson }},
    users: {{ icon_tile("users", tone="brand", size="lg") | tojson }},
    noMatch: {{ icon_tile("search-x", size="lg") | tojson }},
    roles: {{ icon_tile("shield-check", size="lg") | tojson }},
    audit: {{ icon_tile("history", size="lg") | tojson }},
    role: {{ icon_tile("shield-check", size="sm") | tojson }},
    roleAdmin: {{ icon_tile("shield-check", tone="brand", size="sm") | tojson }},
  };
  const AUDIT_ICON = {
    {%- for name in _audit_icons %}
    {{ name | tojson }}: {{ icon(name, class="dg-status-icon") | tojson }}{% if not loop.last %},{% endif %}
    {%- endfor %}
  };
  // Acciones que registra `users/audit.py`: etiqueta, tono e icono. Un
  // borrado es un evento correcto, no un fallo: el tono danger queda para
  // los errores y el icono ya dice qué pasó.
  const AUDIT = {
    invite: ['Invitación enviada', 'info', 'send'],
    create_password: ['Usuario creado', 'success', 'user-plus'],
    role_grant: ['Rol asignado', 'neutral', 'shield-check'],
    role_revoke: ['Rol retirado', 'warning', 'user-minus'],
    password_reset_sent: ['Correo de recuperación', 'info', 'mail'],
    password_set: ['Contraseña fijada', 'neutral', 'lock'],
    delete: ['Usuario borrado', 'neutral', 'trash-2'],
    role_created: ['Rol creado', 'success', 'plus'],
    role_deleted: ['Rol borrado', 'neutral', 'trash-2'],
    role_permissions_updated: ['Permisos del rol editados', 'neutral', 'pencil'],
  };
  // Claves que `users/service.py` escribe en el metadata de la actividad.
  const META_LABELS = {
    email: 'Correo', role: 'Rol', roles: 'Roles', role_slugs: 'Roles', permissions: 'Permisos', label: 'Nombre',
  };
  // El backend responde con códigos (`users/router.py`, `users/service.py`),
  // con `http-<status>` o con el texto en inglés del proveedor de
  // identidades: se traducen los conocidos y el resto queda en un mensaje
  // genérico, sin detalle técnico. Los validadores del cuerpo (correo,
  // requisitos de la contraseña) no llegan como código: el manejador de
  // errores de la app los convierte en un 422 sin el motivo.
  const ERROR_TEXT = [
    [/^role-in-use/, 'El rol está asignado a algún usuario: quítaselo antes de borrarlo.'],
    [/^role-is-system/, 'Los roles de sistema no se pueden borrar.'],
    [/^role-not-found/, 'El rol ya no existe. Recarga la página.'],
    [/^unknown-permissions/, 'Algún permiso ya no existe. Recarga la página.'],
    [/^directory-unsupported/, 'El proveedor de identidades no permite esta operación.'],
    [/already (been )?registered|already exists/i, 'Ya hay una cuenta con ese correo.'],
    [/^http-401$/, 'Tu sesión ha caducado. Recarga la página para volver a entrar.'],
    [/^http-403$/, 'No tienes permiso para hacer esto.'],
    [/^http-422$/, 'Revisa los datos: el correo no es válido o la contraseña no cumple los requisitos.'],
  ];
  const PATTERN_TEXT = {
    slug: 'Usa minúsculas, números, guion o guion bajo, empezando por una letra.',
    password: 'Usa al menos 8 caracteres, con una mayúscula y un número.',
  };
  const DATE_FMT = new Intl.DateTimeFormat('es', { dateStyle: 'medium', timeStyle: 'short' });

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

  // ---------- 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: [...]}]
  let USER_EMAILS = {};  // user_id -> email, para leer el registro de actividad

  // ---------- Util ----------
  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, c => ({
      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
    }[c]));
  }
  const count = (n, one, many) => `<strong>${n}</strong> ${n === 1 ? one : many}`;
  const roleOf = (slug) => ROLES.find(r => r.slug === slug);
  // `users.manage` es el permiso de administración del paquete: marca los
  // roles que dan control sobre las cuentas.
  const isAdminRole = (role) => !!role && (role.permissions || []).includes('users.manage');
  const pill = (label, tone, svg) =>
    `<span class="dg-status dg-tone-${tone}">${svg || ''}${escapeHtml(label)}</span>`;
  const stateRow = (cols, html, attrs = '') =>
    `<tr class="dg-users-state-row"${attrs}><td colspan="${cols}">${html}</td></tr>`;

  function emptyState(tile, title, descHtml, ctaHtml) {
    return `<div class="dg-empty dg-empty-compact">${tile}` +
      `<p class="dg-empty-title">${escapeHtml(title)}</p>` +
      (descHtml ? `<p class="dg-empty-desc">${descHtml}</p>` : '') + (ctaHtml || '') + '</div>';
  }

  function errorState(title, retry) {
    return emptyState(TILE.error, title, 'Inténtalo de nuevo en unos segundos.',
      `<button type="button" class="btn-secondary dg-empty-cta" data-dg-retry="${retry}">${IC.refresh}<span>Reintentar</span></button>`);
  }

  // «No se pudo X» + el motivo, si el código del backend es uno conocido.
  function failure(text, err) {
    const code = (err && err.message) || '';
    const known = ERROR_TEXT.find(([pattern]) => pattern.test(code));
    return known ? `${text}. ${known[1]}` : `${text}. Inténtalo de nuevo en unos segundos.`;
  }

  // Mismo algoritmo que el macro initials() (core/components/initials.html),
  // que usan la lateral y Mi cuenta: si cambia allí, cambia aquí.
  function initials(email) {
    const parts = (String(email).split('@')[0] || '').replace(/[_-]/g, '.').split('.').filter(Boolean);
    if (!parts.length) return '?';
    return (parts[0][0] + (parts.length > 1 ? parts[1][0] : (parts[0][1] || ''))).toUpperCase();
  }

  // Los errores no se retiran solos: hay que poder leerlos con calma.
  function notify(message, tone) {
    const shown = window.dgToast && window.dgToast(message, tone, { dismissAfter: tone === 'danger' ? 0 : 5000 });
    if (!shown) window.alert(message);
  }

  const confirmAction = (message, opts) => (window.dgConfirm
    ? window.dgConfirm(message, opts)
    : Promise.resolve(window.confirm(message)));

  function setBusy(table, busy) {
    table.setAttribute('aria-busy', String(busy));
  }

  // Reescribir un tbody borra el control que tenía el foco (kebab, «Editar
  // permisos», «Reintentar») y el foco caería en <body>. Se lleva al mismo
  // botón de la fila que ocupa ahora su sitio o, sin filas, a `fallback`.
  const visibleRows = (body) => $$('tr', body).filter(tr => !tr.hidden);

  function keepFocus(body, fallback, render) {
    const active = document.activeElement;
    const row = active && body.contains(active) ? active.closest('tr') : null;
    const at = row ? visibleRows(body).indexOf(row) : -1;
    const nth = row ? $$('button', row).indexOf(active) : -1;
    render();
    if (!row) return;
    const rows = visibleRows(body);
    const next = rows[Math.min(Math.max(at, 0), rows.length - 1)];
    const buttons = next ? $$('button', next) : [];
    const target = buttons[Math.min(Math.max(nth, 0), buttons.length - 1)] || fallback;
    if (target) target.focus();
  }

  // ---------- Diálogos ----------
  function openDialog(id) {
    const dlg = document.getElementById(id);
    if (!dlg) return;
    closeMenu(false);
    const err = dlg.querySelector('[data-dg-form-error]');
    if (err) err.hidden = true;
    if (!dlg.open) dlg.showModal();
    const first = dlg.querySelector('input:not([type="hidden"])');
    if (first) first.focus();
  }

  function closeDialog(dlg) {
    if (dlg && dlg.open) dlg.close();
  }

  function showFormError(form, err) {
    const message = err ? failure('No se pudo completar la acción', err) : '';
    const box = form.querySelector('[data-dg-form-error]');
    if (!box) { if (message) notify(message, 'danger'); return; }
    box.hidden = !message;
    box.querySelector('span').textContent = message;
    // El aviso va al final del cuerpo, que tiene scroll propio: con muchas
    // opciones quedaría bajo el pliegue y el envío parecería no hacer nada.
    if (message) box.scrollIntoView({ block: 'nearest' });
  }

  // ---------- Pickers ----------
  function renderRoleOptions(dialogId, selected) {
    const box = $(`#${dialogId} [data-dg-role-options]`);
    if (!box) return;
    if (!ROLES.length) {
      box.innerHTML = '<p class="form-hint">No hay roles disponibles.</p>';
      return;
    }
    box.innerHTML = ROLES.map(role => {
      const n = (role.permissions || []).length;
      return `<label class="dg-users-opt">
        <input type="checkbox" name="role_slugs" value="${escapeHtml(role.slug)}"${selected.has(role.slug) ? ' checked' : ''}>
        <span class="dg-users-opt-text">
          <span class="dg-users-opt-title">${escapeHtml(role.label || role.slug)}</span>
          <span class="dg-users-opt-sub">${n === 1 ? '1 permiso' : n + ' permisos'}</span>
        </span>${isAdminRole(role) ? IC.shieldOpt : ''}
      </label>`;
    }).join('');
  }

  function renderPermissionOptions(dialogId, selected) {
    const box = $(`#${dialogId} [data-dg-permission-options]`);
    if (!box) return;
    box.innerHTML = Object.entries(CATALOG).map(([key, label]) => `<label class="dg-users-opt">
        <input type="checkbox" name="permissions" value="${escapeHtml(key)}"${selected.has(key) ? ' checked' : ''}>
        <span class="dg-users-opt-text">
          <span class="dg-users-opt-title">${escapeHtml(label)}</span>
          <code class="dg-users-opt-sub">${escapeHtml(key)}</code>
        </span>
      </label>`).join('') || '<p class="form-hint">No hay permisos en el catálogo.</p>';
  }

  // ---------- Users ----------
  function rolePills(slugs) {
    if (!slugs.length) return pill('Sin rol', 'warning', IC.noRole);
    return slugs.map(slug => {
      const role = roleOf(slug);
      const label = (role && role.label) || slug;
      return isAdminRole(role) ? pill(label, 'brand', IC.shield) : pill(label, 'neutral');
    }).join('');
  }

  function userRow(u) {
    const email = u.email || '';
    const slugs = u.role_slugs || [];
    const labels = slugs.map(s => (roleOf(s) || {}).label || s).join(' ');
    const pills = rolePills(slugs);
    const search = `${email} ${labels} ${slugs.join(' ')}`.toLowerCase();
    return `<tr class="dg-list-row-item dg-users-row" data-dg-user-row data-dg-search="${escapeHtml(search)}">
      <td><div class="dg-users-who">
        <span class="dg-icon-tile dg-icon-tile-sm dg-tone-brand dg-users-avatar" aria-hidden="true">${escapeHtml(initials(email))}</span>
        <span class="dg-users-id">
          <span class="dg-users-email" title="${escapeHtml(email)}">${email ? escapeHtml(email) : 'Sin correo'}</span>
          <span class="dg-users-inline">${pills}</span>
        </span>
      </div></td>
      <td class="dg-users-col-roles"><div class="dg-users-pills">${pills}</div></td>
      <td class="dg-users-col-act">
        <button type="button" class="btn-icon dg-users-kebab" aria-label="Acciones de ${escapeHtml(email || 'usuario')}"
                aria-haspopup="menu" aria-expanded="false" aria-controls="dg-row-menu" data-dg-row-menu-trigger
                data-dg-user-id="${escapeHtml(u.id)}" data-dg-email="${escapeHtml(email)}"
                data-dg-roles="${escapeHtml(slugs.join(','))}">${IC.more}</button>
      </td>
    </tr>`;
  }

  function renderUsers(users) {
    USER_EMAILS = Object.fromEntries(users.map(u => [u.id, u.email || '']));
    const noMatch = stateRow(3, emptyState(TILE.noMatch, 'Ningún usuario coincide con la búsqueda',
      'Prueba con otra parte del correo o con el nombre de un rol.'), ' data-dg-users-nomatch hidden');
    const empty = stateRow(3, emptyState(TILE.users, 'Todavía no hay usuarios',
      'Invita a la primera persona del equipo: recibirá un correo para activar su cuenta.',
      `<button type="button" class="btn-primary dg-empty-cta" data-dg-open="dg-invite">${IC.userPlus}<span>Invitar usuario</span></button>`));
    $('#dg-users-body').innerHTML = users.length ? users.map(userRow).join('') + noMatch : empty;
    applySearch();
  }

  let usersSummary = '';

  function setUsersMeta(users, total) {
    const meta = $('.dg-page-header .dg-meta');
    const more = $('[data-dg-users-more]');
    if (meta) meta.hidden = !users;
    if (!users) { more.hidden = true; return; }
    const n = typeof total === 'number' ? total : users.length;
    const partial = n > users.length;
    const noRole = users.filter(u => !(u.role_slugs || []).length).length;
    $('[data-dg-users-total]').innerHTML = count(n, 'usuario', 'usuarios');
    // El recuento sin rol sale de la página cargada, no del total.
    $('[data-dg-users-norole]').innerHTML = noRole
      ? count(noRole, 'sin rol', 'sin rol') + (partial ? ` en los primeros ${users.length}` : '')
      : '';
    more.hidden = !partial;
    more.textContent = `Se muestran los primeros ${users.length} de ${n} usuarios.`;
    usersSummary = `${n} ${n === 1 ? 'usuario' : 'usuarios'}`;
    $('[data-dg-users-status]').textContent = usersSummary;
  }

  async function loadUsers() {
    const table = $('#dg-users-table');
    const body = $('#dg-users-body');
    setBusy(table, true);
    try {
      const data = await api('GET', '/data?limit=50');
      keepFocus(body, searchInput, () => renderUsers(data.users || []));
      setUsersMeta(data.users || [], data.total);
    } catch (e) {
      keepFocus(body, searchInput, () => {
        body.innerHTML = stateRow(3, errorState('No se pudieron cargar los usuarios', 'users'));
      });
      setUsersMeta(null);
    } finally {
      setBusy(table, false);
    }
  }

  // ---------- Búsqueda ----------
  const searchInput = $('[data-dg-users-search]');
  let announceTimer = 0;

  function applySearch() {
    const q = (searchInput.value || '').trim().toLowerCase();
    let shown = 0;
    $$('[data-dg-user-row]').forEach(tr => {
      tr.hidden = !!q && !tr.dataset.dgSearch.includes(q);
      if (!tr.hidden) shown += 1;
    });
    const none = $('[data-dg-users-nomatch]');
    if (none) none.hidden = !(q && shown === 0);
  }

  // El lector de pantalla no ve el filtrado: se anuncia el resultado cuando
  // se deja de teclear, no con cada tecla.
  function announceSearch() {
    const rows = $$('[data-dg-user-row]');
    if (!rows.length) return;
    const shown = rows.filter(tr => !tr.hidden).length;
    let text = usersSummary;
    if ((searchInput.value || '').trim()) {
      text = shown === 0 ? 'Ningún usuario coincide con la búsqueda'
        : `${shown} ${shown === 1 ? 'usuario coincide' : 'usuarios coinciden'}`;
    }
    $('[data-dg-users-status]').textContent = text;
  }

  searchInput.addEventListener('input', () => {
    applySearch();
    clearTimeout(announceTimer);
    announceTimer = setTimeout(announceSearch, 400);
  });

  // "/" lleva al buscador cuando no se está escribiendo en otro campo.
  document.addEventListener('keydown', (ev) => {
    if (ev.key !== '/' || ev.ctrlKey || ev.metaKey || ev.altKey) return;
    const active = document.activeElement;
    if (active && (/INPUT|TEXTAREA|SELECT/.test(active.tagName) || active.isContentEditable)) return;
    if ($('[data-dg-pane="users"]').hidden || document.querySelector('dialog[open]')) return;
    ev.preventDefault();
    searchInput.focus();
  });

  // ---------- Menú de fila ----------
  const menu = $('#dg-row-menu');
  let menuTrigger = null;
  let menuUser = null;

  function placeMenu(trigger) {
    const r = trigger.getBoundingClientRect();
    const w = menu.offsetWidth;
    const h = menu.offsetHeight;
    const left = Math.max(8, Math.min(r.right - w, window.innerWidth - w - 8));
    const below = r.bottom + 4;
    const top = below + h > window.innerHeight - 8 ? Math.max(8, r.top - h - 4) : below;
    menu.style.left = `${left}px`;
    menu.style.top = `${top}px`;
  }

  function openMenu(trigger) {
    closeMenu(false);
    menuTrigger = trigger;
    menuUser = {
      id: trigger.dataset.dgUserId,
      email: trigger.dataset.dgEmail || '',
      roles: (trigger.dataset.dgRoles || '').split(',').filter(Boolean),
    };
    trigger.setAttribute('aria-expanded', 'true');
    menu.hidden = false;
    placeMenu(trigger);
    const first = menu.querySelector('.dg-menu-item');
    if (first) first.focus();
  }

  function closeMenu(restoreFocus) {
    if (menu.hidden) return;
    menu.hidden = true;
    if (menuTrigger) {
      menuTrigger.setAttribute('aria-expanded', 'false');
      if (restoreFocus) menuTrigger.focus();
    }
    menuTrigger = null;
  }

  menu.addEventListener('keydown', (ev) => {
    const items = $$('.dg-menu-item', menu);
    const i = items.indexOf(document.activeElement);
    const moves = { ArrowDown: i + 1, ArrowUp: i - 1, Home: 0, End: items.length - 1 };
    if (ev.key in moves) {
      ev.preventDefault();
      items[(moves[ev.key] + items.length) % items.length].focus();
    } else if (ev.key === 'Escape') {
      ev.preventDefault();
      ev.stopPropagation();
      closeMenu(true);
    } else if (ev.key === 'Tab') {
      // Sin preventDefault: el foco vuelve al botón de la fila y el Tab nativo
      // sigue desde él, no desde el menú, que está al final del panel.
      closeMenu(true);
    }
  });

  menu.addEventListener('click', (ev) => {
    const item = ev.target.closest('[data-dg-menu-action]');
    if (!item || !menuUser) return;
    const user = menuUser;
    // El foco vuelve al botón de la fila: el diálogo que se abra a
    // continuación lo recupera al cerrarse.
    closeMenu(true);
    ROW_ACTIONS[item.dataset.dgMenuAction](user);
  });

  document.addEventListener('click', (ev) => {
    if (menu.hidden || menu.contains(ev.target) || ev.target.closest('[data-dg-row-menu-trigger]')) return;
    closeMenu(false);
  });
  window.addEventListener('resize', () => closeMenu(false));
  document.addEventListener('scroll', () => closeMenu(false), true);

  const ROW_ACTIONS = {
    edit(u) {
      $('[data-dg-edit-email]').textContent = u.email;
      $('[data-dg-edit-userid]').value = u.id;
      renderRoleOptions('dg-edit-roles', new Set(u.roles));
      openDialog('dg-edit-roles');
    },
    async effective(u) {
      try {
        const data = await api('GET', `/${u.id}/effective-permissions`);
        const perms = data.permissions || [];
        $('#dg-effective-list').innerHTML = perms.map(p => `<li class="dg-users-perm">${IC.check}` +
          `<span class="dg-users-perm-label">${escapeHtml(p.label)}</span>` +
          `<code class="dg-users-chip">${escapeHtml(p.key)}</code></li>`).join('') ||
          '<li class="dg-users-perm dg-users-muted">Sin permisos: ninguno de sus roles concede permisos.</li>';
        $('[data-dg-effective-email]').textContent = u.email;
        openDialog('dg-effective');
      } catch (e) {
        notify(failure('No se pudieron cargar los permisos', e), 'danger');
      }
    },
    async reset(u) {
      const ok = await confirmAction(`¿Enviar a ${u.email} un correo para recuperar la contraseña?`,
        { danger: false, confirmLabel: 'Enviar correo', detail: 'Recibirá un enlace para elegir una contraseña nueva.' });
      if (!ok) return;
      const fd = new FormData(); fd.append('email', u.email);
      const failed = 'No se pudo enviar el correo. Inténtalo de nuevo en unos segundos.';
      try {
        const r = await fetch(`${BASE}/${u.id}/password/reset`, { method: 'POST', body: fd });
        notify(r.ok ? 'Correo enviado.' : failed, r.ok ? 'success' : 'danger');
      } catch (_) {
        notify(failed, 'danger');
      }
    },
    'set-pwd'(u) {
      $('[data-dg-set-pwd-target]').textContent = u.email;
      $('[data-dg-set-pwd-userid]').value = u.id;
      $('[data-dg-form="set-pwd"] input[name="password"]').value = '';
      openDialog('dg-set-pwd');
    },
    async delete(u) {
      const ok = await confirmAction(`¿Borrar a ${u.email || 'este usuario'}?`,
        { confirmLabel: 'Borrar usuario', detail: 'Perderá el acceso al momento. Esta acción no se puede deshacer.' });
      if (!ok) return;
      try {
        await api('DELETE', `/${u.id}`);
        notify('Usuario borrado.', 'success');
        loadUsers();
      } catch (e) {
        notify(failure('No se pudo borrar el usuario', e), 'danger');
      }
    },
  };

  // ---------- Roles ----------
  async function fetchRoles() {
    ROLES = await api('GET', '/roles');
  }

  function roleRow(r) {
    const perms = r.permissions || [];
    const label = r.label || r.slug;
    const chips = perms.map(p =>
      `<code class="dg-users-chip" title="${escapeHtml(CATALOG[p] || p)}">${escapeHtml(p)}</code>`
    ).join('') || '<span class="dg-users-muted">Sin permisos</span>';
    const del = r.is_system
      ? '<span class="dg-users-action-spacer" aria-hidden="true"></span>'
      : `<button type="button" class="btn-icon btn-icon-destructive" data-dg-delete-role="${escapeHtml(r.slug)}"
                 aria-label="Borrar el rol ${escapeHtml(label)}" title="Borrar rol">${IC.trash}</button>`;
    return `<tr class="dg-list-row-item dg-users-row">
      <td><div class="dg-users-who">${isAdminRole(r) ? TILE.roleAdmin : TILE.role}
        <span class="dg-users-id">
          <span class="dg-users-name"><span>${escapeHtml(label)}</span>${r.is_system ? pill('Sistema', 'neutral', IC.lock) : ''}</span>
          <span class="dg-users-sub"><code class="dg-users-mono">${escapeHtml(r.slug)}</code><span class="dg-users-inline-text"> · ${perms.length === 1 ? '1 permiso' : perms.length + ' permisos'}</span></span>
        </span>
      </div></td>
      <td class="dg-users-col-perms"><div class="dg-users-chips">${chips}</div></td>
      <td class="dg-users-col-act"><div class="dg-users-actions">
        <button type="button" class="dg-row-action" data-dg-edit-role="${escapeHtml(r.slug)}"
                aria-label="Editar permisos de ${escapeHtml(label)}">${IC.pencil}<span class="dg-users-action-label">Editar permisos</span></button>
        ${del}
      </div></td>
    </tr>`;
  }

  async function loadRoles() {
    const table = $('#dg-roles-table');
    const body = $('#dg-roles-body');
    const fallback = $('[data-dg-open="dg-create-role"]');
    setBusy(table, true);
    try {
      await fetchRoles();
      keepFocus(body, fallback, () => {
        body.innerHTML = ROLES.map(roleRow).join('') ||
          stateRow(3, emptyState(TILE.roles, 'Todavía no hay roles', 'Crea un rol para agrupar permisos y asignarlos a los usuarios.'));
      });
    } catch (e) {
      keepFocus(body, fallback, () => { body.innerHTML = stateRow(3, errorState('No se pudieron cargar los roles', 'roles')); });
    } finally {
      setBusy(table, false);
    }
  }

  function editRole(slug) {
    const role = roleOf(slug);
    if (!role) return;
    $('[data-dg-edit-role-slug]').textContent = role.slug;
    $('[data-dg-edit-role-label]').textContent = role.label ? ' — ' + role.label : '';
    $('[data-dg-edit-role-slug-input]').value = role.slug;
    renderPermissionOptions('dg-edit-role-perms', new Set(role.permissions || []));
    openDialog('dg-edit-role-perms');
  }

  async function deleteRole(slug) {
    const role = roleOf(slug);
    const ok = await confirmAction(`¿Borrar el rol ${(role && role.label) || slug}?`,
      { confirmLabel: 'Borrar rol', detail: 'Solo se puede borrar si ningún usuario lo tiene asignado.' });
    if (!ok) return;
    try {
      await api('DELETE', `/roles/${slug}`);
      notify('Rol borrado.', 'success');
      loadRoles();
    } catch (e) {
      notify(failure('No se pudo borrar el rol', e), 'danger');
    }
  }

  // ---------- Audit ----------
  function fmtDate(iso) {
    const d = new Date(iso);
    return Number.isNaN(d.getTime()) ? (iso || '—') : DATE_FMT.format(d);
  }

  function who(id) {
    if (!id) return '<span class="dg-users-muted">Sistema</span>';
    const email = USER_EMAILS[id];
    if (email) {
      // Usuario y dominio van en piezas sin corte: si no cabe, el email parte
      // tras la arroba y no por un guion del dominio.
      const at = email.lastIndexOf('@') + 1;
      const parts = at > 0 ? [email.slice(0, at), email.slice(at)] : [email];
      return `<span class="dg-users-email" title="${escapeHtml(id)}">` +
        parts.map(part => `<span>${escapeHtml(part)}</span>`).join('<wbr>') + '</span>';
    }
    const short = String(id).length > 8 ? `${String(id).slice(0, 8)}…` : String(id);
    return `<code class="dg-users-mono dg-users-muted" title="${escapeHtml(id)}">${escapeHtml(short)}</code>`;
  }

  function fmtValue(v) {
    if (v === null || v === undefined || v === '') return '—';
    if (Array.isArray(v)) return v.map(fmtValue).join(', ') || '—';
    if (typeof v === 'boolean') return v ? 'Sí' : 'No';
    return typeof v === 'object' ? JSON.stringify(v) : String(v);
  }

  function fmtMeta(entries) {
    if (!entries.length) return '<span class="dg-users-muted">—</span>';
    return entries.map(([k, v]) =>
      `<span class="dg-users-kv"><span class="dg-users-muted">${escapeHtml(META_LABELS[k] || k)}:</span> ${escapeHtml(fmtValue(v))}</span>`
    ).join('');
  }

  // `data-label` titula cada celda cuando, en anchos estrechos, las filas se
  // apilan y la cabecera deja de verse.
  function auditRow(e) {
    const [label, tone, iconName] = AUDIT[e.action] || [e.action, 'neutral', 'activity'];
    const meta = Object.entries(e.metadata || {});
    return `<tr class="dg-list-row-item dg-users-row" role="row">
      <td class="dg-users-nowrap" role="cell"><time datetime="${escapeHtml(e.created_at || '')}">${escapeHtml(fmtDate(e.created_at))}</time></td>
      <td role="cell"><span title="${escapeHtml(e.action)}">${pill(label, tone, AUDIT_ICON[iconName])}</span></td>
      <td role="cell" data-label="Hecho por">${who(e.actor_id)}</td>
      <td role="cell" data-label="Usuario afectado">${who(e.target_user_id)}</td>
      <td class="dg-users-meta" role="cell"${meta.length ? '' : ' data-empty'}>${fmtMeta(meta)}</td>
    </tr>`;
  }

  async function loadAudit() {
    const table = $('#dg-audit-table');
    const body = $('#dg-audit-body');
    const fallback = $('#dg-tab-audit');
    setBusy(table, true);
    try {
      const data = await api('GET', '/audit?limit=50');
      keepFocus(body, fallback, () => {
        body.innerHTML = (data.entries || []).map(auditRow).join('') ||
          stateRow(5, emptyState(TILE.audit, 'Sin actividad todavía',
            'Aquí aparecerán las invitaciones, los cambios de rol y de contraseña, y los borrados.'));
      });
    } catch (e) {
      keepFocus(body, fallback, () => { body.innerHTML = stateRow(5, errorState('No se pudo cargar la actividad', 'audit')); });
    } finally {
      setBusy(table, false);
    }
  }

  // ---------- Tabs ----------
  const tabs = $$('[data-dg-tab]');

  function selectTab(btn) {
    const target = btn.dataset.dgTab;
    tabs.forEach(b => {
      b.setAttribute('aria-selected', String(b === btn));
      b.tabIndex = b === btn ? 0 : -1;
    });
    $$('[data-dg-pane]').forEach(p => { p.hidden = p.dataset.dgPane !== target; });
    closeMenu(false);
    if (target === 'roles') loadRoles();
    if (target === 'audit') loadAudit();
  }

  tabs.forEach(btn => btn.addEventListener('click', () => selectTab(btn)));
  $('[data-dg-tabs]').addEventListener('keydown', (ev) => {
    const i = tabs.indexOf(document.activeElement);
    const next = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 }[ev.key];
    if (i < 0 || next === undefined) return;
    ev.preventDefault();
    const btn = tabs[(next + tabs.length) % tabs.length];
    selectTab(btn);
    btn.focus();
  });

  // ---------- Forms ----------
  const SUBMIT = {
    async invite(fd, form) {
      await api('POST', '/invite', { email: fd.get('email'), role_slugs: fd.getAll('role_slugs') });
      form.reset(); loadUsers();
      return `Invitación enviada a ${fd.get('email')}.`;
    },
    async create(fd, form) {
      await api('POST', '/create', {
        email: fd.get('email'), password: fd.get('password'), role_slugs: fd.getAll('role_slugs'),
      });
      form.reset(); loadUsers();
      return `Usuario ${fd.get('email')} creado.`;
    },
    async 'edit-roles'(fd) {
      await api('PATCH', `/${fd.get('user_id')}/roles`, { role_slugs: fd.getAll('role_slugs') });
      loadUsers();
      return 'Roles actualizados.';
    },
    async 'create-role'(fd, form) {
      await api('POST', '/roles', {
        slug: fd.get('slug'),
        label: fd.get('label'),
        permissions: fd.getAll('permissions'),
      });
      form.reset(); loadRoles();
      return 'Rol creado.';
    },
    async 'edit-role-perms'(fd) {
      await api('PATCH', `/roles/${fd.get('slug')}/permissions`, { permissions: fd.getAll('permissions') });
      loadRoles();
      return 'Permisos del rol actualizados.';
    },
    async 'set-pwd'(fd, form) {
      await api('POST', `/${fd.get('user_id')}/password/set`, { password: fd.get('password') });
      form.reset();
      return 'Contraseña actualizada. Comunícala por un canal seguro.';
    },
  };

  // El mensaje del navegador para `pattern` («Utiliza un formato que
  // coincida…») no dice qué falta. form-validate.js lee validationMessage
  // tras checkValidity(), que dispara `invalid`: ahí se pone el propio.
  $$('input[pattern]').forEach(input => {
    const text = PATTERN_TEXT[input.name];
    if (!text) return;
    input.addEventListener('invalid', () => {
      if (input.validity.patternMismatch) input.setCustomValidity(text);
    });
    input.addEventListener('input', () => input.setCustomValidity(''));
    input.form.addEventListener('reset', () => input.setCustomValidity(''));
  });

  // Cancelar un alta no debe dejar sus datos para la siguiente: al reabrir
  // se verían el correo y la contraseña. El reset devuelve además el campo a
  // tipo contraseña (reveal.js) y retira los errores (form-validate.js).
  // `close` no burbujea: se escucha en captura.
  root.addEventListener('close', (ev) => {
    const form = ev.target.querySelector && ev.target.querySelector('[data-dg-form]');
    if (form) form.reset();
  }, true);

  root.addEventListener('submit', async (ev) => {
    const form = ev.target.closest('[data-dg-form]');
    if (!form) return;
    ev.preventDefault();
    const handler = SUBMIT[form.dataset.dgForm];
    // Un envío en vuelo descarta los siguientes: evita invitaciones o
    // altas duplicadas por doble clic.
    if (!handler || form.dataset.dgBusy) return;
    form.dataset.dgBusy = '1';
    const submitBtn = form.querySelector('[type="submit"]');
    if (submitBtn) submitBtn.disabled = true;
    showFormError(form, null);
    try {
      const message = await handler(new FormData(form), form);
      closeDialog(form.closest('dialog'));
      notify(message, 'success');
    } catch (e) {
      showFormError(form, e);
    } finally {
      delete form.dataset.dgBusy;
      if (submitBtn) submitBtn.disabled = false;
    }
  });

  // ---------- Clics ----------
  const OPENERS = {
    'dg-invite': () => renderRoleOptions('dg-invite', new Set()),
    'dg-create': () => renderRoleOptions('dg-create', new Set()),
    'dg-create-role': () => renderPermissionOptions('dg-create-role', new Set()),
  };
  const RETRY = { users: loadUsers, roles: loadRoles, audit: loadAudit };

  root.addEventListener('click', (ev) => {
    const el = ev.target.closest('[data-dg-open], [data-dg-close], [data-dg-row-menu-trigger], ' +
      '[data-dg-edit-role], [data-dg-delete-role], [data-dg-retry]');
    if (!el) return;
    if (el.dataset.dgOpen) {
      (OPENERS[el.dataset.dgOpen] || (() => {}))();
      openDialog(el.dataset.dgOpen);
    } else if (el.hasAttribute('data-dg-close')) {
      closeDialog(el.closest('dialog'));
    } else if (el.hasAttribute('data-dg-row-menu-trigger')) {
      if (el.getAttribute('aria-expanded') === 'true') closeMenu(true);
      else openMenu(el);
    } else if (el.dataset.dgEditRole) {
      editRole(el.dataset.dgEditRole);
    } else if (el.dataset.dgDeleteRole) {
      deleteRole(el.dataset.dgDeleteRole);
    } else if (el.dataset.dgRetry && RETRY[el.dataset.dgRetry]) {
      RETRY[el.dataset.dgRetry]();
    }
  });

  // ---------- Init ----------
  (async function init() {
    try { await fetchRoles(); } catch (_) { ROLES = []; }
    loadUsers();
  })();
})();
</script>