const form = document.getElementById("job-form");
const filesInput = document.getElementById("files");
const promptInput = document.getElementById("prompt");
const statusBox = document.getElementById("status");
const resultBox = document.getElementById("result");
const submitButton = document.getElementById("submit-button");
const fileList = document.getElementById("file-list");

function setStatus(kind, message) {
  statusBox.className = `status ${kind}`;
  statusBox.textContent = message;
}

function renderFiles() {
  fileList.innerHTML = "";

  for (const file of filesInput.files) {
    const pill = document.createElement("div");
    pill.className = "file-pill";
    pill.textContent = `${file.name} (${Math.round(file.size / 1024)} KB)`;
    fileList.appendChild(pill);
  }
}

filesInput.addEventListener("change", renderFiles);

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  resultBox.hidden = true;
  resultBox.innerHTML = "";
  submitButton.disabled = true;
  setStatus("busy", "Uploading files and processing them. This can take a little while.");

  try {
    const payload = new FormData();
    for (const file of filesInput.files) {
      payload.append("files", file);
    }
    payload.append("prompt", promptInput.value.trim());

    const response = await fetch("/api/process", {
      method: "POST",
      body: payload,
    });

    const body = await response.json();

    if (!response.ok) {
      throw new Error(body.error || "The request failed.");
    }

    setStatus("success", "Result ready.");
    resultBox.hidden = false;
    resultBox.innerHTML = `
      <strong>Result ready.</strong>
      <a href="${body.downloadUrl}">Download ${body.resultFile}</a>
    `;
  } catch (error) {
    setStatus("error", error.message);
  } finally {
    submitButton.disabled = false;
  }
});