// ══════════════════════════════════════════════
// RRB Admin — Module: notas-asignar
// ══════════════════════════════════════════════

// ── NOTAS POR ASIGNAR ──────────────────────────
// ═══════════════════════════════════════════════
let _naData = null;
let _naFiltro = 'todos';
const MESES_NA = ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
                  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];

function iniciarNotasAsignar() {
  // Generar selector de período: mes en curso + 5 meses atrás
  const sel = document.getElementById('na-periodo');
  if (sel.options.length === 0) {
    const now = new Date();
    for (let i = 0; i < 6; i++) {
      const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
      const m = d.getMonth() + 1;
      const a = d.getFullYear();
      const opt = document.createElement('option');
      opt.value = `${m}|${a}`;
      opt.textContent = `${MESES_NA[m-1]} ${a}`;
      sel.appendChild(opt);
    }
  }
  cargarNotasAsignar();
}

async function cargarNotasAsignar() {
  const val = document.getElementById('na-periodo').value;
  if (!val) return;
  const [mes, anio] = val.split('|');

  document.getElementById('na-loading').style.display = 'block';
  document.getElementById('na-cards').style.display = 'none';
  document.getElementById('na-filtros').style.display = 'none';
  document.getElementById('na-resumen').style.display = 'none';
  document.getElementById('na-empty').style.display = 'none';
  document.getElementById('na-count').textContent = '';

  try {
    const data = await api('GET', `api/notas-asignar.php?mes=${mes}&anio=${anio}`);
    _naData = data;
    _naFiltro = 'todos';
    renderNotasAsignar();
  } catch(e) {
    document.getElementById('na-loading').style.display = 'none';
    showToast('Error al cargar notas: ' + e.message, 'error');
  }
}

function renderNotasAsignar() {
  if (!_naData) return;
  const notas = _naData.notas || [];
  const res   = _naData.resumen || {};

  document.getElementById('na-loading').style.display = 'none';

  // Tarjetas de resumen (estilo app)
  const resEl = document.getElementById('na-resumen');
  resEl.style.display = 'flex';
  resEl.innerHTML = [
    { label: 'Total Notas',  val: res.total || 0,       color: '#1a3a5c', bg: '#eef3f9' },
    { label: 'Pendientes',   val: res.pendientes || 0,  color: '#92400e', bg: '#fef3c7' },
    { label: 'Completadas',  val: res.completadas || 0, color: '#15803d', bg: '#dcfce7' },
  ].map(c => `
    <div style="flex:1;min-width:120px;background:${c.bg};border-radius:12px;padding:14px;text-align:center;border:1px solid ${c.bg}">
      <div style="font-size:28px;font-weight:800;color:${c.color}">${c.val}</div>
      <div style="font-size:12px;color:${c.color};margin-top:4px;font-weight:600">${c.label}</div>
    </div>`).join('');

  // Filtros
  const filtros = [
    { key: 'todos',      label: `Todos (${notas.length})` },
    { key: 'pendiente',  label: `⏳ Pendientes (${res.pendientes||0})` },
    { key: 'completada', label: `✅ Completadas (${res.completadas||0})` },
  ];
  const filtrosEl = document.getElementById('na-filtros');
  filtrosEl.style.display = 'flex';
  filtrosEl.innerHTML = filtros.map(f => `
    <button onclick="naSetFiltro('${f.key}')" id="na-f-${f.key}"
      style="padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:#fff;
             font-size:12px;font-weight:600;cursor:pointer;color:var(--text)">
      ${f.label}
    </button>`).join('');
  naActualizarFiltros();

  if (notas.length === 0) {
    document.getElementById('na-cards').style.display = 'none';
    document.getElementById('na-empty').style.display = 'block';
    document.getElementById('na-count').textContent = '0 notas';
    return;
  }

  document.getElementById('na-empty').style.display = 'none';
  naRenderCards();
}

function naSetFiltro(f) {
  _naFiltro = f;
  naActualizarFiltros();
  naRenderCards();
}

function naActualizarFiltros() {
  ['todos','pendiente','completada'].forEach(k => {
    const btn = document.getElementById(`na-f-${k}`);
    if (!btn) return;
    if (k === _naFiltro) {
      btn.style.background = 'var(--primary)';
      btn.style.color = '#fff';
      btn.style.borderColor = 'var(--primary)';
    } else {
      btn.style.background = '#fff';
      btn.style.color = 'var(--text)';
      btn.style.borderColor = 'var(--border)';
    }
  });
}

function naRenderCards() {
  if (!_naData) return;
  let notas = [...(_naData.notas || [])];
  if (_naFiltro === 'pendiente')  notas = notas.filter(n => n.tiene_pendiente);
  if (_naFiltro === 'completada') notas = notas.filter(n => !n.tiene_pendiente);

  document.getElementById('na-count').textContent = `${notas.length} nota(s)`;

  const cardsEl = document.getElementById('na-cards');
  cardsEl.style.display = 'block';

  cardsEl.innerHTML = notas.map(n => {
    const colorBar   = n.tiene_pendiente ? '#F59E0B' : '#22C55E';
    const bgBadge    = n.tiene_pendiente ? '#FEF3C7' : '#DCFCE7';
    const colorBadge = n.tiene_pendiente ? '#92400E' : '#15803D';
    const labelBadge = n.tiene_pendiente ? 'Pendiente' : 'Completada';
    const colorPend  = n.tiene_pendiente ? '#D97706' : '#15803D';

    return `
    <div style="display:flex;border-radius:14px;border:1px solid var(--border);margin-bottom:12px;
                overflow:hidden;background:var(--surface);cursor:pointer"
         onclick="naVerDetalle(${n.idtransacciones})">
      <!-- Barra lateral de estado -->
      <div style="width:5px;background:${colorBar};flex-shrink:0"></div>
      <!-- Contenido -->
      <div style="flex:1;padding:14px">
        <!-- Fila superior: fecha y badge -->
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px">
          <span style="font-size:12px;color:var(--muted)">${n.fecha || ''}</span>
          <span style="background:${bgBadge};color:${colorBadge};padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700">
            ${labelBadge}
          </span>
        </div>
        <!-- Número de transacción -->
        <div style="font-size:16px;font-weight:700;color:var(--text);margin-bottom:10px">
          Transacción #${n.idtransacciones}
        </div>
        <!-- Distribuidor -->
        <div style="font-size:13px;color:var(--muted);margin-bottom:8px">
          ${esc(n.nombre_dist)} &nbsp;|&nbsp; <strong>${esc(n.referencia||'')}</strong>
        </div>
        <!-- Datos fila 1: cantidades -->
        <div style="display:flex;gap:8px;margin-bottom:6px">
          <div style="flex:1">
            <div style="font-size:11px;color:var(--muted);margin-bottom:2px">Cantidad pagada</div>
            <div style="font-size:14px;font-weight:700;color:var(--text)">$${n.cantidad_pagada.toLocaleString('es-MX',{minimumFractionDigits:2,maximumFractionDigits:2})}</div>
          </div>
          <div style="flex:1">
            <div style="font-size:11px;color:var(--muted);margin-bottom:2px">Asignadas</div>
            <div style="font-size:14px;font-weight:700;color:var(--text)">${n.ya_asignado} / ${n.total_nsalida}</div>
          </div>
          <div style="flex:1">
            <div style="font-size:11px;color:var(--muted);margin-bottom:2px">Pendientes</div>
            <div style="font-size:14px;font-weight:800;color:${colorPend}">${n.pendiente_asignar}</div>
          </div>
        </div>
        <!-- Datos fila 2: puntos -->
        <div style="display:flex;gap:8px;margin-bottom:8px;padding-top:6px;border-top:1px solid var(--border)">
          <div style="flex:1">
            <div style="font-size:11px;color:var(--muted);margin-bottom:2px">Pts. Nota</div>
            <div style="font-size:13px;font-weight:700;color:var(--text)">${fmtNum(n.puntos_nota)}</div>
          </div>
          <div style="flex:1">
            <div style="font-size:11px;color:var(--muted);margin-bottom:2px">Pts. Asignados</div>
            <div style="font-size:13px;font-weight:700;color:#15803d">${fmtNum(n.total_depositos_puntos)}</div>
          </div>
          <div style="flex:1">
            <div style="font-size:11px;color:var(--muted);margin-bottom:2px">Pts. Por Asignar</div>
            <div style="font-size:13px;font-weight:800;color:${(n.puntos_nota - n.total_depositos_puntos) > 0 ? '#d97706' : '#15803d'}">${fmtNum(n.puntos_nota - n.total_depositos_puntos)}</div>
          </div>
        </div>
        <!-- Status de cuadre de puntos -->
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
          <div style="font-size:12px;font-weight:600;color:var(--primary)">Clic para ver detalle →</div>
          ${(function(){
            const realDiff = n.puntos_nota - n.total_depositos_puntos - n.puntos_pendientes_nsalida;
            const isOk = Math.abs(realDiff) < 0.01;
            return isOk
              ? '<div style="display:flex;align-items:center;gap:4px;background:#dcfce7;border:1px solid #86efac;border-radius:20px;padding:3px 10px"><span style="font-size:14px">✅</span><span style="font-size:11px;font-weight:700;color:#15803d">Cuadrado</span></div>'
              : '<div style="display:flex;align-items:center;gap:4px;background:#fee2e2;border:1px solid #fca5a5;border-radius:20px;padding:3px 10px"><span style="font-size:14px">❌</span><span style="font-size:11px;font-weight:700;color:#dc2626">Diferencia: '+fmtNum(realDiff)+'</span></div>';
          })()}
        </div>
      </div>
    </div>`;
  }).join('');
}

function fmtNum(n) {
  return Number(n||0).toLocaleString('es-MX', {minimumFractionDigits:0, maximumFractionDigits:2});
}

// ── Modal detalle de nota ──────────────────────────────────────────────────
document.addEventListener('click', async (e) => {
  const btn = e.target.closest('[data-action="na-detalle"]');
  if (!btn) return;
  const idtx = btn.dataset.idtx;
  await naVerDetalle(idtx);
});

async function naVerDetalle(idtx) {
  const val = document.getElementById('na-periodo').value;
  const [mes, anio] = val.split('|');
  document.getElementById('modal-na-title').textContent = `Detalle Nota #${idtx}`;
  document.getElementById('modal-na-body').innerHTML =
    '<div style="text-align:center;padding:40px;color:var(--muted)">⏳ Cargando...</div>';
  document.getElementById('modal-na').classList.add('open');
  try {
    const data = await api('GET', `api/notas-asignar.php?action=detalle&idtransacciones=${idtx}&mes=${mes}&anio=${anio}`);
    const nota = data.nota || {};
    const items = data.items || [];
    const asigs = data.asignaciones || [];
    const totalPtsAsig = data.total_puntos_asignados || 0;

    const errBanner = nota.tiene_error
      ? `<div style="background:#fee2e2;border:1.5px solid #ef4444;border-radius:10px;padding:12px 16px;margin-bottom:16px;color:#991b1b;font-weight:700">
           ❌ ERROR: Los puntos asignados (${fmtNum(nota.puntos_asignados)}) superan los puntos de la nota (${fmtNum(nota.puntos_nota)})
         </div>` : '';

    document.getElementById('modal-na-body').innerHTML = `
      ${errBanner}
      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:20px">
        ${[
          { label:'Distribuidor', val: esc(nota.nombre_dist||''), big:false },
          { label:'Referencia',   val: esc(nota.referencia||''), big:false },
          { label:'Pts. Nota',    val: fmtNum(nota.puntos_nota), big:true, color:'#1a3a5c' },
          { label:'Pts. Asignados', val: fmtNum(totalPtsAsig), big:true, color:'#15803d' },
          { label:'Pts. Pendientes', val: fmtNum(nota.puntos_nota - totalPtsAsig), big:true, color: (nota.puntos_nota - totalPtsAsig)>0?'#d97706':'#15803d' },
          { label:'Total Asignaciones', val: asigs.length + ' asig.', big:false, color:'#374151' },
        ].map(c => `
          <div style="background:#f8fafc;border-radius:10px;padding:12px;border:1px solid var(--border)">
            <div style="font-size:11px;color:var(--muted);margin-bottom:4px">${c.label}</div>
            <div style="font-size:${c.big?'18px':'14px'};font-weight:700;color:${c.color||'var(--text)'}">${c.val}</div>
          </div>`).join('')}
      </div>

      <h4 style="font-size:14px;font-weight:700;margin-bottom:10px;color:var(--primary)">Líneas de la nota (nsalida)</h4>
      <table style="width:100%;border-collapse:collapse;font-size:12px;margin-bottom:20px">
        <thead><tr style="background:var(--primary);color:#fff">
          <th style="padding:8px 10px;text-align:left">Producto</th>
          <th style="padding:8px 10px;text-align:center">Tipo</th>
          <th style="padding:8px 10px;text-align:right">Puntos</th>
          <th style="padding:8px 10px;text-align:center">Cant.</th>
          <th style="padding:8px 10px;text-align:center">Asignado</th>
          <th style="padding:8px 10px;text-align:center">Pendiente</th>
          <th style="padding:8px 10px;text-align:right">Pts. Total</th>
        </tr></thead>
        <tbody>${items.map((it,i) => `
          <tr style="background:${i%2===0?'#fff':'#f8fafc'}">
            <td style="padding:8px 10px">${esc(it.nombre||'')}</td>
            <td style="padding:8px 10px;text-align:center">
              <span style="background:${it.es_promo?'#ede9fe':'#e0f2fe'};color:${it.es_promo?'#5b21b6':'#0369a1'};
                padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700">
                ${it.es_promo?'Promo':'Prod'}
              </span>
            </td>
            <td style="padding:8px 10px;text-align:right;font-weight:600">${fmtNum(it.puntos)}</td>
            <td style="padding:8px 10px;text-align:center">${it.cant}</td>
            <td style="padding:8px 10px;text-align:center;color:#15803d;font-weight:600">${it.asignar}</td>
            <td style="padding:8px 10px;text-align:center;font-weight:700;color:${it.pendiente>0?'#d97706':'#15803d'}">${it.pendiente}</td>
            <td style="padding:8px 10px;text-align:right;font-weight:700">${fmtNum(it.cant*it.puntos)}</td>
          </tr>`).join('')}
        </tbody>
      </table>

      <h4 style="font-size:14px;font-weight:700;margin-bottom:10px;color:var(--primary)">Asignaciones realizadas</h4>
      ${asigs.length === 0
        ? '<div style="color:var(--muted);font-size:13px;padding:12px">Sin asignaciones registradas.</div>'
        : `<table style="width:100%;border-collapse:collapse;font-size:12px">
            <thead><tr style="background:#eef3f9">
              <th style="padding:8px 10px;text-align:left">#Transacción</th>
              <th style="padding:8px 10px;text-align:left">Referencia</th>
              <th style="padding:8px 10px;text-align:left">Nombre</th>
              <th style="padding:8px 10px;text-align:right">Puntos</th>
            </tr></thead>
            <tbody>${asigs.map((a,i) => `
              <tr style="background:${i%2===0?'#fff':'#f8fafc'}">
                <td style="padding:8px 10px;font-weight:700;color:var(--primary)">#${a.id_asig}</td>
                <td style="padding:8px 10px;font-weight:600">${esc(a.ref_dest||'')}</td>
                <td style="padding:8px 10px">${esc(a.nombre_dest||'')}</td>
                <td style="padding:8px 10px;text-align:right;font-weight:700;color:#15803d">${fmtNum(a.puntos_asig)}</td>
              </tr>`).join('')}
            </tbody>
            <tfoot><tr style="background:#f0fdf4;border-top:2px solid #15803d">
              <td colspan="3" style="padding:10px;font-weight:700;color:#15803d;text-align:right">Total asignado:</td>
              <td style="padding:10px;text-align:right;font-size:16px;font-weight:800;color:#15803d">${fmtNum(totalPtsAsig)}</td>
            </tr></tfoot>
           </table>`
      }`;
  } catch(e) {
    document.getElementById('modal-na-body').innerHTML =
      `<div style="color:var(--error);padding:20px">Error al cargar detalle: ${esc(e.message)}</div>`;
  }
}

function cerrarModalNA() {
  document.getElementById('modal-na').classList.remove('open');
}

// (Sidebar/drawer functions moved to core.js)


// VERIFICAR NOTAS DEL PERIODO
async function verificarNotasPeriodo() {
  const val = document.getElementById("na-periodo").value;
  if (!val) return;
  const parts = val.split("-");
  const anio = parts[0]; const mes = parts[1];
  document.getElementById("modal-verificar").classList.add("open");
  document.getElementById("ver-loading").style.display = "block";
  document.getElementById("ver-tabla-wrap").style.display = "none";
  document.getElementById("ver-resumen").innerHTML = "";
  document.getElementById("ver-tbody").innerHTML = "";
  try {
    const data = await api('GET', `api/verificar-notas.php?mes=${mes}&anio=${anio}`);
    if (!data.ok) throw new Error(data.error || "Error al verificar");
    const totalOk  = data.resumen.ok;
    const totalErr = data.resumen.error;
    const total    = data.total;
    const errColor = totalErr > 0 ? "#991b1b" : "var(--muted)";
    const errBg    = totalErr > 0 ? "#fef2f2" : "#f5f8fc";
    const errBd    = totalErr > 0 ? "#fecaca" : "var(--border)";
    document.getElementById("ver-resumen").innerHTML =
      '<div style="flex:1;min-width:120px;background:#f5f8fc;border-radius:10px;padding:12px 16px;text-align:center;border:1px solid var(--border)">' +
        '<div style="font-size:22px;font-weight:700;color:var(--text)">' + total + '</div>' +
        '<div style="font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px">Total Notas</div>' +
      '</div>' +
      '<div style="flex:1;min-width:120px;background:#f0fdf4;border-radius:10px;padding:12px 16px;text-align:center;border:1px solid #bbf7d0">' +
        '<div style="font-size:22px;font-weight:700;color:#166534">✓ ' + totalOk + '</div>' +
        '<div style="font-size:11px;color:#166534;font-weight:600;text-transform:uppercase;letter-spacing:.5px">Correctas</div>' +
      '</div>' +
      '<div style="flex:1;min-width:120px;background:' + errBg + ';border-radius:10px;padding:12px 16px;text-align:center;border:1px solid ' + errBd + '">' +
        '<div style="font-size:22px;font-weight:700;color:' + errColor + '">✗ ' + totalErr + '</div>' +
        '<div style="font-size:11px;color:' + errColor + ';font-weight:600;text-transform:uppercase;letter-spacing:.5px">Con Diferencia</div>' +
      '</div>';
    const fmt = function(n) { return Number(n).toLocaleString("es-MX"); };
    let rows = "";
    for (const n of data.notas) {
      const ok = n.status_ok;
      const statusIcon = ok
        ? '<span style="font-size:18px;color:#166534">✓</span>'
        : '<span style="font-size:18px;color:#991b1b">✗</span>';
      const rowBg = ok ? "" : "background:#fff5f5;";
      rows += '<tr style="' + rowBg + 'border-bottom:1px solid #f0f4f8">' +
        '<td style="padding:10px 12px;font-weight:600;color:var(--primary)">#' + n.idtransacciones + '</td>' +
        '<td style="padding:10px 12px;color:var(--muted);white-space:nowrap">' + n.fechat + '</td>' +
        '<td style="padding:10px 12px;font-size:12px">' + n.nombre_dist + '</td>' +
        '<td style="padding:10px 12px;text-align:right;font-weight:600">' + fmt(n.puntos_nota) + '</td>' +
        '<td style="padding:10px 12px;text-align:right;color:#166534;font-weight:600">' + fmt(n.puntos_asignados) + '</td>' +
        '<td style="padding:10px 12px;text-align:right;color:#b45309;font-weight:600">' + fmt(n.puntos_por_asignar) + '</td>' +
        '<td style="padding:10px 12px;text-align:center">' + statusIcon + '</td>' +
        '</tr>';
    }
    document.getElementById("ver-tbody").innerHTML = rows;
    document.getElementById("ver-loading").style.display = "none";
    document.getElementById("ver-tabla-wrap").style.display = "block";
  } catch(e) {
    document.getElementById("ver-loading").innerHTML = '<p style="color:var(--error)">Error: ' + e.message + '</p>';
  }
}
function cerrarVerificar() {
  document.getElementById("modal-verificar").classList.remove("open");
}

