let promosData = [];

setupFilePreview('promoImagen', 'promoImgPreview', 'promoImgLabel');

async function cargarPromociones() {
  const res = await apiFetch(`${API}/promociones.php`);
  if (!res) return;
  promosData = await res.json();
  renderPromociones();
}

function renderPromociones() {
  const el = document.getElementById('promoList');
  if (!promosData.length) {
    el.innerHTML = '<div class="empty-state">No hay promociones. Crea la primera.</div>';
    return;
  }
  el.innerHTML = `<div class="item-list">${promosData.map(p => `
    <div class="item-card">
      ${p.imagen_url
        ? `<img src="${p.imagen_url}" alt="">`
        : `<div style="width:70px;height:70px;background:var(--bg);border-radius:6px;flex-shrink:0;"></div>`}
      <div class="item-info">
        <div class="item-title">${escHtml(p.titulo)}</div>
        <div class="item-dates">
          ${formatFecha(p.fecha_inicio)} → ${formatFecha(p.fecha_fin)}
          &nbsp;${estadoBadge(p.activo, p.fecha_inicio, p.fecha_fin)}
        </div>
        ${p.descripcion ? `<div style="font-size:.82rem;color:var(--text-muted);">${escHtml(p.descripcion)}</div>` : ''}
        <div class="item-actions" style="margin-top:.5rem;">
          <button class="btn btn-ghost btn-sm" onclick="editarPromo(${p.id})">Editar</button>
          <button class="btn btn-${p.activo ? 'warning' : 'success'} btn-sm"
                  onclick="togglePromo(${p.id})">
            ${p.activo ? 'Pausar' : 'Activar'}
          </button>
          <button class="btn btn-danger btn-sm" onclick="eliminarPromo(${p.id})">Eliminar</button>
        </div>
      </div>
    </div>
  `).join('')}</div>`;
}

function abrirModalPromo(promo = null) {
  document.getElementById('modalPromoTitle').textContent = promo ? 'Editar Promoción' : 'Nueva Promoción';
  document.getElementById('promoId').value      = promo ? promo.id : '';
  document.getElementById('promoTitulo').value  = promo ? promo.titulo : '';
  document.getElementById('promoDesc').value    = promo ? (promo.descripcion || '') : '';
  document.getElementById('promoInicio').value  = promo ? promo.fecha_inicio : '';
  document.getElementById('promoFin').value     = promo ? promo.fecha_fin : '';
  resetFilePreview('promoImagen', 'promoImgPreview', 'promoImgLabel');
  document.getElementById('promoMsg').innerHTML = '';

  // Mostrar imagen actual si estamos editando
  const imgActual    = document.getElementById('promoImgActual');
  const imgActualSrc = document.getElementById('promoImgActualSrc');
  const imgLabel     = document.getElementById('promoImgLabel');
  if (promo && promo.imagen_url) {
    imgActual.style.display = 'block';
    imgActualSrc.src        = promo.imagen_url;
    imgLabel.textContent    = '📷 Clic para cambiar imagen (opcional)';
  } else {
    imgActual.style.display = 'none';
    imgActualSrc.src        = '';
    imgLabel.textContent    = '📷 Clic para seleccionar imagen';
  }

  abrirModal('modalPromo');
}

function editarPromo(id) {
  const promo = promosData.find(p => p.id === id);
  if (promo) abrirModalPromo(promo);
}

async function togglePromo(id) {
  const res = await apiFetch(`${API}/promociones.php?id=${id}&accion=toggle`, { method: 'PATCH' });
  if (!res) return;
  const data = await res.json();
  if (res.ok) {
    const p = promosData.find(p => p.id === id);
    if (p) p.activo = data.activo;
    renderPromociones();
  }
}

async function eliminarPromo(id) {
  if (!confirm('¿Eliminar esta promoción?')) return;
  const res = await apiFetch(`${API}/promociones.php?id=${id}`, { method: 'DELETE' });
  if (!res) return;
  if (res.ok) {
    promosData = promosData.filter(p => p.id !== id);
    renderPromociones();
  }
}

document.getElementById('promoForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const id      = document.getElementById('promoId').value;
  const inicio  = document.getElementById('promoInicio').value;
  const fin     = document.getElementById('promoFin').value;
  const msgEl   = document.getElementById('promoMsg');
  const btn     = document.getElementById('promoSubmitBtn');

  if (fin < inicio) {
    msgEl.innerHTML = '<div class="alert alert-error">La fecha de fin no puede ser anterior al inicio.</div>';
    return;
  }

  btn.disabled = true;
  btn.innerHTML = '<span class="spinner"></span> Guardando…';
  msgEl.innerHTML = '';

  const fd = new FormData();
  fd.append('titulo',       document.getElementById('promoTitulo').value.trim());
  fd.append('descripcion',  document.getElementById('promoDesc').value.trim());
  fd.append('fecha_inicio', inicio);
  fd.append('fecha_fin',    fin);
  const img = document.getElementById('promoImagen').files[0];
  if (img) fd.append('imagen', img);

  const url = id
    ? `${API}/promociones.php?id=${id}`
    : `${API}/promociones.php`;

  const res  = await apiFetch(url, { method: 'POST', body: fd });
  btn.disabled = false;
  btn.textContent = 'Guardar';
  if (!res) return;

  const data = await res.json();
  if (!res.ok) {
    msgEl.innerHTML = `<div class="alert alert-error">${data.error || 'Error al guardar'}</div>`;
    return;
  }

  cerrarModal('modalPromo');
  await cargarPromociones();
});

function escHtml(str) {
  return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
