// views/js/admin_categorias.js
const API_CAT = '../../controllers/controller_categoria.php';
const $  = (s, d=document) => d.querySelector(s);
const $$ = (s, d=document) => Array.from(d.querySelectorAll(s));

const tbody = $('#tabla tbody');
const frm   = $('#frm');
const toast = $('#toast');
let editando = false;

// ======= UI helpers =======
function showToast(msg, ok=true){
  if(!toast) return alert(msg);
  toast.textContent = msg;
  toast.className = `toast show ${ok ? 'ok' : 'err'}`;
  setTimeout(() => { toast.classList.remove('show'); }, 2300);
}
function setFormTitle(t){ $('#tituloForm').textContent = t; }
function setCount(n){ $('#pillTotal').textContent = `${n} ${n===1?'categoría':'categorías'}`; }

// Mobile data-labels
function applyMobileLabels(){
  const headers = $$('#tabla thead th').map(th => th.textContent.trim());
  $$('#tabla tbody tr').forEach(tr => {
    $$( 'td', tr).forEach((td,i) => td.setAttribute('data-label', headers[i] || ''));
  });
}

// ======= Fetch helpers =======
async function getJSON(url, opts={}){
  const r = await fetch(url, opts);
  const t = await r.text();
  try { return JSON.parse(t); } 
  catch { console.error('Respuesta no-JSON:', t); throw new Error('BAD_JSON'); }
}

// ======= Listar / Render =======
async function listar(){
  try{
    const j = await getJSON(`${API_CAT}?accion=listar`);
    render(j.data || []);
  }catch(e){
    showToast('Error al cargar categorías', false);
  }
}

function render(list){
  tbody.innerHTML = '';
  (list || []).forEach(c => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${c.id_categoria}</td>
      <td>${escapeHtml(c.nombre)}</td>
      <td>${escapeHtml(c.descripcion || '')}</td>
      <td><span class="badge">${Number(c.total_productos ?? 0)}</span></td>
      <td class="acciones">
        <button class="btn sm" data-editar="${c.id_categoria}">Editar</button>
        <button class="btn sm danger" data-eliminar="${c.id_categoria}">Eliminar</button>
      </td>`;
    tbody.appendChild(tr);
  });
  setCount(list.length);
  applyMobileLabels();
}

function escapeHtml(s=''){
  return String(s).replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
}

// ======= Delegación de acciones en tabla =======
tbody.addEventListener('click', async (e) => {
  const id = e.target.dataset.editar || e.target.dataset.eliminar;
  if (!id) return;

  if (e.target.dataset.editar){
    try{
      const j = await getJSON(`${API_CAT}?accion=obtener&id=${encodeURIComponent(id)}`);
      if (!j.success) return showToast(j.message || 'No encontrado', false);

      editando = true;
      $('#id').value   = j.data.id_categoria;
      $('#nombre').value = j.data.nombre || '';
      $('#descripcion').value = j.data.descripcion || '';
      setFormTitle('Editar categoría');
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }catch(err){
      showToast('Error al obtener la categoría', false);
    }
  }

  if (e.target.dataset.eliminar){
    if (!confirm('¿Eliminar categoría? Si tiene productos asociados, no se podrá.')) return;
    try{
      const fd = new FormData();
      fd.append('id', id);
      const j = await getJSON(`${API_CAT}?accion=eliminar`, { method:'POST', body:fd });
      showToast(j.message || (j.success?'Eliminado':'No se pudo eliminar'), j.success);
      listar();
    }catch(err){
      showToast('Error al eliminar', false);
    }
  }
});

// ======= Formulario =======
frm.addEventListener('submit', async (e) => {
  e.preventDefault();

  // Validación simple
  const nombre = ($('#nombre').value || '').trim();
  $('#err-nombre').textContent = '';
  $('#nombre').classList.remove('is-invalid');

  if (!nombre){
    $('#err-nombre').textContent = 'El nombre es obligatorio';
    $('#nombre').classList.add('is-invalid');
    $('#nombre').focus();
    return;
  }

  const fd = new FormData(frm);
  const accion = editando ? 'actualizar' : 'crear';

  try{
    const j = await getJSON(`${API_CAT}?accion=${accion}`, { method:'POST', body:fd });
    showToast(j.message || (j.success?'Guardado':'No se pudo guardar'), j.success);
    if (j.success){
      frm.reset();
      editando = false;
      setFormTitle('Crear categoría');
      listar();
    }
  }catch(err){
    showToast('Error al guardar', false);
  }
});

$('#btnCancelar').addEventListener('click', () => {
  frm.reset();
  editando = false;
  setFormTitle('Crear categoría');
  $('#err-nombre').textContent = '';
  $('#nombre').classList.remove('is-invalid');
});

// ======= Buscar =======
let searchTimer = null;
async function doBuscar(){
  const t = ($('#txtBuscar').value || '').trim().toLowerCase();
  try{
    const j = await getJSON(`${API_CAT}?accion=listar`);
    const data = (j.data || []).filter(x => (x.nombre || '').toLowerCase().includes(t));
    render(data);
  }catch(err){
    showToast('Error al buscar', false);
  }
}
$('#btnBuscar').addEventListener('click', (e)=>{ e.preventDefault(); doBuscar(); });
$('#txtBuscar').addEventListener('keyup', () => {
  clearTimeout(searchTimer);
  searchTimer = setTimeout(doBuscar, 350);
});

// ======= Recargar =======
$('#btnRecargar')?.addEventListener('click', listar);

// ======= Topbar mobile toggle =======
const toggle = $('.menu-toggle');
const menu   = $('#topbarMenu');
if (toggle && menu) {
  toggle.addEventListener('click', (e) => {
    e.stopPropagation();
    const open = menu.classList.toggle('show');
    toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
  });
  document.addEventListener('click', (e) => {
    if (!menu.classList.contains('show')) return;
    if (!menu.contains(e.target) && e.target !== toggle) {
      menu.classList.remove('show');
      toggle.setAttribute('aria-expanded','false');
    }
  });
  window.addEventListener('resize', () => {
    if (window.innerWidth > 720) {
      menu.classList.remove('show');
      toggle.setAttribute('aria-expanded','false');
    }
  });
}

// Init
listar();
