<div class="usuarios-container">
  <header class="usuarios-header">
    <div>
      <h1>Gestión de Usuarios</h1>
      <p class="subtitle">Crear, activar y desactivar usuarios del sistema</p>
    </div>
    <button class="btn-secondary" (click)="volverDashboard()">← Volver al dashboard</button>
  </header>

  <section class="usuarios-grid">
    <!-- Formulario de creación -->
    <div class="card">
      <h2>Crear nuevo usuario</h2>

      <div class="form-row">
        <label>Usuario (login):</label>
        <input type="text" [(ngModel)]="nuevoUsuario.username" />
      </div>

      <div class="form-row">
        <label>Email:</label>
        <input type="email" [(ngModel)]="nuevoUsuario.email" />
      </div>

      <div class="form-row">
        <label>Nombre completo:</label>
        <input type="text" [(ngModel)]="nuevoUsuario.nombre_completo" />
      </div>

      <div class="form-row">
        <label>Contraseña:</label>
        <input type="password" [(ngModel)]="nuevoUsuario.password" />
        <small class="hint">Mínimo 8 caracteres, con letras y números.</small>
      </div>

      <div class="form-row">
        <label>Rol:</label>
        <select [(ngModel)]="nuevoUsuario.id_rol">
          <option *ngFor="let r of roles" [value]="r.id_rol">
            {{ r.nombre_rol }}
          </option>
        </select>
      </div>

      <div class="form-row" *ngIf="nuevoUsuario.id_rol === 2">
        <label>Sedes (códigos):</label>
        <textarea
          rows="2"
          [(ngModel)]="sedesTexto"
          placeholder="Ej: 113, 148, 205  (separadas por coma)"
        ></textarea>
        <small class="hint">
          Solo para rol <strong>administrativo_sede</strong>. Usa los códigos de
          establecimiento, separados por coma.
        </small>
      </div>

      <div class="form-row acciones">
        <button (click)="crearUsuario()" [disabled]="creando">
          {{ creando ? 'Creando...' : 'Crear usuario' }}
        </button>
      </div>

      <div class="msg-ok" *ngIf="mensajeOk">{{ mensajeOk }}</div>
      <div class="msg-error" *ngIf="mensajeError">{{ mensajeError }}</div>
    </div>

    <!-- Lista de usuarios -->
    <div class="card">
      <h2>Usuarios registrados</h2>

      <div class="estado" *ngIf="cargandoUsuarios">Cargando usuarios...</div>
      <div class="estado error" *ngIf="errorUsuarios">{{ errorUsuarios }}</div>

      <table class="tabla-usuarios" *ngIf="!cargandoUsuarios && usuarios.length">
        <thead>
          <tr>
            <th>Usuario</th>
            <th>Nombre</th>
            <th>Email</th>
            <th>Rol</th>
            <th>Estado</th>
            <th>Último login</th>
            <th>Acciones</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let u of usuarios">
            <td>{{ u.username }}</td>
            <td>{{ u.nombre_completo }}</td>
            <td>{{ u.email }}</td>
            <td>{{ u.nombre_rol }}</td>
            <td>
              <span
                class="badge"
                [class.badge-activo]="u.activo"
                [class.badge-inactivo]="!u.activo"
              >
                {{ u.activo ? 'Activo' : 'Inactivo' }}
              </span>
            </td>
            <td>{{ u.ultimo_login || '—' }}</td>
            <td>
              <button
                *ngIf="u.activo"
                class="btn-danger"
                (click)="cambiarEstadoUsuario(u, false)"
              >
                Desactivar
              </button>
              <button
                *ngIf="!u.activo"
                class="btn-secondary"
                (click)="cambiarEstadoUsuario(u, true)"
              >
                Activar
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <div *ngIf="!cargandoUsuarios && usuarios.length === 0">
        No hay usuarios para mostrar.
      </div>
    </div>
  </section>
</div>
