const inputField = document.querySelector(".qt input");
const icons = document.querySelectorAll(".icons i");
const convo = document.querySelector(".convo");

// Create hidden file inputs dynamically
const imageInput = document.createElement("input");
imageInput.type = "file";
imageInput.accept = "image/*";
imageInput.style.display = "none";

const docInput = document.createElement("input");
docInput.type = "file";
docInput.accept = ".pdf,.docx,.pptx,.xlsx";
docInput.style.display = "none";

document.body.appendChild(imageInput);
document.body.appendChild(docInput);

let selectedFile = null;
let selectedType = null;

// Icon click handlers
icons[0].addEventListener("click", () => imageInput.click()); // image icon
icons[1].addEventListener("click", () => docInput.click());   // file icon
icons[2].addEventListener("click", handleSubmit);             // send icon

imageInput.addEventListener("change", () => {
  selectedFile = imageInput.files[0];
  selectedType = "Image";
  showSelectedFile(selectedFile.name, "🖼️");
});

docInput.addEventListener("change", () => {
  selectedFile = docInput.files[0];
  selectedType = "Document";
  showSelectedFile(selectedFile.name, "📄");
});

function showSelectedFile(fileName, icon) {
  convo.innerHTML = `
    <div style="padding: 0.8rem; background-color: #f3f3f3; border-radius: 10px; margin: 1rem;">
      ${icon} <strong>Selected file:</strong> ${fileName}
    </div>
  `;
}

async function handleSubmit() {
  const question = inputField.value.trim();
  if (!question && !selectedFile) {
    alert("Please type a question or select a file.");
    return;
  }

  const formData = new FormData();
  formData.append("question", question);
  formData.append("file", selectedFile);

  convo.innerHTML = `<div style="padding: 1rem; background: #eee; border-radius: 8px;">Processing your request...</div>`;

  try {
    const response = await fetch("http://localhost:8000/predict", {
      method: "POST",
      body: formData,
    });

    const result = await response.json();
    if (result.answer) {
      convo.innerHTML = `
        <div style="padding: 1rem; background: #e1f7e1; border-radius: 10px; margin: 1rem;">
          <strong>Question:</strong> ${question}<br>
          ${selectedFile ? `<strong>${selectedType}:</strong> ${selectedFile.name}<br>` : ""}
          <strong>Answer:</strong> ${result.answer}
        </div>
      `;
    } else {
      convo.innerHTML = `<div style="color: red;">Error: ${result.error}</div>`;
    }
  } catch (error) {
    convo.innerHTML = `<div style="color: red;">Request failed: ${error.message}</div>`;
  }

  // Reset input field
  inputField.value = "";
}