// views/js/admin_productos.js
const API_PROD = '../../controllers/controller_producto.php';
const API_CAT  = '../../controllers/controller_categoria.php';

const $ = s => document.querySelector(s);
const tbody = $('#tabla tbody');
const frm = $('#frm');
let editando = false;

/* === BASE absoluta de la app === */
const APP_BASE = '/taqueria/';

/* Resuelve cualquier forma de foto_url a una URL válida para <img> */
function resolveFotoSrcProd(f) {
  if (!f) return '';
  const s = String(f).trim();
  if (/^https?:\/\//i.test(s) || s.startsWith('/')) return s;     // ya es absoluta
  return APP_BASE + s.replace(/^\/+/, '');                        // p.ej. uploads/productos/xxx.png
}

async function cargarCategorias() {
  const res = await fetch(`${API_CAT}?accion=listar`);
  const j = await res.json();
  const sel = $('#id_categoria');
  sel.innerHTML = '<option value="">— Selecciona —</option>';
  (j.data || []).forEach(c => {
    const op = document.createElement('option');
    op.value = c.id_categoria; op.textContent = c.nombre;
    sel.appendChild(op);
  });
}

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

function render(list) {
  tbody.innerHTML = '';
  (list || []).forEach(p => {
    const src = p.foto_url ? resolveFotoSrcProd(p.foto_url) : '';
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td data-label="#">${p.id_producto}</td>
      <td data-label="Categoría">${p.categoria_nombre || ''}</td>
      <td data-label="Título">${p.titulo || ''}</td>
      <td data-label="Precio">$${Number(p.precio).toFixed(2)}</td>
      <td data-label="Estado"><span class="pill ${p.activo==1?'ok':'off'}">${p.activo==1?'Activo':'Inactivo'}</span></td>
      <td data-label="Imagen">${src ? `<img class="preview" src="${src}" alt="${p.titulo||''}">` : '—'}</td>
      <td class="acciones" data-label="Acciones">
        <button class="btn" data-editar="${p.id_producto}">Editar</button>
        <button class="btn" data-estado="${p.id_producto}" data-a="${p.activo==1?0:1}">${p.activo==1?'Desactivar':'Activar'}</button>
        <button class="btn danger" data-eliminar="${p.id_producto}">Eliminar</button>
      </td>`;
    tbody.appendChild(tr);
  });
}

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

  if (e.target.dataset.editar) {
    const res = await fetch(`${API_PROD}?accion=obtener&id=${id}`);
    const j = await res.json();
    if (j.success) {
      editando = true;
      $('#id').value = j.data.id_producto;
      $('#id_categoria').value = j.data.id_categoria;
      $('#titulo').value = j.data.titulo;
      $('#descripcion').value = j.data.descripcion || '';
      $('#precio').value = j.data.precio;
      $('#activo').value = j.data.activo;

      // Miniatura del existente
      if (window.__setProductoPreviewFromUrl) {
        window.__setProductoPreviewFromUrl(j.data.foto_url || '');
      }

      $('#tituloForm').textContent = 'Editar producto';
      window.scrollTo({top:0,behavior:'smooth'});
    } else {
      alert(j.message || 'No encontrado');
    }
  }

  if (e.target.dataset.estado) {
    const fd = new FormData();
    fd.append('id', id);
    fd.append('activo', e.target.dataset.a);
    const res = await fetch(`${API_PROD}?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 está en pedidos se desactivará.')) return;
    const fd = new FormData(); fd.append('id', id);
    const res = await fetch(`${API_PROD}?accion=eliminar`, {method:'POST', body:fd});
    const j = await res.json(); alert(j.message||''); listar();
  }
});

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

$('#btnCancelar').addEventListener('click', ()=>{
  frm.reset(); editando=false; $('#tituloForm').textContent='Crear producto';
  if (window.__setProductoPreviewFromUrl) window.__setProductoPreviewFromUrl('');
});

$('#chkActivos').addEventListener('change', listar);

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

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

(async function init(){
  await cargarCategorias();
  listar();
})();
