content_quality_tool/content_quality_tool_public/static/js/attr-extraction.js

// --- Data ---
const mediaUrl = "./../";
const PRODUCT_BASE = [
    { id: 1, item_id: 'SKU001', product_name: "Levi's Jeans", product_long_description: 'Classic blue denim jeans with straight fit.', product_short_description: 'Blue denim jeans.', product_type: 'Clothing', image_path: 'media/products/jeans.jpg', image: 'http://127.0.0.1:8000/media/products/jeans.png' },
    { id: 2, item_id: 'SKU002', product_name: 'Adidas Running Shoes', product_long_description: 'Lightweight running shoes with breathable mesh and cushioned sole.', product_short_description: "Men's running shoes.", product_type: 'Footwear', image_path: 'media/products/shoes.png', image: 'http://127.0.0.1:8000/media/products/shoes.png' },
    { id: 3, item_id: 'SKU003', product_name: 'Nike Sports T-Shirt', product_long_description: 'Moisture-wicking sports tee ideal for training and outdoor activities.', product_short_description: 'Performance t-shirt.', product_type: 'Clothing', image_path: 'media/products/tshirt.png', image: 'http://127.0.0.1:8000/media/products/tshirt.png' },
    { id: 4, item_id: 'SKU004', product_name: 'Puma Hoodie', product_long_description: 'Soft fleece hoodie with kangaroo pocket and adjustable drawstring.', product_short_description: 'Casual hoodie.', product_type: 'Clothing', image_path: 'media/products/hoodie.png', image: 'http://127.0.0.1:8000/media/products/hoodie.png' },
    { id: 5, item_id: 'SKU005', product_name: 'Ray-Ban Sunglasses', product_long_description: 'Classic aviator sunglasses with UV protection lenses.', product_short_description: 'Aviator sunglasses.', product_type: 'Accessories', image_path: 'media/products/sunglasses.png', image: 'http://127.0.0.1:8000/media/products/sunglasses.png' }
];

const FAKE_API_RESPONSE = {
    results: [
    { product_id: 'SKU001', mandatory: { 'Clothing Neck Style': 'V-Neck', 'Clothing Top Style': 'Pullover', 'Condition': 'New', 'T-Shirt Type': 'Classic T-Shirt' }, additional: { 'Material': 'Turkish Pima Cotton', 'Size': 'Large', 'Color': 'Blue', 'Brand': 'Sierra', 'Fabric Type': 'Soft & Breathable', 'Fabric Composition': '95% Turkish Pima cotton', 'Care Instructions': 'Machine Washable', 'Sizes Available': 'S-XL' } },
    { product_id: 'SKU002', mandatory: { 'Shoe Type': 'Running', 'Closure': 'Lace-Up', 'Condition': 'New', 'Gender': 'Men' }, additional: { 'Upper Material': 'Engineered Mesh', 'Midsole': 'EVA Foam', 'Outsole': 'Rubber', 'Color': 'Black/White', 'Brand': 'Adidas', 'Size': 'UK 9', 'Care Instructions': 'Surface Clean' } },
    { product_id: 'SKU003', mandatory: { 'Clothing Neck Style': 'Crew Neck', 'Sleeve Length': 'Short Sleeve', 'Condition': 'New', 'T-Shirt Type': 'Performance' }, additional: { 'Material': 'Polyester Blend', 'Color': 'Red', 'Brand': 'Nike', 'Size': 'Medium', 'Fabric Technology': 'Dri-FIT', 'Care Instructions': 'Machine Wash Cold' } },
    { product_id: 'SKU004', mandatory: { 'Clothing Top Style': 'Hoodie', 'Closure': 'Pullover', 'Condition': 'New', 'Fit': 'Relaxed' }, additional: { 'Material': 'Cotton Fleece', 'Color': 'Charcoal', 'Brand': 'Puma', 'Size': 'Large', 'Care Instructions': 'Machine Wash Warm' } },
    { product_id: 'SKU005', mandatory: { 'Accessory Type': 'Sunglasses', 'Frame Style': 'Aviator', 'Condition': 'New', 'Lens Protection': 'UV 400' }, additional: { 'Frame Material': 'Metal', 'Lens Color': 'Green', 'Brand': 'Ray-Ban', 'Size': 'Standard', 'Case Included': 'Yes', 'Care Instructions': 'Clean with microfiber' } }
    ],
    total_products: 5,
    successful: 5,
    failed: 0
};

// --- State ---
let selectedIds = new Set();
const lastSeen = new Map(); // per-product memory for NEW highlighting (product_id -> maps)
let layoutMode = 'cards'; // 'cards' | 'table'

// --- Helpers ---
const $ = (sel) => document.querySelector(sel);
const el = (tag, cls) => { const e = document.createElement(tag); if (cls) e.className = cls; return e; }

function updateSelectionInfo() {
    const pill = $('#selectionInfo');
    const total = PRODUCT_BASE.length;
    const count = selectedIds.size;
    pill.textContent = count === 0 ? 'No products selected' : `${count} of ${total} selected`;
}

function setChecked(id, checked) { if (checked) selectedIds.add(id); else selectedIds.delete(id); updateSelectionInfo(); }

// --- Chips rendering ---
function renderChips(container, obj, memoryMap) {
    container.innerHTML = '';
    let count = 0;
    Object.entries(obj || {}).forEach(([k, v]) => {
    const chip = el('span', 'chip');
    const kEl = el('span', 'k'); kEl.textContent = k + ':';
    const vEl = el('span', 'v'); vEl.textContent = ' ' + String(v);
    chip.appendChild(kEl); chip.appendChild(vEl);
    const was = memoryMap.get(k);
    if (was === undefined || was !== v) chip.classList.add('new');
    container.appendChild(chip);
    memoryMap.set(k, v);
    count++;
    });
    return count;
}

function findApiResultForProduct(p, index, api) { return api.results?.find(r => r.product_id === p.item_id) || api.results?.[index] || null; }

// --- Cards layout ---
function createProductCard(p) {
    const row = el('div', 'product');
    if (selectedIds.has(p.id)) row.classList.add('selected');

    const left = el('div', 'thumb');
    const img = new Image(); img.src = mediaUrl+p.image_path || p.image || '';
     img.alt = `${p.product_name} image`;
    console.log("img",img);
    img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); left.appendChild(fb); };
    left.appendChild(img);

    const mid = el('div', 'meta');
    const name = el('div', 'name'); name.textContent = p.product_name || '—';
    const desc = el('div', 'desc'); desc.textContent = p.product_short_description || '';
    const badges = el('div', 'badges');
    const sku = el('span', 'pill'); sku.textContent = `SKU: ${p.item_id || '—'}`; badges.appendChild(sku);
    const type = el('span', 'pill'); type.textContent = p.product_type || '—'; badges.appendChild(type);
    const long = el('div', 'desc'); long.textContent = p.product_long_description || ''; long.style.marginTop = '4px';
    mid.appendChild(name); mid.appendChild(desc); mid.appendChild(badges); mid.appendChild(long);

    const right = el('label', 'select');
    const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = selectedIds.has(p.id);
    cb.addEventListener('change', () => { setChecked(p.id, cb.checked); row.classList.toggle('selected', cb.checked); });
    const lbl = el('span'); lbl.textContent = 'Select';
    right.appendChild(cb); right.appendChild(lbl);

    // Inline attributes container (rendered on Submit)
    const inline = el('div', 'attr-inline');
    inline.dataset.pid = p.item_id; // use item_id for mapping

    row.addEventListener('click', (e) => { if (e.target.tagName.toLowerCase() !== 'input') { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); } });

    row.appendChild(left); row.appendChild(mid); row.appendChild(right);
    row.appendChild(inline);
    return row;
}

function renderProductsCards() {
    const cards = $('#cardsContainer');
    cards.innerHTML = '';
    PRODUCT_BASE.forEach(p => cards.appendChild(createProductCard(p)));
}

// --- Table layout ---
function createMiniThumb(p) {
    const mt = el('div', 'mini-thumb');
    const img = new Image(); img.src = mediaUrl+p.image_path || p.image || ''; img.alt = `${p.product_name} image`;
    console.log("img",img);
    img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); mt.appendChild(fb); };
    mt.appendChild(img);
    return mt;
}

function renderProductsTable() {
    const wrap = $('#tableContainer');
    wrap.innerHTML = '';
    const table = el('table');
    const thead = el('thead'); const trh = el('tr');
    const headers = ['Select', 'Image', 'Product', 'SKU', 'Type', 'Short Description'];
    headers.forEach(h => { const th = el('th'); th.textContent = h; trh.appendChild(th); });
    thead.appendChild(trh); table.appendChild(thead);
    const tbody = el('tbody');

    PRODUCT_BASE.forEach(p => {
    const tr = el('tr'); tr.id = `row-${p.id}`;
    // Select cell
    const tdSel = el('td', 'select-cell'); const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = selectedIds.has(p.id);
    cb.addEventListener('change', () => { setChecked(p.id, cb.checked); tr.classList.toggle('selected', cb.checked); }); tdSel.appendChild(cb); tr.appendChild(tdSel);
    // Image
    const tdImg = el('td', 'thumb-cell'); tdImg.appendChild(createMiniThumb(p)); tr.appendChild(tdImg);
    // Product name
    const tdName = el('td'); tdName.textContent = p.product_name || '—'; tr.appendChild(tdName);
    // SKU
    const tdSku = el('td'); tdSku.textContent = p.item_id || '—'; tr.appendChild(tdSku);
    // Type
    const tdType = el('td'); const b = el('span', 'badge'); b.textContent = p.product_type || '—'; tdType.appendChild(b); tr.appendChild(tdType);
    // Short description
    const tdDesc = el('td'); tdDesc.textContent = p.product_short_description || ''; tr.appendChild(tdDesc);

    tr.addEventListener('click', (e) => { if (e.target.tagName.toLowerCase() !== 'input') { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); } });
    tbody.appendChild(tr);
    });

    table.appendChild(tbody);
    wrap.appendChild(table);
}

// --- Inline attributes rendering ---
function renderInlineForCards() {
    const api = FAKE_API_RESPONSE;
    // Clear all inline sections first
    document.querySelectorAll('.attr-inline').forEach(div => div.innerHTML = '');

    PRODUCT_BASE.forEach((p, idx) => {
    const inline = document.querySelector(`.attr-inline[data-pid="${p.item_id}"]`);
    if (!inline) return;
    if (!selectedIds.has(p.id)) return; // only show for selected
    const res = findApiResultForProduct(p, idx, api);
    const pid = p.item_id;
    if (!lastSeen.has(pid)) lastSeen.set(pid, { mandatory: new Map(), additional: new Map() });
    const mem = lastSeen.get(pid);

    // Build sections
    const manTitle = el('div', 'section-title'); manTitle.innerHTML = '<strong>Mandatory</strong>';
    const manChips = el('div', 'chips');
    const addTitle = el('div', 'section-title'); addTitle.innerHTML = '<strong>Additional</strong>';
    const addChips = el('div', 'chips');

    const mandCount = renderChips(manChips, res?.mandatory || {}, mem.mandatory);
    const addCount = renderChips(addChips, res?.additional || {}, mem.additional);

    const counts = el('div'); counts.style.display = 'flex'; counts.style.gap = '8px'; counts.style.margin = '8px 0 0';
    const c1 = el('span', 'pill'); c1.textContent = `Mandatory: ${mandCount}`;
    const c2 = el('span', 'pill'); c2.textContent = `Additional: ${addCount}`;
    counts.appendChild(c1); counts.appendChild(c2);

    inline.appendChild(manTitle); inline.appendChild(manChips);
    inline.appendChild(addTitle); inline.appendChild(addChips);
    inline.appendChild(counts);
    });

    // Update summary
    $('#statTotal').textContent = api.total_products ?? 0;
    $('#statOk').textContent = api.successful ?? 0;
    $('#statKo').textContent = api.failed ?? 0;
}

function renderInlineForTable() {
    const api = FAKE_API_RESPONSE;
    const table = $('#tableContainer');
    if (!table) return;
    // Remove existing detail rows
    table.querySelectorAll('tr.detail-row').forEach(r => r.remove());

    PRODUCT_BASE.forEach((p, idx) => {
    if (!selectedIds.has(p.id)) return;
    const res = findApiResultForProduct(p, idx, api);
    const pid = p.item_id;
    if (!lastSeen.has(pid)) lastSeen.set(pid, { mandatory: new Map(), additional: new Map() });
    const mem = lastSeen.get(pid);

    const tbody = table.querySelector('tbody');
    const baseRow = tbody.querySelector(`#row-${p.id}`);
    if (!baseRow) return;

    const detail = el('tr', 'detail-row');
    const td = el('td'); td.colSpan = 6; // number of columns
    const content = el('div', 'detail-content');

    const manTitle = el('div', 'section-title'); manTitle.innerHTML = '<strong>Mandatory</strong>';
    const manChips = el('div', 'chips');
    const addTitle = el('div', 'section-title'); addTitle.innerHTML = '<strong>Additional</strong>';
    const addChips = el('div', 'chips');

    const mandCount = renderChips(manChips, res?.mandatory || {}, mem.mandatory);
    const addCount = renderChips(addChips, res?.additional || {}, mem.additional);

    const counts = el('div'); counts.style.display = 'flex'; counts.style.gap = '8px'; counts.style.margin = '8px 0 0';
    const c1 = el('span', 'pill'); c1.textContent = `Mandatory: ${mandCount}`;
    const c2 = el('span', 'pill'); c2.textContent = `Additional: ${addCount}`;
    counts.appendChild(c1); counts.appendChild(c2);

    content.appendChild(manTitle); content.appendChild(manChips);
    content.appendChild(addTitle); content.appendChild(addChips);
    content.appendChild(counts);
    td.appendChild(content); detail.appendChild(td);

    // insert after base row
    baseRow.insertAdjacentElement('afterend', detail);
    });

    // Update summary
    $('#statTotal').textContent = api.total_products ?? 0;
    $('#statOk').textContent = api.successful ?? 0;
    $('#statKo').textContent = api.failed ?? 0;
}

function renderInlineAttributes() {
    if (layoutMode === 'cards') renderInlineForCards(); else renderInlineForTable();
}

// --- Main rendering ---
function renderProducts() {
    if (layoutMode === 'cards') {
    $('#cardsContainer').style.display = '';
    $('#tableContainer').style.display = 'none';
    renderProductsCards();
    } else {
    $('#cardsContainer').style.display = 'none';
    $('#tableContainer').style.display = '';
    renderProductsTable();
    }
    updateSelectionInfo();
    // If there is a selection, re-render inline attributes (persist across toggle)
    if (selectedIds.size > 0) renderInlineAttributes();
}

// --- Submit & Reset ---
function submitAttributes() {
    if (selectedIds.size === 0) { alert('Please select at least one product.'); return; }
    renderInlineAttributes();
}

function resetAll() {
    selectedIds.clear();
    lastSeen.clear();
    renderProducts();
    // Clear summary
    document.getElementById('statTotal').textContent = '0';
    document.getElementById('statOk').textContent = '0';
    document.getElementById('statKo').textContent = '0';
}

function setLayout(mode) {
    layoutMode = mode;
    const btnCards = document.getElementById('btnCards');
    const btnTable = document.getElementById('btnTable');
    if (mode === 'cards') { btnCards.classList.add('active'); btnCards.setAttribute('aria-selected', 'true'); btnTable.classList.remove('active'); btnTable.setAttribute('aria-selected', 'false'); }
    else { btnTable.classList.add('active'); btnTable.setAttribute('aria-selected', 'true'); btnCards.classList.remove('active'); btnCards.setAttribute('aria-selected', 'false'); }
    renderProducts();
}

// --- Wire up ---
document.addEventListener('DOMContentLoaded', () => {
    renderProducts();
    document.getElementById('btnSubmit').addEventListener('click', submitAttributes);
    document.getElementById('btnReset').addEventListener('click', resetAll);
    document.getElementById('btnSelectAll').addEventListener('click', () => {
    if (selectedIds.size === PRODUCT_BASE.length) { selectedIds.clear(); } else { selectedIds = new Set(PRODUCT_BASE.map(p => p.id)); }
    renderProducts();
    });
    document.getElementById('btnCards').addEventListener('click', () => setLayout('cards'));
    document.getElementById('btnTable').addEventListener('click', () => setLayout('table'));
});