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

function renderKyc(el) {
  apiGet('/kyc/status', function(data) {
    var isVip   = parseInt(data.isVip)   || 0;
    var archivos= data.archivos          || [];

    // Map uploaded docs
    var uploaded = {};
    for (var i = 0; i < archivos.length; i++) {
      uploaded[archivos[i].subTipo] = archivos[i];
    }

    var vipMsg = isVip === 1
      ? '<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>'
      : isVip === 2
      ? '<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 notificaremos cuando estén aprobados.</span></div>' +
        '</div>'
      : '<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>';

    el.innerHTML =
      '<div class="page-header">' +
        '<div class="section-title" style="margin:0">Verificación KYC</div>' +
      '</div>' +

      vipMsg +

      '<div class="card">' +
        '<div class="card-header"><span class="card-title">Documentos requeridos</span></div>' +
        '<div class="card-body">' +
          '<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, uploaded[1]) +
            kycItem(2, uploaded[2]) +
            kycItem(3, uploaded[3]) +
            kycItem(4, uploaded[4]) +
          '</div>' +
        '</div>' +
      '</div>' +

      '<div id="kycUploadStatus" style="margin-top:16px"></div>';

    // Wire upload clicks
    var items = document.querySelectorAll('.kyc-item[data-sub]');
    for (var j = 0; j < items.length; j++) {
      (function(item) {
        item.addEventListener('click', function() {
          var sub = parseInt(item.dataset.sub);
          kycTriggerUpload(sub);
        });
      })(items[j]);
    }

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

function kycItem(sub, archivo) {
  var label  = APP_CONFIG.kycLabels[sub]  || 'Documento';
  var icon   = APP_CONFIG.kycIcons[sub]   || '📄';
  var done   = !!archivo;
  return '<div class="kyc-item' + (done ? ' uploaded' : '') + '" data-sub="' + sub + '">' +
    '<div class="kyc-icon">' + icon + '</div>' +
    '<div class="kyc-label">' + escHtml(label) + '</div>' +
    '<div class="kyc-status">' +
      (done
        ? '<span style="color:var(--success);font-weight:700">✓ Subido</span>'
        : '<span style="color:var(--teal-dark)">Toca para subir</span>'
      ) +
    '</div>' +
    (done && archivo.realName ? '<div style="font-size:11px;color:var(--text-muted);margin-top:2px">' + escHtml(archivo.realName) + '</div>' : '') +
  '</div>';
}

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();
}

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>';
  });
}
