/* global React, Icon, Button, Badge, Card, EmptyState, ModalCentral, brl, numBr,
          SearchableSelect, FText, FNum, FTextarea, FSelect,
          ESTOQUE_BLOQUEIOS, bloqueioDef, bloqueioLabel, estoqueMsgErro */

// ═══════════════════════════════════════════════════════════════════════════
//  ESTOQUE BLOQUEADO — bloquear, desbloquear, descartar
//
//  Produto que existe e está na prateleira, mas não pode ser vendido porque
//  falta um insumo (sem rótulo, sem tampa, sem válvula) ou porque o lote está
//  em outro estado (avaria, quarentena).
//
//  Toda escrita passa pelas funções `tm_estoque_*` do Postgres — nunca update
//  direto em `produtos`. É lá que mora o invariante (`estoque` nunca abaixo de
//  `estoque_bloqueado`) e é lá que o razão e o saldo mudam juntos. A tela só
//  pergunta, mostra o que vai acontecer, e traduz a recusa.
// ═══════════════════════════════════════════════════════════════════════════

const EB_ACOES = {
  bloquear:    { titulo: 'Bloquear estoque',    verbo: 'Bloquear',    tom: 'warning' },
  desbloquear: { titulo: 'Desbloquear estoque', verbo: 'Desbloquear', tom: 'success' },
  descartar:   { titulo: 'Descartar',           verbo: 'Descartar',   tom: 'danger'  },
};

// Helper de render no ESCOPO DO MÓDULO, não dentro do componente: declarado
// dentro, o React vê um tipo novo a cada render, desmonta a subárvore e o input
// perde o foco a cada tecla (já aconteceu no PedidoCompraForm).
function EBLinha({ label, children, hint }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontSize: 12, color: 'var(--tm-fg-3)', marginBottom: 6 }}>{label}</div>
      {children}
      {hint && <div style={{ fontSize: 11, color: 'var(--tm-fg-4)', marginTop: 4, lineHeight: 1.45 }}>{hint}</div>}
    </div>
  );
}

function EstoqueBloqueioForm({ acao, aberto, produtos, insumos, onClose, onFeito, onNav }) {
  const cfg = EB_ACOES[acao] || EB_ACOES.bloquear;
  const ehBloquear = acao === 'bloquear';

  // Em desbloquear/descartar, produto, motivo e insumo VÊM da linha aberta —
  // não são escolha. Escolher de novo abriria caminho pra desbloquear um
  // bloqueio que não existe, que a função recusaria de qualquer jeito.
  const [produtoId, setProdutoId] = React.useState(aberto ? aberto.produtoId : '');
  const [bloqueio,  setBloqueio]  = React.useState(aberto ? aberto.bloqueio  : '');
  const [insumoId,  setInsumoId]  = React.useState(aberto ? aberto.insumoId  : '');
  const [qtd, setQtd] = React.useState('');
  const [entrada, setEntrada] = React.useState(false);
  const [custoUn, setCustoUn] = React.useState('');
  const [obs, setObs] = React.useState('');
  const [consumirInsumo, setConsumir] = React.useState(true);

  const [ficha, setFicha]   = React.useState(null);   // null = ainda carregando
  const [consumo, setConsumo] = React.useState(null);
  const [erro, setErro]     = React.useState('');
  const [salvando, setSalvando] = React.useState(false);

  // criação de insumo sem sair do modal
  const [novoIns, setNovoIns] = React.useState(null);  // { nome, sku, custo }
  const [criando, setCriando] = React.useState(false);

  const prodSel = (produtos || []).find(p => p.id === produtoId) || null;
  const def     = bloqueioDef(bloqueio);
  const precisaInsumo = !!(def && def.insumo);
  const n = Math.round(numBr(qtd));

  // ── A ficha técnica do produto escolhido ────────────────────────────────
  React.useEffect(() => {
    let vivo = true;
    if (!produtoId || !window.tmSupabase) { setFicha([]); return; }
    setFicha(null);
    window.tmSupabase.from('ficha_tecnica_itens').select('insumo_id')
      .eq('produto_id', produtoId)
      .then(({ data }) => { if (vivo) setFicha((data || []).map(r => r.insumo_id)); });
    return () => { vivo = false; };
  }, [produtoId]);

  // ── Quanto de insumo sai ao desbloquear ─────────────────────────────────
  // Dependemos de valores ESTÁVEIS (ids e o número já convertido). Nada
  // derivado de relógio entra em array de dependência neste projeto.
  React.useEffect(() => {
    let vivo = true;
    if (acao !== 'desbloquear' || !insumoId || !consumirInsumo || n <= 0) { setConsumo(null); return; }
    window.tmDb.consumoAoDesbloquear(produtoId, insumoId, n)
      .then(r => { if (vivo) setConsumo(r); });
    return () => { vivo = false; };
  }, [acao, produtoId, insumoId, consumirInsumo, n]);

  // ── A cascata do seletor de insumo (nunca aparece vazio) ────────────────
  //   1. produto COM ficha técnica  → só os insumos dela
  //   2. produto SEM ficha          → todos os insumos, dizendo o que falta
  //   3. nenhum insumo cadastrado   → cria aqui mesmo, sem sair do modal
  const temFicha    = Array.isArray(ficha) && ficha.length > 0;
  const insumosTodos = insumos || [];
  const insumosOpts = (temFicha ? insumosTodos.filter(i => ficha.indexOf(i.id) >= 0) : insumosTodos)
    .map(i => ({ value: i.id, label: (i.sku || '—') + ' · ' + (i.name || i.nome || '') }));
  const semInsumoNenhum = insumosTodos.length === 0;

  const criarInsumo = async () => {
    const nome = (novoIns.nome || '').trim(), sku = (novoIns.sku || '').trim();
    if (!nome || !sku) { setErro('Insumo novo precisa de nome e SKU.'); return; }
    setCriando(true); setErro('');
    const { data, error } = await window.tmSupabase.from('produtos').insert({
      sku, nome, tipo: 'insumo', custo: numBr(novoIns.custo), estoque: 0,
      tem_variacoes: false, eh_kit: false, imagens: [], keywords: [], links: [],
    }).select('id, sku, nome').single();
    setCriando(false);
    if (error) { setErro('Não deu para criar o insumo: ' + (error.message || error)); return; }
    if (onFeito) onFeito({ silencioso: true });     // recarrega a lista de insumos
    setInsumoId(data.id);
    setNovoIns(null);
  };

  // ── O que impede de salvar, e POR QUÊ (o botão nunca some calado) ───────
  let impedimento = '';
  if (!produtoId) impedimento = 'Escolha o produto.';
  else if (prodSel && prodSel.temVariacoes) {
    impedimento = 'Este produto tem variações, e o bloqueio ainda não vale para variações — ' +
      'o saldo de venda delas fica em outra tabela, então bloquear aqui não impediria a venda.';
  }
  else if (!bloqueio) impedimento = 'Escolha o motivo.';
  else if (precisaInsumo && !insumoId) impedimento = 'Diga qual insumo está faltando.';
  else if (n <= 0) impedimento = 'Informe uma quantidade maior que zero.';
  else if (aberto && n > aberto.qtd) impedimento = `Há ${aberto.qtd} unidade(s) bloqueada(s) por "${bloqueioLabel(bloqueio)}".`;
  else if (ehBloquear && !entrada && prodSel && n > prodSel.vendavel) {
    impedimento = `${prodSel.sku} tem ${prodSel.vendavel} unidade(s) vendável(is). Não dá para bloquear o que não está lá.`;
  }

  const salvar = async () => {
    setSalvando(true); setErro('');
    const d = { produtoId, qtd: n, bloqueio, insumoId: precisaInsumo ? insumoId : null, obs: obs || null };
    let r;
    if (acao === 'bloquear')      r = await window.tmDb.bloquearEstoque({ ...d, entrada, custoUn: entrada ? custoUn : null });
    else if (acao === 'desbloquear') r = await window.tmDb.desbloquearEstoque({ ...d, consumirInsumo });
    else                          r = await window.tmDb.descartarEstoque(d);
    setSalvando(false);
    if (r && r.error) { setErro(estoqueMsgErro(r.error)); return; }
    if (onFeito) onFeito(r && r.data ? r.data : null);
    onClose();
  };

  // ── O que vai acontecer, em unidades e em dinheiro, ANTES de acontecer ──
  const custoRef = numBr(entrada && custoUn !== '' ? custoUn : (prodSel ? prodSel.custo : 0));
  let previa = '';
  if (!impedimento && prodSel) {
    if (acao === 'bloquear' && entrada) {
      previa = `Entram ${n} un no estoque de ${prodSel.sku} já bloqueadas — total ${prodSel.total} → ${prodSel.total + n}, ` +
        `vendável segue ${prodSel.vendavel}. Valor que entra: R$ ${brl(n * custoRef)}.`;
    } else if (acao === 'bloquear') {
      previa = `${n} un saem do vendável de ${prodSel.sku} (${prodSel.vendavel} → ${prodSel.vendavel - n}). ` +
        `O total na prateleira não muda: ${prodSel.total}. Elas continuam valendo R$ ${brl(n * custoRef)} e o balanço continua contando.`;
    } else if (acao === 'desbloquear') {
      previa = `${n} un voltam a ser vendáveis (${prodSel.vendavel} → ${prodSel.vendavel + n}). O total não muda: ${prodSel.total}.` +
        (consumo && consumirInsumo ? ` Saem ${consumo.precisa} un do insumo${consumo.semFicha ? ' (1 por 1 — este produto não tem ficha técnica)' : ''}.` : '');
    } else {
      previa = `${n} un saem da prateleira de vez: total ${prodSel.total} → ${prodSel.total - n}. ` +
        `Perda de R$ ${brl(n * custoRef)}. Isso não tem desfazer.`;
    }
  }

  return (
    <ModalCentral
      eyebrow="Estoque"
      title={cfg.titulo}
      subtitle={aberto ? `${aberto.sku} · ${bloqueioLabel(aberto.bloqueio)} · ${aberto.qtd} un bloqueada(s)` : null}
      width={620}
      onClose={onClose}
      footer={<>
        <Button variant="secondary" size="sm" onClick={onClose}>Cancelar</Button>
        <Button variant={acao === 'descartar' ? 'danger' : 'primary'} size="sm"
          disabled={!!impedimento || salvando}
          onClick={salvar}>
          {salvando ? 'Salvando…' : (cfg.verbo + (n > 0 && !impedimento ? ` ${n} un` : ''))}
        </Button>
        <span style={{ flex: 1 }} />
        {impedimento
          ? <span style={{ fontSize: 11.5, color: 'var(--tm-fg-4)', maxWidth: 380, lineHeight: 1.45 }}>{impedimento}</span>
          : <span style={{ fontSize: 11.5, color: 'var(--tm-fg-3)', maxWidth: 380, lineHeight: 1.45 }}>{previa}</span>}
      </>}
    >
      <div style={{ padding: '4px 20px 8px' }}>

        {ehBloquear && (
          <EBLinha label="Produto">
            <SearchableSelect value={produtoId} onChange={setProdutoId}
              placeholder="SKU ou nome do produto…"
              options={(produtos || []).map(p => ({ value: p.id, label: p.sku + ' · ' + p.name }))} />
          </EBLinha>
        )}

        {ehBloquear && (
          <EBLinha label="Motivo"
            hint={def ? def.ajuda : 'Os três primeiros dizem qual insumo falta. Avaria e quarentena são estado do lote e não apontam para insumo nenhum.'}>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
              {ESTOQUE_BLOQUEIOS.map(b => {
                const travado = b.insumo && semInsumoNenhum;
                const sel = bloqueio === b.id;
                return (
                  <button key={b.id} type="button" disabled={travado}
                    onClick={() => { setBloqueio(b.id); if (!b.insumo) setInsumoId(''); }}
                    title={travado ? 'Cadastre um insumo primeiro — este motivo precisa dizer qual falta' : b.ajuda}
                    style={{
                      padding: '6px 12px', fontSize: 12.5, borderRadius: 'var(--tm-radius-sm)',
                      cursor: travado ? 'not-allowed' : 'pointer', opacity: travado ? 0.45 : 1,
                      border: '1px solid ' + (sel ? 'var(--tm-warning)' : 'var(--tm-line-1)'),
                      background: sel ? 'color-mix(in srgb, var(--tm-warning) 14%, transparent)' : 'var(--tm-bg-3)',
                      color: sel ? 'var(--tm-fg-1)' : 'var(--tm-fg-3)', fontWeight: sel ? 600 : 400,
                    }}>
                    {b.label}
                  </button>
                );
              })}
            </div>
            {semInsumoNenhum && (
              <div style={{ fontSize: 11.5, color: 'var(--tm-warning)', marginTop: 7 }}>
                Sem rótulo, sem tampa e sem válvula estão desligados porque não há nenhum insumo
                cadastrado — eles precisam dizer <b>qual</b> falta. Escolha um deles depois de cadastrar,
                ou use avaria/quarentena, que não dependem de insumo.
              </div>
            )}
          </EBLinha>
        )}

        {precisaInsumo && (
          <EBLinha label="Qual insumo está faltando"
            hint={Array.isArray(ficha) && (temFicha
              ? 'Só os insumos da ficha técnica deste produto.'
              : 'Este produto ainda não tem ficha técnica, então a lista mostra todos os insumos. Escolher aqui já registra qual falta — o painel do que falta montar só funciona depois que a ficha existir.')}>
            <SearchableSelect value={insumoId} onChange={setInsumoId}
              placeholder="SKU ou nome do insumo…" options={insumosOpts}
              onCreateNew={(q) => setNovoIns({ nome: q || '', sku: '', custo: '' })}
              alwaysCreate createLabel="Cadastrar insumo novo" />

            {novoIns && (
              <div style={{ marginTop: 10, padding: '12px 14px', borderRadius: 8,
                background: 'var(--tm-bg-2)', border: '1px solid var(--tm-line-1)' }}>
                <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8 }}>Insumo novo</div>
                <div className="field-grid-3">
                  <FText label="Nome"  required value={novoIns.nome}  onChange={(v) => setNovoIns({ ...novoIns, nome: v })}  placeholder="Rótulo Detox Therapy" />
                  <FText label="SKU"   required value={novoIns.sku}   onChange={(v) => setNovoIns({ ...novoIns, sku: v })}   placeholder="INS-ROT-DTX" />
                  <FNum  label="Custo" suffix="R$" value={novoIns.custo} onChange={(v) => setNovoIns({ ...novoIns, custo: v })} />
                </div>
                <div style={{ display: 'flex', gap: 8, marginTop: 10, alignItems: 'center' }}>
                  <Button variant="primary" size="sm" onClick={criarInsumo} disabled={criando}>
                    {criando ? 'Criando…' : 'Criar insumo'}
                  </Button>
                  <Button variant="secondary" size="sm" onClick={() => setNovoIns(null)}>Cancelar</Button>
                  <span style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>
                    Entra com estoque zero. O resto do cadastro fica em Produtos › Insumos.
                  </span>
                </div>
              </div>
            )}
          </EBLinha>
        )}

        <EBLinha label="Quantidade"
          hint={aberto ? `Há ${aberto.qtd} unidade(s) bloqueada(s) neste motivo.`
                       : (prodSel ? `${prodSel.sku}: ${prodSel.vendavel} vendável(is) de ${prodSel.total} na prateleira.` : null)}>
          <input className="input" type="number" min="1" step="1" value={qtd}
            onChange={(e) => setQtd(e.target.value)} style={{ width: 160 }} />
        </EBLinha>

        {ehBloquear && (
          <EBLinha label="De onde vêm estas unidades">
            <div style={{ display: 'flex', gap: 8 }}>
              {[{ id: false, l: 'Já estão na prateleira', s: 'saem do vendável; o total não muda' },
                { id: true,  l: 'Chegaram agora',         s: 'entram no estoque já bloqueadas' }].map(o => (
                <button key={String(o.id)} type="button" onClick={() => setEntrada(o.id)}
                  style={{
                    flex: 1, textAlign: 'left', padding: '9px 12px', borderRadius: 'var(--tm-radius-sm)', cursor: 'pointer',
                    border: '1px solid ' + (entrada === o.id ? 'var(--tm-brand-champagne)' : 'var(--tm-line-1)'),
                    background: entrada === o.id ? 'color-mix(in srgb, var(--tm-brand-champagne) 10%, transparent)' : 'var(--tm-bg-3)',
                  }}>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--tm-fg-1)' }}>{o.l}</div>
                  <div style={{ fontSize: 11, color: 'var(--tm-fg-4)', marginTop: 2 }}>{o.s}</div>
                </button>
              ))}
            </div>
          </EBLinha>
        )}

        {ehBloquear && entrada && (
          <EBLinha label="Custo unitário" hint="Entra no valor do estoque. Em branco, usa o custo do cadastro.">
            <input className="input" type="number" min="0" step="0.01" value={custoUn}
              onChange={(e) => setCustoUn(e.target.value)} style={{ width: 160 }}
              placeholder={prodSel ? String(prodSel.custo || 0) : '0'} />
          </EBLinha>
        )}

        {acao === 'desbloquear' && insumoId && (
          <EBLinha label="O insumo">
            <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, cursor: 'pointer' }}>
              <input type="checkbox" checked={consumirInsumo} onChange={(e) => setConsumir(e.target.checked)} style={{ marginTop: 2 }} />
              <span>
                Baixar o insumo do estoque
                <div style={{ fontSize: 11, color: 'var(--tm-fg-4)', marginTop: 2 }}>
                  O rótulo foi colado, então some do estoque de insumo.
                  {consumo ? ` Vão sair ${consumo.precisa} un.` : ''}
                  {' '}Desmarque só se o insumo foi baixado por outro caminho.
                </div>
              </span>
            </label>
          </EBLinha>
        )}

        {acao === 'descartar' && (
          <div style={{ marginBottom: 14, padding: '11px 14px', borderRadius: 8,
            background: 'rgba(217,101,94,0.09)', border: '1px solid rgba(217,101,94,0.3)',
            fontSize: 12.5, color: 'var(--tm-fg-2)', lineHeight: 1.5 }}>
            <b>Descartar tira do total, não só do bloqueado.</b> É pra unidade que foi pro lixo —
            o vidro quebrou, o lote venceu. O estoque desce, o valor sai, e o balanço deixa de contar.
            Não tem desfazer: o conserto seria uma entrada nova.
          </div>
        )}

        <EBLinha label="Observação (opcional)">
          <input className="input" value={obs} onChange={(e) => setObs(e.target.value)}
            placeholder={ehBloquear ? 'Ex.: gráfica atrasou, previsão dia 12' : 'Ex.: rótulos chegaram hoje'} />
        </EBLinha>

        {erro && (
          <div style={{ marginTop: 4, padding: '10px 13px', borderRadius: 8,
            background: 'rgba(217,101,94,0.1)', border: '1px solid rgba(217,101,94,0.3)',
            fontSize: 12.5, color: '#F0C3C0', lineHeight: 1.5 }}>
            {erro}
          </div>
        )}
      </div>
    </ModalCentral>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
//  O cartão do bloqueado — vendável e bloqueado NUNCA somados
// ═══════════════════════════════════════════════════════════════════════════
function EstoqueBloqueadoCard({ produtos, onNav, recarregar }) {
  const [abertos, setAbertos] = React.useState([]);
  const [carregando, setCarregando] = React.useState(true);
  const [form, setForm] = React.useState(null);   // { acao, aberto }
  const [chave, setChave] = React.useState(0);    // identificador estável de recarga

  React.useEffect(() => {
    let vivo = true;
    setCarregando(true);
    window.tmDb.bloqueiosAbertos().then(r => { if (vivo) { setAbertos(r); setCarregando(false); } });
    return () => { vivo = false; };
  }, [chave]);

  const prodPorId = {};
  (produtos || []).forEach(p => { prodPorId[p.id] = p; });

  const feito = (res) => {
    setChave(k => k + 1);
    if (recarregar && !(res && res.silencioso)) recarregar();
    if (res && res.silencioso && recarregar) recarregar();
  };

  const totalUn    = abertos.reduce((a, g) => a + g.qtd, 0);
  const totalValor = abertos.reduce((a, g) => {
    const p = prodPorId[g.produtoId];
    return a + g.qtd * (Number(p && p.custo) || 0);
  }, 0);

  const diasDesde = (iso) => {
    if (!iso) return null;
    const d = Math.floor((Date.now() - new Date(iso).getTime()) / 86400000);
    return d >= 0 ? d : null;
  };

  const fechar = () => setForm(null);

  return (
    <>
      <Card
        title={totalUn > 0 ? `Bloqueado · ${totalUn} un · R$ ${brl(totalValor)}` : 'Estoque bloqueado'}
        action={<Button variant="secondary" size="sm" icon="lock"
          onClick={() => setForm({ acao: 'bloquear', aberto: null })}>Bloquear estoque</Button>}>

        {carregando ? (
          <div style={{ padding: '28px 0', textAlign: 'center', color: 'var(--tm-fg-3)', fontSize: 12.5 }}>Carregando…</div>
        ) : abertos.length === 0 ? (
          <div style={{ padding: '30px 20px', textAlign: 'center', color: 'var(--tm-fg-3)' }}>
            <Icon name="check-circle" size={30} style={{ opacity: 0.3, marginBottom: 10 }} />
            <div style={{ fontSize: 13, marginBottom: 4 }}>Nada bloqueado — tudo que está na prateleira pode ser vendido.</div>
            <div style={{ fontSize: 11.5, maxWidth: 560, margin: '0 auto', lineHeight: 1.5 }}>
              Bloqueie quando o produto existir mas não puder sair: sem rótulo, sem tampa, sem válvula,
              avaria ou quarentena. Ele continua valendo dinheiro e continua contando no balanço —
              só não é oferecido à venda.
            </div>
          </div>
        ) : (
          <table className="tbl">
            <thead><tr>
              <th>Produto</th>
              <th style={{ width: 130 }}>Trava</th>
              <th style={{ width: 100 }} className="num right">Bloqueado</th>
              <th style={{ width: 100 }} className="num right">Vendável</th>
              <th style={{ width: 132, whiteSpace: 'nowrap' }} className="num right">Custo parado</th>
              <th style={{ width: 96 }}>Desde</th>
              <th style={{ width: 190 }}></th>
            </tr></thead>
            <tbody>
              {abertos.map((g, i) => {
                const p = prodPorId[g.produtoId] || {};
                const dias = diasDesde(g.desde);
                return (
                  <tr key={i}>
                    <td>
                      <div style={{ color: 'var(--tm-fg-1)', fontWeight: 500 }}>{p.name || g.sku}</div>
                      <span className="ref-mono" style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>{g.sku}</span>
                    </td>
                    <td><Badge tone="warning">{bloqueioLabel(g.bloqueio)}</Badge></td>
                    <td className="num right" style={{ color: 'var(--tm-warning)', fontWeight: 600 }}>{g.qtd}</td>
                    {/* vendável e bloqueado em colunas separadas, NUNCA somados:
                        o mesmo SKU pode ter parte vendável e parte parada, e um
                        número só teria que mentir pra venda ou pro inventário */}
                    <td className="num right">{p.vendavel != null ? p.vendavel : '—'}</td>
                    <td className="num right" style={{ whiteSpace: 'nowrap' }}>R$ {brl(g.qtd * (Number(p.custo) || 0))}</td>
                    <td className="muted" style={{ fontSize: 11.5 }}>
                      {dias == null ? '—' : dias === 0 ? 'hoje' : `${dias} dia${dias > 1 ? 's' : ''}`}
                    </td>
                    <td>
                      <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                        <Button variant="secondary" size="sm"
                          onClick={() => setForm({ acao: 'desbloquear', aberto: g })}>Desbloquear</Button>
                        <Button variant="ghost" size="sm"
                          onClick={() => setForm({ acao: 'descartar', aberto: g })}>Descartar</Button>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </Card>

      {form && (
        <EstoqueBloqueioForm
          acao={form.acao} aberto={form.aberto}
          produtos={(produtos || []).filter(p => (p.tipo || 'venda') === 'venda')}
          insumos={(produtos || []).filter(p => p.tipo === 'insumo')}
          onClose={fechar} onFeito={feito} onNav={onNav} />
      )}
    </>
  );
}

Object.assign(window, { EstoqueBloqueioForm, EstoqueBloqueadoCard, EB_ACOES });