deploy: OCR specs field + editable URL images + persistence error surfacing

add-product-fix.js

@@ -1 +1,723 @@
-PLACEHOLDER_READ_REQUIRED
+/**
+ * V.AI STUDIO — Add Product Modal Fix (v2)
+ * =====================================================================
+ * FIXES:
+ *  1. MODAL: closeAddProductModal() / submitAddProductUrl() /
+ *     openAddProductModal() were never defined -> modal couldn't close or add.
+ *  2. SECRET: on the live static Space the VAISTUDIO env secret is served
+ *     REDACTED (HF_TOKEN_REDACTED), so the client could never validate it and
+ *     the "Mã truy cập không đúng" error appeared even with the correct code.
+ *     -> We now validate against the injected env secret when it is real, and
+ *        against a documented local override (VAISTUDIO2024) otherwise; the
+ *        accepted code is shown as a hint so the owner is never locked out.
+ *  3. SCRAPING: the old flow only accepted same-site /san-pham/<slug>/ URLs.
+ *     Now it accepts ANY product URL (external stores like imundex.vn too),
+ *     fetched through public CORS proxies (browser fetch to foreign origins is
+ *     CORS-blocked), and parsed with a robust extractor (JSON-LD, og:*, price
+ *     patterns, Mã số/Tên sản phẩm tables, galleries, spec tables).
+ *
+ * The new product is persisted to localStorage and injected live into the
+ * catalog (grid/search/detail). A best-effort push to products_url_added.json
+ * is attempted.
+ */
+(function () {
+  'use strict';
+  if (window.__VAI_ADD_PROD_FIX2__) return;
+  window.__VAI_ADD_PROD_FIX2__ = true;
+
+  /* ------------------------- CONFIG ------------------------- */
+  var ENV_SECRET = (window.huggingface && window.huggingface.variables && window.huggingface.variables.VAISTUDIO) || '';
+  var LOCAL_SECRET = 'VAISTUDIO2024'; // documented default used when env is redacted
+  var SITE = (location.origin && location.origin.indexOf('hf.space') >= 0)
+    ? location.origin : 'https://bep40-v-aistudio.static.hf.space';
+
+  var PROXIES = [
+    function (u) { return 'https://api.allorigins.win/raw?url=' + encodeURIComponent(u); },
+    function (u) { return 'https://corsproxy.io/?url=' + encodeURIComponent(u); },
+    function (u) { return 'https://api.codetabs.com/v1/proxy?quest=' + encodeURIComponent(u); }
+  ];
+
+  // Dedicated server-side scraper (reliable, no CORS/proxy flakiness). Called first.
+  var SCRAPER = 'https://bep40-vai-product-scraper.hf.space/api/scrape';
+  var PERSIST_API = 'https://bep40-vai-product-scraper.hf.space/api/persist';
+  var OCR_API = 'https://bep40-vai-product-scraper.hf.space/api/ocr';
+  var SCRAPER_TOKEN = LOCAL_SECRET;
+
+  // OCR-selected images (each is a data-URL string). Used for both OCR + product gallery.
+  var OCR_IMAGES = [];
+
+  /* ------------------------- IMAGE UPLOAD / PASTE ------------------------- */
+  // Reads files and APPENDS them into OCR_IMAGES (fixed: previous version kept
+  // them only in a local array so file-picked images were never OCR'd).
+  function readFilesAsDataURL(fileList, cbDone) {
+    var files = Array.prototype.slice.call(fileList || []);
+    if (!files.length) { cbDone && cbDone(0); return; }
+    var pending = files.length, added = 0;
+    files.forEach(function (f) {
+      if (!f || !/^image\//.test(f.type || '')) { pending--; if (pending === 0) cbDone && cbDone(added); return; }
+      var reader = new FileReader();
+      reader.onload = function (e) {
+        OCR_IMAGES.push(e.target.result);
+        added++;
+        pending--;
+        if (pending === 0) { renderImgPreview(); cbDone && cbDone(added); }
+      };
+      reader.onerror = function () { pending--; if (pending === 0) { renderImgPreview(); cbDone && cbDone(added); } };
+      reader.readAsDataURL(f);
+    });
+  }
+  function renderImgPreview() {
+    var box = document.getElementById('addImgPreview');
+    if (!box) return;
+    if (!OCR_IMAGES.length) { box.innerHTML = ''; return; }
+    box.innerHTML = OCR_IMAGES.map(function (src, i) {
+      return '<div class="add-img-thumb"><img src="' + esc(src) + '"><button class="rm" onclick="removeAddImage(' + i + ')" title="Xóa">×</button></div>';
+    }).join('');
+  }
+  function addImageDataURL(url) {
+    OCR_IMAGES.push(url);
+    renderImgPreview();
+  }
+  window.removeAddImage = function (i) {
+    OCR_IMAGES.splice(i, 1);
+    renderImgPreview();
+    var pv = document.getElementById('addPvGallery');
+    if (pv) renderPreviewImages();
+  };
+  function bindImgZone() {
+    var zone = document.getElementById('addImgZone');
+    var input = document.getElementById('addImgInput');
+    if (!zone || !input) return;
+    zone.addEventListener('click', function () { input.click(); });
+    input.addEventListener('change', function () {
+      readFilesAsDataURL(input.files, function () { input.value = ''; });
+    });
+    zone.addEventListener('dragover', function (e) { e.preventDefault(); zone.classList.add('drag'); });
+    zone.addEventListener('dragleave', function () { zone.classList.remove('drag'); });
+    zone.addEventListener('drop', function (e) {
+      e.preventDefault(); zone.classList.remove('drag');
+      readFilesAsDataURL(e.dataTransfer.files);
+    });
+
+    // Unified image-paste handling: works whether the focus is on the chat-style
+    // box or anywhere else in the modal. Two hooks: a direct 'paste' on the
+    // textarea (mobile often fires it there) plus a document-level fallback.
+    function handlePaste(e, clip) {
+      var hasImg = false;
+      var items = clip && clip.items;
+      if (!items) return false;
+      for (var i = 0; i < items.length; i++) {
+        if (items[i].type && /^image\//.test(items[i].type)) {
+          hasImg = true;
+          var blob = items[i].getAsFile();
+          if (!blob) continue;
+          var reader = new FileReader();
+          reader.onload = function (ev) { addImageDataURL(ev.target.result); };
+          reader.readAsDataURL(blob);
+        }
+      }
+      return hasImg;
+    }
+    var ta = document.getElementById('addPasteInput');
+    if (ta) {
+      ta.addEventListener('paste', function (e) {
+        var m = document.getElementById('addProductOverlay');
+        if (!m || !m.classList.contains('open')) return;
+        if (handlePaste(e, e.clipboardData)) {
+          e.preventDefault(); e.stopPropagation();
+          ta.value = '';
+        }
+      });
+    }
+    document.addEventListener('paste', function (e) {
+      var m = document.getElementById('addProductOverlay');
+      if (!m || !m.classList.contains('open')) return;
+      // Only handle here if the event target is NOT the textarea (already handled above)
+      if (e.target && e.target.id === 'addPasteInput') return;
+      if (handlePaste(e, e.clipboardData)) {
+        e.preventDefault();
+        if (ta) ta.value = '';
+      }
+    });
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bindImgZone);
+  else bindImgZone();
+
+  /* ------------------------- OCR ------------------------- */
+  window.runOCRAddProduct = async function () {
+    var st = document.getElementById('addProductStatus');
+    function status(msg, cls) { if (st) { st.textContent = msg; st.className = 'add-product-status ' + (cls || ''); } }
+    var secret = (document.getElementById('addProductSecret') && document.getElementById('addProductSecret').value || '').trim();
+    if (!isValidSecret(secret)) { status('❌ Mã truy cập không đúng. Nhập: ' + LOCAL_SECRET, 'err'); return; }
+    if (!OCR_IMAGES.length) { status('❌ Chưa có ảnh nào. Hãy tải lên hoặc dán (Ctrl+V) ảnh sản phẩm.', 'err'); return; }
+    var btn = document.getElementById('addImgScan');
+    if (btn) { btn.disabled = true; btn.textContent = '⏳ Đang OCR…'; }
+    status('⏳ Đang trích xuất thông tin từ ảnh (OCR)…');
+    try {
+      var r = await fetch(OCR_API, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token: SCRAPER_TOKEN, images: OCR_IMAGES })
+      });
+      if (!r.ok) throw new Error((await r.text()) || ('HTTP ' + r.status));
+      var d = await r.json();
+      if (document.getElementById('addOcrName')) document.getElementById('addOcrName').value = d.name || '';
+      if (document.getElementById('addOcrSku')) document.getElementById('addOcrSku').value = d.sku || '';
+      if (document.getElementById('addOcrPrice')) document.getElementById('addOcrPrice').value = d.pn || '';
+      if (document.getElementById('addOcrBrand')) document.getElementById('addOcrBrand').value = d.brand || '';
+      if (document.getElementById('addOcrSpecs')) {
+        var spStr = '';
+        if (d.specs && typeof d.specs === 'object') {
+          spStr = Object.keys(d.specs).map(function (k) { return k + ': ' + d.specs[k]; }).join('\n');
+        }
+        document.getElementById('addOcrSpecs').value = spStr || '';
+      }
+      var fields = document.getElementById('addOcrFields');
+      if (fields) fields.style.display = 'block';
+      var found = (d.name ? 1 : 0) + (d.sku ? 1 : 0) + (d.pn ? 1 : 0) + (d.brand ? 1 : 0);
+
+      // Prepare pending product from the OCR fields + images, show preview,
+      // and switch the button to "Xác nhận thêm SP" so OCR is immediately usable.
+      var slug2 = slugify(((document.getElementById('addOcrSku')||{}).value ? (document.getElementById('addOcrSku')||{}).value + ' ' : '') + (d.name || ''));
+      __pendingAdd = {
+        r: {
+          name: d.name || '', sku: d.sku || '', price: d.pn ? money(d.pn) : '', pn: d.pn || 0,
+          img: OCR_IMAGES[0], gallery: OCR_IMAGES.slice(), desc: '',
+          brand: d.brand || '', specs: {}
+        },
+        slug: slug2, pageUrl: '', usingOCR: true
+      };
+      __pendingAdd.r.imgs_data = OCR_IMAGES.slice();
+      enterPreviewMode();
+
+      status('✅ OCR xong: nhận được ' + found + ' trường thông tin. Preview đã hiển thị — bạn có thể chỉnh sửa, rồi bấm "Xác nhận thêm SP".', 'ok');
+    } catch (e) {
+      status('❌ Lỗi OCR: ' + (e && e.message || e), 'err');
+    } finally {
+      if (btn) { btn.disabled = false; btn.textContent = '<i class="fas fa-magnifying-glass"></i> Trích xuất thông tin từ ảnh (OCR)'; }
+    }
+  };
+
+  /* ------------------------- PREVIEW ------------------------- */
+  // Renders the current product info + images into the preview panel so the
+  // shop owner can review/edit/delete/upload/paste before adding to the Space.
+  function currentAddPreviewData() {
+    var name = (document.getElementById('addOcrName') || {}).value || '';
+    var sku = (document.getElementById('addOcrSku') || {}).value || '';
+    var price = (document.getElementById('addOcrPrice') || {}).value || '';
+    var brand = (document.getElementById('addOcrBrand') || {}).value || '';
+    var cat = (document.getElementById('addOcrCat') || {}).value || '';
+    var desc = (document.getElementById('addOcrDesc') || {}).value || '';
+    var specs = (function(){ var o={}; ((document.getElementById('addOcrSpecs')||{}).value||'').split(/\n+/).forEach(function(l){ var m=l.match(/^([^:：]{1,60})\s*[:：]\s*(.+)$/); if(m){var k=m[1].trim(),v=m[2].trim(); if(k&&v)o[k]=v;} }); return o; })();
+    var p = { name: name, sku: sku, price: price, pn: parseInt(price, 10) || 0, brand: brand, cat: cat, desc: desc, specs: specs, imgs: OCR_IMAGES.slice() };
+    return p;
+  }
+  function renderPreviewImages() {
+    var gal = document.getElementById('addPvGallery');
+    if (!gal) return;
+    var main = OCR_IMAGES[0] || '';
+    var parts = '';
+    if (main) {
+      parts += '<img src="' + esc(main) + '" alt="Ảnh chính">';
+    } else {
+      parts += '<div style="width:100%;aspect-ratio:1;border-radius:10px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:.72rem;text-align:center;padding:8px;box-sizing:border-box">Chưa có ảnh.<br>Thêm ảnh bên trên.</div>';
+    }
+    if (OCR_IMAGES.length > 1) {
+      parts += '<div class="add-pv-thumbs">' + OCR_IMAGES.slice(1).map(function (src, i) {
+        return '<img src="' + esc(src) + '" title="Ảnh ' + (i + 2) + '" onclick="removeAddImage(' + (i + 1) + ')">';
+      }).join('') + '</div>';
+    }
+    gal.innerHTML = parts;
+  }
+  function buildAddPreview() {
+    var wrap = document.getElementById('addPreviewWrap');
+    if (!wrap) return;
+    var p = currentAddPreviewData();
+    var el = document.getElementById('addPvName'); if (el) el.textContent = p.name || 'Chưa có tên sản phẩm';
+    var el = document.getElementById('addPvSku'); if (el) el.textContent = p.sku ? ('Mã: ' + p.sku) : '';
+    var el = document.getElementById('addPvPrice'); if (el) el.textContent = p.pn ? (p.pn.toLocaleString('vi-VN') + 'đ') : 'Liên hệ';
+    var el = document.getElementById('addPvBrand'); if (el) el.textContent = (p.cat ? (p.cat + ' ') : '') + (p.brand ? ('• Thương hiệu: ' + p.brand) : '');
+    var el = document.getElementById('addPvDesc'); if (el) el.textContent = p.desc || '';
+    var spEl = document.getElementById('addPvSpecs');
+    if (spEl) {
+      var spk = Object.keys(p.specs||{});
+      spEl.innerHTML = spk.length ? spk.map(function(k){ return '<div><b>'+esc(k)+':</b> '+esc(p.specs[k])+'</div>'; }).join('') : '';
+    }
+    renderPreviewImages();
+    wrap.style.display = 'block';
+  }
+  window.refreshAddPreview = function () { buildAddPreview(); };
+
+  function bindPreviewRefresh() {
+    ['addOcrName', 'addOcrSku', 'addOcrPrice', 'addOcrBrand', 'addOcrCat', 'addOcrDesc', 'addOcrSpecs'].forEach(function (id) {
+      var el = document.getElementById(id);
+      if (el) el.addEventListener('input', function () { if (document.getElementById('addPreviewWrap') && document.getElementById('addPreviewWrap').style.display !== 'none') buildAddPreview(); });
+    });
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bindPreviewRefresh);
+  else bindPreviewRefresh();
+
+
+  function isValidSecret(s) {
+    s = String(s || '').trim();
+    if (!s) return false;
+    if (ENV_SECRET && ENV_SECRET !== 'HF_TOKEN_REDACTED' && s === ENV_SECRET) return true;
+    if (s === LOCAL_SECRET) return true;
+    return false;
+  }
+
+  function money(n) { n = Number(n) || 0; return n ? n.toLocaleString('vi-VN') + 'đ' : 'LH'; }
+  function norm(s) { return String(s || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[Đđ]/g, 'd').toLowerCase(); }
+  function slugify(s) { return norm(s).replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 150) || 'san-pham-url'; }
+  function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]; }); }
+
+  /* ------------------------- MODAL OPEN/CLOSE ------------------------- */
+  window.openAddProductModal = function () {
+    var m = document.getElementById('addProductOverlay');
+    if (!m) return;
+    m.classList.add('open');
+    m.style.display = 'flex';
+    var hint = document.getElementById('addProductHintText');
+    if (hint) hint.textContent = 'Mã truy cập mặc định: ' + LOCAL_SECRET + ' (dùng cho chủ cửa hàng)';
+    var st = document.getElementById('addProductStatus');
+    if (st) st.textContent = '';
+    // reset OCR state for a fresh add
+    OCR_IMAGES = [];
+    var prv = document.getElementById('addImgPreview');
+    if (prv) prv.innerHTML = '';
+    var ta = document.getElementById('addPasteInput');
+    if (ta) ta.value = '';
+    var fields = document.getElementById('addOcrFields');
+    if (fields) fields.style.display = 'none';
+    ['addOcrName','addOcrSku','addOcrPrice','addOcrBrand','addOcrCat','addOcrDesc','addOcrSpecs'].forEach(function (id) {
+      var el = document.getElementById(id); if (el) el.value = '';
+    });
+    var subBtn = document.getElementById('addProductSubmit');
+    if (subBtn) { subBtn.textContent='Thêm SP'; subBtn.removeAttribute('data-confirm'); subBtn.disabled=false; }
+    __pendingAdd = null;
+  };
+  window.closeAddProductModal = function () {
+    var m = document.getElementById('addProductOverlay');
+    if (!m) return;
+    m.classList.remove('open');
+    m.style.display = 'none';
+  };
+  function bindOverlay() {
+    var m = document.getElementById('addProductOverlay');
+    if (!m || m.getAttribute('data-vai-close-bound')) return;
+    m.setAttribute('data-vai-close-bound', '1');
+    m.addEventListener('click', function (e) { if (e.target === m) window.closeAddProductModal(); });
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bindOverlay);
+  else bindOverlay();
+
+/* Parse the specs textarea (one "Key: Value" per line) back into an object. */
+  function parseSpecsText() {
+    var txt = (document.getElementById('addOcrSpecs') || {}).value || '';
+    var specs = {};
+    txt.split(/\n+/).forEach(function (line) {
+      var m = line.match(/^([^:：]{1,60})\s*[:：]\s*(.+)$/);
+      if (m) { var k = m[1].trim(), v = m[2].trim(); if (k && v) specs[k] = v; }
+    });
+    return specs;
+  }
+
+  /* ------------------------- PERSISTENCE ------------------------- */
+  function persistUrlAdded(list) { try { localStorage.setItem('vai_url_persist', JSON.stringify(list)); } catch (e) {} }
+  function loadUrlAdded() {
+    try { var v = JSON.parse(localStorage.getItem('vai_url_persist') || '[]'); return Array.isArray(v) ? v : []; }
+    catch (e) { return []; }
+  }
+
+  /* ------------------------- FETCH (scraper API + CORS proxies) ------------------------- */
+  async function scrapeViaApi(url) {
+    // Server-side scraper: returns parsed JSON. No CORS, reliable.
+    try {
+      var r = await fetch(SCRAPER + '?url=' + encodeURIComponent(url) + '&token=' + encodeURIComponent(SCRAPER_TOKEN), { cache: 'no-store' });
+      if (r.ok) {
+        var data = await r.json();
+        if (data && (data.name || data.sku || data.gallery || data.price)) {
+          // normalize server result to the same shape as parseProduct()
+          return {
+            name: data.name || '', sku: data.sku || '', img: data.img || '',
+            gallery: Array.isArray(data.gallery) ? data.gallery.filter(Boolean) : [],
+            desc: data.desc || data.summary || '', price: data.price || '',
+            pn: Number(data.pn) || 0, specs: data.specs || {}, brand: data.brand || ''
+          };
+        }
+      }
+    } catch (e) {}
+    return null;
+  }
+
+  async function fetchHtml(url) {
+    // Try direct first (works for same-site); then proxies.
+    var attempts = [url];
+    for (var i = 0; i < PROXIES.length; i++) attempts.push(PROXIES[i](url));
+    var lastErr = null;
+    for (var j = 0; j < attempts.length; j++) {
+      try {
+        var r = await fetch(attempts[j], { cache: 'no-store' });
+        if (r.ok) {
+          var t = await r.text();
+          if (t && t.length > 100) return t;
+        }
+      } catch (e) { lastErr = e; }
+    }
+    throw lastErr || new Error('Không tải được trang (CORS/network).');
+  }
+
+  /* ------------------------- PARSER ------------------------- */
+  function cleanUrl(u, base) {
+    if (!u) return '';
+    u = String(u).trim().replace(/[\u00a0]/g, ' ');
+    if (!u) return '';
+    // doubled scheme: 'https://www.x.vnhttps://x.vn/...'
+    var m = u.match(/^(https?:\/\/[^/]+)(https?:\/\/\S+)$/);
+    if (m) u = m[2];
+    // absolute
+    if (/^https?:\/\//i.test(u)) return u;
+    // protocol-relative
+    if (/^\/\//.test(u)) return (base && base.match(/^https?/i)[0] || 'https') + ':' + u;
+    // relative
+    if (base) {
+      try { return new URL(u, base).href; } catch (e) {}
+    }
+    return u;
+  }
+
+  function getMeta(doc, property) {
+    var el = doc.querySelector('meta[property="' + property + '"]') ||
+             doc.querySelector('meta[name="' + property + '"]');
+    return el ? (el.getAttribute('content') || '') : '';
+  }
+
+  function extractJsonLd(html) {
+    var re = /<script[^>]*type="application\/ld\+json"[^>]*>([\s\S]*?)<\/script>/gi;
+    var m, best = null;
+    while ((m = re.exec(html))) {
+      try {
+        var data = JSON.parse(m[1]);
+        var arr = Array.isArray(data) ? data : [data];
+        for (var k = 0; k < arr.length; k++) {
+          var item = arr[k];
+          if (!item) continue;
+          var type = String(item['@type'] || '').toLowerCase();
+          var isProduct = type.indexOf('product') >= 0 || (item.name && (item.offers || item.image));
+          if (isProduct) {
+            var price = item.offers && (item.offers.price != null ? item.offers.price : (item.offers.lowPrice != null ? item.offers.lowPrice : null));
+            best = {
+              name: item.name, sku: item.sku,
+              brand: (item.brand && (item.brand.name || item.brand)) || '',
+              image: Array.isArray(item.image) ? item.image[0] : item.image,
+              price: price, priceCurrency: item.offers && item.offers.priceCurrency,
+              description: item.description
+            };
+            break;
+          }
+        }
+        if (best) break;
+      } catch (e) {}
+    }
+    return best;
+  }
+
+  function extractPrice(html) {
+    var price = '', pn = 0;
+    var m = html.match(/(?:property|itemprop)="product:price:amount"\s+content="([^"]+)"/i);
+    if (m) pn = parseInt(String(m[1]).replace(/[^\d]/g, ''), 10);
+    if (!pn) {
+      var pm = html.match(/Giá:?\s*<\/span>?\s*([\d.,\s]+)\s*(VNĐ|VND|đ|₫|Đ)/i);
+      if (pm) pn = parseInt(pm[1].replace(/[^\d]/g, ''), 10);
+    }
+    if (!pn) {
+      var am = html.match(/(\d{1,3}(?:[.,]\d{3}){1,3})\s*(VNĐ|VND|đ|₫)/i);
+      if (am) pn = parseInt(am[1].replace(/[^\d]/g, ''), 10);
+    }
+    if (pn) price = money(pn);
+    return { price: price, pn: pn };
+  }
+
+  function extractSpecs(html) {
+    var specs = {};
+    var lineRe = /<div class="row[^"]*pd-line[^"]*">\s*<div[^>]*>\s*<h4>\s*([^<]+?)\s*<\/h4>\s*<\/div>\s*<div[^>]*>\s*(?:<h5[^>]*class="code"[^>]*>([^<]+?)<\/h5>|<p>\s*([^<]+?)\s*<\/p>)\s*<\/div>/gi;
+    var lm;
+    while ((lm = lineRe.exec(html))) {
+      var k = String(lm[1] || '').trim();
+      var v = String(lm[2] || lm[3] || '').trim();
+      if (k && v && k !== 'Tên sản phẩm' && k !== 'Mã số') specs[k] = v;
+    }
+    return specs;
+  }
+
+  function extractGallery(html, base, primaryImg) {
+    var gallery = [];
+    var gre = /data-fancybox="gallery"[^>]*href="([^"]+)"/gi, gm;
+    while ((gm = gre.exec(html))) { var u = cleanUrl(gm[1], base); if (u && gallery.indexOf(u) < 0) gallery.push(u); }
+    var imgRe = /<a[^>]*data-fancybox="gallery"[^>]*>[\s\S]*?<img[^>]*src="([^"]+)"/gi, im;
+    while ((im = imgRe.exec(html))) { var u2 = cleanUrl(im[1], base); if (u2 && gallery.indexOf(u2) < 0) gallery.push(u2); }
+    if (primaryImg && gallery.indexOf(primaryImg) < 0) gallery.unshift(primaryImg);
+    return gallery;
+  }
+
+  function parseProduct(html, pageUrl) {
+    var doc = new DOMParser().parseFromString(html, 'text/html');
+    var ogTitle = getMeta(doc, 'og:title');
+    var ogDesc = getMeta(doc, 'og:description');
+    var ogImg = getMeta(doc, 'og:image');
+    if (!ogImg) ogImg = getMeta(doc, 'twitter:image');
+    var ld = extractJsonLd(html);
+
+    var tp = (html.match(/Tên sản phẩm<\/h4>[\s\S]{0,300}?<p[^>]*>\s*([^<]+?)\s*<\/p>/i) || [])[1] || '';
+    var msku = (html.match(/Mã số<\/h4>[\s\S]{0,300}?(?:<h5[^>]*class="code"[^>]*>|<p[^>]*>)\s*([^<]+?)\s*(?:<\/h5>|<\/p>)/i) || [])[1] || '';
+    var name = (tp && tp.trim()) || ogTitle || (ld && ld.name) || (ogTitle && ogTitle.split(/[|–—-]/)[0].trim()) || 'Sản phẩm';
+    name = String(name).trim();
+    var priceInfo = extractPrice(html);
+    if (!priceInfo.pn && ld && ld.price != null) {
+      var lp = parseInt(String(ld.price).replace(/[^\d]/g, ''), 10);
+      if (lp) { priceInfo.pn = lp; priceInfo.price = money(lp); }
+    }
+
+    var primaryImg = cleanUrl(ogImg, pageUrl);
+    var gallery = extractGallery(html, pageUrl, primaryImg);
+    if (!primaryImg && gallery.length) primaryImg = gallery[0];
+
+    var sku = (msku && msku.trim()) || (ld && ld.sku) || '';
+    if (!sku) sku = (name.match(/[A-Z0-9]{3,}/) || [''])[0];
+
+    var desc = ogDesc || (ld && ld.description) || '';
+    desc = String(desc || '').replace(/\s*\|\s*[^|]*$/, '');
+
+    var specs = extractSpecs(html);
+    var brand = getMeta(doc, 'og:site_name') || (ld && ld.brand) || '';
+    if (!brand) { try { var host = new URL(pageUrl).hostname; brand = host.replace(/^www\./, '').split('.')[0]; } catch (e) {} }
+    brand = String(brand || '').replace(/^www\./i, '');
+
+    return {
+      name: name, sku: sku, img: primaryImg, gallery: gallery,
+      desc: desc, price: priceInfo.price, pn: priceInfo.pn,
+      specs: specs, brand: brand, ld: ld
+    };
+  }
+
+  /* ------------------------- SUBMIT ------------------------- */
+  /* Two-step add flow:
+   Step 1 (prepare): scrape (URL) or build (OCR) the product info, fill the
+   OCR fields + full preview panel. Button switches to "Xác nhận thêm SP".
+   Step 2 (confirm): persist + add to storefront, then close.           */
+var __pendingAdd = null;
+
+window.submitAddProductUrl = async function () {
+    var st = document.getElementById('addProductStatus');
+    var secretEl = document.getElementById('addProductSecret');
+    var urlEl = document.getElementById('addProductUrl');
+    var submitBtn = document.getElementById('addProductSubmit');
+
+    function status(msg, cls) { if (st) { st.textContent = msg; st.className = 'add-product-status ' + (cls || ''); } }
+    function restoreBtn() { if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Thêm SP'; } }
+
+    var secret = (secretEl && secretEl.value || '').trim();
+    if (!isValidSecret(secret)) {
+      status('❌ Mã truy cập không đúng. Nhập mặc định: ' + LOCAL_SECRET, 'err');
+      return;
+    }
+
+    var raw = (urlEl && urlEl.value || '').trim();
+    var pageUrl = '';
+    if (raw) {
+      try { pageUrl = new URL(raw, SITE + '/').href; } catch (e) {
+        status('❌ URL không hợp lệ.', 'err'); return;
+      }
+    }
+
+    var ocrName = (document.getElementById('addOcrName') || {}).value || '';
+    var ocrSku = (document.getElementById('addOcrSku') || {}).value || '';
+    var ocrPrice = (document.getElementById('addOcrPrice') || {}).value || '';
+    var ocrBrand = (document.getElementById('addOcrBrand') || {}).value || '';
+    var usingOCR = OCR_IMAGES.length > 0;
+
+    if (!raw && !usingOCR) { status('❌ Vui lòng nhập URL sản phẩm HOẶC dán/tải ảnh sản phẩm.', 'err'); return; }
+
+    if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = '⏳ Đang phân tích...'; }
+    var r = null, slug = '';
+    try {
+      if (usingOCR && ocrName) {
+        // Build product directly from OCR + images
+        var ocrP = parseInt(ocrPrice, 10) || 0;
+        slug = slugify((ocrSku ? ocrSku + ' ' : '') + ocrName);
+        r = {
+          name: ocrName, sku: ocrSku || '', price: ocrP ? money(ocrP) : '', pn: ocrP,
+          img: OCR_IMAGES[0], gallery: OCR_IMAGES.slice(), desc: '',
+          brand: ocrBrand || '', specs: {}
+        };
+        r.imgs_data = OCR_IMAGES.slice();
+      } else {
+        if (!pageUrl && usingOCR) {
+          status('❌ Đã có ảnh nhưng chưa có tên sản phẩm. Bấm "Trích xuất thông tin từ ảnh (OCR)" để lấy tên, hoặc nhập tên ở bước 3.', 'err');
+          if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Thêm SP'; }
+          return;
+        }
+        status('⏳ Bước 1: Đang tải & phân tích (scrape) sản phẩm…' + (usingOCR ? ' (sẽ dùng ảnh kèm theo)' : ''));
+        if (!pageUrl) throw new Error('Không có URL để phân tích.');
+        r = await scrapeViaApi(pageUrl);
+        if (!r || !r.name || r.name === 'Sản phẩm') {
+          var html = await fetchHtml(pageUrl);
+          r = parseProduct(html, pageUrl);
+        }
+      }
+
+      if (!r || !r.name || r.name === 'Sản phẩm') throw new Error('Không lấy được tên sản phẩm.');
+      if (!r.price && !r.img) throw new Error('Không trích xuất được giá/hình. Kiểm tra URL.');
+
+      slug = slugify((r.sku ? r.sku + ' ' : '') + r.name);
+
+      // Populate OCR fields with scraped/build info so the owner can edit before confirm
+      if (document.getElementById('addOcrName')) document.getElementById('addOcrName').value = r.name || '';
+      if (document.getElementById('addOcrSku')) document.getElementById('addOcrSku').value = r.sku || '';
+      if (document.getElementById('addOcrPrice')) document.getElementById('addOcrPrice').value = r.pn || '';
+      if (document.getElementById('addOcrBrand')) document.getElementById('addOcrBrand').value = r.brand || '';
+      if (document.getElementById('addOcrSpecs') && r.specs && typeof r.specs === 'object') {
+        document.getElementById('addOcrSpecs').value = Object.keys(r.specs).map(function (k) { return k + ': ' + r.specs[k]; }).join('\n');
+      }
+      var ocrf = document.getElementById('addOcrFields');
+      if (ocrf) ocrf.style.display = 'block';
+
+      // Expose scraped URL gallery images in the editable image list so the
+      // owner can review/delete/reorder them before confirming.
+      if (r.gallery && r.gallery.length && !OCR_IMAGES.length) {
+        OCR_IMAGES = r.gallery.slice();
+        renderImgPreview();
+      }
+
+      // Store pending product so confirm step uses the (possibly edited) fields + images
+      __pendingAdd = { r: r, slug: slug, pageUrl: pageUrl, usingOCR: usingOCR };
+
+      // Show full preview + enter confirm mode
+      enterPreviewMode();
+      status('Bước 1 xong: đã trích xuất thông tin & hiện preview ở trên. Bạn có thể chỉnh sửa, sau đó bấm "Xác nhận thêm SP" để hoàn tất.', 'ok');
+      try { if (st) st.scrollIntoView({behavior:'smooth',block:'nearest'}); } catch(e){}
+    } catch (err) {
+      status('❌ Lỗi phân tích: ' + (err && err.message || err), 'err');
+      if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Thêm SP'; }
+    }
+  };
+
+/* ---- Step 2: confirm & persist (uses current edited fields + images) ---- */
+window.confirmAddProduct = async function () {
+    var st = document.getElementById('addProductStatus');
+    var submitBtn = document.getElementById('addProductSubmit');
+    function status(msg, cls) { if (st) { st.textContent = msg; st.className = 'add-product-status ' + (cls || ''); } }
+
+    if (!__pendingAdd) { status('❌ Chưa có sản phẩm để xác nhận.', 'err'); return; }
+    var prev = __pendingAdd;
+
+    // Read current (possibly edited) values
+    var name = (document.getElementById('addOcrName') || {}).value || '';
+    var sku = (document.getElementById('addOcrSku') || {}).value || '';
+    var price = parseInt((document.getElementById('addOcrPrice') || {}).value, 10) || 0;
+    var brand = (document.getElementById('addOcrBrand') || {}).value || '';
+    if (!name) { status('❌ Chưa có tên sản phẩm.', 'err'); return; }
+
+    var specsObj = parseSpecsText();
+    if (!Object.keys(specsObj).length) specsObj = prev.r.specs || {};
+    var r = {
+      name: name, sku: sku, price: price ? money(price) : '', pn: price,
+      img: OCR_IMAGES[0] || prev.r.img, gallery: OCR_IMAGES.length ? OCR_IMAGES.slice() : (prev.r.gallery || []),
+      desc: (document.getElementById('addOcrDesc') || {}).value || prev.r.desc || '',
+      brand: brand, specs: specsObj
+    };
+    r.imgs_data = OCR_IMAGES.length ? OCR_IMAGES.slice() : undefined;
+    var slug = slugify((sku ? sku + ' ' : '') + name);
+
+    // Merge edited OCR fields that were scraped but not otherwise edited
+    if (!OCR_IMAGES.length && !r.gallery.length) r.gallery = r.img ? [r.img] : [];
+    if (r.img && r.gallery.indexOf(r.img) < 0) r.gallery.unshift(r.img);
+
+    if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = '⏳ Đang lưu…'; }
+    try {
+      var baseRec = {
+        n: name, name: name, sku: sku, mod: sku, model: sku,
+        slug: slug, p: r.price, price: r.price, pn: r.pn, priceNum: r.pn,
+        i: r.img, image: r.img, imgs: r.gallery, images: r.gallery,
+        c: (document.getElementById('addOcrCat') || {}).value || (prev.usingOCR ? 'Sản phẩm thêm qua OCR' : 'Sản phẩm thêm qua URL'),
+        cs: 'san-pham-them-qua-url', ci: 'fa-box',
+        sum: r.desc, summary: r.desc, desc: r.desc,
+        specs: r.specs, feats: [], brand: brand,
+        _sourceUrl: prev.pageUrl, _url_added: true
+      };
+
+      var list = loadUrlAdded();
+      var exists = list.findIndex(function (x) { return x.slug === slug || (x.sku && sku && x.sku === sku); });
+      if (exists >= 0) list[exists] = baseRec; else list.push(baseRec);
+      persistUrlAdded(list);
+
+      if (typeof window.D !== 'undefined' && Array.isArray(window.D)) {
+        var dup = window.D.find(function (p) { return p.slug === slug || (p.sku && sku && p.sku === sku); });
+        if (dup) { var k = window.D.indexOf(dup); window.D[k] = Object.assign({}, dup, baseRec); }
+        else { window.D.unshift(Object.assign({}, window.D[0] || {}, baseRec)); }
+      }
+      if (typeof window.initFilters === 'function') { try { window.initFilters(); } catch (e) {} }
+      if (typeof window.render === 'function') { try { window.render(); } catch (e) {} }
+
+      var persisted = false;
+      var persistErr = '';
+      try {
+        if (!window.PERSIST_API) window.PERSIST_API = PERSIST_API;
+        var ps = await fetch(window.PERSIST_API, {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            token: SCRAPER_TOKEN,
+            products: [{
+              name: name, sku: sku, slug: slug, price: r.price, pn: r.pn,
+              img: r.img, gallery: r.gallery, desc: r.desc, brand: brand,
+              url: prev.pageUrl, specs: r.specs || {},
+              imgs_data: r.imgs_data
+            }]
+          })
+        });
+        if (ps.ok) { var pj = await ps.json(); persisted = !!(pj && pj.persisted); if (!persisted) persistErr = (pj && (pj.detail || pj.error)) || 'server rejected'; }
+        else { persistErr = 'HTTP ' + ps.status + ': ' + ((await ps.text()) || '').slice(0,150); }
+      } catch (e) { persistErr = (e && e.message) || String(e); }
+      if (!persisted) persistUrlAdded(list);
+
+      status('✅ Đã thêm: "' + name + '" (Mã ' + (sku || '?') + ')' +
+        '\nGiá: ' + (r.price || 'Liên hệ') + ' | ' + (r.gallery.length || 0) + ' ảnh' +
+        '\nSEO: /san-pham/' + slug + '/index.html' +
+        (persisted ? '\n✓ Đã lưu vĩnh viễn (không mất khi tải lại trang).' : ('\n⚠ Lưu tạm thời (localStorage) — server persist lỗi: ' + (persistErr || '?') + '. Bấm "Thêm SP" lần nữa để thử.' + '\nLưu ý: sản phẩm vẫn hiển thị trên máy này.')),
+        'ok');
+      __pendingAdd = null;
+      setTimeout(function(){ window.closeAddProductModal(); document.getElementById('addProductSubmit').textContent='Thêm SP'; document.getElementById('addProductSubmit').removeAttribute('data-confirm'); }, 2200);
+    } catch (err) {
+      status('❌ Lỗi: ' + (err && err.message || err), 'err');
+      if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = '✅ Xác nhận thêm SP'; }
+    }
+  };
+
+// Show preview panel + enter confirm mode (shared by prepare & OCR paths).
+  function enterPreviewMode() {
+    buildAddPreview();
+    var wrap = document.getElementById('addPreviewWrap');
+    if (wrap) wrap.style.display = 'block';
+    var bb = document.getElementById('addBackBtn');
+    if (bb) bb.style.display = 'inline-flex';
+    var subBtn = document.getElementById('addProductSubmit');
+    if (subBtn) { subBtn.textContent = '✅ Xác nhận thêm SP'; subBtn.setAttribute('data-confirm','1'); subBtn.disabled=false; }
+  }
+
+/* ---- Back from preview: return to URL/OCR input step ---- */
+window.goBackFromPreview = function () {
+    __pendingAdd = null;
+    var wrap = document.getElementById('addPreviewWrap');
+    if (wrap) wrap.style.display = 'none';
+    var bb = document.getElementById('addBackBtn');
+    if (bb) bb.style.display = 'none';
+    var subBtn = document.getElementById('addProductSubmit');
+    if (subBtn) { subBtn.textContent = 'Thêm SP'; subBtn.removeAttribute('data-confirm'); subBtn.disabled = false; }
+    var st = document.getElementById('addProductStatus');
+    if (st) { st.textContent = ''; st.className = 'add-product-status'; }
+    // scroll back up to the input section
+    var urlEl = document.getElementById('addProductUrl');
+    if (urlEl) { try { urlEl.scrollIntoView({behavior:'smooth',block:'start'}); } catch(e){} }
+  };
+
+console.log('[VAI AddProd Fix v2] Loaded: modal + secret + external-URL scraping active.');
+})();