// QRUZH — Alta de Producto, RAW Master, Traspasos v2 (con notificaciones)
const { useState: useStateB, useMemo: useMemoB } = React;
const api3 = window.QRUZH_API;
const { PRODUCTS: PB, CATEGORIES: CB, BRANDS: BB, STORES: SB, RECENT_MOVES: RMB } = window.QRUZH_DATA;
const { fmtMXN: fmt, stockTotal: tot, StockPill: SP, Barcode: BC } = window.QRUZH_HELPERS;

// ==================== ALTA DE PRODUCTO ====================
const AltaProducto = ({ user }) => {
  const [step, setStep] = useStateB(1); // 1=search, 2=found OR new, 3=confirm
  const [query, setQuery] = useStateB("");
  const [match, setMatch] = useStateB(null);
  const [mode, setMode] = useStateB(null); // "exists" | "new"
  const [qty, setQty] = useStateB(10);
  const [created, setCreated] = useStateB(false);
  const [form, setForm] = useStateB({
    cat: "Fundas", subcat: "Magsafe Príncipe", brand: "Apple", model: "iPhone 17 Pro Max",
    color: "Azul Marino", proveedor: "Kevin", costo: 95, menudeo: 350, web: 379, qty: 24,
    notas: "Lote octubre 2026, recibido en almacén central.", img: "", video: "",
  });

  const results = useMemoB(() => {
    if (!query) return [];
    const q = query.toLowerCase();
    return PB.filter(p => p.sku.toLowerCase().includes(q) || p.short.toLowerCase().includes(q) || p.barcode.includes(q) || p.model.toLowerCase().includes(q) || p.color.toLowerCase().includes(q)).slice(0, 5);
  }, [query]);

  const skuPreview = `QRUZH-${form.cat.slice(0,3).toUpperCase()}-${form.brand.slice(0,3).toUpperCase()}-${form.model.replace(/[^A-Z0-9]/gi, "").slice(0,5).toUpperCase()}-${form.subcat.replace(/[^A-Z]/gi,"").slice(0,6).toUpperCase()}-${form.color.replace(/[^A-Z]/gi,"").slice(0,3).toUpperCase()}-001`;
  const barcodePreview = "75019730" + Math.floor(100000 + Math.random() * 899999);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Registrar llegada de producto</div>
          <div className="page-sub">Box de alta inteligente. El sistema detecta si el producto ya existe en RAW Master y suma inventario, o crea uno nuevo desde cero.</div>
        </div>
        <div className="stepper">
          <div className={`step ${step >= 1 ? "active" : ""} ${step > 1 ? "done" : ""}`}><span className="num">1</span> Buscar</div>
          <div className="step-line"/>
          <div className={`step ${step >= 2 ? "active" : ""} ${step > 2 ? "done" : ""}`}><span className="num">2</span> Datos</div>
          <div className="step-line"/>
          <div className={`step ${step >= 3 ? "active" : ""}`}><span className="num">3</span> Confirmar</div>
        </div>
      </div>

      {/* Search step */}
      {step === 1 && (
        <div className="card" style={{ maxWidth: 880, margin: "0 auto" }}>
          <div className="card-pad" style={{ padding: 32 }}>
            <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4 }}>Buscar producto</div>
            <div style={{ fontSize: 12.5, color: "var(--ink-4)", marginBottom: 18 }}>Por SKU, código de barras, modelo, color o descripción</div>
            <div className="search-bar" style={{ width: "100%", padding: "12px 16px", fontSize: 15 }}>
              <Icon name="search" size={18}/>
              <input autoFocus value={query} onChange={e => setQuery(e.target.value)} placeholder="iPhone 17 Pro Max Magsafe…" style={{ fontSize: 15 }}/>
              {query && <button className="btn-icon" onClick={() => setQuery("")}><Icon name="close" size={12}/></button>}
            </div>

            {results.length > 0 && (
              <div style={{ marginTop: 18 }}>
                <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--ink-4)", marginBottom: 8, fontWeight: 600 }}>{results.length} coincidencia(s) en RAW Master</div>
                {results.map(p => (
                  <button key={p.sku} onClick={() => { setMatch(p); setMode("exists"); setStep(2); }}
                    style={{ width: "100%", textAlign: "left", border: "1px solid var(--line-1)", background: "var(--bg-elev)", padding: 12, borderRadius: 10, marginBottom: 8, display: "flex", alignItems: "center", gap: 14, cursor: "pointer" }}>
                    <div className="img-ph" style={{ width: 48, height: 48 }}>IMG</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 500 }}>{p.short}</div>
                      <div className="mono" style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 2 }}>{p.sku}</div>
                    </div>
                    <SP value={tot(p)}/>
                    <Icon name="arrow_right" size={14}/>
                  </button>
                ))}
              </div>
            )}

            <div className="divider"/>
            <div className="row" style={{ justifyContent: "space-between" }}>
              <span style={{ fontSize: 12.5, color: "var(--ink-4)" }}>¿No encuentras el producto?</span>
              <button className="btn" onClick={() => { setMode("new"); setStep(2); }}>
                <Icon name="plus" size={14}/> Crear producto nuevo
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Step 2 — Existing */}
      {step === 2 && mode === "exists" && match && (
        <div className="split">
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Producto encontrado en RAW Master</div>
                <div className="card-sub">Suma inventario al almacén o sucursal</div>
              </div>
              <span className="pill ok"><Icon name="check" size={11}/> Existente</span>
            </div>
            <div className="card-pad">
              <div className="row" style={{ alignItems: "flex-start", gap: 18, marginBottom: 18 }}>
                <div className="img-ph" style={{ width: 92, height: 92 }}>IMG · {match.color}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{match.short}</div>
                  <div className="mono" style={{ fontSize: 11.5, color: "var(--ink-4)", marginBottom: 10 }}>{match.sku}</div>
                  <div className="row" style={{ gap: 6, flexWrap: "wrap" }}>
                    <span className="pill outline">{match.cat}</span>
                    <span className="pill outline">{match.brand}</span>
                    <span className="pill outline">{match.model}</span>
                    <span className="pill outline">{match.color}</span>
                  </div>
                </div>
              </div>

              <div className="form-grid">
                <div className="field"><label>Stock actual (consolidado)</label>
                  <div className="row" style={{ gap: 8 }}>
                    {SB.filter(s => s.id !== "online").map(s => (
                      <div key={s.id} style={{ flex: 1, padding: "10px 12px", border: "1px solid var(--line-1)", borderRadius: 8, background: "var(--bg-sunken)" }}>
                        <div style={{ fontSize: 10.5, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>{s.name}</div>
                        <div className="mono" style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>{match[s.id] ?? 0}</div>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="field span-2"><label>Cantidad recibida</label>
                  <div className="row" style={{ gap: 8 }}>
                    <button className="btn-icon" onClick={() => setQty(Math.max(1, qty - 1))}>−</button>
                    <input className="input mono" style={{ textAlign: "center", flex: 1, fontSize: 18, fontWeight: 600 }} value={qty} onChange={e => setQty(parseInt(e.target.value) || 0)}/>
                    <button className="btn-icon" onClick={() => setQty(qty + 1)}>+</button>
                    <select className="select" style={{ width: 180 }}>
                      <option>Almacén central</option><option>Chedraui</option><option>Outlet</option><option>Kabah</option>
                    </select>
                  </div>
                </div>
                <div className="field span-2"><label>Notas adicionales</label>
                  <textarea className="textarea" placeholder="Lote, factura, observaciones…" defaultValue="Lote del proveedor Kevin · Recibido completo, sin merma."/>
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn ghost" onClick={() => setStep(1)}>← Buscar otro</button>
              <div className="spacer"/>
              <button className="btn">Guardar borrador</button>
              <button className="btn primary" onClick={() => { setCreated(true); setStep(3); if(api3 && user) api3.activity("Alta de producto", form.brand + " " + form.model + " " + form.color + " (x" + form.qty + ")"); if(api3 && window._qruzh_user) api3.activity("Alta de producto", form.brand + " " + form.model + " " + form.color + " (x" + form.qty + ")"); }}>
                Sumar a almacén · +{qty} <Icon name="arrow_right" size={14}/>
              </button>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><div className="card-title">Etiqueta generada</div></div>
            <div className="card-pad" style={{ display: "flex", justifyContent: "center" }}>
              <div className="label-preview">
                <div className="label-row"><span className="label-brand">QRUZH</span><span style={{ fontSize: 8, color: "#999" }}>MX</span></div>
                <BC code={match.barcode}/>
                <div className="label-name">{match.short}</div>
                <div className="label-row">
                  <span className="label-sku">{match.sku.slice(0, 28)}…</span>
                  <span className="label-price">{fmt(match.menudeo)}</span>
                </div>
              </div>
            </div>
            <div className="card-pad" style={{ borderTop: "1px solid var(--line-1)" }}>
              <div style={{ fontSize: 12, color: "var(--ink-4)", marginBottom: 8 }}>Sincronización con canales</div>
              {match.canales.map(c => (
                <div key={c} className="row" style={{ justifyContent: "space-between", padding: "6px 0", fontSize: 12.5 }}>
                  <span style={{ textTransform: "capitalize" }}>{c === "ml" ? "Mercado Libre" : c}</span>
                  <span className="pill ok"><Icon name="check" size={10}/> conectado</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Step 2 — New */}
      {step === 2 && mode === "new" && (
        <div className="split">
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Crear producto nuevo</div>
                <div className="card-sub">Se generará SKU, código de barras y descripciones automáticamente</div>
              </div>
              <span className="pill accent">Nuevo</span>
            </div>
            <div className="card-pad">
              <div className="form-grid">
                <div className="field"><label>Categoría</label>
                  <select className="select" value={form.cat} onChange={e => setForm({ ...form, cat: e.target.value })}>
                    {CB.map(c => <option key={c}>{c}</option>)}
                  </select>
                </div>
                <div className="field"><label>Subcategoría / Diseño</label>
                  <input className="input" value={form.subcat} onChange={e => setForm({ ...form, subcat: e.target.value })}/>
                </div>
                <div className="field"><label>Marca compatible</label>
                  <select className="select" value={form.brand} onChange={e => setForm({ ...form, brand: e.target.value })}>
                    {BB.map(b => <option key={b}>{b}</option>)}
                  </select>
                </div>
                <div className="field"><label>Modelo</label>
                  <input className="input" value={form.model} onChange={e => setForm({ ...form, model: e.target.value })}/>
                </div>
                <div className="field"><label>Color</label>
                  <input className="input" value={form.color} onChange={e => setForm({ ...form, color: e.target.value })}/>
                </div>
                <div className="field"><label>Proveedor</label>
                  <select className="select" value={form.proveedor} onChange={e => setForm({ ...form, proveedor: e.target.value })}>
                    <option>Kevin</option><option>Yair</option><option>Direct</option><option>Otro</option>
                  </select>
                </div>
                <div className="field"><label>Costo (MXN)</label>
                  <input className="input mono" type="number" value={form.costo} onChange={e => setForm({ ...form, costo: +e.target.value })}/>
                  <span className="hint">Sólo visible para Admin / Almacén</span>
                </div>
                <div className="field"><label>Precio público (MXN)</label>
                  <input className="input mono" type="number" value={form.menudeo} onChange={e => setForm({ ...form, menudeo: +e.target.value })}/>
                  <span className="hint">Sugerido: ${(form.costo * 3.5).toFixed(0)} (×3.5 costo)</span>
                </div>
                <div className="field"><label>Precio web</label>
                  <input className="input mono" type="number" value={form.web} onChange={e => setForm({ ...form, web: +e.target.value })}/>
                </div>
                <div className="field"><label>Cantidad recibida</label>
                  <input className="input mono" type="number" value={form.qty} onChange={e => setForm({ ...form, qty: +e.target.value })}/>
                </div>
                <div className="field span-2"><label>Imagen URL <span className="muted">· externa, no se guarda en VPS</span></label>
                  <input className="input mono" placeholder="https://cdn.shopify.com/…" value={form.img} onChange={e => setForm({ ...form, img: e.target.value })}/>
                </div>
                <div className="field span-2"><label>Notas</label>
                  <textarea className="textarea" value={form.notas} onChange={e => setForm({ ...form, notas: e.target.value })}/>
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn ghost" onClick={() => setStep(1)}>← Atrás</button>
              <div className="spacer"/>
              <button className="btn">Guardar como borrador</button>
              <button className="btn primary" onClick={() => { setCreated(true); setStep(3); if(api3 && user) api3.activity("Alta de producto", form.brand + " " + form.model + " " + form.color + " (x" + form.qty + ")"); if(api3 && window._qruzh_user) api3.activity("Alta de producto", form.brand + " " + form.model + " " + form.color + " (x" + form.qty + ")"); }}>
                Crear producto en Master Raw <Icon name="arrow_right" size={14}/>
              </button>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><div className="card-title">Vista previa</div></div>
            <div className="card-pad">
              <div className="row" style={{ gap: 14, marginBottom: 16 }}>
                <div className="img-ph" style={{ width: 80, height: 80 }}>IMG</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 600, marginBottom: 2 }}>Funda {form.model} {form.subcat} {form.color}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-4)", wordBreak: "break-all" }}>{skuPreview}</div>
                </div>
              </div>
              <div className="gen-list">
                <div className="gen-item"><span className="lbl">SKU QRUZH</span><span className="val">{skuPreview}</span><Icon name="check" size={14} style={{ color: "var(--ok)" }}/></div>
                <div className="gen-item"><span className="lbl">Código barras</span><span className="val">{barcodePreview}</span><Icon name="check" size={14} style={{ color: "var(--ok)" }}/></div>
                <div className="gen-item"><span className="lbl">Descripción corta</span><span className="val" style={{ fontFamily: "var(--font-sans)" }}>Funda {form.model.split(" ").slice(-2).join(" ")} {form.subcat.split(" ").slice(-1)} {form.color}</span></div>
                <div className="gen-item"><span className="lbl">Tags</span><span className="val" style={{ fontFamily: "var(--font-sans)", fontSize: 11.5 }}>fundas, {form.brand.toLowerCase()}, magsafe, {form.color.toLowerCase()}</span></div>
                <div className="gen-item"><span className="lbl">Movimiento</span><span className="val" style={{ fontFamily: "var(--font-sans)" }}>Entrada · +{form.qty} → Almacén</span></div>
                <div className="gen-item"><span className="lbl">Registro RAW</span><span className="val" style={{ fontFamily: "var(--font-sans)" }}>Tab `productos` · fila auto</span></div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Step 3 confirm */}
      {step === 3 && created && (
        <div className="card" style={{ maxWidth: 640, margin: "0 auto", padding: 36, textAlign: "center" }}>
          <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--ok-soft)", color: "var(--ok)", display: "grid", placeItems: "center", margin: "0 auto 18px" }}>
            <Icon name="check" size={28}/>
          </div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>{mode === "new" ? "Producto creado en Master Raw" : "Inventario sumado al almacén"}</div>
          <div style={{ color: "var(--ink-4)", fontSize: 14, marginTop: 8 }}>
            {mode === "new" ? `SKU ${skuPreview} generado · ${form.qty} unidades en almacén` : `+${qty} unidades agregadas a ${match?.short}`}
          </div>
          <div className="row" style={{ justifyContent: "center", marginTop: 26, gap: 8 }}>
            <button className="btn" onClick={() => { setStep(1); setQuery(""); setMatch(null); setMode(null); setCreated(false); }}>
              Registrar otro
            </button>
            <button className="btn primary">Ver en RAW Master <Icon name="arrow_right" size={14}/></button>
          </div>
        </div>
      )}
    </div>
  );
};

// ==================== RAW MASTER ====================
const RawMaster = ({ role = "ADMIN" }) => {
  const [filter, setFilter] = useStateB("Todos");
  const [selected, setSelected] = useStateB(new Set());
  const [showImport, setShowImport] = useStateB(false);
  const [showShare, setShowShare] = useStateB(false);
  const [search, setSearch] = useStateB("");
  const cats = ["Todos", "Fundas", "Audífonos", "Cargadores", "PowerBank", "Cámaras", "Accesorios"];
  const filtered = (filter === "Todos" ? PB : PB.filter(p => p.cat === filter))
    .filter(p => !search || (p.short + p.sku + p.barcode + p.model + p.color).toLowerCase().includes(search.toLowerCase()));

  const isAdmin = role === "ADMIN";

  return (
    <div className="page" style={{ maxWidth: "100%" }}>
      <div className="page-head">
        <div>
          <div className="page-title">Vista RAW Master</div>
          <div className="page-sub">Base de datos completa del nucleus · 2,384 productos · sincronizada con Shopify en tiempo real · acceso restringido</div>
        </div>
        <div className="row">
          <button className="btn"><Icon name="sync" size={14}/> Sincronizar Shopify</button>
          <button className="btn" onClick={() => setShowImport(true)}><Icon name="download" size={14} style={{ transform: "rotate(180deg)" }}/> Importar masivo</button>
          {isAdmin && <button className="btn"><Icon name="link" size={14}/> Exportar a Drive</button>}
          <button className="btn primary"><Icon name="plus" size={14}/> Nuevo producto</button>
        </div>
      </div>

      <div className="card">
        <div className="filterbar">
          <div className="search-bar" style={{ width: 260 }}>
            <Icon name="search" size={13}/>
            <input value={search} onChange={e => setSearch(e.target.value)} placeholder="iPhone 17 Pro Max…"/>
          </div>
          {cats.map(c => (
            <span key={c} className={`chip ${filter === c ? "active" : ""}`} onClick={() => setFilter(c)}>{c}{filter === c && <Icon name="close" size={11} className="x"/>}</span>
          ))}
          <div className="spacer"/>
          {(search || filter !== "Todos") && (
            <button className="btn sm accent" onClick={() => setShowShare(true)}>
              <Icon name="link" size={12}/> Compartir resultados ({filtered.length})
            </button>
          )}
          <span className="chip"><Icon name="plus" size={11}/> Marca</span>
          <span className="chip"><Icon name="plus" size={11}/> Proveedor</span>
          <span style={{ fontSize: 12, color: "var(--ink-4)" }}>{filtered.length} resultados</span>
        </div>
        <div className="tbl-wrap" style={{ maxHeight: "calc(100vh - 280px)" }}>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 32 }}><input type="checkbox"/></th>
                <th>Código de barras</th>
                <th>SKU</th>
                <th>Producto</th>
                <th>Categoría</th>
                <th>Diseño</th>
                <th>Marca</th>
                <th>Modelo</th>
                <th>Color</th>
                <th className="num">Costo</th>
                <th className="num">Costo paq.</th>
                <th className="num">Mayoreo</th>
                <th className="num">Menudeo</th>
                <th className="num">Web</th>
                <th>Proveedor</th>
                <th>Fecha compra</th>
                <th>Comprador</th>
                <th>Fecha alta</th>
                <th>Usuario alta</th>
                <th className="num">Almacén</th>
                <th className="num">Chedraui</th>
                <th className="num">Outlet</th>
                <th className="num">Kabah</th>
                <th className="num">Total</th>
                <th>Imágenes</th>
                <th>Videos</th>
                <th>Canales</th>
                <th>Estado</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(p => {
                const isSel = selected.has(p.sku);
                return (
                  <tr key={p.sku} className={isSel ? "selected" : ""} onClick={() => {
                    const s = new Set(selected); isSel ? s.delete(p.sku) : s.add(p.sku); setSelected(s);
                  }}>
                    <td><input type="checkbox" checked={isSel} readOnly/></td>
                    <td className="mono" style={{ fontSize: 11 }}>{p.barcode}</td>
                    <td className="mono" style={{ fontSize: 10.5 }}>{p.sku}</td>
                    <td className="cell-strong" style={{ minWidth: 260 }}>
                      <div className="row" style={{ gap: 10 }}>
                        <div className="img-ph" style={{ width: 28, height: 28, borderRadius: 6, fontSize: 7 }}>IMG</div>
                        {p.short}
                      </div>
                    </td>
                    <td><span className="pill outline">{p.cat}</span></td>
                    <td className="muted">{p.subcat}</td>
                    <td className="cell-strong">{p.brand}</td>
                    <td>{p.model}</td>
                    <td>{p.color}</td>
                    <td className="num mono">{fmt(p.costo)}</td>
                    <td className="num mono muted">{fmt(p.costo_paqueteria || 35)}</td>
                    <td className="num mono">{fmt(p.mayoreo)}</td>
                    <td className="num mono cell-strong">{fmt(p.menudeo)}</td>
                    <td className="num mono">{fmt(p.web)}</td>
                    <td>{p.prov}</td>
                    <td className="mono" style={{ fontSize: 11 }}>{p.fecha_compra}</td>
                    <td>{p.comprador}</td>
                    <td className="mono" style={{ fontSize: 11 }}>{p.fecha}</td>
                    <td>{p.usuario_alta}</td>
                    <td className="num"><SP value={p.almacen}/></td>
                    <td className="num"><SP value={p.chedraui}/></td>
                    <td className="num"><SP value={p.outlet}/></td>
                    <td className="num"><SP value={p.kabah}/></td>
                    <td className="num mono cell-strong">{tot(p)}</td>
                    <td>
                      {p.imagen ? <a href="#" onClick={e => e.stopPropagation()} className="row" style={{ gap: 4, fontSize: 11.5, color: "var(--accent-ink)" }}><Icon name="link" size={11}/> {(p.imagenes || []).length || 1}</a> : <span className="pill warn">—</span>}
                    </td>
                    <td>
                      {(p.videos || []).length ? <a href="#" onClick={e => e.stopPropagation()} className="row" style={{ gap: 4, fontSize: 11.5, color: "var(--accent-ink)" }}><Icon name="link" size={11}/> {p.videos.length}</a> : <span className="muted">—</span>}
                    </td>
                    <td>
                      <div className="row gap-sm">
                        {p.canales.map(c => (
                          <span key={c} title={c} style={{ width: 18, height: 18, borderRadius: 4, background: "var(--bg-sunken)", display: "grid", placeItems: "center", fontSize: 9, fontWeight: 700, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>
                            {c === "shopify" ? "S" : c === "ml" ? "ML" : c === "amazon" ? "A" : "?"}
                          </span>
                        ))}
                      </div>
                    </td>
                    <td><span className="pill ok"><span className="dot"/>activo</span></td>
                    <td><button className="btn-icon" onClick={e => e.stopPropagation()}><Icon name="more" size={14}/></button></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {showImport && <ImportModal onClose={() => setShowImport(false)}/>}
      {showShare && <ShareModal results={filtered} query={search || filter} onClose={() => setShowShare(false)}/>}

      {selected.size > 0 && (
        <div style={{ position: "fixed", bottom: 18, left: "50%", transform: "translateX(-50%)", background: "var(--ink-1)", color: "#fff", borderRadius: 12, padding: "8px 8px 8px 16px", display: "flex", alignItems: "center", gap: 14, boxShadow: "var(--shadow-pop)", zIndex: 60 }}>
          <span style={{ fontSize: 13 }}><span className="mono">{selected.size}</span> productos seleccionados</span>
          <button className="btn sm" style={{ background: "rgba(255,255,255,0.12)", borderColor: "transparent", color: "#fff" }}>Editar</button>
          <button className="btn sm" style={{ background: "rgba(255,255,255,0.12)", borderColor: "transparent", color: "#fff" }}>Duplicar</button>
          <button className="btn sm" style={{ background: "rgba(255,255,255,0.12)", borderColor: "transparent", color: "#fff" }}>Generar códigos</button>
          <button className="btn sm" style={{ background: "var(--accent)", borderColor: "var(--accent)", color: "#fff" }}>Publicar a canal</button>
          <button className="btn-icon" style={{ background: "transparent", borderColor: "transparent", color: "#fff" }} onClick={() => setSelected(new Set())}><Icon name="close" size={14}/></button>
        </div>
      )}
    </div>
  );
};

// ==================== TRASPASOS ====================
const Traspasos = ({ user }) => {
  const [origen, setOrigen] = useStateB("almacen");
  const [destino, setDestino] = useStateB("chedraui");
  const [qty, setQty] = useStateB(6);
  const [producto, setProducto] = useStateB(PB[0]);

  const traspasoMoves = [
    { id: "TR-204", fecha: "Hoy 13:08", prod: "Cargador 25W USB-C Samsung", o: "Almacén", d: "Chedraui", q: 6, user: "Fanny", state: "completado" },
    { id: "TR-203", fecha: "Hoy 11:24", prod: "Funda iPhone 17 Pro Max U2 Stand", o: "Almacén", d: "Outlet", q: 4, user: "Talia", state: "completado" },
    { id: "TR-202", fecha: "Hoy 10:02", prod: "Power Bank Magsafe 10K", o: "Almacén", d: "Outlet", q: 4, user: "Talia", state: "completado" },
    { id: "TR-201", fecha: "Ayer 18:47", prod: "Funda Samsung S26 Ultra Silicone", o: "Outlet", d: "Chedraui", q: 2, user: "Fanny", state: "completado" },
    { id: "TR-200", fecha: "Ayer 16:11", prod: "Audífonos JBL Major", o: "Almacén", d: "Distribuidor Cancún N.", q: 12, user: "Arturo", state: "tránsito" },
    { id: "TR-199", fecha: "Ayer 14:33", prod: "Lightning a 3.5mm Jack", o: "Almacén", d: "Comodato Demo", q: 8, user: "Arturo", state: "completado" },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Traspasos de inventario</div>
          <div className="page-sub">Mueve unidades entre almacén, sucursales, distribuidores o comodato. Toda transferencia genera un movimiento trazable.</div>
        </div>
      </div>

      <div className="split" style={{ marginBottom: 24 }}>
        <div className="card">
          <div className="card-head">
            <div className="card-title">Nuevo traspaso</div>
            <span className="pill outline mono">TR-205</span>
          </div>
          <div className="card-pad">
            {/* Visual flow */}
            <div className="row" style={{ background: "var(--bg-sunken)", borderRadius: 12, padding: 16, marginBottom: 20, gap: 14 }}>
              <div style={{ flex: 1, textAlign: "center" }}>
                <div style={{ fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--ink-4)", marginBottom: 6 }}>Origen</div>
                <div style={{ fontSize: 16, fontWeight: 600 }}>{SB.find(s => s.id === origen)?.name}</div>
                <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 2 }}>{producto[origen] ?? 0} disponibles</div>
              </div>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                <div style={{ fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>{qty} ud</div>
                <Icon name="arrow_right" size={20}/>
              </div>
              <div style={{ flex: 1, textAlign: "center" }}>
                <div style={{ fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--ink-4)", marginBottom: 6 }}>Destino</div>
                <div style={{ fontSize: 16, fontWeight: 600 }}>{SB.find(s => s.id === destino)?.name}</div>
                <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 2 }}>{producto[destino] ?? 0} actual</div>
              </div>
            </div>

            <div className="form-grid">
              <div className="field span-2"><label>Producto</label>
                <select className="select" value={producto.sku} onChange={e => setProducto(PB.find(p => p.sku === e.target.value))}>
                  {PB.slice(0, 10).map(p => <option key={p.sku} value={p.sku}>{p.short}</option>)}
                </select>
              </div>
              <div className="field"><label>Tienda origen</label>
                <select className="select" value={origen} onChange={e => setOrigen(e.target.value)}>
                  {SB.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
                </select>
              </div>
              <div className="field"><label>Tienda destino</label>
                <select className="select" value={destino} onChange={e => setDestino(e.target.value)}>
                  {SB.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
                  <option value="dist">Distribuidor externo</option>
                  <option value="comodato">Comodato / Demo</option>
                </select>
              </div>
              <div className="field"><label>Cantidad</label>
                <input className="input mono" type="number" value={qty} onChange={e => setQty(+e.target.value)}/>
              </div>
              <div className="field"><label>Responsable</label>
                <select className="select" defaultValue="Arturo"><option>Arturo</option><option>Fanny</option><option>Talia</option></select>
              </div>
              <div className="field span-2"><label>Motivo</label>
                <select className="select"><option>Reabasto sucursal</option><option>Pedido distribuidor</option><option>Demo / muestra</option><option>Devolución</option><option>Ajuste físico</option></select>
              </div>
            </div>
          </div>
          <div className="modal-foot">
            <div className="spacer"/>
            <button className="btn">Cancelar</button>
            <button className="btn primary">Registrar traspaso <Icon name="arrow_right" size={14}/></button>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title">Atajos frecuentes</div></div>
          <div className="card-pad" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {[
              { from: "Almacén", to: "Chedraui", n: 18 },
              { from: "Almacén", to: "Outlet", n: 14 },
              { from: "Chedraui", to: "Outlet", n: 6 },
              { from: "Almacén", to: "Distribuidor", n: 4 },
              { from: "Almacén", to: "Comodato", n: 2 },
            ].map((s, i) => (
              <button key={i} className="row" style={{ width: "100%", justifyContent: "space-between", padding: "12px 14px", border: "1px solid var(--line-1)", background: "var(--bg-elev)", borderRadius: 10, cursor: "pointer", fontSize: 13 }}>
                <span className="row">
                  <span style={{ fontWeight: 500 }}>{s.from}</span>
                  <Icon name="arrow_right" size={14}/>
                  <span style={{ fontWeight: 500 }}>{s.to}</span>
                </span>
                <span className="muted mono" style={{ fontSize: 11 }}>{s.n} este mes</span>
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <div className="card-title">Historial de traspasos</div>
            <div className="card-sub">Todos los movimientos tipo traspaso · últimos 7 días</div>
          </div>
          <div className="row gap-sm">
            <span className="pill outline">7d</span>
            <button className="btn ghost sm"><Icon name="download" size={12}/> CSV</button>
          </div>
        </div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>ID</th><th>Fecha</th><th>Producto</th><th>Origen</th><th></th><th>Destino</th><th className="num">Cantidad</th><th>Responsable</th><th>Estado</th></tr></thead>
            <tbody>
              {traspasoMoves.map(m => (
                <tr key={m.id}>
                  <td className="mono">{m.id}</td>
                  <td className="muted">{m.fecha}</td>
                  <td className="cell-strong">{m.prod}</td>
                  <td>{m.o}</td>
                  <td className="muted"><Icon name="arrow_right" size={12}/></td>
                  <td>{m.d}</td>
                  <td className="num mono">{m.q}</td>
                  <td>{m.user}</td>
                  <td><span className={`pill ${m.state === "completado" ? "ok" : "warn"}`}><span className="dot"/>{m.state}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

window.QRUZH_SCREENS.AltaProducto = AltaProducto;
window.QRUZH_SCREENS.RawMaster = RawMaster;
window.QRUZH_SCREENS.Traspasos = Traspasos;

// ==================== IMPORT MODAL ====================
const ImportModal = ({ onClose }) => {
  const [step, setStepI] = useStateB(1);
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" style={{ width: 620 }} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div className="row" style={{ justifyContent: "space-between" }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 600 }}>Importación masiva</div>
              <div style={{ fontSize: 12, color: "var(--ink-4)", marginTop: 2 }}>Carga productos desde CSV/XLSX respetando la configuración del nucleus</div>
            </div>
            <button className="btn-icon" onClick={onClose}><Icon name="close" size={14}/></button>
          </div>
        </div>
        <div className="modal-body">
          <div style={{ background: "var(--bg-sunken)", padding: 16, borderRadius: 10, marginBottom: 16, display: "flex", gap: 14, alignItems: "center" }}>
            <div style={{ width: 40, height: 40, background: "var(--ink-1)", color: "#fff", borderRadius: 8, display: "grid", placeItems: "center" }}>
              <Icon name="download" size={18}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 500 }}>Plantilla oficial QRUZH Master Raw</div>
              <div style={{ fontSize: 11.5, color: "var(--ink-4)" }}>32 columnas predefinidas · respeta SKU schema, categorías y marcas válidas</div>
            </div>
            <button className="btn primary sm">Descargar plantilla .xlsx</button>
          </div>
          <div className="field" style={{ marginBottom: 14 }}>
            <label>Archivo a importar</label>
            <div style={{ border: "2px dashed var(--line-2)", borderRadius: 10, padding: 28, textAlign: "center", color: "var(--ink-4)" }}>
              <div style={{ fontSize: 13, marginBottom: 4 }}>Arrastra tu archivo o haz click para seleccionar</div>
              <div style={{ fontSize: 11 }}>Soporta .csv, .xlsx · máx 5,000 filas</div>
            </div>
          </div>
          <div className="row" style={{ gap: 8, fontSize: 12, color: "var(--ink-4)" }}>
            <Icon name="check" size={14} style={{ color: "var(--ok)" }}/> Validación de SKUs duplicados, códigos EAN y categorías permitidas
          </div>
          <div className="row" style={{ gap: 8, fontSize: 12, color: "var(--ink-4)", marginTop: 4 }}>
            <Icon name="check" size={14} style={{ color: "var(--ok)" }}/> Modo simulación antes de aplicar cambios
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn ghost" onClick={onClose}>Cancelar</button>
          <div className="spacer"/>
          <button className="btn">Validar archivo</button>
          <button className="btn primary">Importar 0 filas</button>
        </div>
      </div>
    </div>
  );
};

// ==================== SHARE MODAL (customer search → link/PDF) ====================
const ShareModal = ({ results, query, onClose }) => {
  // C5: Reemplazar Math.random() (predecible) con crypto.getRandomValues (criptográfico)
  const _genToken = (len = 10) => {
    const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
    const arr = new Uint8Array(len);
    crypto.getRandomValues(arr);
    return Array.from(arr, b => chars[b % chars.length]).join("");
  };
  const link = `https://qruzh.com.mx/c/${(query || "stock").toString().toLowerCase().replace(/\s+/g, "-").slice(0, 24)}-${_genToken(10)}`;
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" style={{ width: 620 }} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div className="row" style={{ justifyContent: "space-between" }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 600 }}>Compartir resultados con cliente</div>
              <div style={{ fontSize: 12, color: "var(--ink-4)", marginTop: 2 }}>{results.length} productos coinciden con "<span className="mono">{query}</span>"</div>
            </div>
            <button className="btn-icon" onClick={onClose}><Icon name="close" size={14}/></button>
          </div>
        </div>
        <div className="modal-body">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginBottom: 18 }}>
            {results.slice(0, 8).map(p => (
              <div key={p.sku} className="img-ph" style={{ height: 80, fontSize: 8, position: "relative" }}>
                <span style={{ position: "absolute", bottom: 4, left: 4, right: 4, fontSize: 8, fontFamily: "var(--font-sans)", color: "var(--ink-2)", background: "rgba(255,255,255,0.85)", padding: "2px 4px", borderRadius: 3, textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}>{p.color}</span>
              </div>
            ))}
          </div>
          <div className="field" style={{ marginBottom: 14 }}>
            <label>Link público (caduca en 7 días)</label>
            <div className="row" style={{ gap: 6 }}>
              <input className="input mono" readOnly value={link} style={{ fontSize: 11.5 }}/>
              <button className="btn">Copiar</button>
            </div>
          </div>
          <div className="row" style={{ gap: 14, fontSize: 12.5 }}>
            <label className="row" style={{ gap: 6 }}><input type="checkbox" defaultChecked/> Incluir precio menudeo</label>
            <label className="row" style={{ gap: 6 }}><input type="checkbox"/> Incluir stock por tienda</label>
            <label className="row" style={{ gap: 6 }}><input type="checkbox"/> Sólo con existencia</label>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn ghost" onClick={onClose}>Cancelar</button>
          <div className="spacer"/>
          <button className="btn"><Icon name="download" size={12}/> PDF</button>
          <button className="btn"><Icon name="download" size={12}/> ZIP imágenes</button>
          <button className="btn primary"><Icon name="link" size={12}/> Enviar a WhatsApp</button>
        </div>
      </div>
    </div>
  );
};

window.QRUZH_SCREENS.ImportModal = ImportModal;
window.QRUZH_SCREENS.ShareModal = ShareModal;