// screen-estoque.jsx — Inventory with marketplace sync + role-based view

function EstoqueScreen({ onToast, user }) {
  const [q, setQ] = useState("");
  const [cat, setCat] = useState("all");
  const [filter, setFilter] = useState("all"); // all | low | out
  const [editing, setEditing] = useState(null);
  const [creating, setCreating] = useState(false);
  const [showCats, setShowCats] = useState(false);
  const [showAlerts, setShowAlerts] = useState(true);

  const level = permLevel(user, "estoque");
  const seeValues = level === "full";

  const filtered = PRODUCTS.filter(p => {
    if (cat !== "all" && p.cat !== cat) return false;
    if (filter === "low" && !(p.stock > 0 && p.stock <= p.min)) return false;
    if (filter === "out" && p.stock !== 0) return false;
    if (q) {
      const s = q.toLowerCase();
      if (!p.name.toLowerCase().includes(s) && !p.sku.toLowerCase().includes(s) && !p.barcode.includes(s)) return false;
    }
    return true;
  });

  const totalSku = PRODUCTS.length;
  const lowList = PRODUCTS.filter(p => p.stock > 0 && p.stock <= p.min);
  const outList = PRODUCTS.filter(p => p.stock === 0);
  const lowCount = lowList.length;
  const outCount = outList.length;
  const stockValue = PRODUCTS.reduce((s, p) => s + p.cost * p.stock, 0);

  /* ───────── Read-only view for vendedor ───────── */
  if (level === "readonly_qty") {
    return (
      <>
        <div className="page-head">
          <div className="grow">
            <h2>Consulta de Estoque</h2>
            <div className="muted">
              Visualização de disponibilidade — sem valores comerciais
              <span className="badge" style={{ marginLeft: 10 }}><I.Lock size={11} /> Perfil Vendedor</span>
            </div>
          </div>
        </div>

        {(outCount > 0 || lowCount > 0) && showAlerts && (
          <StockAlertBanner outList={outList} lowList={lowList} onClose={() => setShowAlerts(false)} onClick={() => setFilter(outCount > 0 ? "out" : "low")} />
        )}

        <div className="card">
          <div className="card-header" style={{ flexWrap: "wrap", gap: 10 }}>
            <div className="grow" style={{ minWidth: 240, position: "relative" }}>
              <I.Search size={14} style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "var(--ink-3)" }} />
              <input className="input" style={{ paddingLeft: 36 }} placeholder="Buscar produto…" value={q} onChange={e => setQ(e.target.value)} />
            </div>
            <select className="select" style={{ width: 180 }} value={cat} onChange={e => setCat(e.target.value)}>
              <option value="all">Todas categorias</option>
              {CATS.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
            <div className="row" style={{ gap: 4 }}>
              <button className={`btn btn-sm ${filter === "all" ? "btn-green" : ""}`} onClick={() => setFilter("all")}>Todos</button>
              <button className={`btn btn-sm ${filter === "low" ? "btn-green" : ""}`} onClick={() => setFilter("low")}>Críticos ({lowCount})</button>
              <button className={`btn btn-sm ${filter === "out" ? "btn-green" : ""}`} onClick={() => setFilter("out")}>Zerados ({outCount})</button>
            </div>
          </div>
          <table className="table">
            <thead>
              <tr>
                <th>Produto</th>
                <th>Categoria</th>
                <th>Quantidade</th>
                <th>Status</th>
                <th>Disponível em</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(p => {
                const c = categoryById(p.cat);
                const status = p.stock === 0 ? "out" : p.stock <= p.min ? "low" : "ok";
                return (
                  <tr key={p.id}>
                    <td>
                      <div style={{ fontWeight: 600 }}>{p.name}</div>
                      <div className="muted" style={{ fontSize: 11, fontFamily: "var(--font-mono)" }}>{p.sku}</div>
                    </td>
                    <td><span className="badge">{c.icon} {c.name}</span></td>
                    <td className="num">
                      <span className={`stock-pill ${status === "low" ? "low" : ""} ${status === "out" ? "out" : ""}`}>{p.stock}</span>
                    </td>
                    <td>
                      {status === "ok"   && <span className="badge badge-ok">Disponível</span>}
                      {status === "low"  && <span className="badge badge-warn">Estoque baixo</span>}
                      {status === "out"  && <span className="badge badge-err">Sem estoque</span>}
                    </td>
                    <td>
                      <div className="row" style={{ gap: 4, flexWrap: "wrap", justifyContent: "flex-end" }}>
                        {p.mp.map(mp => (
                          <span key={mp} className={`mp mp-${mp}`}>{mp === "loja" ? "Loja" : marketplaceById(mp).name.split(" ")[0]}</span>
                        ))}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </>
    );
  }

  /* ───────── Full view for gerente / CEO / admin ───────── */
  return (
    <>
      <div className="page-head">
        <div className="grow">
          <h2>Estoque</h2>
          <div className="muted">
            Unificado em tempo real entre loja física e marketplaces
            <span className="badge badge-ok" style={{ marginLeft: 10 }}>
              <span className="live-dot" /> sync ativo
            </span>
          </div>
        </div>
        <button className="btn" onClick={() => setShowCats(true)}>
          <I.Tag size={14} /> Categorias
        </button>
        <button className="btn"><I.Sync size={14} /> Sincronizar tudo</button>
        <button className="btn btn-primary" onClick={() => setCreating(true)}>
          <I.Plus size={14} /> Novo produto
        </button>
      </div>

      {(outCount > 0 || lowCount > 0) && showAlerts && (
        <StockAlertBanner
          outList={outList}
          lowList={lowList}
          onClose={() => setShowAlerts(false)}
          onClick={() => setFilter(outCount > 0 ? "out" : "low")}
        />
      )}

      <div className="grid-kpi" style={{ marginBottom: 16 }}>
        <div className="kpi">
          <div className="kpi-icon"><I.Box size={18} /></div>
          <div className="kpi-label">SKUs ativos</div>
          <div className="kpi-value">{totalSku}</div>
          <div className="muted" style={{ fontSize: 12 }}>{CATS.length} categorias</div>
        </div>
        <div className="kpi">
          <div className="kpi-icon green"><I.Cash size={18} /></div>
          <div className="kpi-label">Valor em estoque (custo)</div>
          <div className="kpi-value">{brl(stockValue)}</div>
          <div className="muted" style={{ fontSize: 12 }}>~ {brl(stockValue * 2.1)} a preço de venda</div>
        </div>
        <div className="kpi">
          <div className="kpi-icon warn"><I.TrendUp size={18} /></div>
          <div className="kpi-label">Estoque crítico</div>
          <div className="kpi-value" style={{ color: "var(--warn)" }}>{lowCount}</div>
          <div className="muted" style={{ fontSize: 12 }}>abaixo do mínimo</div>
        </div>
        <div className="kpi">
          <div className="kpi-icon" style={{ background: "var(--err-bg)", color: "var(--err)" }}><I.X size={18} /></div>
          <div className="kpi-label">Sem estoque</div>
          <div className="kpi-value" style={{ color: "var(--err)" }}>{outCount}</div>
          <div className="muted" style={{ fontSize: 12 }}>ruptura — gera alerta</div>
        </div>
      </div>

      <div className="card">
        <div className="card-header" style={{ flexWrap: "wrap", gap: 10 }}>
          <div className="grow" style={{ minWidth: 240, position: "relative" }}>
            <I.Search size={14} style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "var(--ink-3)" }} />
            <input
              className="input"
              style={{ paddingLeft: 36 }}
              placeholder="Buscar por nome, SKU ou código de barras…"
              value={q}
              onChange={e => setQ(e.target.value)}
            />
          </div>
          <select className="select" style={{ width: 180 }} value={cat} onChange={e => setCat(e.target.value)}>
            <option value="all">Todas categorias</option>
            {CATS.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
          <div className="row" style={{ gap: 4 }}>
            <button className={`btn btn-sm ${filter === "all" ? "btn-green" : ""}`} onClick={() => setFilter("all")}>Todos</button>
            <button className={`btn btn-sm ${filter === "low" ? "btn-green" : ""}`} onClick={() => setFilter("low")}>Críticos ({lowCount})</button>
            <button className={`btn btn-sm ${filter === "out" ? "btn-green" : ""}`} onClick={() => setFilter("out")}>Zerados ({outCount})</button>
          </div>
        </div>

        <table className="table">
          <thead>
            <tr>
              <th>Produto</th>
              <th>Cat.</th>
              <th>Custo</th>
              <th>Venda</th>
              <th>Estoque</th>
              <th>Mín.</th>
              <th>Canais ativos</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(p => {
              const c = categoryById(p.cat);
              const status = p.stock === 0 ? "out" : p.stock <= p.min ? "low" : "ok";
              return (
                <tr key={p.id}>
                  <td>
                    <div style={{ fontWeight: 600 }}>{p.name}</div>
                    <div className="muted" style={{ fontSize: 11, fontFamily: "var(--font-mono)" }}>{p.sku} · {p.barcode}</div>
                  </td>
                  <td><span className="badge">{c.icon} {c.name}</span></td>
                  <td className="num">{brl(p.cost)}</td>
                  <td className="num" style={{ fontWeight: 700 }}>{brl(p.price)}</td>
                  <td className="num">
                    <span className={`stock-pill ${status === "low" ? "low" : ""} ${status === "out" ? "out" : ""}`}>{p.stock}</span>
                  </td>
                  <td className="num muted">{p.min}</td>
                  <td>
                    <div className="row" style={{ gap: 4, flexWrap: "wrap", justifyContent: "flex-start" }}>
                      {p.mp.map(mp => {
                        const m = marketplaceById(mp);
                        return (
                          <span key={mp} className={`mp mp-${mp}`} title={m.name}>
                            {mp === "loja" ? "Loja" : m.name.split(" ")[0]}
                          </span>
                        );
                      })}
                    </div>
                  </td>
                  <td>
                    <button className="btn btn-sm" onClick={() => setEditing(p)}>Ajustar</button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>

        {filtered.length === 0 && (
          <div className="empty-state">
            <I.Box size={36} />
            <div>Nenhum produto encontrado com esses filtros</div>
          </div>
        )}
      </div>

      {editing && <StockAdjustModal product={editing} onClose={() => setEditing(null)} onSave={(qty) => {
        editing.stock = qty;
        onToast({ msg: `Estoque de ${editing.sku} ajustado para ${qty} un.`, kind: "ok" });
        setEditing(null);
      }} />}

      {creating && <ProductFormModal onClose={() => setCreating(false)} onSave={(p) => {
        PRODUCTS.unshift(p);
        onToast({ msg: `Produto ${p.sku} cadastrado e sincronizado.`, kind: "ok" });
        setCreating(false);
      }} />}

      {showCats && <CategoryManagerModal onClose={() => setShowCats(false)} onToast={onToast} />}
    </>
  );
}

/* ────────────────────────────────────────────────────────────── */
function StockAlertBanner({ outList, lowList, onClose, onClick }) {
  const top = [...outList, ...lowList].slice(0, 4);
  const kind = outList.length > 0 ? "err" : "warn";
  return (
    <div className={`alert-banner ${kind}`}>
      <div className="alert-ico">
        <I.Bell size={18} />
      </div>
      <div className="alert-text">
        <div className="alert-title">
          {outList.length > 0
            ? `⚠ ${outList.length} ${outList.length === 1 ? "produto sem estoque" : "produtos sem estoque"}`
            : `Atenção: ${lowList.length} ${lowList.length === 1 ? "produto crítico" : "produtos críticos"}`}
          {outList.length > 0 && lowList.length > 0 && ` e ${lowList.length} crítico${lowList.length > 1 ? "s" : ""}`}
        </div>
        <div className="alert-sub">
          Pedidos novos ficam pendentes nos marketplaces até reposição.
        </div>
        <div className="alert-chips">
          {top.map(p => (
            <span key={p.id} className={`alert-chip ${p.stock === 0 ? "" : "warn"}`} onClick={onClick}>
              {p.name.length > 38 ? p.name.slice(0, 36) + "…" : p.name} <span className="stk">· {p.stock} un.</span>
            </span>
          ))}
          {(outList.length + lowList.length) > 4 && (
            <span className="alert-chip" onClick={onClick}>
              +{(outList.length + lowList.length) - 4} <I.ChevR size={11} />
            </span>
          )}
        </div>
      </div>
      <button className="btn btn-sm" onClick={onClick}>Ver lista</button>
      <button className="btn btn-ghost btn-icon btn-sm" onClick={onClose}><I.X size={13} /></button>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────── */
function StockAdjustModal({ product, onClose, onSave }) {
  const [qty, setQty] = useState(product.stock);
  const [reason, setReason] = useState("contagem");
  const diff = qty - product.stock;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-hd">
          <I.Box size={18} />
          <h3>Ajuste de estoque</h3>
          <button className="btn btn-ghost btn-icon btn-sm" onClick={onClose}><I.X size={14} /></button>
        </div>
        <div className="modal-bd">
          <div style={{ background: "var(--bg-sunk)", padding: 14, borderRadius: 10, marginBottom: 16 }}>
            <div style={{ fontWeight: 700, fontSize: 14 }}>{product.name}</div>
            <div className="muted" style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, marginTop: 2 }}>{product.sku}</div>
          </div>
          <div className="grid-2">
            <div className="field">
              <label>Quantidade atual</label>
              <input className="input" disabled value={product.stock} />
            </div>
            <div className="field">
              <label>Nova quantidade</label>
              <input className="input input-lg" type="number" min="0" value={qty} onChange={e => setQty(parseInt(e.target.value) || 0)} autoFocus />
            </div>
          </div>
          <div className="field" style={{ marginTop: 12 }}>
            <label>Motivo</label>
            <select className="select" value={reason} onChange={e => setReason(e.target.value)}>
              <option value="contagem">Contagem física</option>
              <option value="quebra">Quebra / Perda</option>
              <option value="devolucao">Devolução de fornecedor</option>
              <option value="amostra">Uso para amostra</option>
              <option value="erro">Correção de erro de lançamento</option>
            </select>
          </div>
          {diff !== 0 && (
            <div className="row" style={{ marginTop: 14, padding: "10px 14px", background: diff > 0 ? "var(--ok-bg)" : "var(--err-bg)", color: diff > 0 ? "var(--ok)" : "var(--err)", borderRadius: 10, fontWeight: 700, fontSize: 13 }}>
              <span>{diff > 0 ? "Entrada" : "Saída"} de {Math.abs(diff)} un.</span>
              <span className="grow" />
              <span>Será sincronizado nos {product.mp.length} canais</span>
            </div>
          )}
        </div>
        <div className="modal-ft">
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => onSave(qty, reason)}>
            <I.Check size={14} /> Confirmar ajuste
          </button>
        </div>
      </div>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────── */
function ProductFormModal({ onClose, onSave, initial }) {
  const [form, setForm] = useState(initial || {
    sku: "", barcode: "", name: "", cat: "iscas",
    cost: "", price: "",
    stock: 0, min: 5,
    mp: ["loja"],
    desc: "",
    ativo: true,
  });
  const set = (k, v) => setForm(prev => ({ ...prev, [k]: v }));
  const toggleMp = (id) => setForm(prev => ({
    ...prev,
    mp: prev.mp.includes(id) ? prev.mp.filter(x => x !== id) : [...prev.mp, id],
  }));

  function save() {
    if (!form.name.trim() || !form.sku.trim()) return;
    const cost = parseFloat(String(form.cost).replace(",", ".")) || 0;
    const price = parseFloat(String(form.price).replace(",", ".")) || 0;
    const product = {
      id: "P" + (Math.floor(Math.random() * 900) + 100).toString(),
      sku: form.sku.trim().toUpperCase(),
      barcode: form.barcode || "0000000000000",
      name: form.name.trim(),
      cat: form.cat,
      cost, price,
      stock: parseInt(form.stock) || 0,
      min: parseInt(form.min) || 0,
      mp: form.mp,
    };
    onSave(product);
  }

  const margin = (() => {
    const cost = parseFloat(String(form.cost).replace(",", ".")) || 0;
    const price = parseFloat(String(form.price).replace(",", ".")) || 0;
    if (!cost || !price) return null;
    return Math.round(((price - cost) / price) * 100);
  })();

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal modal-lg" onClick={e => e.stopPropagation()}>
        <div className="modal-hd">
          <I.Box size={20} />
          <h3>Novo produto</h3>
          <span className="grow" />
          <span className="muted" style={{ fontSize: 11.5 }}>Será sincronizado nos canais marcados</span>
          <button className="btn btn-ghost btn-icon btn-sm" onClick={onClose}><I.X size={14} /></button>
        </div>
        <div className="modal-bd">
          <h4 style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 10 }}>Identificação</h4>
          <div className="form-grid">
            <div className="field col-2">
              <label>Nome do produto *</label>
              <input className="input" autoFocus value={form.name} onChange={e => set("name", e.target.value)} placeholder="Ex: Vara Pesca Brava 1.80m Ação Média" />
            </div>
            <div className="field">
              <label>SKU / Código interno *</label>
              <input className="input" value={form.sku} onChange={e => set("sku", e.target.value)} placeholder="VRA-FBR-301" style={{ fontFamily: "var(--font-mono)" }} />
            </div>
            <div className="field">
              <label>Código de barras (GTIN/EAN)</label>
              <input className="input" value={form.barcode} onChange={e => set("barcode", e.target.value)} placeholder="7891000000000" style={{ fontFamily: "var(--font-mono)" }} />
            </div>
            <div className="field">
              <label>Categoria *</label>
              <select className="select" value={form.cat} onChange={e => set("cat", e.target.value)}>
                {CATS.map(c => <option key={c.id} value={c.id}>{c.icon} {c.name}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Status</label>
              <div className="row" style={{ gap: 8, height: "var(--field-h)" }}>
                <label className="row" style={{ gap: 6, cursor: "default" }}>
                  <input type="checkbox" checked={form.ativo} onChange={e => set("ativo", e.target.checked)} style={{ accentColor: "var(--brand-orange)", width: 16, height: 16 }} />
                  <span style={{ fontSize: 13 }}>Produto ativo</span>
                </label>
              </div>
            </div>
          </div>

          <h4 style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginTop: 22, marginBottom: 10 }}>
            Preço e custo
          </h4>
          <div className="form-grid">
            <div className="field">
              <label>Custo de aquisição (R$)</label>
              <input className="input" value={form.cost} onChange={e => set("cost", e.target.value)} placeholder="0,00" />
            </div>
            <div className="field">
              <label>Preço de venda (R$)</label>
              <input className="input" value={form.price} onChange={e => set("price", e.target.value)} placeholder="0,00" />
            </div>
            {margin !== null && (
              <div className="col-2" style={{ background: "var(--brand-green-soft)", color: "var(--brand-green-deep)", padding: "10px 14px", borderRadius: 10, display: "flex", justifyContent: "space-between", alignItems: "center", fontWeight: 700, fontSize: 13 }}>
                <span>Margem de contribuição</span>
                <span style={{ fontSize: 18, fontFamily: "var(--font-display)" }}>{margin}%</span>
              </div>
            )}
          </div>

          <h4 style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginTop: 22, marginBottom: 10 }}>
            Estoque
          </h4>
          <div className="form-grid">
            <div className="field">
              <label>Estoque inicial</label>
              <input className="input" type="number" min="0" value={form.stock} onChange={e => set("stock", e.target.value)} />
            </div>
            <div className="field">
              <label>Estoque mínimo (alerta de reposição)</label>
              <input className="input" type="number" min="0" value={form.min} onChange={e => set("min", e.target.value)} />
            </div>
          </div>

          <h4 style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginTop: 22, marginBottom: 10 }}>
            Canais de venda
          </h4>
          <div className="mp-check-grid">
            {MARKETPLACES.map(mp => (
              <label key={mp.id} className={`mp-check ${form.mp.includes(mp.id) ? "on" : ""}`}>
                <input type="checkbox" checked={form.mp.includes(mp.id)} onChange={() => toggleMp(mp.id)} />
                <span className="swatch" style={{ background: mp.color }}></span>
                <b>{mp.name}</b>
                <span className="grow" />
                {!mp.connected && <span className="badge badge-err">Desconectado</span>}
              </label>
            ))}
          </div>
        </div>
        <div className="modal-ft">
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={save}>
            <I.Check size={14} /> Salvar e sincronizar
          </button>
        </div>
      </div>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────── */
function CategoryManagerModal({ onClose, onToast }) {
  const [cats, setCats] = useState(CATS);
  const [newName, setNewName] = useState("");
  const [newIcon, setNewIcon] = useState("🎣");
  const ICONS = ["🎣","🎏","⚙️","🧵","🪝","🧰","🛥️","🔩","🧢","🐟","⚓","🪣","🎒","🧥"];

  function add() {
    if (!newName.trim()) return;
    const id = newName.trim().toLowerCase().replace(/\s+/g, "_").replace(/[^a-z0-9_]/g, "").slice(0, 12);
    if (!id) return;
    const item = { id, name: newName.trim(), icon: newIcon };
    CATS.push(item);
    setCats([...CATS]);
    setNewName("");
    onToast({ msg: `Categoria "${item.name}" criada.`, kind: "ok" });
  }
  function remove(id) {
    const inUse = PRODUCTS.some(p => p.cat === id);
    if (inUse) { onToast({ msg: "Categoria em uso — desvincule os produtos primeiro.", kind: "err" }); return; }
    const idx = CATS.findIndex(c => c.id === id);
    if (idx >= 0) { CATS.splice(idx, 1); setCats([...CATS]); }
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-hd">
          <I.Tag size={18} />
          <h3>Categorias de produto</h3>
          <button className="btn btn-ghost btn-icon btn-sm" onClick={onClose}><I.X size={14} /></button>
        </div>
        <div className="modal-bd">
          <div style={{ marginBottom: 16, padding: 12, background: "var(--bg-sunk)", borderRadius: 10 }}>
            <h4 style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 8 }}>
              Nova categoria
            </h4>
            <div className="row" style={{ gap: 8 }}>
              <select className="select" style={{ width: 64, padding: "0 10px", fontSize: 18 }} value={newIcon} onChange={e => setNewIcon(e.target.value)}>
                {ICONS.map(i => <option key={i} value={i}>{i}</option>)}
              </select>
              <input className="input" placeholder="Nome (ex: Iscas Naturais)" value={newName} onChange={e => setNewName(e.target.value)} onKeyDown={e => e.key === "Enter" && add()} />
              <button className="btn btn-primary" onClick={add}><I.Plus size={13} /> Adicionar</button>
            </div>
          </div>

          <h4 style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 8 }}>
            Categorias cadastradas ({cats.length})
          </h4>
          <div className="list">
            {cats.map(c => {
              const count = PRODUCTS.filter(p => p.cat === c.id).length;
              return (
                <div key={c.id} className="list-row">
                  <span style={{ fontSize: 22 }}>{c.icon}</span>
                  <div className="grow">
                    <div style={{ fontWeight: 600 }}>{c.name}</div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{count} produtos vinculados · id: {c.id}</div>
                  </div>
                  <button className="btn btn-sm">Editar</button>
                  <button className="btn btn-sm btn-ghost" style={{ color: "var(--err)" }} onClick={() => remove(c.id)} disabled={count > 0}>
                    <I.Trash size={13} />
                  </button>
                </div>
              );
            })}
          </div>
        </div>
        <div className="modal-ft">
          <button className="btn btn-primary" onClick={onClose}>Concluir</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EstoqueScreen, ProductFormModal, CategoryManagerModal });