// ============================================================
// Stock Control Module — Full Rework
// ============================================================

let stockState = { page: 1, search: '', cat: '', low_stock: false, zero_cost: false, no_image: false };

// Settings cache — loaded once per stock page render
let _stockSettings = null;
async function getStockSettings(force = false) {
  if (_stockSettings && !force) return _stockSettings;
  const res = await API.post('settings/get', { group: 'stock' });
  const map = res.data?.map || {};
  _stockSettings = {
    slipCapture: (map.stock_slip_capture ?? '1') !== '0',   // default ON
    slipRequired: (map.stock_slip_required ?? '0') === '1',   // default OFF
    barcodeEnabled: (map.stock_barcode_enabled ?? '0') === '1', // default OFF
  };
  return _stockSettings;
}

async function renderStock(params = {}) {
  const isAdmin = Auth.can('stock', 'edit');
  const canStock = Auth.can('stock', 'create') || Auth.can('stock', 'edit'); // techs can also book in/out and add items
  const content = document.getElementById('page-content');
  content.innerHTML = `
    <div class="section-header">
      <div><h3>Stock Control</h3><p class="text-muted text-sm">Inventory, book in & out, reports</p></div>
      <div style="display:flex;flex-wrap:wrap;gap:.4rem;align-items:center">
        ${canStock ? `<button class="btn btn-outline btn-sm" onclick="openStockBookin()">📦 Book In</button>` : ''}
        ${canStock ? `<button class="btn btn-outline btn-sm" onclick="openStockBookout()">📤 Book Out</button>` : ''}
        ${canStock ? `<button class="btn btn-outline btn-sm" onclick="openStockReturnJc()">↩️ Return</button>` : ''}
        ${canStock ? `<button class="btn btn-ghost btn-sm" onclick="openStockMovements()">📋 Movements</button>` : ''}
        ${Auth.can('stock', 'reports') ? `<button class="btn btn-ghost btn-sm" onclick="openStockReport()">📊 Report</button>` : ''}
        ${canStock ? `<button class="btn btn-primary btn-sm" onclick="openAddItemModal()">+ New Item</button>` : ''}
      </div>
    </div>

    <div class="card">
      <div class="card-body-sm" style="border-bottom:1px solid var(--border)">
        <div class="filter-bar" style="margin-bottom:0;flex-wrap:wrap;gap:.5rem">
          <div class="search-wrap flex-1">
            <svg class="search-icon" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input class="form-control" placeholder="Search name or SKU..." oninput="stockSearchDb(this.value)">
          </div>
          <select id="stock-cat-filter" class="form-control" style="width:170px" onchange="stockState.cat=this.value;loadStock(1)">
            <option value="">All Categories</option>
          </select>
          <label class="d-flex align-center gap-2 text-sm" style="cursor:pointer">
            <input type="checkbox" onchange="stockState.low_stock=this.checked;loadStock(1)"> Low Stock Only
          </label>
          <label class="d-flex align-center gap-2 text-sm" style="cursor:pointer">
            <input type="checkbox" id="stock-zero-cost" onchange="stockState.zero_cost=this.checked;loadStock(1)"> R0 Value
          </label>
          <label class="d-flex align-center gap-2 text-sm" style="cursor:pointer">
            <input type="checkbox" id="stock-no-image" onchange="stockState.no_image=this.checked;loadStock(1)"> No Image
          </label>
        </div>
      </div>
      <div id="stock-table-wrap"><div class="loading-overlay"><div class="spinner"></div></div></div>
      <div id="stock-pagination"></div>
    </div>`;

  const stockSearchDb = debounce(v => { stockState.search = v; loadStock(1); }, 350);
  window.stockSearchDb = stockSearchDb;

  // Load categories for filter
  API.post('stock/categories', { action: 'list' }).then(r => {
    const sel = document.getElementById('stock-cat-filter');
    if (sel) sel.innerHTML = '<option value="">All Categories</option>' +
      (r.data?.categories || []).map(c => `<option value="${c.id}">${c.name}</option>`).join('');
  });

  await loadStock(1);
  getStockSettings(true); // warm the cache
}

async function loadStock(page = 1) {
  stockState.page = page;
  const wrap = document.getElementById('stock-table-wrap');
  if (!wrap) return;
  const res = await API.post('stock/items', { action: 'list', page, limit: 25, search: stockState.search, category_id: stockState.cat, low_stock: stockState.low_stock ? 1 : 0, zero_cost: stockState.zero_cost ? 1 : 0, no_image: stockState.no_image ? 1 : 0 });
  if (!res.success) { wrap.innerHTML = `<div class="empty-state"><div class="empty-title">${res.message}</div></div>`; return; }
  const items = res.data.items;
  if (!items.length) { wrap.innerHTML = `<div class="empty-state"><div class="empty-icon">📦</div><div class="empty-title">No items found</div></div>`; document.getElementById('stock-pagination').innerHTML = ''; return; }
  const isAdmin = Auth.isAdmin() || Auth.isDev();
  if (window.innerWidth < 768) {
    wrap.innerHTML = `<div style="display:flex;flex-direction:column;gap:0">
      ${items.map(i => {
      const low = parseFloat(i.qty_on_hand) <= parseFloat(i.min_qty);
      return `
        <div style="padding:.875rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.75rem">
          <div style="flex-shrink:0">
            ${i.image_path
          ? `<img src="${i.image_path}" style="width:44px;height:44px;object-fit:cover;border-radius:6px;cursor:pointer" onclick="openImageLightbox('${i.image_path}')">`
          : `<div style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--bg);border-radius:6px;border:1px solid var(--border)">📦</div>`}
          </div>
          <div style="flex:1;min-width:0">
            <div style="font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${i.name}</div>
            <div style="font-size:.75rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${i.sku} · ${i.category_name || '—'} · ${i.unit || 'each'}</div>
            <div style="display:flex;justify-content:space-between;align-items:center;margin-top:.25rem;flex-wrap:wrap;gap:.25rem">
              <span style="font-size:.8rem;${low ? 'color:var(--danger);font-weight:600' : 'color:var(--text-muted)'}">
                On hand: ${parseFloat(i.qty_on_hand).toFixed(2)}${low ? ' ⚠ LOW' : ''}
              </span>
              <span style="font-size:.8rem;font-weight:600;color:var(--text)">
                R${i.unit_cost ? parseFloat(i.unit_cost).toFixed(2) : '0'} · Val: R${parseFloat(i.stock_value || 0).toFixed(2)}
              </span>
            </div>
          </div>
          ${Auth.can('stock', 'edit') ? `<button class="btn btn-ghost btn-sm" style="flex-shrink:0;padding:.3rem .5rem" onclick="openAddItemModal(${i.id})">✏️</button>` : ''}
        </div>`;
    }).join('')}
    </div>`;
  } else {
    wrap.innerHTML = `
    <div class="table-wrap" style="border:none;border-radius:0"><table>
      <thead><tr><th>Image</th><th>Name</th><th>SKU</th><th>Category</th><th>Unit</th><th>On Hand</th><th>Min</th><th>Unit Cost</th><th>Value</th><th>Status</th>${isAdmin ? '<th></th>' : ''}</tr></thead>
      <tbody>${items.map(i => {
      const low = parseFloat(i.qty_on_hand) <= parseFloat(i.min_qty);
      return `<tr>
          <td>${i.image_path ? `<img src="${i.image_path}" style="width:36px;height:36px;object-fit:cover;border-radius:4px;cursor:pointer" onclick="openImageLightbox('${i.image_path}')">` : `<span style="font-size:1.5rem">📦</span>`}</td>
          <td class="td-bold">${i.name}</td>
          <td class="text-muted text-sm">${i.sku}</td>
          <td><span class="badge badge-muted">${i.category_name || '—'}</span></td>
          <td>${i.unit || 'each'}</td>
          <td class="font-medium ${low ? 'text-danger' : ''}">${parseFloat(i.qty_on_hand).toFixed(2)}</td>
          <td class="text-muted text-sm">${parseFloat(i.min_qty).toFixed(2)}</td>
          <td>R ${i.unit_cost ? parseFloat(i.unit_cost).toFixed(2) : '—'}</td>
          <td class="font-medium">R ${parseFloat(i.stock_value || 0).toFixed(2)}</td>
          <td>${low ? '<span class="badge badge-danger">Low Stock</span>' : '<span class="badge badge-success">OK</span>'}</td>
          ${isAdmin ? `<td class="d-flex gap-1"><button class="btn btn-ghost btn-sm" onclick="openAddItemModal(${i.id})">✏️</button></td>` : ''}
        </tr>`;
    }).join('')}</tbody>
    </table></div>`;
  }
  renderPagination('stock-pagination', res.data.pagination, `p => loadStock(p)`);
}


// ── Add/Edit Item Modal ────────────────────────────────────────
async function openAddItemModal(id = 0) {
  let item = null;
  if (id) {
    const res = await API.post('stock/items', { action: 'get', id });
    if (res.success) item = res.data.item;
  }
  const catsRes = await API.post('stock/categories', { action: 'list' });
  const cats = catsRes.data?.categories || [];

  Modal.open({
    id: 'add-item',
    title: id ? 'Edit Stock Item' : 'New Stock Item',
    size: 'modal-lg',
    body: `
      <form id="item-form">
        ${id ? `<input type="hidden" name="id" value="${id}">` : ''}
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Name <span class="required">*</span></label>
            <input name="name" class="form-control" required value="${item?.name || ''}"></div>
          <div class="form-group"><label class="form-label">SKU</label>
            <input name="sku" class="form-control" value="${item?.sku || ''}" placeholder="Auto-generated if blank"></div>
        </div>
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Category</label>
            <select name="category_id" class="form-control">
              <option value="">— None —</option>
              ${cats.map(c => `<option value="${c.id}" ${c.id == item?.category_id ? 'selected' : ''}>${c.name}</option>`).join('')}
            </select></div>
          <div class="form-group"><label class="form-label">Type</label>
            <select name="item_type" class="form-control">
              ${['consumable', 'component', 'tool', 'asset'].map(t => `<option value="${t}" ${t == item?.item_type ? 'selected' : ''}>${Fmt.capitalize(t)}</option>`).join('')}
            </select></div>
        </div>
        <div class="form-row form-row-3">
          <div class="form-group"><label class="form-label">Unit of Measure <span class="required">*</span></label>
            <select name="unit" class="form-control">
              ${['each', 'metre', 'roll', 'kg', 'litre', 'pack', 'box', 'pair', 'set'].map(u => `<option value="${u}" ${u == item?.unit ? 'selected' : ''}>${u}</option>`).join('')}
            </select></div>
          <div class="form-group"><label class="form-label">Unit Cost (R)</label>
            <input type="number" step="0.01" name="unit_cost" class="form-control" value="${item?.unit_cost || ''}" placeholder="0.00"></div>
          <div class="form-group"><label class="form-label">Min Stock (Low Stock alert)</label>
            <input type="number" step="0.1" name="min_qty" class="form-control" value="${item?.min_qty || 0}"></div>
        </div>
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Supplier</label>
            <input name="supplier" class="form-control" value="${item?.supplier || ''}" placeholder="Default supplier for this item"></div>
          <div class="form-group"><label class="form-label">Description</label>
            <textarea name="description" class="form-control" rows="2">${item?.description || ''}</textarea></div>
        </div>
        ${id ? `
        <div class="form-group">
          <label class="form-label">Item Image</label>
          <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
            <div id="stock-img-preview" style="width:72px;height:72px;border-radius:6px;border:2px dashed var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f9fafb;flex-shrink:0">
              ${item?.image_path ? `<img src="${item.image_path}" style="width:100%;height:100%;object-fit:cover">` : `<span style="font-size:1.8rem">📦</span>`}
            </div>
            <div>
              <input type="file" id="stock-img-file" accept="image/jpeg,image/png,image/webp" style="display:none" onchange="previewStockImage(this)">
              <button type="button" class="btn btn-outline btn-sm" onclick="document.getElementById('stock-img-file').click()">📷 ${item?.image_path ? 'Change Image' : 'Upload Image'}</button>
              ${item?.image_path ? `<button type="button" class="btn btn-ghost btn-sm" style="color:var(--danger)" onclick="removeStockImage(${id})">🗑 Remove</button>` : ''}
              <p class="text-muted text-xs" style="margin-top:.25rem">JPG, PNG or WebP · max 5MB</p>
            </div>
          </div>
        </div>
        <div id="item-qr-wrap"></div>` : '<p class="text-muted text-xs" style="margin-top:.5rem">💡 Save item first, then re-open to upload an image.</p>'}
      </form>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitItem(${id})"><span class="btn-text">Save Item</span></button>`
  });

  // Render QR code if feature enabled and item exists
  if (id && item) {
    getStockSettings().then(cfg => {
      if (!cfg.barcodeEnabled) return;
      const wrap = document.getElementById('item-qr-wrap');
      if (!wrap) return;
      wrap.innerHTML = `
        <div class="form-group" style="margin-top:.5rem">
          <label class="form-label">🔲 QR / Barcode</label>
          <div style="display:flex;align-items:flex-start;gap:1.25rem;flex-wrap:wrap">
            <div id="item-qr-canvas" style="background:#fff;padding:8px;border:1px solid var(--border);border-radius:6px;display:inline-block"></div>
            <div>
              <p class="text-sm font-medium" style="margin:0 0 .2rem">${item.sku}</p>
              <p class="text-xs text-muted" style="margin:0 0 .6rem">${item.name}</p>
              <button type="button" class="btn btn-outline btn-sm" onclick="printItemQR('${item.sku}','${item.name.replace(/'/g, "\\'")}')">🖨 Print Label</button>
            </div>
          </div>
        </div>`;
      // Generate QR code
      setTimeout(() => {
        const el = document.getElementById('item-qr-canvas');
        if (el && window.QRCode) {
          el.innerHTML = '';
          new QRCode(el, { text: item.sku, width: 96, height: 96, correctLevel: QRCode.CorrectLevel.M });
        }
      }, 100);
    });
  }
}

async function submitItem(id = 0) {
  const btn = document.querySelector('#modal-add-item .btn-primary');
  if (btn) btn.classList.add('loading');
  const data = getFormData('item-form');
  const res = await API.post('stock/items', { action: 'save', ...data });
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    // Upload image if one was selected
    const fileInput = document.getElementById('stock-img-file');
    if (fileInput && fileInput.files[0]) {
      const fd = new FormData();
      fd.append('image', fileInput.files[0]);
      fd.append('item_id', res.data.id || id);
      await API.postForm('stock/image_upload', fd);
    }
    Toast.show(id ? 'Item updated.' : 'Item created.', 'success');
    Modal.close();
    loadStock(stockState.page);
  } else Toast.show(res.message, 'error');
}

function previewStockImage(input) {
  const file = input.files[0];
  if (!file) return;
  const preview = document.getElementById('stock-img-preview');
  if (!preview) return;
  const reader = new FileReader();
  reader.onload = e => { preview.innerHTML = `<img src="${e.target.result}" style="width:100%;height:100%;object-fit:cover">`; };
  reader.readAsDataURL(file);
}

async function removeStockImage(itemId) {
  if (!await Modal.confirm('Remove image from this item?', 'Remove Image', true)) return;
  const res = await API.post('stock/items', { action: 'remove_image', id: itemId });
  if (res.success) { Toast.show('Image removed.', 'success'); openAddItemModal(itemId); }
  else Toast.show(res.message || 'Failed to remove image.', 'error');
}

// ── Book In ────────────────────────────────────────────────────
async function openStockBookin() {
  const cfg = await getStockSettings();
  const slipsRes = cfg.slipCapture
    ? await API.post('slips/list', { page: 1, limit: 50, status: 'unlinked', my_only: 0 })
    : { data: { slips: [] } };
  const slips = slipsRes.data?.slips || [];

  const slipField = cfg.slipCapture ? `
    <div class="form-group">
      <label class="form-label">Link to Slip${cfg.slipRequired ? ' <span class="required">*</span>' : ' <span class="text-muted text-xs">(optional)</span>'}</label>
      <select id="bookin-slip" class="form-control">
        <option value="">— No slip —</option>
        ${slips.map(s => `<option value="${s.id}">${Fmt.date(s.slip_date)} — ${s.merchant || 'Unknown'} — R${parseFloat(s.amount).toFixed(2)}</option>`).join('')}
      </select>
      ${cfg.slipRequired ? '<p class="text-xs text-warning mt-1">⚠ A slip must be attached before receiving stock.</p>' : ''}
    </div>` : '';

  const scanBtn = cfg.barcodeEnabled
    ? `<button type="button" class="btn btn-outline btn-sm" onclick="openBarcodeScanner('bookin')" title="Scan QR / Barcode">📷 Scan</button>`
    : '';

  Modal.open({
    id: 'stock-bookin',
    title: '📦 Book Stock In',
    size: 'modal-xl',
    body: `
      <div class="form-row form-row-2 mb-3">
        <div class="form-group"><label class="form-label">Reference / GRN Number</label>
          <input id="bookin-ref" class="form-control" placeholder="e.g. GRN-2026-001 (auto if blank)"></div>
        ${slipField}
      </div>
      <div class="form-group"><label class="form-label">Notes</label>
        <input id="bookin-notes" class="form-control" placeholder="Optional delivery note..."></div>
      <div class="divider"></div>
      <div class="form-group" style="position:relative">
        <label class="form-label" style="display:flex;align-items:center;gap:.5rem">
          🔍 Search item to add ${scanBtn}
        </label>
        <input id="bookin-search" class="form-control" style="font-size:1.05rem" placeholder="Type item name or SKU..." oninput="searchBookinItem(this.value)" autocomplete="off">
        <div class="search-dropdown" id="bookin-search-results"></div>
      </div>
      <div id="bookin-lines"></div>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitBookin()"><span class="btn-text">📦 Receive Stock</span></button>`
  });
  setTimeout(() => document.getElementById('bookin-search')?.focus(), 150);
}

let _bookinSearchTimer;
const _bookinItemCache = {};

function searchBookinItem(val) {
  clearTimeout(_bookinSearchTimer);
  const results = document.getElementById('bookin-search-results');
  if (!results) return;
  if (!val || val.length < 2) { results.innerHTML = ''; return; }
  _bookinSearchTimer = setTimeout(async () => {
    const res = await API.post('stock/items', { action: 'search', q: val });
    const items = res.data?.items || [];
    if (!items.length) {
      results.innerHTML = `<div class="search-dropdown-item"><span class="text-muted">No items found — </span><a href="#" onclick="openAddItemModal();return false;" class="text-primary">Create new item</a></div>`;
      return;
    }
    items.forEach(i => { _bookinItemCache[i.id] = i; });
    results.innerHTML = items.map(i => `
      <div class="search-dropdown-item" onclick="addBookinLine(${i.id})">
        <span class="font-medium">${i.name}</span>
        <span class="text-xs text-muted ml-2">${i.sku} · <strong>${parseFloat(i.qty_on_hand).toFixed(1)}</strong> ${i.unit} on hand${i.supplier ? ' · ' + i.supplier : ''}</span>
      </div>`).join('');
  }, 250);
}

function addBookinLine(id) {
  const i = _bookinItemCache[id];
  if (!i) return;
  const wrap = document.getElementById('bookin-lines');
  if (!wrap) return;

  // If already added, just focus its qty
  const existing = wrap.querySelector(`.bookin-line[data-item-id="${id}"]`);
  if (existing) {
    existing.querySelector('.bl-qty')?.focus();
    existing.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    document.getElementById('bookin-search').value = '';
    document.getElementById('bookin-search-results').innerHTML = '';
    return;
  }

  const div = document.createElement('div');
  div.className = 'bookin-line';
  div.dataset.itemId = id;
  div.style.cssText = 'display:grid;grid-template-columns:1fr 110px 120px 36px;gap:.75rem;align-items:center;padding:.75rem;margin-bottom:.5rem;background:var(--bg-secondary,#f9fafb);border:1px solid var(--border);border-radius:var(--radius-sm)';
  div.innerHTML = `
    <div>
      <div class="font-medium">${i.name}</div>
      <div class="text-xs text-muted">${i.unit || 'each'}${i.supplier ? ' · ' + i.supplier : ''}</div>
      <input type="hidden" class="bl-item-id" value="${id}">
    </div>
    <div>
      <label class="form-label text-xs">Quantity</label>
      <input type="number" step="0.01" class="form-control bl-qty" placeholder="Qty" min="0.01" value="1">
    </div>
    <div>
      <label class="form-label text-xs">Unit Cost (R)</label>
      <input type="number" step="0.01" class="form-control bl-cost" placeholder="0.00" value="${i.unit_cost || ''}">
    </div>
    <button class="btn btn-ghost btn-sm text-danger" onclick="this.closest('.bookin-line').remove()" title="Remove" style="margin-top:18px">✕</button>`;
  wrap.appendChild(div);

  document.getElementById('bookin-search').value = '';
  document.getElementById('bookin-search-results').innerHTML = '';
  document.getElementById('bookin-search').focus();
  setTimeout(() => div.querySelector('.bl-qty')?.select(), 80);
}

// searchStockItem / selectStockItem removed — each modal now has its own dedicated search


async function submitBookin() {
  const btn = document.querySelector('#modal-stock-bookin .btn-primary');
  if (btn) btn.classList.add('loading');
  const cfg = await getStockSettings();
  // Client-side slip required check
  const slipVal = document.getElementById('bookin-slip')?.value || '';
  if (cfg.slipRequired && !slipVal) {
    Toast.show('A linked slip is required to receive stock. Please select a slip.', 'error');
    if (btn) btn.classList.remove('loading');
    return;
  }
  const lines = [];
  document.querySelectorAll('.bookin-line').forEach(line => {
    const id = line.querySelector('.bl-item-id')?.value;
    const qty = line.querySelector('.bl-qty')?.value;
    const cost = line.querySelector('.bl-cost')?.value;
    if (id && qty) lines.push({ item_id: id, qty, unit_cost: cost });
  });
  if (!lines.length) { Toast.show('Add at least one item.', 'error'); if (btn) btn.classList.remove('loading'); return; }
  const res = await API.post('stock/bookin', {
    lines,
    reference_no: document.getElementById('bookin-ref')?.value,
    slip_id: document.getElementById('bookin-slip')?.value || '',
    notes: document.getElementById('bookin-notes')?.value || '',
  });
  if (btn) btn.classList.remove('loading');
  if (res.success) { Toast.show(`Stock received! Ref: ${res.data.reference}`, 'success'); Modal.close(); loadStock(stockState.page); }
  else Toast.show(res.message, 'error');
}

// ── Book Out ───────────────────────────────────────────────────
async function openStockBookout() {
  const cfg = await getStockSettings();
  const scanBtn = cfg.barcodeEnabled
    ? `<button type="button" class="btn btn-outline btn-sm" onclick="openBarcodeScanner('bookout')" title="Scan QR / Barcode">📷 Scan</button>`
    : '';
  Modal.open({
    id: 'stock-bookout',
    title: '📤 Book Stock Out',
    size: 'modal-xl',
    body: `
      <div class="form-row form-row-2 mb-3">
        <div class="form-group"><label class="form-label">Link to Job Card</label>
          <input id="bookout-jc-search" class="form-control" placeholder="Search job card..." oninput="searchJcForBookout(this.value)" autocomplete="off">
          <input type="hidden" id="bookout-jc-id">
          <div class="search-dropdown" id="bookout-jc-results"></div>
          <div class="text-xs text-success mt-1" id="bookout-jc-chosen"></div>
        </div>
        <div class="form-group"><label class="form-label">Link to Project</label>
          <input id="bookout-proj-search" class="form-control" placeholder="Search project..." oninput="searchProjForBookout(this.value)" autocomplete="off">
          <input type="hidden" id="bookout-proj-id">
          <div class="search-dropdown" id="bookout-proj-results"></div>
          <div class="text-xs text-success mt-1" id="bookout-proj-chosen"></div>
        </div>
      </div>
      <div class="form-group"><label class="form-label">Notes</label>
        <input id="bookout-notes" class="form-control" placeholder="Optional notes"></div>
      <div class="divider"></div>
      <div class="form-group" style="position:relative">
        <label class="form-label" style="display:flex;align-items:center;gap:.5rem">
          Search &amp; Add Item ${scanBtn}
        </label>
        <input id="bookout-search" class="form-control" placeholder="Type item name or SKU..." oninput="searchBookoutItem(this.value)" autocomplete="off">
        <div class="search-dropdown" id="bookout-search-results"></div>
      </div>
      <div id="bookout-lines" style="margin-top:.5rem"></div>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitBookout()"><span class="btn-text">📤 Issue Stock</span></button>`
  });
  setTimeout(() => document.getElementById('bookout-search')?.focus(), 150);
}

let _bookoutSearchTimer;
const _bookoutItemCache = {};

function searchBookoutItem(val) {
  clearTimeout(_bookoutSearchTimer);
  const results = document.getElementById('bookout-search-results');
  if (!results) return;
  if (!val || val.length < 2) { results.innerHTML = ''; return; }
  _bookoutSearchTimer = setTimeout(async () => {
    const res = await API.post('stock/items', { action: 'search', q: val });
    const items = res.data?.items || [];
    if (!items.length) {
      results.innerHTML = `<div class="search-dropdown-item text-muted">No items found</div>`;
      return;
    }
    items.forEach(i => { _bookoutItemCache[i.id] = i; });
    results.innerHTML = items.map(i => `
      <div class="search-dropdown-item" onclick="addBookoutLine(${i.id})">
        <span class="font-medium">${i.name}</span>
        <span class="text-xs text-muted ml-2">${i.sku} · <strong>${parseFloat(i.qty_on_hand).toFixed(1)}</strong> ${i.unit} on hand</span>
      </div>`).join('');
  }, 250);
}

let _jcBOTimer, _projBOTimer;
function searchJcForBookout(val) {
  clearTimeout(_jcBOTimer);
  const results = document.getElementById('bookout-jc-results');
  const hidden = document.getElementById('bookout-jc-id');
  const chosen = document.getElementById('bookout-jc-chosen');
  if (hidden) hidden.value = ''; if (chosen) chosen.textContent = '';
  if (!val || val.length < 2) { if (results) results.innerHTML = ''; return; }
  _jcBOTimer = setTimeout(async () => {
    const res = await API.post('jobcards/list', { search: val, limit: 10, page: 1, context: 'bookout' });
    const jcs = res.data?.job_cards || [];
    if (!results) return;
    results.innerHTML = jcs.length
      ? jcs.map(j => `<div class="search-dropdown-item" onclick="selectJcBO(${j.id},'${j.job_number}','${(j.title || '').replace(/'/g, "\\'")}')"><span class="font-medium">${j.job_number}</span> — ${j.title}</div>`).join('')
      : '<div class="search-dropdown-item text-muted">No job cards found</div>';
  }, 300);
}
function selectJcBO(id, num, title) {
  document.getElementById('bookout-jc-id').value = id;
  document.getElementById('bookout-jc-search').value = num;
  document.getElementById('bookout-jc-chosen').textContent = `✓ ${num} — ${title}`;
  document.getElementById('bookout-jc-results').innerHTML = '';
}
function searchProjForBookout(val) {
  clearTimeout(_projBOTimer);
  const results = document.getElementById('bookout-proj-results');
  const hidden = document.getElementById('bookout-proj-id');
  const chosen = document.getElementById('bookout-proj-chosen');
  if (hidden) hidden.value = ''; if (chosen) chosen.textContent = '';
  if (!val || val.length < 2) { if (results) results.innerHTML = ''; return; }
  _projBOTimer = setTimeout(async () => {
    const res = await API.post('projects/list', { search: val, limit: 8, page: 1 });
    const projs = res.data?.projects || [];
    if (!results) return;
    results.innerHTML = projs.length
      ? projs.map(p => `<div class="search-dropdown-item" onclick="selectProjBO(${p.id},'${(p.name || '').replace(/'/g, "\\'")}')"><span class="font-medium">${p.name}</span></div>`).join('')
      : '<div class="search-dropdown-item text-muted">No projects found</div>';
  }, 300);
}
function selectProjBO(id, name) {
  document.getElementById('bookout-proj-id').value = id;
  document.getElementById('bookout-proj-search').value = name;
  document.getElementById('bookout-proj-chosen').textContent = `✓ ${name}`;
  document.getElementById('bookout-proj-results').innerHTML = '';
}

function addBookoutLine(id) {
  const i = _bookoutItemCache[id];
  if (!i) return;
  const wrap = document.getElementById('bookout-lines');
  if (!wrap) return;
  const existing = wrap.querySelector(`.bookout-line[data-item-id="${id}"]`);
  if (existing) {
    existing.querySelector('.bl-qty')?.focus();
    existing.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    document.getElementById('bookout-search').value = '';
    document.getElementById('bookout-search-results').innerHTML = '';
    return;
  }
  const div = document.createElement('div');
  div.className = 'bookout-line';
  div.dataset.itemId = id;
  div.style.cssText = 'display:grid;grid-template-columns:1fr 110px 36px;gap:.75rem;align-items:center;padding:.75rem;margin-bottom:.5rem;background:var(--bg-secondary,#f9fafb);border:1px solid var(--border);border-radius:var(--radius-sm)';
  div.innerHTML = `
    <div>
      <div class="font-medium">${i.name}</div>
      <div class="text-xs text-muted">${parseFloat(i.qty_on_hand).toFixed(1)} ${i.unit} on hand</div>
      <input type="hidden" class="bl-item-id" value="${id}">
    </div>
    <div>
      <label class="form-label text-xs">Quantity</label>
      <input type="number" step="0.01" class="form-control bl-qty" placeholder="Qty" min="0.01" max="${i.qty_on_hand}" value="1">
    </div>
    <button class="btn btn-ghost btn-sm text-danger" onclick="this.closest('.bookout-line').remove()" title="Remove" style="margin-top:18px">✕</button>`;
  wrap.appendChild(div);
  document.getElementById('bookout-search').value = '';
  document.getElementById('bookout-search-results').innerHTML = '';
  document.getElementById('bookout-search').focus();
  setTimeout(() => div.querySelector('.bl-qty')?.select(), 80);
}

async function submitBookout() {
  const btn = document.querySelector('#modal-stock-bookout .btn-primary');
  if (btn) btn.classList.add('loading');
  const jcId = document.getElementById('bookout-jc-id')?.value;
  const jcSearch = document.getElementById('bookout-jc-search')?.value?.trim();
  if (jcSearch && !jcId) { Toast.show('Select a valid job card.', 'error'); if (btn) btn.classList.remove('loading'); return; }
  const projId = document.getElementById('bookout-proj-id')?.value;
  const projSearch = document.getElementById('bookout-proj-search')?.value?.trim();
  if (projSearch && !projId) { Toast.show('Select a valid project.', 'error'); if (btn) btn.classList.remove('loading'); return; }
  const lines = [];
  document.querySelectorAll('.bookout-line').forEach(line => {
    const id = line.querySelector('.bl-item-id')?.value;
    const qty = line.querySelector('.bl-qty')?.value;
    if (id && qty) lines.push({ item_id: id, qty });
  });
  if (!lines.length) { Toast.show('Add at least one item.', 'error'); if (btn) btn.classList.remove('loading'); return; }
  const res = await API.post('stock/bookout', {
    lines, job_card_id: jcId || '', project_id: projId || '',
    notes: document.getElementById('bookout-notes')?.value || '',
  });
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    let msg = `Stock issued! Ref: ${res.data.reference}`;
    const alerts = res.data.low_stock_alerts || [];
    if (alerts.length) msg += ` ⚠ Low stock: ${alerts.map(a => a.name).join(', ')}`;
    Toast.show(msg, alerts.length ? 'warning' : 'success');
    Modal.close(); loadStock(stockState.page);
  } else Toast.show(res.message, 'error');
}

// ── Return from Job Card ──────────────────────────────────────
async function openStockReturnJc() {
  const cfg = await getStockSettings();
  const scanBtn = cfg.barcodeEnabled
    ? `<button type="button" class="btn btn-outline btn-sm" onclick="openBarcodeScanner('return')" title="Scan QR / Barcode" style="margin-top:.5rem">📷 Scan Item</button>`
    : '';
  Modal.open({
    id: 'stock-return-jc',
    title: '↩️ Return Items to Stock',
    size: 'modal-lg',
    body: `
      <div class="mb-3">
        <label class="form-label">Job Card <span class="text-danger">*</span></label>
        <div style="position:relative">
          <input id="rtn-jc-search" class="form-control" placeholder="Search job card number or title..."
            oninput="searchJcForReturn(this.value)" autocomplete="off">
          <div class="search-dropdown" id="rtn-jc-results"></div>
          <input type="hidden" id="rtn-jc-id">
        </div>
        <div class="text-xs text-success mt-1" id="rtn-jc-chosen"></div>
      </div>
      <div id="rtn-items-wrap" style="display:none">
        <div style="border-top:1px solid var(--border);padding-top:.75rem;margin-bottom:.75rem">
          <div class="text-sm font-semibold mb-1">Items booked out to this job card</div>
          <div class="text-xs text-muted mb-2">Select quantities to return. Only items with remaining stock on the job card are shown.</div>
          ${scanBtn}
        </div>
        <div id="rtn-lines"></div>
        <div class="mt-3">
          <label class="form-label">Notes</label>
          <input id="rtn-notes" class="form-control" placeholder="Optional reason for return...">
        </div>
      </div>
      <div id="rtn-empty" style="display:none" class="text-center py-4 text-muted text-sm">
        No items currently booked out to this job card.
      </div>`,
    footer: `
      <button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" id="rtn-submit-btn" onclick="submitStockReturn()" style="display:none">↩️ Return to Stock</button>`
  });
}

async function searchJcForReturn(val) {
  const results = document.getElementById('rtn-jc-results');
  const hidden = document.getElementById('rtn-jc-id');
  const chosen = document.getElementById('rtn-jc-chosen');
  if (!results) return;
  if (!val || val.length < 2) { results.innerHTML = ''; return; }
  const res = await API.post('jobcards/list', { search: val, limit: 10, page: 1, context: 'bookout' });
  if (!res.success || !res.data.job_cards.length) {
    results.innerHTML = '<div class="search-dropdown-item text-muted">No job cards found</div>';
    return;
  }
  results.innerHTML = res.data.job_cards.map(j =>
    `<div class="search-dropdown-item" onclick="selectJcForReturn(${j.id},'${j.job_number}','${(j.title || '').replace(/'/g, "\'")}')">
      <span class="font-medium">${j.job_number}</span>
      <span class="text-muted text-sm ml-2">${j.title || ''}</span>
      <span class="badge badge-muted ml-2" style="float:right">${j.status}</span>
    </div>`
  ).join('');
}

async function selectJcForReturn(id, num, title) {
  document.getElementById('rtn-jc-id').value = id;
  document.getElementById('rtn-jc-search').value = num;
  document.getElementById('rtn-jc-chosen').textContent = `✓ ${num} — ${title}`;
  document.getElementById('rtn-jc-results').innerHTML = '';

  // Load items booked out to this job card
  const res = await API.post('stock/jobcard_items', { job_card_id: id });
  const linesWrap = document.getElementById('rtn-lines');
  const itemsWrap = document.getElementById('rtn-items-wrap');
  const emptyMsg = document.getElementById('rtn-empty');
  const submitBtn = document.getElementById('rtn-submit-btn');

  if (!res.success || !res.data.items.length) {
    itemsWrap.style.display = 'none';
    emptyMsg.style.display = 'block';
    submitBtn.style.display = 'none';
    return;
  }

  emptyMsg.style.display = 'none';
  itemsWrap.style.display = 'block';
  submitBtn.style.display = '';

  linesWrap.innerHTML = res.data.items.map(item => `
    <div class="rtn-line" data-item-id="${item.item_id}"
      style="display:grid;grid-template-columns:1fr 90px 100px 36px;gap:.75rem;align-items:center;
             padding:.65rem .75rem;margin-bottom:.4rem;background:var(--bg-secondary,#f9fafb);
             border:1px solid var(--border);border-radius:var(--radius-sm)">
      <div>
        <div class="font-medium text-sm">${item.item_name}</div>
        <div class="text-xs text-muted">${item.sku} · ${parseFloat(item.net_issued).toFixed(2)} ${item.unit} on job</div>
      </div>
      <div>
        <label class="form-label text-xs">Return Qty</label>
        <input type="number" class="form-control rtn-qty" step="0.01" min="0" max="${item.net_issued}"
          value="${parseFloat(item.net_issued).toFixed(2)}" placeholder="0">
      </div>
      <div class="text-xs text-muted" style="padding-top:18px">
        of ${parseFloat(item.net_issued).toFixed(2)} ${item.unit}
      </div>
      <button class="btn btn-ghost btn-sm text-danger" onclick="this.closest('.rtn-line').remove()" title="Remove" style="margin-top:18px">✕</button>
    </div>`).join('');
}

async function submitStockReturn() {
  const btn = document.getElementById('rtn-submit-btn');
  if (btn) btn.classList.add('loading');

  const jcId = document.getElementById('rtn-jc-id')?.value;
  if (!jcId) { Toast.show('Select a job card first.', 'error'); if (btn) btn.classList.remove('loading'); return; }

  const lines = [];
  document.querySelectorAll('.rtn-line').forEach(line => {
    const itemId = line.dataset.itemId;
    const qty = parseFloat(line.querySelector('.rtn-qty')?.value || 0);
    if (itemId && qty > 0) lines.push({ item_id: itemId, qty });
  });

  if (!lines.length) { Toast.show('No items to return — enter quantities above 0.', 'error'); if (btn) btn.classList.remove('loading'); return; }

  const res = await API.post('stock/return_jobcard', {
    job_card_id: jcId,
    lines,
    notes: document.getElementById('rtn-notes')?.value || '',
  });

  if (btn) btn.classList.remove('loading');
  if (res.success) {
    Toast.show(`Items returned to stock. Ref: ${res.data.reference}`, 'success');
    Modal.close();
    loadStock(stockState.page);

  } else {
    Toast.show(res.message, 'error');
  }
}

window.openStockReturnJc = openStockReturnJc;
window.searchJcForReturn = searchJcForReturn;
window.selectJcForReturn = selectJcForReturn;
window.submitStockReturn = submitStockReturn;

// ── Stock Movements ───────────────────────────────────────────
let _mvState = { page: 1, search: '', type: '', item_id: '', date_from: '', date_to: '' };

async function openStockMovements() {
  Modal.open({
    id: 'stock-movements',
    title: '📋 Stock Movements',
    size: 'modal-xl',
    body: `
      <div style="display:grid;grid-template-columns:1fr 140px 140px 130px 130px;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap" class="flex-wrap">
        <div style="position:relative">
          <input id="mv-search" class="form-control" placeholder="Search item, ref, supplier..." oninput="mvSearchDebounced(this.value)">
        </div>
        <select id="mv-type" class="form-control" onchange="_mvState.type=this.value;loadMovements(1)">
          <option value="">All Types</option>
          <option value="receive">📦 Received</option>
          <option value="issue_jobcard">📤 Job Card</option>
          <option value="issue_project">📤 Project</option>
          <option value="issue_person">📤 Person</option>
          <option value="return">↩️ Return</option>
          <option value="adjust">⚙️ Adjust</option>
          <option value="transfer">🔄 Transfer</option>
        </select>
        <div>
          <input type="date" id="mv-from" class="form-control" placeholder="From" onchange="_mvState.date_from=this.value;loadMovements(1)" title="From date">
        </div>
        <div>
          <input type="date" id="mv-to" class="form-control" placeholder="To" onchange="_mvState.date_to=this.value;loadMovements(1)" title="To date">
        </div>
        <button class="btn btn-ghost btn-sm" onclick="clearMvFilters()">Clear</button>
      </div>
      <div id="mv-table-wrap"><div class="loading-overlay"><div class="spinner"></div></div></div>
      <div id="mv-pagination"></div>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Close</button>`
  });
  _mvState = { page: 1, search: '', type: '', item_id: '', date_from: '', date_to: '' };
  await loadMovements(1);
}

function clearMvFilters() {
  _mvState = { page: 1, search: '', type: '', item_id: '', date_from: '', date_to: '' };
  const f = document.getElementById('mv-search'); if (f) f.value = '';
  const t = document.getElementById('mv-type'); if (t) t.value = '';
  const d1 = document.getElementById('mv-from'); if (d1) d1.value = '';
  const d2 = document.getElementById('mv-to'); if (d2) d2.value = '';
  loadMovements(1);
}

const mvSearchDebounced = debounce(v => { _mvState.search = v; loadMovements(1); }, 350);
window.mvSearchDebounced = mvSearchDebounced;

const TX_LABELS = { receive: 'Received', issue_jobcard: 'Job Card', issue_project: 'Project', issue_person: 'Person', return: 'Return', adjust: 'Adjust', transfer: 'Transfer' };
const TX_COLORS = { receive: 'badge-success', issue_jobcard: 'badge-info', issue_project: 'badge-info', issue_person: 'badge-warning', return: 'badge-muted', adjust: 'badge-warning', transfer: 'badge-muted' };

async function loadMovements(page = 1) {
  _mvState.page = page;
  const wrap = document.getElementById('mv-table-wrap');
  if (!wrap) return;
  wrap.innerHTML = '<div class="loading-overlay"><div class="spinner"></div></div>';
  const res = await API.post('stock/transactions', { ..._mvState, page });
  if (!res.success) { wrap.innerHTML = `<div class="empty-state"><div class="empty-title">${res.message}</div></div>`; return; }
  const rows = res.data.transactions;
  if (!rows.length) { wrap.innerHTML = '<div class="empty-state"><div class="empty-icon">📋</div><div class="empty-title">No transactions found</div></div>'; document.getElementById('mv-pagination').innerHTML = ''; return; }

  wrap.innerHTML = `<div class="table-wrap" style="border:none;border-radius:0"><table>
    <thead><tr>
      <th>Date</th><th>Type</th><th>Item</th><th>SKU</th>
      <th class="text-right">Qty</th><th>Unit</th><th>Unit Cost</th>
      <th>Reference</th><th>Supplier</th><th>Job / Project</th><th>Recorded By</th>
    </tr></thead>
    <tbody>${rows.map(r => {
    const isOut = ['issue_jobcard', 'issue_project', 'issue_person'].includes(r.transaction_type);
    const qtyStr = (isOut ? '−' : '+') + Math.abs(parseFloat(r.quantity)).toFixed(2);
    const qtyColor = isOut ? 'color:var(--danger)' : 'color:var(--success)';
    const linked = r.job_number ? `<span class="badge badge-muted">${r.job_number}</span>` : (r.project_name ? `<span class="badge badge-muted">${r.project_name}</span>` : '—');
    return `<tr>
        <td class="text-sm" style="white-space:nowrap">${Fmt.datetime(r.transaction_date)}</td>
        <td><span class="badge ${TX_COLORS[r.transaction_type] || 'badge-muted'}">${TX_LABELS[r.transaction_type] || r.transaction_type}</span></td>
        <td class="font-medium">${r.item_name}</td>
        <td class="text-xs text-muted">${r.sku}</td>
        <td class="text-right font-medium" style="${qtyColor}">${qtyStr}</td>
        <td class="text-sm">${r.unit || ''}</td>
        <td class="text-sm">${r.unit_cost ? 'R ' + parseFloat(r.unit_cost).toFixed(2) : '—'}</td>
        <td class="text-xs text-muted">${r.reference_no || '—'}</td>
        <td class="text-sm">${r.supplier || '—'}</td>
        <td>${linked}</td>
        <td class="text-sm">${r.recorded_by}</td>
      </tr>`;
  }).join('')}</tbody>
  </table></div>`;
  renderPagination('mv-pagination', res.data.pagination, `p => loadMovements(p)`);
}

// ── Report Modal ───────────────────────────────────────────────
async function openStockReport() {
  Modal.open({
    id: 'stock-report',
    title: '📊 Stock Report',
    size: 'modal-xl',
    body: `<div id="stock-report-body"><div class="loading-overlay"><div class="spinner"></div></div></div>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Close</button>`
  });
  const res = await API.post('stock/report', { type: 'summary' });
  const body = document.getElementById('stock-report-body');
  if (!body || !res.success) return;
  const items = res.data.items;
  const totalVal = res.data.total_value;
  const lowCount = res.data.low_stock_count;

  // Group by category
  const cats = {};
  items.forEach(i => { const cat = i.category_name || 'Uncategorised'; if (!cats[cat]) cats[cat] = []; cats[cat].push(i); });

  body.innerHTML = `
    <div class="d-flex gap-3 mb-4 flex-wrap">
      <div class="card flex-1" style="min-width:140px">
        <div class="card-body text-center" style="padding:1rem">
          <div class="font-bold" style="font-size:1.5rem">${res.data.total_items}</div>
          <div class="text-xs text-muted">Total Items</div>
        </div>
      </div>
      <div class="card flex-1" style="min-width:140px;border-color:var(--primary)">
        <div class="card-body text-center" style="padding:1rem">
          <div class="font-bold text-primary" style="font-size:1.5rem">R ${parseFloat(totalVal).toFixed(2)}</div>
          <div class="text-xs text-muted">Total Stock Value</div>
        </div>
      </div>
      <div class="card flex-1" style="min-width:140px;border-color:${lowCount ? 'var(--danger)' : 'var(--success)'}">
        <div class="card-body text-center" style="padding:1rem">
          <div class="font-bold ${lowCount ? 'text-danger' : 'text-success'}" style="font-size:1.5rem">${lowCount}</div>
          <div class="text-xs text-muted">Low Stock Items</div>
        </div>
      </div>
    </div>
    ${Object.entries(cats).map(([cat, catItems]) => `
      <div class="mb-4">
        <h6 class="mb-2">${cat} <span class="text-xs text-muted">(${catItems.length} items, R ${catItems.reduce((s, i) => s + parseFloat(i.stock_value || 0), 0).toFixed(2)})</span></h6>
        <div class="table-wrap">
          <table><thead><tr><th>Name</th><th>SKU</th><th>Unit</th><th>On Hand</th><th>Min</th><th>Unit Cost</th><th>Value</th><th>Status</th></tr></thead>
          <tbody>${catItems.map(i => `
            <tr class="${parseFloat(i.qty_on_hand) <= parseFloat(i.min_qty) ? 'tr-warning' : ''}">
              <td class="font-medium">${i.name}</td>
              <td class="text-muted">${i.sku}</td>
              <td>${i.unit || 'each'}</td>
              <td class="${parseFloat(i.qty_on_hand) <= parseFloat(i.min_qty) ? 'text-danger font-bold' : ''}">${parseFloat(i.qty_on_hand).toFixed(2)}</td>
              <td class="text-muted">${parseFloat(i.min_qty).toFixed(2)}</td>
              <td>R ${i.unit_cost ? parseFloat(i.unit_cost).toFixed(2) : '—'}</td>
              <td class="font-medium">R ${parseFloat(i.stock_value || 0).toFixed(2)}</td>
              <td>${parseFloat(i.qty_on_hand) <= parseFloat(i.min_qty) ? '<span class="badge badge-danger">Low</span>' : '<span class="badge badge-success">OK</span>'}</td>
            </tr>`).join('')}
          </tbody></table>
        </div>
      </div>`).join('')}`;
}

// ── Barcode / QR Scanner ──────────────────────────────────────
// targetModal: 'bookin' | 'bookout' | 'return'
let _scanStream = null;

function openBarcodeScanner(targetModal) {
  // Build the scanner overlay
  const overlay = document.createElement('div');
  overlay.id = 'barcode-scanner-overlay';
  overlay.style.cssText = `
    position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:99999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem`;
  overlay.innerHTML = `
    <div style="color:#fff;font-size:1rem;font-weight:600;letter-spacing:.02em">📷 Point camera at QR code or barcode</div>
    <div style="position:relative;width:min(90vw,380px);height:min(90vw,380px);border-radius:12px;overflow:hidden;background:#000">
      <video id="bc-video" playsinline autoplay style="width:100%;height:100%;object-fit:cover"></video>
      <!-- Aiming reticle -->
      <div style="position:absolute;inset:0;pointer-events:none">
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;border:2.5px solid rgba(255,255,255,.7);border-radius:8px;box-shadow:0 0 0 4000px rgba(0,0,0,.35)"></div>
      </div>
      <canvas id="bc-canvas" style="display:none"></canvas>
    </div>
    <div id="bc-status" style="color:rgba(255,255,255,.7);font-size:.85rem;min-height:1.2em">Initialising camera…</div>
    <button type="button" onclick="closeBarcodeScanner()"
      style="margin-top:.5rem;padding:.5rem 1.5rem;border:1.5px solid rgba(255,255,255,.4);border-radius:6px;background:transparent;color:#fff;cursor:pointer;font-size:.9rem">
      ✕ Cancel
    </button>`;
  document.body.appendChild(overlay);

  const video = document.getElementById('bc-video');
  const canvas = document.getElementById('bc-canvas');
  const status = document.getElementById('bc-status');
  let scanning = true;
  let rafId;

  navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false })
    .then(stream => {
      _scanStream = stream;
      video.srcObject = stream;
      video.onloadedmetadata = () => {
        video.play();
        status.textContent = 'Ready — align the code within the frame';
        scanFrame();
      };
    })
    .catch(err => {
      status.textContent = '⚠ Camera access denied or unavailable: ' + err.message;
    });

  function scanFrame() {
    if (!scanning) return;
    if (video.readyState === video.HAVE_ENOUGH_DATA) {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

      let code = null;

      // Try native BarcodeDetector first (Chrome Android, Safari 17+)
      if (window.BarcodeDetector) {
        window._bcDetector = window._bcDetector || new BarcodeDetector({ formats: ['qr_code', 'code_128', 'ean_13', 'ean_8', 'code_39', 'upc_a', 'upc_e', 'data_matrix'] });
        window._bcDetector.detect(canvas)
          .then(barcodes => {
            if (barcodes.length && scanning) {
              const val = barcodes[0].rawValue;
              scanning = false;
              handleScan(val, targetModal);
            }
          })
          .catch(() => { });
      } else if (window.jsQR) {
        // Fallback to jsQR (QR only)
        code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' });
        if (code && scanning) {
          scanning = false;
          handleScan(code.data, targetModal);
        }
      }
    }
    rafId = requestAnimationFrame(scanFrame);
  }

  window._bcScanRafId = rafId;
}

async function handleScan(rawValue, targetModal) {
  closeBarcodeScanner();
  // rawValue is expected to be the SKU
  const sku = rawValue.trim();
  if (!sku) return;

  const res = await API.post('stock/items', { action: 'search', q: sku });
  const items = res.data?.items || [];
  // Try exact SKU match first, then fallback to first result
  const match = items.find(i => i.sku.toUpperCase() === sku.toUpperCase()) || items[0];

  if (!match) {
    Toast.show(`No stock item found for code: ${sku}`, 'error');
    return;
  }

  // Add to the correct modal's cache and call the right add function
  if (targetModal === 'bookin') {
    _bookinItemCache[match.id] = match;
    addBookinLine(match.id);
    Toast.show(`✓ Scanned: ${match.name}`, 'success');
  } else if (targetModal === 'bookout') {
    _bookoutItemCache[match.id] = match;
    addBookoutLine(match.id);
    Toast.show(`✓ Scanned: ${match.name}`, 'success');
  } else if (targetModal === 'return') {
    // Highlight matching row in return list or show toast
    const rtnLines = document.querySelectorAll('.rtn-line');
    let found = false;
    rtnLines.forEach(row => {
      if (String(row.dataset.itemId) === String(match.id)) {
        row.style.outline = '2px solid var(--primary)';
        row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        row.querySelector('.rtn-qty')?.focus();
        found = true;
      }
    });
    Toast.show(found ? `✓ Scanned: ${match.name}` : `Item "${match.name}" is not on this job card.`, found ? 'success' : 'warning');
  }
}

function closeBarcodeScanner() {
  if (_scanStream) { _scanStream.getTracks().forEach(t => t.stop()); _scanStream = null; }
  if (window._bcScanRafId) { cancelAnimationFrame(window._bcScanRafId); }
  const el = document.getElementById('barcode-scanner-overlay');
  if (el) el.remove();
}

// ── Print QR Label ────────────────────────────────────────────
function printItemQR(sku, name) {
  const win = window.open('', '_blank', 'width=400,height=300');
  win.document.write(`<!DOCTYPE html><html><head><title>Label — ${sku}</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"><\/script>
    <style>
      body{margin:0;display:flex;align-items:center;justify-content:center;height:100vh;font-family:sans-serif}
      .label{text-align:center;border:1px solid #ccc;border-radius:6px;padding:12px 16px;width:fit-content}
      .label-name{font-size:11px;font-weight:600;margin-top:6px;max-width:110px;word-break:break-word}
      .label-sku{font-size:10px;color:#666;margin-top:2px}
    </style></head><body>
    <div class="label">
      <div id="qr"></div>
      <div class="label-name">${name}</div>
      <div class="label-sku">${sku}</div>
    </div>
    <script>
      window.onload = () => {
        new QRCode(document.getElementById('qr'), {text:'${sku}',width:110,height:110,correctLevel:QRCode.CorrectLevel.M});
        setTimeout(() => window.print(), 600);
      };
    <\/script></body></html>`);
  win.document.close();
}

window.openBarcodeScanner = openBarcodeScanner;
window.closeBarcodeScanner = closeBarcodeScanner;
window.printItemQR = printItemQR;