{% extends "base.html" %}
{% block title %}Новый товар — C5{% endblock %}
{% block header %}Новый товар{% endblock %}
{% block content %}

<form id="pf" class="card">

  <div class="photo-block">
    <div id="photoPreview" class="photo-preview">📷</div>
    <div class="photo-actions">
      <button type="button" id="photoBtn" class="btn">Сделать фото</button>
      <button type="button" id="photoClearBtn" class="btn" hidden>Удалить</button>
    </div>
  </div>

  <label class="field">
    <span>Наименование *</span>
    <input name="name" type="text" required autocapitalize="sentences">
  </label>

  <label class="field">
    <span>Полное наименование</span>
    <input name="full_name" type="text">
  </label>

  <label class="field">
    <span>Артикул (SKU)</span>
    <input name="sku" type="text" autocapitalize="none" placeholder="автоматически">
  </label>

  <label class="field">
    <span>Группа</span>
    <select name="category_id" id="categorySel">
      <option value="">— без группы —</option>
    </select>
    <input type="text" id="newCategory" placeholder="новая группа" hidden>
    <button type="button" id="addCategoryBtn" class="btn" style="margin-top:6px">
      + Создать группу
    </button>
  </label>

  <label class="field">
    <span>Штрихкод</span>
    <div style="display:flex;gap:6px">
      <input name="barcode" id="barcodeInput" type="text" inputmode="numeric" autocapitalize="none" style="flex:1">
      <button type="button" id="scanBtn" class="btn" style="width:auto;padding:10px 14px">📷</button>
    </div>
  </label>

  <div class="grid-2">
    <label class="field">
      <span>Единица</span>
      <select name="unit_okei" id="okeiSel"></select>
    </label>
    <label class="field">
      <span>Краткое обозначение</span>
      <input name="unit" id="unitInput" type="text" value="шт">
    </label>
  </div>

  <div class="grid-2">
    <label class="field">
      <span>Цена, ₽</span>
      <input name="price" type="number" step="0.01" min="0" value="0" inputmode="decimal">
    </label>
    <label class="field">
      <span>НДС, %</span>
      <input name="vat_rate" type="number" step="1" min="0" value="20" inputmode="numeric">
    </label>
  </div>

  <div class="grid-2">
    <label class="field">
      <span>Вес, кг</span>
      <input name="weight" type="number" step="0.001" min="0" value="0" inputmode="decimal">
    </label>
    <label class="field">
      <span>Объём, м³</span>
      <input name="volume" type="number" step="0.0001" min="0" value="0" inputmode="decimal">
    </label>
  </div>

  <div class="grid-2">
    <label class="field">
      <span>Мин. запас</span>
      <input name="min_stock" type="number" step="1" min="0" value="0" inputmode="numeric">
    </label>
    <label class="field">
      <span>Политика партий</span>
      <select name="stock_policy">
        <option value="none">не учитывать</option>
        <option value="fifo">FIFO</option>
        <option value="fefo">FEFO</option>
      </select>
    </label>
  </div>

  <label class="field">
    <span>Производитель</span>
    <input name="manufacturer" type="text">
  </label>

  <label class="field">
    <span>Код ТНВЭД</span>
    <input name="tnved_code" type="text" inputmode="numeric" autocapitalize="none">
  </label>

  <label class="field">
    <span>Страна происхождения</span>
    <input name="country_origin" type="text">
  </label>

  <label class="field">
    <span>Описание</span>
    <textarea name="description" rows="3"></textarea>
  </label>

  <button type="submit" class="btn btn-primary" id="saveBtn">Создать товар</button>
</form>

{% endblock %}
{% block scripts %}
<script>
  // Дефолтный список ОКЕИ — на случай офлайна,
  // когда /products/okei недоступен.
  const DEFAULT_OKEI = [
    { code: '796', name: 'Штука',    short: 'шт' },
    { code: '778', name: 'Упаковка', short: 'упак' },
    { code: '166', name: 'Килограмм', short: 'кг' },
    { code: '163', name: 'Грамм',    short: 'г' },
    { code: '112', name: 'Литр',     short: 'л' },
    { code: '006', name: 'Метр',     short: 'м' },
    { code: '055', name: 'Кв. метр', short: 'м²' },
    { code: '113', name: 'Куб. метр', short: 'м³' },
  ];

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

    // Загружаем ОКЕИ и группы с фолбэком на офлайн
    let okei = DEFAULT_OKEI;
    let cats = [];

    try {
      const [oRes, cRes] = await Promise.all([
        api('/products/okei'),
        api('/products/categories'),
      ]);
      if (!isOffline(oRes)) okei = oRes;
      if (!isOffline(cRes)) cats = cRes;
    } catch (e) {
      console.warn('Не загрузились справочники, использую дефолт:', e);
    }

    const okeiSel = document.getElementById('okeiSel');
    for (const o of okei) {
      const opt = h('option', { value: o.code },
        o.name + ' (' + o.short + ')');
      if (o.code === '796') opt.selected = true;
      okeiSel.append(opt);
    }
    okeiSel.addEventListener('change', () => {
      const cur = okei.find(x => x.code === okeiSel.value);
      if (cur) document.getElementById('unitInput').value = cur.short;
    });

    const catSel = document.getElementById('categorySel');
    for (const c of cats) {
      catSel.append(h('option', { value: String(c.id) }, c.name));
    }

    document.getElementById('addCategoryBtn').onclick = async () => {
      const inp = document.getElementById('newCategory');
      if (inp.hidden) { inp.hidden = false; inp.focus(); return; }
      const name = inp.value.trim();
      if (!name) { inp.hidden = true; return; }
      try {
        const c = await api('/products/categories', {
          method: 'POST',
          body: JSON.stringify({ name }),
        });
        if (isOffline(c)) {
          toast('Группа будет создана после подключения', 'warn', 4000);
          inp.value = ''; inp.hidden = true;
          return;
        }
        catSel.append(h('option',
          { value: String(c.id), selected: true }, c.name));
        catSel.value = String(c.id);
        inp.value = ''; inp.hidden = true;
        toast('Группа создана', 'ok');
      } catch (e) { toast(e.message, 'err'); }
    };

    // ---------- ФОТО ----------
    let photoBlob = null;
    const preview = document.getElementById('photoPreview');
    const clearBtn = document.getElementById('photoClearBtn');

    document.getElementById('photoBtn').onclick = () => {
      const inp = document.createElement('input');
      inp.type = 'file';
      inp.accept = 'image/*';
      inp.capture = 'environment';
      inp.onchange = async () => {
        const f = inp.files[0];
        if (!f) return;
        try {
          const blob = await compressImage(f, 1024, 0.82);
          photoBlob = blob;
          const url = URL.createObjectURL(blob);
          preview.innerHTML = '';
          preview.append(h('img', { src: url, alt: '' }));
          preview.classList.add('photo-preview-has');
          clearBtn.hidden = false;
          toast('Фото готово', 'ok');
        } catch (e) { toast(e.message || 'Ошибка фото', 'err'); }
      };
      inp.click();
    };
    clearBtn.onclick = () => {
      photoBlob = null;
      preview.innerHTML = '📷';
      preview.classList.remove('photo-preview-has');
      clearBtn.hidden = true;
    };

    // ---------- СКАН ШК ----------
    document.getElementById('scanBtn').onclick = async () => {
      try {
        const code = await scanBarcode();
        if (!code) return;
        document.getElementById('barcodeInput').value = code;

        // Проверка дубликата ШК — только онлайн
        if (Offline.isOnline) {
          try {
            const dup = await api('/products/by-barcode/' +
                                  encodeURIComponent(code));
            if (dup && !isOffline(dup)) {
              toast('ШК уже у: ' + dup.name + ' (' + dup.sku + ')',
                    'warn', 5000);
            }
          } catch (e) { /* 404 — свободен */ }
        }
      } catch (e) {
        toast(e.message || 'Сканер не сработал', 'err');
      }
    };

    // ---------- СОЗДАНИЕ ----------
    document.getElementById('pf').addEventListener('submit', async (e) => {
      e.preventDefault();
      const fd = new FormData(e.target);
      const payload = {};
      for (const [k, v] of fd.entries()) {
        if (k === 'category_id') {
          payload[k] = v ? parseInt(v, 10) : null;
        } else if (['price', 'vat_rate', 'weight', 'volume'].includes(k)) {
          payload[k] = parseFloat(v) || 0;
        } else if (k === 'min_stock') {
          payload[k] = parseInt(v, 10) || 0;
        } else {
          payload[k] = (v || '').toString();
        }
      }

      const saveBtn = document.getElementById('saveBtn');
      saveBtn.disabled = true;
      saveBtn.textContent = 'Сохранение…';

      try {
        const created = await api('/products', {
          method: 'POST',
          body: JSON.stringify(payload),
        });

        // ---- ОФЛАЙН ----
        if (isOffline(created)) {
          toast(
            photoBlob
              ? 'Сохранено локально. Фото добавите после подключения.'
              : 'Сохранено локально. Товар создастся при подключении.',
            'warn', 5000);
          // Очищаем форму, чтобы пользователь видел — данные ушли
          try { e.target.reset(); } catch (err) {}
          photoBlob = null;
          preview.innerHTML = '📷';
          preview.classList.remove('photo-preview-has');
          clearBtn.hidden = true;
          // replace — чтобы не возвращаться кнопкой «назад» на заполненную форму
          setTimeout(async () => {
            // Небольшая пауза, чтобы Offline успел обновить
            // индикатор и не мешал навигации.
            await new Promise(r => setTimeout(r, 300));
            // Сначала пробуем обычный переход, он идёт через SW.
            try {
              location.assign('/m/menu');
            } catch (err) {
              location.replace('/m/menu');
            }
          }, 1400);
          return;
        }

        // ---- ОНЛАЙН ----
        if (photoBlob && created && created.id) {
          const pfd = new FormData();
          pfd.append('file', photoBlob, 'photo.jpg');
          await fetch(API + '/products/' + created.id + '/photo', {
            method: 'POST',
            headers: { 'Authorization': 'Bearer ' + Auth.token },
            body: pfd,
          }).catch(() => {});
        }

        toast('Создан: ' + (created.sku || created.name || ''), 'ok');
        setTimeout(() => { location.href = '/m/menu'; }, 900);

      } catch (err) {
        toast(err.message, 'err', 6000);
      } finally {
        saveBtn.disabled = false;
        saveBtn.textContent = 'Создать товар';
      }
    });
  })();
</script>
{% endblock %}