{% extends "base.html" %}
{% block content %}
<div class="row">
  <div class="col-md-10 offset-md-1">
    <div class="card shadow-sm">
      <div class="card-body p-4">
        <h4>Welcome {{ user_email }}!</h4>
        <p>You can now upload your document for verification purpose</p>

        <!-- Steps -->
        <div class="d-flex mb-4">
          <div class="step active" id="nav-step-1">1. Document Upload</div>
          <div class="step" id="nav-step-2">2. Document Submission</div>
          <div class="step" id="nav-step-3">3. Document Verification</div>
          <div class="step" id="nav-step-4">4. Download Document</div>
        </div>

        <!-- Upload block -->
        <div id="uploadBlock" class="mb-4">
          <input id="fileInput" type="file" accept=".jpg,.jpeg,.pdf" class="form-control mb-2" />
          <div id="uploadMsg" class="small text-danger d-none"></div>
          <div class="d-grid">
            <button id="uploadBtn" class="btn btn-success">Upload & Start</button>
          </div>
        </div>

        <!-- Submission -->
        <div id="submissionBlock" class="d-none text-center mb-3">
          <p>The document submission for verification is in progress</p>
          <div class="progress mb-2">
            <div id="submissionBar" class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
          </div>
        </div>

        <!-- Verification -->
        <div id="verificationBlock" class="d-none text-center mb-3">
          <p>Verification process is in progress</p>
          <div class="progress mb-2">
            <div id="verificationBar" class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width:0%"></div>
          </div>
        </div>

        <!-- Download -->
        <div id="downloadBlock" class="d-none text-center">
          <p>The document verification is completed. You can download it now.</p>
          <a id="downloadBtn" href="#" class="btn btn-primary">Download Document</a>
        </div>

        <hr>
        <h6>Your recent uploads</h6>
        <ul class="list-group">
          {% for d in docs %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
              {{ d.original_name }} — <small>{{ d.status }}</small>
              {% if d.status == 'completed' %}
                <a href="{{ url_for('download', doc_id=d.id) }}" class="btn btn-sm btn-outline-primary">Download</a>
              {% endif %}
            </li>
          {% else %}
            <li class="list-group-item">No uploads yet</li>
          {% endfor %}
        </ul>

      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const uploadBtn = document.getElementById("uploadBtn");
const fileInput = document.getElementById("fileInput");
const uploadMsg = document.getElementById("uploadMsg");

const submissionBlock = document.getElementById("submissionBlock");
const submissionBar = document.getElementById("submissionBar");
const verificationBlock = document.getElementById("verificationBlock");
const verificationBar = document.getElementById("verificationBar");
const downloadBlock = document.getElementById("downloadBlock");
const downloadBtn = document.getElementById("downloadBtn");

let currentDocId = null;

uploadBtn.addEventListener("click", async () => {
  uploadMsg.classList.add("d-none");
  const f = fileInput.files[0];
  if (!f) {
    uploadMsg.textContent = "Please choose a file.";
    uploadMsg.className = "small text-danger";
    uploadMsg.classList.remove("d-none");
    return;
  }

  const ext = f.name.split(".").pop().toLowerCase();
  if (!["jpg","jpeg","pdf"].includes(ext)) {
    uploadMsg.textContent = "This is invalid file format. You can upload JPG and PDF file only.";
    uploadMsg.className = "small text-danger";
    uploadMsg.classList.remove("d-none");
    return;
  }

  const form = new FormData();
  form.append("file", f);
  const resp = await fetch("/upload", { method: "POST", body: form });
  const data = await resp.json();
  if (!data.ok) {
    uploadMsg.textContent = data.msg || "Upload failed";
    uploadMsg.className = "small text-danger";
    uploadMsg.classList.remove("d-none");
    return;
  }

  currentDocId = data.doc_id;
  await fetch(`/submit/${currentDocId}`, { method: "POST" });

  submissionBlock.classList.remove("d-none");
  pollStatus();
});

async function pollStatus() {
  if (!currentDocId) return;
  const res = await fetch(`/status/${currentDocId}`);
  const data = await res.json();
  if (!data.ok) return;

  if (data.status === "submitted") {
    submissionBar.style.width = data.progress + "%";
  } else if (data.status === "verifying") {
    submissionBlock.classList.add("d-none");
    verificationBlock.classList.remove("d-none");
    verificationBar.style.width = data.progress + "%";
  } else if (data.status === "completed") {
    verificationBar.style.width = "100%";
    verificationBlock.classList.add("d-none");
    downloadBlock.classList.remove("d-none");
    downloadBtn.href = "/download/" + currentDocId;
    return;
  }

  setTimeout(pollStatus, 700);
}
</script>
{% endblock %}