// ══════════════════════════════════════════════
// RRB Admin — Module: transacciones
// ══════════════════════════════════════════════

// ── TRANSACCIONES ──
// ════════════════════════════════════════════
let _txPagina            = 1;
let _txIniciado          = false;
let _txCentros           = [];
let _txData              = null;
let _txMostrarPendientes = false;
let _txSortCol           = 'fecha';   // columna activa de ordenamiento
let _txSortDir           = 'desc';    // 'asc' | 'desc'

// Colores por tipo de transacción
const TX_TIPO_STYLE = {
  1:  { label: 'Cancelada',       bg: '#f8d7da', color: '#721c24' },
  6:  { label: 'Especial',        bg: '#fff3cd', color: '#856404' },
  7:  { label: 'Venta Pendiente', bg: '#fde8e8', color: '#c0392b' },
  8:  { label: 'Venta Pendiente', bg: '#fde8e8', color: '#c0392b' },
  10: { label: 'Venta',           bg: '#d4edda', color: '#155724' },
  11: { label: 'Por Asignar',     bg: '#d1ecf1', color: '#0c5460' },
  12: { label: 'Asignación',      bg: '#e2d9f3', color: '#4a235a' },
};

// ── Ordenamiento de tabla ────────────────────────────────────────────────
function txSortBy(col) {
  if (_txSortCol === col) {
    _txSortDir = _txSortDir === 'asc' ? 'desc' : 'asc';
  } else {
    _txSortCol = col;
    _txSortDir = 'asc';
  }
  // Actualizar iconos en todos los encabezados
  const cols = ['id','fecha','tipo','distribuidor','referencia','nota','cantidad','puntos','por_pagar'];
  cols.forEach(c => {
    const el = document.getElementById('tx-sort-' + c);
    if (!el) return;
    if (c === _txSortCol) {
      el.textContent = _txSortDir === 'asc' ? '▲' : '▼';
      el.style.opacity = '1';
    } else {
      el.textContent = '⇅';
      el.style.opacity = '.5';
    }
  });
  if (_txData && _txData.transacciones) txRenderRows(_txData.transacciones);
}

function txRenderRows(rows) {
  const tbody = document.getElementById('tx-tbody');
  if (!rows || !rows.length) {
    tbody.innerHTML = '<tr><td colspan="10" style="padding:40px;text-align:center;color:#aaa">Sin resultados para el período seleccionado</td></tr>';
    return;
  }
  // Ordenar
  const col = _txSortCol;
  const dir = _txSortDir === 'asc' ? 1 : -1;
  const sorted = [...rows].sort((a, b) => {
    let va = a[col] ?? '';
    let vb = b[col] ?? '';
    // Fechas: detectar formato YYYY-MM-DD o YYYY-MM-DD HH:MM:SS
    if (col === 'fecha' || (typeof va === 'string' && /^\d{4}-\d{2}-\d{2}/.test(va))) {
      const da = new Date(String(va).replace(' ', 'T'));
      const db = new Date(String(vb).replace(' ', 'T'));
      return dir * (da - db);
    }
    // Numérico
    if (typeof va === 'number' || (typeof va !== 'string' && !isNaN(parseFloat(va)))) {
      va = parseFloat(va) || 0;
      vb = parseFloat(vb) || 0;
      return dir * (va - vb);
    }
    // Texto
    return dir * String(va).localeCompare(String(vb), 'es-MX');
  });
  tbody.innerHTML = sorted.map((r, i) => {
    const ts = TX_TIPO_STYLE[r.tipo] || { label: r.tipo_label, bg: '#f0f0f0', color: '#333' };
    const badge = `<span style="display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;background:${ts.bg};color:${ts.color}">${ts.label}</span>`;
    const porPagar = parseFloat(r.por_pagar || 0);
    const porPagarCell = porPagar > 0
      ? `<span style="color:#e74c3c;font-weight:700">${fmtMXN(porPagar)}</span>`
      : '<span style="color:#27ae60;font-weight:600;font-size:12px">—</span>';
    const bg = i % 2 === 0 ? '#fff' : '#f9fbfd';
    return `<tr style="background:${bg};border-bottom:1px solid #f0f0f0;cursor:pointer" onclick="txVerDetalle(${r.id})" onmouseover="this.style.background='#eef4fb'" onmouseout="this.style.background='${bg}'">
      <td style="padding:10px 14px;font-weight:600;color:var(--primary)">${r.id}</td>
      <td style="padding:10px 14px;white-space:nowrap">${r.fecha}</td>
      <td style="padding:10px 14px">${badge}</td>
      <td style="padding:10px 14px">${r.distribuidor || '—'}</td>
      <td style="padding:10px 14px;color:#888;font-size:12px">${r.referencia || '—'}</td>
      <td style="padding:10px 14px;font-size:12px;font-weight:600;color:var(--primary)">${r.nota}</td>
      <td style="padding:10px 14px;text-align:right;font-weight:600">${fmtMXN(r.cantidad)}</td>
      <td style="padding:10px 14px;text-align:right;color:var(--accent);font-weight:600">${Number(r.puntos).toLocaleString('es-MX')}</td>
      <td style="padding:10px 14px;text-align:right">${porPagarCell}</td>
      <td style="padding:6px 10px;text-align:center">
        <button onclick="event.stopPropagation();ncImprimirCompraAnterior(${r.id})"
          style="padding:4px 10px;background:#1a3a6b;color:#fff;border:none;border-radius:6px;font-size:11px;cursor:pointer;white-space:nowrap">
          🖨️ PDF
        </button>
      </td>
    </tr>`;
  }).join('');
}

// Poblar el selector de meses: 24 meses hacia atrás desde el actual
function txPoblarMeses() {
  const sel = document.getElementById('tx-mes');
  if (!sel) return;
  const meses = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
  const hoy = new Date();
  for (let i = 0; i < 24; i++) {
    const d = new Date(hoy.getFullYear(), hoy.getMonth() - i, 1);
    const y = d.getFullYear();
    const m = d.getMonth(); // 0-based
    const val = `${y}-${String(m+1).padStart(2,'0')}`;
    const opt = document.createElement('option');
    opt.value = val;
    opt.textContent = `${meses[m]} ${y}`;
    if (i === 0) opt.selected = true;
    sel.appendChild(opt);
  }
}

// Al seleccionar un mes, actualiza los campos desde/hasta y lanza la búsqueda
function txSeleccionarMes() {
  const val = document.getElementById('tx-mes').value;
  if (!val) return;
  const [y, m] = val.split('-').map(Number);
  // Último día del mes
  const lastDay = new Date(y, m, 0).getDate();
  document.getElementById('tx-desde').value = `${y}-${String(m).padStart(2,'0')}-01`;
  document.getElementById('tx-hasta').value = `${y}-${String(m).padStart(2,'0')}-${String(lastDay).padStart(2,'0')}`;
  txCargar(1);
}

function txTogglePendientes() {
  _txMostrarPendientes = !_txMostrarPendientes;
  const btn = document.getElementById('tx-btn-pendientes');
  if (_txMostrarPendientes) {
    btn.style.background = '#e67e22';
    btn.style.color = '#fff';
    btn.textContent = '✖ Ocultar Pendientes y Canceladas';
  } else {
    btn.style.background = '#fff';
    btn.style.color = '#e67e22';
    btn.textContent = '⚠ Mostrar Pendientes y Canceladas';
  }
  txCargar(1);
}

async function txInit() {
  // Poblar selector de meses solo la primera vez
  if (!_txIniciado) {
    txPoblarMeses();
  }

  // Inicializar fechas por defecto (mes actual completo)
  const hoy   = new Date();
  const y     = hoy.getFullYear();
  const m     = String(hoy.getMonth() + 1).padStart(2, '0');
  const lastDay = new Date(hoy.getFullYear(), hoy.getMonth() + 1, 0).getDate();
  const desde = document.getElementById('tx-desde');
  const hasta = document.getElementById('tx-hasta');
  if (!desde.value) desde.value = `${y}-${m}-01`;
  if (!hasta.value) hasta.value = `${y}-${m}-${String(lastDay).padStart(2,'0')}`;

  // Cargar centros solo la primera vez
  if (!_txIniciado) {
    _txIniciado = true;
    await txCargarCentros();
  }

  // Cargar datos del mes actual
  txCargar(1);
}

async function txCargarCentros() {
  try {
    const resp = await api('GET', 'api/transacciones.php?desde=2020-01-01&hasta=2020-01-01&pagina=1&por_pagina=1');
    const centros = resp.centros || [];
    _txCentros = centros;
    const sel = document.getElementById('tx-ci');
    centros.forEach(c => {
      const opt = document.createElement('option');
      opt.value = c.idusuarios_ci;
      opt.textContent = c.nombre;
      sel.appendChild(opt);
    });
    // Auto-select si es centro logueado
    if (esCentro()) { autoSelectCentro('tx-ci'); }
  } catch(e) { console.warn('Error cargando centros:', e); }
}

async function txCargar() {
  const desde    = document.getElementById('tx-desde').value;
  const hasta    = document.getElementById('tx-hasta').value;
  const ci       = document.getElementById('tx-ci').value;
  const tbody    = document.getElementById('tx-tbody');
  const pagInfo  = document.getElementById('tx-pag-info');

  if (!desde || !hasta) {
    tbody.innerHTML = '<tr><td colspan="10" style="padding:30px;text-align:center;color:#e74c3c">Selecciona un rango de fechas válido</td></tr>';
    return;
  }

  tbody.innerHTML = '<tr><td colspan="10" style="padding:40px;text-align:center;color:#aaa">⏳ Cargando...</td></tr>';
  pagInfo.textContent = '';

  try {
    const tipoNota     = document.getElementById('tx-tipo')?.value || '0';
    const soloPorPagar = document.getElementById('tx-solo-porpagar')?.checked ? '1' : '0';
    const pendientesParam = _txMostrarPendientes ? '&mostrar_pendientes=1' : '';
    const url = `api/transacciones.php?desde=${desde}&hasta=${hasta}&ci=${ci}&tipo_nota=${tipoNota}&solo_por_pagar=${soloPorPagar}${pendientesParam}`;
    const resp = await api('GET', url);
    _txData = resp;

    // Totales
    document.getElementById('tx-total-mxn').textContent           = fmtMXN(resp.totales.mxn);
    document.getElementById('tx-total-puntos').textContent        = Number(resp.totales.puntos).toLocaleString('es-MX') + ' pts';
    document.getElementById('tx-total-porpagar').textContent      = fmtMXN(resp.totales.pendiente_pago);
    document.getElementById('tx-total-porpagar-611').textContent  = fmtMXN(resp.totales.por_pagar);
    document.getElementById('tx-total-regs').textContent          = Number(resp.totales.registros).toLocaleString('es-MX');

    // Tabla — usar txRenderRows para aplicar ordenamiento
    txRenderRows(resp.transacciones);

    // Total de registros
    const total = resp.totales.registros;
    pagInfo.textContent = `📊 ${Number(total).toLocaleString('es-MX')} registro${total !== 1 ? 's' : ''} encontrado${total !== 1 ? 's' : ''}`;

  } catch(e) {
    tbody.innerHTML = `<tr><td colspan="9" style="padding:30px;text-align:center;color:#e74c3c">Error al cargar: ${e.message}</td></tr>`;
  }
}

// Búsqueda por ID de transacción
async function txBuscarPorId() {
  const idInput = document.getElementById('tx-buscar-id');
  const id = parseInt(idInput.value);
  if (!id || id < 1) {
    idInput.focus();
    return;
  }
  const tbody   = document.getElementById('tx-tbody');
  const pagInfo = document.getElementById('tx-pag-info');
  tbody.innerHTML = '<tr><td colspan="9" style="padding:40px;text-align:center;color:#aaa">⏳ Buscando...</td></tr>';
  pagInfo.textContent = '';
  try {
    const resp = await api('GET', `api/transacciones.php?id_transaccion=${id}&desde=2000-01-01&hasta=2099-12-31`);
    _txData = resp;
    // Mostrar/ocultar botón limpiar
    document.getElementById('tx-btn-limpiar').style.display = 'inline-block';
    txRenderRows(resp.transacciones);
    const total = resp.totales.registros;
    pagInfo.textContent = total > 0
      ? `📊 ${total} resultado${total !== 1 ? 's' : ''} para transacción #${id}`
      : `Sin resultados para transacción #${id}`;
  } catch(e) {
    tbody.innerHTML = `<tr><td colspan="9" style="padding:30px;text-align:center;color:#e74c3c">Error: ${e.message}</td></tr>`;
  }
}

function txLimpiarBusqueda() {
  document.getElementById('tx-buscar-id').value = '';
  document.getElementById('tx-btn-limpiar').style.display = 'none';
  txCargar();
}

// ── Detalle de transacción ──────────────────────────────────────────────
async function txVerDetalle(idTx) {
  const modal = document.getElementById('modal-tx-detalle');
  const body  = document.getElementById('tx-det-body');
  const titulo = document.getElementById('tx-det-titulo');
  body.innerHTML = '<div style="text-align:center;padding:40px;color:#aaa">⏳ Cargando...</div>';
  modal.classList.add('open');
  try {
    const d = await api('GET', `api/transaccion-detalle.php?id=${idTx}`);
    const tx = d.transaccion;
    const folio = 'RRB-' + String(tx.idtransacciones).padStart(6, '0');
    titulo.textContent = `Detalle — ${folio}`;

    const tipoStyle = TX_TIPO_STYLE[tx.tipo] || { label: tx.tipo_label, bg: '#f0f0f0', color: '#333' };
    const badge = `<span style="display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;background:${tipoStyle.bg};color:${tipoStyle.color}">${tipoStyle.label}</span>`;
    const estadoBadge = tx.por_pagar
      ? '<span style="color:#e74c3c;font-weight:700">⏳ Por Pagar</span>'
      : '<span style="color:#27ae60;font-weight:700">✅ Pagado</span>';

    let html = `
      <!-- Datos generales -->
      <div style="background:#f8fafc;border-radius:10px;padding:16px 20px;margin-bottom:18px">
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px">
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Folio</div><div style="font-size:15px;font-weight:700;color:var(--primary)">${folio}</div></div>
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Fecha</div><div style="font-size:14px">${tx.fechat}</div></div>
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Tipo</div><div style="margin-top:3px">${badge}</div></div>
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Estado</div><div style="margin-top:3px">${estadoBadge}</div></div>
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Distribuidor</div><div style="font-size:13px;font-weight:600">${tx.nombre_completo || '—'}</div></div>
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Referencia</div><div style="font-size:13px">${tx.referencia || '—'}</div></div>
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Centro</div><div style="font-size:13px">${tx.centro || '—'}</div></div>
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">RFC</div><div style="font-size:13px">${tx.rfc || '—'}</div></div>
        </div>
      </div>

      <!-- Montos -->
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:18px">
        <div style="background:#fff;border:1px solid #e0e8f0;border-radius:10px;padding:14px;text-align:center">
          <div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Monto Total</div>
          <div style="font-size:1.3rem;font-weight:700;color:var(--primary);margin-top:4px">${fmtMXN(tx.monto)}</div>
        </div>
        <div style="background:#fff;border:1px solid #e0e8f0;border-radius:10px;padding:14px;text-align:center">
          <div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Puntos</div>
          <div style="font-size:1.3rem;font-weight:700;color:var(--accent);margin-top:4px">${Number(tx.puntos).toLocaleString('es-MX')} pts</div>
        </div>
        ${tx.costoEnvio > 0 ? `<div style="background:#fff;border:1px solid #e0e8f0;border-radius:10px;padding:14px;text-align:center"><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Costo Envío</div><div style="font-size:1.3rem;font-weight:700;color:#555;margin-top:4px">${fmtMXN(tx.costoEnvio)}</div></div>` : ''}
      </div>`;

    // Dirección de envío
    if (d.envio) {
      const e = d.envio;
      html += `
      <div style="margin-bottom:18px">
        <div style="font-size:13px;font-weight:700;color:var(--primary);margin-bottom:8px">&#128230; Dirección de Envío</div>
        <div style="background:#fff;border:1px solid #e0e8f0;border-radius:10px;padding:14px;font-size:13px;line-height:1.7">
          ${e.calle} ${e.noExt}${e.noInt ? ' Int. ' + e.noInt : ''}, ${e.colonia}<br>
          ${e.ciudad}, ${e.estado} C.P. ${e.cp}<br>
          ${e.entre1 || e.entre2 ? 'Entre ' + (e.entre1 || '') + (e.entre2 ? ' y ' + e.entre2 : '') + '<br>' : ''}
          ${e.referencia ? '<em>' + e.referencia + '</em>' : ''}
        </div>
      </div>`;
    }

    // Totales de puntos para tipo 11 — después del costo de envío
    if (tx.tipo === 11 && d.puntos_totales_pedido > 0) {
      const ppa = d.puntos_por_asignar;
      const colorPPA = ppa > 0 ? '#e74c3c' : '#27ae60';
      html += `
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px">
        <div style="background:#fff;border:2px solid #e0e8f0;border-radius:10px;padding:14px;text-align:center">
          <div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Puntos Totales</div>
          <div style="font-size:1.2rem;font-weight:700;color:var(--accent);margin-top:4px">${Number(d.puntos_totales_pedido).toLocaleString('es-MX')} pts</div>
        </div>
        <div style="background:#fff;border:2px solid #e0e8f0;border-radius:10px;padding:14px;text-align:center">
          <div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Puntos Asignados</div>
          <div style="font-size:1.2rem;font-weight:700;color:#27ae60;margin-top:4px">${Number(d.puntos_totales_asig).toLocaleString('es-MX')} pts</div>
        </div>
        <div style="background:#fff;border:2px solid ${colorPPA === '#e74c3c' ? '#fdd' : '#dfd'};border-radius:10px;padding:14px;text-align:center">
          <div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Puntos por Asignar</div>
          <div style="font-size:1.2rem;font-weight:700;color:${colorPPA};margin-top:4px">${Number(ppa).toLocaleString('es-MX')} pts</div>
        </div>
      </div>`;
    }

    // Productos del pedido (pedido_real)
    if (d.pedido && d.pedido.length) {
      html += `
      <div style="margin-bottom:18px">
        <div style="font-size:13px;font-weight:700;color:var(--primary);margin-bottom:8px">&#128230; Productos del Pedido</div>
        <div style="background:#fff;border:1px solid #e0e8f0;border-radius:10px;overflow:hidden">
          <table style="width:100%;border-collapse:collapse;font-size:13px">
            <thead><tr style="background:#f0f4f8">
              <th style="padding:10px 14px;text-align:left;font-weight:600;color:#555">Producto</th>
              <th style="padding:10px 14px;text-align:center;font-weight:600;color:#555">Cant.</th>
              <th style="padding:10px 14px;text-align:right;font-weight:600;color:#555">Precio</th>
              <th style="padding:10px 14px;text-align:right;font-weight:600;color:#555">Puntos</th>
            </tr></thead>
            <tbody>
              ${d.pedido.map((p, i) => `<tr style="background:${i%2===0?'#fff':'#f9fbfd'};border-top:1px solid #f0f0f0">
                <td style="padding:9px 14px">${p.nombre}${p.es_promo ? ' <span style="font-size:10px;background:#fef3cd;color:#856404;padding:1px 6px;border-radius:10px">PROMO</span>' : ''}</td>
                <td style="padding:9px 14px;text-align:center">${p.cant}</td>
                <td style="padding:9px 14px;text-align:right">${fmtMXN(p.precio)}</td>
                <td style="padding:9px 14px;text-align:right;color:var(--accent);font-weight:600">${Number(p.puntos).toLocaleString('es-MX')}</td>
              </tr>`).join('')}
            </tbody>
          </table>
        </div>
      </div>`;
    }

    // Productos por asignar (nsalida)
    if (d.nsalida && d.nsalida.length) {
      html += `
      <div style="margin-bottom:18px">
        <div style="font-size:13px;font-weight:700;color:var(--primary);margin-bottom:8px">&#128230; Productos por Asignar</div>
        <div style="background:#fff;border:1px solid #e0e8f0;border-radius:10px;overflow:hidden">
          <table style="width:100%;border-collapse:collapse;font-size:13px">
            <thead><tr style="background:#f0f4f8">
              <th style="padding:10px 14px;text-align:left;font-weight:600;color:#555">Producto</th>
              <th style="padding:10px 14px;text-align:center;font-weight:600;color:#555">Cant.</th>
              <th style="padding:10px 14px;text-align:center;font-weight:600;color:#555">Asignado</th>
              <th style="padding:10px 14px;text-align:center;font-weight:600;color:#555">Pendiente</th>
            </tr></thead>
            <tbody>
              ${d.nsalida.map((p, i) => {
                const pendiente = p.cant - p.asignar;
                const color = pendiente > 0 ? '#e74c3c' : '#27ae60';
                return `<tr style="background:${i%2===0?'#fff':'#f9fbfd'};border-top:1px solid #f0f0f0">
                  <td style="padding:9px 14px">${p.nombre}</td>
                  <td style="padding:9px 14px;text-align:center">${p.cant}</td>
                  <td style="padding:9px 14px;text-align:center;color:#27ae60;font-weight:600">${p.asignar}</td>
                  <td style="padding:9px 14px;text-align:center;color:${color};font-weight:700">${pendiente}</td>
                </tr>`;
              }).join('')}
            </tbody>
          </table>
        </div>
      </div>`;
    }

    // Asignaciones realizadas
    if (d.asignaciones && d.asignaciones.length) {
      html += `
      <div style="margin-bottom:18px">
        <div style="font-size:13px;font-weight:700;color:var(--primary);margin-bottom:8px">&#128101; Asignaciones Realizadas (${d.asignaciones.length})</div>
        <div style="background:#fff;border:1px solid #e0e8f0;border-radius:10px;overflow:hidden">
          <table style="width:100%;border-collapse:collapse;font-size:13px">
            <thead><tr style="background:#f0f4f8">
              <th style="padding:10px 14px;text-align:left;font-weight:600;color:#555">Folio</th>
              <th style="padding:10px 14px;text-align:left;font-weight:600;color:#555">Distribuidor</th>
              <th style="padding:10px 14px;text-align:left;font-weight:600;color:#555">Referencia</th>
              <th style="padding:10px 14px;text-align:left;font-weight:600;color:#555">Fecha</th>
              <th style="padding:10px 14px;text-align:right;font-weight:600;color:#555">Puntos</th>
            </tr></thead>
            <tbody>
              ${d.asignaciones.map((a, i) => {
                const bg2 = i%2===0?'#fff':'#f9fbfd';
                return `<tr style="background:${bg2};border-top:1px solid #f0f0f0;cursor:pointer" onclick="txVerAsignacion(${a.idtransacciones})" onmouseover="this.style.background='#eef4fb'" onmouseout="this.style.background='${bg2}'" title="Ver detalle de asignación">
                <td style="padding:9px 14px;font-weight:600;color:var(--primary)">🔍 RRB-${String(a.idtransacciones).padStart(6,'0')}</td>
                <td style="padding:9px 14px">${a.nombre}</td>
                <td style="padding:9px 14px;color:#888;font-size:12px">${a.referencia || '—'}</td>
                <td style="padding:9px 14px;white-space:nowrap">${a.fechat}</td>
                <td style="padding:9px 14px;text-align:right;color:var(--accent);font-weight:600">${Number(a.puntos).toLocaleString('es-MX')}</td>
              </tr>`;
              }).join('')}
            </tbody>
          </table>
        </div>
      </div>`;
    }

    // Desglose de pago
    if (d.pago) {
      const p = d.pago;
      const conceptos = [
        { label: 'Efectivo',  val: p.efectivo },
        { label: 'Depósito',  val: p.deposito },
        { label: 'Tarjeta',   val: p.tarjeta },
        { label: 'Regalías',  val: p.regalias },
        { label: 'Voucher',   val: p.voucher },
        { label: 'Por Pagar', val: p.porpagar },
        { label: 'Abono',     val: p.abono },
      ].filter(c => c.val > 0);
      if (conceptos.length) {
        html += `
        <div style="margin-bottom:18px">
          <div style="font-size:13px;font-weight:700;color:var(--primary);margin-bottom:8px">&#128179; Desglose de Pago</div>
          <div style="background:#fff;border:1px solid #e0e8f0;border-radius:10px;overflow:hidden">
            <table style="width:100%;border-collapse:collapse;font-size:13px">
              <tbody>
                ${conceptos.map((c, i) => `<tr style="background:${i%2===0?'#fff':'#f9fbfd'};border-top:1px solid #f0f0f0">
                  <td style="padding:9px 16px;font-weight:600;color:#555">${c.label}</td>
                  <td style="padding:9px 16px;text-align:right;font-weight:700;color:${c.label==='Por Pagar'?'#e74c3c':'var(--primary)'}">${fmtMXN(c.val)}</td>
                </tr>`).join('')}
              </tbody>
            </table>
          </div>
        </div>`;
      }
    }

    body.innerHTML = html;
  } catch(e) {
    body.innerHTML = `<div style="text-align:center;padding:30px;color:#e74c3c">Error al cargar el detalle: ${e.message}</div>`;
  }
}

function txCerrarDetalle() {
  document.getElementById('modal-tx-detalle').classList.remove('open');
}

// ── Detalle de asignación (modal secundario) ────────────────────────────────
async function txVerAsignacion(idAsig) {
  const modal = document.getElementById('modal-tx-asig');
  const body  = document.getElementById('tx-asig-body');
  const titulo = document.getElementById('tx-asig-titulo');
  body.innerHTML = '<div style="text-align:center;padding:40px;color:#aaa">⏳ Cargando...</div>';
  modal.classList.add('open');
  try {
    const d = await api('GET', `api/asignacion-detalle.php?id=${idAsig}`);
    const a = d.asignacion;
    const folio = 'RRB-' + String(a.idtransacciones).padStart(6, '0');
    titulo.textContent = `Asignación — ${folio}`;

    let html = `
      <!-- Datos generales -->
      <div style="background:#f8fafc;border-radius:10px;padding:16px 20px;margin-bottom:18px">
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px">
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Folio</div><div style="font-size:15px;font-weight:700;color:var(--primary)">${folio}</div></div>
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Fecha</div><div style="font-size:14px">${a.fechat}</div></div>
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Distribuidor</div><div style="font-size:13px;font-weight:600">${a.nombre_completo}</div></div>
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Referencia</div><div style="font-size:13px">${a.referencia || '—'}</div></div>
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">RFC</div><div style="font-size:13px">${a.rfc || '—'}</div></div>
          <div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Centro</div><div style="font-size:13px">${a.centro || '—'}</div></div>
          ${a.nota_origen_id ? `<div><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Nota Origen</div><div style="font-size:13px;font-weight:600;color:var(--primary)">RRB-${String(a.nota_origen_id).padStart(6,'0')}</div></div>` : ''}
        </div>
      </div>

      <!-- Puntos -->
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px">
        <div style="background:#fff;border:2px solid #e0e8f0;border-radius:10px;padding:14px;text-align:center">
          <div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Puntos Asignados</div>
          <div style="font-size:1.3rem;font-weight:700;color:var(--accent);margin-top:4px">${Number(a.puntos).toLocaleString('es-MX')} pts</div>
        </div>
        ${a.puntos_total > 0 ? `<div style="background:#fff;border:2px solid #e0e8f0;border-radius:10px;padding:14px;text-align:center"><div style="font-size:11px;font-weight:600;color:#888;text-transform:uppercase">Puntos Totales Nota</div><div style="font-size:1.3rem;font-weight:700;color:var(--primary);margin-top:4px">${Number(a.puntos_total).toLocaleString('es-MX')} pts</div></div>` : ''}
      </div>`;

    // Productos asignados
    if (d.pedido && d.pedido.length) {
      html += `
      <div style="margin-bottom:18px">
        <div style="font-size:13px;font-weight:700;color:var(--primary);margin-bottom:8px">📦 Productos Asignados</div>
        <div style="background:#fff;border:1px solid #e0e8f0;border-radius:10px;overflow:hidden">
          <table style="width:100%;border-collapse:collapse;font-size:13px">
            <thead><tr style="background:#f0f4f8">
              <th style="padding:10px 14px;text-align:left;font-weight:600;color:#555">Producto</th>
              <th style="padding:10px 14px;text-align:center;font-weight:600;color:#555">Cant.</th>
              <th style="padding:10px 14px;text-align:right;font-weight:600;color:#555">Puntos c/u</th>
              <th style="padding:10px 14px;text-align:right;font-weight:600;color:#555">Total pts</th>
            </tr></thead>
            <tbody>
              ${d.pedido.map((p, i) => `<tr style="background:${i%2===0?'#fff':'#f9fbfd'};border-top:1px solid #f0f0f0">
                <td style="padding:9px 14px">${p.nombre}${p.es_promo ? ' <span style="font-size:10px;background:#fef3cd;color:#856404;padding:1px 6px;border-radius:10px">PROMO</span>' : ''}</td>
                <td style="padding:9px 14px;text-align:center">${p.cant}</td>
                <td style="padding:9px 14px;text-align:right;color:#888">${Number(p.puntos).toLocaleString('es-MX')}</td>
                <td style="padding:9px 14px;text-align:right;color:var(--accent);font-weight:700">${Number(p.puntos * p.cant).toLocaleString('es-MX')}</td>
              </tr>`).join('')}
              <tr style="background:#f0f4f8;border-top:2px solid #d0dce8">
                <td colspan="3" style="padding:10px 14px;font-weight:700;color:#555">Total</td>
                <td style="padding:10px 14px;text-align:right;font-weight:700;color:var(--accent);font-size:1.1rem">${Number(a.puntos_total).toLocaleString('es-MX')} pts</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>`;
    }

    body.innerHTML = html;
  } catch(e) {
    body.innerHTML = `<div style="text-align:center;padding:30px;color:#e74c3c">Error al cargar la asignación: ${e.message}</div>`;
  }
}

function txCerrarAsignacion() {
  document.getElementById('modal-tx-asig').classList.remove('open');
}

function txExportar() {
  const desde = document.getElementById('tx-desde').value;
  const hasta = document.getElementById('tx-hasta').value;
  const ci    = document.getElementById('tx-ci').value;
  if (!desde || !hasta) { alert('Selecciona un rango de fechas'); return; }
  const token = localStorage.getItem('rrb_admin_token');
  const url   = `api/transacciones.php?desde=${desde}&hasta=${hasta}&ci=${ci}&pagina=1&por_pagina=200&export=csv`;
  // Descargar via fetch y crear blob
  api('GET', url).then(resp => {
    const rows = resp.transacciones || [];
    if (!rows.length) { alert('Sin datos para exportar'); return; }
    const headers = ['Folio','Fecha','Tipo','Distribuidor','Referencia','Nota','Monto MXN','Puntos','Por Pagar'];
    const csv = [
      headers.join(','),
      ...rows.map(r => [
        'RRB-' + String(r.id).padStart(6,'0'),
        r.fecha,
        r.tipo_label,
        '"' + (r.distribuidor || '').replace(/"/g,'""') + '"',
        r.referencia || '',
        '"' + (r.nota || '').replace(/"/g,'""') + '"',
        r.cantidad,
        r.puntos,
        r.por_pagar > 0 ? r.por_pagar : ''
      ].join(','))
    ].join('\n');
    const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `transacciones_${desde}_${hasta}.csv`;
    a.click();
  }).catch(e => alert('Error al exportar: ' + e.message));
}

// ══════════════════════════════════════════════════════════════
//  MÓDULO INVENTARIO
// ══════════════════════════════════════════════════════════════

// ── Estado del módulo ─────────────────────────────────────────
let _invStockData   = null;
let _invMovData     = null;
let _invAudData     = null;
let _invDespData    = null;
let _invCurrentTab  = 'stock';
let _invDespSubTab  = 'prod';

// ── Helpers de formato (invMxn usa la fmtNum global) ──────────
const fmtMxn  = n => '$' + Number(n || 0).toLocaleString('es-MX', {minimumFractionDigits:2, maximumFractionDigits:2});

// ── Inicialización al entrar a la sección ─────────────────────
