/* ============================================================
   ui.js — UI helpers: toasts, modal, loading
   ============================================================ */

/* ── Toasts ─────────────────────────────────────────────────── */
function toast(msg, type, title) {
  type  = type  || 'info';
  title = title || { success: 'Listo', error: 'Error', warning: 'Atención', info: 'Info' }[type];
  var icons = { success: '✅', error: '❌', warning: '⚠️', info: 'ℹ️' };
  var container = document.getElementById('toastContainer');
  if (!container) return;
  var el = document.createElement('div');
  el.className = 'toast ' + type;
  el.innerHTML =
    '<span class="toast-icon">' + icons[type] + '</span>' +
    '<div class="toast-body">' +
      '<div class="toast-title">' + escHtml(title) + '</div>' +
      '<div class="toast-msg">' + escHtml(msg) + '</div>' +
    '</div>' +
    '<span class="toast-close">✕</span>';
  el.querySelector('.toast-close').onclick = function() { removeToast(el); };
  container.appendChild(el);
  setTimeout(function() { removeToast(el); }, 4000);
}
function removeToast(el) {
  if (!el || !el.parentNode) return;
  el.style.opacity = '0';
  el.style.transform = 'translateX(20px)';
  el.style.transition = 'all .25s ease';
  setTimeout(function() { if (el.parentNode) el.parentNode.removeChild(el); }, 260);
}

/* ── Modal ──────────────────────────────────────────────────── */
function showModal(title, bodyHtml, footerHtml) {
  document.getElementById('modalTitle').textContent = title;
  document.getElementById('modalBody').innerHTML = bodyHtml;
  document.getElementById('modalFooter').innerHTML = footerHtml || '';
  document.getElementById('modalBackdrop').classList.add('show');
}
function hideModal() {
  document.getElementById('modalBackdrop').classList.remove('show');
}
function confirmModal(title, msg, onOk, okLabel, okClass) {
  okLabel = okLabel || 'Confirmar';
  okClass = okClass || 'btn-primary';
  showModal(title,
    '<p style="font-size:15px;color:var(--text)">' + escHtml(msg) + '</p>',
    '<button class="btn btn-outline" onclick="hideModal()">Cancelar</button>' +
    '<button class="btn ' + okClass + '" id="confirmOkBtn">' + okLabel + '</button>'
  );
  document.getElementById('confirmOkBtn').onclick = function() { hideModal(); onOk(); };
}

/* ── Loading in content area ────────────────────────────────── */
function setLoading(el, show) {
  if (show) {
    el.innerHTML = '<div class="loading-overlay"><div class="spinner-lg"></div><span>Cargando...</span></div>';
  }
}

/* ── Format helpers ─────────────────────────────────────────── */
function formatMXN(n) {
  n = parseFloat(n) || 0;
  return '$' + n.toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
function formatDate(d) {
  if (!d) return '—';
  var parts = d.split(' ')[0].split('-');
  if (parts.length < 3) return d;
  return parts[2] + '/' + parts[1] + '/' + parts[0];
}
function formatPts(n) {
  n = parseFloat(n) || 0;
  return n.toLocaleString('es-MX', { minimumFractionDigits: 0, maximumFractionDigits: 1 });
}
function escHtml(s) {
  if (s == null) return '';
  return String(s)
    .replace(/&/g,'&amp;')
    .replace(/</g,'&lt;')
    .replace(/>/g,'&gt;')
    .replace(/"/g,'&quot;');
}
function initials(nombre, appat) {
  var n = (nombre || '').charAt(0).toUpperCase();
  var a = (appat  || '').charAt(0).toUpperCase();
  return n + a || '?';
}
function calBadge(pts) {
  pts = parseFloat(pts) || 0;
  if (pts >= 1500) return '<span class="badge badge-success">⭐ Full</span>';
  if (pts >= 624)  return '<span class="badge badge-teal">✓ Básica</span>';
  return '<span class="badge badge-muted">Sin calificar</span>';
}
function calDot(cal) {
  var cls = { full: 'cal-full', basica: 'cal-basica', ninguna: 'cal-ninguna' }[cal] || 'cal-ninguna';
  return '<span class="cal-dot ' + cls + '"></span>';
}
function tipoBadge(tipo) {
  var map = {
    6:  { cls:'badge-navy',    txt:'Especial' },
    7:  { cls:'badge-warning', txt:'Pendiente' },
    8:  { cls:'badge-warning', txt:'Pendiente' },
    10: { cls:'badge-success', txt:'Venta' },
    11: { cls:'badge-info',    txt:'Por Asignar' },
    12: { cls:'badge-teal',    txt:'Asignación' },
  };
  var m = map[tipo] || { cls:'badge-muted', txt:'Tipo '+tipo };
  return '<span class="badge ' + m.cls + '">' + m.txt + '</span>';
}

/* ── VIP Guard — bloquea secciones para no verificados ──────── */
/*
 * Uso: if (vipGuard(el)) return;
 * Muestra pantalla de bloqueo si isVip !== 1.
 * Retorna true si bloqueado, false si puede pasar.
 */
function vipGuard(el) {
  var u    = getUser();
  var isVip = parseInt(u.isVip);
  if (isVip === 1) return false;   // verificado → puede pasar

  var icon, title, msg, sub;
  if (isVip === 2) {
    icon  = '⏳';
    title = 'Verificación en proceso';
    msg   = 'Tus documentos están siendo revisados por el equipo de RRB.';
    sub   = 'Esta sección se habilitará automáticamente cuando tu cuenta sea aprobada.';
  } else if (isVip === 3) {
    icon  = '❌';
    title = 'Documentos rechazados';
    msg   = 'Algunos de tus documentos fueron rechazados. Por favor vuelve a subirlos para continuar.';
    sub   = 'Una vez que el equipo apruebe tus documentos tendrás acceso a esta sección.';
  } else {
    icon  = '🔒';
    title = 'Sección bloqueada';
    msg   = 'Esta sección está disponible solo para distribuidores verificados.';
    sub   = 'Completa tu verificación KYC para desbloquear Ganancias y Vouchers.';
  }

  el.innerHTML =
    '<div class="page-header">' +
      '<div class="section-title" style="margin:0">' + (el.dataset.viewTitle || 'Acceso restringido') + '</div>' +
    '</div>' +
    '<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;' +
         'min-height:340px;text-align:center;padding:32px 16px">' +
      '<div style="font-size:64px;margin-bottom:16px;line-height:1">' + icon + '</div>' +
      '<div style="font-size:20px;font-weight:800;color:var(--navy);margin-bottom:10px">' + title + '</div>' +
      '<div style="font-size:15px;color:var(--text-muted);max-width:340px;margin-bottom:6px">' + msg + '</div>' +
      '<div style="font-size:13px;color:var(--text-muted);max-width:320px;margin-bottom:28px">' + sub + '</div>' +
      (isVip !== 2
        ? '<button class="btn btn-teal" style="font-size:15px;padding:12px 28px" onclick="goTo(\'kyc\')">' +
            '🪪 Ir a Verificación KYC</button>'
        : '<div style="background:#fff8e6;border:1px solid #f5c842;border-radius:var(--radius);' +
               'padding:12px 20px;font-size:13px;color:#a07d00">' +
            'Te notificaremos cuando tu cuenta sea aprobada.' +
          '</div>'
      ) +
    '</div>';

  return true;   // bloqueado
}

/* ── Wire modal close ────────────────────────────────────────── */
document.addEventListener('DOMContentLoaded', function() {
  var backdrop = document.getElementById('modalBackdrop');
  if (!backdrop) return;
  document.getElementById('modalClose').onclick = hideModal;
  backdrop.onclick = function(e) { if (e.target === backdrop) hideModal(); };
});
