{% extends 'base.html' %}
{% block content %}
<div class="page-toolbar">
  <div>
    <h1 class="h3 mb-1">Usuarios</h1>
    <p class="text-muted mb-0">Gestión centralizada de accesos a la plataforma.</p>
  </div>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal"><i class="bi bi-plus-circle"></i> Nuevo usuario</button>
</div>

<div class="card table-panel">
  <div class="card-header">
    <form class="row g-3 align-items-end filter-toolbar">
      <div class="col-lg-8"><label class="form-label">Filtro rápido</label><input class="form-control" data-table-filter-target="#usersTable" placeholder="Buscar por nombre, email o rol"></div>
      <div class="col-lg-4 text-muted small">Ahora podés crear, editar y resetear contraseña sin salir de la pantalla.</div>
    </form>
  </div>
  <div class="table-responsive wide-table">
    <table class="table align-middle mb-0" id="usersTable">
      <thead><tr><th>Nombre</th><th>Email</th><th>Rol</th><th>Institución</th><th>Activo</th><th class="text-end">Acciones</th></tr></thead>
      <tbody>
      {% for user in users %}
      <tr>
        <td>{{ user.full_name }}</td>
        <td>{{ user.email }}</td>
        <td><span class="badge text-bg-light">{{ user.role }}</span></td>
        <td>{{ user.institution.name if user.institution else 'Plataforma' }}</td>
        <td>{{ 'Sí' if user.is_active_user else 'No' }}</td>
        <td class="text-end">
          <div class="d-flex justify-content-end gap-2 flex-wrap">
            <a class="btn btn-sm btn-outline-primary" href="{{ url_for('admin_users', edit=user.id) }}">Editar</a>
            <form method="post" action="{{ url_for('admin_user_toggle', user_id=user.id) }}"><button class="btn btn-sm btn-outline-secondary">Activar / desactivar</button></form>
          </div>
        </td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="modal fade" id="userModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">{{ 'Editar usuario' if edit_user else 'Nuevo usuario' }}</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <form method="post">
        <div class="modal-body"><div class="row g-4 modal-form-grid">
          {% if edit_user %}<input type="hidden" name="user_id" value="{{ edit_user.id }}">{% endif %}
          <div class="col-12"><div class="section-card"><div class="section-title">Datos de acceso</div><div class="row g-3"><div class="col-md-6"><label class="form-label">Nombre completo</label><input class="form-control field-placeholder" name="full_name" value="{{ edit_user.full_name if edit_user else '' }}" placeholder="Ej.: Laura Gómez" required></div><div class="col-md-6"><label class="form-label">Email</label><input class="form-control field-placeholder" name="email" type="email" value="{{ edit_user.email if edit_user else '' }}" placeholder="usuario@dominio.com" required></div><div class="col-md-6"><label class="form-label">{{ 'Nueva contraseña' if edit_user else 'Contraseña inicial' }}</label><input class="form-control field-placeholder" name="password" type="text" placeholder="{% if edit_user %}Dejar vacío para conservar{% else %}Cambio1234{% endif %}"></div><div class="col-md-6"><label class="form-label">Rol</label><select class="form-select searchable-select" name="role" data-placeholder="Seleccionar rol"><option value="admin" {% if edit_user and edit_user.role=='admin' %}selected{% endif %}>admin</option><option value="receptionist" {% if edit_user and edit_user.role=='receptionist' %}selected{% endif %}>receptionist</option><option value="professional" {% if not edit_user or edit_user.role=='professional' %}selected{% endif %}>professional</option><option value="client" {% if edit_user and edit_user.role=='client' %}selected{% endif %}>client</option><option value="accounting" {% if edit_user and edit_user.role=='accounting' %}selected{% endif %}>accounting</option></select></div><div class="col-md-6"><label class="form-label">Institución</label><select class="form-select searchable-select" name="institution_id"><option value="">Plataforma / sin institución</option>{% for inst in institutions %}<option value="{{ inst.id }}" {% if edit_user and edit_user.institution_id == inst.id %}selected{% endif %}>{{ inst.name }}</option>{% endfor %}</select></div><div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" name="is_active_user" id="user_active" {% if not edit_user or edit_user.is_active_user %}checked{% endif %}><label class="form-check-label" for="user_active">Usuario activo</label></div></div></div></div></div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button><button class="btn btn-primary">{{ 'Guardar cambios' if edit_user else 'Crear usuario' }}</button></div>
      </form>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}{{ super() }}{% if edit_user %}<script>document.addEventListener('DOMContentLoaded',function(){ new bootstrap.Modal(document.getElementById('userModal')).show(); });</script>{% endif %}{% endblock %}