{% extends "base.html" %}
{% block title %}Upload Document{% endblock %}

{% block content %}
<div class="flex flex-col items-center justify-center p-8">
  <h1 class="text-3xl font-bold mb-8">Upload a File</h1>

  <div
    id="dropZone"
    class="border-4 border-dashed border-gray-300 rounded-lg p-8 bg-white text-center w-full max-w-lg"
    ondrop="handleDrop(event)"
    ondragover="handleDragOver(event)"
  >
    <p class="text-gray-500 mb-4">
      Drag & drop a file here, or click to select a file.
    </p>
    <input
      id="fileInput"
      type="file"
      class="hidden"
      onchange="handleFileSelect(event)"
    />
  </div>

  <div id="statusMessage" class="mt-4 text-gray-700"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
  // Drag-and-drop / file input logic
  const dropZone = document.getElementById("dropZone");
  const fileInput = document.getElementById("fileInput");
  const statusMessage = document.getElementById("statusMessage");

  dropZone.addEventListener("click", () => fileInput.click());

  function handleDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = "copy";
    dropZone.classList.add("bg-gray-100");
  }

  function handleDrop(e) {
    e.preventDefault();
    dropZone.classList.remove("bg-gray-100");
    if (e.dataTransfer.files.length) {
      uploadFile(e.dataTransfer.files[0]);
    }
  }

  function handleFileSelect(e) {
    if (e.target.files.length) {
      uploadFile(e.target.files[0]);
    }
  }

  async function uploadFile(file) {
    // Check file type
    const acceptedTypes = ['application/pdf'];
    if (!acceptedTypes.includes(file.type)) {
      statusMessage.textContent = `Error: Only PDF files are accepted.`;
      return;
    }
    statusMessage.textContent = `Uploading ${file.name}...`;
    try {
      let formData = new FormData();
      formData.append("file", file);
      const response = await fetch("/ui-upload", {
        method: "POST",
        body: formData,
      });
      if (!response.ok) {
        throw new Error(`Upload failed with status ${response.status}`);
      }
      const result = await response.json();
      statusMessage.textContent = `File ${file.name} uploaded. Task ID: ${result.task_id}`;
    } catch (err) {
      statusMessage.textContent = `Error: ${err}`;
    }
  }
</script>
{% endblock %}