/* =========================================================================
 * catalog.js — каталог: филтри, сортиране, грид (клиентски рендер, фаза 1)
 * Поведението повтаря оригиналния макет: URL параметри tab, category, q,
 * type, brand, culture, sub, pkg, avail, wh, sort; страниране по 12.
 * Фаза 2: същата логика става server-side в Spring MVC контролер
 * (правило от salex: sort/filter параметрите идват от URL).
 * ========================================================================= */
(function () {
  'use strict';
  var esc = window.ACM.esc, fmt = window.ACM.fmtPrice, DEMO = window.ACM.demo;
  var PRODUCTS = window.ACM_PRODUCTS || [];
  var PAGE_SIZE = 12;

  /* ---------------------- Икони (Lucide, inline) ------------------------- */
  function icon(paths, size, sw) {
    return '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size +
      '" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="' + (sw || 1.75) +
      '" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + paths + '</svg>';
  }
  var IC = {
    shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path>',
    sprout: '<path d="M14 9.536V7a4 4 0 0 1 4-4h1.5a.5.5 0 0 1 .5.5V5a4 4 0 0 1-4 4 4 4 0 0 0-4 4c0 2 1 3 1 5a5 5 0 0 1-1 3"></path><path d="M4 9a5 5 0 0 1 8 4 5 5 0 0 1-8-4"></path><path d="M5 21h14"></path>',
    droplets: '<path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"></path><path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97"></path>',
    grid: '<rect width="7" height="7" x="3" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="14" rx="1"></rect><rect width="7" height="7" x="3" y="14" rx="1"></rect>',
    wheat: '<path d="M2 22 16 8"></path><path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"></path><path d="M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"></path><path d="M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"></path><path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z"></path><path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z"></path><path d="M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z"></path><path d="M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z"></path>',
    sun: '<circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path>',
    flower: '<path d="M12 5a3 3 0 1 1 3 3m-3-3a3 3 0 1 0-3 3m3-3v1M9 8a3 3 0 1 0 3 3M9 8h1m5 0a3 3 0 1 1-3 3m3-3h-1m-2 3v-1"></path><circle cx="12" cy="8" r="2"></circle><path d="M12 10v12"></path><path d="M12 22c4.2 0 7-1.667 7-5-4.2 0-7 1.667-7 5Z"></path><path d="M12 22c-4.2 0-7-1.667-7-5 4.2 0 7 1.667 7 5Z"></path>',
    grape: '<path d="M22 5V2l-5.89 5.89"></path><circle cx="16.6" cy="15.89" r="3"></circle><circle cx="8.11" cy="7.4" r="3"></circle><circle cx="12.35" cy="11.65" r="3"></circle><circle cx="13.91" cy="5.85" r="3"></circle><circle cx="18.15" cy="10.09" r="3"></circle><circle cx="6.56" cy="13.2" r="3"></circle><circle cx="10.8" cy="17.44" r="3"></circle><circle cx="5" cy="19" r="3"></circle>',
    carrot: '<path d="M15 16a1 1 0 0 0-7-7q-4 4-5.987 12.385a.5.5 0 0 0 .602.602Q11 20 15 16l-3-3"></path><path d="M15 9q4 4 7 0-3-4-7 0 4-4 0-7-4 3 0 7"></path><path d="m8 15-2.58-2.58"></path>',
    clover: '<path d="M16.17 7.83 2 22"></path><path d="M4.02 12a2.827 2.827 0 1 1 3.81-4.17A2.827 2.827 0 1 1 12 4.02a2.827 2.827 0 1 1 4.17 3.81A2.827 2.827 0 1 1 19.98 12a2.827 2.827 0 1 1-3.81 4.17A2.827 2.827 0 1 1 12 19.98a2.827 2.827 0 1 1-4.17-3.81A1 1 0 1 1 4 12"></path><path d="m7.83 7.83 8.34 8.34"></path>',
    minus: '<path d="M5 12h14"></path>',
    plus: '<path d="M5 12h14"></path><path d="M12 5v14"></path>',
    x: '<path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>',
    chevron: '<path d="m6 9 6 6 6-6"></path>',
    package: '<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path><path d="M12 22V12"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><path d="m7.5 4.27 9 5.15"></path>'
  };
  var CULTURE_ICONS = {
    'Пшеница': IC.wheat, 'Царевица': IC.sprout, 'Слънчоглед': IC.sun, 'Рапица': IC.flower,
    'Ечемик': IC.wheat, 'Лозя': IC.grape, 'Зеленчуци': IC.carrot, 'Люцерна': IC.clover
  };
  var QUICKNAV = [
    { category: 'Растителна защита', label: 'Растителна защита', ic: IC.shield,
      activeCls: 'border-green-deep bg-green-deep text-white', idleChip: 'bg-green-tint text-green-deep', idleHover: 'hover:border-green-deep' },
    { category: 'Семена', label: 'Семена', ic: IC.sprout,
      activeCls: 'border-orange-deep bg-orange-deep text-white', idleChip: 'bg-[#fdf1e8] text-orange-deep', idleHover: 'hover:border-orange-deep' },
    { category: 'Торове', label: 'Торове', ic: IC.droplets,
      activeCls: 'border-info bg-info text-white', idleChip: 'bg-[#eef5ff] text-info', idleHover: 'hover:border-info' },
    { category: '', label: 'Всички продукти', ic: IC.grid,
      activeCls: 'border-ink bg-ink text-white', idleChip: 'bg-ink/[0.055] text-ink', idleHover: 'hover:border-ink' }
  ];

  /* ---------------------- Състояние от URL ------------------------------- */
  function listParam(v) { return v ? v.split(',').filter(Boolean) : []; }
  function readState() {
    var p = new URLSearchParams(window.location.search);
    var sort = p.get('sort');
    return {
      tab: p.get('tab') === 'culture' ? 'culture' : 'category',
      category: p.get('category') || '',
      q: p.get('q') || '',
      types: listParam(p.get('type')),
      brands: listParam(p.get('brand')),
      cultures: listParam(p.get('culture')),
      substances: listParam(p.get('sub')),
      packages: listParam(p.get('pkg')),
      onlyAvailable: p.get('avail') === '1',
      warehouse: p.get('wh') || '',
      sort: (sort === 'price-asc' || sort === 'price-desc' || sort === 'stock') ? sort : 'name'
    };
  }
  function writeState(s) {
    var p = new URLSearchParams();
    if (s.tab === 'culture') p.set('tab', 'culture');
    if (s.category) p.set('category', s.category);
    if (s.q) p.set('q', s.q);
    if (s.types.length) p.set('type', s.types.join(','));
    if (s.brands.length) p.set('brand', s.brands.join(','));
    if (s.cultures.length) p.set('culture', s.cultures.join(','));
    if (s.substances.length) p.set('sub', s.substances.join(','));
    if (s.packages.length) p.set('pkg', s.packages.join(','));
    if (s.onlyAvailable) p.set('avail', '1');
    if (s.warehouse) p.set('wh', s.warehouse);
    if (s.sort !== 'name') p.set('sort', s.sort);
    var qs = p.toString();
    history.replaceState(null, '', window.location.pathname + (qs ? '?' + qs : ''));
  }

  var state = readState();
  var shown = PAGE_SIZE;

  /* ---------------------- Филтрираща логика (като оригинала) -------------- */
  var WH_BY_NAME = {};
  DEMO.warehouses.forEach(function (w) { WH_BY_NAME[w.name] = w.key; });

  function packageBucket(p) {
    var u = p.package.unitLabel, bc = p.package.boxContent;
    if (u === 'кг') return 'кг';
    if (u === 'пакет' || u === 'бр.') return 'брой';
    var n = parseFloat(String(bc).replace(/[^0-9.,]/g, '').replace(',', '.'));
    if (!isFinite(n)) return '';
    return n <= 1 ? 'до 1 л' : n <= 5 ? '1–5 л' : n <= 20 ? '5–20 л' : '20+ л';
  }

  function applyFilters(list, s) {
    var wh = s.warehouse ? WH_BY_NAME[s.warehouse] : null;
    var q = s.q.trim().toLowerCase();
    return list.filter(function (e) {
      if (s.category && e.category !== s.category) return false;
      if (q) {
        var inName = e.name.toLowerCase().indexOf(q) !== -1;
        var inSub = e.activeSubstances.some(function (a) { return a.name.toLowerCase().indexOf(q) !== -1; });
        if (!inName && !inSub) return false;
      }
      if (s.types.length && s.types.indexOf(e.productType) === -1) return false;
      if (s.brands.length && s.brands.indexOf(e.brand) === -1) return false;
      if (s.cultures.length && !s.cultures.some(function (c) { return e.cultureTags.indexOf(c) !== -1; })) return false;
      if (s.substances.length && !e.activeSubstances.some(function (a) { return s.substances.indexOf(a.name) !== -1; })) return false;
      if (s.packages.length && s.packages.indexOf(packageBucket(e)) === -1) return false;
      if (s.onlyAvailable) {
        if (wh) {
          var st = e.stock[wh];
          if (st !== 'green' && st !== 'orange') return false;
        } else if (!Object.keys(e.stock).some(function (k) { return e.stock[k] === 'green' || e.stock[k] === 'orange'; })) {
          return false;
        }
      }
      return true;
    });
  }

  var STOCK_RANK = { green: 0, orange: 1, grey: 2, red: 3 };
  function stockRank(p) {
    return Math.min.apply(null, Object.keys(p.stock).map(function (k) { return STOCK_RANK[p.stock[k]]; }));
  }
  function sortProducts(list, sort) {
    var a = list.slice();
    if (sort === 'price-asc') a.sort(function (x, y) { return x.price.perBox - y.price.perBox; });
    else if (sort === 'price-desc') a.sort(function (x, y) { return y.price.perBox - x.price.perBox; });
    else if (sort === 'stock') a.sort(function (x, y) { return stockRank(x) - stockRank(y) || x.name.localeCompare(y.name, 'bg'); });
    else a.sort(function (x, y) { return x.name.localeCompare(y.name, 'bg'); });
    return a;
  }

  /* Броячи по измерение (без собственото, като оригинала) */
  function computeCounts(s) {
    var types = {}, brands = {}, cultures = {};
    applyFilters(PRODUCTS, mergeState(s, { types: [] })).forEach(function (p) {
      types[p.productType] = (types[p.productType] || 0) + 1;
    });
    applyFilters(PRODUCTS, mergeState(s, { brands: [] })).forEach(function (p) {
      if (p.brand) brands[p.brand] = (brands[p.brand] || 0) + 1;
    });
    applyFilters(PRODUCTS, mergeState(s, { cultures: [] })).forEach(function (p) {
      p.cultureTags.forEach(function (c) { cultures[c] = (cultures[c] || 0) + 1; });
    });
    return { types: types, brands: brands, cultures: cultures };
  }
  function mergeState(s, patch) {
    var out = {};
    Object.keys(s).forEach(function (k) { out[k] = s[k]; });
    Object.keys(patch).forEach(function (k) { out[k] = patch[k]; });
    return out;
  }

  /* ---------------------- Продуктова карта (както в оригинала) ------------ */
  function stockButtons(p) {
    return DEMO.warehouses.map(function (w) {
      var st = DEMO.stockStatus[p.stock[w.key]];
      return '<span class="relative inline-flex"><span class="inline-flex">' +
        '<button type="button" aria-label="Склад ' + esc(w.name) + ': ' + st.label + '" title="Склад ' + esc(w.name) + ': ' + st.label + '" class="flex flex-col items-center gap-1 rounded-control px-1 py-0.5">' +
        '<span class="h-2.5 w-2.5 rounded-full ' + st.dot + '" aria-hidden="true"></span>' +
        '<span class="text-[11px] leading-none text-faint" aria-hidden="true">' + w.abbr + '</span>' +
        '</button></span></span>';
    }).join('');
  }

  function productCard(p) {
    var brandBadge = p.brand
      ? '<span class="absolute left-2.5 top-2.5 z-[1] inline-flex items-center gap-1.5 rounded-full bg-surface/90 px-2.5 py-1 text-[12px] font-semibold text-ink shadow-sm backdrop-blur">' +
        '<span class="h-2 w-2 rounded-full" style="background-color:' + (DEMO.brandColors[p.brand] || '#8a9097') + '" aria-hidden="true"></span>' + esc(p.brand) + '</span>'
      : '';
    var img = p.image
      ? '<img alt="' + esc(p.name) + '" loading="lazy" decoding="async" class="object-contain transition-transform duration-150 group-hover:scale-[1.02]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="' + esc(p.image) + '"/>'
      : '<span class="absolute inset-0 grid place-items-center text-faint">' + icon(IC.package, 48, 1.25) + '</span>';
    var chips = '<span class="inline-flex items-center rounded-full border border-border bg-surface-2 px-2 py-0.5 text-[13px] text-muted">кашон ' + esc(p.package.boxContent) + '</span>';
    if (p.package.palletSize) {
      chips += '<span class="inline-flex items-center rounded-full border border-border bg-surface-2 px-2 py-0.5 text-[13px] text-muted">пале ' + esc(p.package.palletSize) + '</span>';
    }
    var isPack = p.package.unitLabel === 'пакет';
    var qtyUnit = isPack ? 'бр.' : 'каш.';
    return '<div class="h-full">' +
      '<div class="group relative flex flex-col overflow-hidden rounded-card border border-border bg-surface shadow-sm transition-[transform,box-shadow,border-color] duration-150 hover:-translate-y-0.5 hover:border-green-deep hover:shadow-lg active:scale-[0.98] h-full">' +
      '<a class="flex flex-col rounded-t-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-deep" href="/product/' + esc(p.id) + '/">' +
      '<div class="relative aspect-[4/3] overflow-hidden bg-surface-2">' + brandBadge + img + '</div>' +
      '<div class="flex flex-1 flex-col gap-2 p-4">' +
      '<p class="text-[12px] uppercase tracking-wide text-faint">' + esc(p.subcategory) + '</p>' +
      '<h3 class="line-clamp-2 min-h-[2.6rem] text-[18px] font-bold leading-tight text-ink">' + esc(p.name) + '</h3>' +
      '<p class="tnum text-[13px] text-faint">Арт. № ' + esc(p.artNumber) + '</p>' +
      '<div class="flex flex-wrap gap-1.5">' + chips + '</div>' +
      '<div class="mt-1">' +
      '<p class="text-[12px] text-muted">Цена на ' + (isPack ? 'пакет' : 'кашон') + '</p>' +
      '<p class="tnum text-[20px] font-bold text-ink">' + fmt(p.price.perBox) + '</p>' +
      '<p class="tnum text-[14px] text-muted">Цена на ' + esc(p.package.unitLabel) + ': ' + fmt(p.price.perUnit) + '</p>' +
      '</div>' +
      '<div class="mt-1"><div class="flex items-center gap-3" role="group" aria-label="Наличност по складове">' + stockButtons(p) + '</div></div>' +
      '</div></a>' +
      '<div class="mt-auto flex flex-col gap-2.5 p-4 pt-0">' +
      '<div class="inline-flex items-stretch overflow-hidden rounded-control border border-border bg-surface self-start">' +
      '<button type="button" disabled aria-label="Намали количеството" class="grid h-11 w-11 shrink-0 place-items-center text-ink transition-colors hover:bg-surface-2 disabled:pointer-events-none disabled:opacity-40 border-r border-border">' + icon(IC.minus, 20) + '</button>' +
      '<div class="flex items-center">' +
      '<input type="number" inputmode="numeric" min="1" max="9999" aria-label="Количество" class="tnum h-11 w-12 bg-surface text-center text-[16px] text-ink focus:outline-none focus:ring-2 focus:ring-inset focus:ring-green-deep [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" value="1"/>' +
      '<span class="select-none pr-2 text-[14px] text-muted">' + qtyUnit + '</span>' +
      '</div>' +
      '<button type="button" aria-label="Увеличи количеството" class="grid h-11 w-11 shrink-0 place-items-center text-ink transition-colors hover:bg-surface-2 disabled:pointer-events-none disabled:opacity-40 border-l border-border">' + icon(IC.plus, 20) + '</button>' +
      '</div>' +
      '<button type="button" data-add class="inline-flex select-none items-center justify-center gap-2 whitespace-nowrap font-medium transition-[transform,background-color,border-color,box-shadow,opacity] active:scale-[0.98] disabled:pointer-events-none disabled:opacity-45 bg-brand-green text-ink hover:bg-[#93bd49] min-h-[44px] px-4 text-[16px] radius-signature w-full">' +
      icon(IC.plus, 20) + 'Добавяне</button>' +
      '</div></div></div>';
  }

  /* ---------------------- Рендер: бърза навигация ------------------------- */
  function renderQuickNav() {
    var counts = {};
    PRODUCTS.forEach(function (p) { counts[p.category] = (counts[p.category] || 0) + 1; });
    var el = document.getElementById('catalog-quicknav');
    el.innerHTML = QUICKNAV.map(function (c) {
      var active = state.category === c.category && state.tab === 'category';
      var n = c.category === '' ? PRODUCTS.length : (counts[c.category] || 0);
      return '<button type="button" data-cat="' + esc(c.category) + '" aria-pressed="' + active + '" class="group flex min-w-[168px] shrink-0 snap-start items-center gap-3 rounded-card border p-3 text-left transition-all duration-150 md:min-w-0 ' +
        (active ? c.activeCls + ' shadow-sm' : 'border-border bg-surface hover:-translate-y-0.5 hover:shadow-sm ' + c.idleHover) + '">' +
        '<span class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl rounded-tr-none transition-transform duration-150 group-hover:scale-[1.06] ' +
        (active ? 'bg-white/20 text-current' : c.idleChip) + '">' + icon(c.ic, 22) + '</span>' +
        '<span class="min-w-0">' +
        '<span class="block truncate text-[15px] font-semibold leading-tight">' + esc(c.label) + '</span>' +
        '<span class="tnum text-[13px] ' + (active ? 'text-current/80' : 'text-faint') + '">' + n + ' ' + (n === 1 ? 'продукт' : 'продукта') + '</span>' +
        '</span></button>';
    }).join('');
    Array.prototype.forEach.call(el.querySelectorAll('button[data-cat]'), function (b) {
      b.addEventListener('click', function () {
        var c = b.getAttribute('data-cat');
        update({ tab: 'category', category: state.category === c ? '' : c });
      });
    });
  }

  /* ---------------------- Рендер: табове и култури ------------------------ */
  function renderTabs() {
    var tabCat = document.getElementById('catalog-tab-category');
    var tabCul = document.getElementById('catalog-tab-culture');
    var underline = '<span class="absolute inset-x-3 bottom-0 h-[3px] rounded-full bg-brand-green" aria-hidden="true"></span>';
    [[tabCat, 'category', 'По категория'], [tabCul, 'culture', 'По култура']].forEach(function (t) {
      var el = t[0], key = t[1], label = t[2], sel = state.tab === key;
      el.setAttribute('aria-selected', String(sel));
      el.className = 'relative min-h-[44px] px-4 text-[15px] font-medium transition-colors ' + (sel ? 'text-ink' : 'text-muted hover:text-ink');
      el.innerHTML = esc(label) + (sel ? underline : '');
    });
    document.getElementById('catalog-culture-picker').hidden = state.tab !== 'culture';
    document.getElementById('catalog-layout').className = state.tab === 'category' ? 'lg:grid lg:grid-cols-[280px_1fr] lg:gap-8' : '';
    document.getElementById('catalog-sidebar').style.display = state.tab === 'category' ? '' : 'none';
    document.getElementById('catalog-filters-open').style.display = state.tab === 'category' ? '' : 'none';
    if (state.tab === 'culture') renderCultureChips();
  }
  function renderCultureChips() {
    var el = document.getElementById('catalog-culture-chips');
    el.innerHTML = DEMO.cultures.map(function (c) {
      var sel = state.cultures.indexOf(c) !== -1;
      return '<button type="button" data-culture="' + esc(c) + '" aria-pressed="' + sel + '" class="inline-flex min-h-[44px] items-center gap-2 rounded-control border px-4 text-[15px] transition-colors ' +
        (sel ? 'border-green-deep bg-green-tint text-ink' : 'border-border bg-surface text-muted hover:border-green-deep hover:text-ink') + '">' +
        icon(CULTURE_ICONS[c] || IC.sprout, 18) + esc(c) + '</button>';
    }).join('');
    Array.prototype.forEach.call(el.querySelectorAll('button[data-culture]'), function (b) {
      b.addEventListener('click', function () {
        var c = b.getAttribute('data-culture');
        var list = state.cultures.slice();
        var i = list.indexOf(c);
        if (i === -1) list.push(c); else list.splice(i, 1);
        update({ cultures: list });
      });
    });
  }

  /* ---------------------- Рендер: панел с филтри -------------------------- */
  function checkRow(group, value, label, count, checked) {
    return '<label class="flex min-h-[36px] cursor-pointer items-center gap-2.5 py-1">' +
      '<input type="checkbox" data-fgroup="' + group + '" value="' + esc(value) + '"' + (checked ? ' checked' : '') +
      ' class="h-4 w-4 shrink-0 rounded border-border accent-green-deep"/>' +
      '<span class="flex-1 text-[14px] text-ink">' + esc(label) + '</span>' +
      (count !== null ? '<span class="tnum text-[12px] text-faint">' + count + '</span>' : '') +
      '</label>';
  }
  function filterSection(title, inner, open) {
    return '<details class="border-b border-border py-1"' + (open ? ' open' : '') + '>' +
      '<summary class="flex min-h-[44px] cursor-pointer list-none items-center justify-between text-[14px] font-bold text-ink [&::-webkit-details-marker]:hidden">' +
      esc(title) + '<span class="acm-details-chevron text-faint">' + icon(IC.chevron, 16) + '</span></summary>' +
      '<div class="pb-3">' + inner + '</div></details>';
  }
  function uniqueSubstances() {
    var set = {};
    PRODUCTS.forEach(function (p) {
      p.activeSubstances.forEach(function (s) { set[s.name] = true; });
    });
    return Object.keys(set).sort(function (a, b) { return a.localeCompare(b, 'bg'); });
  }
  function renderFilters() {
    var counts = computeCounts(state);
    var types = {};
    PRODUCTS.forEach(function (p) { types[p.productType] = true; });
    var html = '';
    html += filterSection('Тип продукт', Object.keys(types).sort(function (a, b) { return a.localeCompare(b, 'bg'); }).map(function (t) {
      return checkRow('types', t, t, counts.types[t] || 0, state.types.indexOf(t) !== -1);
    }).join(''), true);
    var brands = {};
    PRODUCTS.forEach(function (p) { if (p.brand) brands[p.brand] = true; });
    html += filterSection('Марка', Object.keys(brands).sort().map(function (b) {
      return checkRow('brands', b, b, counts.brands[b] || 0, state.brands.indexOf(b) !== -1);
    }).join(''), state.brands.length > 0);
    html += filterSection('Култура', DEMO.cultures.map(function (c) {
      return checkRow('cultures', c, c, counts.cultures[c] || 0, state.cultures.indexOf(c) !== -1);
    }).join(''), state.cultures.length > 0);
    html += filterSection('Активно вещество', uniqueSubstances().map(function (s) {
      return checkRow('substances', s, s, null, state.substances.indexOf(s) !== -1);
    }).join(''), state.substances.length > 0);
    html += filterSection('Опаковка', DEMO.packagingBuckets.map(function (b) {
      return checkRow('packages', b, b, null, state.packages.indexOf(b) !== -1);
    }).join(''), state.packages.length > 0);
    var whOptions = '<option value="">Всички складове</option>' + DEMO.warehouses.map(function (w) {
      return '<option value="' + esc(w.name) + '"' + (state.warehouse === w.name ? ' selected' : '') + '>' + esc(w.name) + '</option>';
    }).join('');
    html += filterSection('Наличност',
      checkRow('avail', '1', 'Само налични', null, state.onlyAvailable) +
      '<select data-fgroup="warehouse" aria-label="Склад" class="mt-2 h-11 w-full rounded-control border border-border bg-surface px-3 text-[14px] text-ink focus:outline-none focus:ring-2 focus:ring-green-deep">' +
      whOptions + '</select>', state.onlyAvailable);

    ['catalog-filters', 'catalog-filters-mobile'].forEach(function (id) {
      var el = document.getElementById(id);
      el.innerHTML = html;
      Array.prototype.forEach.call(el.querySelectorAll('input[data-fgroup]'), function (inp) {
        inp.addEventListener('change', function () {
          var g = inp.getAttribute('data-fgroup');
          if (g === 'avail') { update({ onlyAvailable: inp.checked }); return; }
          var list = state[g].slice();
          var i = list.indexOf(inp.value);
          if (inp.checked && i === -1) list.push(inp.value);
          if (!inp.checked && i !== -1) list.splice(i, 1);
          var patch = {}; patch[g] = list;
          update(patch);
        });
      });
      var sel = el.querySelector('select[data-fgroup="warehouse"]');
      if (sel) sel.addEventListener('change', function () { update({ warehouse: sel.value }); });
    });
  }

  /* ---------------------- Рендер: активни филтри -------------------------- */
  function activeFilterChips(s) {
    var chips = [];
    s.types.forEach(function (v) { chips.push({ key: 'type:' + v, label: v }); });
    s.brands.forEach(function (v) { chips.push({ key: 'brand:' + v, label: v }); });
    s.cultures.forEach(function (v) { chips.push({ key: 'culture:' + v, label: v }); });
    s.substances.forEach(function (v) { chips.push({ key: 'sub:' + v, label: v }); });
    s.packages.forEach(function (v) { chips.push({ key: 'pkg:' + v, label: v }); });
    if (s.onlyAvailable) chips.push({ key: 'avail', label: s.warehouse ? 'Налични: ' + s.warehouse : 'Само налични' });
    if (s.q) chips.push({ key: 'q', label: 'Търсене: „' + s.q + '"' });
    return chips;
  }
  function removeChip(key) {
    if (key === 'avail') { update({ onlyAvailable: false }); return; }
    if (key === 'q') { update({ q: '' }); return; }
    var i = key.indexOf(':');
    var g = { type: 'types', brand: 'brands', culture: 'cultures', sub: 'substances', pkg: 'packages' }[key.slice(0, i)];
    var v = key.slice(i + 1);
    if (!g) return;
    var patch = {}; patch[g] = state[g].filter(function (x) { return x !== v; });
    update(patch);
  }
  function renderChipsRow(resultCount) {
    var chips = activeFilterChips(state);
    var el = document.getElementById('catalog-chips');
    var countTxt = '<span class="tnum text-[14px] text-muted">' + resultCount + ' ' + (resultCount === 1 ? 'продукт' : 'продукта') + '</span>';
    if (!chips.length) { el.innerHTML = countTxt; return; }
    el.innerHTML = '<div class="flex flex-wrap items-center gap-2">' + countTxt +
      chips.map(function (c) {
        return '<button type="button" data-chip="' + esc(c.key) + '" class="inline-flex items-center gap-1.5 rounded-full border border-green-deep/30 bg-green-tint px-3 py-1.5 text-[13px] text-ink transition-colors hover:border-green-deep">' +
          esc(c.label) + icon(IC.x, 14) + '</button>';
      }).join('') +
      '<button type="button" data-clear class="text-[13px] font-medium text-green-deep transition-colors hover:text-ink">Изчисти филтрите</button></div>';
    Array.prototype.forEach.call(el.querySelectorAll('button[data-chip]'), function (b) {
      b.addEventListener('click', function () { removeChip(b.getAttribute('data-chip')); });
    });
    var clr = el.querySelector('button[data-clear]');
    if (clr) clr.addEventListener('click', clearFilters);
  }
  function clearFilters() {
    update({ types: [], brands: [], cultures: [], substances: [], packages: [], onlyAvailable: false, warehouse: '', q: '' });
  }

  /* ---------------------- Рендер: грид ------------------------------------ */
  function renderGrid() {
    var results = sortProducts(applyFilters(PRODUCTS, state), state.sort);
    var visible = results.slice(0, shown);
    var grid = document.getElementById('catalog-grid');
    grid.innerHTML = visible.map(productCard).join('');
    document.getElementById('catalog-empty').hidden = results.length > 0;
    document.getElementById('catalog-more-wrap').hidden = results.length <= shown;
    renderChipsRow(results.length);
    document.getElementById('catalog-filters-open-label').textContent = 'Филтри (' + activeFilterChips(state).length + ')';
    document.getElementById('catalog-sheet-apply').textContent = 'Покажи ' + results.length + ' ' + (results.length === 1 ? 'продукт' : 'продукта');
    document.getElementById('catalog-breadcrumb').textContent = state.category || 'Каталог';

    /* Свързване на купуващите контроли (стъпер + Добавяне) */
    Array.prototype.forEach.call(grid.querySelectorAll('div.group'), function (card) {
      var a = card.querySelector('a[href^="/product/"]');
      if (!a) return;
      var id = (a.getAttribute('href').match(/^\/product\/([^\/]+)\//) || [])[1];
      var input = card.querySelector('input[aria-label="Количество"]');
      var btns = card.querySelectorAll('.inline-flex.items-stretch button');
      var addBtn = card.querySelector('button[data-add]');
      function val() { var v = parseInt(input.value, 10); return isNaN(v) ? 1 : Math.min(9999, Math.max(1, v)); }
      function sync() { input.value = String(val()); btns[0].disabled = val() <= 1; btns[1].disabled = val() >= 9999; }
      btns[0].addEventListener('click', function () { input.value = String(val() - 1); sync(); });
      btns[1].addEventListener('click', function () { input.value = String(val() + 1); sync(); });
      input.addEventListener('change', sync);
      addBtn.addEventListener('click', function () {
        var p = window.ACM.findProduct(id);
        window.ACM.cart.add(id, val());
        window.ACM.showToast(p.name + ' е добавен в количката', {
          actionLabel: 'Виж количката',
          onAction: function () { window.location.href = '/cart/'; }
        });
      });
    });
  }

  /* ---------------------- Обновяване -------------------------------------- */
  function update(patch) {
    state = mergeState(state, patch);
    shown = PAGE_SIZE;
    writeState(state);
    renderAll();
  }
  function renderAll() {
    renderQuickNav();
    renderTabs();
    renderFilters();
    renderGrid();
  }

  /* ---------------------- Инициализация ----------------------------------- */
  document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('catalog-tab-category').addEventListener('click', function () { update({ tab: 'category' }); });
    document.getElementById('catalog-tab-culture').addEventListener('click', function () { update({ tab: 'culture' }); });
    document.getElementById('catalog-sort').value = state.sort;
    document.getElementById('catalog-sort').addEventListener('change', function (e) { update({ sort: e.target.value }); });
    document.getElementById('catalog-more').addEventListener('click', function () { shown += PAGE_SIZE; renderGrid(); });
    document.getElementById('catalog-empty-clear').addEventListener('click', clearFilters);

    var sheet = document.getElementById('catalog-sheet');
    function setSheet(open) {
      sheet.hidden = !open;
      document.body.style.overflow = open ? 'hidden' : '';
    }
    document.getElementById('catalog-filters-open').addEventListener('click', function () { setSheet(true); });
    document.getElementById('catalog-sheet-close').addEventListener('click', function () { setSheet(false); });
    document.getElementById('catalog-sheet-scrim').addEventListener('click', function () { setSheet(false); });
    document.getElementById('catalog-sheet-apply').addEventListener('click', function () { setSheet(false); });
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !sheet.hidden) setSheet(false); });

    renderAll();
  });
})();