// Romaneio de Saida de Materiais — orcamento 291.
//
// Substitui a ficha de papel: um documento por acao, com os itens que estao
// saindo, os tres responsaveis e assinatura. A reserva (material_reservas)
// continua sendo o planejamento; a SAIDA acontece so aqui.
//
// Confirmar fecha o documento: a partir dai o romaneio nao e mais editavel, so
// conferido ou cancelado. E isso que faz o comprovante valer alguma coisa.

const ESTADOS_CONSERVACAO = ['Novo', 'Bom', 'Regular', 'Ruim'];

const SAIDA_STATUS_VARIANT = {
  'Rascunho':   'default',
  'Confirmada': 'primary',
  'Conferida':  'success',
  'Cancelada':  'danger',
};

const romaneioNumero = (saida) => `ROM-${String(saida?.id ?? 0).padStart(4, '0')}`;

const romDataHora = (iso) => iso
  ? new Date(iso).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
  : '—';

// Quantidade ainda em campo de um item: o que saiu menos o que ja voltou.
const emCampoDoItem = (item) => Math.max(0, (item.qtd_enviada || 0) - (item.qtd_recebida || 0));

// Input/Select do shared.jsx nao tem prop disabled — documento ja confirmado
// vira texto, em vez de campo editavel que finge estar travado.
function CampoLeitura({ label, value }) {
  return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 600, color: DS.colors.textMuted, marginBottom: 5 }}>{label}</div>
      <div style={{ fontSize: 13, color: DS.colors.text, fontWeight: 600 }}>{value || '—'}</div>
    </div>
  );
}

// ---------------------------------------------------------------------
// Painel dentro do modal de Materiais do evento
// ---------------------------------------------------------------------
function RomaneiosEventoPanel({ event, materiais, reservas, saidas, saidaItens, currentUser, onChange, showToast }) {
  const [romaneioModal, setRomaneioModal] = React.useState(null); // { saida } | { saida: null }
  const [conferencia, setConferencia]     = React.useState(null);

  const doEvento = React.useMemo(
    () => (saidas || []).filter(s => s.event_id === event?.id),
    [saidas, event?.id]
  );

  const itensDe = React.useCallback(
    (saidaId) => (saidaItens || []).filter(i => i.saida_id === saidaId),
    [saidaItens]
  );

  const cancelar = async (saida) => {
    if (!window.confirm(`Cancelar o ${romaneioNumero(saida)}? O saldo volta para o estoque.`)) return;
    const { error } = await sb.from('material_saidas').update({ status: 'Cancelada' }).eq('id', saida.id);
    if (error) {
      console.error('[Romaneio.cancelar] Supabase error:', error);
      showToast('Erro ao cancelar o romaneio.', 'danger');
      return;
    }
    // Solta as reservas que este romaneio tinha consumido, para voltarem a
    // aparecer no planejamento em vez de sumirem.
    await sb.from('material_reservas').update({ saida_id: null }).eq('saida_id', saida.id);
    showToast('Romaneio cancelado.');
    onChange();
  };

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, marginBottom: 8, flexWrap: 'wrap' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
          Romaneios de saída ({doEvento.length})
        </div>
        <Btn size="sm" icon="plus" onClick={() => setRomaneioModal({ saida: null })}>Gerar Romaneio de Saída</Btn>
      </div>

      {doEvento.length === 0 ? (
        <EmptyState
          icon="list"
          title="Nenhuma saída registrada"
          desc="O romaneio substitui a ficha de papel: itens, responsáveis e comprovante para assinar."
        />
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {doEvento.map(s => {
            const itens = itensDe(s.id);
            const totalPecas = itens.reduce((acc, i) => acc + (i.qtd_enviada || 0), 0);
            return (
              <div key={s.id} style={{ border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, padding: '10px 12px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text }}>
                      {romaneioNumero(s)}
                      <span style={{ color: DS.colors.textSec, fontWeight: 500 }}>
                        {' '}· {itens.length} {itens.length === 1 ? 'item' : 'itens'} · {totalPecas} {totalPecas === 1 ? 'peça' : 'peças'}
                      </span>
                    </div>
                    <div style={{ fontSize: 11, color: DS.colors.textMuted, marginTop: 2 }}>
                      {s.saida_em ? <>Saída em {romDataHora(s.saida_em)}</> : 'Ainda não confirmado'}
                      {s.responsavel_retirada && <> · Retirou: {s.responsavel_retirada}</>}
                      {s.conferido_em && <> · Conferido por {s.conferido_por || '—'} em {romDataHora(s.conferido_em)}</>}
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
                    <Badge variant={SAIDA_STATUS_VARIANT[s.status] || 'default'}>{s.status}</Badge>
                    <Btn size="sm" variant="ghost" icon="eye" onClick={() => setRomaneioModal({ saida: s })}>
                      {s.status === 'Rascunho' ? 'Editar' : 'Abrir'}
                    </Btn>
                    {s.status === 'Confirmada' && (
                      <Btn size="sm" variant="secondary" icon="check" onClick={() => setConferencia(s)}>Conferir retorno</Btn>
                    )}
                    {s.status !== 'Cancelada' && s.status !== 'Conferida' && (
                      <Btn size="sm" variant="ghost" icon="x" onClick={() => cancelar(s)}>Cancelar</Btn>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {romaneioModal && (
        <RomaneioModal
          open={true}
          onClose={() => setRomaneioModal(null)}
          event={event}
          materiais={materiais}
          reservas={reservas}
          currentUser={currentUser}
          saida={romaneioModal.saida}
          itensIniciais={romaneioModal.saida ? itensDe(romaneioModal.saida.id) : null}
          onSaved={() => { setRomaneioModal(null); onChange(); }}
        />
      )}

      {conferencia && (
        <ConferenciaModal
          open={true}
          onClose={() => setConferencia(null)}
          saida={conferencia}
          itens={itensDe(conferencia.id)}
          currentUser={currentUser}
          onSaved={() => { setConferencia(null); onChange(); }}
        />
      )}
    </div>
  );
}

// ---------------------------------------------------------------------
// Montagem / visualizacao do romaneio
// ---------------------------------------------------------------------
function RomaneioModal({ open, onClose, event, materiais, reservas, currentUser, saida, itensIniciais, onSaved }) {
  const editavel = !saida || saida.status === 'Rascunho';

  const [cab, setCab] = React.useState(() => ({
    responsavel_retirada: saida?.responsavel_retirada ?? (currentUser?.name || ''),
    supervisor_acao:      saida?.supervisor_acao      ?? (event?.coordenador_contato || ''),
    responsavel_entrega:  saida?.responsavel_entrega  ?? (currentUser?.name || ''),
    obs:                  saida?.obs                  ?? '',
  }));

  // Rascunho novo ja nasce com as reservas do evento — "sem redigitacao".
  const [itens, setItens] = React.useState(() => {
    if (itensIniciais && itensIniciais.length) {
      return itensIniciais.map(i => ({
        material_id: String(i.material_id || ''),
        qtd_enviada: String(i.qtd_enviada ?? 1),
        estado_saida: i.estado_saida || 'Bom',
        reserva_id: i.reserva_id || null,
        material_nome: i.material_nome,
      }));
    }
    const daReserva = (reservas || [])
      .filter(r => r.event_id === event?.id && r.situacao === 'Reservado' && !r.saida_id)
      .map(r => ({
        material_id: String(r.material_id),
        qtd_enviada: String(r.quantidade),
        estado_saida: 'Bom',
        reserva_id: r.id,
        material_nome: null,
      }));
    return daReserva.length ? daReserva : [{ material_id: '', qtd_enviada: '1', estado_saida: 'Bom', reserva_id: null, material_nome: null }];
  });

  const [saving, setSaving]       = React.useState(false);
  const [erro, setErro]           = React.useState(null);
  const [exporting, setExporting] = React.useState(false);
  const pdfRef = React.useRef(null);

  const materialPorId = React.useMemo(() => {
    const map = {};
    (materiais || []).forEach(m => { map[String(m.id)] = m; });
    return map;
  }, [materiais]);

  const nomeDoItem = (it) => it.material_nome || materialPorId[it.material_id]?.nome || '';

  const setItem = (idx, campo, valor) =>
    setItens(prev => prev.map((it, i) => i === idx ? { ...it, [campo]: valor } : it));
  const addItem = () =>
    setItens(prev => [...prev, { material_id: '', qtd_enviada: '1', estado_saida: 'Bom', reserva_id: null, material_nome: null }]);
  const removeItem = (idx) =>
    setItens(prev => prev.filter((_, i) => i !== idx));

  const itensValidos = () => itens
    .filter(it => it.material_id && (parseInt(it.qtd_enviada, 10) || 0) > 0)
    .map(it => ({
      material_id: parseInt(it.material_id, 10),
      material_nome: nomeDoItem(it),
      qtd_enviada: parseInt(it.qtd_enviada, 10),
      estado_saida: it.estado_saida || 'Bom',
      reserva_id: it.reserva_id || null,
    }));

  // Grava cabecalho + itens. Itens seguem o padrao de budget_items: apaga tudo
  // e reinsere, que e mais simples do que reconciliar linha a linha.
  const persistir = async (patchCabecalho) => {
    const validos = itensValidos();
    if (!validos.length) { setErro('Adicione pelo menos um material.'); return null; }

    const payload = {
      event_id: event.id,
      client_id: event.client_id || null,
      client_nome: event.client_name || event.client || null,
      responsavel_retirada: cab.responsavel_retirada?.trim() || null,
      supervisor_acao:      cab.supervisor_acao?.trim() || null,
      responsavel_entrega:  cab.responsavel_entrega?.trim() || null,
      obs: cab.obs?.trim() || null,
      ...(patchCabecalho || {}),
    };

    let row = saida;
    if (saida) {
      const { data, error } = await sb.from('material_saidas').update(payload).eq('id', saida.id).select().single();
      if (error) { console.error('[Romaneio.persistir/update] Supabase error:', error); setErro('Erro ao salvar: ' + (error.message || 'desconhecido')); return null; }
      row = data;
      await sb.from('material_saida_itens').delete().eq('saida_id', saida.id);
    } else {
      const { data, error } = await sb.from('material_saidas')
        .insert({ ...payload, created_by: currentUser?.id || null })
        .select().single();
      if (error) { console.error('[Romaneio.persistir/insert] Supabase error:', error); setErro('Erro ao criar o romaneio: ' + (error.message || 'desconhecido')); return null; }
      row = data;
    }

    const { error: itErr } = await sb.from('material_saida_itens')
      .insert(validos.map(v => ({ ...v, saida_id: row.id })));
    if (itErr) { console.error('[Romaneio.persistir/itens] Supabase error:', itErr); setErro('Erro ao salvar os itens: ' + (itErr.message || 'desconhecido')); return null; }

    return row;
  };

  const salvarRascunho = async () => {
    setErro(null); setSaving(true);
    const row = await persistir();
    setSaving(false);
    if (row) onSaved();
  };

  const confirmarSaida = async () => {
    setErro(null);
    const validos = itensValidos();
    if (!validos.length) { setErro('Adicione pelo menos um material.'); return; }
    if (!cab.responsavel_retirada?.trim()) { setErro('Informe quem está retirando o material.'); return; }

    setSaving(true);

    // Revalida o saldo contra o banco na hora de confirmar: o rascunho pode ter
    // ficado aberto enquanto outra pessoa mexeu no estoque.
    const [{ data: mats }, { data: res }, { data: its }] = await Promise.all([
      sb.from('materiais').select('*'),
      sb.from('material_reservas').select('*'),
      sb.from('material_saida_itens').select('*, material_saidas(status)'),
    ]);
    const itensAtivos = (its || [])
      .filter(i => i.material_saidas?.status === 'Confirmada')
      .filter(i => !saida || i.saida_id !== saida.id);
    const reservasSemEste = (res || []).filter(r => !saida || r.saida_id !== saida.id);
    const idsReservaDoDoc = new Set(validos.map(v => v.reserva_id).filter(Boolean));

    for (const v of validos) {
      const mat = (mats || []).find(m => m.id === v.material_id);
      if (!mat) continue;
      const saldo = calcSaldo(mat, reservasSemEste, itensAtivos);
      // A reserva de origem deste romaneio ainda esta contando como reservada,
      // entao ela soma de volta ao disponivel.
      const jaReservadoAqui = reservasSemEste
        .filter(r => r.material_id === v.material_id && idsReservaDoDoc.has(r.id) && r.situacao === 'Reservado')
        .reduce((s, r) => s + (r.quantidade || 0), 0);
      const disponivel = saldo.livre + jaReservadoAqui;
      if (v.qtd_enviada > disponivel) {
        setSaving(false);
        setErro(`${mat.nome}: só há ${disponivel} disponível(is) e o romaneio pede ${v.qtd_enviada}.`);
        return;
      }
    }

    const row = await persistir({ status: 'Confirmada', saida_em: new Date().toISOString() });
    if (!row) { setSaving(false); return; }

    // Marca as reservas consumidas para nao contarem saldo duas vezes.
    const reservaIds = [...idsReservaDoDoc];
    if (reservaIds.length) {
      await sb.from('material_reservas').update({ saida_id: row.id }).in('id', reservaIds);
    }

    setSaving(false);
    onSaved();
  };

  const exportarPDF = async () => {
    if (!window.renderPDF || !pdfRef.current) return;
    setExporting(true);
    await window.renderPDF(pdfRef.current, `${romaneioNumero(saida || { id: 0 })}.pdf`);
    setExporting(false);
  };

  const docParaPDF = {
    ...(saida || {}),
    numero: romaneioNumero(saida || { id: 0 }),
    evento_nome: event?.name,
    cliente_nome: event?.client_name || event?.client || (saida?.client_nome ?? ''),
    responsavel_retirada: cab.responsavel_retirada,
    supervisor_acao: cab.supervisor_acao,
    responsavel_entrega: cab.responsavel_entrega,
    obs: cab.obs,
    itens: itens
      .filter(it => it.material_id)
      .map(it => ({ nome: nomeDoItem(it), qtd: parseInt(it.qtd_enviada, 10) || 0, estado: it.estado_saida })),
  };

  const acoes = saida && saida.status !== 'Rascunho' ? (
    <Btn size="sm" icon="download" onClick={exportarPDF} disabled={exporting}>
      {exporting ? 'Gerando…' : 'Comprovante'}
    </Btn>
  ) : null;

  const colunas = 'minmax(180px,1fr) 90px 130px 32px';

  return (
    <Modal
      open={open}
      onClose={onClose}
      title={saida ? `${romaneioNumero(saida)} — ${event?.name || ''}` : `Novo romaneio — ${event?.name || ''}`}
      width={720}
      extra={acoes}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {saida && saida.status !== 'Rascunho' && (
          <div style={{ background: '#F8FAFC', borderRadius: DS.radius.sm, padding: '10px 12px', fontSize: 12, color: DS.colors.textSec }}>
            Saída confirmada em <strong>{romDataHora(saida.saida_em)}</strong>. Documento emitido não é mais editável.
          </div>
        )}

        {/* Responsaveis */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
          {editavel ? (
            <>
              <Input label="Responsável pela retirada" value={cab.responsavel_retirada}
                onChange={v => setCab(c => ({ ...c, responsavel_retirada: v }))} placeholder="Quem está levando" />
              <Input label="Supervisor da ação" value={cab.supervisor_acao}
                onChange={v => setCab(c => ({ ...c, supervisor_acao: v }))} />
              <Input label="Entregue no estoque por" value={cab.responsavel_entrega}
                onChange={v => setCab(c => ({ ...c, responsavel_entrega: v }))} />
            </>
          ) : (
            <>
              <CampoLeitura label="Responsável pela retirada" value={cab.responsavel_retirada} />
              <CampoLeitura label="Supervisor da ação" value={cab.supervisor_acao} />
              <CampoLeitura label="Entregue no estoque por" value={cab.responsavel_entrega} />
            </>
          )}
        </div>

        {/* Itens */}
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
            Materiais que estão saindo
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: colunas, gap: 8, marginBottom: 6, fontSize: 10, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
            <div>Material</div><div>Qtd</div><div>Conservação</div><div />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {itens.map((it, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: colunas, gap: 8, alignItems: 'center' }}>
                {editavel ? (
                  <Select value={it.material_id} onChange={v => setItem(i, 'material_id', v)}
                    options={[{ value: '', label: '— Selecionar —' }, ...(materiais || []).map(m => ({ value: String(m.id), label: m.nome }))]} />
                ) : (
                  <div style={{ fontSize: 13, color: DS.colors.text, fontWeight: 600 }}>{nomeDoItem(it) || '—'}</div>
                )}

                {editavel ? (
                  <Input type="number" value={it.qtd_enviada} onChange={v => setItem(i, 'qtd_enviada', v)} />
                ) : (
                  <div style={{ fontSize: 13, color: DS.colors.textSec }}>{it.qtd_enviada}</div>
                )}

                {editavel ? (
                  <Select value={it.estado_saida} onChange={v => setItem(i, 'estado_saida', v)}
                    options={ESTADOS_CONSERVACAO.map(e => ({ value: e, label: e }))} />
                ) : (
                  <div style={{ fontSize: 13, color: DS.colors.textSec }}>{it.estado_saida}</div>
                )}

                {editavel
                  ? <Btn size="sm" variant="ghost" icon="x" onClick={() => removeItem(i)} disabled={itens.length === 1} />
                  : <div />}
              </div>
            ))}
          </div>

          {editavel && (
            <div style={{ marginTop: 8 }}>
              <Btn variant="secondary" icon="plus" size="sm" onClick={addItem}>Adicionar item</Btn>
            </div>
          )}
        </div>

        {editavel
          ? <Input label="Observações" value={cab.obs} onChange={v => setCab(c => ({ ...c, obs: v }))} />
          : (cab.obs ? <CampoLeitura label="Observações" value={cab.obs} /> : null)}

        {erro && (
          <div style={{ background: DS.colors.dangerLight, color: DS.colors.danger, borderRadius: DS.radius.sm, padding: '10px 12px', fontSize: 12, fontWeight: 600 }}>
            {erro}
          </div>
        )}

        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
          <Btn variant="secondary" onClick={onClose}>Fechar</Btn>
          {editavel && (
            <>
              <Btn variant="ghost" icon="check" onClick={salvarRascunho} disabled={saving}>Salvar rascunho</Btn>
              <Btn icon="check" onClick={confirmarSaida} disabled={saving}>
                {saving ? 'Confirmando…' : 'Confirmar saída'}
              </Btn>
            </>
          )}
        </div>
      </div>

      <RomaneioPDFTemplate doc={docParaPDF} innerRef={pdfRef} />
    </Modal>
  );
}

// ---------------------------------------------------------------------
// Comprovante — substitui a ficha de papel, entao tem linha de assinatura
// ---------------------------------------------------------------------
function RomaneioPDFTemplate({ doc, innerRef }) {
  if (!doc) return null;
  const td = { padding: '7px 9px', borderBottom: '1px solid #E2E8F0', fontSize: 11, color: '#334155' };
  const th = { padding: '7px 9px', borderBottom: '2px solid #CBD5E1', fontSize: 9, fontWeight: 700, color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.05em', textAlign: 'left' };
  const campo = (k, v) => (
    <div style={{ padding: '7px 10px', border: '1px solid #E2E8F0', borderRadius: 6 }}>
      <div style={{ fontSize: 8, fontWeight: 700, color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{k}</div>
      <div style={{ fontSize: 11, fontWeight: 600, color: '#0F172A', marginTop: 2 }}>{v || '—'}</div>
    </div>
  );
  const assinatura = (papel, nome) => (
    <div style={{ textAlign: 'center' }}>
      <div style={{ borderTop: '1px solid #0F172A', margin: '34px 6px 5px', paddingTop: 5, fontSize: 10, fontWeight: 700, color: '#0F172A' }}>
        {nome || ' '}
      </div>
      <div style={{ fontSize: 8, color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{papel}</div>
    </div>
  );

  return (
    <div ref={innerRef} style={{ position: 'absolute', left: -99999, top: 0, opacity: 0, width: 760, background: '#fff', padding: 34, fontFamily: 'Inter, sans-serif', color: '#0F172A' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', borderBottom: '3px solid #EA6B00', paddingBottom: 14, marginBottom: 18 }}>
        <div>
          <img src="logo.png" alt="Promoup" style={{ height: 42, marginBottom: 6 }} />
          <div style={{ fontSize: 10, color: '#64748B' }}>Promoup Marketing &amp; Eventos</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 10, fontWeight: 700, color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Romaneio de Saída</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: '#EA6B00', letterSpacing: '-0.02em' }}>{doc.numero}</div>
          <div style={{ fontSize: 10, color: '#64748B', marginTop: 2 }}>Saída em {romDataHora(doc.saida_em)}</div>
        </div>
      </div>

      <div className="pdf-keep" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 18 }}>
        {campo('Ação / Evento', doc.evento_nome)}
        {campo('Cliente', doc.cliente_nome)}
      </div>

      <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 16 }}>
        <thead>
          <tr>
            <th style={th}>Material</th>
            <th style={{ ...th, textAlign: 'right', width: 80 }}>Qtd</th>
            <th style={{ ...th, width: 130 }}>Conservação</th>
          </tr>
        </thead>
        <tbody>
          {(doc.itens || []).map((it, i) => (
            <tr key={i}>
              <td style={td}>{it.nome || '—'}</td>
              <td style={{ ...td, textAlign: 'right', fontWeight: 700 }}>{it.qtd}</td>
              <td style={td}>{it.estado}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {doc.obs && (
        <div className="pdf-keep" style={{ marginBottom: 18 }}>
          <div style={{ fontSize: 10, fontWeight: 800, color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>Observações</div>
          <div style={{ fontSize: 11, color: '#334155', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{doc.obs}</div>
        </div>
      )}

      <div className="pdf-keep" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, marginTop: 26 }}>
        {assinatura('Responsável pela retirada', doc.responsavel_retirada)}
        {assinatura('Supervisor da ação', doc.supervisor_acao)}
        {assinatura('Entregue no estoque por', doc.responsavel_entrega)}
      </div>

      <div style={{ borderTop: '1px solid #E2E8F0', marginTop: 22, paddingTop: 12, fontSize: 9, color: '#94A3B8', lineHeight: 1.6 }}>
        A assinatura deste romaneio confirma o recebimento dos materiais nas quantidades e no estado de conservação descritos acima.
        A devolução é conferida item a item no retorno da ação.
      </div>
    </div>
  );
}

Object.assign(window, {
  RomaneiosEventoPanel, RomaneioModal, RomaneioPDFTemplate, CampoLeitura,
  romaneioNumero, romDataHora, emCampoDoItem,
  ESTADOS_CONSERVACAO, SAIDA_STATUS_VARIANT,
});