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

  const TYPE_ICONS = { frame:'square', title:'award', background:'image', effect:'sparkles', theme:'palette' };
  const typeIcon = t => TYPE_ICONS[t] || 'tag';
  const GROUP_ORDER = [
    { type: 'frame',      label: 'Рамки'   },
    { type: 'title',      label: 'Титулы'  },
    { type: 'background', label: 'Фоны'    },
    { type: 'effect',     label: 'Эффекты' },
  ];

  function parseData(it) {
    if (!it || it.data == null) return {};
    if (typeof it.data === 'object') return it.data;
    try { return JSON.parse(it.data); } catch { return {}; }
  }

  /* Real visual preview by item type (uses the same data the client renders). */
  function itemPreview(it) {
    const d = parseData(it);
    if (it.type === 'background') {
      const slug = String(d.slug || 'none').replace(/[^a-z0-9_-]/gi, '');
      return `<div class="sh-prev bg-preview bg-${slug}"></div>`;
    }
    if (it.type === 'title') {
      const color = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(d.color || '') ? d.color : '#9B5DE5';
      return `<div class="sh-prev"><span class="sh-prev-title" style="color:${color}">${esc(d.text || it.name || '')}</span></div>`;
    }
    if (it.type === 'frame') {
      const css = String(d.css || '').replace(/"/g, '&quot;');
      return `<div class="sh-prev"><span class="sh-av" style="${css}"></span></div>`;
    }
    if (it.type === 'effect') {
      const fx = d.effect === 'pulse' ? ' fx-pulse' : '';
      const ic = d.effect === 'pulse' ? '' : `<i data-lucide="${typeIcon(it.type)}" class="sh-fx-ic" style="position:absolute"></i>`;
      return `<div class="sh-prev"><span class="sh-av${fx}"></span>${ic}</div>`;
    }
    return `<div class="sh-prev"><i data-lucide="${typeIcon(it.type)}" class="sh-fx-ic"></i></div>`;
  }

  function cardHTML(it) {
    return `<div class="sh-card${it.is_active ? '' : ' off'}">
      ${itemPreview(it)}
      <div class="sh-card-name" title="${esc(it.name)}">${esc(it.name)}</div>
      <div class="sh-card-row">
        <span class="sh-price">${it.price} <i data-lucide="coins" style="width:12px;height:12px;vertical-align:-2px;color:#d98a17"></i></span>
        <span class="sh-sold">продано: ${it.sold_count || 0}</span>
      </div>
      <div class="sh-card-foot">
        <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>
        <div class="sh-acts">
          <button class="btn-edit-q" onclick="shopAdminEditItem(${it.id})">Ред.</button>
          <button class="btn-del-q" onclick="shopAdminDeleteItem(${it.id})" title="Удалить"><i data-lucide="trash-2" style="width:13px;height:13px;vertical-align:-2px"></i></button>
        </div>
      </div>
    </div>`;
  }

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

  function shopApplyFilters() {
    _filterType = document.getElementById('shop-filter-type')?.value || '';
    _search = (document.getElementById('shop-search')?.value || '').trim().toLowerCase();
    renderShopItems();
  }

  function renderShopItems() {
    const wrap = document.getElementById('shop-items-body');
    const countEl = document.getElementById('shop-count');
    const filtered = _shopItems.filter(it =>
      (!_filterType || it.type === _filterType) &&
      (!_search || (it.name || '').toLowerCase().includes(_search))
    );
    if (countEl) countEl.textContent = filtered.length === _shopItems.length
      ? `${_shopItems.length} товаров`
      : `${filtered.length} из ${_shopItems.length}`;
    if (!_shopItems.length) { wrap.innerHTML = '<div class="sh-empty">Нет товаров</div>'; return; }
    if (!filtered.length)   { wrap.innerHTML = '<div class="sh-empty">Ничего не найдено</div>'; return; }

    const groups = [];
    const seen = new Set();
    for (const g of GROUP_ORDER) {
      const items = filtered.filter(it => it.type === g.type);
      if (items.length) { groups.push({ label: g.label, items }); seen.add(g.type); }
    }
    const other = filtered.filter(it => !seen.has(it.type));
    if (other.length) groups.push({ label: 'Прочее', items: other });

    wrap.innerHTML = groups.map(g => `
      <div class="sh-group">
        <div class="sh-group-h">${g.label}<span class="sh-group-c">${g.items.length}</span></div>
        <div class="sh-grid">${g.items.map(cardHTML).join('')}</div>
      </div>`).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.shopApplyFilters = shopApplyFilters;

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