// ══════════════════════════════════════════════
// RRB Admin — Module: productos
// ══════════════════════════════════════════════

// ══ PRODUCTOS ══

async function cargarProductos() {
  const loading = document.getElementById('prod-loading');
  const grid    = document.getElementById('prod-grid');
  const empty   = document.getElementById('prod-empty');
  loading.style.display = 'block';
  grid.style.display    = 'none';
  empty.style.display   = 'none';
  try {
    const res = await fetch('https://api.sistemarrb.com/catalog/productos-publico.php');
    const json = await res.json();
    if (!json.success) throw new Error('Error al cargar catálogo');
    _prodData = json.data;
    renderTabProductos(_prodTabActual);
  } catch(e) {
    loading.innerHTML = '<p style="color:var(--error)">Error: ' + e.message + '</p>';
  }
}

function cambiarTabProductos(tab) {
  _prodTabActual = tab;
  // Actualizar estilos de tabs
  ['productos','inscripciones','promociones'].forEach(t => {
    const btn = document.getElementById('prod-tab-' + t);
    if (t === tab) {
      btn.style.color = 'var(--primary)';
      btn.style.borderBottom = '2px solid var(--primary)';
      btn.style.fontWeight = '700';
    } else {
      btn.style.color = 'var(--muted)';
      btn.style.borderBottom = '2px solid transparent';
      btn.style.fontWeight = '600';
    }
  });
  if (_prodData) renderTabProductos(tab);
}

function renderTabProductos(tab) {
  const loading = document.getElementById('prod-loading');
  const grid    = document.getElementById('prod-grid');
  const empty   = document.getElementById('prod-empty');
  loading.style.display = 'none';

  let items = [];
  if (tab === 'productos')     items = _prodData.linea          || [];
  if (tab === 'inscripciones') items = _prodData.inscripciones || [];
  if (tab === 'promociones')   items = _prodData.promociones   || [];

  if (!items.length) {
    grid.style.display  = 'none';
    empty.style.display = 'block';
    return;
  }
  empty.style.display = 'none';
  grid.style.display  = 'grid';

  grid.innerHTML = items.map(p => {
    const nombre = p.nombre || p.promodesc || '';
    const precio = p.precio ? '$' + Number(p.precio).toLocaleString('es-MX') : '';
    const puntos = p.puntos != null ? p.puntos + ' pts' : '';
    const img    = p.imagen || '';
    const id     = p.id_prod || p.idpromod || '';
    const badge  = tab === 'inscripciones'
      ? '<span style="position:absolute;top:8px;right:8px;background:#6366f1;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px">INSCRIPCIÓN</span>'
      : tab === 'promociones'
      ? '<span style="position:absolute;top:8px;right:8px;background:#f59e0b;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px">PROMO</span>'
      : '';
    return `
      <div style="background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:box-shadow .2s;cursor:default" onmouseover="this.style.boxShadow='0 4px 16px rgba(0,0,0,.12)'" onmouseout="this.style.boxShadow='none'">
        <div style="position:relative;background:#f5f8fc;height:140px;display:flex;align-items:center;justify-content:center;overflow:hidden">
          ${img ? `<img src="${img}" alt="${nombre}" style="max-height:130px;max-width:100%;object-fit:contain" onerror="this.style.display='none'" />` : '<span style="font-size:40px">📦</span>'}
          ${badge}
        </div>
        <div style="padding:12px">
          <div style="font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.3">${nombre}</div>
          <div style="display:flex;justify-content:space-between;align-items:center;margin-top:8px">
            <span style="font-size:15px;font-weight:700;color:var(--primary)">${precio}</span>
            ${puntos ? `<span style="font-size:12px;font-weight:600;color:#6366f1;background:#ede9fe;padding:2px 8px;border-radius:20px">${puntos}</span>` : ''}
          </div>
          <div style="font-size:11px;color:var(--muted);margin-top:4px">ID: ${id}</div>
        </div>
      </div>`;
  }).join('');
}



// ══════════════════════════════════════════════
