Identificação do equipamento

{}} disabled/> set('quantidade')(Math.max(1, Number(v) || 1))} placeholder="1"/> {tipoEquip === 'elevador' && } {tipoEquip === 'elevador' && ({ value: m.codigo, label: `${m.codigo} — ${m.nome}` }))} placeholder="— selecione o modelo —"/>} {tipoEquip === 'elevador' && } {!publicMode && }

Se o cliente quer vários equipamentos idênticos, informe a quantidade aqui em vez de adicionar um card pra cada — use "+ Adicionar equipamento diferente" abaixo só quando a especificação mudar (ex.: um modelo/tipo distinto, ou mais paradas). {tipoEquip === 'elevador' && !unidade.modelo && ' Selecione o modelo do elevador para ver as opções disponíveis de teto falso, piso, porta e botoeiras.'}

{tipoEquip === 'elevador' && (

)}

{tipoEquip !== 'elevador' && ( )} {tipoEquip === 'elevador' && (

Estrutura e dimensões da obra — opcional, Engenharia complementa na vistoria

Cabina — opcional

Portas — tipo obrigatório, resto opcional

Elétrico

Botoeiras

Opcionais — tudo opcional

set('exigencias_especiais')(e.target.value)}/></FEField>
            </div>
          </div>
          </React.Fragment>
          )}
        </div>
      )}
    </Card>
  );
}

/* ---------- Envio da cotação técnica a fornecedores (Glarie, por ora) ----------
   Agrupa as Unidades salvas por (fornecedor, tipo_formulario) — tipo_formulario
   é "elevator" ou "homelift" conforme o Tipo da unidade — e envia 1 link por
   grupo (WhatsApp/E-mail/Link), igual ao Pedido a Fornecedor já existente. */
const FE_TIPO_FORMULARIO_LABEL = { elevator: 'Elevator Inquiry Form', homelift: 'Homelift Inquiry Form' };
function FECefStatusChip({ status }) {
  const store = window.CotacaoElevadorFornecedorStore;
  return <span className="la-setor" style={{ background: store.STATUS_COR[status] || '#64748b' }}>{store.STATUS_LABEL[status] || status}</span>;
}

/* Tabela de leitura da spec técnica de uma Unidade, comparando o que a
   VerticalParts pediu (dados_envio, congelado no momento do envio) com o
   que o fornecedor propôs (respostas.itens[].divergencias) — mesmas 3
   colunas do formulário público, só que já respondido e read-only. Sem
   isso o "Ver resposta" só mostrava os campos comerciais + o resumo do
   equipamento, nunca a especificação técnica linha a linha. */
function FECotacaoSpecCompletaTable({ linhas, divergencias }) {
  const preenchidas = linhas.filter(([, , , v]) => v !== '' && v !== null && v !== undefined);
  if (!preenchidas.length) return null;
  return (
    <table className="t" style={{ marginTop: 4 }}>
      <thead><tr><th>Campo</th><th>VerticalParts pediu</th><th>Fornecedor propôs</th></tr></thead>
      <tbody>
        {preenchidas.map(([key, pt, en, v]) => {
          const div = (divergencias || {})[key];
          return (
            <tr key={key}>
              <td className="small">{pt} / {en}</td>
              <td className="small">{String(v)}</td>
              <td className="small">{div ? <b>{div}</b> : <span className="muted">Confirmado</span>}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

{unidadesEnviadas.map((u, i) => {
        const item = itens.find((it) => it.unidade_id === u.unidade_id) || {};
        const secoes = store ? store.unitSpecSecoes(u, cot.tipo_formulario) : [];
        return (
          <div key={u.unidade_id || i} style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--border)' }}>
            <b style={{ fontSize: 13 }}>Unidade {u.identificador || i + 1}</b>
            {secoes.map((s) => (
              <div key={s.titulo} style={{ marginTop: 8 }}>
                <span className="up-eyebrow muted">{s.titulo}</span>
                <FECotacaoSpecCompletaTable linhas={s.linhas} divergencias={item.divergencias}/>
              </div>
            ))}
            <div style={{ marginTop: 10 }}>
              <span className="up-eyebrow muted">Resposta comercial do fornecedor</span>
              <div className="grid-2" style={{ gap: 8, marginTop: 4 }}>
                <FEField label="Modelo do fornecedor"><b>{item.modelo_fornecedor || '—'}</b></FEField>
                <FEField label="Andares/Paradas/Portas confirmados"><b>{item.floors_stops_doors || '—'}</b></FEField>
                <FEField label="Preço unitário"><b>{item.preco_unitario || '—'}</b></FEField>
                <FEField label={`Preço total (${u.quantidade || 1} un.)`}><b>{item.preco_total || '—'}</b></FEField>
              </div>
              {item.confirmacao_tecnica && (
                <div style={{ marginTop: 6 }}>
                  <span className="up-eyebrow muted">Confirmação técnica</span>
                  <p className="small" style={{ marginTop: 2 }}>{item.confirmacao_tecnica}</p>
                  {item.confirmacao_tecnica_pt && (
                    <p className="small" style={{ marginTop: 2, color: 'var(--fg2)', fontStyle: 'italic' }}>
                      🌐 {item.confirmacao_tecnica_pt}
                    </p>
                  )}
                </div>
              )}
            </div>
          </div>
        );
      })}

{r.observacoes_gerais && (
        <div style={{ marginTop: 16 }}>
          <span className="up-eyebrow muted">Observações gerais</span>
          <p className="small" style={{ marginTop: 4 }}>{r.observacoes_gerais}</p>
        </div>
      )}
      <FECotacaoAnexosResposta cotacaoId={cot.id}/>
    </Modal>
  );
}

/* 10/09 — bug real: RFQ só estava "pronto" pra Glarie (achado #92, comentário
   em fornecedoresOptions abaixo). Cotação VPCT-0954 pro fornecedor
   "VERTICALPARTS" (fornecedor interno real, cadastrado com a Victória como
   contato) nunca teve botão de envio — o modal só mostrava "ainda não
   configurado", silenciosamente, sem erro.
   11/09 — o e-mail da Victória ficou hardcoded aqui, desalinhado do
   cadastro real (Cadastros → Fornecedores). Achado do usuário: RFQ
   "enviado com sucesso" mas ela não recebia — o e-mail em si estava
   certo (bateu com o cadastro), causa real era filtro de spam do
   Outlook dela (verticalparts.com.br usa Microsoft 365 — confirmado via
   MX; nosso SPF/DKIM/DMARC em vpsistema.com estão corretos). Mas o
   hardcode continuava errado por princípio: se alguém editasse o e-mail
   em Cadastros → Fornecedores, o RFQ continuaria mandando pro endereço
   velho. Agora FECotacaoFornecedorGrupo busca o contato do cadastro real
   (fornecedores.email/telefone/contato via CadastrosFornecedoresStore) e
   só cai neste mapa como fallback pra fornecedor sem cadastro ainda
   (ex.: Glarie, fornecedor chinês fora do cadastro local). */
const FE_RFQ_CONTATOS_PADRAO = {
  Glarie: { nome: 'Kimmy (Glarie)', email: 'kimmy.kuai@glarie.com, carrie.han@glarie.com, sam.zhang@glarie.com', telefone: '8618751801577' },
};
/* 10/09 — pedido do usuário: "os e-mails desse projeto deveriam ficar
   juntos". Lê emails_projeto (send-email/read-inbox) pelo numero_cotacao
   — mesma chave que amarra Formulário/Cotação/Proposta/Contrato/P.I./
   Embarque no resto do sistema (ver linha-do-tempo-store.js). Carrega só
   quando o vendedor clica (evita bater no banco toda vez que o modal
   abre, a maioria das cotações nunca vai ser aberta pra ver isso). */
function FEComunicacaoFornecedor({ numeroCotacao }) {
  const [aberto, setAberto] = React.useState(false);
  const [msgs, setMsgs] = React.useState(null);
  const [carregando, setCarregando] = React.useState(false);
  if (numeroCotacao == null) return null;
  const abrir = () => {
    setAberto((v) => !v);
    if (msgs) return;
    setCarregando(true);
    window.__VP_SB.sb.from('emails_projeto').select('*').eq('numero_cotacao', numeroCotacao)
      .order('data_mensagem', { ascending: false }).limit(20)
      .then(({ data }) => setMsgs(data || [])).finally(() => setCarregando(false));
  };
  return (
    <div style={{ marginTop: 10 }}>
      <Button variant="ghost" size="sm" icon="mail" onClick={abrir}>{aberto ? 'Ocultar comunicação' : 'Ver comunicação desta cotação'}</Button>
      {aberto && (
        <div className="card" style={{ padding: 10, marginTop: 6, maxHeight: 320, overflowY: 'auto' }}>
          {carregando && <p className="small muted">Carregando…</p>}
          {!carregando && msgs && msgs.length === 0 && <p className="small muted">Nenhum e-mail vinculado à Cotação Nº {numeroCotacao} ainda.</p>}
          {!carregando && msgs && msgs.map((m) => (
            <div key={m.id} style={{ padding: '6px 0', borderBottom: '1px solid var(--border)' }}>
              <div className="row gap-2" style={{ justifyContent: 'space-between' }}>
                <b className="small">{m.direcao === 'saida' ? `Enviado → ${(m.para || []).join(', ')}` : `Recebido — ${m.de_nome || m.de_email}`}</b>
                <span className="small muted">{m.data_mensagem ? new Date(m.data_mensagem).toLocaleString('pt-BR') : ''}</span>
              </div>
              <div className="small">{m.assunto}</div>
              {m.corpo_texto && <p className="small muted" style={{ marginTop: 2, whiteSpace: 'pre-wrap' }}>{window.linkifyTexto(m.corpo_texto.slice(0, 300))}</p>}
              {m.anexos && m.anexos.length > 0 && (
                <div className="small muted" style={{ marginTop: 2 }}><Icon.paperclip size={10} style={{ verticalAlign: 'middle' }}/> {m.anexos.map((a) => a.filename).join(', ')}</div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

return (
    <div className="card" style={{ padding: 14, marginBottom: 12 }}>
      <div className="row gap-2" style={{ justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <b>{grupo.fornecedor}</b> <span className="muted small">· {FE_TIPO_FORMULARIO_LABEL[grupo.tipoFormulario]}</span>
          <div className="small muted">Unidades: {grupo.unidades.map((u) => u.identificador || '—').join(', ')}</div>
        </div>
        {cot && <FECefStatusChip status={cot.status}/>}
      </div>

{!suportado && <p className="small muted" style={{ marginTop: 8 }}>Formulário deste fornecedor ainda não configurado — em breve.</p>}

{suportado && cot?.status === 'respondido' ? (
        <div style={{ marginTop: 10 }}>
          <div className="row gap-2">
            <Button variant="outline" size="sm" icon="fileText" onClick={() => setVerResp(true)}>Ver resposta do fornecedor</Button>
            <Button variant="ghost" size="sm" icon="refresh" disabled={busy} onClick={() => onPedirRevisao(grupo)}>Pedir nova revisão</Button>
          </div>
          {verResp && <FECotacaoRespostaModal cot={cot} onClose={() => setVerResp(false)}/>}
        </div>
      ) : suportado && (
        <div style={{ marginTop: 10 }}>
          <div className="grid-3" style={{ gap: 8 }}>
            <FEInput value={recipient.nome} onChange={setR('nome')} placeholder="Contato no fornecedor"/>
            <FEInput value={recipient.email} onChange={setR('email')} placeholder="e-mail"/>
            <FEInput value={recipient.telefone} onChange={setR('telefone')} placeholder="WhatsApp (DDI+DDD+número)"/>
          </div>
          <div className="row gap-2" style={{ marginTop: 8 }}>
            <Button variant="outline" size="sm" icon="message" disabled={busy} onClick={() => onEnviar(grupo, 'whatsapp', recipient)}>WhatsApp</Button>
            <Button variant="outline" size="sm" icon="mail" disabled={busy || !recipient.email} onClick={() => onEnviar(grupo, 'email', recipient)}>E-mail</Button>
            <Button variant="ghost" size="sm" icon="copy" disabled={busy} onClick={() => onEnviar(grupo, 'link', recipient)}>Copiar link</Button>
          </div>
        </div>
      )}
      <FEComunicacaoFornecedor numeroCotacao={numeroCotacao}/>
    </div>
  );
}

const reload = () => store.listarPorFormulario(formularioId).then(setCotacoes).catch(() => {});
  React.useEffect(() => { reload(); }, [formularioId]);

const cotacaoDoGrupo = (g) => cotacoes.find((c) => c.fornecedor === g.fornecedor && c.tipo_formulario === g.tipoFormulario && c.categoria_produto === g.categoriaProduto);

/* Pedir revisão = documento novo inteiro (mais simples por enquanto, ver
     issue de revisão): cria uma nova cotação (revisão auto-incrementada por
     store.gerar, ex. VPEL-EL0902 -> -A -> -B) pro MESMO fornecedor+tipo — a
     resposta anterior não é apagada, continua acessível em Cotações a
     Fornecedor. Depois de criada, cotacaoDoGrupo() já pega a mais recente
     (listarPorFormulario ordena por created_at desc), então o card volta
     sozinho pro estado "aguardando envio" com os campos de contato prontos. */
  const pedirRevisao = async (grupo) => {
    const key = `${grupo.fornecedor}|${grupo.tipoFormulario}|${grupo.categoriaProduto}`;
    if (!window.confirm(`Isso cria um novo documento de cotação (revisão) para ${grupo.fornecedor}, com um novo link. A resposta anterior continua salva e pode ser vista em Cotações a Fornecedor. Deseja continuar?`)) return;
    setEnviando(key);
    try {
      await store.gerar(formularioId, grupo.unidades, grupo.fornecedor, numeroCotacao, grupo.categoriaProduto);
      await reload();
      window.toast?.('Nova revisão criada — preencha o contato e envie.', 'success');
    } catch (e) {
      window.toast?.('Erro ao criar revisão: ' + e.message, 'error');
    } finally {
      setEnviando(null);
    }
  };

return (
    <Modal title="Enviar cotação técnica aos fornecedores" onClose={onClose} width={640}
      footer={<Button variant="ghost" onClick={onClose}>Fechar</Button>}>
      {grupos.length === 0 && <p className="small muted">Salve o formulário e defina o Fornecedor em pelo menos uma Unidade para enviar a cotação.</p>}
      {grupos.map((g) => (
        <FECotacaoFornecedorGrupo key={`${g.fornecedor}|${g.tipoFormulario}|${g.categoriaProduto}`} grupo={g} cot={cotacaoDoGrupo(g)} numeroCotacao={numeroCotacao} onEnviar={enviar} onPedirRevisao={pedirRevisao} enviando={enviando} fornecedoresCadastro={fornecedoresCadastro}/>
      ))}
    </Modal>
  );
}

/* ---------- Envio do link do cliente (Canal 2 — self-service) ----------
   Mesma regra de envio do fornecedor (WhatsApp/E-mail/Link), mas em
   português e só com o link do formulário em branco — os dados do
   equipamento ainda não existem, quem preenche é o próprio cliente. */
function FELinkClienteModal({ url, numeroCotacao, header, onClose }) {
  const [copied, setCopied] = React.useState(false);
  const [telefone, setTelefone] = React.useState(header.telefone || '');
  const [email, setEmail] = React.useState(header.email || '');

const numeroTxt = numeroCotacao != null ? ` — Cotação Nº ${window.MasterIdEngine.etapaId('cotacao', numeroCotacao)}` : '';
  const msg = `Olá! Segue o link para preencher os dados do seu elevador${numeroTxt} — VerticalParts:\n${url}\n\n` +
    `Assim que enviar, nossa equipe já recebe os dados automaticamente para preparar a cotação.`;

return (
    <Modal title="Enviar link para o cliente preencher" onClose={onClose} width={520}
      footer={<Button variant="ghost" onClick={onClose}>Fechar</Button>}>
      <div className="pf-portal-callout">
        <div className="pf-portal-ico">🔗</div>
        <div>
          <b>Formulário online do cliente</b>
          <p>O cliente abre o link, preenche os dados do elevador e obra, e <b>o VP Gestão recebe automaticamente</b> — sem PDF, sem digitação manual.</p>
        </div>
      </div>

<div className="pf-linkbox">
        <input className="input mono small" readOnly value={url} onFocus={(e) => e.target.select()}/>
        <Button variant="primary" size="sm" icon={copied ? 'check' : 'copy'} onClick={copiarLink}>{copied ? 'Copiado!' : 'Copiar link'}</Button>
      </div>

<div className="up-eyebrow muted" style={{ margin: '14px 0 6px' }}>Enviar por</div>
      <div className="stack" style={{ gap: 8 }}>
        <Button variant="outline" icon="message" disabled={!telefone} onClick={enviarWhatsApp}>WhatsApp</Button>
        <Button variant="outline" icon="mail" disabled={!email} onClick={enviarEmail}>E-mail</Button>
      </div>
    </Modal>
  );
}

/* Únicos campos que realmente pertencem ao header (formularios_elevador) —
   usado tanto pra filtrar o que vem do banco (obter() também traz id, token,
   status, unidades...) quanto pra montar o payload de save. Sem esse filtro,
   reabrir um rascunho e salvar de novo reenviava colunas inexistentes
   (ex.: `unidades`) e o update quebrava. */
const FE_FINALIDADE_COMPRA = [
  { value: 'uso_consumo_ativo', label: 'Uso e Consumo / Ativo Imobilizado' },
  { value: 'revenda', label: 'Revenda' },
];

/* ---------- Página / componente principal ---------- */
function FormularioElevadorForm({ formularioId, publicMode, prefillFromLead, onSaved, onVoltar, onControleCotacoes }) {
  const [loading, setLoading] = React.useState(!!formularioId);
  const [saving, setSaving] = React.useState(false);
  const [id, setId] = React.useState(formularioId || null);
  const [header, setHeader] = React.useState(feHeaderDefaults());
  const [unidades, setUnidades] = React.useState([feNovaUnidade('E1')]);
  /* 15/08 — vendedor busca o cliente já cadastrado em Cadastros em vez de
     redigitar tudo aqui (Cadastros existe desde ontem). `criarClienteInline`
     é a válvula de escape: se o cliente ainda não existir lá, mostra o
     formulário antigo (os mesmos campos de sempre) só pra esse caso — não
     bloqueia o vendedor esperando alguém cadastrar em outra tela. Canal
     self_service (link público pro cliente preencher sozinho) sempre usa o
     formulário completo — não faz sentido pedir pro cliente "se buscar". */
  const [clienteId, setClienteId] = React.useState(null);
  const [criarClienteInline, setCriarClienteInline] = React.useState(false);
  const [linkPublico, setLinkPublico] = React.useState(null);
  const [numeroCotacao, setNumeroCotacao] = React.useState(null);
  const [fornecedores, setFornecedores] = React.useState([]);
  const [modelos, setModelos] = React.useState([]);
  const [showCotacaoFornecedor, setShowCotacaoFornecedor] = React.useState(false);
  const [showLinkCliente, setShowLinkCliente] = React.useState(false);

React.useEffect(() => {
    if (publicMode) return;
    window.FormularioElevadorStore.listarFornecedores().then(setFornecedores).catch(() => {});
  }, [publicMode]);

/* Só Glarie tem o formulário técnico de cotação configurado de verdade
     (ver FECotacaoFornecedorGrupo.suportado abaixo) — os demais cadastrados
     em fornecedores_elevador (BST, Seelon...) apareciam no seletor lado a
     lado com Glarie, sem nenhuma distinção, e só avisavam "ainda não
     configurado" DEPOIS de o vendedor escolher e tentar enviar (achado #92).
     Marca visualmente no próprio seletor quem está pronto. */
  const fornecedoresOptions = React.useMemo(() => fornecedores.map((nome) => (
    Object.prototype.hasOwnProperty.call(FE_RFQ_CONTATOS_PADRAO, nome) ? nome : { value: nome, label: `${nome} (RFQ ainda não configurado)` }
  )), [fornecedores]);

React.useEffect(() => {
    window.FormularioElevadorStore.listarModelosElevador().then(setModelos).catch(() => {});
  }, []);

React.useEffect(() => {
    if (!formularioId) return;
    setLoading(true);
    window.FormularioElevadorStore.obter(formularioId).then((f) => {
      setId(f.id);
      setHeader((h) => ({ ...h, ...feHeaderPick(f) }));
      setNumeroCotacao(f.numero_cotacao ?? null);
      setClienteId(f.cliente_id || null);
      if (!f.cliente_id && (f.razao_social || f.contato || f.predio_empreendimento)) setCriarClienteInline(true); // formulário antigo, sem vínculo — mantém editável do jeito que já estava
      if (f.unidades && f.unidades.length) setUnidades(f.unidades);
      setLoading(false);
    }).catch((e) => { window.toast?.('Erro ao carregar formulário: ' + e.message, 'error'); setLoading(false); });
  }, [formularioId]);

/* Handoff vindo do Lead ("Abrir Formulário", comercial.jsx) — preenche
     telefone/e-mail/observações e, quando o Lead já tem cliente_id
     (CNPJ resolvido no cadastro do Lead), seleciona o cliente direto no
     picker — sem precisar redigitar CNPJ. Equipamento NÃO vem do Lead:
     é sempre alocado aqui dentro, podendo ter quantos itens/tipos o
     vendedor precisar (é o motivo do Lead ter parado de coletar
     equipamento — revisão do fluxo Lead→Formulário).
     Editável, não trava nada — mesmo espírito do autopreenchimento por
     CEP/CNPJ já existente aqui. */
  React.useEffect(() => {
    if (formularioId || !prefillFromLead) return;
    const lead = prefillFromLead;
    setHeader((h) => ({
      ...h,
      telefone: lead.phone || h.telefone,
      email: lead.email || h.email,
      contato: lead.contact || h.contato,
      predio_empreendimento: lead.building || h.predio_empreendimento,
      observacoes: [
        `Originado do Lead ${lead.id} (${lead.building || ''}).`,
        lead.contact ? `Contato: ${lead.contact}${lead.role ? ' — ' + lead.role : ''}.` : null,
      ].filter(Boolean).join(' '),
    }));
    if (lead.cliente_id) setClienteId(lead.cliente_id);
    // Lead ainda sem CNPJ/CPF vinculado (ex.: veio do "será inserido depois")
    // → mostra direto os campos de cliente (Contato/Prédio já preenchidos)
    // em vez do buscador de cliente cadastrado, que não teria o que achar.
    else setCriarClienteInline(true);
  }, [formularioId, prefillFromLead]);

const setH = (k) => (v) => setHeader((h) => ({ ...h, [k]: v }));

/* Autopreenchimento por CEP — melhor fonte, pois não depende de o CNPJ
     "bater" com o endereço real. Preenche mas deixa os campos editáveis. */
  const buscarCepEPreencher = (prefix) => async (cepRaw) => {
    if (!window.EnderecoAPI?.isCepValido(cepRaw)) return;
    try {
      const dados = await window.EnderecoAPI.buscarCEP(cepRaw);
      setHeader((h) => ({
        ...h,
        [`${prefix}logradouro`]: window.EnderecoAPI.mesclarLogradouro(h[`${prefix}logradouro`], dados.logradouro),
        [`${prefix}bairro`]: dados.bairro || h[`${prefix}bairro`],
        [`${prefix}cidade`]: dados.cidade || h[`${prefix}cidade`],
        [`${prefix}estado`]: dados.estado || h[`${prefix}estado`],
      }));
    } catch (e) {
      window.toast?.(e.message, 'warning');
    }
  };

/* Autopreenchimento por CNPJ — preenche o formulário inteiro do cliente,
     mas o endereço pode não bater com o real (por isso o CEP acima é a via
     preferencial), então tudo continua editável manualmente. */
  const buscarCnpjEPreencher = async (cnpjRaw) => {
    if (!window.EnderecoAPI?.isCnpjValido(cnpjRaw)) return;
    try {
      const dados = await window.EnderecoAPI.buscarCNPJ(cnpjRaw);
      setHeader((h) => ({
        ...h,
        razao_social: dados.razao_social || h.razao_social,
        telefone: h.telefone || dados.telefone,
        endereco_logradouro: window.EnderecoAPI.mesclarLogradouro(h.endereco_logradouro, dados.endereco.logradouro),
        endereco_complemento: dados.endereco.complemento || h.endereco_complemento,
        endereco_bairro: dados.endereco.bairro || h.endereco_bairro,
        endereco_cep: dados.endereco.cep || h.endereco_cep,
        endereco_cidade: dados.endereco.cidade || h.endereco_cidade,
        endereco_estado: dados.endereco.estado || h.endereco_estado,
      }));
      window.toast?.('Dados do CNPJ preenchidos automaticamente.', 'success');
    } catch (e) {
      window.toast?.(e.message, 'warning');
    }
  };

const usaClientePicker = !publicMode && !criarClienteInline;

// Sem CNPJ/CPF ainda (comum quando o Lead marcou "documento será inserido
  // depois") — Nome/Razão Social deixou de ser o único jeito de identificar o
  // cliente aqui: Contato ou Prédio/Empreendimento bastam pra gerar a
  // cotação, e o resto (CNPJ/CPF, razão social) é completado depois.
  const temIdentificacaoMinima = () =>
    !!(header.razao_social?.trim() || header.contato?.trim() || header.predio_empreendimento?.trim());

/* Retorna o id salvo (não um boolean) — quem chama precisa do valor real,
     não do estado `id`, que só reflete o setId em um próximo render (issue
     #90: gerarLink chamava gerarLinkPublico(id) com o id ainda stale). */
  const salvarTudo = async (novoStatus) => {
    // Mesmo um rascunho precisa do nome — `clientes.razao_social` é NOT NULL
    // no banco, então salvar sem isso derrubava com um 400 silencioso (sem
    // toast nenhum), travando em "Cotação Nº — (gerado ao salvar)" pra
    // sempre. O resto de `validar()` continua opcional pra rascunho.
    if (usaClientePicker ? !clienteId : !temIdentificacaoMinima()) {
      window.toast?.(usaClientePicker ? 'Selecione o cliente antes de salvar.' : 'Preencha Nome/Razão Social, Contato ou Prédio/Empreendimento antes de salvar.', 'warning');
      return null;
    }
    const erro = validar();
    if (novoStatus === 'enviado' && erro) { window.toast?.(erro, 'warning'); return null; }
    setSaving(true);
    try {
      let cliente = null;
      if (usaClientePicker) {
        cliente = { id: clienteId };
      } else if (!publicMode || header.cnpj || header.cpf) {
        // clienteIdProvisorio: se um cliente já foi criado numa chamada
        // anterior desta mesma sessão de rascunho (sem CNPJ/CPF ainda), o
        // store atualiza esse registro em vez de duplicar a cada save.
        cliente = await window.FormularioElevadorStore.buscarOuCriarCliente({ ...header, clienteIdProvisorio: clienteId });
        setClienteId(cliente.id);
      }
      let currentId = id;
      if (!currentId) {
        const f = await window.FormularioElevadorStore.criar({
          ...feHeaderPick(header), cliente_id: cliente?.id, canal: publicMode ? 'self_service' : 'assistido',
          lead_id: prefillFromLead?.id || null,
        });
        currentId = f.id;
        setId(currentId);
        setNumeroCotacao(f.numero_cotacao ?? null);
      } else {
        await window.FormularioElevadorStore.salvar(currentId, { ...feHeaderPick(header), cliente_id: cliente?.id });
      }
      // Sincroniza unidades: atualiza as que já têm id, cria as que não têm —
      // e hidrata o estado com o id real de cada unidade nova (issue #91:
      // sem isso, unidade recém-criada ficava sem id em `unidades`, e o RFQ
      // ao fornecedor (que casa resposta por unidade_id) saía quebrado).
      // Sequencial de propósito: adicionarUnidade calcula indice_ativo
      // consultando as unidades já existentes, então rodar em paralelo
      // arriscaria duas unidades novas caírem no mesmo índice.
      const unidadesSalvas = [];
      for (const u of unidades) {
        const payload = { ...u };
        delete payload.id; delete payload.formulario_id; delete payload.created_at;
        if (u.id) {
          await window.FormularioElevadorStore.atualizarUnidade(u.id, payload);
          unidadesSalvas.push(u);
        } else {
          const nova = await window.FormularioElevadorStore.adicionarUnidade(currentId, payload);
          unidadesSalvas.push({ ...u, id: nova.id, indice_ativo: nova.indice_ativo });
        }
      }
      setUnidades(unidadesSalvas);
      if (novoStatus) await window.FormularioElevadorStore.enviar(currentId);
      window.toast?.(novoStatus ? 'Formulário enviado!' : 'Rascunho salvo.', 'success');
      onSaved?.(currentId);
      return currentId;
    } catch (e) {
      window.toast?.('Erro ao salvar: ' + e.message, 'error');
      return null;
    } finally {
      setSaving(false);
    }
  };

const gerarLink = async () => {
    let currentId = id;
    if (!currentId) { currentId = await salvarTudo(null); if (!currentId) return; }
    const url = await window.FormularioElevadorStore.gerarLinkPublico(currentId);
    setLinkPublico(url);
    setShowLinkCliente(true);
  };

/* Mesmo idioma de gerarLink acima — usado pelos anexos (FEAnexos) pra
     salvar o rascunho na hora, sem exigir clique manual em "Salvar
     Rascunho" antes de conseguir anexar um arquivo. */
  const garantirSalvo = async () => (id ? id : await salvarTudo(null));

if (loading) return <div style={{ textAlign: 'center', padding: '60px 0', color: 'var(--fg3)', fontSize: 13 }}>Carregando…</div>;

return (
    <div className={publicMode ? 'fe-public' : 'page fade-in'}>
      {!publicMode && (
        <div className="page-head">
          <div className="page-head__l">
            <div className="page-head__eyebrow"><span className="vp-rule"/>Comercial · Formulários</div>
            <h1 className="page-head__title">Formulário — Equipamento</h1>
            <FENumeroCotacaoBadge numeroCotacao={numeroCotacao}/>
            <p className="page-head__sub">
              Coleta de dados da obra e do equipamento para envio de cotação aos fornecedores.
            </p>
          </div>
          <div className="page-head__r">
            {onVoltar && <Button variant="ghost" icon="chevLeft" onClick={onVoltar}>Voltar</Button>}
            <Button variant="outline" icon="link2" onClick={gerarLink}>Link p/ cliente preencher</Button>
          </div>
        </div>
      )}
      {publicMode && (
        <div className="page-head">
          <div className="page-head__l">
            <h1 className="page-head__title">Cotação de Elevador — VerticalParts</h1>
            <FENumeroCotacaoBadge numeroCotacao={numeroCotacao}/>
            <p className="page-head__sub">
              Preencha os dados abaixo para recebermos sua cotação.
            </p>
          </div>
        </div>
      )}

{!publicMode && showLinkCliente && linkPublico && (
        <FELinkClienteModal url={linkPublico} numeroCotacao={numeroCotacao} header={header} onClose={() => setShowLinkCliente(false)}/>
      )}

<Card title="Dados do cliente e da obra">
        <div className="stack" style={{ gap: 14 }}>
          <div>
            <div className="up-eyebrow muted" style={{ marginBottom: 8 }}>Cliente</div>
            {usaClientePicker ? (
              <FEClientePicker clienteId={clienteId} onSelecionar={(c) => setClienteId(c ? c.id : null)} onCriarNovo={() => setCriarClienteInline(true)}/>
            ) : (
              <>
                <div className="grid-3" style={{ gap: 12 }}>
                  <FEField label="Tipo de pessoa"><FESelect value={header.tipo_pessoa} onChange={setH('tipo_pessoa')} options={[{ value: 'PJ', label: 'Pessoa Jurídica' }, { value: 'PF', label: 'Pessoa Física' }]}/></FEField>
                  <FEField label="Nome / Razão Social" span="2"><FEInput value={header.razao_social} onChange={setH('razao_social')} placeholder="Nome do cliente"/></FEField>
                  {header.tipo_pessoa === 'PF'
                    ? <FEField label="CPF"><FEInput value={header.cpf} onChange={setH('cpf')} placeholder="000.000.000-00"/></FEField>
                    : <FEField label="CNPJ"><FEInput value={header.cnpj} onChange={setH('cnpj')} placeholder="00.000.000/0000-00" onBlur={() => buscarCnpjEPreencher(header.cnpj)}/></FEField>}
                  <FEField label="Inscrição Estadual"><FEInput value={header.inscricao_estadual} onChange={setH('inscricao_estadual')} disabled={header.tipo_pessoa === 'PF'}/></FEField>
                  <FEField label="Contribuinte de ICMS?"><FESelect value={header.contribuinte_icms === '' ? '' : String(header.contribuinte_icms)} onChange={(v) => setH('contribuinte_icms')(v === '' ? '' : v === 'true')} options={[{ value: 'true', label: 'Sim' }, { value: 'false', label: 'Não' }]}/></FEField>
                  <FEField label="Telefone"><FEInput value={header.telefone} onChange={setH('telefone')}/></FEField>
                  <FEField label="E-mail" span="2"><FEInput type="email" value={header.email} onChange={setH('email')}/></FEField>
                  <FEField label="Contato"><FEInput value={header.contato} onChange={setH('contato')} placeholder="Nome do síndico / responsável"/></FEField>
                  <FEField label="Prédio / Empreendimento" span="2"><FEInput value={header.predio_empreendimento} onChange={setH('predio_empreendimento')} placeholder="Ed. Itacolomi, Shopping Vila Olímpia…"/></FEField>
                </div>
                <p className="small muted" style={{ margin: '8px 0 0' }}>
                  Sem Nome/Razão Social, CNPJ ou CPF ainda? Informe pelo menos o Contato ou o
                  Prédio/Empreendimento acima — dá pra completar o resto depois, aqui mesmo.
                </p>
                <div style={{ marginTop: 14 }}>
                  <div className="up-eyebrow muted" style={{ marginBottom: 8 }}>Endereço</div>
                  <FEEndereco prefix="endereco_" header={header} setH={setH} onBuscarCep={buscarCepEPreencher('endereco_')}/>
                </div>
                {!publicMode && (
                  <p className="small muted" style={{ margin: '8px 0 0' }}>
                    <a href="#" onClick={(e) => { e.preventDefault(); setCriarClienteInline(false); }}>voltar a buscar cliente já cadastrado</a>
                  </p>
                )}
              </>
            )}
          </div>
          <div className="grid-3" style={{ gap: 12 }}>
            <FEField label="Finalidade da compra"><FESelect value={header.finalidade_compra} onChange={setH('finalidade_compra')} options={FE_FINALIDADE_COMPRA}/></FEField>
          </div>
          {header.finalidade_compra === 'revenda' && header.contribuinte_icms === false && (
            <p style={{ fontSize: 12, color: '#b45309', background: '#fffbeb', border: '1px solid #FBB039', padding: '8px 12px', margin: 0 }}>
              Atenção: Não Contribuintes do ICMS não podem comprar mercadorias com finalidade de Revenda.
            </p>
          )}
          <div className="grid-3" style={{ gap: 12 }}>
            <FEField label="Cidade da obra *"><FEInput value={header.local_obra_cidade} onChange={setH('local_obra_cidade')}/></FEField>
            <FEField label="UF da obra *"><FEInput value={header.local_obra_estado} onChange={setH('local_obra_estado')} placeholder="SP"/></FEField>
            <FEField label="Prazo mínimo desejado em obra"><FEInput value={header.prazo_desejado} onChange={setH('prazo_desejado')} placeholder="3 a 4 meses"/></FEField>
            <FEField label="Instalação Será *"><FESelect value={header.tipo_mao_de_obra} onChange={setH('tipo_mao_de_obra')} options={FE_INSTALACAO_SERA}/></FEField>
            <FEField label="Responsável pela entrega *"><FESelect value={header.responsavel_entrega} onChange={setH('responsavel_entrega')} options={FE_RESPONSAVEL_ENTREGA}/></FEField>
            {!publicMode && <FEField label="Origem da venda"><FESelect value={header.origem_venda} onChange={setH('origem_venda')} options={FE_ORIGEM_VENDA}/></FEField>}
            {!publicMode && <FEField label="Vendedor"><FEInput value={header.vendedor} onChange={setH('vendedor')} placeholder="Iniciais ou nome"/></FEField>}
          </div>

<div>
            <div className="up-eyebrow muted" style={{ marginBottom: 8 }}>Condições</div>
            <div className="stack" style={{ gap: 10 }}>
              <FEField label="Equipamento será instalado em endereço diferente?">
                <div className="seg">
                  <button type="button" className={!header.endereco_obra_diferente ? 'is-active' : ''} onClick={() => setH('endereco_obra_diferente')(false)}>Não</button>
                  <button type="button" className={header.endereco_obra_diferente ? 'is-active' : ''} onClick={() => setH('endereco_obra_diferente')(true)}>Sim</button>
                </div>
              </FEField>
              {!header.endereco_obra_diferente && (
                <p style={{ fontSize: 12, color: 'var(--fg3)', margin: 0 }}>A obra usará o mesmo endereço já informado acima.</p>
              )}
              {header.endereco_obra_diferente && (
                <div>
                  <div className="up-eyebrow muted" style={{ marginBottom: 8 }}>Endereço da obra</div>
                  <FEEndereco prefix="endereco_obra_" header={header} setH={setH} requiredLogradouro onBuscarCep={buscarCepEPreencher('endereco_obra_')}/>
                </div>
              )}
            </div>
          </div>
          <FEField label="Observações"><textarea className="input" rows={2} value={header.observacoes || ''} onChange={(e) => setH('observacoes')(e.target.value)}/></FEField>
        </div>
      </Card>

{/* Sem `id &&`: um formulário novo (ainda não salvo) também mostra
          estas seções — FEAnexos salva o rascunho na hora, por trás, se o
          vendedor tentar anexar antes do 1º "Salvar Rascunho" manual. */}
      <div className="stack" style={{ gap: 16, marginTop: 16 }}>
        <FEAnexos formularioId={id} categoria="projeto_civil" titulo="Projeto Civil da Obra"
          descricao="Anexe a planta, o memorial descritivo ou o projeto civil (PDF, DWG, imagem) — a equipe usa esses dados para extrair as medidas do elevador."
          podeAnexar={publicMode} garantirSalvo={garantirSalvo}/>
        {!publicMode && (
          <FEAnexos formularioId={id} categoria="fornecedor" titulo="Anexos para o Fornecedor"
            descricao="PDF, DWG ou fotos que devem ir junto com a cotação técnica ao fornecedor (ex.: planta, foto do local) — aparecem no link público que o fornecedor recebe."
            podeAnexar={true} garantirSalvo={garantirSalvo}/>
        )}
      </div>

{/* fieldset disabled trava toda edição de unidades (campos, select, +/-
          adicionar/remover) enquanto salvarTudo está em voo — sem isso, dava
          pra editar `unidades` no meio do save e o setUnidades(unidadesSalvas)
          no final sobrescrevia essas edições com o snapshot antigo (achado
          do Codex no PR #167, issue #91). */}
      <fieldset disabled={saving} style={{ border: 0, padding: 0, margin: 0 }}>
        {unidades.map((u, i) => (
          <div key={u.id || i} style={{ marginTop: 16 }}>
            <FEUnidadeCard unidade={u} index={i} onChange={setUnidade(i)} onRemove={() => removeUnidade(i)} onDuplicate={() => duplicarUnidade(i)} fornecedores={fornecedoresOptions} modelos={modelos} publicMode={publicMode} numeroCotacao={numeroCotacao}/>
          </div>
        ))}

<div style={{ marginTop: 16 }}>
          <Button variant="outline" icon="plus" onClick={addUnidade}>+ Adicionar equipamento diferente</Button>
        </div>
      </fieldset>

<div style={{ marginTop: 16, display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
        <div className="row gap-2">
          <Button variant="outline" onClick={() => salvarTudo(null)} disabled={saving}>{saving ? 'Salvando…' : 'Salvar rascunho'}</Button>
          <Button variant="primary" onClick={() => salvarTudo('enviado')} disabled={saving}>{saving ? 'Enviando…' : 'Enviar para Cotação'}</Button>
        </div>
      </div>

{!publicMode && (id || onControleCotacoes) && (
        <div className="row gap-2" style={{ marginTop: 16, justifyContent: 'center' }}>
          {id && <Button variant="ghost" icon="send" onClick={() => setShowCotacaoFornecedor(true)}>Enviar cotação a fornecedores</Button>}
          {id && (
            <Button variant="ghost" icon="calculator" title="Preço já combinado por fora (CEO/Financeiro) — a Proposta já nasce agora, com o preço em aberto pra preencher"
              onClick={async () => {
                if (!unidades.length) { window.toast?.('Adicione ao menos um equipamento antes de enviar.', 'warning'); return; }
                if (!window.confirm('A proposta nasce agora, mesmo sem preço — alguém preenche o valor depois (na própria Proposta ou pela fila de Precificação). Confirma?')) return;
                try {
                  await window.FormularioElevadorStore.enviarDiretoParaPrecificacao(id);
                  /* Proposta nasce na hora, já com cliente/obra/equipamento —
                     preço fica em aberto (0) até alguém preencher, na própria
                     Proposta ou via Precificação depois (herdar() no editor
                     "auto-preenche" quando reaberta, sem sobrescrever o que
                     já foi digitado — pedido do usuário, 19/08). */
                  if (window.PropostaHeranca && numeroCotacao) {
                    const r = await window.PropostaHeranca.prefillPorNumeroCotacao(numeroCotacao);
                    if (r.encontrado) {
                      const numero = window.MasterIdEngine.etapaId('proposta', numeroCotacao);
                      /* r.prefill é só o pedaço colhido do Formulário/Cotação/
                         Precificação — precisa entrar por cima da "forma
                         completa" de uma proposta (acabamentos, condições,
                         garantia, textos padrão...), senão salva faltando
                         chave e a tela de preview quebra ao reabrir (achado
                         ao vivo, 19/08 — proposta 921 crashava com "Cannot
                         read properties of undefined (reading 'modeloCabine')").
                         Mesma mistura que herdar() já faz no editor. */
                      /* deepMergeProposta (não deepMergeHeranca): esta é sempre uma
                         proposta nova (editId: null) — não existe "digitação do
                         vendedor" pra proteger aqui. deepMergeHeranca tratava o
                         array/objeto placeholder do makeDefaultProposta() como se
                         já fosse conteúdo real e descartava a herança de verdade
                         quando havia mais de 1 equipamento (achado na cotação 950). */
                      const dadosCompletos = deepMergeProposta(makeDefaultProposta(), { ...r.prefill, numero });
                      const salvo = await window.PropostaStore.salvar({ data: dadosCompletos, eq: 'elevador', editId: null, valorTotal: 0 });
                      if (salvo?.erro) window.toast?.('Enviado, mas não consegui criar a Proposta agora: ' + salvo.erro, 'warning');
                      else window.toast?.('Proposta criada, aguardando preço.', 'success');
                    } else {
                      window.toast?.('Enviado — não consegui montar a Proposta agora, mas ela pode ser criada depois.', 'warning');
                    }
                  }
                } catch (e) { window.toast?.('Erro: ' + (e.message || e), 'error'); }
              }}>Enviar direto para Precificação</Button>
          )}
          {onControleCotacoes && <Button variant="ghost" icon="history" onClick={onControleCotacoes}>Controle de Cotações</Button>}
        </div>
      )}

{showCotacaoFornecedor && (
        <FECotacaoFornecedorModal formularioId={id} unidades={unidades} numeroCotacao={numeroCotacao} onClose={() => setShowCotacaoFornecedor(false)}/>
      )}
    </div>
  );
}

/* ---------- Wrapper interno (rota "formulario-elevador") ---------- */
function FormularioElevadorPage({ setRoute, subsel }) {
  const prefillFromLead = subsel && typeof subsel === 'object' ? subsel.__prefillFromLead : null;
  return (
    <FormularioElevadorForm
      formularioId={typeof subsel === 'string' ? subsel : null}
      prefillFromLead={prefillFromLead}
      onVoltar={() => setRoute('formularios')}
      onSaved={() => {}}
      onControleCotacoes={() => setRoute('controle-cotacoes')}
    />
  );
}

window.FormularioElevadorForm = FormularioElevadorForm;