{%- comment -%}
  Low Stock Alert — inventory urgency from the REAL variant inventory.

  Only shows when inventory is actually tracked and actually at or below
  your threshold. If Shopify isn't tracking the variant, inventory_quantity
  is meaningless, so the section renders nothing rather than inventing a
  number. There is an explicit "static" mode if you want a fixed message,
  but it is off by default — a fake scarcity counter is a real trust and
  advertising-standards risk, not just a design choice.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
  assign p = s.product
  if p == blank and product != blank
    assign p = product
  endif

  assign v = p.selected_or_first_available_variant
  assign tracked = false
  if v.inventory_management != blank
    assign tracked = true
  endif
  assign qty = v.inventory_quantity
  assign show = false
  if s.mode == 'static'
    assign show = true
  elsif tracked and qty > 0 and qty <= s.threshold
    assign show = true
  endif
  if s.mode == 'static'
    assign qty = s.static_qty
  endif
  assign pct = 0
  if s.threshold > 0 and qty > 0
    assign pct = qty | times: 100 | divided_by: s.threshold
    if pct > 100
      assign pct = 100
    endif
  endif
-%}

{%- if show -%}
{% style %}
  .lsa-{{ uid }} { padding: {{ s.padding_y }}px 0; }
  .lsa-{{ uid }}__box {
    max-width: {{ s.max_width }}px; margin: 0 auto;
    padding: {{ s.card_padding }}px;
    border-radius: {{ s.radius }}px;
    background: {{ s.bg_color }}; color: {{ s.text_color }};
    border: 1px solid {{ s.border_color }};
  }
  .lsa-{{ uid }}__row { display: flex; align-items: center; gap: 10px; }
  .lsa-{{ uid }}__dot {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
    background: {{ s.accent }};
    {% if s.pulse %}animation: lsaPulse-{{ uid }} 1.6s ease-out infinite;{% endif %}
  }
  @keyframes lsaPulse-{{ uid }} {
    0%   { box-shadow: 0 0 0 0 {{ s.accent }}; opacity: 1; }
    100% { box-shadow: 0 0 0 9px rgba(0,0,0,0); opacity: .7; }
  }
  .lsa-{{ uid }}__msg { margin: 0; font-size: {{ s.text_size }}px; font-weight: 600; }
  .lsa-{{ uid }}__msg b { color: {{ s.accent }}; }
  .lsa-{{ uid }}__track {
    height: {{ s.bar_height }}px; border-radius: {{ s.bar_height }}px;
    background: {{ s.track_color }}; overflow: hidden; margin-top: 10px;
  }
  .lsa-{{ uid }}__fill {
    height: 100%; border-radius: inherit; background: {{ s.accent }};
    width: {{ pct }}%;
  }
  @media (prefers-reduced-motion: reduce) { .lsa-{{ uid }}__dot { animation: none; } }
{% endstyle %}

<div class="lsa-{{ uid }}">
  <div class="page-width">
    <div class="lsa-{{ uid }}__box">
      <div class="lsa-{{ uid }}__row">
        {%- if s.show_dot -%}<span class="lsa-{{ uid }}__dot"></span>{%- endif -%}
        <p class="lsa-{{ uid }}__msg">
          {%- if s.mode == 'static' -%}
            {{ s.static_message | replace: '[qty]', s.static_qty }}
          {%- else -%}
            {{ s.message | replace: '[qty]', qty }}
          {%- endif -%}
        </p>
      </div>
      {%- if s.show_bar -%}
        <div class="lsa-{{ uid }}__track"><div class="lsa-{{ uid }}__fill"></div></div>
      {%- endif -%}
    </div>
  </div>
</div>
{%- endif -%}

{% schema %}
{
  "name": "Low Stock Alert",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "Live mode reads real inventory and shows nothing unless the variant is tracked and at or below the threshold."
    },
    {
      "type": "product",
      "id": "product",
      "label": "Product",
      "info": "Leave blank on a product page to use that product."
    },
    {
      "type": "select",
      "id": "mode",
      "label": "Mode",
      "default": "live",
      "options": [
        {
          "value": "live",
          "label": "Live inventory (recommended)"
        },
        {
          "value": "static",
          "label": "Static message"
        }
      ]
    },
    {
      "type": "range",
      "id": "threshold",
      "min": 1,
      "max": 100,
      "step": 1,
      "label": "Show when stock is at or below",
      "default": 10
    },
    {
      "type": "text",
      "id": "message",
      "label": "Live message",
      "default": "Only <b>[qty]</b> left in stock",
      "info": "Use [qty] for the real remaining quantity."
    },
    {
      "type": "text",
      "id": "static_message",
      "label": "Static message",
      "default": "Only [qty] left in stock",
      "info": "Use [qty] to show the number you set below."
    },
    {
      "type": "range",
      "id": "static_qty",
      "min": 1,
      "max": 99,
      "step": 1,
      "label": "Number to show",
      "default": 5,
      "info": "Manual mode only. Set this to the stock you actually have."
    },
    {
      "type": "checkbox",
      "id": "show_dot",
      "label": "Show status dot",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "pulse",
      "label": "Pulse the dot",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_bar",
      "label": "Show stock bar",
      "default": true
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "range",
      "id": "max_width",
      "min": 280,
      "max": 1000,
      "step": 20,
      "unit": "px",
      "label": "Max width",
      "default": 520
    },
    {
      "type": "range",
      "id": "card_padding",
      "min": 6,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding",
      "default": 14
    },
    {
      "type": "range",
      "id": "radius",
      "min": 0,
      "max": 28,
      "step": 2,
      "unit": "px",
      "label": "Corner radius",
      "default": 10
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 11,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Text size",
      "default": 14
    },
    {
      "type": "range",
      "id": "bar_height",
      "min": 3,
      "max": 16,
      "step": 1,
      "unit": "px",
      "label": "Bar height",
      "default": 6
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background",
      "default": "#fff6f4"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border",
      "default": "#f3d8d2"
    },
    {
      "type": "color",
      "id": "accent",
      "label": "Accent",
      "default": "#d7422f"
    },
    {
      "type": "color",
      "id": "track_color",
      "label": "Bar track",
      "default": "#f0ded9"
    },
    {
      "type": "range",
      "id": "padding_y",
      "min": 0,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Vertical padding",
      "default": 12
    }
  ],
  "presets": [
    {
      "name": "Low Stock Alert"
    }
  ]
}
{% endschema %}
