{% extends "base.html" %}
{% block title %}Поиск товара — C5{% endblock %}
{% block header %}Поиск{% endblock %}
{% block content %}

<div class="card">
  <label class="field">
    <span>Наименование, артикул или ШК</span>
    <div style="display:flex;gap:6px">
      <input id="q" type="search" autocapitalize="none"
             autocomplete="off" placeholder="Начните вводить…"
             style="flex:1" autofocus>
      <button type="button" id="scanBtn" class="btn"
              style="width:auto;padding:10px 14px">📷</button>
    </div>
  </label>
</div>

<div id="result">
  <div class="loading">Начните вводить или отсканируйте ШК</div>
</div>

{% endblock %}
{% block scripts %}
<script>
  const qInput  = document.getElementById('q');
  const result  = document.getElementById('result');
  let timer = null;

  (async () => {
    if (!Auth.require()) return;

    qInput.addEventListener('input', () => {
      clearTimeout(timer);
      timer = setTimeout(runSearch, 250);
    });

    document.getElementById('scanBtn').onclick = async () => {
      try {
        const code = await scanBarcode();
        if (!code) return;
        qInput.value = code;

        if (Offline.isOnline) {
          try {
            const p = await api('/products/by-barcode/' +
                                encodeURIComponent(code));
            if (p && !isOffline(p)) {
              location.href = '/m/product/' + p.id;
              return;
            }
          } catch (e) { /* 404 — не нашли */ }
        }
        runSearch();
      } catch (e) {
        toast(e.message || 'Сканер не сработал', 'err');
      }
    };
  })();

  async function runSearch() {
    const q = qInput.value.trim();
    result.innerHTML = '';
    if (!q) {
      result.append(h('div', { class: 'loading' },
        'Начните вводить или отсканируйте ШК'));
      return;
    }
    result.append(h('div', { class: 'loading' }, 'Поиск…'));
    try {
      const res = await api('/products?search=' + encodeURIComponent(q));

      // Офлайн — данных нет
      if (isOffline(res)) {
        result.innerHTML = '';
        result.append(h('div', { class: 'card' },
          h('div', { class: 'empty' },
            'Нет соединения. Поиск недоступен в офлайне.')));
        return;
      }

      const items = asArray(res);
      result.innerHTML = '';
      if (!items.length) {
        result.append(h('div', { class: 'card' },
          h('div', { class: 'empty' }, 'Ничего не найдено'),
          h('a', { class: 'btn', href: '/m/product/new',
                   style: 'margin-top:8px' },
            '+ Создать товар')));
        return;
      }
      const list = h('div', { class: 'list' });
      for (const p of items) {
        list.append(h('a', {
          class: 'row',
          href: '/m/product/' + p.id,
        },
          h('div', { class: 'row-main' },
            h('div', { class: 'row-title' }, p.name || ('#' + p.id)),
            h('div', { class: 'row-sub' },
              (p.sku || '') +
              (p.barcode ? ' · ШК ' + p.barcode : '') +
              (p.category ? ' · ' + p.category : '')),
          ),
          h('div', { class: 'row-badge' },
            String(p.stock != null ? p.stock : 0)),
        ));
      }
      result.append(list);
    } catch (e) {
      result.innerHTML = '';
      result.append(h('div', { class: 'card' },
        h('div', { class: 'error' }, e.message)));
    }
  }
</script>
{% endblock %}