const logBox = document.getElementById("logBox");
const input = document.getElementById("commandInput");
const button = document.getElementById("sendButton");

async function updateLogs() {
    const res = await fetch("/logs");
    const text = await res.text();

    // merken, ob wir unten waren
    const isAtBottom = logBox.scrollHeight - logBox.scrollTop === logBox.clientHeight;

    // Logs als Zeilen splitten (optional für Farben später)
    const lines = text.split("\n");
    logBox.innerHTML = lines.map(line => `<div>${line}</div>`).join("");

    // Nur nach unten scrollen, wenn wir vorher schon unten waren
    if (isAtBottom) {
        logBox.scrollTop = logBox.scrollHeight;
    }
}

// Befehl senden
button.addEventListener("click", async () => {
    const cmd = input.value.trim();
    if (!cmd) return;

    await fetch(`/command?cmd=${encodeURIComponent(cmd)}`);
    input.value = "";
    updateLogs();
});

// Enter-Taste für Input
input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") button.click();
});

// Logs automatisch aktualisieren
setInterval(updateLogs, 100);
updateLogs();
