<?php
require_once __DIR__ . '/../../config/auth.php';

$mensaje = $_SESSION['flash_mensaje'] ?? '';
$tipo_mensaje = $_SESSION['flash_tipo'] ?? 'success';
unset($_SESSION['flash_mensaje'], $_SESSION['flash_tipo']);

$usuarios = $conn->query(
    "SELECT u.id, u.usuario, u.nombre, u.email, u.activo, u.creado_en,
            r.nombre AS rol_nombre,tu.nombre AS tipo_nombre,
            COALESCE((SELECT GROUP_CONCAT(ts.nombre ORDER BY ts.nombre SEPARATOR ', ') FROM usuario_supervisa_tipos ust JOIN tipos_usuario ts ON ts.id=ust.tipo_usuario_id WHERE ust.usuario_id=u.id),'Sólo a sí mismo') supervisa
     FROM usuarios u
     LEFT JOIN roles r ON r.id = u.rol_id
     LEFT JOIN tipos_usuario tu ON tu.id=u.tipo_usuario_id
     ORDER BY u.nombre"
);

include __DIR__ . '/../../includes/header.php';
include __DIR__ . '/../../includes/sidebar.php';
?>
<main class="main">
  <?php include __DIR__ . '/../../includes/topbar.php'; ?>
  <div class="content">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
      <div>
        <h3 class="page-title mb-1">Usuarios</h3>
        <p class="text-muted mb-0">Accesos, roles y estado de las cuentas del sistema.</p>
      </div>
      <a class="btn btn-hm" href="/HM/modules/usuarios/form.php">
        <i class="fa fa-user-plus me-1"></i> Nuevo usuario
      </a>
    </div>

    <?php if ($mensaje): ?>
      <div class="alert alert-<?= e($tipo_mensaje) ?>"><?= e($mensaje) ?></div>
    <?php endif; ?>

    <div class="card card-hm">
      <div class="card-body">
        <div class="row mb-3">
          <div class="col-md-5">
            <label class="form-label" for="buscar">Buscar usuario</label>
            <input class="form-control" id="buscar" type="search" placeholder="Nombre, usuario, correo o rol">
          </div>
        </div>
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0" id="tabla-usuarios">
            <thead>
              <tr>
                <th>Nombre</th>
                <th>Usuario</th>
                <th>Correo</th>
                <th>Rol</th>
                <th>Tipo</th><th>Supervisa a</th>
                <th>Estado</th>
                <th class="text-end">Acciones</th>
              </tr>
            </thead>
            <tbody>
              <?php while ($usuario = $usuarios->fetch_assoc()): ?>
                <tr>
                  <td><?= e($usuario['nombre']) ?></td>
                  <td><?= e($usuario['usuario']) ?></td>
                  <td><?= e($usuario['email'] ?: '—') ?></td>
                  <td><?= e($usuario['rol_nombre'] ?: 'Sin rol') ?></td>
                  <td><?=e($usuario['tipo_nombre']?:'Sin tipo')?></td><td><?=e($usuario['supervisa'])?></td>
                  <td>
                    <span class="badge <?= $usuario['activo'] ? 'badge-activo' : 'badge-inactivo' ?>">
                      <?= $usuario['activo'] ? 'Activo' : 'Inactivo' ?>
                    </span>
                  </td>
                  <td class="text-end">
                    <a class="btn btn-sm btn-outline-primary" href="/HM/modules/usuarios/form.php?id=<?= (int) $usuario['id'] ?>" title="Editar">
                      <i class="fa fa-pen"></i>
                    </a>
                    <?php if ((int) $usuario['id'] !== (int) usuario_actual_id()): ?>
                      <form class="d-inline" method="post" action="/HM/modules/usuarios/toggle.php">
                        <input type="hidden" name="id" value="<?= (int) $usuario['id'] ?>">
                        <button class="btn btn-sm <?= $usuario['activo'] ? 'btn-outline-danger' : 'btn-outline-success' ?>" type="submit" title="<?= $usuario['activo'] ? 'Desactivar' : 'Activar' ?>">
                          <i class="fa <?= $usuario['activo'] ? 'fa-user-slash' : 'fa-user-check' ?>"></i>
                        </button>
                      </form>
                    <?php endif; ?>
                  </td>
                </tr>
              <?php endwhile; ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</main>
<script>
document.getElementById('buscar').addEventListener('input', function () {
  const texto = this.value.toLowerCase();
  document.querySelectorAll('#tabla-usuarios tbody tr').forEach(function (fila) {
    fila.style.display = fila.innerText.toLowerCase().includes(texto) ? '' : 'none';
  });
});
</script>
<?php include __DIR__ . '/../../includes/footer.php'; ?>
