import { getAccessToken, getSession } from "./auth.js";

const API_BASE = window.location.protocol === "file:"
  ? "http://localhost:8000"
  : window.location.origin;

const form       = document.getElementById("upload-form");
const pdfInput   = document.getElementById("pdf-input");
const dropZone   = document.getElementById("drop-zone");
const fileNameEl   = document.getElementById("file-name");
const fileNameText = document.getElementById("file-name-text");
const fileClearBtn = document.getElementById("file-clear-btn");
const emailInput = document.getElementById("email-input");
const submitBtn  = document.getElementById("submit-btn");
const errorMsg   = document.getElementById("error-msg");
const resultBox  = document.getElementById("result-box");
const infoMsg    = document.getElementById("info-msg");

let selectedFile = null;
let fullKey      = "";
let pageLimitConfirmed = false;

// ---- Page-limit modal ----
const modal              = document.getElementById("page-limit-modal");
const modalConfirm       = document.getElementById("modal-confirm");
const modalCancel        = document.getElementById("modal-cancel");
const modalChecks        = [
  document.getElementById("page-limit-confirm"),
  document.getElementById("topic-confirm"),
  document.getElementById("template-confirm"),
];

function allChecked() { return modalChecks.every(c => c.checked); }
modalChecks.forEach(c => c.addEventListener("change", () => {
  modalConfirm.disabled = !allChecked();
}));
modalCancel.addEventListener("click", () => {
  closeModal();
  clearFile();
});
modalConfirm.addEventListener("click", () => {
  pageLimitConfirmed = true;
  closeModal();
  updateSubmitBtn();
});
modal.addEventListener("click", (e) => {
  if (e.target === modal) { closeModal(); clearFile(); }
});

function openModal()  { modal.classList.add("open"); modalChecks.forEach(c => c.checked = false); modalConfirm.disabled = true; }
function closeModal() { modal.classList.remove("open"); }

// Auth guard — redirect to login if not signed in, then pre-fill email.
(async () => {
  let session = null;
  try { session = await getSession(); } catch { /* Supabase not configured */ }
  if (!session) {
    window.location.replace("login.html?next=" + encodeURIComponent(window.location.pathname + window.location.search));
    return;
  }
  if (session.user?.email) {
    emailInput.value = session.user.email;
  }
})();

// ---- File selection ----
pdfInput.addEventListener("change", () => {
  if (pdfInput.files.length > 0) handleFile(pdfInput.files[0]);
});

dropZone.addEventListener("dragover", (e) => {
  e.preventDefault();
  dropZone.classList.add("drag-over");
});
dropZone.addEventListener("dragleave", () => dropZone.classList.remove("drag-over"));
dropZone.addEventListener("drop", (e) => {
  e.preventDefault();
  dropZone.classList.remove("drag-over");
  if (e.dataTransfer.files.length > 0) handleFile(e.dataTransfer.files[0]);
});

function handleFile(file) {
  if (!file.name.toLowerCase().endsWith(".pdf")) {
    showError("Only PDF files are accepted.");
    return;
  }
  if (file.size > 10 * 1024 * 1024) {
    showError("File size exceeds 10 MB limit.");
    return;
  }
  selectedFile = file;
  pageLimitConfirmed = false;
  fileNameText.textContent = file.name;
  fileNameEl.style.display = "flex";
  hideError();
  updateSubmitBtn();
  openModal();
}

function clearFile() {
  selectedFile = null;
  pageLimitConfirmed = false;
  pdfInput.value = "";
  fileNameEl.style.display = "none";
  updateSubmitBtn();
}

fileClearBtn.addEventListener("click", (e) => {
  e.preventDefault();
  clearFile();
})

function updateSubmitBtn() {
  submitBtn.disabled = !(selectedFile && pageLimitConfirmed);
}

// ---- Form submit ----
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  if (!selectedFile) return;

  hideError();
  submitBtn.disabled = true;
  submitBtn.innerHTML = `<i class="ri-loader-4-line spin"></i> ${window.t ? window.t("upload.submitting") : "Submitting…"}`;

  const formData = new FormData();
  formData.append("file", selectedFile);
  formData.append("email", emailInput.value.trim());

  // Attach the Supabase access token when signed in, so the submission is
  // linked to the user's profile instead of being recorded as anonymous.
  let token = null;
  try { token = await getAccessToken(); } catch { token = null; }
  const headers = token ? { Authorization: `Bearer ${token}` } : {};

  let resp, data;
  try {
    resp = await fetch(`${API_BASE}/api/submit`, { method: "POST", body: formData, headers });
    data = await resp.json();
  } catch (e) {
    console.error("Fetch error:", e);
    showError(window.t ? window.t("upload.error_network") : "Network error. Make sure the server is running.");
    submitBtn.disabled = false;
    submitBtn.innerHTML = `<i class="ri-send-plane-line"></i> ${window.t ? window.t("upload.submit_btn") : "Submit for Review"}`;
    return;
  }

  if (!resp.ok) {
    showError(data.detail || (window.t ? window.t("upload.error_failed") : "Submission failed. Please try again."));
    submitBtn.disabled = false;
    submitBtn.innerHTML = `<i class="ri-send-plane-line"></i> ${window.t ? window.t("upload.submit_btn") : "Submit for Review"}`;
    return;
  }

  fullKey = data.access_key;
  showResultBox(fullKey);
});

// ---- Show result box ----
function showResultBox(key) {
  // Render input fresh each time to avoid stale type state
  const row = document.getElementById("sk-input-row");
  row.innerHTML = `
    <input
      type="password"
      id="sk-input"
      class="sk-input"
      value="${escAttr(key)}"
      readonly
      autocomplete="off"
      spellcheck="false"
    />
    <button class="sk-icon-btn" id="toggle-btn" aria-label="Show/hide key">
      <i class="ri-eye-line" id="toggle-icon"></i>
    </button>
    <button class="sk-icon-btn" id="copy-btn" aria-label="Copy key">
      <i class="ri-file-copy-line" id="copy-icon"></i>
    </button>
  `;

  document.getElementById("toggle-btn").addEventListener("click", () => {
    const input = document.getElementById("sk-input");
    const icon  = document.getElementById("toggle-icon");
    const isHidden = input.type === "password";
    input.type    = isHidden ? "text" : "password";
    icon.className = isHidden ? "ri-eye-close-line" : "ri-eye-line";
  });

  document.getElementById("copy-btn").addEventListener("click", async () => {
    const icon = document.getElementById("copy-icon");
    try {
      await navigator.clipboard.writeText(key);
    } catch {
      const ta = document.createElement("textarea");
      ta.value = key;
      document.body.appendChild(ta);
      ta.select();
      document.execCommand("copy");
      document.body.removeChild(ta);
    }
    icon.className = "ri-check-line";
    setTimeout(() => { icon.className = "ri-file-copy-line"; }, 2000);
  });

  form.style.display      = "none";
  resultBox.style.display = "block";
  if (window.t) infoMsg.innerHTML = `<i class="ri-checkbox-circle-line"></i> ${window.t("upload.info_msg")}`;
  infoMsg.style.display   = "block";

  const trackBtn = document.getElementById("track-btn");
  trackBtn.style.display = "flex";
}

function escAttr(str) {
  return str.replace(/"/g, "&quot;");
}

// ---- Helpers ----
function showError(msg) {
  errorMsg.textContent   = msg;
  errorMsg.style.display = "block";
}
function hideError() {
  errorMsg.style.display = "none";
}