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

{% block title %}Gestion de Usuarios{% endblock %}
{% block page_title %}Usuarios{% endblock %}

{% block body %}
  <div class="space-y-6">
    <section class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
      <div>
        <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Administracion</p>
        <h2 class="mt-2 text-3xl font-semibold text-secondary-900">Gestion de usuarios</h2>
        <p class="mt-2 text-sm text-secondary-500">Administra cuentas, roles, foto de perfil y acceso al sistema.</p>
      </div>
      {% if user_role_level() <= 3 %}
        <a href="{{ path('usuario_new') }}" class="inline-flex items-center gap-2 rounded-2xl bg-primary-600 px-5 py-3 text-sm font-medium text-white shadow-sm transition hover:bg-primary-700">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
          Nuevo usuario
        </a>
      {% endif %}
    </section>

    <section class="overflow-hidden rounded-[2rem] border border-secondary-200 bg-white shadow-sm">
      <div class="border-b border-secondary-200 px-6 py-5">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
          <div>
            <h3 class="text-xl font-semibold text-secondary-900">Usuarios activos</h3>
            <p class="mt-1 text-sm text-secondary-500">{{ usuarios|length }} usuarios visibles segun tu nivel de acceso.</p>
          </div>
          <a href="{{ path('perfil_edit') }}" class="inline-flex items-center gap-2 rounded-2xl border border-secondary-200 px-4 py-2 text-sm font-medium text-secondary-700 transition hover:bg-secondary-50">
            Editar mi perfil
          </a>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-secondary-200">
          <thead class="bg-secondary-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.18em] text-secondary-500">Usuario</th>
              <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.18em] text-secondary-500">Email</th>
              <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.18em] text-secondary-500">Rol</th>
              <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.18em] text-secondary-500">Ultimo login</th>
              <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.18em] text-secondary-500">Estado</th>
              <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-[0.18em] text-secondary-500">Acciones</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-secondary-100 bg-white">
            {% for usuario in usuarios %}
              {% set roleName = get_user_role_name(usuario) %}
              {% set userPhoto = usuario.foto ? '/' ~ usuario.foto|trim('/') : null %}
              <tr class="transition hover:bg-secondary-50">
                <td class="px-6 py-4">
                  <div class="flex items-center gap-4">
                    {% if userPhoto %}
                      <img src="{{ userPhoto }}" alt="{{ usuario.nombre }}" class="h-12 w-12 rounded-2xl object-cover shadow-sm">
                    {% else %}
                      <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-700 text-sm font-semibold text-white shadow-sm">
                        {{ usuario.nombre|slice(0, 2)|upper }}
                      </div>
                    {% endif %}
                    <div>
                      <p class="text-sm font-semibold text-secondary-900">{{ usuario.nombre }}</p>
                      {% if usuario.superadmin %}
                        <span class="mt-1 inline-flex rounded-full bg-violet-100 px-3 py-1 text-xs font-semibold text-violet-700">Superadmin</span>
                      {% endif %}
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4 text-sm text-secondary-600">{{ usuario.email }}</td>
                <td class="px-6 py-4">
                  {% set roleClasses = {
                    'Superadministrador': 'bg-violet-100 text-violet-700',
                    'Administrador de Sitio': 'bg-blue-100 text-blue-700',
                    'Administrador de Cliente': 'bg-indigo-100 text-indigo-700',
                    'Operador': 'bg-emerald-100 text-emerald-700'
                  } %}
                  <span class="inline-flex rounded-full px-3 py-1 text-xs font-semibold {{ roleClasses[roleName] ?? 'bg-secondary-100 text-secondary-700' }}">{{ roleName }}</span>
                </td>
                <td class="px-6 py-4 text-sm text-secondary-600">
                  {% if usuario.ultimoLoginEn %}
                    {{ usuario.ultimoLoginEn|date('d/m/Y H:i') }}
                  {% else %}
                    <span class="text-secondary-400">Nunca</span>
                  {% endif %}
                </td>
                <td class="px-6 py-4">
                  {% if usuario.activo %}
                    <span class="inline-flex rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700">Activo</span>
                  {% else %}
                    <span class="inline-flex rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold text-rose-700">Inactivo</span>
                  {% endif %}
                </td>
                <td class="px-6 py-4 text-right">
                  <div class="flex justify-end gap-2">
                    {% if user_role_level() <= 3 %}
                      <a href="{{ path('usuario_edit', {id: usuario.id}) }}" class="inline-flex items-center rounded-xl border border-primary-200 px-3 py-2 text-sm font-medium text-primary-700 transition hover:bg-primary-50">Editar</a>
                      {% if not usuario.superadmin %}
                        <form method="post" action="{{ path('usuario_delete', {id: usuario.id}) }}" onsubmit="return confirm('Seguro que deseas desactivar este usuario?');">
                          <button type="submit" class="inline-flex items-center rounded-xl border border-rose-200 px-3 py-2 text-sm font-medium text-rose-700 transition hover:bg-rose-50">Eliminar</button>
                        </form>
                      {% endif %}
                    {% endif %}
                  </div>
                </td>
              </tr>
            {% else %}
              <tr>
                <td colspan="6" class="px-6 py-12 text-center text-sm text-secondary-500">No hay usuarios registrados.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
  </div>
{% endblock %}