<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Promesas en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-promesa { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .grupo-acciones { display: flex; gap: 8px; margin-bottom: 15px; }
    button { padding: 9px 14px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
    .btn-exito { background: #16a34a; color: white; }
    .btn-fallo { background: #dc2626; color: white; }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
    .visor-estado { padding: 15px; border-radius: 6px; font-family: monospace; background: #f1f5f9; border-left: 4px solid #64748b; font-size: 0.9rem; min-height: 48px; display: flex; align-items: center; }
    .estado-pending { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
    .estado-fulfilled { border-color: #22c55e; background: #f0fdf4; color: #166534; }
    .estado-rejected { border-color: #ef4444; background: #fef2f2; color: #991b1b; }
  </style>
</head>
<body>

  <div class="card-promesa">
    <h3 style="margin-top: 0; color: #0f172a;">Simulador de Promesas</h3>
    <p style="color: #64748b; font-size: 0.9rem;">Prueba solicitar una respuesta asíncrona (espera simulada de 1.5 segundos):</p>

    <div class="grupo-acciones">
      <button class="btn-exito" id="btn-ok" onclick="ejecutarPromesa(true)">Simular Respuesta Exitosa</button>
      <button class="btn-fallo" id="btn-bad" onclick="ejecutarPromesa(false)">Simular Error de Servidor</button>
    </div>

    <div class="visor-estado" id="caja-estado">Presiona un botón para crear una Promesa (Promise).</div>
  </div>

  <script>
    function crearPromesaSimulada(debeTriunfar) {
      return new Promise((resolve, reject) => {
        // Simulamos latencia de red de 1.5s
        setTimeout(() => {
          if (debeTriunfar) {
            resolve({ codigo: 200, mensaje: "¡Matrícula confirmada en Kilopolis!" });
          } else {
            reject(new Error("Error 500: Tiempo de espera agotado en la base de datos."));
          }
        }, 1500);
      });
    }

    function ejecutarPromesa(debeTriunfar) {
      const visor = document.getElementById('caja-estado');
      const btnOk = document.getElementById('btn-ok');
      const btnBad = document.getElementById('btn-bad');

      btnOk.disabled = true;
      btnBad.disabled = true;

      visor.className = "visor-estado estado-pending";
      visor.textContent = "⏳ Estado: PENDING (esperando respuesta del servidor)...";

      crearPromesaSimulada(debeTriunfar)
        .then(datos => {
          // Estado FULFILLED
          visor.className = "visor-estado estado-fulfilled";
          visor.textContent = `✓ Estado: FULFILLED -> ${datos.mensaje}`;
        })
        .catch(err => {
          // Estado REJECTED
          visor.className = "visor-estado estado-rejected";
          visor.textContent = `✕ Estado: REJECTED -> ${err.message}`;
        })
        .finally(() => {
          btnOk.disabled = false;
          btnBad.disabled = false;
        });
    }
  </script>

</body>
</html>