uploader.js

let images = []; // [{ id, file, name, date, url, el, description }]

const thumbGridElRef = { current: null };

// OCR worker (lazy-init)
let ocrWorker = null;
async function ensureOCRWorker() {
  if (ocrWorker) return ocrWorker;
  const { createWorker } = await import("tesseract.js");
  ocrWorker = await createWorker({
    logger: () => {} // quiet
  });
  // Try Portuguese first, fallback to English
  try {
    await ocrWorker.loadLanguage("por");
    await ocrWorker.initialize("por");
  } catch {
    await ocrWorker.loadLanguage("eng");
    await ocrWorker.initialize("eng");
  }
  return ocrWorker;
}

function createThumb(item) {
  const wrap = document.createElement("div");
  wrap.className = "thumb";
  wrap.dataset.id = item.id;

  const img = document.createElement("img");
  img.alt = item.name;
  img.loading = "lazy";
  img.src = item.url;

  const btn = document.createElement("button");
  btn.className = "remove";
  btn.type = "button";
  btn.title = "Remover";
  btn.textContent = "×";
  btn.addEventListener("click", () => {
    removeImage(item.id);
  });

  const ocrBadge = document.createElement("span");
  ocrBadge.className = "thumb-ocr";
  ocrBadge.textContent = "OCR…";
  ocrBadge.style.display = item._ocrPending ? "inline-block" : "none";

  const desc = document.createElement("textarea");
  desc.className = "thumb-desc";
  desc.placeholder = "Descrição (nome, características, preço...)";
  desc.value = item.description || "";
  desc.addEventListener("input", (e) => {
    item.description = e.target.value;
  });

  const mediaWrap = document.createElement("div");
  mediaWrap.className = "thumb-media";
  mediaWrap.appendChild(img);
  mediaWrap.appendChild(btn);
  mediaWrap.appendChild(ocrBadge);

  wrap.appendChild(mediaWrap);
  wrap.appendChild(desc);
  return wrap;
}

function refreshGrid() {
  const grid = thumbGridElRef.current;
  if (!grid) return;
  grid.innerHTML = "";
  for (const item of images) {
    const el = createThumb(item);
    item.el = el;
    grid.appendChild(el);
  }
}

function extractProductDescription(text) {
  const cleaned = (text || "").replace(/\s+/g, " ").trim();
  if (!cleaned) return "";

  // Split into lines/sentences
  const lines = cleaned.split(/(?<=\.|\n)|(?=[•\-–])|\n/g).map(s => s.trim()).filter(Boolean);

  // Heuristic: product name candidates - short lines with title case or all caps
  const candidates = lines
    .map(s => s.replace(/[•\-–]+/g, "").trim())
    .filter(s => s.length >= 3 && s.length <= 60);

  let name = candidates.find(s => /^[A-ZÁÀÂÃÉÊÍÓÔÕÚÇ0-9][A-Za-zÁ-ú0-9\s\-/&]+$/.test(s)) || candidates[0] || "";

  // Extract attributes like weight/size
  const attrMatch = cleaned.match(/(\d+([.,]\d+)?\s?(ml|l|g|kg|un|cm|mm))/i);
  const attrs = attrMatch ? attrMatch[0] : "";

  // Price if present
  const price = (cleaned.match(/R\$\s?\d{1,3}(\.\d{3})*,\d{2}/) || [])[0] || "";

  let desc = name;
  if (attrs) desc += ` • ${attrs}`;
  if (price) desc += ` • ${price}`;
  return desc.trim();
}

async function runOCR(item) {
  try {
    item._ocrPending = true;
    if (item.el) {
      const badge = item.el.querySelector(".thumb-ocr");
      if (badge) badge.style.display = "inline-block";
    }
    const worker = await ensureOCRWorker();

    // Downscale for OCR for performance
    const imgBitmap = await createImageBitmap(item.file);
    const maxDim = 1200;
    const scale = Math.min(1, maxDim / Math.max(imgBitmap.width, imgBitmap.height));
    const w = Math.max(1, Math.round(imgBitmap.width * scale));
    const h = Math.max(1, Math.round(imgBitmap.height * scale));
    const canvas = document.createElement("canvas");
    canvas.width = w; canvas.height = h;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(imgBitmap, 0, 0, w, h);

    const { data: { text } } = await worker.recognize(canvas);
    const suggestion = extractProductDescription(text);

    if (suggestion && !item.description) {
      item.description = suggestion;
    }
  } catch {
    // ignore OCR errors
  } finally {
    item._ocrPending = false;
    if (item.el) {
      const badge = item.el.querySelector(".thumb-ocr");
      if (badge) badge.style.display = "none";
      const ta = item.el.querySelector(".thumb-desc");
      if (ta && ta.value !== item.description) {
        ta.value = item.description || "";
      }
    }
  }
}

function addFiles(fileList) {
  const files = Array.from(fileList || []).filter(f => /image\/(png|jpe?g)/i.test(f.type));
  for (const file of files) {
    const id = crypto.randomUUID();
    const url = URL.createObjectURL(file);
    const item = {
      id,
      file,
      name: file.name,
      date: file.lastModified || Date.now(),
      url,
      el: null,
      description: "",
      _ocrPending: false
    };
    images.push(item);
    // Fire-and-forget OCR (user can edit later)
    runOCR(item);
  }
  refreshGrid();
}

function removeImage(id) {
  const idx = images.findIndex(i => i.id === id);
  if (idx >= 0) {
    URL.revokeObjectURL(images[idx].url);
    images.splice(idx, 1);
    refreshGrid();
  }
}

export function initUploader(fileInputEl, dropZoneEl, thumbGridEl) {
  thumbGridElRef.current = thumbGridEl;

  fileInputEl.addEventListener("change", (e) => {
    addFiles(e.target.files);
    fileInputEl.value = "";
  });

  // Mobile-friendly click to open
  dropZoneEl.addEventListener("click", () => fileInputEl.click());

  // Drag and drop
  ["dragenter", "dragover"].forEach(evt =>
    dropZoneEl.addEventListener(evt, (e) => {
      e.preventDefault();
      e.stopPropagation();
      dropZoneEl.classList.add("dragover");
    })
  );
  ["dragleave", "drop"].forEach(evt =>
    dropZoneEl.addEventListener(evt, (e) => {
      e.preventDefault();
      e.stopPropagation();
      dropZoneEl.classList.remove("dragover");
    })
  );
  dropZoneEl.addEventListener("drop", (e) => {
    addFiles(e.dataTransfer.files);
  });
}

export function getImages() {
  // Sync order from DOM
  const grid = thumbGridElRef.current;
  if (!grid) return images.slice();
  const order = Array.from(grid.children).map(el => el.dataset.id);
  const map = new Map(images.map(i => [i.id, i]));
  const sorted = order.map(id => map.get(id)).filter(Boolean);
  return sorted;
}

export function clearImages() {
  for (const item of images) {
    URL.revokeObjectURL(item.url);
  }
  images = [];
  refreshGrid();
}

export function sortByName() {
  images.sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" }));
  refreshGrid();
}

export function sortByDate() {
  images.sort((a, b) => a.date - b.date);
  refreshGrid();
}