/* ============================================================
   views/networkreport.js — Reporte de Red
   ============================================================ */

function renderNetworkReport(el) {
  el.innerHTML =
    '<div class="page-header">' +
      '<div class="section-title" style="margin:0">Reporte de Red</div>' +
    '</div>' +
    '<div class="loading-overlay"><div class="spinner-lg"></div><span>Cargando reporte...</span></div>';

  apiGet('/network/reporte', function(data) {
    nrRender(el, data);
  }, function(err) {
    el.innerHTML =
      '<div class="page-header">' +
        '<div class="section-title" style="margin:0">Reporte de Red</div>' +
      '</div>' +
      '<div class="empty-state"><div class="empty-icon">⚠️</div>' +
        '<h3>Error al cargar</h3><p>' + escHtml(err) + '</p></div>';
  });
}

function nrRender(el, data) {
  var periodo   = data.periodo        || {};
  var niveles   = data.niveles        || [];   // [{nivel, personas[], total_personas, total_puntos}]
  var tablaGan  = data.tabla_ganancias|| [];   // [{nivel, porcentaje, puntos, generado, recibir, abierto}]
  var cal       = data.calificacion   || 'no_calificado';
  var nAbiertos = data.niveles_abiertos || 0;

  var calLabel = { calificado: '✅ Calificado', parcial: '⚠️ Parcial', no_calificado: '❌ No calificado' };
  var calColor = { calificado: 'success', parcial: 'warning', no_calificado: 'danger' };

  /* ── Mes/año selector ────────────────────────────────────── */
  var mesActual = new Date().getMonth() + 1;
  var anioActual = new Date().getFullYear();
  var meses = ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
               'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];

  var mesOpts = '';
  for (var m = 1; m <= 12; m++) {
    mesOpts += '<option value="' + m + '"' + (m === (periodo.mes || mesActual) ? ' selected' : '') + '>' + meses[m-1] + '</option>';
  }
  var anioOpts = '';
  for (var a = anioActual; a >= anioActual - 2; a--) {
    anioOpts += '<option value="' + a + '"' + (a === (periodo.anio || anioActual) ? ' selected' : '') + '>' + a + '</option>';
  }

  var html =
    '<div class="page-header">' +
      '<div class="section-title" style="margin:0">Reporte de Red</div>' +
    '</div>' +

    /* Selector de período */
    '<div class="card mb-16">' +
      '<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">' +
        '<select id="nrMes" class="form-control" style="width:auto">' + mesOpts + '</select>' +
        '<select id="nrAnio" class="form-control" style="width:auto">' + anioOpts + '</select>' +
        '<button class="btn btn-teal" onclick="nrReload()">Actualizar</button>' +
      '</div>' +
    '</div>' +

    /* Resumen general */
    '<div class="stats-grid mb-16">' +
      statCard('👥', 'navy',    data.total_personas || 0,       'Personas en red') +
      statCard('🏆', 'teal',   formatPts(data.total_puntos || 0), 'Puntos en red') +
      statCard('📊', 'navy',   nAbiertos + ' niveles',          'Niveles abiertos') +
      statCard(cal === 'calificado' ? '✅' : cal === 'parcial' ? '⚠️' : '❌',
               calColor[cal],
               calLabel[cal] || cal,
               'Calificación') +
    '</div>' +

    /* Info calificación */
    '<div class="card mb-16">' +
      '<div class="card-header"><span class="card-title">📋 Mi calificación</span></div>' +
      '<div style="padding:0 16px">' +
        '<div style="display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)">' +
          '<span style="color:var(--text-muted)">Puntos propios del mes</span>' +
          '<strong>' + formatPts(data.puntos_propios || 0) + ' pts</strong>' +
        '</div>' +
        '<div style="display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)">' +
          '<span style="color:var(--text-muted)">Directos con 624+ pts</span>' +
          '<strong>' + (data.directos_624 || 0) + '</strong>' +
        '</div>' +
        '<div style="display:flex;justify-content:space-between;padding:12px 0">' +
          '<span style="color:var(--text-muted)">Directos con 1500+ pts</span>' +
          '<strong>' + (data.directos_1500 || 0) + '</strong>' +
        '</div>' +
      '</div>' +
    '</div>';

  /* Tabla de ganancias por nivel */
  if (tablaGan.length > 0) {
    html +=
      '<div class="card mb-16">' +
        '<div class="card-header"><span class="card-title">💰 Ganancias por nivel</span>' +
          '<span style="font-size:13px;color:var(--text-muted)">Período: ' +
            (meses[(periodo.mes || mesActual) - 1] || '') + ' ' + (periodo.anio || anioActual) +
          '</span>' +
        '</div>' +
        '<div class="table-wrap"><table>' +
          '<thead><tr>' +
            '<th style="text-align:center">Nivel</th>' +
            '<th style="text-align:center">%</th>' +
            '<th style="text-align:right">Puntos red</th>' +
            '<th style="text-align:right">Generado</th>' +
            '<th style="text-align:right">A recibir</th>' +
            '<th style="text-align:center">Estado</th>' +
          '</tr></thead><tbody>';

    for (var i = 0; i < tablaGan.length; i++) {
      var tg = tablaGan[i];
      var abierto = !!tg.abierto;
      var rowStyle = abierto ? '' : 'opacity:.45';
      html +=
        '<tr style="' + rowStyle + '">' +
          '<td style="text-align:center;font-weight:700">Nv ' + tg.nivel + '</td>' +
          '<td style="text-align:center;color:var(--text-muted)">' + tg.porcentaje + '%</td>' +
          '<td style="text-align:right">' + formatPts(tg.puntos) + '</td>' +
          '<td style="text-align:right">' + formatMXN(tg.generado) + '</td>' +
          '<td style="text-align:right;font-weight:700;color:' + (abierto ? 'var(--teal-dark)' : 'var(--text-muted)') + '">' +
            (abierto ? formatMXN(tg.recibir) : '—') +
          '</td>' +
          '<td style="text-align:center">' +
            (abierto
              ? '<span class="badge badge-success">Abierto</span>'
              : '<span class="badge" style="background:var(--bg);color:var(--text-muted)">Cerrado</span>') +
          '</td>' +
        '</tr>';
    }

    html +=
        '</tbody>' +
        '<tfoot><tr style="background:var(--bg);font-weight:800">' +
          '<td colspan="3" style="padding:10px 8px">Total</td>' +
          '<td style="text-align:right;padding:10px 8px">' + formatMXN(data.total_generado || 0) + '</td>' +
          '<td style="text-align:right;padding:10px 8px;color:var(--teal-dark)">' + formatMXN(data.total_recibir || 0) + '</td>' +
          '<td></td>' +
        '</tr></tfoot>' +
      '</table></div></div>';
  }

  /* Detalle por nivel — personas con puntos */
  if (niveles.length > 0) {
    html += '<div class="card">' +
      '<div class="card-header"><span class="card-title">👥 Detalle por nivel</span></div>';

    for (var ni = 0; ni < niveles.length; ni++) {
      var nv = niveles[ni];
      html +=
        '<div style="border-bottom:1px solid var(--border);padding:12px 16px">' +
          '<div style="display:flex;justify-content:space-between;align-items:center;' +
               'cursor:pointer;user-select:none" onclick="nrToggleNivel(' + nv.nivel + ')">' +
            '<div style="font-weight:700;color:var(--navy)">Nivel ' + nv.nivel +
              ' <span style="font-weight:400;color:var(--text-muted);font-size:13px">— ' +
              nv.total_personas + ' persona(s) · ' + formatPts(nv.total_puntos) + ' pts</span>' +
            '</div>' +
            '<span id="nrArrow' + nv.nivel + '" style="color:var(--navy);font-size:16px">▶</span>' +
          '</div>' +
          '<div id="nrNv' + nv.nivel + '" style="display:none;margin-top:12px">' +
            '<div class="table-wrap"><table>' +
              '<thead><tr><th>Distribuidor</th><th>Ref</th><th style="text-align:right">Puntos</th></tr></thead>' +
              '<tbody>';

      var personas = nv.personas || [];
      for (var pi = 0; pi < personas.length; pi++) {
        var p = personas[pi];
        html +=
          '<tr>' +
            '<td>' + escHtml(p.nombre_completo || '—') + '</td>' +
            '<td style="font-size:12px;color:var(--text-muted)">' + escHtml(p.referencia || '—') + '</td>' +
            '<td style="text-align:right;font-weight:700;color:var(--teal-dark)">' + formatPts(p.puntos) + ' pts</td>' +
          '</tr>';
      }

      html += '</tbody></table></div></div></div>';
    }

    html += '</div>';
  } else {
    html += '<div class="empty-state"><div class="empty-icon">📊</div>' +
      '<h3>Sin actividad</h3><p>No hay puntos registrados en tu red este período.</p></div>';
  }

  el.innerHTML = html;
}

/* ── Toggle de nivel ─────────────────────────────────────────── */
function nrToggleNivel(nivel) {
  var el    = document.getElementById('nrNv'    + nivel);
  var arrow = document.getElementById('nrArrow' + nivel);
  if (!el) return;
  var open = el.style.display !== 'none';
  el.style.display    = open ? 'none'              : 'block';
  arrow.style.transform = open ? ''               : 'rotate(90deg)';
}

/* ── Recarga con mes/año seleccionado ────────────────────────── */
function nrReload() {
  var mes  = document.getElementById('nrMes').value;
  var anio = document.getElementById('nrAnio').value;
  var el   = document.getElementById('contentArea');
  el.innerHTML = '<div class="loading-overlay"><div class="spinner-lg"></div><span>Cargando...</span></div>';

  apiGet('/network/reporte?mes=' + mes + '&anio=' + anio, function(data) {
    nrRender(el, data);
  }, function(err) {
    el.innerHTML =
      '<div class="page-header"><div class="section-title" style="margin:0">Reporte de Red</div></div>' +
      '<div class="empty-state"><div class="empty-icon">⚠️</div><h3>Error</h3><p>' + escHtml(err) + '</p></div>';
  });
}
