content_quality_tool/content_quality_tool_public/static/js/attr-extraction.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);

    // Helper function to create the chip UI for attributes
    function createAttributeChips(p, attr, initialSelected, isMandatory, updateCallback) {
        const wrapper = el('div', 'attribute-chip-group');
        wrapper.dataset.attrName = attr.attribute_name;
        wrapper.innerHTML = `<p class="attribute-header">${attr.attribute_name} (${isMandatory ? 'Mandatory' : 'Optional'}):</p>`;

        const chipContainer = el('div', 'chips-container');

        attr.possible_values.forEach(value => {
            const chip = el('label', 'attribute-chip');
            
            // Checkbox input is hidden, but drives the selection state
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.value = value;
            checkbox.name = `${p.item_id}-${attr.attribute_name}`;
            
            // Set initial state
            checkbox.checked = initialSelected.includes(value); 
            
            // The visual part of the chip
            const span = el('span');
            span.textContent = value;
            
            chip.appendChild(checkbox);
            chip.appendChild(span);
            chipContainer.appendChild(chip);
        });
        
        // Use event delegation on the container for performance
        chipContainer.addEventListener('change', updateCallback);

        wrapper.appendChild(chipContainer);
        return wrapper;
    }

    // --- 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 = {};

        if (isSelected) {
            // Iterate over all attribute groups (Mandatory and Optional)
            attrContainer.querySelectorAll('.attribute-chip-group').forEach(group => {
                const attrName = group.dataset.attrName;
                
                // Collect selected chip values
                const selectedOptions = Array.from(group.querySelectorAll('input[type="checkbox"]:checked'))
                    .map(checkbox => checkbox.value);

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

    // Attach listener to main checkbox
    cb.addEventListener('change', () => {
        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 initialSelected = getSelectedAttributes(p.item_id)[attr.attribute_name] || attr.possible_values;
            const chipGroup = createAttributeChips(p, attr, initialSelected, true, updateProductState);
            attrContainer.appendChild(chipGroup);
        });
    }

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

        optionalAttributes.forEach(attr => {
            const initialSelected = getSelectedAttributes(p.item_id)[attr.attribute_name] || attr.possible_values;
            const chipGroup = createAttributeChips(p, attr, initialSelected, false, updateProductState);
            attrContainer.appendChild(chipGroup);
        });
    }

    // 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.appendChild(left); row.appendChild(mid);
        row.appendChild(attrContainer); // Append the new attribute selectors container
    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(inline);
    
    return row;
}


// 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;
}


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

// NOTE: Ensure getProductStateUpdater and generateAttributeUI functions are defined globally or accessible here.

/**
 * Returns a closure function that updates the global selectedProductsWithAttributes state
 * based on the current selections (chips) found in the DOM for a specific product.
 * This is used for both card and table views.
 * * @param {Object} p - The product object.
 * @param {HTMLElement} cb - The main product selection checkbox element.
 * @param {HTMLElement} tr - The main row/card element (used for toggling 'selected' class).
 * @returns {function} A function to be used as the attribute change handler.
 */
const getProductStateUpdater = (p, cb, tr) => () => {
    const isSelected = cb.checked;
    const currentSelections = {};
    
    // Find the attribute container using its unique ID, which is the same structure 
    // used in both card and table detail views (e.g., 'attr-container-124353498' or just the main card element).
    // For card view, the container is often the attrContainer element itself. 
    // For table view, we use the explicit ID.
    const attrContainer = document.getElementById(`attr-container-${p.item_id}`) || tr.querySelector('.attribute-selectors');

    if (isSelected && attrContainer) {
        // Iterate over all attribute groups (Mandatory and Optional) within the container
        attrContainer.querySelectorAll('.attribute-chip-group').forEach(group => {
            const attrName = group.dataset.attrName;
            
            // Collect selected chip values
            const selectedOptions = Array.from(group.querySelectorAll('input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);

            // Only add to the selection if at least one option is selected
            if (selectedOptions.length > 0) {
                currentSelections[attrName] = selectedOptions;
            }
        });
    }
    
    // Update the global state array (selectedProductsWithAttributes)
    toggleProductSelection(p.item_id, isSelected, currentSelections);
    
    // Update the visual status of the row/card
    tr.classList.toggle('selected', isSelected);
};

/**
 * Generates the full attribute selection UI (chips) for a given product.
 * NOTE: Assumes el(), createAttributeChips(), and getSelectedAttributes() are defined globally.
 * @param {Object} p - The product object from PRODUCT_BASE.
 * @param {function} updateProductState - The callback to run on chip changes.
 * @param {HTMLElement} attrContainer - The container to append the UI to.
 */
function generateAttributeUI(p, updateProductState, attrContainer) {
    // Clear the container first, just in case
    attrContainer.innerHTML = ''; 

    const mandatoryAttributes = p.product_type_details?.filter(a => a.is_mandatory === 'Yes') || [];
    const optionalAttributes = p.product_type_details?.filter(a => a.is_mandatory !== 'Yes') || [];

    // --- Render Mandatory Attributes ---
    if (mandatoryAttributes.length > 0) {
        // Use a general title for the section header
        const manTitle = el('p', "pSelectRight mandatory-title");
        manTitle.innerHTML = "Mandatory Attributes:";
        attrContainer.appendChild(manTitle);

        mandatoryAttributes.forEach(attr => {
            const initialSelected = getSelectedAttributes(p.item_id)[attr.attribute_name] || attr.possible_values;
            // The createAttributeChips function must be globally available
            const chipGroup = createAttributeChips(p, attr, initialSelected, true, updateProductState);
            attrContainer.appendChild(chipGroup);
        });
    }

    // --- Render Optional Attributes ---
    if (optionalAttributes.length > 0) {
        // Add visual separation using the optional-title class
        const optTitle = el('p', "pSelectRight optional-title");
        optTitle.innerHTML = "Optional Attributes:";
        
        // Append the title for separation
        attrContainer.appendChild(optTitle);

        optionalAttributes.forEach(attr => {
            const initialSelected = getSelectedAttributes(p.item_id)[attr.attribute_name] || attr.possible_values;
            const chipGroup = createAttributeChips(p, attr, initialSelected, false, updateProductState);
            attrContainer.appendChild(chipGroup);
        });
    }
}

/**
 * Creates the HTML structure for a single attribute group using chip/checkbox labels.
 * Assumes the helper function 'el' is available.
 * * @param {Object} p - The product object.
 * @param {Object} attr - The specific attribute detail object.
 * @param {string[]} initialSelected - Array of values that should be pre-checked.
 * @param {boolean} isMandatory - True if the attribute is mandatory.
 * @param {function} updateCallback - The function to call when a chip selection changes.
 * @returns {HTMLElement} The attribute chip group container (div).
 */
function createAttributeChips(p, attr, initialSelected, isMandatory, updateCallback) {
    const wrapper = el('div', 'attribute-chip-group');
    wrapper.dataset.attrName = attr.attribute_name;
    
    // Determine the header text based on structure preference (e.g., just the name)
    const statusText = isMandatory ? ' (Mandatory)' : ' (Optional)';
    wrapper.innerHTML = `<p class="attribute-header">${attr.attribute_name}${statusText}:</p>`;

    const chipContainer = el('div', 'chips-container');

    attr.possible_values.forEach(value => {
        const chip = el('label', 'attribute-chip');
        
        // Checkbox input is hidden, but drives the selection state
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.value = value;
        // Ensure the name is unique per product/attribute group
        checkbox.name = `${p.item_id}-${attr.attribute_name}`; 
        
        // Set initial state
        checkbox.checked = initialSelected.includes(value); 
        
        // The visual part of the chip
        const span = el('span');
        span.textContent = value;
        
        chip.appendChild(checkbox);
        chip.appendChild(span);
        chipContainer.appendChild(chip);
    });
    
    // Attach listener to the container using event delegation
    chipContainer.addEventListener('change', updateCallback);

    wrapper.appendChild(chipContainer);
    return wrapper;
}

function renderProductsTable(items = getCurrentSlice()) {
    const wrap = document.getElementById('tableContainer');
    wrap.innerHTML = '';
    const table = document.createElement('table');
    table.classList.add('table', 'table-striped', 'table-bordered');
    
    const thead = document.createElement('thead'); 
    const trh = document.createElement('tr');
    
    // Table Headers
    ['Select', 'Image', 'Product', 'SKU', 'Type', 'Short Description', 'Attributes'].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}`;
            if (isProductSelected(p.item_id)) tr.classList.add('selected');

            // --- Define Checkbox (cb) and State Updater ---
            const cb = document.createElement('input'); 
            cb.type = 'checkbox'; 
            cb.checked = isProductSelected(p.item_id);
            
            // The state updater function is bound to this specific row/checkbox
            const updateProductState = getProductStateUpdater(p, cb, tr);

            // --- Select Cell ---
            const tdSel = document.createElement('td'); 
            tdSel.className = 'select-cell';
            tdSel.appendChild(cb); 
            tr.appendChild(tdSel);

            // --- Other Cells ---
            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);

            // ---------------------------------------------
            // --- ATTRIBUTE SELECTION IMPLEMENTATION ---
            // ---------------------------------------------

            // 1. DETAIL ROW STRUCTURE
            const detailRow = document.createElement('tr');
            detailRow.classList.add('attribute-detail-row'); // Custom class for styling
            detailRow.style.display = 'none'; // Initially hidden
            detailRow.id = `detail-row-${p.id}`;
            
            const detailCell = document.createElement('td');
            detailCell.colSpan = 7; // Must span all columns
            
            const attrContainer = document.createElement('div');
            attrContainer.id = `attr-container-${p.item_id}`; // Unique ID for targeting by updateProductState
            attrContainer.classList.add('attribute-selectors', 'table-selectors');

            // 2. GENERATE CHIPS UI
            generateAttributeUI(p, updateProductState, attrContainer);

            // Initially disable the chips if the product is not selected
            attrContainer.classList.toggle('disabled', !cb.checked);

            detailCell.appendChild(attrContainer);
            detailRow.appendChild(detailCell);


            // 3. TOGGLE BUTTON (in the main row)
            const tdAttr = document.createElement('td'); 
            const toggleButton = document.createElement('button');
            toggleButton.textContent = 'Configure';
            toggleButton.classList.add('btn', 'btn-sm', 'btn-info', 'attribute-toggle-btn');
            tdAttr.appendChild(toggleButton);
            tr.appendChild(tdAttr);


            // 4. EVENT LISTENERS
            
            // a) Toggle Button Logic
            toggleButton.addEventListener('click', (e) => {
                e.stopPropagation(); // Stop row click event
                const isHidden = detailRow.style.display === 'none';
                detailRow.style.display = isHidden ? '' : 'none'; // Toggle visibility
                toggleButton.textContent = isHidden ? 'Hide Attributes' : 'Configure';
                toggleButton.classList.toggle('btn-info', !isHidden);
                toggleButton.classList.toggle('btn-secondary', isHidden);
            });
            
            // b) Main Checkbox Change Logic
            cb.addEventListener('change', () => { 
                updateProductState(); // Update state on check/uncheck
                attrContainer.classList.toggle('disabled', !cb.checked); // Enable/Disable chips
            });

            // c) Row Click Listener (Updated to ignore button clicks)
            tr.addEventListener('click', (e) => { 
                const tag = e.target.tagName.toLowerCase();
                if (tag !== 'input' && tag !== 'button') { 
                    cb.checked = !cb.checked; 
                    cb.dispatchEvent(new Event('change')); 
                } 
            });
            
            // 5. Append Rows to TBODY
            tbody.appendChild(tr);
            tbody.appendChild(detailRow); // Append the detail row right after the main row
        });
    } else {
        const tr = el('tr'); 
        const tdName = el('td');
        tdName.colSpan = 7; 
        tdName.innerHTML = "No Products Found.";
        tr.appendChild(tdName);
        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;
        
        // --- CHANGE HERE: Use the new helper function ---
        if (!isProductSelected(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) => {
        // --- CHANGE HERE: Use the new helper function ---
        if (!isProductSelected(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');
        // NOTE: The table rendering uses p.id for the row ID: `row-${p.id}`.
        // Assuming p.id is still valid for finding the base row, as your original code used it.
        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
}



$('.attribute-select').select2({
    placeholder: 'Select product attributes'
});