<div class="page-shell">
  <div class="content-container usuarios-container">
    <app-header
      title="SALUD UT"
      subtitle="Gestión de Usuarios"
      badgeText="SALUD UT"
      [showUserInfo]="true"
      [userName]="getNombreUsuario()"
      [userRole]="getNombreRolFormateado()"
      [showLogout]="true"
      (logout)="logout()"
      [showBack]="true"
      backLabel="Volver"
      (back)="volverDashboard()"
    ></app-header>

    <header class="usuarios-header">
      <div>
        <h2>Gestión de usuarios</h2>
        <p class="subtitle">
          Crear, activar y desactivar usuarios del sistema
        </p>
      </div>
          </header>

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

        <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 acciones">
          <button class="btn btn-primary" (click)="crearUsuario()" [disabled]="creando">
            {{ creando ? 'Creando...' : 'Crear usuario' }}
          </button>
        </div>

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

      <div class="card">
        <h3>Crear autorizante</h3>

        <div class="form-row">
          <label>Numero de documento:</label>
          <input type="text" [(ngModel)]="nuevoAutorizante.numero_documento" />
        </div>

        <div class="form-row">
          <label>Tipo de documento:</label>
          <select [(ngModel)]="nuevoAutorizante.tipo_documento">
            <option value="CC">CC</option>
            <option value="DE">DE</option>
            <option value="RC">RC</option>
          </select>
        </div>

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

        <div class="form-row">
          <label>Telefono:</label>
          <input type="text" [(ngModel)]="nuevoAutorizante.telefono" />
        </div>

        <div class="form-row">
          <label>Cargo:</label>
          <input type="text" [(ngModel)]="nuevoAutorizante.cargo" />
        </div>

        <div class="form-row">
          <label>
            <input type="checkbox" [(ngModel)]="nuevoAutorizante.activo" />
            Activo
          </label>
        </div>

        <div class="form-row acciones">
          <button
            class="btn btn-primary"
            (click)="crearAutorizante()"
            [disabled]="creandoAutorizante"
          >
            {{ creandoAutorizante ? 'Creando...' : 'Crear autorizante' }}
          </button>
        </div>

        <div class="status ok" *ngIf="mensajeAutorizanteOk">
          {{ mensajeAutorizanteOk }}
        </div>
        <div class="status error" *ngIf="mensajeAutorizanteError">
          {{ mensajeAutorizanteError }}
        </div>
      </div>

      <div class="card card-usuarios">
        <h3>Autorizantes registrados</h3>

        <div class="status" *ngIf="cargandoAutorizantes">Cargando autorizantes...</div>
        <div class="status error" *ngIf="errorAutorizantes">{{ errorAutorizantes }}</div>

        <div class="tabla-usuarios-wrapper" *ngIf="!cargandoAutorizantes && autorizantes.length">
          <table class="table tabla-usuarios">
            <thead>
              <tr>
                <th>Documento</th>
                <th>Tipo</th>
                <th>Nombre</th>
                <th>Telefono</th>
                <th>Cargo</th>
                <th>Estado</th>
                <th>Acciones</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let a of autorizantes; trackBy: trackByAutorizante">
                <td>{{ a.numero_documento }}</td>
                <td>{{ a.tipo_documento }}</td>
                <td>
                  <input
                    class="input-inline"
                    type="text"
                    [(ngModel)]="autorizanteEdicion[a.numero_documento].nombre"
                  />
                </td>
                <td>
                  <input
                    class="input-inline"
                    type="text"
                    [(ngModel)]="autorizanteEdicion[a.numero_documento].telefono"
                    placeholder="-"
                  />
                </td>
                <td>
                  <input
                    class="input-inline"
                    type="text"
                    [(ngModel)]="autorizanteEdicion[a.numero_documento].cargo"
                    placeholder="-"
                  />
                </td>
                <td>
                  <span
                    class="badge"
                    [class.badge-success]="a.activo"
                    [class.badge-danger]="!a.activo"
                  >
                    {{ a.activo ? 'Activo' : 'Inactivo' }}
                  </span>
                </td>
                <td>
                  <div class="acciones-inline">
                    <button
                      class="btn btn-primary btn-sm"
                      (click)="guardarAutorizante(a)"
                      [disabled]="autorizanteEdicion[a.numero_documento].guardando"
                    >
                      {{
                        autorizanteEdicion[a.numero_documento].guardando
                          ? 'Guardando...'
                          : 'Guardar'
                      }}
                    </button>
                    <button
                      *ngIf="a.activo"
                      class="btn btn-danger btn-sm"
                      (click)="cambiarEstadoAutorizante(a, false)"
                    >
                      Desactivar
                    </button>
                    <button
                      *ngIf="!a.activo"
                      class="btn btn-secondary btn-sm"
                      (click)="cambiarEstadoAutorizante(a, true)"
                    >
                      Activar
                    </button>
                  </div>
                  <div
                    class="inline-status ok"
                    *ngIf="autorizanteEdicion[a.numero_documento]?.mensaje"
                  >
                    {{ autorizanteEdicion[a.numero_documento].mensaje }}
                  </div>
                  <div
                    class="inline-status error"
                    *ngIf="autorizanteEdicion[a.numero_documento]?.error"
                  >
                    {{ autorizanteEdicion[a.numero_documento].error }}
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div *ngIf="!cargandoAutorizantes && autorizantes.length === 0">
          No hay autorizantes para mostrar.
        </div>
      </div>

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

        <div class="tabla-usuarios-wrapper">
          <table class="table tabla-usuarios">
            <thead>
              <tr>
                <th>Usuario</th>
                <th>Nombre</th>
                <th>Email</th>
                <th>Rol</th>
                <th>Nueva contrasena</th>
                <th>Estado</th>
                <th>Último login</th>
                <th>Acciones</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let u of usuarios; trackBy: trackByUsuario">
                <td>
                  <input
                    class="input-inline"
                    type="text"
                    [(ngModel)]="usuarioEdicion[u.id_usuario].username"
                  />
                </td>
                <td>
                  <input
                    class="input-inline"
                    type="text"
                    [(ngModel)]="usuarioEdicion[u.id_usuario].nombre_completo"
                  />
                </td>
                <td>
                  <input
                    class="input-inline"
                    type="email"
                    [(ngModel)]="usuarioEdicion[u.id_usuario].email"
                  />
                </td>
                <td>
                  <select
                    class="input-inline"
                    [(ngModel)]="usuarioEdicion[u.id_usuario].id_rol"
                  >
                    <option *ngFor="let r of roles" [ngValue]="r.id_rol">
                      {{ r.nombre_rol }}
                    </option>
                  </select>
                </td>
                <td>
                  <input
                    class="input-inline"
                    type="password"
                    [(ngModel)]="usuarioEdicion[u.id_usuario].password"
                    placeholder="Nueva contrasena"
                  />
                </td>
                <td>
                  <span
                    class="badge"
                    [class.badge-success]="u.activo"
                    [class.badge-danger]="!u.activo"
                  >
                    {{ u.activo ? 'Activo' : 'Inactivo' }}
                  </span>
                </td>
                <td>
                  {{ u.ultimo_login ? (u.ultimo_login | date:'yyyy-MM-dd HH:mm') : '—' }}
                </td>
                <td>
                  <div class="acciones-inline">
                    <button
                      class="btn btn-primary btn-sm"
                      (click)="guardarUsuario(u)"
                      [disabled]="usuarioEdicion[u.id_usuario].guardando"
                    >
                      {{
                        usuarioEdicion[u.id_usuario].guardando
                          ? 'Guardando...'
                          : 'Guardar'
                      }}
                    </button>
                    <button
                      *ngIf="u.activo"
                      class="btn btn-danger btn-sm"
                      (click)="cambiarEstadoUsuario(u, false)"
                    >
                      Desactivar
                    </button>
                    <button
                      *ngIf="!u.activo"
                      class="btn btn-secondary btn-sm"
                      (click)="cambiarEstadoUsuario(u, true)"
                    >
                      Activar
                    </button>
                  </div>
                  <div
                    class="inline-status ok"
                    *ngIf="usuarioEdicion[u.id_usuario]?.mensaje"
                  >
                    {{ usuarioEdicion[u.id_usuario].mensaje }}
                  </div>
                  <div
                    class="inline-status error"
                    *ngIf="usuarioEdicion[u.id_usuario]?.error"
                  >
                    {{ usuarioEdicion[u.id_usuario].error }}
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="status" *ngIf="avisoUsuarios">
          Mostrando hasta {{ limiteUsuarios }} usuarios. Ajusta el filtro o pagina si necesitas mas.
        </div>

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