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

{% block title %}Asignar Roles - {{ usuario.nombre }}{% endblock %}
{% block page_title %}Asignar Roles{% endblock %}

{% block body %}
  <div class="max-w-6xl mx-auto" x-data="{ modoTodos: {{ tiene_todos ? 'true' : 'false' }} }">
    {# Breadcrumb #}
    <nav class="mb-6">
      <ol class="flex items-center space-x-2 text-sm">
        <li><a href="{{ path('usuario_index') }}" class="text-primary-600 hover:text-primary-700">Usuarios</a></li>
        <li class="text-secondary-400">/</li>
        <li class="text-secondary-600">{{ usuario.nombre }}</li>
        <li class="text-secondary-400">/</li>
        <li class="text-secondary-600">Asignar Roles</li>
      </ol>
    </nav>

    {# User Info Card #}
    <div class="bg-white rounded-2xl shadow-sm border border-secondary-200 mb-6">
      <div class="px-6 py-4">
        <div class="flex items-center gap-4">
          <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center text-white font-bold text-xl">
            {{ usuario.nombre|slice(0, 2)|upper }}
          </div>
          <div>
            <h2 class="text-xl font-semibold text-secondary-900">{{ usuario.nombre }}</h2>
            <p class="text-sm text-secondary-600">{{ usuario.email }}</p>
          </div>
        </div>
      </div>
    </div>

    {# Roles Form #}
    <form method="post" class="bg-white rounded-2xl shadow-sm border border-secondary-200">
      <div class="px-6 py-4 border-b border-secondary-200">
        <h3 class="text-lg font-semibold text-secondary-900">Permisos de Acceso</h3>
        <p class="text-sm text-secondary-500 mt-1">Define qué sitios puede acceder este usuario y con qué rol</p>
      </div>

      <div class="p-6">
        {# Opción TODOS #}
        <div class="bg-gradient-to-r from-primary-50 to-indigo-50 border-2 border-primary-200 rounded-xl p-6 mb-6">
          <div class="flex items-start gap-4">
            <input
              type="checkbox"
              id="todos_sitios"
              name="todos_sitios"
              value="1"
              x-model="modoTodos"
              class="mt-1 w-5 h-5 text-primary-600 border-secondary-300 rounded focus:ring-primary-500"
              {{ tiene_todos ? 'checked' : '' }}
            >
            <div class="flex-1">
              <label for="todos_sitios" class="flex items-center gap-2 font-semibold text-lg text-primary-900 cursor-pointer">
                <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                TODOS LOS SITIOS
              </label>
              <p class="text-sm text-secondary-600 mt-1">
                Este usuario tendrá acceso a todos los sitios existentes y futuros con el rol seleccionado
              </p>

              <div class="mt-4" x-show="modoTodos">
                <label class="block text-sm font-medium text-secondary-700 mb-2">Rol para TODOS los sitios</label>
                <select name="rol_todos" class="form-control" required x-bind:required="modoTodos">
                  <option value="">-- Seleccionar Rol --</option>
                  {% for rol in roles %}
                    {% set can_assign = false %}
                    {% if is_granted('ROLE_SUPERADMIN') %}
                      {% set can_assign = true %}
                    {% elseif is_granted('ROLE_ADMIN_SITIO') and rol.codigo in ['ROLE_ADMIN', 'ROLE_OPERADOR', 'ROLE_LECTURA'] %}
                      {% set can_assign = true %}
                    {% endif %}

                    {% if can_assign %}
                      <option value="{{ rol.id }}" {{ rol_todos_actual == rol.id ? 'selected' : '' }}>
                        {{ rol.nombre }}
                      </option>
                    {% endif %}
                  {% endfor %}
                </select>
              </div>
            </div>
          </div>
        </div>

        {# Sitios Específicos #}
        <div x-show="!modoTodos" x-transition>
          <div class="flex items-center gap-2 mb-4">
            <svg class="w-5 h-5 text-secondary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
            </svg>
            <h4 class="font-semibold text-secondary-900">Sitios Específicos</h4>
          </div>
          <p class="text-sm text-secondary-600 mb-4">
            Selecciona sitios individuales y asigna un rol para cada uno
          </p>

          {% if sitios|length > 0 %}
            <div class="overflow-x-auto border border-secondary-200 rounded-lg">
              <table class="w-full">
                <thead class="bg-secondary-50">
                  <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-secondary-700 uppercase tracking-wider w-12">
                      <input type="checkbox" class="w-4 h-4 text-primary-600 border-secondary-300 rounded"
                        onchange="this.closest('table').querySelectorAll('tbody input[type=checkbox]').forEach(cb => cb.checked = this.checked)">
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-secondary-700 uppercase tracking-wider">Cliente</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-secondary-700 uppercase tracking-wider">Sitio</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-secondary-700 uppercase tracking-wider">Rol Asignado</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-secondary-100">
                  {% for sitio in sitios %}
                    {% set is_checked = asignaciones_actuales[sitio.id] is defined %}
                    {% set current_rol = is_checked ? asignaciones_actuales[sitio.id].rol_id : null %}
                    <tr class="hover:bg-secondary-50 transition-colors">
                      <td class="px-4 py-4">
                        <input
                          type="checkbox"
                          name="sitios[]"
                          value="{{ sitio.id }}"
                          class="w-4 h-4 text-primary-600 border-secondary-300 rounded"
                          {{ is_checked ? 'checked' : '' }}
                        >
                      </td>
                      <td class="px-4 py-4 text-sm font-medium text-secondary-900">
                        {{ sitio.cliente.nombre }}
                      </td>
                      <td class="px-4 py-4 text-sm text-secondary-700">
                        {{ sitio.nombre }}
                      </td>
                      <td class="px-4 py-4">
                        <select name="roles[{{ sitio.id }}]" class="form-control">
                          <option value="">-- Sin Rol --</option>
                          {% for rol in roles %}
                            {% set can_assign = false %}
                            {% if is_granted('ROLE_SUPERADMIN') %}
                              {% set can_assign = true %}
                            {% elseif is_granted('ROLE_ADMIN_SITIO') and rol.codigo in ['ROLE_ADMIN', 'ROLE_OPERADOR', 'ROLE_LECTURA'] %}
                              {% set can_assign = true %}
                            {% endif %}

                            {% if can_assign %}
                              <option value="{{ rol.id }}" {{ current_rol == rol.id ? 'selected' : '' }}>
                                {{ rol.nombre }}
                              </option>
                            {% endif %}
                          {% endfor %}
                        </select>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          {% else %}
            <div class="text-center py-8 bg-secondary-50 rounded-lg">
              <svg class="mx-auto h-12 w-12 text-secondary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
              </svg>
              <p class="mt-2 text-sm font-medium text-secondary-900">No hay sitios disponibles</p>
              <p class="mt-1 text-xs text-secondary-600">Crea sitios primero para poder asignar roles</p>
            </div>
          {% endif %}
        </div>

        {# Actions #}
        <div class="mt-6 pt-6 border-t border-secondary-200 flex items-center justify-end gap-3">
          <a href="{{ path('usuario_index') }}" class="btn btn-outline-secondary">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
            Cancelar
          </a>
          <button type="submit" class="btn btn-primary">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Guardar Asignaciones
          </button>
        </div>
      </div>
    </form>
  </div>
{% endblock %}