Learn_System/frontend/js/admin/sections/shop.js

'use strict';
/* admin → shop section: items + purchases */
(function () {
  'use strict';
  let inited = false;
  let _shopItems = [];

  async function load() {
    try {
      const [stats, items] = await Promise.all([
        LS.adminShopStats(),
        LS.adminShopGetItems()
      ]);
      const topName = stats.topItems?.[0]?.name || '—';
      document.getElementById('shop-stats-grid').innerHTML = `
        <div class="stat-card" style="--stat-top:var(--violet)">
          <div class="stat-card-icon" style="background:rgba(155,93,229,0.1)"><i data-lucide="shopping-bag" class="stat-icon"></i></div>
          <div class="stat-val violet">${stats.activeItems}/${stats.totalItems}</div>
          <div class="stat-label">Товаров</div>
        </div>
        <div class="stat-card" style="--stat-top:var(--cyan)">
          <div class="stat-card-icon" style="background:rgba(6,214,224,0.1)"><i data-lucide="receipt" class="stat-icon"></i></div>
          <div class="stat-val cyan">${stats.totalPurchases}</div>
          <div class="stat-label">Покупок</div>
        </div>
        <div class="stat-card" style="--stat-top:var(--green)">
          <div class="stat-card-icon" style="background:rgba(6,214,100,0.1)"><i data-lucide="coins" class="stat-icon"></i></div>
          <div class="stat-val green">${stats.totalCoinsInCirculation}</div>
          <div class="stat-label">Монет в обороте</div>
        </div>
        <div class="stat-card" style="--stat-top:var(--amber, #FFB347)">
          <div class="stat-card-icon" style="background:rgba(255,179,71,0.1)"><i data-lucide="star" class="stat-icon"></i></div>
          <div class="stat-val" style="color:var(--amber, #FFB347);font-size:1.1rem">${esc(topName)}</div>
          <div class="stat-label">Топ товар</div>
        </div>`;
      _shopItems = items;
      renderShopItems();
      if (window.lucide) lucide.createIcons();
    } catch(e) {
      document.getElementById('shop-stats-grid').innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
    }
  }

  function renderShopItems() {
    const body = document.getElementById('shop-items-body');
    if (!_shopItems.length) { body.innerHTML = '<tr><td colspan="7" class="empty">Нет товаров</td></tr>'; return; }
    const typeLabels = { frame:'Рамка', title:'Титул', theme:'Тема', effect:'Эффект', background:'Фон' };
    body.innerHTML = _shopItems.map(it => `<tr>
      <td>${it.id}</td>
      <td><strong>${esc(it.name)}</strong></td>
      <td><span class="mode-badge mode-practice">${typeLabels[it.type] || esc(it.type)}</span></td>
      <td>${it.price} <i data-lucide="coins" style="width:12px;height:12px;vertical-align:-2px;color:var(--amber, #FFB347)"></i></td>
      <td>${it.sold_count || 0}</td>
      <td>
        <label class="adm-toggle">
          <input type="checkbox" ${it.is_active ? 'checked' : ''} onchange="shopAdminToggleActive(${it.id}, this.checked)" />
          <span class="track"></span><span class="thumb"></span>
        </label>
      </td>
      <td>
        <button class="btn-edit-q" onclick="shopAdminEditItem(${it.id})">Ред.</button>
        <button class="btn-del-q" onclick="shopAdminDeleteItem(${it.id})">Удалить</button>
      </td>
    </tr>`).join('');
    if (window.lucide) lucide.createIcons();
  }

  const TYPE_OPTIONS = [
    { v: 'frame',      l: 'Рамка'  },
    { v: 'title',      l: 'Титул'  },
    { v: 'background', l: 'Фон'    },
    { v: 'effect',     l: 'Эффект' },
  ];

  /* Open the add/edit item modal. item = null → create, object → edit. */
  function openItemModal(item) {
    const isEdit = !!item;
    const dataStr = item && item.data
      ? (typeof item.data === 'string' ? item.data : JSON.stringify(item.data))
      : '';

    const body = document.createElement('div');
    body.innerHTML = `
      <div class="adm-form-row">
        <div class="adm-form-group" style="flex:1;min-width:160px">
          <label>Название</label>
          <input type="text" id="shop-f-name" placeholder="Название товара" />
        </div>
        <div class="adm-form-group" style="flex:1;min-width:120px">
          <label>Тип</label>
          <select id="shop-f-type">
            ${TYPE_OPTIONS.map(o => `<option value="${o.v}">${o.l}</option>`).join('')}
          </select>
        </div>
        <div class="adm-form-group" style="width:96px">
          <label>Цена</label>
          <input type="number" id="shop-f-price" min="0" value="100" />
        </div>
      </div>
      <div class="adm-form-row">
        <div class="adm-form-group" style="flex:1">
          <label>Описание</label>
          <textarea id="shop-f-desc" rows="2" placeholder="Описание товара"></textarea>
        </div>
      </div>
      <div class="adm-form-row" style="margin-bottom:0">
        <div class="adm-form-group" style="flex:1;min-width:140px">
          <label>Иконка (emoji/код)</label>
          <input type="text" id="shop-f-icon" placeholder="SVG-код или эмодзи" />
        </div>
        <div class="adm-form-group" style="flex:1;min-width:140px">
          <label>Данные (JSON)</label>
          <input type="text" id="shop-f-data" placeholder='{"key":"value"}' />
        </div>
        <div class="adm-form-group">
          <label>Активен</label>
          <label class="adm-toggle">
            <input type="checkbox" id="shop-f-active" checked />
            <span class="track"></span><span class="thumb"></span>
          </label>
        </div>
      </div>`;

    const $ = sel => body.querySelector(sel);
    $('#shop-f-name').value     = item?.name || '';
    $('#shop-f-type').value     = item?.type || 'frame';
    $('#shop-f-price').value    = item?.price ?? 100;
    $('#shop-f-desc').value     = item?.description || '';
    $('#shop-f-icon').value     = item?.icon || '';
    $('#shop-f-data').value     = dataStr;
    $('#shop-f-active').checked  = item ? !!item.is_active : true;

    let saving = false;
    const m = LS.modal({
      title: isEdit ? ('Редактировать товар #' + item.id) : 'Добавить товар',
      content: body,
      size: 'md',
      actions: [
        { label: 'Отмена', onClick: () => m.close() },
        { label: 'Сохранить', primary: true, id: 'shop-save-btn', onClick: async () => {
          if (saving) return;
          const payload = {
            name: $('#shop-f-name').value.trim(),
            type: $('#shop-f-type').value,
            price: parseInt($('#shop-f-price').value, 10) || 0,
            description: $('#shop-f-desc').value.trim(),
            icon: $('#shop-f-icon').value.trim(),
            data: $('#shop-f-data').value.trim() || null,
            is_active: $('#shop-f-active').checked ? 1 : 0,
          };
          if (!payload.name) { m.setError('Введите название'); return; }
          if (payload.data) {
            try { JSON.parse(payload.data); }
            catch { m.setError('Поле «Данные» — некорректный JSON'); return; }
          }
          saving = true;
          const btn = document.getElementById('shop-save-btn');
          if (btn) { btn.disabled = true; btn.textContent = 'Сохранение…'; }
          try {
            if (isEdit) { await LS.adminShopUpdateItem(item.id, payload); LS.toast('Товар обновлён', 'success'); }
            else        { await LS.adminShopCreateItem(payload);          LS.toast('Товар создан', 'success'); }
            m.close();
            inited = false;
            await load();
            inited = true;
          } catch(e) {
            m.setError('Ошибка: ' + e.message);
            saving = false;
            if (btn) { btn.disabled = false; btn.textContent = 'Сохранить'; }
          }
        } },
      ],
    });
    setTimeout(() => $('#shop-f-name')?.focus(), 80);
  }

  function shopAdminCreateItem() { openItemModal(null); }

  function shopAdminEditItem(id) {
    const it = _shopItems.find(i => i.id === id);
    if (it) openItemModal(it);
  }

  async function shopAdminDeleteItem(id) {
    if (!await LS.confirm('Все покупки этого товара будут удалены.', { title: 'Удалить товар?', confirmText: 'Удалить', danger: true })) return;
    try {
      await LS.adminShopDeleteItem(id);
      LS.toast('Товар удалён', 'success');
      inited = false;
      await load();
      inited = true;
    } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
  }

  async function shopAdminToggleActive(id, active) {
    try {
      await LS.adminShopUpdateItem(id, { is_active: active ? 1 : 0 });
      LS.toast(active ? 'Товар активирован' : 'Товар деактивирован', 'success');
    } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
  }

  // Expose onclick handlers
  window.shopAdminCreateItem = shopAdminCreateItem;
  window.shopAdminEditItem = shopAdminEditItem;
  window.shopAdminDeleteItem = shopAdminDeleteItem;
  window.shopAdminToggleActive = shopAdminToggleActive;

  window.AdminSections = window.AdminSections || {};
  window.AdminSections.shop = {
    init: async () => { if (inited) return; inited = true; await load(); },
    reload: load,
  };
})();