Kreatyw/ui/script.js

document.addEventListener("DOMContentLoaded", () => {
  const editor = document.getElementById("editor");
  const suggestionOverlay = document.getElementById("suggestion-overlay");
  const status = document.getElementById("status");
  const statusIndicator = document.querySelector(".status-indicator");

  // Controls
  const nGramSelect = document.getElementById("n-gram");
  const nValDisplay = document.getElementById("n-val");
  const tempInput = document.getElementById("temperature");
  const tempValDisplay = document.getElementById("temp-val");
  const lengthInput = document.getElementById("length");
  const lengthValDisplay = document.getElementById("length-val");
  const generateBtn = document.getElementById("generate-more-btn");
  const sidebarToggle = document.getElementById("sidebar-toggle");
  const sidebar = document.getElementById("sidebar");

  let currentSuggestion = "";
  let isFetching = false;
  let debounceTimer;

  // --- UI Logic ---

  const updateUI = () => {
    nValDisplay.textContent = nGramSelect.value;
    tempValDisplay.textContent = tempInput.value;
    lengthValDisplay.textContent = lengthInput.value;
  };

  sidebarToggle.addEventListener("click", () => {
    sidebar.classList.toggle("open");
  });

  const closeSidebarOnMobile = () => {
    if (window.innerWidth <= 768) {
      sidebar.classList.remove("open");
    }
  };

  tempInput.addEventListener("input", updateUI);
  lengthInput.addEventListener("input", updateUI);
  nGramSelect.addEventListener("change", () => {
    updateUI();
    triggerUpdate();
  });

  const triggerUpdate = () => {
    currentSuggestion = "";
    updateSuggestion();
    const prompt = editor.value;
    if (prompt.trim().length > 0) fetchPrediction(prompt);
  };

  tempInput.addEventListener("change", () => {
    triggerUpdate();
  });

  lengthInput.addEventListener("change", () => {
    triggerUpdate();
  });

  // --- Core Functions ---

  const fetchPrediction = async (prompt, customLength = null) => {
    if (isFetching) return;

    isFetching = true;
    status.textContent = "Thinking...";
    statusIndicator.classList.add("fetching");

    const n = parseInt(nGramSelect.value);
    const temperature = parseFloat(tempInput.value);
    const length = customLength || parseInt(lengthInput.value);

    try {
      const response = await fetch("/api/predict", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt, n, temperature, length }),
      });

      if (!response.ok) throw new Error("Network response failed");

      const data = await response.json();

      if (customLength) {
        insertText(data.prediction || "");
      } else {
        currentSuggestion = data.prediction || "";
        updateSuggestion();
      }
    } catch (error) {
      console.error("Prediction failed:", error);
      status.textContent = "Error";
    } finally {
      isFetching = false;
      status.textContent = "Idle";
      statusIndicator.classList.remove("fetching");
    }
  };

  const updateSuggestion = () => {
    suggestionOverlay.innerHTML = "";

    const editorText = editor.value;
    const space = editorText.length > 0 && !/\s$/.test(editorText) ? " " : "";

    // Create invisible text span to match editor content exactly
    const textSpan = document.createElement("span");
    textSpan.textContent = editorText + space;
    textSpan.style.color = "transparent";
    suggestionOverlay.appendChild(textSpan);

    if (currentSuggestion) {
      const suggestionSpan = document.createElement("span");
      suggestionSpan.textContent = currentSuggestion;
      suggestionSpan.className = "suggestion-highlight";

      // Add Tab Icon (Better SVG for Tab Key)
      const iconSpan = document.createElement("span");
      iconSpan.style.pointerEvents = "none"; // Ensure clicks pass through to suggestionSpan
      iconSpan.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tab-icon"><path d="M21 9V15"/><path d="M3 12H17"/><path d="m14 9 3 3-3 3"/></svg>`;
      suggestionSpan.appendChild(iconSpan);

      suggestionOverlay.appendChild(suggestionSpan);
    }
  };

  const insertText = (text) => {
    if (!text) return;
    const space =
      editor.value.length > 0 && !/\s$/.test(editor.value) ? " " : "";
    editor.value += space + text;
    currentSuggestion = "";
    updateSuggestion();

    // Ensure the editor scrolls with content
    editor.scrollTop = editor.scrollHeight;
  };

  // --- Event Handlers ---

  editor.addEventListener("input", () => {
    clearTimeout(debounceTimer);
    currentSuggestion = "";
    updateSuggestion();

    const prompt = editor.value;
    if (prompt.trim().length === 0) return;
    debounceTimer = setTimeout(() => fetchPrediction(prompt), 300);
  });

  editor.addEventListener("keydown", (e) => {
    if (e.key === "Tab" && currentSuggestion) {
      e.preventDefault();
      insertText(currentSuggestion);
      fetchPrediction(editor.value);
    }
  });

  // Handle click on suggestion
  suggestionOverlay.addEventListener("click", (e) => {
    if (e.target.classList.contains("suggestion-highlight")) {
      insertText(currentSuggestion);
      fetchPrediction(editor.value);
      editor.focus();
    }
  });

  generateBtn.addEventListener("click", () => {
    fetchPrediction(editor.value, 50);
    closeSidebarOnMobile();
  });

  // Sync scroll
  editor.addEventListener("scroll", () => {
    suggestionOverlay.scrollTop = editor.scrollTop;
  });

  // Initialize UI badges
  updateUI();
});