{% extends "base.html" %}
{% block title %}Ячейка — C5{% endblock %}
{% block header %}Ячейка{% endblock %}
{% block content %}

<form id="cellForm" class="card">
  <label class="field">
    <span>Код / адрес / штрихкод ячейки</span>
    <input name="code" type="text" autocapitalize="none"
           autofocus placeholder="Например: 01 или A-01-01-01-01">
  </label>
  <button class="btn btn-primary" type="submit">Найти</button>
</form>
<div id="result" hidden></div>

{% endblock %}
{% block scripts %}
<script>
  (async () => {
    if (!Auth.require()) return;

    const form = document.getElementById('cellForm');
    const out = document.getElementById('result');

    function showMessage(text, kind) {
      out.hidden = false;
      out.innerHTML = '';
      const cls = kind === 'error' ? 'error' : 'empty';
      out.append(h('div', { class: 'card' },
        h('div', { class: cls }, text)));
    }

    function asArray(v) {
      return Array.isArray(v) ? v : [];
    }

    function looksLikeCell(c) {
      return c && typeof c === 'object'
             && (typeof c.id === 'number' || typeof c.id === 'string')
             && (c.address || c.code);
    }

    form.addEventListener('submit', async (e) => {
      e.preventDefault();

      const raw = (new FormData(form).get('code') || '').toString();
      const code = raw.trim();
      if (!code) {
        showMessage('Введите код ячейки', 'empty');
        return;
      }

      out.hidden = true;
      out.innerHTML = '';

      try {
        // 1. Точное совпадение (ШК / адрес / код)
        let exact = null;
        try {
          const r = await api('/cells/by-barcode/'
                              + encodeURIComponent(code));
          if (looksLikeCell(r)) exact = r;
        } catch (err) {
          // 404 или другая ошибка — идём в поиск
          if (err && err.message && !err.message.includes('404')) {
            console.warn('by-barcode:', err.message);
          }
        }

        if (exact) {
          await showCell(exact);
          return;
        }

        // 2. Подстрочный поиск
        let items = [];
        try {
          const r = await api('/cells/search?q='
                              + encodeURIComponent(code)
                              + '&limit=50');
          items = asArray(r).filter(looksLikeCell);
        } catch (err) {
          console.warn('search:', err.message);
          items = [];
        }

        if (!items.length) {
          showMessage('Ячейка не найдена. Справочник ячеек пуст '
                      + 'или код введён неверно.', 'empty');
          return;
        }

        if (items.length === 1) {
          await showCell(items[0]);
          return;
        }

        // 3. Несколько — даём выбрать
        out.hidden = false;
        out.innerHTML = '';
        out.append(h('div', { class: 'card' },
          h('div', { class: 'row-sub' },
            'Найдено ' + items.length + ' ячеек — выберите:')));

        const list = h('div', { class: 'list' });
        for (const c of items) {
          list.append(h('div', {
            class: 'row',
            onclick: () => {
              out.innerHTML = '';
              out.hidden = true;
              showCell(c);
            },
          },
            h('div', { class: 'row-main' },
              h('div', { class: 'row-title' },
                c.address || c.code || ('#' + c.id)),
              h('div', { class: 'row-sub' },
                (c.location_name || c.location ||
                  ('склад ' + c.location_id)) +
                (c.barcode ? ' · ' + c.barcode : '')),
            ),
            h('span', { class: 'pick-row-arrow' }, '›'),
          ));
        }
        out.append(list);

      } catch (ex) {
        showMessage(ex.message || 'Ошибка запроса', 'error');
      }
    });

    async function showCell(cell) {
      if (!looksLikeCell(cell)) {
        showMessage('Некорректный ответ сервера', 'error');
        return;
      }

      let stock = [];
      try {
        const r = await api('/cells/' + cell.id + '/stock');
        stock = asArray(r);
      } catch (e) {
        console.warn('stock:', e.message);
        stock = [];
      }

      out.hidden = false;
      out.innerHTML = '';

      out.append(h('div', { class: 'card' },
        h('div', { class: 'row-title' },
          cell.address || cell.code || ('#' + cell.id)),
        h('div', { class: 'row-sub' },
          (cell.location_name || cell.location ||
            ('склад ' + cell.location_id)) +
          (cell.barcode ? ' · ' + cell.barcode : '')),
      ));

      if (!stock.length) {
        out.append(h('div', { class: 'card' },
          h('div', { class: 'empty' }, 'Ячейка пуста')));
        return;
      }

      const list = h('div', { class: 'list' });
      for (const s of stock) {
        list.append(h('div', { class: 'row' },
          h('div', { class: 'row-main' },
            h('div', { class: 'row-title' },
              s.name || s.sku || ('#' + s.product_id)),
            h('div', { class: 'row-sub' }, s.sku || '')),
          h('div', { class: 'row-badge' }, String(s.qty || 0)),
        ));
      }
      out.append(list);
    }
  })();
</script>
{% endblock %}