// views/js/admin_productos_evento.js
const API = '../../controllers/controller_producto_evento.php';

const $ = s => document.querySelector(s);
const tbody = $('#tabla tbody');
const frm = $('#frm');
const tituloForm = $('#tituloForm');
const btnCancelar = $('#btnCancelar');
const chkActivos = $('#chkActivos');
const txtBuscar = $('#txtBuscar');
const btnBuscar = $('#btnBuscar');
const btnPrecio = $('#btnPrecio');

let editando = false;

/* === Usa siempre ruta absoluta bajo /taqueria/ === */
const APP_BASE = '/taqueria/';  // <- carpeta raíz de tu app
function resolveImgUrl(u) {
  if (!u) return null;
  if (/^https?:\/\//i.test(u)) return u;    // ya absoluta externa
  return APP_BASE + u.replace(/^\/+/, '');  // p.ej. "uploads/eventos/xxx.png" -> "/taqueria/uploads/eventos/xxx.png"
}

async function listar() {
  const solo = chkActivos.checked ? '&solo_activos=1' : '';
  const res = await fetch(`${API}?accion=listar${solo}`);
  const json = await res.json();
  console.log('listar ->', json); // DEBUG: confirma que llega foto_url
  render(json.data || []);
}

function render(list) {
  tbody.innerHTML = '';
  list.forEach(row => {
    const imgSrc = resolveImgUrl(row.foto_url);
    console.log('row.foto_url:', row.foto_url, '=>', imgSrc); // DEBUG

    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td data-label="#">${row.id_producto_evento}</td>
      <td data-label="Título">${row.titulo}</td>
      <td data-label="Precio">$${Number(row.precio).toFixed(2)}</td>
      <td data-label="Estado">
        <span class="pill ${row.activo == 1 ? 'ok' : 'off'}">
          ${row.activo == 1 ? 'Activo' : 'Inactivo'}
        </span>
      </td>
      <td data-label="Imagen">
        ${imgSrc ? `<img class="preview" src="${imgSrc}" alt="${row.titulo}">` : '—'}
      </td>
      <td data-label="Acciones" class="acciones">
        <button class="btn" data-editar="${row.id_producto_evento}">Editar</button>
        <button class="btn" data-estado="${row.id_producto_evento}" data-a="${row.activo == 1 ? 0 : 1}">
          ${row.activo == 1 ? 'Desactivar' : 'Activar'}
        </button>
        <button class="btn danger" data-eliminar="${row.id_producto_evento}">Eliminar</button>
        <button class="btn" data-stats="${row.id_producto_evento}">Stats</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

tbody.addEventListener('click', async (e) => {
  const id = e.target.dataset.editar || e.target.dataset.estado || e.target.dataset.eliminar || e.target.dataset.stats;
  if (!id) return;

  if (e.target.dataset.editar) {
    const res = await fetch(`${API}?accion=obtener&id=${id}`);
    const j = await res.json();
    if (j.success) {
      editando = true;
      tituloForm.textContent = 'Editar';
      $('#id').value = j.data.id_producto_evento;
      $('#titulo').value = j.data.titulo;
      $('#descripcion').value = j.data.descripcion || '';
      $('#precio').value = j.data.precio;
      $('#activo').value = j.data.activo;
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } else {
      alert(j.message || 'No encontrado');
    }
  }

  if (e.target.dataset.estado) {
    const activo = e.target.dataset.a;
    const fd = new FormData();
    fd.append('id', id);
    fd.append('activo', activo);
    const res = await fetch(`${API}?accion=cambiar_estado`, { method: 'POST', body: fd });
    const j = await res.json();
    alert(j.message || '');
    listar();
  }

  if (e.target.dataset.eliminar) {
    if (!confirm('¿Eliminar? Si tiene agendas asociadas se desactivará.')) return;
    const fd = new FormData();
    fd.append('id', id);
    const res = await fetch(`${API}?accion=eliminar`, { method: 'POST', body: fd });
    const j = await res.json();
    alert(j.message || '');
    listar();
  }

  if (e.target.dataset.stats) {
    const res = await fetch(`${API}?accion=estadisticas&id=${id}`);
    const j = await res.json();
    if (j.success) {
      const d = j.data || {};
      alert(
        `Total agendas: ${d.total_agendas || 0}\n` +
        `Reservadas: ${d.agendas_reservadas || 0}\n` +
        `Completadas: ${d.agendas_completadas || 0}\n` +
        `Canceladas: ${d.agendas_canceladas || 0}`
      );
    } else {
      alert(j.message || 'Error stats');
    }
  }
});

frm.addEventListener('submit', async (e) => {
  e.preventDefault();
  const fd = new FormData(frm);
  const accion = editando ? 'actualizar' : 'crear';
  const res = await fetch(`${API}?accion=${accion}`, { method: 'POST', body: fd });
  const j = await res.json();
  alert(j.message || '');
  if (j.success) {
    frm.reset();
    editando = false;
    tituloForm.textContent = 'Crear nuevo';
    listar();
  }
});

btnCancelar.addEventListener('click', () => {
  frm.reset();
  editando = false;
  tituloForm.textContent = 'Crear nuevo';
});

chkActivos.addEventListener('change', listar);

btnBuscar.addEventListener('click', async () => {
  const t = txtBuscar.value.trim();
  if (t.length < 2) return alert('Escribe al menos 2 caracteres');
  const solo = chkActivos.checked ? '&solo_activos=1' : '';
  const res = await fetch(`${API}?accion=buscar&termino=${encodeURIComponent(t)}${solo}`);
  const j = await res.json();
  render(j.data || []);
});

btnPrecio.addEventListener('click', async () => {
  const min = $('#min').value || 0;
  const max = $('#max').value || 999999;
  const solo = chkActivos.checked ? '&solo_activos=1' : '';
  const res = await fetch(`${API}?accion=filtrar_precio&precio_min=${min}&precio_max=${max}${solo}`);
  const j = await res.json();
  render(j.data || []);
});

// inicial
listar();
