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

jQuery.noConflict(); // Release $ to other libraries
console.log(typeof jQuery);
// $ = jQuery;

// --- Config ---
const UPLOAD_API_URL = '/attr/products/upload-excel/'; // TODO: set to your upload endpoint
const ACCEPT_TYPES = '*'; // e.g., 'image/*,.csv,.xlsx'

var 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' }
];
// --- Data ---
const mediaUrl = "./../";

document.addEventListener('DOMContentLoaded', () => {
    jQuery('#full-page-loader').show();  
    fetch('/attr/products', {
        method: 'GET', // or 'POST' if your API expects POST
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || ''
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log("data",data);
        // --- Wire up ---
        PRODUCT_BASE = data;
        PRODUCT_BASE = PRODUCT_BASE.map((d)=>{return {...d,mandatoryAttributes:["color","size"]}});
        console.log("PRODUCT_BASE",PRODUCT_BASE);
        if(PRODUCT_BASE.length > 0){
            $('#paginationBar').style.display = 'block';
        }
        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();
        // });

        // Replace your existing Select All listener with this:
          document.getElementById('btnSelectAll').addEventListener('click', () => {
            // Use the container for the active layout
            const container = (layoutMode === 'cards')
              ? document.getElementById('cardsContainer')
              : document.getElementById('tableContainer');

            // Collect all visible checkboxes
            const boxes = Array.from(container.querySelectorAll('input[type="checkbox"]'));

            // If every visible checkbox is already checked, we'll deselect; otherwise select all
            const allChecked = boxes.length > 0 && boxes.every(cb => cb.checked);

            boxes.forEach(cb => {
              const target = !allChecked; // true to select, false to deselect
              if (cb.checked !== target) {
                cb.checked = target;
                // Trigger your existing "change" handler so selectedIds & row .selected class update
                cb.dispatchEvent(new Event('change', { bubbles: true }));
              }
            });

            // Update the selection pill text (doesn't re-render the list)
            updateSelectionInfo();
          });
        document.getElementById('btnCards').addEventListener('click', () => setLayout('cards'));
        document.getElementById('btnTable').addEventListener('click', () => setLayout('table'));
        jQuery('#full-page-loader').hide();
        // if (data.success) {
        // }
    });
});

var 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();
// NEW: Array of objects { item_id: string, mandatory_attrs: { [attribute_name]: string[] } }
let selectedProductsWithAttributes = [];
let selectedAttributes = new Array();
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;
    const count = selectedProductsWithAttributes.length;
    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(); }
// function setCheckedAttributes(id,attribute, checked) { if (checked) selectedAttributes.add({id: [attribute]}); else selectedIds.delete({id:[attribute]}); 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');
    // Check selection using the new helper
    if (isProductSelected(p.item_id)) row.classList.add('selected');
    // if (selectedIds.has(p.item_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); };
    img.onerror = () => { img.src = mediaUrl+"media/images/no-product.png" };
    left.appendChild(img);

    const mid = el('div', 'meta');
    const name = el('div', 'name'); name.textContent = p.product_name || '—';
    const desc = el('div', 'desc'); desc.innerHTML = 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.innerHTML = p.product_long_description || ''; long.style.marginTop = '4px';
    mid.appendChild(name); mid.appendChild(desc); mid.appendChild(badges); mid.appendChild(long);


    // const rightAttribute = el('label', 'select');

    // // Main checkbox: "Select"
    // const cb_attribute = document.createElement('input');
    // cb_attribute.type = 'checkbox';
    // cb_attribute.checked = selectedIds.has(p.item_id);
    // cb_attribute.addEventListener('change', () => {
    //   setChecked(p.item_id, cb_attribute.checked);
    //   row.classList.toggle('selected', cb_attribute.checked);
    // });
    // const lbl_attribute = el('span');
    // lbl_attribute.textContent = 'Select';

    // rightAttribute.appendChild(cb_attribute);
    // rightAttribute.appendChild(lbl_attribute);

    // // --- New checkbox for mandatory attributes ---
    // if (p.mandatoryAttributes && p.mandatoryAttributes.length > 0) {
    //   const attrLabel = el('label', 'select-attr');
    //   const attrCb = document.createElement('input');
    //   attrCb.type = 'checkbox';
    //   attrCb.checked = false;  // Not selected by default

    //   attrCb.addEventListener('change', () => {
    //     if (attrCb.checked) {
    //       // Select the main checkbox
    //       cb_attribute.checked = true;
    //       setChecked(p.item_id, true);
    //       row.classList.add('selected');
    //     } else {
    //       // Optionally uncheck main if attrCb is unchecked
    //       // (optional logic)
    //     }
    //   });

    //   const attrSpan = el('span');
    //   attrSpan.textContent = `Select mandatory (${p.mandatoryAttributes.join(', ')})`;

    //   attrLabel.appendChild(attrCb);
    //   attrLabel.appendChild(attrSpan);

    //   rightAttribute.appendChild(attrLabel);
    // }
     
    // const attri = el('p',"pSelectRight");
    // attri.innerHTML = "Select Attribute : ";
    // var secondRight = el('label', 'selectRight');
    // if (p.mandatoryAttributes && p.mandatoryAttributes.length > 0) {
      
    //   p.mandatoryAttributes.forEach((data,index)=>{  
             
    //     const cbSeond = document.createElement('input'); 
    //     cbSeond.type = 'checkbox'; 
    //     cbSeond.checked = selectedIds.has(p.item_id);
    //     cbSeond.addEventListener('change', () => { setChecked(p.item_id, cbSeond.checked); 
    //     row.classList.toggle('selected', cbSeond.checked); });
        
    //     const lblsecond = el('span');
    //     lblsecond.className = "attributeName"; 
    //     lblsecond.textContent = data ;
    //     secondRight.appendChild(cbSeond); secondRight.appendChild(lblsecond);
    //   })

    // }

    
    // const right = el('label', 'select');
    // const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = selectedIds.has(p.item_id);
    // cb.addEventListener('change', () => { setChecked(p.item_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')); } });


    // --- Main Select Checkbox (Product Selection) ---
    const right = el('label', 'select');
    const cb = document.createElement('input'); cb.type = 'checkbox';
    cb.checked = isProductSelected(p.item_id);
    const lbl = el('span'); lbl.textContent = 'Select Product';
    right.appendChild(cb); right.appendChild(lbl);

    // --- Dynamic Attribute Selects ---
    const attrContainer = el('div', 'attribute-selectors');

    // Find all mandatory and non-mandatory attributes for this product
    const mandatoryAttributes = p.product_type_details?.filter(a => a.is_mandatory === 'Yes') || [];
    const optionalAttributes = p.product_type_details?.filter(a => a.is_mandatory !== 'Yes') || [];

    // Helper to update the main state object with all current selections
    const updateProductState = () => {
        const isSelected = cb.checked;
        const currentSelections = {};

        // Only process attributes if the main product is selected
        if (isSelected) {
            // Get selections from the dynamic selects
            attrContainer.querySelectorAll('select').forEach(select => {
                const attrName = select.dataset.attrName;
                const selectedOptions = Array.from(select.options)
                    .filter(option => option.selected)
                    .map(option => option.value);

                if (selectedOptions.length > 0) {
                    currentSelections[attrName] = selectedOptions;
                }
            });
        }
        
        // Use toggleProductSelection to update the state
        toggleProductSelection(p.item_id, isSelected, currentSelections);
        row.classList.toggle('selected', isSelected);
    };

    // Attach listener to main checkbox
    cb.addEventListener('change', () => {
        // Toggle the visibility/enabled state of the attribute selects
        attrContainer.classList.toggle('disabled', !cb.checked);
        updateProductState();
    });
    
    // --- Render Mandatory Attributes ---
    if (mandatoryAttributes.length > 0) {
        const manTitle = el('p', "pSelectRight mandatory-title");
        manTitle.innerHTML = "Mandatory Attributes:";
        attrContainer.appendChild(manTitle);

        mandatoryAttributes.forEach(attr => {
            const label = el('label', 'attribute-label');
            label.textContent = `${attr.attribute_name} (${attr.is_mandatory === 'Yes' ? 'Mandatory' : 'Optional'}):`;
            
            const select = el('select', 'attribute-select');
            select.multiple = true;
            select.dataset.attrName = attr.attribute_name;

            // Get previously selected values or default to all
            const initialSelected = getSelectedAttributes(p.item_id)[attr.attribute_name] || attr.possible_values;

            attr.possible_values.forEach(value => {
                const option = document.createElement('option');
                option.value = value;
                option.textContent = value;
                // Check if this option should be pre-selected
                option.selected = initialSelected.includes(value); 
                select.appendChild(option);
            });

            select.addEventListener('change', updateProductState); // Update state when a selection changes
            
            label.appendChild(select);
            attrContainer.appendChild(label);
        });
    }

    // --- Render Optional Attributes (Same structure, different title) ---
    if (optionalAttributes.length > 0) {
        const optTitle = el('p', "pSelectRight optional-title");
        optTitle.innerHTML = "Optional Attributes:";
        attrContainer.appendChild(optTitle);

        optionalAttributes.forEach(attr => {
            const label = el('label', 'attribute-label');
            label.textContent = `${attr.attribute_name} (Optional):`;
            
            const select = el('select', 'attribute-select');
            select.multiple = true;
            select.dataset.attrName = attr.attribute_name;

            // Get previously selected values or default to all
            const initialSelected = getSelectedAttributes(p.item_id)[attr.attribute_name] || attr.possible_values;

            attr.possible_values.forEach(value => {
                const option = document.createElement('option');
                option.value = value;
                option.textContent = value;
                // Check if this option should be pre-selected
                option.selected = initialSelected.includes(value);
                select.appendChild(option);
            });

            select.addEventListener('change', updateProductState);
            
            label.appendChild(select);
            attrContainer.appendChild(label);
        });
    }

    // Initialize attribute selectors' enabled state and state data
    attrContainer.classList.toggle('disabled', !cb.checked);
    // Initial state setup if the product was already selected (e.g., after a re-render)
    if (cb.checked) {
        // This is important to set the initial state correctly on load
        // We defer this until all selects are mounted, or ensure the initial state is correct.
        // For simplicity, we assume the data from PRODUCT_BASE already includes selected attributes if a selection exists
        // (which it won't in this case, so they default to all/empty)
    }

    const inline = el('div', 'attr-inline');
    inline.dataset.pid = p.item_id; // use item_id for mapping

    row.addEventListener('click', (e) => {
        // Only toggle main checkbox if an attribute select or its option wasn't clicked
        if (e.target.tagName.toLowerCase() !== 'input' && e.target.tagName.toLowerCase() !== 'select' && e.target.tagName.toLowerCase() !== 'option') {
            cb.checked = !cb.checked;
            cb.dispatchEvent(new Event('change'));
        }
    });

    row.appendChild(left); row.appendChild(mid);
    
    row.appendChild(right);
    // if (p.mandatoryAttributes && p.mandatoryAttributes.length > 0) { 
      // const hr = el('hr');
      // row.appendChild(hr);
      // row.appendChild(attri);
      // row.appendChild(secondRight);
    // }
    row.appendChild(attrContainer); // Append the new attribute selectors container
    row.appendChild(inline);
    
    return row;
}

// function renderProductsCards() {
//     const cards = $('#cardsContainer');
//     cards.innerHTML = '';
//     if(PRODUCT_BASE.length > 0){
//         PRODUCT_BASE.forEach(p => cards.appendChild(createProductCard(p)));
//     }else{
//         cards.innerHTML = "<p>No Products Found.</p>"
//     }
// }


// Cards layout
function renderProductsCards(items = getCurrentSlice()) {
  const cards = document.getElementById('cardsContainer');
  cards.innerHTML = '';
  if(items.length > 0){
    items.forEach(p => cards.appendChild(createProductCard(p)));
  }else{
      cards.innerHTML = "<p>No Products Found.</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.src = mediaUrl+"media/images/no-product.png" };
    // 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');
//     if(PRODUCT_BASE.length > 0){
//         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.innerHTML = 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);
//         });
//     }else{
//         const tr = el('tr'); 
//         // tr.id = `row-${p.id}`;
//         const tdName = el('td');
//         tdName.colSpan = 6;
//         tdName.innerHTML = "No Products Found."
//         tr.appendChild(tdName);
//         // tr.colspan = 6;
//         // tr.innerHTML 
//         tbody.appendChild(tr);
//     }

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

// --- Inline attributes rendering ---


// Table layout
function renderProductsTable(items = getCurrentSlice()) {
  const wrap = document.getElementById('tableContainer');
  wrap.innerHTML = '';
  const table = document.createElement('table');
  const thead = document.createElement('thead'); const trh = document.createElement('tr');
  ['Select', 'Image', 'Product', 'SKU', 'Type', 'Short Description'].forEach(h => {
    const th = document.createElement('th'); th.textContent = h; trh.appendChild(th);
  });
  thead.appendChild(trh); table.appendChild(thead);
  const tbody = document.createElement('tbody');
  if(items.length > 0 ){
    items.forEach(p => {
        const tr = document.createElement('tr'); tr.id = `row-${p.id}`;
        const tdSel = document.createElement('td'); tdSel.className = 'select-cell';
        const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = selectedIds.has(p.item_id);
        cb.addEventListener('change', () => { setChecked(p.item_id, cb.checked); tr.classList.toggle('selected', cb.checked); });
        tdSel.appendChild(cb); tr.appendChild(tdSel);

        const tdImg = document.createElement('td'); tdImg.className = 'thumb-cell'; tdImg.appendChild(createMiniThumb(p)); tr.appendChild(tdImg);
        const tdName = document.createElement('td'); tdName.textContent = p.product_name || '—'; tr.appendChild(tdName);
        const tdSku  = document.createElement('td'); tdSku.textContent = p.item_id || '—'; tr.appendChild(tdSku);
        const tdType = document.createElement('td'); const b = document.createElement('span'); b.className = 'badge'; b.textContent = p.product_type || '—'; tdType.appendChild(b); tr.appendChild(tdType);
        const tdDesc = document.createElement('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);
    });
  }else{
    const tr = el('tr'); 
    // tr.id = `row-${p.id}`;
    const tdName = el('td');
    tdName.colSpan = 6;
    tdName.innerHTML = "No Products Found."
    tr.appendChild(tdName);
    // tr.colspan = 6;
    // tr.innerHTML 
    tbody.appendChild(tr);
  }

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


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.item_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;
    $('#api-summary').style.display = 'block';
    
    
}

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.item_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';
    console.log("PRODUCT_BASE",PRODUCT_BASE);
    renderProductsCards();
    } else {
    $('#cardsContainer').style.display = 'none';
    $('#tableContainer').style.display = '';
    renderProductsTable();
    }
    updateSelectionInfo();
    renderPagination();               

    // If there is a selection, re-render inline attributes (persist across toggle)
    if (selectedIds.size > 0) renderInlineAttributes();
}

// --- Submit & Reset ---
function submitAttributes() {
  // Check the length of the new array
    if (selectedProductsWithAttributes.length === 0) { 
        alert('Please select at least one product.'); 
        return; 
    } 
    // if (selectedIds.size === 0) { alert('Please select at least one product.'); return; }
    console.log("selectedIds",selectedIds);
    jQuery('#full-page-loader').show();  
    // let inputArray = {
    //       "product_ids" : [...selectedIds]
    //     }
    const extractAdditional = document.getElementById('extract_additional').checked;
    const processImage = document.getElementById('process_image').checked;

    // Transform the new state array into the required API format
    const itemIds = selectedProductsWithAttributes.map(p => p.item_id);
    
    // Create the mandatory_attrs map: { item_id: { attr_name: [values] } }
    // NOTE: The backend API you showed expects a flattened list of "mandatory_attrs"
    // like: { "color": ["color", "shade"], "size": ["size", "fit"] } 
    // It seems to ignore the selected product-specific values and uses a general list of synonyms.
    // Assuming the request needs a general map of *all unique* selected attributes across all selected products:
    
    let mandatoryAttrsMap = {};
    selectedProductsWithAttributes.forEach(product => {
        // Merge attributes from all selected products
        Object.assign(mandatoryAttrsMap, product.mandatory_attrs);
    });

    // If the API expects the complex, product-specific payload from your Q1 example:
    const payloadForQ1 = selectedProductsWithAttributes.map(p => ({
        item_id: p.item_id,
        mandatory_attrs: p.mandatory_attrs
    }));

    let inputArray = {
              "products": payloadForQ1,
              
              "model": "llama-3.1-8b-instant",
              "extract_additional": extractAdditional,
              "process_image": processImage
            }
    let raw = JSON.stringify(inputArray);
     fetch('/attr/batch-extract/', {
        method: 'POST', // or 'POST' if your API expects POST
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || '',
            'Content-Type': "application/json"
        },
        body: raw
    })
    .then(response => response.json())
    .then(data => {
        console.log("response data",data); 
        FAKE_API_RESPONSE = data;   
        renderInlineAttributes();
        jQuery('#full-page-loader').hide();  
     });
}

function resetAll() {
  selectedProductsWithAttributes = []; // Reset the main array
    // selectedIds.clear();
    lastSeen.clear();
    renderProducts();
    // Clear summary
    document.getElementById('statTotal').textContent = '0';
    document.getElementById('statOk').textContent = '0';
    document.getElementById('statKo').textContent = '0';
    $('#api-summary').style.display = 'none';
}

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();
}


// Upload elements (Bootstrap modal version)
const uploadModalEl = document.getElementById('uploadModal');
const dropzone      = document.getElementById('dropzone');
const uploadFiles   = document.getElementById('uploadFiles');
const fileInfo      = document.getElementById('fileInfo');
const uploadBar     = document.getElementById('uploadBar');
const uploadStatus  = document.getElementById('uploadStatus');

// Reset modal on show
uploadModalEl.addEventListener('shown.bs.modal', () => {
  uploadStatus.textContent = '';
  uploadStatus.className = '';             // clear success/error class
  uploadBar.style.width = '0%';
  uploadBar.setAttribute('aria-valuenow', '0');
  uploadFiles.value = '';
  uploadFiles.setAttribute('accept', ACCEPT_TYPES);
  fileInfo.textContent = 'No files selected.';
});

function describeFiles(list) {
  if (!list || list.length === 0) { fileInfo.textContent = 'No files selected.'; return; }
  const names = Array.from(list).map(f => `${f.name} (${Math.round(f.size/1024)} KB)`);
  fileInfo.textContent = names.join(', ');
}

// Drag & drop feedback
['dragenter','dragover'].forEach(evt => {
  dropzone.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); dropzone.classList.add('drag'); });
});
['dragleave','drop'].forEach(evt => {
  dropzone.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); dropzone.classList.remove('drag'); });
});

// Handle drop
dropzone.addEventListener('drop', e => {
  uploadFiles.files = e.dataTransfer.files;
  describeFiles(uploadFiles.files);
});

// Click to browse
// dropzone.addEventListener('click', () => uploadFiles.click());

// Picker change
uploadFiles.addEventListener('change', () => describeFiles(uploadFiles.files));

function startUpload() {
  const files = uploadFiles.files;
  if (!files || files.length === 0) { alert('Please select file(s) to upload.'); return; }
  jQuery('#full-page-loader').show();
  uploadStatus.textContent = 'Uploading...';
  uploadStatus.className = ''; // neutral
  uploadBar.style.width = '0%';
  uploadBar.setAttribute('aria-valuenow', '0');

  const form = new FormData();
  Array.from(files).forEach(f => form.append('file', f));
  // form.append('uploaded_by', 'Vishal'); // example extra field

  const xhr = new XMLHttpRequest();
  xhr.open('POST', UPLOAD_API_URL, true);
  // If you need auth:
  // xhr.setRequestHeader('Authorization', 'Bearer <token>');

  xhr.upload.onprogress = (e) => {
    if (e.lengthComputable) {
      const pct = Math.round((e.loaded / e.total) * 100);
      uploadBar.style.width = pct + '%';
      uploadBar.setAttribute('aria-valuenow', String(pct));
    }
  };

  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
      const ok = (xhr.status >= 200 && xhr.status < 300);
      try {
        const resp = JSON.parse(xhr.responseText || '{}');
        uploadStatus.textContent = ok ? (resp.message || 'Upload successful') : (resp.error || `Upload failed (${xhr.status})`);
      } catch {
        uploadStatus.textContent = ok ? 'Upload successful' : `Upload failed (${xhr.status})`;
      }
      uploadStatus.className = ok ? 'success' : 'error';
      // Optional: auto-close the modal on success after 1.2s:
      // if (ok) setTimeout(() => bootstrap.Modal.getInstance(uploadModalEl).hide(), 1200);
    }
  };

  xhr.onerror = () => {
    uploadStatus.textContent = 'Network error during upload.';
    uploadStatus.className = 'error';
  };

  xhr.send(form);
  setTimeout(()=>{
      jQuery('#uploadModal').modal('hide');
  },3000)
  jQuery('#full-page-loader').hide();

}

// Wire Start button
document.getElementById('uploadStart').addEventListener('click', startUpload);
// Cancel button already closes the modal via data-bs-dismiss




// --- Pagination state ---
let page = 1;
let pageSize = 5; // default rows per page

function totalPages() {
  return Math.max(1, Math.ceil(PRODUCT_BASE.length / pageSize));
}

function clampPage() {
  page = Math.min(Math.max(1, page), totalPages());
}

function getCurrentSlice() {
  clampPage();
  const start = (page - 1) * pageSize;
  return PRODUCT_BASE.slice(start, start + pageSize);
}

function renderPagination() {
  const bar = document.getElementById('paginationBar');
  if (!bar) return;

  const tp = totalPages();
  clampPage();

  bar.innerHTML = `
    <div class="page-size">
      <label for="pageSizeSelect">Rows per page</label>
      <select id="pageSizeSelect">
        <option value="5"  ${pageSize===5  ? 'selected' : ''}>5</option>
        <option value="10" ${pageSize===10 ? 'selected' : ''}>10</option>
        <option value="20" ${pageSize===20 ? 'selected' : ''}>20</option>
        <option value="50" ${pageSize===50 ? 'selected' : ''}>50</option>
        <option value="all" ${pageSize>=PRODUCT_BASE.length ? 'selected' : ''}>All</option>
      </select>
    </div>

    <div class="pager">
      <button class="pager-btn" id="prevPage" ${page<=1 ? 'disabled' : ''} aria-label="Previous page">‹</button>
      <span class="page-info">Page ${page} of ${tp}</span>
      <button class="pager-btn" id="nextPage" ${page>=tp ? 'disabled' : ''} aria-label="Next page">›</button>
    </div>
  `;

  // wire events
  document.getElementById('prevPage')?.addEventListener('click', () => { if (page > 1) { page--; renderProducts(); } });
  document.getElementById('nextPage')?.addEventListener('click', () => { if (page < tp) { page++; renderProducts(); } });

  const sel = document.getElementById('pageSizeSelect');
  if (sel) {
    sel.addEventListener('change', () => {
      const val = sel.value;
      pageSize = (val === 'all') ? PRODUCT_BASE.length : parseInt(val, 10);
      page = 1;            // reset to first page when size changes
      renderProducts();
    });
  }
}

// Function to add/remove product from the state and manage its attributes
function toggleProductSelection(itemId, isChecked, attributes = {}) {
    const index = selectedProductsWithAttributes.findIndex(p => p.item_id === itemId);

    if (isChecked) {
        // If selecting, ensure the product object exists in the array
        if (index === -1) {
            selectedProductsWithAttributes.push({
                item_id: itemId,
                mandatory_attrs: attributes
            });
        } else {
            // Update attributes if the product is already selected
            selectedProductsWithAttributes[index].mandatory_attrs = attributes;
        }
    } else {
        // If deselecting, remove the product object from the array
        if (index !== -1) {
            selectedProductsWithAttributes.splice(index, 1);
        }
    }
    updateSelectionInfo();
}

// Function to get the current mandatory attributes for a selected item
function getSelectedAttributes(itemId) {
    const productEntry = selectedProductsWithAttributes.find(p => p.item_id === itemId);
    return productEntry ? productEntry.mandatory_attrs : {};
}

// Helper to check if a product is selected
function isProductSelected(itemId) {
    return selectedProductsWithAttributes.some(p => p.item_id === itemId);
}

// Helper to check if a specific attribute/value is selected
function isAttributeValueSelected(itemId, attrName, value) {
    const attrs = getSelectedAttributes(itemId);
    const values = attrs[attrName];
    return values ? values.includes(value) : false; // Default all selected when first loaded
}