main.js

import Sortable from "sortablejs";
import { initUploader, getImages, clearImages, sortByName, sortByDate } from "./uploader.js";
import { generatePDFBlob } from "./pdf.js";
import { getOptions, suggestLayout } from "./utils.js";
import { getSlots, getPageSizeMm } from "./layout.js";

const els = {
  fileInput: document.getElementById("fileInput"),
  dropZone: document.getElementById("dropZone"),
  thumbGrid: document.getElementById("thumbGrid"),
  sortNameBtn: document.getElementById("sortNameBtn"),
  sortDateBtn: document.getElementById("sortDateBtn"),
  clearBtn: document.getElementById("clearBtn"),
  layoutSelect: document.getElementById("layoutSelect"),
  captionModeSelect: document.getElementById("captionModeSelect"),
  pageSizeSelect: document.getElementById("pageSizeSelect"),
  orientationSelect: document.getElementById("orientationSelect"),
  marginInput: document.getElementById("marginInput"),
  titleInput: document.getElementById("titleInput"),
  removeBgChk: document.getElementById("removeBgChk"),
  enhanceChk: document.getElementById("enhanceChk"),
  autoLayoutChk: document.getElementById("autoLayoutChk"),
  useRemoveBgApiChk: document.getElementById("useRemoveBgApiChk"),
  removeBgApiKey: document.getElementById("removeBgApiKey"),
  generateBtn: document.getElementById("generateBtn"),
  downloadLink: document.getElementById("downloadLink"),
  pdfPreview: document.getElementById("pdfPreview"),
  layoutPreview: document.getElementById("layoutPreview"),
};

initUploader(els.fileInput, els.dropZone, els.thumbGrid);

// drag-sort thumbnails
Sortable.create(els.thumbGrid, {
  animation: 150,
  ghostClass: "drag-ghost",
  onEnd: () => {
    maybeSuggestLayout();
  }
});

els.sortNameBtn.addEventListener("click", () => {
  sortByName();
  maybeSuggestLayout();
});

els.sortDateBtn.addEventListener("click", () => {
  sortByDate();
  maybeSuggestLayout();
});

els.clearBtn.addEventListener("click", () => {
  clearImages();
  updateLayoutPreview();
});

// Observe changes to thumbnails to trigger auto-suggest
const mo = new MutationObserver(() => {
  maybeSuggestLayout();
});
mo.observe(els.thumbGrid, { childList: true });

function maybeSuggestLayout() {
  if (!els.autoLayoutChk.checked) return;
  const imgs = getImages();
  if (!imgs.length) return;

  const sizeKey = els.pageSizeSelect.value.toLowerCase();
  const { w, h } = getPageSizeMm(sizeKey);
  const isLand = els.orientationSelect.value === "landscape";
  const pageW = isLand ? Math.max(w, h) : Math.min(w, h);
  const pageH = isLand ? Math.min(w, h) : Math.max(w, h);

  const { layoutKey, marginMm } = suggestLayout(imgs, { pageWmm: pageW, pageHmm: pageH });
  if (layoutKey) els.layoutSelect.value = layoutKey;
  if (typeof marginMm === "number") els.marginInput.value = String(Math.round(marginMm));
  updateLayoutPreview();
}

function updateLayoutPreview() {
  const sizeKey = els.pageSizeSelect.value.toLowerCase();
  const { w, h } = getPageSizeMm(sizeKey);
  const isLand = els.orientationSelect.value === "landscape";
  const pageW = isLand ? Math.max(w, h) : Math.min(w, h);
  const pageH = isLand ? Math.min(w, h) : Math.max(w, h);
  const margin = parseFloat(els.marginInput.value) || 0;

  const slots = getSlots(els.layoutSelect.value, pageW, pageH, margin);
  const c = els.layoutPreview;
  const ctx = c.getContext("2d");
  const pad = 10;

  // Clear
  ctx.clearRect(0, 0, c.width, c.height);

  // Fit page into canvas with padding
  const scale = Math.min((c.width - pad * 2) / pageW, (c.height - pad * 2) / pageH);
  const offX = (c.width - pageW * scale) / 2;
  const offY = (c.height - pageH * scale) / 2;

  // Page background
  ctx.fillStyle = "#ffffff";
  ctx.strokeStyle = "#e5e7eb";
  ctx.lineWidth = 2;
  ctx.fillRect(offX, offY, pageW * scale, pageH * scale);
  ctx.strokeRect(offX, offY, pageW * scale, pageH * scale);

  // Slots
  ctx.fillStyle = "#f3f4f6";
  ctx.strokeStyle = "#9ca3af";
  ctx.lineWidth = 1.5;
  slots.forEach((s, i) => {
    const x = offX + s.x * scale;
    const y = offY + s.y * scale;
    const wmm = s.w * scale;
    const hmm = s.h * scale;
    ctx.fillRect(x, y, wmm, hmm);
    ctx.strokeRect(x, y, wmm, hmm);

    // index tag
    ctx.fillStyle = "#111111";
    ctx.font = "12px sans-serif";
    ctx.globalAlpha = 0.5;
    ctx.fillText(String(i + 1), x + 6, y + 16);
    ctx.globalAlpha = 1;
    ctx.fillStyle = "#f3f4f6";
  });
}

["change", "input"].forEach(evt => {
  els.layoutSelect.addEventListener(evt, updateLayoutPreview);
  els.pageSizeSelect.addEventListener(evt, () => { updateLayoutPreview(); maybeSuggestLayout(); });
  els.orientationSelect.addEventListener(evt, () => { updateLayoutPreview(); maybeSuggestLayout(); });
  els.marginInput.addEventListener(evt, updateLayoutPreview);
  els.autoLayoutChk.addEventListener(evt, () => { maybeSuggestLayout(); });
});
updateLayoutPreview();

els.generateBtn.addEventListener("click", async () => {
  const imgs = getImages();
  if (imgs.length === 0) {
    alert("Adicione ao menos uma imagem.");
    return;
  }
  els.generateBtn.disabled = true;
  els.generateBtn.textContent = "Gerando...";
  try {
    const options = getOptions({
      layout: els.layoutSelect.value,
      pageSize: els.pageSizeSelect.value,
      orientation: els.orientationSelect.value,
      marginMm: parseFloat(els.marginInput.value) || 0,
      title: els.titleInput.value?.trim() || "",
      captionMode: els.captionModeSelect.value,
      removeBg: els.removeBgChk.checked,
      enhance: els.enhanceChk.checked,
      useRemoveBgApi: els.useRemoveBgApiChk.checked,
      removeBgApiKey: (els.removeBgApiKey.value || "").trim()
    });

    const blob = await generatePDFBlob(imgs, options);
    const url = URL.createObjectURL(blob);
    els.pdfPreview.src = url;
    els.downloadLink.href = url;
    els.downloadLink.style.display = "inline-flex";
  } catch (e) {
    console.error(e);
    alert("Falha ao gerar PDF. Tente novamente.");
  } finally {
    els.generateBtn.disabled = false;
    els.generateBtn.textContent = "Gerar PDF";
  }
});