// Cotações — Solicitação de Orçamento para vários fornecedores de uma vez
//
// Primeira metade do fluxo de Compras:
//   Evento -> Solicitar Orçamento -> Fornecedores respondem (link público)
//   -> Comparar valores -> Escolher fornecedor -> gera a Ordem de Compra.
//
// O fornecedor responde em oc.html, que fala com a Edge Function
// 'oc-publica'. Aqui a equipe só dispara e compara.

const COT_STATUS_VARIANT = {
  Pendente: 'default', Enviada: 'primary', Respondida: 'success', Recusada: 'danger',
};

// Texto padronizado que vai pro fornecedor — o mesmo no WhatsApp e no e-mail.
// Padronizar é metade do ganho: hoje cada pedido sai escrito de um jeito.
function mensagemCotacao({ pedido, fornecedor, link }) {
  const dataEvento = pedido.evento_data
    ? new Date(pedido.evento_data + 'T00:00:00').toLocaleDateString('pt-BR') : null;
  const prazo = pedido.prazo_resposta
    ? new Date(pedido.prazo_resposta + 'T00:00:00').toLocaleDateString('pt-BR') : null;

  return [
    `Olá, ${fornecedor.contato || fornecedor.nome}! Aqui é da Promoup.`,
    '',
    `Precisamos de um orçamento para: *${pedido.titulo}*`,
    pedido.evento_nome ? `Evento: ${pedido.evento_nome}${dataEvento ? ` — ${dataEvento}` : ''}` : '',
    pedido.evento_local ? `Local: ${pedido.evento_local}` : '',
    '',
    pedido.descricao || '',
    '',
    prazo ? `Precisamos da resposta até ${prazo}.` : '',
    '',
    'Envie sua proposta por aqui (leva 1 minuto, é só preencher o valor):',
    link,
    '',
    `Referência: ${pedido.numero}`,
  ].join('\n').replace(/\n{3,}/g, '\n\n');
}

// ---------------------------------------------------------------------
// Modal de nova solicitação — chamado pelo módulo Fornecedores
// (botão "Solicitar orçamento" com os fornecedores já selecionados)
// e também pela própria tela de Cotações.
// ---------------------------------------------------------------------
function NovaCotacaoModal({ open, fornecedores = [], onClose, onCreated }) {
  const [events, setEvents] = React.useState([]);
  const [saving, setSaving] = React.useState(false);
  const [erro, setErro] = React.useState(null);
  const [resultado, setResultado] = React.useState(null);

  const vazio = { event_id: '', titulo: '', descricao: '', categoria: '', prazo_resposta: '' };
  const [form, setForm] = React.useState(vazio);

  React.useEffect(() => {
    if (!open) return;
    setForm(vazio); setErro(null); setResultado(null);
    sb.from('events').select('id, name, event_date, client_name, location')
      .order('event_date', { ascending: false }).limit(200)
      .then(({ data }) => setEvents(data || []));
  }, [open]);

  const criar = async () => {
    if (!form.titulo.trim()) { setErro('Descreva o que você precisa orçar.'); return; }
    if (!fornecedores.length) { setErro('Selecione pelo menos um fornecedor.'); return; }
    setSaving(true); setErro(null);

    const ev = events.find(e => String(e.id) === String(form.event_id));
    const { data: pedido, error } = await sb.from('quote_requests').insert({
      event_id: ev ? ev.id : null,
      evento_nome: ev ? ev.name : null,
      evento_data: ev ? ev.event_date : null,
      evento_local: ev ? ev.location : null,
      cliente_nome: ev ? ev.client_name : null,
      titulo: form.titulo.trim(),
      descricao: form.descricao.trim() || null,
      categoria: form.categoria || null,
      prazo_resposta: form.prazo_resposta || null,
    }).select().single();

    if (error) {
      setSaving(false);
      console.error('[Cotacoes.criar] erro:', error);
      setErro('Não consegui criar a solicitação: ' + (error.message || 'erro desconhecido'));
      return;
    }

    // Uma linha por fornecedor: cada um recebe o próprio token/link
    const { data: linhas, error: errLinhas } = await sb.from('quote_request_suppliers').insert(
      fornecedores.map(f => ({
        request_id: pedido.id, fornecedor_id: f.id, fornecedor_nome: f.nome,
      }))
    ).select();

    if (errLinhas) {
      setSaving(false);
      console.error('[Cotacoes.criar] erro nos fornecedores:', errLinhas);
      setErro('A solicitação foi criada, mas não consegui vincular os fornecedores.');
      return;
    }

    // Dispara no WhatsApp de quem tem telefone. Quem não tem entra na lista
    // de pendências para a equipe mandar por e-mail.
    const enviados = [], pendentes = [];
    for (const linha of linhas) {
      const f = fornecedores.find(x => x.id === linha.fornecedor_id);
      const link = publicDocUrl(linha.token);
      const texto = mensagemCotacao({ pedido, fornecedor: f, link });
      const r = await notifyFornecedorWhatsApp({ fornecedor: f, text: texto });
      if (r.ok) enviados.push(linha.id);
      else pendentes.push({ nome: f.nome, email: f.email, motivo: r.motivo, link, texto });
    }

    if (enviados.length) {
      await sb.from('quote_request_suppliers')
        .update({ status: 'Enviada', sent_at: new Date().toISOString(), sent_via: 'whatsapp' })
        .in('id', enviados);
    }

    setSaving(false);
    if (pendentes.length) {
      // Não fecha o modal: mostra quem ficou de fora com o link pronto
      setResultado({ pedido, enviados: enviados.length, pendentes });
    } else {
      onCreated?.(`${pedido.numero} enviada para ${enviados.length} fornecedor(es) no WhatsApp.`);
    }
  };

  const copiar = (txt) => navigator.clipboard?.writeText(txt);

  return (
    <Modal open={open} onClose={onClose} title="Solicitar orçamento" width={620}>
      {resultado ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ padding: '14px 16px', background: '#F0FDF4', border: `1px solid ${DS.colors.success}33`, borderRadius: DS.radius.md, fontSize: 13, color: DS.colors.text }}>
            <strong>{resultado.pedido.numero}</strong> criada. {resultado.enviados} fornecedor(es) receberam no WhatsApp.
          </div>
          <div style={{ fontSize: 13, color: DS.colors.textSec, lineHeight: 1.6 }}>
            Estes aqui não têm WhatsApp válido cadastrado. Mande o link por e-mail:
          </div>
          {resultado.pendentes.map(p => (
            <div key={p.link} style={{ padding: '12px 14px', background: '#FFFBEB', border: `1px solid ${DS.colors.warning}44`, borderRadius: DS.radius.md }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text }}>{p.nome}</div>
              <div style={{ fontSize: 11, color: DS.colors.textMuted, margin: '2px 0 8px' }}>{p.motivo}</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                <Btn size="sm" variant="secondary" icon="mail" disabled={!p.email}
                  onClick={() => abrirEmail({ to: p.email, subject: `Solicitação de orçamento — ${resultado.pedido.numero}`, body: p.texto })}>
                  {p.email ? 'Abrir e-mail' : 'Sem e-mail'}
                </Btn>
                <Btn size="sm" variant="secondary" icon="link" onClick={() => copiar(p.link)}>Copiar link</Btn>
              </div>
            </div>
          ))}
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Btn icon="check" onClick={() => onCreated?.(`${resultado.pedido.numero} criada.`)}>Concluir</Btn>
          </div>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ padding: '12px 14px', background: '#F8FAFC', borderRadius: DS.radius.md, border: `1px solid ${DS.colors.border}` }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
              {fornecedores.length} fornecedor(es) selecionado(s)
            </div>
            {fornecedores.length === 0
              ? <div style={{ fontSize: 12, color: DS.colors.danger }}>Volte e selecione os fornecedores na lista.</div>
              : <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {fornecedores.map(f => <Badge key={f.id} variant={f.telefone ? 'primary' : 'warning'}>{f.nome}</Badge>)}
                </div>
            }
          </div>

          <Select label="Evento" value={form.event_id} onChange={v => setForm(f => ({ ...f, event_id: v }))}
            options={[{ value: '', label: 'Sem evento vinculado' }, ...events.map(e => ({
              value: String(e.id),
              label: `${e.name}${e.event_date ? ` — ${new Date(e.event_date + 'T00:00:00').toLocaleDateString('pt-BR')}` : ''}`,
            }))]} />

          <Input label="O que precisa ser orçado *" value={form.titulo}
            onChange={v => setForm(f => ({ ...f, titulo: v }))}
            placeholder="Ex: Sonorização completa para 300 pessoas" />

          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <label style={{ fontSize: 12, fontWeight: 600, color: DS.colors.textSec }}>Detalhes do que precisamos</label>
            <textarea value={form.descricao} onChange={e => setForm(f => ({ ...f, descricao: e.target.value }))}
              rows={5} placeholder={'Ex: 2 caixas ativas, 2 microfones sem fio, mesa de som de 8 canais.\nMontagem no dia anterior, operador durante o evento.'}
              style={{ border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, padding: '9px 12px', fontSize: 13, outline: 'none', fontFamily: 'inherit', resize: 'vertical', lineHeight: 1.5 }}
              onFocus={e => e.target.style.borderColor = DS.colors.primary}
              onBlur={e => e.target.style.borderColor = DS.colors.border} />
          </div>

          <Input label="Responder até" type="date" value={form.prazo_resposta}
            onChange={v => setForm(f => ({ ...f, prazo_resposta: v }))} />

          {erro && (
            <div style={{ padding: '10px 12px', background: '#FEF2F2', border: `1px solid ${DS.colors.danger}44`, borderRadius: DS.radius.sm, fontSize: 12, color: DS.colors.danger }}>{erro}</div>
          )}

          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
            <Btn variant="secondary" onClick={onClose}>Cancelar</Btn>
            <Btn icon="message" onClick={criar} disabled={saving || !fornecedores.length}>
              {saving ? 'Enviando…' : `Enviar para ${fornecedores.length || ''} fornecedor(es)`}
            </Btn>
          </div>
        </div>
      )}
    </Modal>
  );
}

// ---------------------------------------------------------------------
// Aba de Cotações dentro do módulo Compras
// ---------------------------------------------------------------------
function Cotacoes({ onGerarOC }) {
  const [pedidos, setPedidos] = React.useState([]);
  const [linhas, setLinhas] = React.useState([]);
  const [fornecedores, setFornecedores] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [abertoId, setAbertoId] = React.useState(null);
  // Nova solicitação em dois passos: 1) escolher fornecedores, 2) escrever
  const [novoModal, setNovoModal] = React.useState(false);
  const [novoAvancar, setNovoAvancar] = React.useState(false);
  const [escolhendo, setEscolhendo] = React.useState(false);
  const [selNovos, setSelNovos] = React.useState([]);
  const [busy, setBusy] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const showToast = (msg, type = 'success') => { setToast({ msg, type }); setTimeout(() => setToast(null), 4500); };

  const carregar = React.useCallback(async () => {
    const [{ data: p }, { data: l }, { data: f }] = await Promise.all([
      sb.from('quote_requests').select('*').order('created_at', { ascending: false }),
      sb.from('quote_request_suppliers').select('*').order('id'),
      sb.from('fornecedores').select('*').eq('status', 'Ativo').order('nome'),
    ]);
    setPedidos(p || []); setLinhas(l || []); setFornecedores(f || []);
    setLoading(false);
  }, []);

  React.useEffect(() => { carregar(); }, [carregar]);

  // Guardamos só o id do pedido aberto: assim o modal sempre lê a versão
  // mais nova depois de recarregar, sem cópia velha em outro state.
  const aberto = pedidos.find(p => p.id === abertoId) || null;
  const doPedido = (id) => linhas.filter(l => l.request_id === id);

  const mudarStatus = async (pedido, status, msg) => {
    setBusy(true);
    await sb.from('quote_requests').update({ status }).eq('id', pedido.id);
    await carregar(); setBusy(false);
    showToast(msg);
  };

  // Escolher fornecedor -> gera a OC em rascunho e encerra a cotação
  const escolher = async (pedido, linha) => {
    setBusy(true); setEscolhendo(true);
    const forn = fornecedores.find(f => f.id === linha.fornecedor_id);
    if (!forn) {
      setBusy(false); setEscolhendo(false);
      showToast('Fornecedor não está mais ativo no cadastro.', 'danger');
      return;
    }
    const oc = await onGerarOC({ pedido, linha, fornecedor: forn });
    if (!oc) {
      setBusy(false); setEscolhendo(false);
      showToast('Não consegui gerar a Ordem de Compra.', 'danger');
      return;
    }
    await sb.from('quote_request_suppliers')
      .update({ escolhido: true, purchase_order_id: oc.id }).eq('id', linha.id);
    await sb.from('quote_requests').update({ status: 'Encerrada' }).eq('id', pedido.id);
    await carregar();
    setBusy(false); setEscolhendo(false);
    showToast(`${oc.numero} criada em rascunho na aba Ordens de Compra. Revise e envie ao fornecedor.`);
  };

  const copiarLink = (linha) => {
    navigator.clipboard?.writeText(publicDocUrl(linha.token));
    showToast('Link copiado.');
  };

  const reenviar = async (pedido, linha) => {
    const f = fornecedores.find(x => x.id === linha.fornecedor_id);
    if (!f) { showToast('Fornecedor não encontrado.', 'danger'); return; }
    setBusy(true);
    const link = publicDocUrl(linha.token);
    const r = await notifyFornecedorWhatsApp({ fornecedor: f, text: mensagemCotacao({ pedido, fornecedor: f, link }) });
    if (r.ok) {
      await sb.from('quote_request_suppliers')
        .update({ status: linha.status === 'Pendente' ? 'Enviada' : linha.status, sent_at: new Date().toISOString(), sent_via: 'whatsapp' })
        .eq('id', linha.id);
      await carregar();
    }
    setBusy(false);
    showToast(r.motivo, r.ok ? 'success' : 'danger');
  };

  const porEmail = (pedido, linha) => {
    const f = fornecedores.find(x => x.id === linha.fornecedor_id);
    if (!f?.email) { showToast('Fornecedor sem e-mail cadastrado.', 'danger'); return; }
    abrirEmail({
      to: f.email,
      subject: `Solicitação de orçamento — ${pedido.numero} — Promoup`,
      body: mensagemCotacao({ pedido, fornecedor: f, link: publicDocUrl(linha.token) }),
    });
  };

  const dataBR = (d) => d ? new Date(d + 'T00:00:00').toLocaleDateString('pt-BR') : '—';

  if (loading) return <Spinner />;

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18, gap: 16 }}>
        <p style={{ fontSize: 13, color: DS.colors.textSec, margin: 0 }}>
          Dispare a mesma solicitação para vários fornecedores e compare as respostas lado a lado.
        </p>
        <Btn icon="plus" onClick={() => { setSelNovos([]); setNovoModal(true); }}>Nova solicitação</Btn>
      </div>

      {pedidos.length === 0 ? (
        <Card><EmptyState icon="budget" title="Nenhuma solicitação de orçamento ainda"
          desc="Selecione fornecedores no módulo Fornecedores ou clique em Nova solicitação." /></Card>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {pedidos.map(p => {
            const ls = doPedido(p.id);
            const respondidas = ls.filter(l => l.status === 'Respondida' && Number(l.valor) > 0);
            const melhor = respondidas.length ? Math.min(...respondidas.map(l => Number(l.valor))) : null;
            return (
              <Card key={p.id} hover onClick={() => setAbertoId(p.id)} style={{ padding: '16px 20px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                      <span style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted }}>{p.numero}</span>
                      <Badge variant={p.status === 'Aberta' ? 'primary' : 'default'}>{p.status}</Badge>
                    </div>
                    <div style={{ fontSize: 14, fontWeight: 700, color: DS.colors.text }}>{p.titulo}</div>
                    <div style={{ fontSize: 12, color: DS.colors.textSec, marginTop: 2 }}>
                      {p.evento_nome || 'Sem evento'}{p.prazo_resposta ? ` · responder até ${dataBR(p.prazo_resposta)}` : ''}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                    <div style={{ fontSize: 12, color: DS.colors.textSec }}>
                      {respondidas.length} de {ls.length} responderam
                    </div>
                    {melhor !== null && (
                      <div style={{ fontSize: 16, fontWeight: 800, color: DS.colors.success, marginTop: 2 }}>
                        {fmtBRL(melhor)}
                      </div>
                    )}
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
      )}

      {/* Comparação */}
      <Modal open={!!aberto} onClose={() => setAbertoId(null)} title={aberto ? `${aberto.numero} — ${aberto.titulo}` : ''} width={880}
        extra={aberto && (
          aberto.status === 'Aberta'
            ? <Btn size="sm" variant="secondary" icon="check" disabled={busy}
                onClick={() => mudarStatus(aberto, 'Encerrada', `${aberto.numero} encerrada. Fornecedores não conseguem mais responder.`)}>Encerrar</Btn>
            : <Btn size="sm" variant="secondary" icon="arrow" disabled={busy}
                onClick={() => mudarStatus(aberto, 'Aberta', `${aberto.numero} reaberta.`)}>Reabrir</Btn>
        )}>
        {aberto && (() => {
          const ls = doPedido(aberto.id);
          const valores = ls.filter(l => l.status === 'Respondida' && Number(l.valor) > 0).map(l => Number(l.valor));
          const menor = valores.length ? Math.min(...valores) : null;
          return (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
                {[
                  { k: 'Evento', v: aberto.evento_nome || '—' },
                  { k: 'Cliente', v: aberto.cliente_nome || '—' },
                  { k: 'Data do evento', v: dataBR(aberto.evento_data) },
                  { k: 'Responder até', v: dataBR(aberto.prazo_resposta) },
                ].map(i => (
                  <div key={i.k} style={{ padding: '10px 12px', background: '#F8FAFC', borderRadius: DS.radius.sm, border: `1px solid ${DS.colors.border}` }}>
                    <div style={{ fontSize: 10, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{i.k}</div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: DS.colors.text, marginTop: 2 }}>{i.v}</div>
                  </div>
                ))}
              </div>

              {aberto.descricao && (
                <div style={{ padding: '12px 14px', background: '#F8FAFC', borderLeft: `3px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, fontSize: 13, color: DS.colors.textSec, whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
                  {aberto.descricao}
                </div>
              )}

              <div>
                <div style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
                  Propostas recebidas {menor !== null && <span style={{ color: DS.colors.success, textTransform: 'none', letterSpacing: 0 }}>— menor valor destacado</span>}
                </div>
                <div style={{ border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.md, overflow: 'hidden' }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.9fr 1fr 1.4fr 1.1fr', padding: '9px 14px', background: '#F8FAFC', fontSize: 10, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                    <span>Fornecedor</span><span>Valor</span><span>Prazo</span><span>Observações</span><span style={{ textAlign: 'right' }}>Ações</span>
                  </div>
                  {ls.map(l => {
                    const ehMenor = menor !== null && Number(l.valor) === menor && l.status === 'Respondida';
                    return (
                      <div key={l.id} style={{
                        display: 'grid', gridTemplateColumns: '1.4fr 0.9fr 1fr 1.4fr 1.1fr', padding: '12px 14px',
                        borderTop: `1px solid ${DS.colors.border}`, alignItems: 'center',
                        background: l.escolhido ? '#F0FDF4' : ehMenor ? '#FFFBEB' : '#fff',
                      }}>
                        <div style={{ minWidth: 0 }}>
                          <div style={{ fontSize: 13, fontWeight: 600, color: DS.colors.text }}>{l.fornecedor_nome}</div>
                          <div style={{ display: 'flex', gap: 4, marginTop: 3, flexWrap: 'wrap' }}>
                            <Badge variant={COT_STATUS_VARIANT[l.status]}>{l.status}</Badge>
                            {l.escolhido && <Badge variant="success">Escolhido</Badge>}
                          </div>
                        </div>
                        <div style={{ fontSize: 14, fontWeight: 800, color: l.status === 'Respondida' ? (ehMenor ? DS.colors.success : DS.colors.text) : DS.colors.textMuted }}>
                          {l.status === 'Respondida' ? fmtBRL(l.valor) : '—'}
                        </div>
                        <div style={{ fontSize: 12, color: DS.colors.textSec }}>{l.prazo_entrega || '—'}</div>
                        <div style={{ fontSize: 12, color: DS.colors.textSec, lineHeight: 1.45, maxHeight: 54, overflow: 'hidden' }}>{l.observacoes || '—'}</div>
                        <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
                          {l.status === 'Respondida' && !l.escolhido && aberto.status !== 'Cancelada' && (
                            <Btn size="sm" icon="check" disabled={busy} onClick={() => escolher(aberto, l)}>
                              {escolhendo ? '…' : 'Escolher'}
                            </Btn>
                          )}
                          {l.status !== 'Respondida' && (
                            <>
                              <Btn size="sm" variant="ghost" icon="message" disabled={busy} onClick={() => reenviar(aberto, l)} />
                              <Btn size="sm" variant="ghost" icon="mail" onClick={() => porEmail(aberto, l)} />
                              <Btn size="sm" variant="ghost" icon="link" onClick={() => copiarLink(l)} />
                            </>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          );
        })()}
      </Modal>

      {/* Nova solicitação a partir da própria aba: escolhe fornecedores aqui */}
      <Modal open={novoModal} onClose={() => { setNovoModal(false); setSelNovos([]); }} title="Escolher fornecedores" width={560}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <p style={{ fontSize: 13, color: DS.colors.textSec, margin: 0 }}>
            Marque quem deve receber a solicitação. Só aparecem fornecedores ativos.
          </p>
          <div style={{ maxHeight: 340, overflowY: 'auto', border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.md }}>
            {fornecedores.length === 0
              ? <div style={{ padding: 20, fontSize: 13, color: DS.colors.textMuted }}>Nenhum fornecedor ativo cadastrado.</div>
              : fornecedores.map((f, i) => (
                <label key={f.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', borderTop: i ? `1px solid ${DS.colors.border}` : 'none', cursor: 'pointer' }}>
                  <input type="checkbox" checked={selNovos.includes(f.id)} style={{ width: 15, height: 15, accentColor: DS.colors.primary }}
                    onChange={() => setSelNovos(prev => prev.includes(f.id) ? prev.filter(x => x !== f.id) : [...prev, f.id])} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: DS.colors.text }}>{f.nome}</div>
                    <div style={{ fontSize: 11, color: DS.colors.textMuted }}>{f.categoria}{f.telefone ? '' : ' · sem WhatsApp'}</div>
                  </div>
                </label>
              ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
            <Btn variant="secondary" onClick={() => { setNovoModal(false); setSelNovos([]); }}>Cancelar</Btn>
            <Btn icon="arrow" disabled={!selNovos.length}
              onClick={() => { setNovoModal(false); setNovoAvancar(true); }}>
              Continuar ({selNovos.length})
            </Btn>
          </div>
        </div>
      </Modal>

      <NovaCotacaoModal
        open={novoAvancar}
        fornecedores={fornecedores.filter(f => selNovos.includes(f.id))}
        onClose={() => { setNovoAvancar(false); setSelNovos([]); }}
        onCreated={(msg) => { setNovoAvancar(false); setSelNovos([]); carregar(); showToast(msg); }}
      />

      {toast && <Toast message={toast.msg} type={toast.type} onClose={() => setToast(null)} />}
    </div>
  );
}

Object.assign(window, { Cotacoes, NovaCotacaoModal, mensagemCotacao, COT_STATUS_VARIANT });