/* ============================================================
   views/kyc.js — Verificación KYC
   ============================================================ */

function renderKyc(el) {
  apiGet('/kyc/status', function(data) {
    var isVip = parseInt(data.isVip) || 0;
    var slots  = data.slots || [];   // [{subTipo, label, subido, doc:{realName, status, ...}}]

    // Construir mapa subTipo → slot
    var slotMap = {};
    for (var i = 0; i < slots.length; i++) {
      slotMap[slots[i].subTipo] = slots[i];
    }

    // Banner de estado
    var banner = '';
    if (isVip === 1) {
      banner =
        '<div style="background:#f0faf5;border:1px solid #a8ddc0;border-radius:var(--radius);' +
             'padding:16px;margin-bottom:20px;display:flex;align-items:center;gap:12px">' +
          '<span style="font-size:28px">✅</span>' +
          '<div><strong style="color:var(--success);font-size:16px">Cuenta verificada</strong><br>' +
          '<span style="font-size:13px;color:var(--text-muted)">Tus documentos han sido aprobados. Ya puedes cobrar tus ganancias.</span></div>' +
        '</div>';
    } else if (isVip === 2) {
      banner =
        '<div style="background:#fff8e6;border:1px solid #f5c842;border-radius:var(--radius);' +
             'padding:16px;margin-bottom:20px;display:flex;align-items:center;gap:12px">' +
          '<span style="font-size:28px">⏳</span>' +
          '<div><strong style="color:#a07d00;font-size:16px">Documentos en revisión</strong><br>' +
          '<span style="font-size:13px;color:var(--text-muted)">El equipo está revisando tus documentos. Te avisaremos cuando estén aprobados.</span></div>' +
        '</div>';
    } else if (isVip === 3) {
      banner =
        '<div style="background:#fdf0ef;border:1px solid #f5c6c3;border-radius:var(--radius);' +
             'padding:16px;margin-bottom:20px;display:flex;align-items:center;gap:12px">' +
          '<span style="font-size:28px">❌</span>' +
          '<div><strong style="color:var(--danger);font-size:16px">Documentos rechazados</strong><br>' +
          '<span style="font-size:13px;color:var(--text-muted)">Algunos documentos fueron rechazados. Por favor vuélvelos a subir.</span></div>' +
        '</div>';
    } else {
      banner =
        '<div style="background:#e8f0fd;border:1px solid #90aaf9;border-radius:var(--radius);' +
             'padding:16px;margin-bottom:20px;display:flex;align-items:center;gap:12px">' +
          '<span style="font-size:28px">🪪</span>' +
          '<div><strong style="color:var(--navy);font-size:16px">Verificación requerida</strong><br>' +
          '<span style="font-size:13px;color:var(--text-muted)">Sube tus documentos para verificar tu cuenta y habilitar el cobro de ganancias.</span></div>' +
        '</div>';
    }

    // Progreso
    var totalSubidos = data.totalSubidos || 0;
    var progPct = Math.round((totalSubidos / 4) * 100);
    var progBar =
      '<div style="margin-bottom:20px">' +
        '<div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px">' +
          '<span style="color:var(--text-muted)">Documentos subidos</span>' +
          '<strong>' + totalSubidos + ' / 4</strong>' +
        '</div>' +
        '<div style="height:8px;background:var(--border);border-radius:4px">' +
          '<div style="height:100%;width:' + progPct + '%;background:var(--teal);border-radius:4px;transition:width .3s"></div>' +
        '</div>' +
      '</div>';

    el.innerHTML =
      '<div class="page-header">' +
        '<div class="section-title" style="margin:0">Verificación</div>' +
      '</div>' +
      banner +
      '<div class="card">' +
        '<div class="card-header"><span class="card-title">Documentos requeridos</span></div>' +
        '<div class="card-body">' +
          progBar +
          '<p style="font-size:13px;color:var(--text-muted);margin-bottom:16px">Formatos aceptados: JPG, PNG, PDF. Máx. 5MB por archivo.</p>' +
          '<div class="kyc-grid" id="kycGrid">' +
            kycItem(1, slotMap[1]) +
            kycItem(2, slotMap[2]) +
            kycItem(3, slotMap[3]) +
            kycItem(4, slotMap[4]) +
          '</div>' +
        '</div>' +
      '</div>' +
      '<div id="kycUploadStatus" style="margin-top:16px"></div>' +
      '<div style="margin-top:20px;padding:16px 20px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--radius);display:flex;align-items:flex-start;gap:12px">' +
        '<span style="font-size:22px;flex-shrink:0">💬</span>' +
        '<p style="font-size:13px;color:var(--text);line-height:1.6;margin:0">' +
          'Si ya pasaron más de 24 horas y no has sido verificado, o si necesitas verificación inmediata, ' +
          'solicítalo con tu referencia por WhatsApp al ' +
          '<a href="https://wa.me/523317926324" target="_blank" style="color:#16a34a;font-weight:700;text-decoration:none">33 1792 6324</a>.' +
        '</p>' +
      '</div>';

    // Wire clicks — solo documentos no verificados (isVip != 1)
    var items = document.querySelectorAll('.kyc-item[data-sub]');
    for (var j = 0; j < items.length; j++) {
      (function(item) {
        item.addEventListener('click', function() {
          if (isVip === 1) {
            toast('Tu cuenta ya está verificada.', 'info'); return;
          }
          kycTriggerUpload(parseInt(item.dataset.sub));
        });
      })(items[j]);
    }

  }, function(err) {
    el.innerHTML = errorState('Error al cargar estado KYC', err);
  });
}

/* ── Tarjeta de documento ────────────────────────────────────── */
function kycItem(sub, slot) {
  var label  = APP_CONFIG.kycLabels[sub] || 'Documento';
  var icon   = APP_CONFIG.kycIcons[sub]  || '📄';
  var subido = slot && slot.subido;
  var doc    = slot && slot.doc ? slot.doc : null;

  var docStatus = doc ? parseInt(doc.status) : -1;

  // Colores y texto según estado
  var borderColor, bgColor, badgeHtml;
  if (!subido) {
    borderColor = 'var(--border)';
    bgColor     = 'var(--bg)';
    badgeHtml   =
      '<div style="margin-top:10px;background:var(--teal);color:#fff;border-radius:20px;' +
           'padding:5px 14px;font-size:12px;font-weight:700;display:inline-block">+ Subir</div>';
  } else if (docStatus === 1) {
    borderColor = '#16A34A';
    bgColor     = '#f0faf5';
    badgeHtml   =
      '<div style="margin-top:10px;background:#16A34A;color:#fff;border-radius:20px;' +
           'padding:5px 14px;font-size:12px;font-weight:700;display:inline-block">✓ Aprobado</div>';
  } else if (docStatus === 3) {
    borderColor = 'var(--danger)';
    bgColor     = '#fdf0ef';
    badgeHtml   =
      '<div style="margin-top:10px;background:var(--danger);color:#fff;border-radius:20px;' +
           'padding:5px 14px;font-size:12px;font-weight:700;display:inline-block">✗ Rechazado — volver a subir</div>';
  } else {
    // en revisión (status 0 o 2)
    borderColor = '#D97706';
    bgColor     = '#fff8e6';
    badgeHtml   =
      '<div style="margin-top:10px;background:#D97706;color:#fff;border-radius:20px;' +
           'padding:5px 14px;font-size:12px;font-weight:700;display:inline-block">⏳ En revisión</div>';
  }

  // Icono grande con check overlay si está subido
  var iconHtml =
    '<div style="position:relative;display:inline-block;margin-bottom:6px">' +
      '<span style="font-size:36px;line-height:1">' + icon + '</span>' +
      (subido
        ? '<span style="position:absolute;top:-4px;right:-8px;background:' +
          (docStatus === 1 ? '#16A34A' : docStatus === 3 ? 'var(--danger)' : '#D97706') +
          ';color:#fff;border-radius:50%;width:18px;height:18px;font-size:11px;' +
          'display:flex;align-items:center;justify-content:center;font-weight:900">' +
          (docStatus === 3 ? '✗' : '✓') + '</span>'
        : '') +
    '</div>';

  return (
    '<div class="kyc-item' + (subido ? ' uploaded' : '') + '" data-sub="' + sub + '" ' +
         'style="cursor:pointer;border:2px solid ' + borderColor + ';background:' + bgColor + ';' +
                'border-radius:var(--radius);padding:16px;text-align:center;transition:box-shadow .15s">' +
      iconHtml +
      '<div style="font-size:13px;font-weight:700;color:var(--navy);margin-bottom:2px">' + escHtml(label) + '</div>' +
      (doc && doc.realName
        ? '<div style="font-size:11px;color:var(--text-muted);word-break:break-all;margin-top:2px">' +
            escHtml(doc.realName) + '</div>'
        : '<div style="font-size:11px;color:var(--text-muted);margin-top:2px">Sin archivo</div>') +
      badgeHtml +
    '</div>'
  );
}

/* ── Trigger file input ──────────────────────────────────────── */
function kycTriggerUpload(sub) {
  var label = APP_CONFIG.kycLabels[sub] || 'Documento';
  var input = document.createElement('input');
  input.type   = 'file';
  input.accept = '.jpg,.jpeg,.png,.pdf,.heic';
  input.onchange = function() {
    if (!input.files || !input.files[0]) return;
    var file = input.files[0];
    if (file.size > 5 * 1024 * 1024) { toast('El archivo supera los 5MB.', 'warning'); return; }
    kycUpload(sub, file, label);
  };
  input.click();
}

/* ── Upload ──────────────────────────────────────────────────── */
function kycUpload(sub, file, label) {
  var statusEl = document.getElementById('kycUploadStatus');
  statusEl.innerHTML =
    '<div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);' +
         'padding:14px;display:flex;align-items:center;gap:12px">' +
      '<div class="spinner-lg" style="width:24px;height:24px;border-width:2px"></div>' +
      '<span>Subiendo <strong>' + escHtml(label) + '</strong>...</span>' +
    '</div>';

  var fd = new FormData();
  fd.append('subTipo', sub);
  fd.append('archivo', file);

  apiUpload('/kyc/upload', fd,
    function() {
      statusEl.innerHTML =
        '<div style="background:#f0faf5;border:1px solid #a8ddc0;border-radius:var(--radius-sm);' +
             'padding:12px 16px;color:var(--success)">' +
          '✓ <strong>' + escHtml(label) + '</strong> subido correctamente.' +
        '</div>';
      toast(label + ' subido correctamente.', 'success');
      setTimeout(function() { goTo('kyc'); }, 1200);
    },
    function(err) {
      statusEl.innerHTML =
        '<div style="background:#fdf0ef;border:1px solid #f5c6c3;border-radius:var(--radius-sm);' +
             'padding:12px 16px;color:var(--danger)">' +
          '✗ Error: ' + escHtml(err) +
        '</div>';
    },
    function(pct) {
      statusEl.innerHTML =
        '<div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px">' +
          'Subiendo ' + escHtml(label) + '... ' + pct + '%' +
          '<div style="margin-top:8px;height:6px;background:var(--border);border-radius:3px">' +
            '<div style="height:100%;width:' + pct + '%;background:var(--teal);border-radius:3px;transition:width .2s"></div>' +
          '</div>' +
        '</div>';
    }
  );
}
