// ══════════════════════════════════════════════
// RRB Admin — Centro Overrides
// Restringe datos visibles cuando role=centro
// Se carga DESPUÉS de todos los módulos
// ══════════════════════════════════════════════

(function() {
  if (typeof esCentro !== 'function') return;

  // ── Helper: enmascarar teléfono → ***…1234 ──
  function maskTel(tel) {
    if (!tel) return '-';
    const s = String(tel).replace(/\s/g, '');
    if (s.length <= 4) return s;
    return '***' + s.slice(-4);
  }

  // ═══════════════════════════════════════════════════════════════
  //  OVERRIDE: distVerDetalle — versión restringida para centros
  // ═══════════════════════════════════════════════════════════════
  const _origDistVerDetalle = window.distVerDetalle;

  window.distVerDetalle = async function(idInv) {
    if (!esCentro()) return _origDistVerDetalle(idInv);

    _distCurrentId = idInv;
    document.getElementById('dist-tabla').style.display = 'none';
    document.getElementById('dist-empty').style.display = 'none';
    document.getElementById('dist-estado').style.display = 'none';
    const panel = document.getElementById('dist-detalle-panel');
    panel.style.display = 'block';
    panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
    document.getElementById('dist-det-body').innerHTML =
      '<div style="text-align:center;padding:40px;color:#aaa">⏳ Cargando...</div>';
    document.getElementById('dist-det-tx-body').innerHTML = '';
    document.getElementById('dist-det-tx-wrap').style.display = 'none';

    try {
      const [resD, resTx, resG, resV] = await Promise.all([
        fetch(`api/distribuidores-detalle.php?id=${idInv}`, { headers: { Authorization: 'Bearer ' + token() } }),
        fetch(`api/distribuidores-transacciones.php?id=${idInv}`, { headers: { Authorization: 'Bearer ' + token() } }),
        fetch(`api/distribuidores-ganancias.php?id=${idInv}`, { headers: { Authorization: 'Bearer ' + token() } }),
        fetch(`api/distribuidores-vouchers.php?id=${idInv}`, { headers: { Authorization: 'Bearer ' + token() } })
      ]);
      const dataD  = await resD.json();
      const dataTx = await resTx.json();
      const dataG  = await resG.json();
      const dataV  = await resV.json();
      if (!dataD.ok) throw new Error(dataD.error || 'Error al cargar detalle');
      const d = dataD.distribuidor;
      _distEditData = d;

      document.getElementById('dist-det-titulo').textContent =
        `${d.nombre || ''} ${d.appat || ''} ${d.apmat || ''}`.trim() || 'Distribuidor';

      const fechasEl = document.getElementById('dist-det-fechas');
      if (fechasEl) {
        const partes = [];
        if (d.fecha_nac) partes.push('Nac: ' + d.fecha_nac);
        if (d.fecha_registro || d.fecharegistro) partes.push('Ingreso: ' + (d.fecha_registro || d.fecharegistro));
        fechasEl.textContent = partes.join('  |  ');
      }

      // ── Patrocinadores: solo 1 nivel arriba ──
      const pats = dataD.patrocinadores || [];
      const primerPat = pats.length > 0 ? pats[0] : null;
      const patHtml = primerPat
        ? `<div style="display:grid;grid-template-columns:30px 1fr 1fr 2fr;gap:8px;align-items:center;padding:8px 0">
             <div style="font-size:11px;color:var(--muted);font-weight:700;text-align:center">1</div>
             <div style="font-weight:700;color:var(--primary);font-size:13px">${primerPat.referencia || '-'}</div>
             <div style="font-family:monospace;font-size:12px;color:#555">${primerPat.rfc || '-'}</div>
             <div style="font-size:13px">${primerPat.nombre_completo || '-'}</div>
           </div>`
        : '<div style="color:var(--muted);font-size:13px;padding:8px 0">Sin patrocinador</div>';

      // ── Ganancias: solo mes, real, status, fecha pago, no. cuenta, folio ──
      const gs = (dataG && dataG.ok) ? (dataG.ganancias || []) : [];
      const statusColor = { 'Por Pagar': '#fff3cd', 'Depósito': '#d4edda', 'Voucher': '#cce5ff', 'Retenida': '#f8d7da' };
      const statusText  = { 'Por Pagar': '#856404', 'Depósito': '#155724', 'Voucher': '#004085', 'Retenida': '#721c24' };
      const gRows = gs.length > 0 ? gs.map(g => `
        <div style="border-bottom:1px solid var(--border);padding:8px 0">
          <div style="display:grid;grid-template-columns:110px 90px 90px 1fr;gap:6px;align-items:center;font-size:13px">
            <div style="font-weight:600">${g.mes_nombre} ${g.anio_corresponde}</div>
            <div style="text-align:right;font-weight:700;color:var(--primary)">${fmtMxn(g._real || 0)}</div>
            <div style="text-align:center">
              <span style="padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;background:${statusColor[g.status_label]||'#eee'};color:${statusText[g.status_label]||'#333'}">${g.status_label}</span>
            </div>
            <div style="font-size:12px;color:#666">
              <span style="color:var(--muted);font-size:11px">Pago:</span> ${g.fechaf || '-'}
              &nbsp;&nbsp;<span style="color:var(--muted);font-size:11px">Cta:</span> ${g.nocuenta || '-'}
              &nbsp;&nbsp;<span style="color:var(--muted);font-size:11px">Folio:</span> ${g.folio || '-'}
            </div>
          </div>
        </div>`).join('') : '<div style="color:var(--muted);font-size:13px;padding:8px 0">Sin ganancias en los últimos 6 meses</div>';

      // ── Vouchers: sin número de voucher (#idv) ──
      const vs = (dataV && dataV.ok) ? (dataV.vouchers || []) : [];
      const vRows = vs.length > 0 ? vs.map(v => `
        <div style="border-bottom:1px solid var(--border);padding:8px 0">
          <div style="display:grid;grid-template-columns:90px 90px 70px 1fr;gap:8px;align-items:center;font-size:13px">
            <div style="text-align:right"><span style="font-size:11px;color:var(--muted)">Total</span><br>${fmtMxn(v.total || 0)}</div>
            <div style="text-align:right"><span style="font-size:11px;color:var(--muted)">Restante</span><br><strong>${fmtMxn(v.restante || 0)}</strong></div>
            <div style="text-align:center">
              <span style="padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;background:${v.status_label==='Activo'?'#d4edda':'#e2e3e5'};color:${v.status_label==='Activo'?'#155724':'#383d41'}">${v.status_label}</span>
            </div>
            <div style="font-size:12px;color:#666">${v.fecha_cre || '-'}</div>
          </div>
          ${v.observaciones ? '<div style="font-size:12px;color:#666;margin-top:4px"><span style="color:var(--muted);font-size:11px">Obs:</span> ' + v.observaciones + '</div>' : ''}
        </div>`).join('') : '<div style="color:var(--muted);font-size:13px;padding:8px 0">Sin vouchers en los últimos 6 meses</div>';

      // ── Render HTML restringido ──
      document.getElementById('dist-det-body').innerHTML = `
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:16px">
          <div style="background:#f5f8fc;border-radius:8px;padding:12px">
            <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px">Referencia</div>
            <div style="font-weight:700;color:var(--primary)">${d.referencia || '-'}</div>
          </div>
          <div style="background:#f5f8fc;border-radius:8px;padding:12px">
            <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px">RFC</div>
            <div style="font-weight:600;font-family:monospace">${d.rfc || '-'}</div>
          </div>
          <div style="background:#f5f8fc;border-radius:8px;padding:12px">
            <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px">Correo</div>
            <div>${d.email || '-'}</div>
          </div>
          <div style="background:#f5f8fc;border-radius:8px;padding:12px">
            <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px">Teléfonos</div>
            ${d.telefono ? '<div style="font-size:13px">📞 Tel1: ' + maskTel(d.telefono) + '</div>' : ''}
            ${d.celular   ? '<div style="font-size:13px">📱 Tel2: ' + maskTel(d.celular)  + '</div>' : ''}
            ${d.whatsapp  ? '<div style="font-size:13px">💬 WA: '  + maskTel(d.whatsapp)  + '</div>' : ''}
            ${!d.telefono && !d.celular && !d.whatsapp ? '<div>-</div>' : ''}
          </div>
          <div style="background:#f5f8fc;border-radius:8px;padding:12px;grid-column:span 2">
            <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px">Domicilio</div>
            <div style="font-size:13px;line-height:1.6">
              ${d.domicilio ? '<div>' + d.domicilio + '</div>' : ''}
              ${d.colonia   ? '<div>' + d.colonia   + '</div>' : ''}
              <div>${[d.ciudad, d.estado].filter(Boolean).join(', ')}${d.cp ? ' C.P. ' + d.cp : ''}</div>
            </div>
          </div>
        </div>

        <!-- Patrocinador directo (solo 1 nivel) -->
        <details style="margin-bottom:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden">
          <summary style="padding:10px 14px;cursor:pointer;font-weight:600;font-size:13px;background:#f5f8fc;user-select:none;list-style:none;display:flex;align-items:center;gap:8px">
            <span style="font-size:16px">👤</span> Patrocinador directo
            <span style="margin-left:auto;font-size:11px;color:var(--muted)">▼ ver</span>
          </summary>
          <div style="padding:4px 14px 12px">
            <div style="display:grid;grid-template-columns:30px 1fr 1fr 2fr;gap:8px;padding:6px 0;border-bottom:2px solid var(--border)">
              <div style="font-size:10px;color:var(--muted);font-weight:700">#</div>
              <div style="font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase">Referencia</div>
              <div style="font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase">RFC</div>
              <div style="font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase">Nombre</div>
            </div>
            ${patHtml}
          </div>
        </details>

        <!-- Ganancias restringidas: mes, real, status, fecha pago, cuenta, folio -->
        <details style="margin-bottom:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden">
          <summary style="padding:10px 14px;cursor:pointer;font-weight:600;font-size:13px;background:#f5f8fc;user-select:none;list-style:none;display:flex;align-items:center;gap:8px">
            <span style="font-size:16px">💰</span> Ganancias últimos 6 meses (${gs.length} registro${gs.length !== 1 ? 's' : ''})
            <span style="margin-left:auto;font-size:11px;color:var(--muted)">▼ ver</span>
          </summary>
          <div style="padding:4px 14px 12px">
            <div style="display:grid;grid-template-columns:110px 90px 90px 1fr;gap:6px;padding:6px 0;border-bottom:2px solid var(--border)">
              <div style="font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase">Mes</div>
              <div style="font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;text-align:right">Real</div>
              <div style="font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;text-align:center">Status</div>
              <div style="font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase">Detalles</div>
            </div>
            ${gRows}
          </div>
        </details>

        <!-- Vouchers sin número -->
        <details style="margin-bottom:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden">
          <summary style="padding:10px 14px;cursor:pointer;font-weight:600;font-size:13px;background:#f5f8fc;user-select:none;list-style:none;display:flex;align-items:center;gap:8px">
            <span style="font-size:16px">🎫</span> Vouchers últimos 6 meses (${vs.length} voucher${vs.length !== 1 ? 's' : ''})
            <span style="margin-left:auto;font-size:11px;color:var(--muted)">▼ ver</span>
          </summary>
          <div style="padding:4px 14px 12px">
            ${vRows}
          </div>
        </details>
      `;

      // ── Transacciones (se muestra igual, sin cambios) ──
      const txs = dataTx.transacciones || [];
      const DIST_TX_TIPO = {
        6:  { label: 'Especial',    bg: '#fff3cd', color: '#856404' },
        10: { label: 'Venta',       bg: '#d4edda', color: '#155724' },
        11: { label: 'Por Asignar', bg: '#cce5ff', color: '#004085' },
        12: { label: 'Asignación',  bg: '#d4edda', color: '#155724' },
      };
      const rows = txs.length > 0 ? txs.map(t => {
        const tipo = DIST_TX_TIPO[t.tipotransaccion] || { label: t.tipotransaccion || '-', bg: '#f0f0f0', color: '#333' };
        return `
        <tr style="border-bottom:1px solid var(--border);cursor:pointer" onclick="distVerTx(${t.idtransacciones})" title="Ver detalle" onmouseover="this.style.background='#f0f4fb'" onmouseout="this.style.background=''">
          <td style="padding:8px 12px;font-family:monospace;font-size:12px;color:var(--primary);font-weight:700">${t.idtransacciones || '-'}</td>
          <td style="padding:8px 12px">${t.fechat || '-'}</td>
          <td style="padding:8px 12px"><span style="padding:3px 9px;border-radius:12px;font-size:11px;font-weight:700;background:${tipo.bg};color:${tipo.color}">${tipo.label}</span></td>
          <td style="padding:8px 12px;text-align:right;font-weight:600">${fmtNum(t.unidades || 0)}</td>
          <td style="padding:8px 12px;text-align:right">${fmtMxn(t.monto_mxn || 0)}</td>
        </tr>`;
      }).join('') : '<tr><td colspan="5" style="text-align:center;padding:20px;color:#aaa">Sin transacciones en los últimos 6 meses</td></tr>';
      document.getElementById('dist-det-tx-body').innerHTML = rows;
      document.getElementById('dist-det-tx-wrap').style.display = 'block';

    } catch(e) {
      document.getElementById('dist-det-body').innerHTML =
        `<div style="color:#dc3545;padding:20px">❌ Error: ${e.message}</div>`;
    }
  };

  // ═══════════════════════════════════════════════════════════════
  //  OVERRIDE: Ocultar botón Editar datos en modo centro
  // ═══════════════════════════════════════════════════════════════
  const _origDistEditarDatosInline = window.distEditarDatosInline;
  window.distEditarDatosInline = function() {
    if (esCentro()) {
      showToast('No tienes permiso para editar datos de distribuidores', 'warning');
      return;
    }
    return _origDistEditarDatosInline();
  };

  // ═══════════════════════════════════════════════════════════════
  //  OVERRIDE: ncSelDist — teléfonos enmascarados para centros
  //  Los botones muestran ***1234 pero envían el número real
  // ═══════════════════════════════════════════════════════════════
  const _origNcSelDist = window.ncSelDist;

  window.ncSelDist = function(id, nombre, tel1, tel2, wa, referencia, rfc, email) {
    if (!esCentro()) return _origNcSelDist(id, nombre, tel1, tel2, wa, referencia, rfc, email);

    email = email || '';
    _ncDistSel = { id_inv: id, nombre, tel1: tel1||'', tel2: tel2||'', wa: wa||'', telContacto: '', referencia: referencia||'', rfc: rfc||'', email };
    document.getElementById('nc-dist-resultados').innerHTML = '';
    document.getElementById('nc-dist-q').value = nombre;

    // Construir lista de teléfonos con máscara visual
    const tels = [tel1, tel2, wa].filter(t => t && t.trim());
    let telHtml = '';
    if (tels.length) {
      telHtml = `
        <div style="margin-top:10px">
          <div style="font-size:12px;font-weight:700;color:#6c757d;text-transform:uppercase;margin-bottom:6px">Teléfono de contacto para envío <span style="color:#dc3545">*</span></div>
          <div id="nc-tel-opciones" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px">
            ${tels.map(t => `<button onclick="ncSelTel('${t}',this)" style="padding:6px 14px;border:2px solid #e9ecef;background:#fff;border-radius:7px;cursor:pointer;font-size:13px">${maskTel(t)}</button>`).join('')}
            <button onclick="ncSelTel('otro',this)" style="padding:6px 14px;border:2px dashed #ced4da;background:#fff;border-radius:7px;cursor:pointer;font-size:13px;color:#6c757d">Otro...</button>
          </div>
          <input id="nc-tel-otro" type="text" maxlength="10" placeholder="Ingresa el teléfono" style="display:none;padding:7px 10px;border:1px solid #ced4da;border-radius:6px;font-size:13px;width:180px">
          <div id="nc-tel-aviso" style="font-size:12px;color:#dc3545;font-weight:600;display:none">⚠️ Debes seleccionar un teléfono para continuar</div>
        </div>`;
    } else {
      telHtml = `
        <div style="margin-top:10px">
          <div style="font-size:12px;font-weight:700;color:#dc3545;text-transform:uppercase;margin-bottom:6px">⚠️ Sin teléfonos registrados — Ingresa uno para continuar</div>
          <input id="nc-tel-otro" type="text" maxlength="10" placeholder="Ingresa el teléfono" style="padding:7px 10px;border:1px solid #ced4da;border-radius:6px;font-size:13px;width:180px">
        </div>`;
    }

    // Correo (igual que admin)
    const emailHtml = email
      ? `<div style="margin-top:10px">
           <div style="font-size:12px;font-weight:700;color:#6c757d;text-transform:uppercase;margin-bottom:6px">📧 Correo electrónico</div>
           <div style="display:flex;align-items:center;gap:8px">
             <span id="nc-email-display" style="font-size:13px;color:#212529">${email}</span>
             <button onclick="ncEmailEditar()" style="padding:3px 10px;background:#fff;border:1px solid #ced4da;border-radius:6px;cursor:pointer;font-size:12px;color:#0d6efd">Modificar</button>
           </div>
           <div id="nc-email-edit-row" style="display:none;margin-top:6px">
             <input id="nc-email-input" type="email" value="${email}" style="padding:7px 10px;border:1px solid #ced4da;border-radius:6px;font-size:13px;width:240px">
             <button onclick="ncEmailGuardar()" style="margin-left:6px;padding:6px 14px;background:#198754;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px">Guardar</button>
             <button onclick="ncEmailCancelar()" style="margin-left:4px;padding:6px 10px;background:#fff;border:1px solid #ced4da;border-radius:6px;cursor:pointer;font-size:13px;color:#6c757d">Cancelar</button>
             <span id="nc-email-msg" style="margin-left:8px;font-size:12px"></span>
           </div>
         </div>`
      : `<div style="margin-top:10px">
           <div style="font-size:12px;font-weight:700;color:#dc3545;text-transform:uppercase;margin-bottom:6px">⚠️ Sin correo electrónico registrado</div>
           <div style="display:flex;align-items:center;gap:8px">
             <input id="nc-email-input" type="email" placeholder="correo@ejemplo.com" style="padding:7px 10px;border:1px solid #ced4da;border-radius:6px;font-size:13px;width:240px">
             <button onclick="ncEmailGuardar()" style="padding:6px 14px;background:#198754;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px">Guardar</button>
             <span id="nc-email-msg" style="font-size:12px"></span>
           </div>
         </div>`;

    const info = document.getElementById('nc-dist-sel-info');
    info.innerHTML = `✅ Distribuidor seleccionado: <b>${nombre}</b> (ID: ${id})${telHtml}${emailHtml}<div id="nc-dist-pendientes" style="margin-top:10px;font-size:13px;color:#6c757d">Verificando pendientes...</div>`;
    info.style.display = 'block';
    document.getElementById('nc-paso3').style.display = 'block';

    // Consultar pendientes
    api('GET', `api/compra-pendientes.php?id_inv=${id}`)
      .then(data => {
        const el = document.getElementById('nc-dist-pendientes');
        if (!el) return;
        if (!data.ok) { el.textContent = ''; return; }
        const msgs = [];
        if (data.regalias.cantidad > 0) {
          msgs.push(`⚠️ Tiene ${data.regalias.cantidad} regalía${data.regalias.cantidad>1?'s':''} pendiente${data.regalias.cantidad>1?'s':''} por cobrar ($${data.regalias.monto.toLocaleString('es-MX', {minimumFractionDigits:2, maximumFractionDigits:2})})`);
        }
        if (data.vouchers.cantidad > 0) {
          msgs.push(`⚠️ Tiene ${data.vouchers.cantidad} voucher${data.vouchers.cantidad>1?'s':''} pendiente${data.vouchers.cantidad>1?'s':''} con saldo disponible ($${data.vouchers.monto.toLocaleString('es-MX', {minimumFractionDigits:2, maximumFractionDigits:2})})`);
        }
        if (msgs.length) {
          el.innerHTML = msgs.map(m => `<div style="color:#dc3545;font-weight:600;margin-top:4px">${m}</div>`).join('');
        } else { el.textContent = ''; }
      })
      .catch(() => {
        const el = document.getElementById('nc-dist-pendientes');
        if (el) el.textContent = '';
      });
  };

  // ═══════════════════════════════════════════════════════════════
  //  OVERRIDE: ncMostrarProductos — validar teléfono obligatorio
  // ═══════════════════════════════════════════════════════════════
  const _origNcMostrarProductos = window.ncMostrarProductos;

  window.ncMostrarProductos = function() {
    if (esCentro()) {
      // Verificar que se haya seleccionado un teléfono
      const tel = _ncDistSel?.telContacto || '';
      const otroInput = document.getElementById('nc-tel-otro');
      const telOtro = otroInput ? otroInput.value.trim() : '';

      if (!tel && !telOtro) {
        const aviso = document.getElementById('nc-tel-aviso');
        if (aviso) aviso.style.display = 'block';
        showToast('Selecciona un teléfono de contacto para continuar', 'warning');
        return;
      }
      // Si usó "otro", guardarlo
      if (!tel && telOtro) {
        _ncDistSel.telContacto = telOtro;
      }
    }
    return _origNcMostrarProductos();
  };

})();
