{% extends 'base.html.twig' %}

{% block title %}{{ usuario ? 'Editar Usuario' : 'Nuevo Usuario' }}{% endblock %}
{% block page_title %}{{ usuario ? 'Editar Usuario' : 'Nuevo Usuario' }}{% endblock %}

{% block body %}
  {% set userPhoto = usuario and usuario.foto ? '/' ~ usuario.foto|trim('/') : null %}
  {% set scopeClient = permission_scope.cliente_nombre|default('Cliente actual') %}
  {% set scopeSite = permission_scope.sitio_nombre|default('Sitio actual') %}
  {% set currentSiteId = permission_scope.sitio_id|default(0) %}
  {% set selectedSiteIds = asignaciones_actuales|keys %}
  {% if not can_manage_site_assignments and selectedSiteIds|length == 0 and currentSiteId %}
    {% set selectedSiteIds = [currentSiteId] %}
  {% endif %}

  <div class="mx-auto w-full max-w-screen-2xl space-y-5">
    <header class="page-header">
      <div class="min-w-0">
        <p class="type-metadata uppercase text-primary-700">Administracion de usuarios</p>
        <h2 class="page-title">{{ usuario ? 'Editar usuario' : 'Nuevo usuario' }}</h2>
        <p class="page-subtitle">
          {{ usuario
            ? 'Actualiza la identidad, los sitios asignados y el acceso operativo.'
            : 'Crea la identidad y define su acceso inicial por sitio.' }}
        </p>
      </div>
      <div class="page-actions">
        <span class="inline-flex max-w-full items-center gap-2 rounded-full border border-primary-200 bg-primary-50 px-3 py-2 text-xs font-semibold text-primary-800">
          <i class="bi bi-building-check" aria-hidden="true"></i>
          <span class="truncate" title="{{ scopeClient }} / {{ scopeSite }}">{{ scopeClient }} / {{ scopeSite }}</span>
        </span>
        <a href="{{ path('usuario_index') }}" class="btn btn-outline-secondary">
          <i class="bi bi-arrow-left" aria-hidden="true"></i>
          Volver
        </a>
      </div>
    </header>

    <form
      method="post"
      enctype="multipart/form-data"
      id="user_form"
      class="grid min-w-0 gap-5 xl:grid-cols-[300px_minmax(0,1fr)]"
      data-initial-permissions="{{ accesos_json|default('{}')|e('html_attr') }}"
      data-initial-sites="{{ selectedSiteIds|json_encode|e('html_attr') }}"
      x-data="permissionsHandler($el.dataset.initialPermissions)"
      x-init="initializeSites($el.dataset.initialSites)"
    >
      <aside class="min-w-0 xl:sticky xl:top-24 xl:self-start">
        <section class="section-card">
          <div class="section-card-header">
            <p class="type-metadata uppercase text-primary-700">Perfil</p>
            <h3 class="section-card-title mt-1">Identidad del usuario</h3>
          </div>

          <div class="section-card-body space-y-5">
            <div class="flex items-center gap-4 rounded-lg bg-neutral-50 p-4">
              {% if userPhoto %}
                <img src="{{ userPhoto }}" alt="Foto de {{ usuario.nombre }}" class="h-16 w-16 flex-none rounded-lg object-cover shadow-card">
              {% else %}
                <div class="flex h-16 w-16 flex-none items-center justify-center rounded-lg bg-primary-600 text-xl font-semibold text-white shadow-card" aria-hidden="true">
                  {{ usuario ? usuario.nombre|slice(0, 2)|upper : 'NU' }}
                </div>
              {% endif %}
              <div class="min-w-0">
                <p class="truncate text-base font-semibold text-neutral-900">{{ usuario ? usuario.nombre : 'Nuevo usuario' }}</p>
                <p class="mt-1 truncate text-xs text-neutral-500">{{ usuario ? usuario.email : 'Completa los datos requeridos' }}</p>
              </div>
            </div>

            <div x-data="{ fileName: '' }">
              <label for="foto" class="form-label">Foto de perfil</label>
              <input
                type="file"
                id="foto"
                name="foto"
                accept="image/png,image/jpeg,image/webp,image/gif"
                class="peer sr-only"
                aria-describedby="foto_help"
                @change="fileName = $event.target.files.length ? $event.target.files[0].name : ''; markDirty()"
              >
              <label for="foto" class="btn btn-outline-secondary w-full cursor-pointer peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 peer-focus-visible:ring-offset-2">
                <i class="bi bi-image" aria-hidden="true"></i>
                <span x-text="fileName || '{{ userPhoto ? 'Cambiar imagen' : 'Seleccionar imagen' }}'"></span>
              </label>
              <p id="foto_help" class="mt-2 text-xs leading-5 text-neutral-500">JPG, PNG, WEBP o GIF. Maximo 3 MB.</p>
            </div>

            {% if userPhoto %}
              <label class="flex min-h-11 cursor-pointer items-center gap-3 rounded-lg border border-ui-border bg-neutral-50 px-4 py-3 text-sm text-neutral-700">
                <input type="checkbox" name="foto_eliminar" value="1" class="form-check-input" @change="markDirty()">
                Quitar foto actual
              </label>
            {% endif %}

            <div>
              <label for="nombre" class="form-label">Nombre completo *</label>
              <input
                type="text"
                id="nombre"
                name="nombre"
                value="{{ usuario ? usuario.nombre : '' }}"
                required
                autocomplete="name"
                class="form-control"
                placeholder="Ejemplo: Juan Perez"
                @input="markDirty()"
              >
            </div>

            <div>
              <label for="email" class="form-label">Correo electronico *</label>
              <input
                type="email"
                id="email"
                name="email"
                value="{{ usuario ? usuario.email : '' }}"
                required
                autocomplete="email"
                class="form-control"
                placeholder="usuario@empresa.com"
                aria-describedby="email_help"
                @input="markDirty()"
                {% if usuario %}readonly aria-readonly="true"{% endif %}
              >
              <p id="email_help" class="mt-2 text-xs leading-5 text-neutral-500">
                {{ usuario ? 'El correo identifica al usuario en todas sus empresas y no puede cambiarse aqui.' : 'Se usara para iniciar sesion.' }}
              </p>
            </div>

            <div x-data="{ showPassword: false }">
              <label for="password" class="form-label">Contrasena {{ usuario ? '' : '*' }}</label>
              <div class="relative">
                <input
                  :type="showPassword ? 'text' : 'password'"
                  id="password"
                  name="password"
                  {{ usuario ? '' : 'required' }}
                  autocomplete="new-password"
                  class="form-control pr-11"
                  placeholder="{{ usuario ? 'Sin cambios' : 'Escribe una contrasena' }}"
                  aria-describedby="password_help"
                  @input="markDirty()"
                >
                <button
                  type="button"
                  class="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-lg text-neutral-500 hover:text-neutral-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-500"
                  @click="showPassword = !showPassword"
                  :aria-label="showPassword ? 'Ocultar contrasena' : 'Mostrar contrasena'"
                  :aria-pressed="showPassword"
                >
                  <i class="bi" :class="showPassword ? 'bi-eye-slash' : 'bi-eye'" aria-hidden="true"></i>
                </button>
              </div>
              <p id="password_help" class="mt-2 text-xs leading-5 text-neutral-500">
                {{ usuario ? 'Dejala vacia para conservar la actual.' : 'Usa una contrasena segura y no la compartas.' }}
              </p>
            </div>

            <label class="flex min-h-11 items-start gap-3 rounded-lg border border-ui-border bg-white px-4 py-3 text-sm text-neutral-700 {{ can_modify_identity_status|default(false) ? 'cursor-pointer' : 'cursor-not-allowed opacity-70' }}">
              <input
                type="checkbox"
                id="activo"
                name="activo"
                value="1"
                {{ (usuario and usuario.activo) or not usuario ? 'checked' : '' }}
                class="form-check-input mt-0.5"
                @change="markDirty()"
                {% if not can_modify_identity_status|default(false) %}disabled aria-describedby="activo_help"{% endif %}
              >
              <span>
                <span class="block font-medium text-neutral-800">Usuario activo</span>
                {% if not can_modify_identity_status|default(false) %}
                  <span id="activo_help" class="mt-1 block text-xs text-neutral-500">Tu nivel de acceso no permite cambiar el estado global.</span>
                {% endif %}
              </span>
            </label>
          </div>
        </section>
      </aside>

      <div class="min-w-0 space-y-5">
        {% if can_manage_site_assignments %}
          <section class="section-card">
            <div class="section-card-header flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
              <div>
                <p class="type-metadata uppercase text-primary-700">Sitios y roles</p>
                <h3 class="section-card-title mt-1">Asignacion operativa</h3>
                <p class="section-card-subtitle">Selecciona donde puede trabajar y que rol tendra en cada sitio.</p>
              </div>
              <span class="inline-flex items-center rounded-full bg-neutral-100 px-3 py-1.5 text-xs font-semibold text-neutral-700">
                <span x-text="selectedSiteCount()"></span>&nbsp;sitio(s)
              </span>
            </div>

            <div class="section-card-body">
              {% if sitios|length > 0 %}
                <div class="grid gap-3 lg:grid-cols-2">
                  {% for sitio in sitios %}
                    {% set isChecked = asignaciones_actuales[sitio.id] is defined %}
                    {% set currentRole = isChecked ? asignaciones_actuales[sitio.id].rol_id : '' %}
                    {% set isCurrentSite = currentSiteId == sitio.id %}
                    <div
                      class="rounded-lg border p-4 transition-colors"
                      :class="siteSelections['{{ sitio.id }}'] ? 'border-primary-300 bg-primary-50/40' : 'border-ui-border bg-white hover:border-ui-border-hover'"
                    >
                      <div class="flex min-w-0 items-start gap-3">
                        <input
                          type="checkbox"
                          id="sitio_{{ sitio.id }}"
                          name="sitios[]"
                          value="{{ sitio.id }}"
                          x-model="siteSelections['{{ sitio.id }}']"
                          class="form-check-input mt-1"
                          @change="markDirty()"
                        >
                        <label for="sitio_{{ sitio.id }}" class="min-w-0 flex-1 cursor-pointer">
                          <span class="flex min-w-0 items-center gap-2">
                            <span class="truncate text-sm font-semibold text-neutral-900" title="{{ sitio.nombre }}">{{ sitio.nombre }}</span>
                            {% if isCurrentSite %}
                              <span class="rounded-full bg-primary-100 px-2 py-0.5 text-[11px] font-semibold text-primary-700">Actual</span>
                            {% endif %}
                          </span>
                          <span class="mt-1 block truncate text-xs text-neutral-500" title="{{ sitio.cliente.nombre }}">{{ sitio.cliente.nombre }}</span>
                        </label>
                      </div>

                      <div class="mt-4">
                        <label for="role_{{ sitio.id }}" class="form-label">Rol en {{ sitio.nombre }}</label>
                        {% set assignedRole = currentRole ? roles|filter(rol => rol.id == currentRole)|first : null %}
                        {% set assignedRoleIsAssignable = assignedRole and assignable_roles|filter(rol => rol.id == assignedRole.id)|length > 0 %}
                        <select
                          id="role_{{ sitio.id }}"
                          name="roles[{{ sitio.id }}]"
                          :required="Boolean(siteSelections['{{ sitio.id }}'])"
                          :disabled="!siteSelections['{{ sitio.id }}']"
                          class="form-control text-sm"
                          @change="markDirty()"
                        >
                          <option value="">Selecciona un rol...</option>
                          {% if assignedRole and not assignedRoleIsAssignable %}
                            <option value="{{ assignedRole.id }}" selected>{{ assignedRole.nombre }} (rol actual)</option>
                          {% endif %}
                          {% for rol in assignable_roles %}
                            <option value="{{ rol.id }}" {{ currentRole == rol.id ? 'selected' : '' }}>{{ rol.nombre }}</option>
                          {% endfor %}
                        </select>
                      </div>
                    </div>
                  {% endfor %}
                </div>
              {% else %}
                <div class="rounded-lg border border-dashed border-ui-border px-4 py-10 text-center">
                  <i class="bi bi-building-x text-2xl text-neutral-400" aria-hidden="true"></i>
                  <p class="mt-3 text-sm font-medium text-neutral-700">No hay sitios disponibles para asignar.</p>
                </div>
              {% endif %}
            </div>
          </section>
        {% else %}
          <section class="section-card">
            <div class="section-card-header">
              <p class="type-metadata uppercase text-primary-700">Rol</p>
              <h3 class="section-card-title mt-1">Asignacion en el sitio actual</h3>
              <p class="section-card-subtitle">Selecciona el rol operativo para {{ scopeSite }}.</p>
            </div>
            <div class="section-card-body">
              <label for="role_simple" class="form-label">Rol en {{ scopeSite }}</label>
              <select id="role_simple" name="role_simple" required class="form-control text-sm" @change="markDirty()">
                <option value="">Selecciona un rol...</option>
                {% set currentRoleIsAssignable = current_site_role and assignable_roles|filter(rol => rol.id == current_site_role.id)|length > 0 %}
                {% if current_site_role and not currentRoleIsAssignable %}
                  <option value="{{ current_site_role.id }}" selected>{{ current_site_role.nombre }} (rol actual)</option>
                {% endif %}
                {% for rol in assignable_roles %}
                  <option value="{{ rol.id }}" {{ current_site_role_id == rol.id ? 'selected' : '' }}>{{ rol.nombre }}</option>
                {% endfor %}
              </select>
            </div>
          </section>
        {% endif %}

        <section class="section-card min-w-0">
          <div class="section-card-header">
            <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
              <div>
                <p class="type-metadata uppercase text-primary-700">Seguridad</p>
                <h3 class="section-card-title mt-1">Permisos para {{ scopeSite }}</h3>
                <p class="section-card-subtitle">
                  Esta matriz corresponde a {{ scopeClient }} / {{ scopeSite }}. Las asignaciones nuevas reciben esta configuracion inicial.
                </p>
              </div>
              <span class="inline-flex items-center rounded-full bg-primary-50 px-3 py-1.5 text-xs font-semibold text-primary-700">
                <span x-text="activeModuleCount()"></span>&nbsp;modulo(s) activos
              </span>
            </div>
          </div>

          <input type="hidden" name="accesos" value="{{ accesos_json|default('{}')|e('html_attr') }}" :value="JSON.stringify(permissions)">

          <div class="space-y-5 px-4 py-5 sm:px-5">
            <div class="grid gap-3 lg:grid-cols-[minmax(220px,1fr)_auto] lg:items-end">
              <div>
                <label for="permission_search" class="form-label">Buscar modulo</label>
                <div class="relative">
                  <i class="bi bi-search pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400" aria-hidden="true"></i>
                  <input
                    id="permission_search"
                    type="search"
                    class="form-control pl-10 pr-10"
                    placeholder="Ej. Documentos, pagos, impuestos..."
                    x-model="permissionQuery"
                    @input="$nextTick(() => openMatchingGroups())"
                  >
                  <button
                    type="button"
                    class="absolute inset-y-0 right-0 flex w-10 items-center justify-center text-neutral-400 hover:text-neutral-700"
                    x-show="permissionQuery"
                    x-cloak
                    @click="permissionQuery = ''"
                    aria-label="Limpiar busqueda"
                  >
                    <i class="bi bi-x-lg" aria-hidden="true"></i>
                  </button>
                </div>
              </div>

              <div>
                <p class="form-label">Plantilla rapida</p>
                <div class="flex flex-wrap gap-2" role="group" aria-label="Plantillas de permisos">
                  <button type="button" class="btn btn-sm btn-outline-secondary" @click="setAllLevel('none')">Sin acceso</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary" @click="setAllLevel('read')">Solo lectura</button>
                  <button type="button" class="btn btn-sm btn-primary" @click="setAllLevel('write')">Operador</button>
                </div>
              </div>
            </div>

            <section class="overflow-hidden rounded-lg border border-amber-200 bg-amber-50/60">
              <div class="border-b border-amber-200 px-4 py-3">
                <div class="flex items-start gap-3">
                  <i class="bi bi-shield-lock mt-0.5 text-amber-700" aria-hidden="true"></i>
                  <div>
                    <h4 class="text-sm font-semibold text-amber-950">Herramientas avanzadas</h4>
                    <p class="mt-1 text-xs leading-5 text-amber-800">Se asignan individualmente y no se activan con las plantillas rapidas.</p>
                  </div>
                </div>
              </div>
              <div class="grid gap-px bg-amber-200 lg:grid-cols-2">
                <template x-for="capability in specialCapabilities" :key="capability.module + ':' + capability.action">
                  <button
                    type="button"
                    role="switch"
                    class="flex min-h-[88px] w-full items-center gap-4 bg-amber-50 px-4 py-4 text-left transition-colors hover:bg-amber-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary-500"
                    :aria-checked="hasPermission(capability.module, capability.action)"
                    :aria-label="capability.label"
                    @click="toggleSpecialCapability(capability)"
                  >
                    <span class="flex h-10 w-10 flex-none items-center justify-center rounded-lg bg-white text-amber-700 shadow-soft">
                      <i class="bi" :class="capability.icon" aria-hidden="true"></i>
                    </span>
                    <span class="min-w-0 flex-1">
                      <span class="block text-[11px] font-semibold uppercase text-amber-700" x-text="capability.category"></span>
                      <span class="block text-sm font-semibold text-neutral-900" x-text="capability.label"></span>
                      <span class="mt-1 block text-xs leading-5 text-neutral-600" x-text="capability.description"></span>
                      <span
                        class="mt-1 block text-[11px] font-semibold"
                        :class="hasPermission(capability.module, capability.action) ? 'text-primary-700' : 'text-neutral-500'"
                        x-text="hasPermission(capability.module, capability.action) ? 'Permitido' : 'No permitido'"
                      ></span>
                    </span>
                    <span
                      class="relative inline-flex h-6 w-11 flex-none rounded-full border transition-colors"
                      :class="hasPermission(capability.module, capability.action) ? 'border-primary-600 bg-primary-600' : 'border-neutral-300 bg-neutral-200'"
                      aria-hidden="true"
                    >
                      <span
                        class="absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform"
                        :class="hasPermission(capability.module, capability.action) ? 'translate-x-5' : 'translate-x-0.5'"
                      ></span>
                    </span>
                  </button>
                </template>
              </div>
            </section>

            <div class="space-y-3">
              <template x-for="group in groups" :key="group.id">
                <section
                  class="overflow-hidden rounded-lg border border-ui-border bg-white"
                  x-show="groupMatches(group)"
                  x-cloak
                >
                  <div class="flex min-h-14 items-center gap-3 bg-neutral-50 px-4 py-3">
                    <button
                      type="button"
                      class="flex min-w-0 flex-1 items-center gap-3 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-500"
                      @click="group.open = !group.open"
                      :aria-expanded="group.open"
                      :aria-controls="'permission_group_' + group.id"
                    >
                      <span class="min-w-0 flex-1">
                        <span class="block text-sm font-semibold text-neutral-900" x-text="group.name"></span>
                        <span class="mt-0.5 block text-xs text-neutral-500" x-text="groupSummary(group)"></span>
                      </span>
                      <i class="bi text-neutral-500 sm:hidden" :class="group.open ? 'bi-chevron-up' : 'bi-chevron-down'" aria-hidden="true"></i>
                    </button>
                    <div class="hidden flex-wrap gap-1.5 sm:flex">
                      <button type="button" class="rounded-lg border border-ui-border bg-white px-2.5 py-1.5 text-xs font-semibold text-neutral-600 hover:bg-neutral-50" @click="setGroupLevel(group, 'none')">Limpiar</button>
                      <button type="button" class="rounded-lg border border-ui-border bg-white px-2.5 py-1.5 text-xs font-semibold text-neutral-600 hover:bg-neutral-50" @click="setGroupLevel(group, 'read')">Lectura</button>
                      <button type="button" class="rounded-lg border border-primary-200 bg-primary-50 px-2.5 py-1.5 text-xs font-semibold text-primary-700 hover:bg-primary-100" @click="setGroupLevel(group, 'write')">Edicion</button>
                    </div>
                    <i class="bi hidden text-neutral-500 sm:block" :class="group.open ? 'bi-chevron-up' : 'bi-chevron-down'" aria-hidden="true"></i>
                  </div>

                  <div :id="'permission_group_' + group.id" x-show="group.open" x-cloak class="divide-y divide-neutral-100">
                    <template x-for="module in group.modules" :key="module.id">
                      <div
                        class="grid min-w-0 gap-3 px-4 py-4 transition-colors hover:bg-neutral-50 lg:grid-cols-[minmax(220px,1fr)_auto] lg:items-center"
                        x-show="moduleMatches(module)"
                      >
                        <div class="min-w-0">
                          <div class="flex flex-wrap items-center gap-2">
                            <p class="text-sm font-semibold text-neutral-900" x-text="module.label"></p>
                            <span class="rounded-full px-2 py-0.5 text-[11px] font-semibold" :class="levelBadgeClass(module)" x-text="levelLabel(module)"></span>
                          </div>
                          <p class="mt-1 text-xs leading-5 text-neutral-500" x-text="module.description"></p>
                        </div>

                        <div class="flex min-w-0 flex-wrap gap-1 rounded-lg bg-neutral-100 p-1" role="group" :aria-label="'Nivel de acceso para ' + module.label">
                          <template x-for="option in levelOptions(module)" :key="module.id + option.value">
                            <button
                              type="button"
                              class="min-h-9 rounded-md px-2.5 py-1.5 text-xs font-semibold transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-500"
                              :class="levelButtonClass(module, option.value)"
                              :aria-pressed="permissionLevel(module) === option.value"
                              @click="setPermissionLevel(module, option.value)"
                              x-text="option.label"
                            ></button>
                          </template>
                        </div>
                      </div>
                    </template>
                  </div>
                </section>
              </template>
            </div>

            <div x-show="visibleModuleCount() === 0" x-cloak class="rounded-lg border border-dashed border-ui-border px-4 py-10 text-center">
              <i class="bi bi-search text-2xl text-neutral-400" aria-hidden="true"></i>
              <p class="mt-3 text-sm font-medium text-neutral-700">No encontramos modulos con esa busqueda.</p>
              <button type="button" class="mt-3 text-sm font-semibold text-primary-700 hover:underline" @click="permissionQuery = ''">Limpiar busqueda</button>
            </div>

            <div class="flex items-start gap-3 rounded-lg border border-info-200 bg-info-50 px-4 py-3 text-sm text-info-900">
              <i class="bi bi-info-circle mt-0.5 flex-none" aria-hidden="true"></i>
              <p>Los permisos se guardan por cliente y sitio. Cambiar el rol no reemplaza las excepciones configuradas en esta matriz.</p>
            </div>
          </div>
        </section>

        <div class="form-action-bar">
          <div class="min-w-0 text-sm text-neutral-600">
            <p class="font-medium text-neutral-800">
              <span x-text="selectedSiteCount()"></span> sitio(s) |
              <span x-text="activeModuleCount()"></span> modulo(s) con acceso
            </p>
            <p class="mt-1 text-xs text-amber-700" x-show="isDirty()" x-cloak>Formulario modificado</p>
          </div>
          <div class="form-action-primary">
            <a href="{{ path('usuario_index') }}" class="btn btn-outline-secondary">Cancelar</a>
            <button type="submit" class="btn btn-primary" data-loading-text="Guardando...">
              <i class="bi bi-check-lg" aria-hidden="true"></i>
              <span data-button-label>{{ usuario ? 'Actualizar usuario' : 'Crear usuario' }}</span>
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>

  <script>
    function permissionsHandler(initialPermissions) {
      let parsedPermissions = {};
      try {
        parsedPermissions = typeof initialPermissions === 'string'
          ? JSON.parse(initialPermissions || '{}')
          : (initialPermissions || {});
      } catch (error) {
        parsedPermissions = {};
      }

      const initialPermissionsSnapshot = JSON.stringify(parsedPermissions);

      return {
        permissions: parsedPermissions,
        permissionQuery: '',
        siteSelections: {},
        initialSitesSnapshot: '{}',
        manuallyChanged: false,
        specialCapabilities: [
          {
            module: 'proveedor',
            action: 'importar_masivo',
            category: 'Proveedores',
            label: 'Carga masiva de proveedores',
            description: 'Permite descargar la plantilla y cargar proveedores por archivo.',
            icon: 'bi-file-earmark-arrow-up'
          },
          {
            module: 'proveedor',
            action: 'migrar_erp',
            category: 'Proveedores',
            label: 'Migrar proveedores desde ERP',
            description: 'Permite actualizar el catalogo de proveedores desde el ERP del cliente.',
            icon: 'bi-database-up'
          },
          {
            module: 'documento',
            action: 'importar_sat',
            category: 'Documentos',
            label: 'Importar facturas SAT',
            description: 'Permite cargar archivos SAT en el cliente y sitio actuales.',
            icon: 'bi-file-earmark-arrow-up'
          },
          {
            module: 'documento',
            action: 'migrar_cxp',
            category: 'Documentos',
            label: 'Ejecutar migracion CxP',
            description: 'Permite iniciar y consultar la migracion de documentos desde ERP.',
            icon: 'bi-database-up'
          }
        ],
        groups: [
          {
            id: 'operaciones',
            name: 'Operaciones principales',
            open: true,
            modules: [
              { id: 'proveedor', label: 'Proveedores', description: 'Alta, edicion y configuracion fiscal de proveedores.', actions: ['ver', 'editar'] },
              { id: 'documento', label: 'Documentos', description: 'Facturas, notas, lineas, bloqueos y eliminacion controlada.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'pago', label: 'Pagos', description: 'Registro, aplicaciones, anulacion y eliminacion de pagos.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'anticipo', label: 'Anticipos', description: 'Consulta de anticipos disponibles.', actions: ['ver'] },
              { id: 'oc', label: 'Ordenes de compra', description: 'Consulta de ordenes vinculadas a CxP.', actions: ['ver'] }
            ]
          },
          {
            id: 'reportes',
            name: 'Reportes',
            open: false,
            modules: [
              { id: 'rep_antiguedad', label: 'Antiguedad de saldos', description: 'Analisis de vencimientos por rango.', actions: ['ver'] },
              { id: 'rep_estado', label: 'Estado de cuenta', description: 'Estado de cuenta por proveedor.', actions: ['ver'] },
              { id: 'rep_estado_documentos', label: 'Documentos pendientes', description: 'Cartera pendiente por documento.', actions: ['ver'] },
              { id: 'rep_resumen_prov', label: 'Resumen de proveedores', description: 'Saldos y movimientos resumidos.', actions: ['ver'] },
              { id: 'rep_resumen_prov_pagos', label: 'Pagos y aplicaciones', description: 'Reporte de pagos aplicados.', actions: ['ver'] }
            ]
          },
          {
            id: 'catalogos',
            name: 'Catalogos',
            open: false,
            modules: [
              { id: 'banco', label: 'Bancos', description: 'Catalogo de bancos.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'clasificacion_proveedor', label: 'Clasificacion de proveedores', description: 'Segmentos fiscales y operativos.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'cuenta', label: 'Cuentas bancarias', description: 'Cuentas usadas para pagos.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'cuenta_contable', label: 'Cuentas contables', description: 'Cuentas para integracion contable.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'pais', label: 'Paises', description: 'Catalogo geografico base.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'condpago', label: 'Condiciones de pago', description: 'Terminos y plazos de pago.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'regimen', label: 'Regimen fiscal', description: 'Regimenes, impuestos y retenciones por cliente.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'imp', label: 'Impuestos', description: 'IVA y otros impuestos aplicables.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'ret', label: 'Retenciones', description: 'ISR, IVA retenido y reglas relacionadas.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'idp_tasa', label: 'Tasas IDP', description: 'Tasas de combustible.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'cc', label: 'Centros de costo', description: 'Dimension de gasto por centro.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'proy', label: 'Proyectos', description: 'Dimension de gasto por proyecto.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'tipo_iva', label: 'Tipos de IVA', description: 'Tipos de IVA disponibles para documentos.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'classdoc', label: 'Clases de documento', description: 'Agrupadores de documentos.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'tdoc', label: 'Tipos de documento', description: 'Facturas, notas y documentos ERP/SAT.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'moneda', label: 'Monedas', description: 'Monedas y configuracion base.', actions: ['ver', 'editar', 'eliminar'] },
              { id: 'tc', label: 'Tipos de cambio', description: 'Tasas historicas por moneda.', actions: ['ver', 'editar', 'eliminar'] }
            ]
          }
        ],
        initializeSites(initialSites) {
          let selectedIds = [];
          try {
            selectedIds = JSON.parse(initialSites || '[]');
          } catch (error) {
            selectedIds = [];
          }

          const selections = {};
          selectedIds.forEach((siteId) => {
            selections[String(siteId)] = true;
          });
          this.siteSelections = selections;
          this.initialSitesSnapshot = JSON.stringify(selections);
        },
        markDirty() {
          this.manuallyChanged = true;
        },
        isDirty() {
          return this.manuallyChanged
            || JSON.stringify(this.permissions) !== initialPermissionsSnapshot
            || JSON.stringify(this.siteSelections) !== this.initialSitesSnapshot;
        },
        selectedSiteCount() {
          return Object.values(this.siteSelections).filter(Boolean).length;
        },
        hasPermission(module, action) {
          return Boolean(this.permissions[module] && this.permissions[module][action]);
        },
        toggleSpecialCapability(capability) {
          const module = capability.module;
          if (!this.permissions[module]) {
            this.permissions[module] = {};
          }

          const enabled = !this.hasPermission(module, capability.action);
          this.permissions[module][capability.action] = enabled;
          if (enabled) {
            this.permissions[module].ver = true;
          }
          this.cleanupModule(module);
        },
        setPermissionLevel(module, level) {
          const current = this.permissions[module.id] || {};
          const next = {};

          Object.entries(current).forEach(([action, enabled]) => {
            if (!['ver', 'editar', 'eliminar'].includes(action)) {
              next[action] = enabled;
            }
          });

          if (level === 'read' || level === 'write' || level === 'full') {
            next.ver = module.actions.includes('ver');
          }
          if ((level === 'write' || level === 'full') && module.actions.includes('editar')) {
            next.editar = true;
          }
          if (level === 'full' && module.actions.includes('eliminar')) {
            next.eliminar = true;
          }

          if (!next.ver) {
            this.specialCapabilities
              .filter((capability) => capability.module === module.id)
              .forEach((capability) => {
                next[capability.action] = false;
              });
          }

          this.permissions[module.id] = next;
          this.cleanupModule(module.id);
        },
        setGroupLevel(group, level) {
          group.modules.forEach((module) => this.setPermissionLevel(module, level));
        },
        setAllLevel(level) {
          this.groups.forEach((group) => this.setGroupLevel(group, level));
        },
        permissionLevel(module) {
          if (!this.hasPermission(module.id, 'ver')) {
            return 'none';
          }
          if (module.actions.includes('eliminar') && this.hasPermission(module.id, 'eliminar')) {
            return 'full';
          }
          if (module.actions.includes('editar') && this.hasPermission(module.id, 'editar')) {
            return 'write';
          }

          return 'read';
        },
        levelOptions(module) {
          const options = [
            { value: 'none', label: 'Sin acceso' },
            { value: 'read', label: 'Lectura' }
          ];
          if (module.actions.includes('editar')) {
            options.push({ value: 'write', label: 'Edicion' });
          }
          if (module.actions.includes('eliminar')) {
            options.push({ value: 'full', label: 'Completo' });
          }

          return options;
        },
        levelLabel(module) {
          return {
            none: 'Sin acceso',
            read: 'Lectura',
            write: 'Edicion',
            full: 'Completo'
          }[this.permissionLevel(module)];
        },
        levelBadgeClass(module) {
          return {
            none: 'bg-neutral-100 text-neutral-600',
            read: 'bg-info-100 text-info-700',
            write: 'bg-primary-100 text-primary-700',
            full: 'bg-success-100 text-success-700'
          }[this.permissionLevel(module)];
        },
        levelButtonClass(module, level) {
          return this.permissionLevel(module) === level
            ? 'bg-white text-primary-700 shadow-soft ring-1 ring-primary-200'
            : 'text-neutral-600 hover:bg-white/70 hover:text-neutral-900';
        },
        groupSummary(group) {
          const active = group.modules.filter((module) => this.permissionLevel(module) !== 'none').length;
          return active + ' de ' + group.modules.length + ' modulos con acceso';
        },
        activeModuleCount() {
          return this.groups.reduce((total, group) => {
            return total + group.modules.filter((module) => this.permissionLevel(module) !== 'none').length;
          }, 0);
        },
        normalizedQuery() {
          return this.permissionQuery.trim().toLocaleLowerCase('es');
        },
        moduleMatches(module) {
          const query = this.normalizedQuery();
          if (!query) {
            return true;
          }

          return (module.label + ' ' + module.description).toLocaleLowerCase('es').includes(query);
        },
        groupMatches(group) {
          return group.modules.some((module) => this.moduleMatches(module));
        },
        visibleModuleCount() {
          return this.groups.reduce((total, group) => {
            return total + group.modules.filter((module) => this.moduleMatches(module)).length;
          }, 0);
        },
        openMatchingGroups() {
          if (this.normalizedQuery()) {
            this.groups.forEach((group) => {
              if (this.groupMatches(group)) {
                group.open = true;
              }
            });
          }
        },
        cleanupModule(module) {
          if (this.permissions[module] && !Object.values(this.permissions[module]).some(Boolean)) {
            delete this.permissions[module];
          }
          this.permissions = { ...this.permissions };
        }
      };
    }
  </script>
{% endblock %}