{% extends "base.html" %}
{% block title %}Equipo{% endblock %}
{% block page_title %}Gestión de equipo{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('usuarios.nuevo') }}" class="btn btn-primary btn-sm">
  <i class="bi bi-person-plus me-1"></i>Añadir usuario
</a>
{% endblock %}

{% block content %}

<!-- Stats -->
<div class="row g-3 mb-4">
  {% set activos  = users|selectattr('activo','eq',1)|list %}
  {% set admins   = users|selectattr('rol','eq','admin')|selectattr('activo','eq',1)|list %}
  {% set contables = users|selectattr('rol','eq','contable')|selectattr('activo','eq',1)|list %}
  {% set visores  = users|selectattr('rol','eq','visor')|selectattr('activo','eq',1)|list %}
  <div class="col-sm-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#4f86f7,#3a6fd8)">
      <div class="small opacity-75 mb-1">Total activos</div>
      <div class="fs-3 fw-bold">{{ activos|length }}</div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#ef4444,#dc2626)">
      <div class="small opacity-75 mb-1">Administradores</div>
      <div class="fs-3 fw-bold">{{ admins|length }}</div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#3b82f6,#2563eb)">
      <div class="small opacity-75 mb-1">Contables</div>
      <div class="fs-3 fw-bold">{{ contables|length }}</div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#64748b,#475569)">
      <div class="small opacity-75 mb-1">Visores</div>
      <div class="fs-3 fw-bold">{{ visores|length }}</div>
    </div>
  </div>
</div>

<!-- Tabla usuarios -->
<div class="card border-0 shadow-sm">
  <div class="card-header border-0" style="background:linear-gradient(135deg,#eef3ff,#e0e7ff)">
    <i class="bi bi-people me-2 text-primary"></i>
    <span class="fw-semibold text-primary">Usuarios de la empresa</span>
  </div>
  <div class="card-body p-0">
    <table class="table table-hover mb-0" style="font-size:.875rem">
      <thead>
        <tr>
          <th>Usuario</th>
          <th class="text-center">Rol</th>
          <th class="text-center">Estado</th>
          <th>Alta</th>
          <th class="text-center no-print">Acciones</th>
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        <tr {% if not u.activo %}class="text-muted opacity-60"{% endif %}>
          <td>
            <div class="d-flex align-items-center gap-2">
              <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white"
                   style="width:34px;height:34px;font-size:.8rem;flex-shrink:0;
                   background:{% if u.rol=='admin' %}#ef4444{% elif u.rol=='contable' %}#3b82f6{% else %}#64748b{% endif %}">
                {{ u.username[0].upper() }}
              </div>
              <div>
                <div class="fw-semibold">{{ u.username }}</div>
                {% if u.id == session.get('user_id') %}
                <div class="text-muted" style="font-size:.73rem">Tú</div>
                {% endif %}
              </div>
            </div>
          </td>
          <td class="text-center">
            <span class="badge {{ roles_badge[u.rol] }} px-3">
              {{ roles_labels[u.rol] }}
            </span>
          </td>
          <td class="text-center">
            {% if u.activo %}
            <span class="badge" style="background:#dcfce7;color:#14532d;border:1px solid #86efac">
              <i class="bi bi-check2-circle me-1"></i>Activo
            </span>
            {% else %}
            <span class="badge" style="background:#f1f5f9;color:#64748b;border:1px solid #cbd5e1">
              <i class="bi bi-dash-circle me-1"></i>Inactivo
            </span>
            {% endif %}
          </td>
          <td class="text-muted small">{{ u.created_at[:10] if u.created_at else '—' }}</td>
          <td class="text-center no-print">
            <div class="d-flex gap-1 justify-content-center">
              <a href="{{ url_for('usuarios.editar', uid=u.id) }}"
                 class="btn btn-sm btn-outline-primary btn-action" title="Editar">
                <i class="bi bi-pencil"></i>
              </a>
              {% if u.activo and u.id != session.get('user_id') %}
              <form method="post" action="{{ url_for('usuarios.desactivar', uid=u.id) }}"
                    onsubmit="return confirm('¿Desactivar a ' + {{ u.username | tojson }} + '?')">
                <button class="btn btn-sm btn-outline-danger btn-action" title="Desactivar">
                  <i class="bi bi-person-dash"></i>
                </button>
              </form>
              {% elif not u.activo %}
              <form method="post" action="{{ url_for('usuarios.activar', uid=u.id) }}">
                <button class="btn btn-sm btn-outline-success btn-action" title="Reactivar">
                  <i class="bi bi-person-check"></i>
                </button>
              </form>
              {% endif %}
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Leyenda de roles -->
<div class="row g-3 mt-2">
  {% for rid, rlabel, rbadge, rdesc in roles %}
  <div class="col-md-4">
    <div class="d-flex gap-3 p-3 rounded-2 border" style="background:#f8fafc">
      <span class="badge {{ rbadge }} px-3 d-flex align-items-center" style="height:fit-content">
        {{ rlabel }}
      </span>
      <div class="small text-muted">{{ rdesc }}</div>
    </div>
  </div>
  {% endfor %}
</div>

{% endblock %}