/* Saída rápida — VERSÃO DE TESTE (2026-08-20)
   Buscador simplificado pensado pra motorista/ajudante de baixo acesso a
   tecnologia: busca o produto → escolhe a posição certa (posição/tonalidade/
   quantidade) → confirma num mini-mapa (só leitura, sem arrastar nada) → se
   for piso, confirma a tonalidade com um toque. Depois disso entrega pro
   `SaidaWizard` que já existe (PIN → nº da nota → quantidade → resumo →
   registrar_saida_venda) — essa tela só acha o pallet certo, não duplica
   nada da escrita.

   Ainda não está atrelada a nenhum papel/navegação por padrão — é um botão
   extra no menu pra testar o fluxo antes de decidir se o motorista aterrissa
   aqui de cara (ver docs/STATUS.md). */

const { useState: useSRState, useMemo: useSRMemo } = React;

// Todos os pallets ativos de um produto, com a posição resolvida e se estão
// "travados" (embaixo de outro na pilha — mesma regra do NivelCard/
// DetalheSheet: só o topo da pilha, ou qualquer coisa no Rascunho, pode ser
// mexido). Ordena disponíveis primeiro, travados por último.
function candidatosSaidaRapida(db, prodId) {
  const list = [];
  Object.values(db.pallets).forEach((pal) => {
    if (pal.arquivado || pal.prod !== prodId) return;
    const pos = ESTQ.findPos(db, pal.id);
    if (!pos) return;
    let travado = false;
    if (!pos.rascunho) {
      const cell = db.galpoes[pos.gal].cells.find((c) => c.code === pos.code);
      travado = !!cell && pos.nivel !== cell.stack.length;
    }
    list.push({ pal, pos, travado });
  });
  list.sort((a, b) => {
    if (a.travado !== b.travado) return a.travado ? 1 : -1;
    if (!!a.pos.rascunho !== !!b.pos.rascunho) return a.pos.rascunho ? 1 : -1;
    if (a.pos.gal !== b.pos.gal) return a.pos.gal - b.pos.gal;
    return (a.pos.code || '').localeCompare(b.pos.code || '');
  });
  return list;
}

// Mini-mapa só de leitura: desenha o galpão em escala real (metros) a partir
// da mesma geometria que o Mapa completo usa (`layout`/`cells`, ambos com
// `rect` em metros — carregar_estoque já devolve isso pronto, sem precisar
// de outra chamada), com a posição escolhida destacada. Sem drag/zoom/toque
// nenhum — é só uma conferência visual antes de continuar.
function MiniMapaPosicao({ db, gal, code, galLabel }) {
  const g = db.galpoes[gal];
  if (!code) {
    return (
      <div className="sr-minimapa sr-minimapa-rasc">
        <EIcon name="inbox" size={26} />
        <span>Rascunho do {galLabel} — ainda sem posição fixa no mapa</span>
      </div>
    );
  }
  const cell = g.cells.find((c) => c.code === code);
  if (!cell) {
    return (
      <div className="sr-minimapa sr-minimapa-rasc">
        <EIcon name="alert" size={26} />
        <span>Posição {code} não encontrada no mapa atual</span>
      </div>
    );
  }
  const dims = g.dims;
  const pad = 1;
  const cx = cell.rect.x + cell.rect.w / 2, cy = cell.rect.y + cell.rect.h / 2;
  return (
    <div className="sr-minimapa">
      <svg viewBox={(-pad) + ' ' + (-pad) + ' ' + (dims.w + pad * 2) + ' ' + (dims.h + pad * 2)} preserveAspectRatio="xMidYMid meet">
        <rect x="0" y="0" width={dims.w} height={dims.h} className="sr-mm-galpao" />
        {g.layout.filter((z) => z.tipo !== 'pallet-row' && z.tipo !== 'note').map((z) => (
          <rect key={z.zonaId} x={z.rect.x} y={z.rect.y} width={z.rect.w} height={z.rect.h} className={'sr-mm-zona sr-mm-' + z.tipo} />
        ))}
        {g.cells.map((c) => (
          <rect key={c.id} x={c.rect.x} y={c.rect.y} width={c.rect.w} height={c.rect.h}
            className={'sr-mm-cell' + (c.code === code ? ' alvo' : '')} />
        ))}
        <circle className="sr-mm-pulse" cx={cx} cy={cy} r={Math.max(cell.rect.w, cell.rect.h) * 1.4} />
      </svg>
      <div className="sr-mm-label"><EIcon name="mapPin" size={16} /> {code} · {galLabel}</div>
    </div>
  );
}

function SaidaRapidaWizard({ db, apelidos, onEscolherPallet, onClose }) {
  const [passo, setPasso] = useSRState(1);
  const [busca, setBusca] = useSRState('');
  const [prodId, setProdId] = useSRState(null);
  const [palId, setPalId] = useSRState(null);
  const [tonOk, setTonOk] = useSRState(false);

  // useMemo essencial (não só otimização): sem isso, `todos`/`comEstoque`
  // (que chama ESTQ.findPos — varre TODAS as células de TODOS os galpões —
  // uma vez por pallet ativo) recalculavam em TODO render deste wizard,
  // inclusive tocando dígito no QtdPad do passo 3 (nada a ver com busca de
  // produto). Catálogo tem 1300+ produtos — mesmo padrão do bug já achado
  // e corrigido em Wizards.jsx/Cadastros.jsx/NovoProduto.jsx, 2026-09-02.
  const todos = useSRMemo(() => Object.assign({}, ESTQ.PRODUTOS, db.produtos), [db.produtos]);

  // Só produtos com pelo menos 1 pallet ativo posicionado — sem isso o
  // motorista escolheria um produto e cairia numa lista de posições vazia.
  const comEstoque = useSRMemo(() => {
    const set = new Set();
    Object.values(db.pallets).forEach((p) => { if (!p.arquivado && ESTQ.findPos(db, p.id)) set.add(p.prod); });
    return set;
  }, [db]);

  const q = busca.trim().toLowerCase();
  const produtos = useSRMemo(() => Object.values(todos).filter((p) =>
    !p.arquivado && comEstoque.has(p.id) &&
    (!q || (p.nome + ' ' + p.marca + ' ' + (p.codigo || '')).toLowerCase().includes(q))),
    [todos, comEstoque, q]);

  const prod = prodId ? todos[prodId] : null;
  const isMat = prod ? prod.cat === 'material' : false;
  // Mesmo padrão do bug de `todos`/`comEstoque` acima: candidatosSaidaRapida
  // chama findPos por pallet do produto — sem memo, recalculava em todo
  // render (inclusive o toggle `tonOk` do passo 3).
  const candidatos = useSRMemo(() => (prodId ? candidatosSaidaRapida(db, prodId) : []), [db, prodId]);
  const escolhido = palId ? candidatos.find((c) => c.pal.id === palId) : null;
  const galLabel = (g) => 'Galpão ' + g + (apelidos[g] ? ' · ' + apelidos[g] : '');

  function escolherProduto(id) { setProdId(id); setPalId(null); setTonOk(false); }
  function voltarBusca() { setPasso(1); setProdId(null); setPalId(null); setTonOk(false); }
  function voltarPosicao() { setPasso(2); setTonOk(false); }

  const precisaTon = !!(escolhido && !isMat);
  const podeFinalizar = !!escolhido && (!precisaTon || tonOk);

  return (
    <WizardShell titulo="Saída rápida" passo={passo} total={3} onCancelar={onClose}>
      {passo === 1 && (
        <div className="wz-col larga">
          <WzPergunta>Qual produto está saindo?</WzPergunta>
          <div className="prod-topo">
            <div className="prod-busca">
              <EIcon name="search" size={20} />
              {/* Sem autoFocus de propósito (pedido do Rogger, 2026-08-24): num
                  tablet, focar o campo assim que a tela abre já dispara o
                  teclado virtual sozinho, cobrindo metade da tela antes do
                  motorista/ajudante sequer decidir se vai digitar ou tocar
                  num produto da lista. */}
              <BuscaDebounced valor={busca} onChange={setBusca} placeholder="Nome, marca ou código" />
            </div>
          </div>
          <div className="prod-grid">
            {produtos.map((p) => (
              <button key={p.id} className={'prod-opt' + (prodId === p.id ? ' on' : '')} onClick={() => { escolherProduto(p.id); setPasso(2); }}>
                <span className="po-foto" style={{ background: p.cor, color: p.escuro ? '#fff' : 'var(--navy-900)' }}>
                  {p.cat === 'material' ? <EIcon name={iconeDeProduto(p)} size={22} /> : p.formato}
                </span>
                <span className="po-nome">{p.nome}</span>
                <span className="po-marca">{p.marca} · {p.cat === 'material' ? p.unidade : (p.m2cx.toFixed(2).replace('.', ',') + ' m²/cx')}</span>
                <span className={'po-cat ' + p.cat}>{p.cat === 'material' ? 'Material' : 'Piso'}</span>
                {p.codigo && <span className="po-cod">Cód {p.codigo}</span>}
              </button>
            ))}
            {!produtos.length && (
              <div className="sr-vazio">Nenhum produto com estoque ativo bate com essa busca.</div>
            )}
          </div>
          <WzContinuar disabled={!prodId} onClick={() => setPasso(2)} />
        </div>
      )}

      {passo === 2 && (
        <div className="wz-col larga">
          <WzPergunta>Qual posição bate com a nota?</WzPergunta>
          <div className="sr-pos-lista">
            {candidatos.map((c) => (
              <button key={c.pal.id} disabled={c.travado}
                className={'sr-pos-card' + (palId === c.pal.id ? ' on' : '') + (c.travado ? ' travado' : '')}
                onClick={() => { setPalId(c.pal.id); setPasso(3); }}>
                <div className="sr-pos-topo">
                  <span className="sr-pos-label">{c.pos.rascunho ? 'Rascunho · ' + galLabel(c.pos.gal) : c.pos.code + ' · ' + galLabel(c.pos.gal)}</span>
                  {c.travado && <span className="sr-pos-badge"><EIcon name="lock" size={12} /> Travado</span>}
                </div>
                <ProdSpecs pal={c.pal} />
                <QtdLinha pal={c.pal} />
                {c.travado && <div className="sr-pos-hint">Tem outro pallet em cima — peça pra liberar essa posição primeiro</div>}
              </button>
            ))}
            {!candidatos.length && (
              <div className="sr-vazio">Nenhuma posição encontrada para esse produto.</div>
            )}
          </div>
          <div className="sr-foot">
            <button className="btn-cancelar" onClick={voltarBusca}>Voltar</button>
            <WzContinuar disabled={!escolhido} onClick={() => setPasso(3)} />
          </div>
        </div>
      )}

      {passo === 3 && escolhido && (
        <div className="wz-col resumo">
          <WzPergunta>Confirme antes de continuar</WzPergunta>
          <div className="resumo-card">
            <div className="linha1">
              <Foto prod={prod} grande />
              <div className="info">
                <div className="prod-nome">{prod.nome}</div>
                <div className="prod-marca">{prod.marca}</div>
                <ProdSpecs pal={escolhido.pal} />
                <QtdLinha pal={escolhido.pal} />
              </div>
            </div>
          </div>
          <MiniMapaPosicao db={db} gal={escolhido.pos.gal} code={escolhido.pos.rascunho ? null : escolhido.pos.code} galLabel={galLabel(escolhido.pos.gal)} />
          {precisaTon && (
            <button className={'sr-ton-confirm' + (tonOk ? ' on' : '')} onClick={() => setTonOk(!tonOk)}>
              <span className="sr-ton-check">{tonOk && <EIcon name="check" size={18} strokeWidth={3} />}</span>
              Confirmo que a tonalidade <strong>{escolhido.pal.ton}</strong> bate com a nota
            </button>
          )}
          <div className="sr-foot">
            <button className="btn-cancelar" onClick={voltarPosicao}>Voltar</button>
            <button className="btn-wz-confirmar" style={{ width: 'auto' }} disabled={!podeFinalizar} onClick={() => onEscolherPallet(palId)}>
              <EIcon name="truck" size={20} /> Continuar pra saída
            </button>
          </div>
        </div>
      )}
    </WizardShell>
  );
}

Object.assign(window, { SaidaRapidaWizard });