/* Card da Pilha (LIFO) · Detalhe do Pallet/Lote · seletor Mover · sub-guia Rascunho
   + componentes compartilhados (Foto, ProdSpecs, ValChip) reusados na Tabela/Wizards */

/* Miniatura do produto: piso mostra formato; material mostra ícone */
function Foto({ prod, grande }) {
  const isMat = prod.cat === 'material';
  return (
    <div className={'foto' + (grande ? ' grande' : '')}
      style={{ background: prod.cor, color: prod.escuro ? '#fff' : 'var(--navy-900)' }}>
      {isMat ? <EIcon name={prod.id === 'cimento' ? 'brick' : 'tools'} size={grande ? 30 : 24} /> : prod.formato}
    </div>
  );
}

/* Chip de validade colorido por estado */
function ValChip({ iso }) {
  const e = ESTQ.validadeEstado(iso);
  if (iso && e && e.st === 'vencido') return <span className="spec val venc">Vencido {ESTQ.fmtVal(iso)}</span>;
  if (iso && e && e.st === 'breve') return <span className="spec val breve">Vence {ESTQ.fmtVal(iso)}</span>;
  if (iso) return <span className="spec val">Val {ESTQ.fmtVal(iso)}</span>;
  return null;
}

/* Specs (chips) — piso: Lote/Ton/Bit · material: Lote?/Validade? · + Cód opcional */
function ProdSpecs({ pal, extra, codigo }) {
  const isMat = ESTQ.isMat(pal);
  return (
    <div className="specs">
      {codigo ? <span className="spec cod">Cód {codigo}</span> : null}
      {isMat ? (
        <React.Fragment>
          {pal.lote ? <span className="spec">Lote {pal.lote}</span> : <span className="spec vazio">Sem lote</span>}
          <ValChip iso={pal.validade} />
          {!pal.validade && <span className="spec vazio">Sem validade</span>}
        </React.Fragment>
      ) : (
        <React.Fragment>
          <span className="spec">Lote {pal.lote}</span>
          <span className="spec">Ton {pal.ton}</span>
          <span className="spec">Bit {pal.bitola}</span>
        </React.Fragment>
      )}
      {extra}
    </div>
  );
}

function QtdLinha({ pal }) {
  const m2 = ESTQ.palletM2(pal);
  return <div className="qtd">{ESTQ.qtdLabel(pal)}{m2 ? ' · ' + m2 : ''}</div>;
}

function NivelCard({ db, pal, nivel, isTop, papel, online, onMover, onSaida, onConfirmarPonta, onReverterPonta, onAjustar, onDetalhe }) {
  const prod = ESTQ.PRODUTOS[pal.prod] || (db.produtos && db.produtos[pal.prod]);
  const isSug = pal.status === 'ponta_sugerida';
  const isConf = pal.status === 'ponta';
  const lote_m2 = ESTQ.loteM2(db, pal);
  const vinfo = ESTQ.isMat(pal) ? ESTQ.validadeEstado(pal.validade) : null;
  // permissão = papel (esconde) · conexão = online (desabilita)
  const roleMove = papel === 'gestor' || papel === 'estoquista';
  const roleManage = papel === 'gestor';
  const roleAdjust = papel === 'gestor' || papel === 'escritorio';

  return (
    <div>
      <div className="nivel-tag">
        Nível {nivel}
        {isTop && <span className="topo-flag">TOPO</span>}
      </div>
      <div className={'nivel-card' + (isTop ? '' : ' travado')}>
        <div className="linha1 tocavel" onClick={onDetalhe} role="button">
          <Foto prod={prod} />
          <div className="info">
            <div className="prod-nome">{prod.nome}</div>
            <div className="prod-marca">{prod.marca}</div>
            <ProdSpecs pal={pal} />
            <QtdLinha pal={pal} />
          </div>
          <span className="chev"><EIcon name="chevR" size={20} /></span>
        </div>

        {isTop ? (
          <React.Fragment>
            <div className="nivel-acoes">
              {roleMove && (
                <button className="btn-acao mover" disabled={!online} onClick={onMover}>
                  <EIcon name="move" size={20} /> Mover
                </button>
              )}
              <button className="btn-acao saida" disabled={!online} onClick={onSaida}>
                <EIcon name="truck" size={20} /> Saída venda
              </button>
            </div>
            {roleAdjust && (
              <button className="btn-acao-sec" disabled={!online} onClick={onAjustar}>
                <EIcon name="sliders" size={18} /> Ajustar contagem
              </button>
            )}
          </React.Fragment>
        ) : (
          <div className="lifo-hint">
            <EIcon name="lock" size={16} />
            Para mover, despeje os pallets de cima no Rascunho
          </div>
        )}

        {vinfo && vinfo.st === 'vencido' && (
          <div className="mat-aviso venc">
            <EIcon name="alert" size={16} /> Vencido em {ESTQ.fmtVal(pal.validade)} — confira antes de vender
          </div>
        )}
        {vinfo && vinfo.st === 'breve' && (
          <div className="mat-aviso breve">
            <EIcon name="clock" size={16} /> Vence em {ESTQ.fmtVal(pal.validade)} — priorize a saída
          </div>
        )}

        {isSug && (
          <div className="ponta-alert">
            <div className="t"><EIcon name="alert" size={18} /> Sugestão de ponta</div>
            <div className="d">
              Restam <strong>{ESTQ.fmtNum(lote_m2)} m²</strong> do lote {pal.lote} — abaixo do
              limite de {prod.limitePonta} m². {roleManage ? 'Confirmar muda o preço para 50%.' : 'O preço de ponta é confirmado pelo gestor.'}
            </div>
            {roleManage && (
              <button className="btn-conf-ponta" disabled={!online} onClick={onConfirmarPonta}>
                Confirmar ponta
              </button>
            )}
          </div>
        )}

        {isConf && (
          <div className="ponta-conf-tag">
            <EIcon name="check" size={17} /> Ponta confirmada — preço 50%
            {roleManage && (
              <button className="btn-desfazer-ponta" disabled={!online} onClick={onReverterPonta}>
                <EIcon name="undo" size={16} /> Desfazer
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function PilhaSheet({ db, gal, cellCode, online, papel, onClose, onMover, onSaida, onConfirmarPonta, onReverterPonta, onAjustar, onDetalhe }) {
  const cell = db.galpoes[gal].cells.find((c) => c.code === cellCode);
  if (!cell) return null;
  const stack = cell.stack;

  const niveis = [];
  for (let n = 4; n >= 1; n--) {
    const id = stack[n - 1];
    niveis.push({ nivel: n, pal: id ? db.pallets[id] : null });
  }
  const firstShown = Math.min(stack.length + 1, 4);

  return (
    <div className="scrim" onClick={onClose}>
      <div className="pilha-sheet" data-screen-label={'Pilha ' + cellCode} onClick={(e) => e.stopPropagation()}>
        <div className="pilha-head">
          <div>
            <div className="pos">{cellCode}</div>
            <div className="meta">{stack.length} de 4 níveis ocupados{cell.tipo === 'pontas' ? ' · Rua de pontas' : ''}</div>
          </div>
          <button className="btn-fechar-sheet" onClick={onClose}>
            <EIcon name="x" size={19} /> Fechar
          </button>
        </div>
        <div className="pilha-body">
          {niveis.filter((n) => n.nivel <= firstShown).map((n) =>
            n.pal ? (
              <NivelCard
                key={n.nivel}
                db={db} pal={n.pal} nivel={n.nivel}
                isTop={n.nivel === stack.length}
                papel={papel} online={online}
                onMover={() => onMover(n.pal.id)}
                onSaida={() => onSaida(n.pal.id)}
                onConfirmarPonta={() => onConfirmarPonta(n.pal.id)}
                onReverterPonta={() => onReverterPonta(n.pal.id)}
                onAjustar={() => onAjustar(n.pal.id)}
                onDetalhe={() => onDetalhe(n.pal.id)}
              />
            ) : (
              <div key={n.nivel}>
                <div className="nivel-tag">Nível {n.nivel}</div>
                <div className="nivel-livre">Nível livre</div>
              </div>
            )
          )}
        </div>
      </div>
    </div>
  );
}

/* ===== Detalhe do Pallet/Lote — somente leitura ===== */
const MOV_ICON = { entrada: 'inbox', movimentacao: 'move', saida_venda: 'truck', ajuste: 'sliders', marcacao_ponta: 'alert' };

function movDesc(m) {
  if (m.tipo === 'saida_venda') return 'Saída venda nº ' + m.venda + ' · ' + m.cx + ' un';
  if (m.tipo === 'movimentacao') return 'Movido ' + m.de + ' → ' + m.para;
  if (m.tipo === 'entrada') return 'Entrada no estoque';
  if (m.tipo === 'ajuste') return 'Ajuste de contagem' + (m.delta != null ? ' (' + (m.delta > 0 ? '+' : '') + m.delta + ')' : '') + (m.motivo ? ' · ' + m.motivo : '');
  return 'Marcação de ponta';
}

function posLabelDe(pp) {
  if (!pp) return 'Arquivado';
  return pp.rascunho ? 'Rascunho do G' + pp.gal : pp.code + ' · Nível ' + pp.nivel;
}

function DetalheSheet({ db, palletId, onVoltar, onFechar, onIrPara, onVerTudo }) {
  const { useState } = React;
  const [expandido, setExpandido] = useState(false);
  const pal = db.pallets[palletId];
  if (!pal) return null;
  const prod = ESTQ.PRODUTOS[pal.prod];
  const isMat = prod.cat === 'material';
  const pos = ESTQ.findPos(db, palletId);

  const lote = ESTQ.lotePallets(db, pal);
  const loteCx = lote.reduce((s, p) => s + p.cx, 0);
  const loteM2 = ESTQ.loteM2(db, pal);
  const abaixo = !isMat && loteM2 < prod.limitePonta && pal.status !== 'ponta';
  const vinfo = isMat ? ESTQ.validadeEstado(pal.validade) : null;
  const movs = (db.movs[palletId] || [{ tipo: 'entrada', quem: ESTQ.defaultOperador(pal), quando: pal.entradaEm }]).slice(0, 5);

  // Agrupar posições do lote por galpão; limitar a 5 + ver mais
  const comPos = lote.map((p) => ({ p, pp: ESTQ.findPos(db, p.id) }));
  const LIM = 5;
  const visiveis = expandido ? comPos : comPos.slice(0, LIM);
  const ocultos = comPos.length - visiveis.length;
  const grupos = {};
  visiveis.forEach((x) => { const g = x.pp ? x.pp.gal : 0; (grupos[g] = grupos[g] || []).push(x); });

  return (
    <div className="scrim" onClick={onFechar}>
      <div className="pilha-sheet wide" data-screen-label={'Detalhe ' + prod.nome} onClick={(e) => e.stopPropagation()}>
        <div className="pilha-head">
          <button className="btn-voltar" onClick={onVoltar}><EIcon name="chevL" size={22} /></button>
          <div>
            <div className="pos" style={{ fontSize: 20 }}>Detalhe do pallet</div>
            <div className="meta">Consulta — nenhuma ação altera o estoque aqui</div>
          </div>
          <button className="btn-fechar-sheet" onClick={onFechar}>
            <EIcon name="x" size={19} /> Fechar
          </button>
        </div>
        <div className="pilha-body">

          {/* 1 · Cabeçalho do pallet */}
          <div className="nivel-card det-head">
            <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>
                <ProdSpecs pal={pal} codigo={prod.codigo} />
                <QtdLinha pal={pal} />
              </div>
            </div>
            <div className="det-meta">
              <span className="det-meta-item"><EIcon name="mapPin" size={16} /> {posLabelDe(pos)}</span>
              <span className="det-meta-item"><EIcon name="inbox" size={16} /> Entrou em {pal.entradaEm}</span>
              <span className="det-meta-item cat"><EIcon name={isMat ? 'tools' : 'brick'} size={16} /> {isMat ? 'Material' : 'Piso'}</span>
            </div>
          </div>

          {/* 2 · Este lote na loja */}
          {pal.lote && (
            <React.Fragment>
              <div className="det-sec">Este lote na loja</div>
              <div className="nivel-card">
                <div className="lote-total">
                  <strong>{loteCx} {isMat ? (prod.un[1]) : 'caixas'}{!isMat ? ' · ' + ESTQ.fmtNum(loteM2) + ' m²' : ''}</strong> em {comPos.length} {comPos.length === 1 ? 'posição' : 'posições'}
                </div>
                {Object.keys(grupos).sort().map((g) => (
                  <div className="lote-grupo" key={g}>
                    <div className="lote-grupo-h">{g === '0' ? 'Arquivado' : 'Galpão ' + g}</div>
                    <div className="lote-posicoes">
                      {grupos[g].map(({ p, pp }) => {
                        const isEste = p.id === palletId;
                        return (
                          <button key={p.id}
                            className={'lote-pos' + (isEste ? ' este' : '')}
                            disabled={isEste || !pp || pp.rascunho}
                            onClick={() => pp && !pp.rascunho && onIrPara(pp)}>
                            <span className="lp-code">{pp ? (pp.rascunho ? 'Rascunho · ' + ESTQ.fmtIdade(p.rascHoras || 0) : pp.code + ' · N' + pp.nivel) : '—'}</span>
                            <span className="lp-cx">{ESTQ.qtdCurto(p)}</span>
                            {isEste ? <span className="lp-este">este pallet</span> : (pp && !pp.rascunho && <EIcon name="chevR" size={17} />)}
                          </button>
                        );
                      })}
                    </div>
                  </div>
                ))}
                {ocultos > 0 && (
                  <button className="ver-mais" onClick={() => setExpandido(true)}>
                    <EIcon name="chevR" size={16} style={{ transform: 'rotate(90deg)' }} /> ver mais ({ocultos})
                  </button>
                )}

                {abaixo && (
                  <div className="ponta-alert" style={{ marginTop: 12 }}>
                    <div className="t"><EIcon name="alert" size={18} /> Sugestão de ponta</div>
                    <div className="d">Restam <strong>{ESTQ.fmtNum(loteM2)} m²</strong> do lote {pal.lote} — abaixo do limite de {prod.limitePonta} m².</div>
                  </div>
                )}
                {pal.status === 'ponta' && (
                  <div className="ponta-conf-tag" style={{ marginTop: 12 }}>
                    <EIcon name="check" size={17} /> Ponta confirmada — preço 50%
                  </div>
                )}
                {vinfo && vinfo.st === 'vencido' && (
                  <div className="ponta-alert venc" style={{ marginTop: 12 }}>
                    <div className="t"><EIcon name="alert" size={18} /> Material vencido</div>
                    <div className="d">Venceu em {ESTQ.fmtVal(pal.validade)}. O sistema avisa, mas não impede a saída — confira com o cliente antes de vender.</div>
                  </div>
                )}
                {vinfo && vinfo.st === 'breve' && (
                  <div className="ponta-alert breve" style={{ marginTop: 12 }}>
                    <div className="t"><EIcon name="clock" size={18} /> Vence em breve</div>
                    <div className="d">Validade {ESTQ.fmtVal(pal.validade)} (em {vinfo.dias} dias). Priorize a saída deste lote para não perder o material.</div>
                  </div>
                )}
              </div>
            </React.Fragment>
          )}

          {/* 3 · Últimas movimentações */}
          <div className="det-sec">
            Últimas movimentações
            <button className="ver-tudo" onClick={() => onVerTudo && onVerTudo(palletId)}>Ver tudo</button>
          </div>
          <div className="nivel-card movs">
            {movs.map((m, i) => (
              <div className="mov-row" key={i}>
                <span className={'mov-ic ' + m.tipo}><EIcon name={MOV_ICON[m.tipo]} size={17} /></span>
                <span className="mov-desc">{movDesc(m)}</span>
                <span className="mov-meta">{m.quem} · {m.quando}{m.hora ? ' ' + m.hora : ''}</span>
              </div>
            ))}
          </div>

        </div>
      </div>
    </div>
  );
}

/* ===== Seletor "Para onde?" do fluxo Mover ===== */
function MoverModal({ db, palletId, origemGal, onEscolher, onCancelar }) {
  const pal = db.pallets[palletId];
  const prod = ESTQ.PRODUTOS[pal.prod];
  return (
    <div className="scrim center" onClick={onCancelar}>
      <div className="mover-modal" data-screen-label="Mover — para onde?" onClick={(e) => e.stopPropagation()}>
        <h2>Para onde?</h2>
        <div className="sub">
          <span className="sw" style={{ background: prod.cor }}></span>
          {prod.nome}{pal.lote ? ' · Lote ' + pal.lote : ''} · {ESTQ.qtdCurto(pal)}
        </div>
        <div className="alvos">
          {Object.keys(db.galpoes).map(Number).sort((a, b) => a - b).map((g) => (
            <button key={g} className="alvo" onClick={() => onEscolher({ type: 'galpao', gal: g })}>
              <span className="big">G{g}</span>
              <span className="lbl">Galpão {g}</span>
              {g === origemGal && <span className="aqui">está aqui</span>}
            </button>
          ))}
          <button className="alvo rasc" onClick={() => onEscolher({ type: 'rascunho' })}>
            <EIcon name="inbox" size={34} style={{ color: 'var(--gray-700)' }} />
            <span className="lbl">Rascunho do G{origemGal}</span>
          </button>
        </div>
        <div className="mover-foot">
          <button className="btn-cancelar" onClick={onCancelar}>Cancelar</button>
        </div>
      </div>
    </div>
  );
}

/* ===== Sub-guia Rascunho ===== */
function RascunhoView({ db, gal, canWrite, papel, onPosicionar, onDetalhe }) {
  const ids = db.galpoes[gal].rascunho.slice()
    .sort((a, b) => {
      const fa = db.pallets[a].foraDePosicao ? 1 : 0, fb = db.pallets[b].foraDePosicao ? 1 : 0;
      if (fa !== fb) return fb - fa; // fora de posição sempre no topo
      return (db.pallets[b].rascHoras || 0) - (db.pallets[a].rascHoras || 0);
    });
  const podePos = papel === 'gestor' || papel === 'estoquista';
  const qtdFora = ids.filter((id) => db.pallets[id].foraDePosicao).length;

  if (!ids.length) {
    return (
      <div className="rasc-view" data-screen-label={'Rascunho G' + gal}>
        <div className="rasc-empty">
          <div className="circ"><EIcon name="thumbsUp" size={42} /></div>
          <div className="t">Rascunho vazio</div>
          <div className="d">Todos os pallets do Galpão {gal} estão posicionados no mapa</div>
        </div>
      </div>
    );
  }

  return (
    <div className="rasc-view" data-screen-label={'Rascunho G' + gal}>
      <div className="rasc-head">
        <h2>Rascunho — Galpão {gal}</h2>
        <span className="hint">
          {ids.length} {ids.length === 1 ? 'pallet aguardando posição' : 'pallets aguardando posição'} · mais antigo primeiro
          {qtdFora > 0 && <span className="hint-fora"> · {qtdFora} fora de posição</span>}
        </span>
      </div>
      <div className="rasc-grid">
        {ids.map((id) => {
          const pal = db.pallets[id];
          const prod = ESTQ.PRODUTOS[pal.prod];
          const h = pal.rascHoras || 0;
          return (
            <div className={'rasc-card' + (pal.foraDePosicao ? ' fora' : '')} key={id}>
              <div className="linha1 tocavel" onClick={() => onDetalhe(id)} role="button" style={{ flex: 1, minWidth: 0 }}>
                <Foto prod={prod} />
                <div className="info">
                  <div className="prod-nome">{prod.nome}</div>
                  <div className="prod-marca">{prod.marca}</div>
                  <ProdSpecs pal={pal} extra={<span className="spec forte">{ESTQ.qtdCurto(pal)}</span>} />
                  {pal.foraDePosicao ? (
                    <div className="rasc-aviso-fora">
                      <EIcon name="alert" size={14} /> FORA DE POSIÇÃO
                      {pal.celulaPerdidaCodigo && <span> — estava em {pal.celulaPerdidaCodigo}</span>}
                    </div>
                  ) : (
                    <div className={'rasc-idade' + (h >= 24 ? ' velho' : '')}>
                      {h >= 24 && <EIcon name="alert" size={14} />} No rascunho {ESTQ.fmtIdade(h)}
                    </div>
                  )}
                </div>
              </div>
              <button className="btn-posicionar" disabled={!canWrite || !podePos} onClick={() => onPosicionar(id)}>
                Posicionar <EIcon name="arrowRight" size={19} />
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { Foto, ValChip, ProdSpecs, QtdLinha, PilhaSheet, DetalheSheet, MoverModal, RascunhoView, posLabelDe, movDesc, MOV_ICON });