// admin.jsx — Panel de gestión de Mi PC y su Mundo (mecatronilab.com/#/admin)
// ─────────────────────────────────────────────────────────────────────────────
// Todo lo que se hace aquí queda en el servidor, no en el navegador:
//   · Usuarios con contraseña cifrada en la base MySQL de Hostinger (api/panel.php).
//     Roles: Administrador (todo) y Supervisión (contenido web, fotos, actualizar catálogo).
//   · Contenido web por producto (marca, descripción, ficha técnica, ocultar, destacar)
//     → assets/contenido.json, que lee la tienda.
//   · Fotos → api/fotos.php.   · "Actualizar ahora" → api/catalogo.php.
//   · Bitácora: quién cambió qué (pestaña Actividad, solo administrador).
// Nombre, precio, categoría y unidades NO se editan aquí: vienen de la hoja INVENTARIO
// de la Plataforma y la tienda los toma sola cada 10 minutos.
// ─────────────────────────────────────────────────────────────────────────────

const INV = () => window.MiPCInventario;
const fmtCOP = (n) => window.MiPCInventario.formatoCOP(n || 0);
const PANEL_API = 'api/panel.php';
const FOTOS_API = 'api/fotos.php';
const CATALOGO_API = 'api/catalogo.php';

// Sesión del panel (la confirma el servidor; aquí solo se usa para mostrar u ocultar botones)
const PANEL = {
  sesion: null,
  roles: {},
  puede(perm) {
    const s = this.sesion;
    return !!s && (s.permisos.includes('*') || s.permisos.includes(perm));
  },
};

// Hook: re-render cuando el inventario cambia en cualquier parte
function useInventario() {
  const [, force] = React.useState(0);
  React.useEffect(() => {
    const h = () => force(x => x + 1);
    window.addEventListener('inventario-actualizado', h);
    return () => window.removeEventListener('inventario-actualizado', h);
  }, []);
  return INV().productos;
}

// ── Llamadas al servidor ──────────────────────────────────────────────
// Si la sesión venció (401), el panel vuelve a la pantalla de ingreso.
async function respuesta(r) {
  let j = null;
  try { j = await r.json(); } catch (e) {}
  if (!r.ok || !j || !j.ok) {
    if (r.status === 401) window.dispatchEvent(new CustomEvent('panel-sesion-terminada'));
    const err = new Error((j && j.error) || ('El servidor respondió ' + r.status + '.'));
    err.status = r.status;
    throw err;
  }
  return j;
}
async function apiPost(url, accion, campos) {
  const fd = new FormData();
  fd.append('accion', accion);
  Object.entries(campos || {}).forEach(([k, v]) => fd.append(k, v));
  let r;
  try { r = await fetch(url, { method: 'POST', body: fd, cache: 'no-store', credentials: 'same-origin' }); }
  catch (e) { throw new Error('Sin conexión con el servidor.'); }
  return respuesta(r);
}
async function apiGet(url, accion, params) {
  const q = new URLSearchParams({ accion, ...(params || {}) });
  let r;
  try { r = await fetch(url + '?' + q.toString(), { cache: 'no-store', credentials: 'same-origin' }); }
  catch (e) { throw new Error('Sin conexión con el servidor.'); }
  return respuesta(r);
}
const apiFotos = (accion, campos) => apiPost(FOTOS_API, accion, campos);
const fotosDe = (p) => (p && p.sku && window.MiPCFotos) ? window.MiPCFotos.de(p.sku) : [];
const fechaCorta = (s) => {
  if (!s) return '—';
  const d = new Date(String(s).replace(' ', 'T'));
  return isNaN(d) ? s : d.toLocaleString('es-CO', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
};

// ── Ingreso ───────────────────────────────────────────────────────────
function AdminLogin({ onDone, onNavigate }) {
  const [u, setU] = React.useState('');
  const [p, setP] = React.useState('');
  const [err, setErr] = React.useState('');
  const [ocupado, setOcupado] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    setOcupado(true); setErr('');
    try { await apiPost(PANEL_API, 'entrar', { usuario: u.trim(), pass: p }); setP(''); onDone(); }
    catch (x) { setErr(x.message); }
    setOcupado(false);
  };
  return (
    <div className="adm-login">
      <form className="adm-login-card" onSubmit={submit}>
        <div className="adm-login-logo">Mi PC <span>y su Mundo</span></div>
        <h1>Panel de gestión</h1>
        <p className="adm-muted">Ingresa con tu usuario para administrar la tienda.</p>
        <label>Usuario</label>
        <input autoFocus value={u} onChange={e => setU(e.target.value)} autoCapitalize="none" autoComplete="username" />
        <label>Contraseña</label>
        <input type="password" value={p} onChange={e => setP(e.target.value)} autoComplete="current-password" />
        {err && <div className="adm-login-err">{err}</div>}
        <button className="btn btn-primary adm-w100" type="submit" disabled={ocupado}>{ocupado ? 'Entrando…' : 'Entrar'}</button>
        <button type="button" className="adm-link" onClick={() => onNavigate('/')}>← Volver a la tienda</button>
      </form>
    </div>
  );
}

// ── Primer administrador (solo existe mientras no haya ningún usuario) ──
function CrearAdmin({ onDone, onNavigate }) {
  const [f, setF] = React.useState({ usuario: '', nombre: '', pass: '', pass2: '', clave: '' });
  const [err, setErr] = React.useState('');
  const [ocupado, setOcupado] = React.useState(false);
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const submit = async (e) => {
    e.preventDefault(); setErr('');
    if (f.pass.length < 8) { setErr('La contraseña debe tener al menos 8 caracteres.'); return; }
    if (f.pass !== f.pass2) { setErr('Las dos contraseñas no coinciden.'); return; }
    setOcupado(true);
    try { await apiPost(PANEL_API, 'crear_admin', { usuario: f.usuario.trim().toLowerCase(), nombre: f.nombre.trim(), pass: f.pass, clave: f.clave.trim() }); onDone(); }
    catch (x) { setErr(x.message); }
    setOcupado(false);
  };
  return (
    <div className="adm-login">
      <form className="adm-login-card" onSubmit={submit}>
        <div className="adm-login-logo">Mi PC <span>y su Mundo</span></div>
        <h1>Crea el administrador</h1>
        <p className="adm-muted">Es la primera vez: crea tu usuario. Después, desde "Usuarios", creas los demás.</p>
        <label>Usuario</label>
        <input autoFocus value={f.usuario} onChange={e => set('usuario', e.target.value)} autoCapitalize="none" autoComplete="username" placeholder="ej: marco" />
        <label>Nombre</label>
        <input value={f.nombre} onChange={e => set('nombre', e.target.value)} autoComplete="name" />
        <label>Contraseña (mínimo 8)</label>
        <input type="password" value={f.pass} onChange={e => set('pass', e.target.value)} autoComplete="new-password" />
        <label>Repite la contraseña</label>
        <input type="password" value={f.pass2} onChange={e => set('pass2', e.target.value)} autoComplete="new-password" />
        <label>Clave de publicación</label>
        <input type="password" value={f.clave} onChange={e => set('clave', e.target.value)} autoComplete="off" />
        {err && <div className="adm-login-err">{err}</div>}
        <button className="btn btn-primary adm-w100" type="submit" disabled={ocupado}>{ocupado ? 'Creando…' : 'Crear y entrar'}</button>
        <button type="button" className="adm-link" onClick={() => onNavigate('/')}>← Volver a la tienda</button>
      </form>
      <div className="adm-login-note">La clave de publicación confirma que eres tú. Las contraseñas quedan cifradas en el servidor.</div>
    </div>
  );
}

// ── Stat tile ─────────────────────────────────────────────────────────
function Stat({ label, value, sub, tone }) {
  return (
    <div className={`adm-stat ${tone ? 'adm-stat-' + tone : ''}`}>
      <div className="adm-stat-val">{value}</div>
      <div className="adm-stat-lbl">{label}</div>
      {sub != null && <div className="adm-stat-sub">{sub}</div>}
    </div>
  );
}

// ── Dashboard ─────────────────────────────────────────────────────────
const haceCuanto = (ts) => {
  if (!ts) return 'sin dato';
  const m = Math.max(0, Math.round((Date.now() / 1000 - ts) / 60));
  return m < 1 ? 'hace menos de 1 min' : m < 60 ? 'hace ' + m + ' min' : 'hace ' + Math.round(m / 60) + ' h';
};

// Regenera el catálogo desde la hoja ya mismo (si no, se regenera solo cada 10 min)
function ActualizarCatalogo() {
  useInventario();
  const [ocupado, setOcupado] = React.useState(false);
  const [msg, setMsg] = React.useState({ t: '', tono: '' });
  const actualizar = async () => {
    setOcupado(true); setMsg({ t: 'Leyendo la hoja de inventario…', tono: '' });
    try {
      const j = await apiPost(CATALOGO_API, 'refrescar', {});
      await window.MiPCCatalogo.cargar(true);
      setMsg({ t: j.ocupado ? 'Ya se estaba actualizando; en un momento queda.' : 'Listo: ' + j.n + ' productos, tal como están en la hoja.', tono: 'ok' });
    } catch (e) { setMsg({ t: e.message, tono: 'bad' }); }
    setOcupado(false);
  };
  return (
    <div className="adm-sync">
      <div>
        <b>Catálogo de la tienda</b>
        <small>Se toma de la hoja INVENTARIO de la Plataforma y se actualiza solo cada 10 minutos. Última vez: {haceCuanto(INV().generado)}.</small>
      </div>
      {PANEL.puede('catalogo.actualizar') && <button className="btn adm-btn-ghost" disabled={ocupado} onClick={actualizar}>Actualizar ahora</button>}
      {msg.t && <div className={'adm-fotos-msg ' + (msg.tono ? 'is-' + msg.tono : '')}>{msg.t}</div>}
    </div>
  );
}

function AdminDashboard({ go }) {
  useInventario();
  const r = INV().resumen();
  const cats = INV().categorias;
  const conFoto = INV().productos.filter(p => fotosDe(p).length > 0).length;
  return (
    <div className="adm-section">
      <h2 className="adm-h2">Resumen</h2>
      <ActualizarCatalogo />
      <div className="adm-stats">
        <Stat label="Productos en la tienda" value={r.total} />
        <Stat label="Con unidades" value={r.conUnidades.length} />
        <Stat label="Pocas unidades (1 a 5)" value={r.pocas.length} tone={r.pocas.length ? 'warn' : ''} />
        <Stat label="Sin unidades" value={r.agotados.length} tone={r.agotados.length ? 'bad' : ''} sub={'salen como "Por confirmar"'} />
        <Stat label="Sin precio" value={r.sinPrecio.length} tone={r.sinPrecio.length ? 'bad' : ''} sub={'salen como "Precio a consultar"'} />
        <Stat label="Con foto real" value={conFoto + ' / ' + r.total} sub={(r.total - conFoto) + ' sin foto'} tone={conFoto < r.total ? 'warn' : ''} />
        {r.ocultos.length > 0 && <Stat label="Ocultos en la tienda" value={r.ocultos.length} sub="desde el panel" />}
      </div>
      {conFoto < r.total && (
        <button className="adm-chip" onClick={() => go('productos', null, 'sin')}><Icon.camera /> Ver los {r.total - conFoto} productos sin foto →</button>
      )}

      <h3 className="adm-h3">Productos por categoría</h3>
      <div className="adm-catbars">
        {cats.map(c => {
          const n = r.porCat[c.id] || 0;
          const pct = r.total ? Math.round(n / r.total * 100) : 0;
          return (
            <button key={c.id} className="adm-catbar" onClick={() => go('productos', c.id)} title="Ver en productos">
              <span className="adm-catbar-h"><span>{c.nombre}</span><b>{n}</b></span>
              <span className="adm-catbar-track"><span className="adm-catbar-fill" style={{ width: pct + '%' }} /></span>
            </button>
          );
        })}
      </div>

      {r.sinPrecio.length > 0 && (
        <>
          <h3 className="adm-h3">Sin precio en la hoja</h3>
          <div className="adm-chips">
            {r.sinPrecio.slice(0, 12).map(p => (
              <span key={p.id} className="adm-chip adm-chip-warn">{p.sku} · {p.nombre.slice(0, 30)}{p.nombre.length > 30 ? '…' : ''}</span>
            ))}
            {r.sinPrecio.length > 12 && <span className="adm-chip">+{r.sinPrecio.length - 12} más</span>}
          </div>
        </>
      )}
    </div>
  );
}

// ── Fotos del producto (se publican de verdad en la tienda vía api/fotos.php) ──
// Deja la foto cuadrada 900×900 con fondo blanco (como las fichas que ya están) y en JPEG.
function prepararFoto(file) {
  return new Promise((res, rej) => {
    const url = URL.createObjectURL(file);
    const img = new Image();
    img.onload = () => {
      const S = 900, c = document.createElement('canvas');
      c.width = c.height = S;
      const x = c.getContext('2d');
      x.fillStyle = '#fff'; x.fillRect(0, 0, S, S);
      const k = Math.min(S / img.naturalWidth, S / img.naturalHeight);
      const w = img.naturalWidth * k, h = img.naturalHeight * k;
      x.drawImage(img, (S - w) / 2, (S - h) / 2, w, h);
      URL.revokeObjectURL(url);
      res(c.toDataURL('image/jpeg', 0.86));
    };
    img.onerror = () => { URL.revokeObjectURL(url); rej(new Error('No se pudo leer esa imagen. Prueba con JPG o PNG.')); };
    img.src = url;
  });
}

function FotosProducto({ p }) {
  const [fotos, setFotos] = React.useState(() => fotosDe(p));
  const [nueva, setNueva] = React.useState(null);
  const [como, setComo] = React.useState(() => fotosDe(p).length ? 'extra' : 'principal');
  const [estado, setEstado] = React.useState({ t: '', tono: '' });
  const [ocupado, setOcupado] = React.useState(false);
  const base = (window.MIPC_IMAGENES_BASE || {})[p.sku] || '';

  const aplicar = (lista) => {
    window.MiPCFotos.aplicar(p.sku, lista);
    setFotos(lista.slice());
    window.dispatchEvent(new CustomEvent('inventario-actualizado'));
  };
  // La sesión del panel autoriza la publicación (api/fotos.php la revisa en el servidor)
  const conSesion = async (fn) => {
    setOcupado(true); setEstado({ t: 'Publicando…', tono: '' });
    try { await fn(); setEstado({ t: 'Listo: ya se ve así en la tienda.', tono: 'ok' }); }
    catch (e) { setEstado({ t: e.message, tono: 'bad' }); }
    setOcupado(false);
  };
  const elegir = async (e) => {
    const f = e.target.files && e.target.files[0];
    e.target.value = '';
    if (!f) return;
    try { setNueva(await prepararFoto(f)); setEstado({ t: '', tono: '' }); }
    catch (x) { setEstado({ t: x.message, tono: 'bad' }); }
  };
  const publicar = () => conSesion(async () => {
    const j = await apiFotos('subir', { sku: p.sku, foto: nueva, base, como });
    aplicar(j.fotos); setNueva(null); setComo('extra');
  });
  const ordenar = (lista) => conSesion(async () => {
    const j = await apiFotos('ordenar', { sku: p.sku, fotos: JSON.stringify(lista) });
    aplicar(j.fotos);
  });
  const principal = (i) => ordenar([fotos[i], ...fotos.filter((_, x) => x !== i)]);
  const quitar = (i) => {
    if (!confirm(i === 0 && fotos.length === 1
      ? '¿Quitar la foto? El producto quedará sin foto en la tienda (el archivo no se borra del servidor).'
      : '¿Quitar esta foto de la tienda? (el archivo no se borra del servidor)')) return;
    ordenar(fotos.filter((_, x) => x !== i));
  };

  if (!p.sku) return <div className="adm-note">Este producto no tiene código: no se le pueden poner fotos.</div>;

  const puede = PANEL.puede('fotos.editar');
  return (
    <div className={'adm-fotos' + (puede ? '' : ' is-ro')}>
      <div className="adm-fotos-head">
        <label>Fotos en la tienda <small>({fotos.length ? fotos.length + (fotos.length === 1 ? ' foto' : ' fotos') : 'sin foto'})</small></label>
        <label className={'btn adm-btn-ghost adm-fotos-add' + (ocupado ? ' is-off' : '')}>
          <Icon.camera /> Agregar foto
          <input type="file" accept="image/*" onChange={elegir} disabled={ocupado} hidden />
        </label>
      </div>

      {fotos.length > 0 ? (
        <div className="adm-fotos-grid">
          {fotos.map((src, i) => (
            <figure key={src} className={'adm-foto' + (i === 0 ? ' is-main' : '')}>
              <a href={src} target="_blank" rel="noopener" title="Ver en grande"><img src={src} alt={'Foto ' + (i + 1)} /></a>
              <figcaption>
                {i === 0 ? <span className="adm-foto-tag">Principal</span>
                  : <button type="button" className="adm-link" disabled={ocupado} onClick={() => principal(i)}>Hacer principal</button>}
                <button type="button" className="adm-link adm-foto-del" disabled={ocupado} onClick={() => quitar(i)}>Quitar</button>
              </figcaption>
            </figure>
          ))}
        </div>
      ) : (
        <div className="adm-fotos-empty"><Icon.camera /> Este producto aún no tiene foto en la tienda.</div>
      )}

      {nueva && (
        <div className="adm-fotos-new">
          <img src={nueva} alt="Foto nueva" />
          <div>
            <b>Foto nueva</b>
            <small>Así quedará: cuadrada, fondo blanco, 900×900.</small>
            {fotos.length > 0 && (
              <div className="adm-fotos-como">
                <label><input type="radio" checked={como === 'principal'} onChange={() => setComo('principal')} /> Como principal</label>
                <label><input type="radio" checked={como === 'extra'} onChange={() => setComo('extra')} /> Como adicional</label>
              </div>
            )}
            <div className="adm-fotos-acts">
              <button type="button" className="btn btn-primary" disabled={ocupado} onClick={publicar}>Publicar foto</button>
              <button type="button" className="btn adm-btn-ghost" disabled={ocupado} onClick={() => setNueva(null)}>Descartar</button>
            </div>
          </div>
        </div>
      )}

      {estado.t && <div className={'adm-fotos-msg ' + (estado.tono ? 'is-' + estado.tono : '')}>{estado.t}</div>}
      <div className="adm-note">Las fotos se publican de inmediato en la tienda. "Quitar" la saca de la tienda pero el archivo queda guardado en el servidor.</div>
    </div>
  );
}

// ── Producto (modal): datos de la hoja + contenido web + fotos ─────────────
const unidadesTxt = (n) => n >= 20 ? '20 o más' : String(n || 0);
const FICHA_EJEMPLO = 'Procesador: Intel Core i5 de 12.ª generación\nMemoria RAM: 8 GB\nAlmacenamiento: SSD 512 GB\nPantalla: 15,6" Full HD\nGarantía: 1 año';

function ContenidoWeb({ p }) {
  const puede = PANEL.puede('contenido.editar');
  const [f, setF] = React.useState(null);           // null = cargando
  const [meta, setMeta] = React.useState(null);
  const [msg, setMsg] = React.useState({ t: '', tono: '' });
  const [ocupado, setOcupado] = React.useState(false);
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  React.useEffect(() => {
    let vivo = true;
    apiGet(PANEL_API, 'producto', { sku: p.sku })
      .then(j => {
        if (!vivo) return;
        const w = j.producto || {};
        setF({ marca: w.marca || '', descripcion: w.descripcion || '', ficha: w.ficha || '',
               oculto: !!Number(w.oculto), destacado: !!Number(w.destacado) });
        setMeta(w.actualizado ? { cuando: w.actualizado, quien: w.actualizado_por } : null);
      })
      .catch(e => { if (vivo) { setF({ marca: '', descripcion: '', ficha: '', oculto: false, destacado: false }); setMsg({ t: e.message, tono: 'bad' }); } });
    return () => { vivo = false; };
  }, [p.sku]);
  const guardar = async () => {
    setOcupado(true); setMsg({ t: 'Guardando…', tono: '' });
    try {
      await apiPost(PANEL_API, 'producto_guardar', { sku: p.sku, marca: f.marca, descripcion: f.descripcion, ficha: f.ficha,
        oculto: f.oculto ? '1' : '0', destacado: f.destacado ? '1' : '0' });
      await window.MiPCCatalogo.cargarContenido(true);
      setMeta({ cuando: new Date().toISOString(), quien: PANEL.sesion.usuario });
      setMsg({ t: f.oculto ? 'Guardado. El producto quedó OCULTO en la tienda.' : 'Guardado: ya se ve así en la tienda.', tono: 'ok' });
    } catch (e) { setMsg({ t: e.message, tono: 'bad' }); }
    setOcupado(false);
  };
  if (!f) return <div className="adm-note">Cargando contenido web…</div>;
  return (
    <div className="adm-web">
      <div className="adm-fotos-head"><label>Contenido en la tienda</label>
        {meta && <small className="adm-muted">Editado por {meta.quien} · {fechaCorta(meta.cuando)}</small>}</div>
      <div className="adm-grid2">
        <div>
          <label>Marca</label>
          <input value={f.marca} disabled={!puede} onChange={e => set('marca', e.target.value)} placeholder="Ej: HP, Lenovo, Epson" maxLength={60} />
        </div>
        <div className="adm-web-checks">
          <label><input type="checkbox" checked={f.destacado} disabled={!puede} onChange={e => set('destacado', e.target.checked)} /> Destacar en el inicio</label>
          <label><input type="checkbox" checked={f.oculto} disabled={!puede} onChange={e => set('oculto', e.target.checked)} /> Ocultar de la tienda</label>
        </div>
      </div>
      <label>Descripción</label>
      <textarea value={f.descripcion} disabled={!puede} onChange={e => set('descripcion', e.target.value)} maxLength={4000}
        placeholder="Para qué sirve, qué incluye, para quién es ideal…" />
      <label>Ficha técnica <small className="adm-muted">(una línea por dato: "Clave: valor")</small></label>
      <textarea value={f.ficha} disabled={!puede} onChange={e => set('ficha', e.target.value)} maxLength={4000} placeholder={FICHA_EJEMPLO} rows={5} />
      {puede && (
        <div className="adm-fotos-acts">
          <button type="button" className="btn btn-primary" disabled={ocupado} onClick={guardar}>Guardar contenido</button>
        </div>
      )}
      {msg.t && <div className={'adm-fotos-msg ' + (msg.tono ? 'is-' + msg.tono : '')}>{msg.t}</div>}
    </div>
  );
}

function ProductoModal({ id, onClose }) {
  useInventario();
  const p = INV().porId(id);
  if (!p) return null;
  const cat = INV().categorias.find(c => c.id === p.categoria);
  return (
    <div className="adm-ov" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="adm-modal">
        <div className="adm-modal-head">
          <h3>{p.nombre}</h3>
          <button className="adm-x" onClick={onClose}><Icon.close /></button>
        </div>
        <div className="adm-modal-body">
          <dl className="adm-ficha">
            <div><dt>Código</dt><dd>{p.sku}</dd></div>
            <div><dt>Categoría en la tienda</dt><dd>{cat ? cat.nombre : p.categoria}</dd></div>
            <div><dt>Precio</dt><dd>{p.precio > 0 ? fmtCOP(p.precio) : 'Sin precio en la hoja'}</dd></div>
            <div><dt>Unidades</dt><dd>{unidadesTxt(p.stock)}</dd></div>
          </dl>
          <div className="adm-note">Nombre, precio, categoría y unidades se cambian en la Plataforma (Inventario); la tienda los toma de la hoja sola cada 10 minutos.</div>
          <ContenidoWeb p={p} />
          <FotosProducto p={p} />
        </div>
        <div className="adm-modal-foot">
          <button className="btn adm-btn-ghost" onClick={onClose}>Cerrar</button>
        </div>
      </div>
    </div>
  );
}

// ── Productos (consulta + fotos) ──────────────────────────────────────
function AdminProductos({ initialCat, initialFoto }) {
  useInventario();
  const [q, setQ] = React.useState('');
  const [cat, setCat] = React.useState(initialCat || 'todas');
  const [foto, setFoto] = React.useState(initialFoto || 'todas');   // todas | con | sin
  const [web, setWeb] = React.useState('todos');                     // todos | ocultos | destacados
  const [modal, setModal] = React.useState(null);     // null | id

  const cats = INV().categorias;
  let list = INV().productos;
  if (cat !== 'todas') list = list.filter(p => p.categoria === cat || (p.extras || []).includes(cat));
  if (foto !== 'todas') list = list.filter(p => (fotosDe(p).length > 0) === (foto === 'con'));
  if (web === 'ocultos') list = list.filter(p => p.oculto);
  if (web === 'destacados') list = list.filter(p => p.destacado);
  const s = q.trim().toLowerCase();
  if (s) list = list.filter(p => (p.nombre + ' ' + p.marca + ' ' + (p.sku || '')).toLowerCase().includes(s));

  return (
    <div className="adm-section">
      <div className="adm-section-head">
        <h2 className="adm-h2">Productos <span className="adm-count">{list.length}</span></h2>
      </div>
      <div className="adm-note">Nombre, precio y unidades vienen de la hoja INVENTARIO. Toca un producto para editar su contenido en la tienda (marca, descripción, ficha) y sus fotos.</div>

      <div className="adm-toolbar">
        <div className="adm-search">
          <Icon.search />
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Buscar por nombre, marca o SKU…" />
        </div>
        <select value={cat} onChange={e => setCat(e.target.value)} className="adm-selcat">
          <option value="todas">Todas las categorías</option>
          {cats.map(c => <option key={c.id} value={c.id}>{c.nombre}</option>)}
        </select>
        <select value={foto} onChange={e => setFoto(e.target.value)} className="adm-selcat">
          <option value="todas">Con y sin foto</option>
          <option value="sin">Sin foto</option>
          <option value="con">Con foto</option>
        </select>
        <select value={web} onChange={e => setWeb(e.target.value)} className="adm-selcat">
          <option value="todos">Visibles y ocultos</option>
          <option value="ocultos">Ocultos</option>
          <option value="destacados">Destacados</option>
        </select>
      </div>

      <div className="adm-table-wrap">
        <table className="adm-table">
          <thead>
            <tr>
              <th>Producto</th><th>Categoría</th><th className="adm-r">Precio</th>
              <th className="adm-r">Unidades</th><th className="adm-r">Fotos</th>
            </tr>
          </thead>
          <tbody>
            {list.slice(0, 300).map(p => (
              <tr key={p.id} className={!(p.stock > 0) ? 'adm-row-out' : ((p.stock <= 5) ? 'adm-row-low' : '')} onClick={() => setModal(p.id)}>
                <td>
                  <div className="adm-prodcell">
                    {fotosDe(p).length
                      ? <img className="adm-prod-thumb" src={fotosDe(p)[0]} alt="" loading="lazy" />
                      : <span className="adm-prod-ic" style={{ background: (p.color || '#64748b') + '22', color: p.color || '#64748b' }} title="Sin foto">
                          <CatIcon cat={p.categoria} />
                        </span>}
                    <div>
                      <div className="adm-prod-nm">{p.nombre}</div>
                      <div className="adm-prod-sub">{marcaVisible(p.marca) ? p.marca + ' · ' : ''}{p.sku}
                        {p.oculto && <span className="adm-tag adm-tag-off">Oculto</span>}
                        {p.destacado && <span className="adm-tag">Destacado</span>}</div>
                    </div>
                  </div>
                </td>
                <td>{cats.find(c => c.id === p.categoria)?.nombre || p.categoria}</td>
                <td className="adm-r">{p.precio > 0 ? fmtCOP(p.precio) : <span className="adm-muted">Sin precio</span>}</td>
                <td className="adm-r">{unidadesTxt(p.stock)}</td>
                <td className="adm-r">
                  <div className="adm-actions">
                    <button className="adm-ibtn" title="Contenido y fotos" onClick={e => { e.stopPropagation(); setModal(p.id); }}><Icon.camera /></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {!list.length && <div className="adm-empty">{INV().estado === 'listo' ? 'No hay productos que coincidan.' : INV().estado === 'error' ? 'No se pudo cargar el catálogo.' : 'Cargando catálogo…'}</div>}
        {list.length > 300 && <div className="adm-empty">Mostrando los primeros 300. Afina la búsqueda o la categoría.</div>}
      </div>

      {modal && <ProductoModal id={modal} onClose={() => setModal(null)} />}
    </div>
  );
}

// ── Inventario (consulta: sin unidades / pocas unidades) ─────────────────
function AdminInventario() {
  useInventario();
  const r = INV().resumen();
  const Fila = ({ p }) => (
    <div className="adm-invrow">
      <span className="adm-prod-ic" style={{ background: (p.color || '#64748b') + '22', color: p.color || '#64748b' }}><CatIcon cat={p.categoria} /></span>
      <div className="adm-invrow-nm">{p.nombre} <small className="adm-muted">{p.sku}</small></div>
      <b className={'adm-invrow-stock ' + (p.stock > 0 ? 'low' : 'out')}>{p.stock}</b>
    </div>
  );
  return (
    <div className="adm-section">
      <h2 className="adm-h2">Inventario</h2>
      <div className="adm-note">Unidades tal como están en la hoja INVENTARIO (suma de Sede, Sucursal y Bodega). Se cambian en la Plataforma; aquí solo se consultan.</div>
      <div className="adm-stats">
        <Stat label="Con unidades" value={r.conUnidades.length} />
        <Stat label="Pocas unidades (1 a 5)" value={r.pocas.length} tone={r.pocas.length ? 'warn' : ''} />
        <Stat label="Sin unidades" value={r.agotados.length} tone={r.agotados.length ? 'bad' : ''} />
      </div>
      <div className="adm-invcols">
        <div className="adm-invcol">
          <h3 className="adm-h3">Pocas unidades ({r.pocas.length})</h3>
          {r.pocas.length ? r.pocas.map(p => <Fila key={p.id} p={p} />) : <div className="adm-empty">Nada con pocas unidades.</div>}
        </div>
        <div className="adm-invcol">
          <h3 className="adm-h3">Sin unidades ({r.agotados.length})</h3>
          {r.agotados.length ? r.agotados.slice(0, 80).map(p => <Fila key={p.id} p={p} />) : <div className="adm-empty">Nada sin unidades.</div>}
        </div>
      </div>
    </div>
  );
}

// ── Usuarios (solo administrador) ─────────────────────────────────────
const ROL_DESC = {
  admin: 'Todo: usuarios, actividad, contenido web, fotos y actualizar el catálogo.',
  supervision: 'Contenido web de los productos (marca, descripción, ficha, ocultar y destacar), fotos y actualizar el catálogo. No ve usuarios ni actividad.',
};

function AdminUsuarios() {
  const [lista, setLista] = React.useState(null);
  const [error, setError] = React.useState('');
  const [form, setForm] = React.useState(null);     // null | { nuevo, usuario, nombre, rol, pass, activo }
  const [msg, setMsg] = React.useState('');
  const [ocupado, setOcupado] = React.useState(false);
  const roles = PANEL.roles || {};
  const yo = PANEL.sesion && PANEL.sesion.usuario;
  const cargar = () => apiGet(PANEL_API, 'usuarios').then(j => { setLista(j.usuarios); setError(''); }).catch(e => setError(e.message));
  React.useEffect(() => { cargar(); }, []);
  const guardar = async () => {
    setOcupado(true); setMsg('');
    try {
      await apiPost(PANEL_API, 'usuario_guardar', { nuevo: form.nuevo ? '1' : '0', usuario: form.usuario.trim().toLowerCase(),
        nombre: form.nombre.trim(), rol: form.rol, pass: form.pass, activo: form.activo ? '1' : '0' });
      setForm(null); cargar();
    } catch (e) { setMsg(e.message); }
    setOcupado(false);
  };
  return (
    <div className="adm-section">
      <div className="adm-section-head">
        <h2 className="adm-h2">Usuarios</h2>
        <button className="btn btn-primary" onClick={() => { setMsg(''); setForm({ nuevo: true, usuario: '', nombre: '', rol: 'supervision', pass: '', activo: true }); }}>+ Nuevo usuario</button>
      </div>
      {error && <div className="adm-fotos-msg is-bad">{error}</div>}
      <div className="adm-table-wrap">
        <table className="adm-table">
          <thead><tr><th>Usuario</th><th>Nombre</th><th>Rol</th><th>Último ingreso</th><th className="adm-r">Estado</th></tr></thead>
          <tbody>
            {(lista || []).map(u => (
              <tr key={u.usuario} className={Number(u.activo) ? '' : 'adm-row-out'}
                onClick={() => { setMsg(''); setForm({ nuevo: false, usuario: u.usuario, nombre: u.nombre, rol: u.rol, pass: '', activo: !!Number(u.activo) }); }}>
                <td><b>{u.usuario}</b>{yo === u.usuario && <span className="adm-tag">tú</span>}</td>
                <td>{u.nombre}</td>
                <td><span className={'adm-rolepill adm-role-' + u.rol}>{roles[u.rol] || u.rol}</span></td>
                <td>{fechaCorta(u.ultimo_ingreso)}</td>
                <td className="adm-r">{Number(u.activo) ? 'Activo' : 'Desactivado'}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {!lista && !error && <div className="adm-empty">Cargando…</div>}
      </div>

      <h3 className="adm-h3">Qué puede hacer cada rol</h3>
      <div className="adm-roles">
        {Object.keys(ROL_DESC).map(r => (
          <div key={r} className="adm-rolecard">
            <div className={'adm-rolepill adm-role-' + r}>{roles[r] || r}</div>
            <p>{ROL_DESC[r]}</p>
          </div>
        ))}
      </div>

      {form && (
        <div className="adm-ov" onClick={e => { if (e.target === e.currentTarget) setForm(null); }}>
          <div className="adm-modal adm-modal-sm">
            <div className="adm-modal-head">
              <h3>{form.nuevo ? 'Nuevo usuario' : 'Editar usuario'}</h3>
              <button className="adm-x" onClick={() => setForm(null)}><Icon.close /></button>
            </div>
            <div className="adm-modal-body">
              <label>Usuario <small className="adm-muted">(sin espacios; no se puede cambiar después)</small></label>
              <input value={form.usuario} disabled={!form.nuevo} autoCapitalize="none" onChange={e => setForm({ ...form, usuario: e.target.value })} />
              <label>Nombre</label>
              <input value={form.nombre} onChange={e => setForm({ ...form, nombre: e.target.value })} />
              <label>Rol</label>
              <select value={form.rol} onChange={e => setForm({ ...form, rol: e.target.value })}>
                {Object.keys(roles).map(r => <option key={r} value={r}>{roles[r]}</option>)}
              </select>
              <small className="adm-muted">{ROL_DESC[form.rol]}</small>
              <label>{form.nuevo ? 'Contraseña (mínimo 8)' : 'Contraseña nueva'} {!form.nuevo && <small className="adm-muted">(deja vacío para no cambiarla)</small>}</label>
              <input type="password" value={form.pass} autoComplete="new-password" onChange={e => setForm({ ...form, pass: e.target.value })} />
              {!form.nuevo && (
                <div className="adm-web-checks">
                  <label><input type="checkbox" checked={form.activo} onChange={e => setForm({ ...form, activo: e.target.checked })} /> Usuario activo (puede ingresar)</label>
                </div>
              )}
              {msg && <div className="adm-fotos-msg is-bad">{msg}</div>}
            </div>
            <div className="adm-modal-foot">
              <button className="btn adm-btn-ghost" onClick={() => setForm(null)}>Cancelar</button>
              <button className="btn btn-primary" disabled={ocupado} onClick={guardar}>Guardar</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── Actividad (solo administrador): quién cambió qué ──────────────────
const ACCIONES = {
  'sesion.entrar': 'Ingresó al panel', 'sesion.salir': 'Salió del panel',
  'usuario.crear': 'Creó un usuario', 'usuario.editar': 'Editó un usuario',
  'producto.contenido': 'Editó el contenido web', 'foto.subir': 'Publicó una foto', 'foto.ordenar': 'Cambió las fotos',
};
function AdminActividad() {
  const [lista, setLista] = React.useState(null);
  const [error, setError] = React.useState('');
  React.useEffect(() => { apiGet(PANEL_API, 'bitacora').then(j => setLista(j.bitacora)).catch(e => setError(e.message)); }, []);
  const nombreDe = (sku) => { const p = INV().porId(sku); return p ? p.nombre : ''; };
  return (
    <div className="adm-section">
      <h2 className="adm-h2">Actividad</h2>
      <div className="adm-note">Últimos 150 cambios hechos desde el panel.</div>
      {error && <div className="adm-fotos-msg is-bad">{error}</div>}
      <div className="adm-table-wrap">
        <table className="adm-table adm-table-ro">
          <thead><tr><th>Cuándo</th><th>Quién</th><th>Qué</th><th>Sobre</th></tr></thead>
          <tbody>
            {(lista || []).map((b, i) => (
              <tr key={i}>
                <td>{fechaCorta(b.ts)}</td>
                <td><b>{b.usuario}</b></td>
                <td>{ACCIONES[b.accion] || b.accion}{b.detalle ? <div className="adm-prod-sub">{b.detalle}</div> : null}</td>
                <td>{b.objeto}{nombreDe(b.objeto) ? <div className="adm-prod-sub">{nombreDe(b.objeto)}</div> : null}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {!lista && !error && <div className="adm-empty">Cargando…</div>}
        {lista && !lista.length && <div className="adm-empty">Aún no hay actividad.</div>}
      </div>
    </div>
  );
}

// ── Shell del panel ───────────────────────────────────────────────────
function AdminShell({ onNavigate, onSalir }) {
  const ses = PANEL.sesion;
  const [tab, setTab] = React.useState('dashboard');
  const [prodCat, setProdCat] = React.useState(null);
  const [prodFoto, setProdFoto] = React.useState(null);
  const go = (t, cat, foto) => { setProdCat(cat || null); setProdFoto(foto || null); setTab(t); };

  const nav = [
    { id: 'dashboard', label: 'Resumen', ic: <Icon.settings />, perm: null },
    { id: 'productos', label: 'Productos', ic: <Icon.box />, perm: 'productos.ver' },
    { id: 'inventario', label: 'Inventario', ic: <Icon.tag />, perm: 'productos.ver' },
    { id: 'usuarios', label: 'Usuarios', ic: <Icon.user />, perm: 'usuarios' },
    { id: 'actividad', label: 'Actividad', ic: <Icon.clock />, perm: 'actividad' },
  ].filter(n => !n.perm || PANEL.puede(n.perm));

  const salir = async () => { try { await apiPost(PANEL_API, 'salir', {}); } catch (e) {} onSalir(); };

  return (
    <div className="adm-root">
      <aside className="adm-side">
        <div className="adm-brand" onClick={() => onNavigate('/')}>Mi PC <span>gestión</span></div>
        <nav>
          {nav.map(n => (
            <button key={n.id} className={'adm-navbtn ' + (tab === n.id ? 'on' : '')} onClick={() => go(n.id)}>
              <span className="adm-navic">{n.ic}</span> {n.label}
            </button>
          ))}
        </nav>
        <div className="adm-side-foot">
          <div className="adm-who"><b>{ses.nombre}</b><span className={'adm-rolepill adm-role-' + ses.rol}>{ses.rolNombre}</span></div>
          <button className="adm-link" onClick={() => onNavigate('/')}>Ver tienda ↗</button>
          <button className="adm-link adm-salir" onClick={salir}>Cerrar sesión</button>
        </div>
      </aside>
      <main className="adm-main">
        {tab === 'dashboard' && <AdminDashboard go={go} />}
        {tab === 'productos' && <AdminProductos key={(prodCat || '') + (prodFoto || '')} initialCat={prodCat} initialFoto={prodFoto} />}
        {tab === 'inventario' && <AdminInventario />}
        {tab === 'usuarios' && <AdminUsuarios />}
        {tab === 'actividad' && <AdminActividad />}
      </main>
    </div>
  );
}

// ── Entrada: pregunta al servidor si hay sesión ───────────────────────
function AdminPage({ onNavigate }) {
  const [est, setEst] = React.useState({ cargando: true });
  const revisar = React.useCallback(async () => {
    try {
      const j = await apiGet(PANEL_API, 'estado');
      PANEL.sesion = j.sesion || null;
      PANEL.roles = j.roles || {};
      setEst({ necesitaAdmin: !!j.necesitaAdmin, sesion: j.sesion || null });
    } catch (e) { setEst({ error: e.message }); }
  }, []);
  React.useEffect(() => {
    revisar();
    const h = () => revisar();
    window.addEventListener('panel-sesion-terminada', h);
    return () => window.removeEventListener('panel-sesion-terminada', h);
  }, [revisar]);
  if (est.cargando) return <div className="adm-login"><div className="adm-login-card"><p className="adm-muted">Cargando panel…</p></div></div>;
  if (est.error) return (
    <div className="adm-login"><div className="adm-login-card">
      <h1>No se pudo abrir el panel</h1>
      <p className="adm-muted">{est.error}</p>
      <button className="btn btn-primary adm-w100" onClick={() => { setEst({ cargando: true }); revisar(); }}>Reintentar</button>
      <button type="button" className="adm-link" onClick={() => onNavigate('/')}>← Volver a la tienda</button>
    </div></div>
  );
  if (est.necesitaAdmin) return <CrearAdmin onDone={revisar} onNavigate={onNavigate} />;
  if (!est.sesion) return <AdminLogin onDone={revisar} onNavigate={onNavigate} />;
  return <AdminShell onNavigate={onNavigate} onSalir={() => { PANEL.sesion = null; setEst({ sesion: null }); }} />;
}

window.AdminPage = AdminPage;