let bannersData = [];

// Preview 9:16 para banner
document.getElementById('bannerImagen').addEventListener('change', function() {
  const file = this.files[0];
  if (!file) return;
  if (file.size > 3 * 1024 * 1024) { alert('El archivo supera los 3 MB.'); this.value = ''; return; }
  const reader = new FileReader();
  reader.onload = e => {
    const img = document.getElementById('bannerImgPreview');
    img.src = e.target.result;
    img.style.display = 'block';
    document.getElementById('bannerPreviewIcon').style.display = 'none';
    document.getElementById('bannerImgLabel').textContent = '✔ Imagen seleccionada';
  };
  reader.readAsDataURL(file);
});

async function cargarBanners() {
  const res = await apiFetch(`${API}/banners.php`);
  if (!res) return;
  bannersData = await res.json();
  renderBanners();
}

function renderBanners() {
  const el = document.getElementById('bannerList');
  if (!bannersData.length) {
    el.innerHTML = '<div class="empty-state">No hay banners. Crea el primero.</div>';
    return;
  }
  el.innerHTML = `<div class="item-list">${bannersData.map(b => `
    <div class="item-card">
      <img src="${b.imagen_url}" alt="Banner" style="aspect-ratio:9/16;width:80px;object-fit:cover;border-radius:6px;flex-shrink:0;">
      <div class="item-info">
        <div class="item-dates">
          ${formatFecha(b.fecha_inicio)} → ${formatFecha(b.fecha_fin)}
          &nbsp;${estadoBadge(1, b.fecha_inicio, b.fecha_fin)}
        </div>
        ${b.link_destino
          ? `<div style="font-size:.82rem;color:var(--text-muted);word-break:break-all;">${escHtml(b.link_destino)}</div>`
          : ''}
        <div class="item-actions" style="margin-top:.5rem;">
          <button class="btn btn-ghost btn-sm" onclick="editarBanner(${b.id})">Editar</button>
          <button class="btn btn-danger btn-sm" onclick="eliminarBanner(${b.id})">Eliminar</button>
        </div>
      </div>
    </div>
  `).join('')}</div>`;
}

function abrirModalBanner(banner = null) {
  document.getElementById('modalBannerTitle').textContent = banner ? 'Editar Banner' : 'Nuevo Banner';
  document.getElementById('bannerId').value     = banner ? banner.id : '';
  document.getElementById('bannerLink').value   = banner ? (banner.link_destino || '') : '';
  document.getElementById('bannerInicio').value = banner ? banner.fecha_inicio : '';
  document.getElementById('bannerFin').value    = banner ? banner.fecha_fin : '';
  // Reset preview 9:16
  document.getElementById('bannerImagen').value = '';
  const prevImg = document.getElementById('bannerImgPreview');
  prevImg.src = ''; prevImg.style.display = 'none';
  document.getElementById('bannerPreviewIcon').style.display = 'flex';
  document.getElementById('bannerImgLabel').textContent = banner ? '📁 Clic para cambiar imagen (opcional)' : '📁 Clic para seleccionar imagen';
  document.getElementById('bannerMsg').innerHTML = '';

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

  abrirModal('modalBanner');
}

function editarBanner(id) {
  const banner = bannersData.find(b => b.id === id);
  if (banner) abrirModalBanner(banner);
}

async function eliminarBanner(id) {
  if (!confirm('¿Eliminar este banner?')) return;
  const res = await apiFetch(`${API}/banners.php?id=${id}`, { method: 'DELETE' });
  if (!res) return;
  if (res.ok) {
    bannersData = bannersData.filter(b => b.id !== id);
    renderBanners();
  }
}

document.getElementById('bannerForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const id     = document.getElementById('bannerId').value;
  const inicio = document.getElementById('bannerInicio').value;
  const fin    = document.getElementById('bannerFin').value;
  const msgEl  = document.getElementById('bannerMsg');
  const btn    = document.getElementById('bannerSubmitBtn');

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

  const img = document.getElementById('bannerImagen').files[0];
  if (!id && !img) {
    msgEl.innerHTML = '<div class="alert alert-error">La imagen es requerida para un nuevo banner.</div>';
    return;
  }

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

  const fd = new FormData();
  fd.append('link_destino', document.getElementById('bannerLink').value.trim());
  fd.append('fecha_inicio', inicio);
  fd.append('fecha_fin',    fin);
  if (img) fd.append('imagen', img);

  const url = id
    ? `${API}/banners.php?id=${id}`
    : `${API}/banners.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('modalBanner');
  await cargarBanners();
});

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