/* Wizards de tela cheia — Saída de venda e Entrada de mercadoria (gestor/escritório) */

const { useState: useWzState, useEffect: useWzEffect } = React;

function WizardShell({ titulo, passo, total, onCancelar, children, hidden }) {
  return (
    <div className="wizard" style={hidden ? { display: 'none' } : undefined} data-screen-label={titulo + ' ' + passo + '/' + total}>
      <div className="wz-head">
        <div className="wz-titulo">{titulo}</div>
        <div className="wz-prog">
          {Array.from({ length: total }).map((_, i) => (
            <span key={i} className={'wz-seg' + (i < passo ? ' on' : '')}></span>
          ))}
          <span className="wz-n">{passo}/{total}</span>
        </div>
        <button className="btn-cancelar" onClick={onCancelar}>Cancelar</button>
      </div>
      <div className="wz-body">{children}</div>
    </div>
  );
}

function WzPergunta({ children }) { return <h2 className="wz-pergunta">{children}</h2>; }

function WzContinuar({ disabled, onClick, children }) {
  return (
    <button className="btn-wz-continuar" disabled={disabled} onClick={onClick}>
      {children || 'Continuar'} <EIcon name="arrowRight" size={21} />
    </button>
  );
}

function OlaSplash({ nome }) {
  return (
    <div className="ola-splash">
      <div className="ola-txt">Olá, {nome.split(' ')[0]} 👋</div>
    </div>
  );
}

function ResumoCab({ prod, pal, lote, ton, bit, validade }) {
  const isMat = prod.cat === 'material';
  return (
    <div className="linha1">
      <Foto prod={prod} grande />
      <div className="info">
        <div className="prod-nome">{prod.nome}</div>
        <div className="prod-marca">{prod.marca}{isMat ? ' · ' + prod.unidade : ''}</div>
        <div className="specs">
          {isMat ? (
            <React.Fragment>
              {lote ? <span className="spec">Lote {lote}</span> : <span className="spec vazio">Sem lote</span>}
              {validade ? <ValChip iso={validade} /> : <span className="spec vazio">Sem validade</span>}
            </React.Fragment>
          ) : (
            <React.Fragment>
              <span className="spec">Lote {lote != null ? lote : pal.lote}</span>
              <span className="spec">Ton {ton != null ? ton : pal.ton}</span>
              <span className="spec">Bit {bit != null ? bit : pal.bitola}</span>
            </React.Fragment>
          )}
        </div>
      </div>
    </div>
  );
}

/* ===== Saída de venda — PIN → nº venda → quantas → resumo ===== */
function SaidaWizard({ db, palletId, origemLabel, online, sessaoInicial, onAutenticado, onConfirm, onClose }) {
  const pal = db.pallets[palletId];
  const prod = ESTQ.PRODUTOS[pal.prod];
  const isMat = prod.cat === 'material';
  const [passo, setPasso] = useWzState(sessaoInicial ? 2 : 1);
  const [operador, setOperador] = useWzState(sessaoInicial ? sessaoInicial.operador : null);
  const [pin, setPin] = useWzState(sessaoInicial ? sessaoInicial.pin : null);
  const [ola, setOla] = useWzState(false);
  const [venda, setVenda] = useWzState('');
  const [qtd, setQtd] = useWzState(String(pal.cx));
  const [erroConexao, setErroConexao] = useWzState(false);
  const [erroServidor, setErroServidor] = useWzState(null);
  const [enviando, setEnviando] = useWzState(false);
  const [sucesso, setSucesso] = useWzState(false);

  const n = parseInt(qtd || '0', 10);
  const zera = n === pal.cx;
  const loteDepois = isMat ? 0 : ESTQ.loteM2(db, pal) - n * prod.m2cx;
  const viraPonta = !isMat && loteDepois > 0 && loteDepois < prod.limitePonta && pal.status === 'normal';
  const vinfo = isMat ? ESTQ.validadeEstado(pal.validade) : null;

  function pinOk(op, p) { setOperador(op); setPin(p); onAutenticado && onAutenticado(op, p); setOla(true); setTimeout(() => { setOla(false); setPasso(2); }, 1000); }
  function confirmar() {
    if (!online) { setErroConexao(true); return; }
    setErroServidor(null); setEnviando(true);
    onConfirm({ operador, pin, venda, qtd: n })
      .then(() => { setEnviando(false); setSucesso(true); setTimeout(onClose, 1300); })
      .catch((e) => { setEnviando(false); setErroServidor(e.message); });
  }

  if (sucesso) {
    return (
      <div className="wizard" data-screen-label="Saída registrada">
        <div className="ola-splash">
          <div className="suc-circ"><EIcon name="check" size={54} strokeWidth={2.5} /></div>
          <div className="ola-txt" style={{ fontSize: 26 }}>Saída registrada — venda {venda}</div>
        </div>
      </div>
    );
  }

  return (
    <WizardShell titulo="Saída de venda" passo={passo} total={4} onCancelar={onClose}>
      {ola && <OlaSplash nome={operador.nome} />}

      {passo === 1 && !ola && (
        <div className="wz-col">
          <WzPergunta>Quem é você?</WzPergunta>
          <PinPad onValidado={pinOk} operadores={db.operadores} />
        </div>
      )}

      {passo === 2 && (
        <div className="wz-col">
          <WzPergunta>Número da venda</WzPergunta>
          <VendaPad value={venda} onChange={setVenda} />
          <WzContinuar disabled={!venda} onClick={() => setPasso(3)} />
        </div>
      )}

      {passo === 3 && (
        <div className="wz-col">
          <WzPergunta>{isMat ? 'Quantos ' + prod.un[1] + '?' : 'Quantas caixas?'}</WzPergunta>
          <QtdPad value={qtd} onChange={setQtd} max={pal.cx} m2cx={isMat ? null : prod.m2cx} unidade={isMat ? prod.un[1] : null} />
          <WzContinuar disabled={n < 1 || n > pal.cx} onClick={() => setPasso(4)} />
        </div>
      )}

      {passo === 4 && (
        <div className="wz-col resumo">
          <WzPergunta>Confira a saída</WzPergunta>
          <div className="resumo-card">
            <ResumoCab prod={prod} pal={pal} />
            <div className="resumo-grid">
              <div className="rg-item"><span className="rg-lbl">Saem</span><span className="rg-val">{n} {isMat ? prod.un[1] : 'cx'}{isMat ? '' : ' · ' + ESTQ.fmtNum(n * prod.m2cx) + ' m²'}</span></div>
              <div className="rg-item"><span className="rg-lbl">Venda nº</span><span className="rg-val">{venda}</span></div>
              <div className="rg-item"><span className="rg-lbl">Operador</span><span className="rg-val">{operador.nome.split(' ')[0]}</span></div>
              <div className="rg-item"><span className="rg-lbl">Posição</span><span className="rg-val">{origemLabel}</span></div>
            </div>
            {vinfo && vinfo.st === 'vencido' && (
              <div className="aviso-resumo erro"><EIcon name="alert" size={18} /> Atenção: material vencido em {ESTQ.fmtVal(pal.validade)}. A saída é permitida, mas confira com o cliente.</div>
            )}
            {vinfo && vinfo.st === 'breve' && (
              <div className="aviso-resumo ambar"><EIcon name="clock" size={18} /> Vence em {ESTQ.fmtVal(pal.validade)} — bom priorizar esta saída.</div>
            )}
            {zera && (
              <div className="aviso-resumo navy"><EIcon name="inbox" size={18} /> O pallet será removido do mapa e a posição {origemLabel} ficará livre</div>
            )}
            {viraPonta && (
              <div className="aviso-resumo ambar"><EIcon name="alert" size={18} /> Após esta saída, o lote fica com {ESTQ.fmtNum(loteDepois)} m² — vai aparecer como PONTA?</div>
            )}
            {erroConexao && (
              <div className="aviso-resumo erro"><EIcon name="wifiOff" size={18} /> Sem internet — a saída não foi registrada. Tente de novo quando voltar a conexão.</div>
            )}
            {erroServidor && (
              <div className="aviso-resumo erro"><EIcon name="alert" size={18} /> Não foi possível registrar: {erroServidor}</div>
            )}
          </div>
          <button className="btn-wz-confirmar" disabled={enviando} onClick={confirmar}>
            <EIcon name="check" size={22} /> {enviando ? 'Registrando…' : 'Confirmar saída'}
          </button>
        </div>
      )}
    </WizardShell>
  );
}

/* ===== Entrada de mercadoria — PIN → produto → lote(ramifica) → qtd → destino → resumo ===== */
function EntradaWizard({ db, online, hidden, pickedCell, papel, sessaoInicial, onAutenticado, onRequestPick, onConfirm, onCriarProduto, onClose }) {
  const [passo, setPasso] = useWzState(sessaoInicial ? 1 : 0);
  const [operador, setOperador] = useWzState(sessaoInicial ? sessaoInicial.operador : null);
  const [pin, setPin] = useWzState(sessaoInicial ? sessaoInicial.pin : null);
  const [ola, setOla] = useWzState(false);
  const [prodId, setProdId] = useWzState(null);
  const [busca, setBusca] = useWzState('');
  const [novoProd, setNovoProd] = useWzState(false);
  const [lote, setLote] = useWzState('');
  const [ton, setTon] = useWzState('');
  const [bit, setBit] = useWzState('');
  const [validade, setValidade] = useWzState('');
  const [semLote, setSemLote] = useWzState(false);
  const [semVal, setSemVal] = useWzState(false);
  const [qtd, setQtd] = useWzState('');
  const [destino, setDestino] = useWzState(null);
  const [rascPick, setRascPick] = useWzState(false);
  const [erroConexao, setErroConexao] = useWzState(false);
  const [erroServidor, setErroServidor] = useWzState(null);
  const [enviando, setEnviando] = useWzState(false);
  const [sucesso, setSucesso] = useWzState(false);

  useWzEffect(() => {
    if (pickedCell) { setDestino({ type: 'celula', code: pickedCell.code, celulaId: pickedCell.id, gal: pickedCell.gal }); setPasso(5); }
  }, [pickedCell]);

  const prod = prodId ? ESTQ.PRODUTOS[prodId] || db.produtos[prodId] : null;
  const isMat = prod ? prod.cat === 'material' : false;
  const n = parseInt(qtd || '0', 10);

  function recentes(campo) {
    if (!prodId) return [];
    const set = [];
    Object.values(db.pallets).forEach((p) => {
      if (p.prod === prodId && !p.arquivado && p[campo] && set.indexOf(p[campo]) < 0) set.push(p[campo]);
    });
    return set.slice(0, 4);
  }

  function pinOk(op, p) { setOperador(op); setPin(p); onAutenticado && onAutenticado(op, p); setOla(true); setTimeout(() => { setOla(false); setPasso(1); }, 1000); }
  function confirmar() {
    if (!online) { setErroConexao(true); return; }
    setErroServidor(null); setEnviando(true);
    onConfirm({ operador, pin, prodId, lote: semLote ? '' : lote, ton, bitola: bit, validade: semVal ? '' : validade, qtd: n, destino })
      .then(() => { setEnviando(false); setSucesso(true); })
      .catch((e) => { setEnviando(false); setErroServidor(e.message); });
  }
  function repetirUltimo() {
    setQtd(''); setDestino(null); setRascPick(false); setErroConexao(false); setErroServidor(null); setSucesso(false);
    setPasso(3);
  }
  function escolherProd(id) {
    setProdId(id); setLote(''); setTon(''); setBit(''); setValidade(''); setSemLote(false); setSemVal(false);
  }
  function loteOk() {
    if (isMat) return true; // lote/validade opcionais
    return lote && ton && bit;
  }

  const todos = Object.assign({}, ESTQ.PRODUTOS, db.produtos);
  const produtos = Object.values(todos).filter((p) =>
    !p.arquivado && (!busca || (p.nome + ' ' + p.marca + ' ' + (p.codigo || '')).toLowerCase().includes(busca.toLowerCase())));

  if (sucesso) {
    return (
      <div className="wizard" data-screen-label="Entrada registrada">
        <div className="ola-splash">
          <div className="suc-circ"><EIcon name="check" size={54} strokeWidth={2.5} /></div>
          <div className="ola-txt" style={{ fontSize: 26 }}>Entrada registrada — {n} {isMat ? prod.un[1] : 'cx'} de {prod.curto}</div>
          <div className="suc-acoes">
            <button className="btn-wz-confirmar" style={{ width: 'auto' }} onClick={repetirUltimo}>
              <EIcon name="repeat" size={21} /> Repetir último
            </button>
            <button className="btn-cancelar" onClick={onClose}>Fechar</button>
          </div>
          <div className="suc-hint">Repetir mantém {prod.curto}{lote && !semLote ? ' · Lote ' + lote : ''} — só quantidade e posição</div>
        </div>
      </div>
    );
  }

  return (
    <WizardShell titulo="Entrada de mercadoria" passo={passo} total={5} onCancelar={onClose} hidden={hidden}>
      {ola && <OlaSplash nome={operador.nome} />}

      {passo === 0 && !ola && (
        <div className="wz-col">
          <WzPergunta>Quem está registrando a entrada?</WzPergunta>
          <PinPad onValidado={pinOk} permite={(op) => op.papel === 'gestor' || op.papel === 'escritorio' || op.papel === 'estoquista'} acaoLabel="registrar entrada" operadores={db.operadores} />
        </div>
      )}

      {passo === 1 && (
        <div className="wz-col larga">
          <WzPergunta>Qual produto?</WzPergunta>
          <div className="prod-topo">
            <div className="prod-busca">
              <EIcon name="search" size={20} />
              <input value={busca} onChange={(e) => setBusca(e.target.value)} placeholder="Buscar por nome, marca ou código" />
            </div>
            <button className="btn-novo-prod" onClick={() => setNovoProd(true)}>
              <EIcon name="plus" size={19} strokeWidth={2.2} /> Novo produto
            </button>
          </div>
          <div className="prod-grid">
            {produtos.map((p) => (
              <button key={p.id} className={'prod-opt' + (prodId === p.id ? ' on' : '')} onClick={() => escolherProd(p.id)}>
                <span className="po-foto" style={{ background: p.cor, color: p.escuro ? '#fff' : 'var(--navy-900)' }}>
                  {p.cat === 'material' ? <EIcon name={p.id === 'cimento' ? 'brick' : 'tools'} 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>
            ))}
          </div>
          <WzContinuar disabled={!prodId} onClick={() => setPasso(2)} />
        </div>
      )}

      {passo === 2 && isMat && (
        <div className="wz-col larga">
          <WzPergunta>Lote e validade</WzPergunta>
          <div className="lote-campos dois">
            <div className="lote-campo">
              <label>Lote <span className="op">opcional</span></label>
              <div className="chips-recentes">
                {recentes('lote').map((v) => (
                  <button key={v} className={'chip-rec' + (lote === v && !semLote ? ' on' : '')} onClick={() => { setLote(v); setSemLote(false); }}>{v}</button>
                ))}
              </div>
              <input value={semLote ? '' : lote} disabled={semLote} onChange={(e) => setLote(e.target.value.toUpperCase())} placeholder="Novo valor…" />
              <button className={'btn-pular' + (semLote ? ' on' : '')} onClick={() => { setSemLote(!semLote); setLote(''); }}>
                <EIcon name={semLote ? 'check' : 'ban'} size={16} /> Sem lote
              </button>
            </div>
            <div className="lote-campo">
              <label>Validade <span className="op">opcional</span></label>
              <input type="date" value={semVal ? '' : validade} disabled={semVal} onChange={(e) => setValidade(e.target.value)} className="np-date" />
              <button className={'btn-pular' + (semVal ? ' on' : '')} onClick={() => { setSemVal(!semVal); setValidade(''); }}>
                <EIcon name={semVal ? 'check' : 'ban'} size={16} /> Sem validade
              </button>
            </div>
          </div>
          <WzContinuar onClick={() => setPasso(3)} />
        </div>
      )}

      {passo === 2 && !isMat && (
        <div className="wz-col larga">
          <WzPergunta>Lote, tonalidade e bitola</WzPergunta>
          <div className="lote-campos">
            {[{ lbl: 'Lote', val: lote, set: setLote, campo: 'lote' }, { lbl: 'Tonalidade', val: ton, set: setTon, campo: 'ton' }, { lbl: 'Bitola', val: bit, set: setBit, campo: 'bitola' }].map((c) => (
              <div className="lote-campo" key={c.campo}>
                <label>{c.lbl}</label>
                <div className="chips-recentes">
                  {recentes(c.campo).map((v) => (
                    <button key={v} className={'chip-rec' + (c.val === v ? ' on' : '')} onClick={() => c.set(v)}>{v}</button>
                  ))}
                </div>
                <input value={c.val} onChange={(e) => c.set(e.target.value.toUpperCase())} placeholder="Novo valor…" />
              </div>
            ))}
          </div>
          <WzContinuar disabled={!loteOk()} onClick={() => setPasso(3)} />
        </div>
      )}

      {passo === 3 && (
        <div className="wz-col">
          <WzPergunta>{isMat ? 'Quantos ' + prod.un[1] + '?' : 'Quantas caixas?'}</WzPergunta>
          <QtdPad value={qtd} onChange={setQtd} max={999} m2cx={isMat ? null : prod.m2cx} unidade={isMat ? prod.un[1] : null} />
          <WzContinuar disabled={n < 1} onClick={() => setPasso(4)} />
        </div>
      )}

      {passo === 4 && (
        <div className="wz-col larga">
          <WzPergunta>Onde vai ficar?</WzPergunta>
          <div className="destino-alvos">
            <button className="alvo destino" onClick={() => onRequestPick({ prodId, qtd: n })}>
              <EIcon name="mapPin" size={36} style={{ color: 'var(--navy-900)' }} />
              <span className="lbl">Escolher posição no mapa</span>
            </button>
            <button className="alvo destino rasc" onClick={() => setRascPick(!rascPick)}>
              <EIcon name="inbox" size={36} style={{ color: 'var(--gray-700)' }} />
              <span className="lbl">Rascunho do galpão…</span>
            </button>
          </div>
          {rascPick && (
            <div className="destino-rasc-g">
              {Object.keys(db.galpoes).map(Number).sort((a, b) => a - b).map((g) => (
                <button key={g} className="alvo" onClick={() => { setDestino({ type: 'rascunho', gal: g }); setPasso(5); }}>
                  <span className="big">G{g}</span>
                  <span className="lbl">{db.galpoes[g].rascunho.length} no rascunho</span>
                </button>
              ))}
            </div>
          )}
        </div>
      )}

      {passo === 5 && destino && (
        <div className="wz-col resumo">
          <WzPergunta>Confira a entrada</WzPergunta>
          <div className="resumo-card">
            <ResumoCab prod={prod} lote={semLote ? '' : lote} ton={ton} bit={bit} validade={semVal ? '' : validade} />
            <div className="resumo-grid">
              <div className="rg-item"><span className="rg-lbl">Entram</span><span className="rg-val">{n} {isMat ? prod.un[1] : 'cx'}{isMat ? '' : ' · ' + ESTQ.fmtNum(n * prod.m2cx) + ' m²'}</span></div>
              <div className="rg-item"><span className="rg-lbl">Destino</span><span className="rg-val">{destino.type === 'celula' ? destino.code : 'Rascunho do G' + destino.gal}</span></div>
              <div className="rg-item"><span className="rg-lbl">Operador</span><span className="rg-val">{operador.nome.split(' ')[0]}</span></div>
            </div>
            {erroConexao && (
              <div className="aviso-resumo erro"><EIcon name="wifiOff" size={18} /> Sem internet — a entrada não foi registrada. Tente de novo quando voltar a conexão.</div>
            )}
            {erroServidor && (
              <div className="aviso-resumo erro"><EIcon name="alert" size={18} /> Não foi possível registrar: {erroServidor}</div>
            )}
          </div>
          <button className="btn-wz-confirmar" disabled={enviando} onClick={confirmar}>
            <EIcon name="check" size={22} /> {enviando ? 'Registrando…' : 'Confirmar entrada'}
          </button>
        </div>
      )}

      {novoProd && (
        <NovoProdutoSheet
          onCancelar={() => setNovoProd(false)}
          onSalvar={(p) => onCriarProduto(p, pin).then((novoId) => { setNovoProd(false); escolherProd(novoId || p.id); })}
        />
      )}
    </WizardShell>
  );
}

Object.assign(window, { SaidaWizard, EntradaWizard, WizardShell, WzPergunta, WzContinuar, OlaSplash });