<!-- code html -->
<div id="app">
  <h3>Enviar string a PARABORRAR</h3>

  <div class="controls">
    <button class="send-btn" data-value="uno">uno</button>
    <button class="send-btn" data-value="dos">dos</button>
    <button class="send-btn" data-value="tres">tres</button>
  </div>

  <div class="custom-send">
    <input id="customInput" type="text" placeholder="Escribe otro string..." />
    <button id="sendCustom">Enviar personalizado</button>
  </div>

  <div id="status" aria-live="polite"></div>
</div>




/* code css */
#app {
  font-family: Arial, sans-serif;
  max-width: 420px;
  margin: 6px;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  background: #fff;
}

h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.controls {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.send-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  background: #f0f0f0;
}

.send-btn:hover { transform: translateY(-1px); }

.custom-send {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

#customInput {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

#sendCustom {
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: #e8f4ff;
}

#status {
  font-size: 13px;
  color: #333;
  padding: 8px;
  border-radius: 6px;
  background: #fbfbfb;
  border: 1px solid #f0f0f0;
}



/* ================================
   CODE JAVASCRIPT
================================ */
const UBIFUNCTION_URL = 'https://parse.ubidots.com/prv/Llaqta_Ingenieros/paraborrar';

// Token de Ubidots para leer/escribir variables, HERE I PUT MY TOKEN
const TOKEN = 'MYTOKEN';

// Variable Ubidots de la cual quieres obtener el último valor
const VARIABLE_URL = 'https://industrial.api.ubidots.com/api/v1.6/variables/692ddf444919b05d75625c56/values?page_size=1';

/* ================================
   MUESTRA ESTADO
================================ */
function setStatus(text, error = false) {
  const el = document.getElementById('status');
  el.innerText = text;
  el.style.color = error ? 'red' : 'green';
}

/* ================================
   GET: obtener último valor de variable
================================ */
async function loadLastValue() {
  try {
    setStatus("Cargando valor...");
    const response = await fetch(VARIABLE_URL, {
      method: "GET",
      headers: {
        "X-Auth-Token": TOKEN,
        "Content-Type": "application/json"
      }
    });

    const data = await response.json();

    if (!data.results || data.results.length === 0) {
      setStatus("La variable no tiene datos aún.");
      return;
    }

    const lastValue = data.results[0].value;
    
    // Colocar valor en input
    document.getElementById("customInput").value = lastValue;

    setStatus("Valor cargado correctamente.");
  } catch (err) {
    console.error(err);
    setStatus("Error cargando valor inicial.", true);
  }
}

/* ================================
   POST: enviar nuevo valor a UbiFunction
================================ */
async function sendInputString(value) {
  if (!value) {
    setStatus("El valor está vacío", true);
    return;
  }

  setStatus(`Enviando "${value}"...`);

  try {
    const response = await fetch(UBIFUNCTION_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Auth-Token": TOKEN
      },
      body: JSON.stringify({ inputString: value })
    });

    const txt = await response.text();

    if (response.ok) {
      setStatus(`Enviado OK: ${txt}`);
    } else {
      setStatus(`Error: ${txt}`, true);
    }

  } catch (err) {
    console.error(err);
    setStatus("Error enviando valor.", true);
  }
}

/* ================================
   EVENTOS
================================ */
document.addEventListener("DOMContentLoaded", () => {
  // Cargar valor inicial
  loadLastValue();

  // Botones uno/dos/tres
  document.querySelectorAll(".send-btn").forEach(btn => {
    btn.addEventListener("click", () => {
      sendInputString(btn.dataset.value);
    });
  });

  // Botón personalizado
  document.getElementById("sendCustom").addEventListener("click", () => {
    const v = document.getElementById("customInput").value.trim();
    sendInputString(v);
  });
});