/* ============================================================
   VegaFácil — Primitivos UI (compartidos)
   ============================================================ */
const { useState, useEffect, useRef } = React;
const fmt = window.VEGA.fmt;

/* --- Íconos SVG mínimos (trazo) --- */
function Icon({ name, size = 18, stroke = 2, ...rest }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
              stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round",
              strokeLinejoin: "round", ...rest };
  const paths = {
    cart:   <><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h2.2l2.3 12.3a1.5 1.5 0 0 0 1.5 1.2h8.8a1.5 1.5 0 0 0 1.5-1.2L21 7H5.5"/></>,
    check:  <path d="M20 6 9 17l-5-5"/>,
    chev:   <path d="m9 6 6 6-6 6"/>,
    close:  <path d="M18 6 6 18M6 6l12 12"/>,
    clock:  <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    truck:  <><path d="M10 17V5a1 1 0 0 0-1-1H2v13h8Z"/><path d="M10 8h7l4 4v5h-3"/><circle cx="6.5" cy="17.5" r="1.6"/><circle cx="17.5" cy="17.5" r="1.6"/></>,
    bag:    <><path d="M6 8h12l-1 12a2 2 0 0 1-2 1.8H9A2 2 0 0 1 7 20Z"/><path d="M9 8a3 3 0 0 1 6 0"/></>,
    cart2:  <><path d="M3 4h2l1.5 11h11l1.8-8H6"/><circle cx="9" cy="19" r="1.5"/><circle cx="17" cy="19" r="1.5"/></>,
    tag:    <><path d="M3 12V5a2 2 0 0 1 2-2h7l9 9-9 9-9-9Z"/><circle cx="7.5" cy="7.5" r="1.4"/></>,
    pkg:    <><path d="M21 8 12 3 3 8v8l9 5 9-5Z"/><path d="m3 8 9 5 9-5M12 13v8"/></>,
    alert:  <><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.8 2 18a2 2 0 0 0 1.7 3h16.6a2 2 0 0 0 1.7-3L13.7 3.8a2 2 0 0 0-3.4 0Z"/></>,
    spark:  <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18"/>,
    user:   <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    lock:   <><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></>,
    logout: <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5M21 12H9"/></>,
    layers: <><path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 13 9 5 9-5"/></>,
    plus:   <path d="M12 5v14M5 12h14"/>,
  };
  return <svg {...p}>{paths[name]}</svg>;
}

/* --- Botón --- */
function Btn({ variant = "primary", size, block, children, ...rest }) {
  const cls = ["btn", `btn-${variant}`, size === "lg" ? "btn-lg" : "", block ? "btn-block" : ""].join(" ");
  return <button className={cls} {...rest}>{children}</button>;
}

/* --- Selector de cantidad +/- --- */
function Stepper({ value, onChange, min = 0, max = 99, small }) {
  return (
    <div className={"stepper" + (small ? " sm" : "")} onClick={(e) => e.stopPropagation()}>
      <button onClick={() => onChange(Math.max(min, value - 1))} disabled={value <= min} aria-label="Quitar">−</button>
      <span className="val num">{value}</span>
      <button onClick={() => onChange(Math.min(max, value + 1))} disabled={value >= max} aria-label="Agregar">+</button>
    </div>
  );
}

/* --- Badge de estado --- */
function StatusBadge({ status }) {
  if (status === "entregado") return <span className="badge badge-deliv"><span className="dot"></span>Entregado</span>;
  return <span className="badge badge-pend"><span className="dot"></span>Pendiente</span>;
}

/* --- Pill de margen (verde/rojo) --- */
function MarginPill({ pct, flag }) {
  const bad = pct < flag;
  return <span className={"mpill " + (bad ? "bad" : "ok")}>{bad ? "▼" : "▲"} {pct.toFixed(0)}%</span>;
}

/* --- Glifo de producto --- */
function Glyph({ emoji, cls = "glyph" }) {
  return <div className={cls}>{emoji}</div>;
}

/* --- Toast efímero --- */
function useToast() {
  const [msg, setMsg] = useState(null);
  const show = (m) => { setMsg(m); };
  useEffect(() => { if (!msg) return; const t = setTimeout(() => setMsg(null), 2200); return () => clearTimeout(t); }, [msg]);
  const node = msg ? <div className="toast"><Icon name="check" size={16}/> {msg}</div> : null;
  return [node, show];
}

Object.assign(window, { Icon, Btn, Stepper, StatusBadge, MarginPill, Glyph, useToast, fmt });