{%- assign _label = label | default: 'Vendus' -%}
{%- assign _unit  = unit  | default: '' -%}

{%- assign current_inventory = 0 -%}
{%- for v in product.variants -%}
  {%- if v.inventory_management -%}
    {%- assign current_inventory = current_inventory | plus: v.inventory_quantity -%}
  {%- endif -%}
{%- endfor -%}

{%- assign initial_stock = product.metafields.custom.initial_stock | default: 0 -%}
{%- assign sold = initial_stock | minus: current_inventory -%}
{%- if sold < 0 -%}{%- assign sold = 0 -%}{%- endif -%}

<div class="lgc-wrap">
  <div class="lgc" role="status" aria-live="polite"
       data-sold="{{ sold | round }}"
       data-label="{{ _label | escape }}"
       data-unit="{{ _unit | escape }}">
    <span class="lgc-icon" aria-hidden="true"></span>
    <span class="lgc-num" id="lgcNum">0</span>
    <span class="lgc-label" id="lgcLabel"></span>
  </div>
</div>

<style>
  .lgc-wrap{display:flex;justify-content:center;align-items:center;width:100%;margin:8px 0 18px;}
  .lgc{
    --lgc-accent:#06b6d4;--lgc-accent2:#6366f1;--lgc-bg:rgba(255,255,255,.55);
    --lgc-border:rgba(255,255,255,.85);--lgc-ink:#0b0b0c;--lgc-shadow:0 12px 30px rgba(0,0,0,.12);
    position:relative;display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;
    color:var(--lgc-ink);background:
      radial-gradient(120% 180% at 10% 20%, rgba(255,255,255,.75), transparent 55%),
      radial-gradient(120% 160% at 80% 30%, rgba(255,255,255,.55), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,.25));
    border:1px solid var(--lgc-border);box-shadow:var(--lgc-shadow);
    backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);overflow:hidden;
  }
  .lgc::after{content:"";position:absolute;inset:-30% -60%;
    background:linear-gradient(115deg,transparent 12%,rgba(255,255,255,.85) 18%,rgba(255,255,255,.35) 23%,transparent 30%);
    transform:translateX(-25%);animation:lgc-sheen 5.5s cubic-bezier(.2,.8,.2,1) infinite;pointer-events:none;mix-blend-mode:screen;}
  @keyframes lgc-sheen{0%{transform:translateX(-30%) rotate(.001deg);}55%{transform:translateX(30%) rotate(.001deg);}100%{transform:translateX(-30%) rotate(.001deg);}}
  .lgc::before{content:"";position:absolute;inset:0;border-radius:inherit;
    background:conic-gradient(from 210deg at 50% 50%,
      color-mix(in oklab,var(--lgc-accent) 45%,transparent) 0 20%,
      color-mix(in oklab,var(--lgc-accent2) 45%,transparent) 20% 40%,
      transparent 40% 100%);opacity:.35;filter:blur(16px);pointer-events:none;}
  .lgc-icon{width:22px;height:22px;flex:0 0 auto;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff 0 35%,rgba(255,255,255,.1) 60%),
               radial-gradient(circle at 70% 70%,color-mix(in oklab,var(--lgc-accent) 65%,transparent),transparent 60%),
               radial-gradient(circle at 30% 80%,color-mix(in oklab,var(--lgc-accent2) 65%,transparent),transparent 60%);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.8),0 4px 12px rgba(0,0,0,.12);}
  .lgc-num{font:700 20px/1.1 ui-rounded,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,system-ui,sans-serif;letter-spacing:.3px;font-variant-numeric:tabular-nums lining-nums;}
  .lgc-label{font-size:13px;opacity:.7;}
  @supports not ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))){.lgc{background:rgba(255,255,255,.85);}}
</style>

<script>
(function(){
  var container = document.currentScript ? document.currentScript.previousElementSibling : null;
  if(!container || !container.classList || !container.classList.contains('lgc')){
    container = document.querySelector('.lgc');
  }
  if(!container) return;

  // --- Fallbacks si Liquid n'est pas interprété (ex. forum Odoo) ---
  function hasLiquid(t){ return /{{|}}/.test(String(t||'')); }

  var ds = container.getAttribute('data-sold');
  var target = /^\d+$/.test(ds) ? parseInt(ds,10) : (hasLiquid(ds) ? 128 : parseInt(ds||'0',10));
  if(!isFinite(target) || target < 0) target = 0;

  var lblAttr = container.getAttribute('data-label');
  var label   = (!lblAttr || hasLiquid(lblAttr)) ? 'Vendus' : lblAttr;

  var unitAttr = container.getAttribute('data-unit');
  var unit     = (!unitAttr || hasLiquid(unitAttr)) ? '' : unitAttr;

  var numEl = container.querySelector('#lgcNum');
  var labEl = container.querySelector('#lgcLabel');
  if(labEl) labEl.textContent = label;

  function fmt(n){ return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '\u00A0') + (unit ? unit : ''); }
  function easeOutCubic(t){ return 1 - Math.pow(1 - t, 3); }
  function countTo(elNum, end, ms){
    var start = 0, startTs = null;
    function step(ts){
      if(!startTs) startTs = ts;
      var p = Math.min(1, (ts - startTs)/ms);
      var val = Math.round(start + (end - start)*easeOutCubic(p));
      elNum.textContent = fmt(val);
      if(p < 1){ requestAnimationFrame(step); }
    }
    requestAnimationFrame(step);
  }

  var started = false;
  var io = new IntersectionObserver(function(entries){
    entries.forEach(function(e){
      if(e.isIntersecting && !started){
        started = true;
        countTo(numEl, target, 1200);
      }
    });
  }, {threshold:.2});
  io.observe(container);
})();
</script>