// Relatorio Automatico da Acao (RA) — orcamento 310, Fase 3, item 24.
//
// O QUE MUDA EM RELACAO AOS OUTROS RELATORIOS
//   O Pedido de Producao e o Relatorio Fotografico sao formularios: alguem
//   senta e preenche. Este nasce pronto. Tudo que a acao ja gravou — quem
//   chegou, a que horas, quantas fotos, quais indicadores, que ocorrencias —
//   ja esta no banco desde a Fase 1. O relatorio so junta.
//
// MAS OS CAMPOS DE JULGAMENTO CONTINUAM EDITAVEIS
//   Objetivo, materiais, observacoes e resultado sao texto que alguem assina.
//   O sistema chuta um comeco a partir do que aconteceu, e a producao corrige
//   antes de mandar para o cliente. Relatorio que sai do sistema direto para o
//   cliente sem ninguem ler e um acidente esperando a primeira campanha ruim.
//
// POR QUE NAO REGERA SOZINHO AO REABRIR
//   Se o relatorio ja foi salvo, abrir de novo carrega o que foi salvo — e nao
//   os dados frescos. Regerar por cima apagaria o texto que a producao
//   escreveu, calado, e ninguem editaria duas vezes. Para trazer numeros novos
//   existe um botao que diz o que vai fazer, e ele nao toca nos campos de
//   texto.

const RA_FOTOS_NO_PDF = 12;

const raHora = iso => iso
  ? new Date(iso).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
  : null;

const raNum = v => {
  const n = parseFloat(String(v).replace(',', '.'));
  return Number.isFinite(n) ? n : null;
};

// =================================================
// COLETA — o relatorio a partir do que a operacao gravou
// =================================================
async function coletarDadosDaAcao(event) {
  const [{ data: ev }, { data: escalas }, { data: fotos }, { data: ocorrencias }, { data: pp }] =
    await Promise.all([
      sb.from('events').select('id, name, client_name, event_date, event_time, location, resultado_campos')
        .eq('id', event.id).maybeSingle(),
      sb.from('event_escalas')
        .select('id, funcao, status, check_in_em, check_out_em, realizada, houve_problema, problema_desc, observacao, materiais_devolvidos, resultados, freelancers(name)')
        .eq('event_id', event.id),
      sb.from('escala_fotos').select('id, url, categoria, legenda, enviada_em, freelancers(name)')
        .eq('event_id', event.id).order('enviada_em', { ascending: true }),
      sb.from('escala_ocorrencias').select('id, categoria, descricao, criada_em, resolvida_em, resposta')
        .eq('event_id', event.id).order('criada_em', { ascending: true }),
      sb.from('event_reports').select('payload').eq('event_id', event.id).eq('type', 'PP').maybeSingle(),
    ]);

  const acao = ev || event;
  const campos = acao.resultado_campos || [];
  const lista = escalas || [];

  const equipe = lista.map(e => ({
    nome: (e.freelancers && e.freelancers.name) || 'Profissional',
    funcao: e.funcao || 'Promotor',
    status: e.status,
    chegou: e.check_in_em,
    saiu: e.check_out_em,
    resultados: e.resultados || {},
    observacao: e.observacao || null,
    materiais_devolvidos: e.materiais_devolvidos,
    problema: e.houve_problema ? (e.problema_desc || 'Sim') : null,
  }));

  // Soma por indicador. Vale a pena somar, e nao so listar por pessoa: o
  // cliente pergunta "quantas abordagens teve a acao", nao "quantas a Maria fez".
  const indicadores = campos.map(c => {
    let total = 0, pessoas = 0;
    equipe.forEach(p => {
      const v = raNum(p.resultados[c.chave]);
      if (v !== null) { total += v; pessoas++; }
    });
    return { chave: c.chave, label: c.label, meta: c.meta || null, total, pessoas };
  });

  const chegadas = equipe.map(p => p.chegou).filter(Boolean).sort();
  const saidas   = equipe.map(p => p.saiu).filter(Boolean).sort();

  const presentes = equipe.filter(p => p.chegou).length;
  const devolveram = equipe.filter(p => p.materiais_devolvidos === 'Sim').length;
  const comCheckout = equipe.filter(p => p.saiu).length;

  // Observacoes: o que a equipe escreveu no check-out, com o nome de quem
  // escreveu. Jogar tudo num paragrafo anonimo perderia a informacao de quem
  // viu o que.
  const obsEquipe = equipe
    .filter(p => p.observacao || p.problema)
    .map(p => p.nome + ': ' + [p.problema, p.observacao].filter(Boolean).join(' — '))
    .join('\n');

  const resumo = [
    presentes + ' de ' + equipe.length + (equipe.length === 1 ? ' profissional presente' : ' profissionais presentes') + '.',
    indicadores.filter(i => i.pessoas > 0)
      .map(i => i.label + ': ' + i.total + (i.meta ? ' de ' + i.meta + ' (' + Math.round(i.total / i.meta * 100) + '%)' : ''))
      .join(' · '),
    (fotos || []).length ? (fotos.length + (fotos.length === 1 ? ' foto registrada.' : ' fotos registradas.')) : '',
    (ocorrencias || []).length ? (ocorrencias.length + (ocorrencias.length === 1 ? ' ocorrência registrada.' : ' ocorrências registradas.')) : 'Sem ocorrências.',
  ].filter(Boolean).join(' ');

  return {
    gerado_em: new Date().toISOString(),
    cliente: acao.client_name || '',
    acao: acao.name || '',
    data: acao.event_date || '',
    local: acao.location || '',
    horario_previsto: acao.event_time || '',
    primeiro_checkin: chegadas[0] || null,
    ultimo_checkout: saidas[saidas.length - 1] || null,

    objetivo: (pp && pp.payload && pp.payload.objetivo) || '',
    equipe,
    indicadores,
    materiais: comCheckout
      ? devolveram + ' de ' + comCheckout + ' confirmaram a conferência de materiais no check-out.'
      : '',
    fotos: (fotos || []).map(f => ({
      url: f.url, categoria: f.categoria || 'Outros', legenda: f.legenda || '',
      autor: (f.freelancers && f.freelancers.name) || '', hora: f.enviada_em,
    })),
    ocorrencias: (ocorrencias || []).map(o => ({
      categoria: o.categoria, descricao: o.descricao, hora: o.criada_em,
      resposta: o.resposta || '', resolvida: !!o.resolvida_em,
    })),
    observacoes: obsEquipe,
    resultado: resumo,
  };
}

// Os quatro campos que uma pessoa assina. A regeracao nunca os toca.
const RA_CAMPOS_DE_TEXTO = ['objetivo', 'materiais', 'observacoes', 'resultado'];

// =================================================
// PUBLICACAO NO PORTAL DO CLIENTE — orcamento 310, item 25
// =================================================
// O orcamento e explicito: o cliente nao pode ver cache, telefone do
// profissional nem ocorrencia administrativa nao autorizada.
//
// Por isso publicar NAO e marcar um sinalizador no relatorio interno. RLS e
// por LINHA, nao por chave do JSON: se o cliente pudesse ler a linha, leria o
// payload inteiro pela API, mostre a tela o que mostrar. Publicar e gravar uma
// COPIA em relatorios_publicados contendo so o que foi liberado.
//
// A copia e montada campo a campo, de proposito. Um espalhamento do payload
// interno funcionaria hoje e vazaria no dia em que alguem acrescentasse um
// campo novo ao relatorio sem lembrar desta tela.
function montarPayloadDoCliente(d, escolhas) {
  const cliente = {
    acao: d.acao,
    cliente: d.cliente,
    data: d.data,
    local: d.local,
    horario_previsto: d.horario_previsto,
    // O texto do resultado E o relatorio para o cliente: sempre vai.
    resultado: d.resultado || '',
    publicado_em: new Date().toISOString(),
  };

  if (escolhas.objetivo)  cliente.objetivo = d.objetivo || '';
  if (escolhas.materiais) cliente.materiais = d.materiais || '';
  if (escolhas.observacoes) cliente.observacoes = d.observacoes || '';

  if (escolhas.indicadores) {
    cliente.indicadores = d.indicadores.filter(i => i.pessoas > 0)
      .map(i => ({ label: i.label, total: i.total, meta: i.meta }));
  }

  if (escolhas.fotos) {
    // Sem o autor: o nome de quem fotografou e informacao da operacao, e a
    // lista do que o cliente ve nao inclui a equipe.
    cliente.fotos = d.fotos.map(f => ({ url: f.url, categoria: f.categoria, legenda: f.legenda }));
  }

  if (escolhas.equipe) {
    // Quantos e em que horario. Sem nome, sem funcao individual, sem cache.
    cliente.equipe_resumo = {
      total: d.equipe.length,
      presentes: d.equipe.filter(p => p.chegou).length,
      primeiro_checkin: d.primeiro_checkin,
      ultimo_checkout: d.ultimo_checkout,
    };
  }

  // Ocorrencia so vai uma a uma, marcada a dedo. O padrao e nao ir.
  const marcadas = escolhas.ocorrencias || {};
  const liberadas = d.ocorrencias.filter((_, i) => marcadas[i]);
  if (liberadas.length) {
    cliente.ocorrencias = liberadas.map(o => ({
      categoria: o.categoria, descricao: o.descricao, resolvida: o.resolvida,
    }));
  }

  return cliente;
}

// eventId vem por fora, e nao de dentro do payload: relatorios salvos antes
// desta tela nao carregam o id da acao, e ler dali daria undefined calado.
function RAPublicarModal({ open, eventId, data, publicado, onClose, onPublicado, showToast }) {
  const [escolhas, setEscolhas] = React.useState({
    objetivo: true, indicadores: true, fotos: true,
    materiais: true, observacoes: false, equipe: false, ocorrencias: {},
  });
  const [busy, setBusy] = React.useState(false);

  if (!open) return null;

  const marcarOcorrencia = (i, v) =>
    setEscolhas(e => ({ ...e, ocorrencias: { ...e.ocorrencias, [i]: v } }));

  const publicar = async () => {
    setBusy(true);
    const payload = montarPayloadDoCliente(data, escolhas);

    const { data: sessao } = await sb.auth.getUser();
    const uid = sessao && sessao.user ? sessao.user.id : null;
    let nome = null;
    if (uid) {
      const { data: u } = await sb.from('app_users').select('name, email').eq('id', uid).maybeSingle();
      nome = u ? (u.name || u.email) : null;
    }

    // onConflict no event_id: republicar corrige, nao empilha.
    const { error } = await sb.from('relatorios_publicados').upsert({
      event_id: eventId,
      payload,
      publicado_em: new Date().toISOString(),
      publicado_por: uid,
      publicado_por_nome: nome,
    }, { onConflict: 'event_id' });

    if (error) {
      setBusy(false);
      console.error('[RAPublicarModal] Supabase error:', error);
      showToast('Não consegui publicar: ' + error.message, 'danger');
      return;
    }

    // Entra na linha do tempo da acao no portal. Best-effort: se falhar, o
    // relatorio ja esta publicado e derrubar a operacao por causa do aviso
    // seria trocar o essencial pelo acessorio.
    const { error: errAviso } = await sb.from('operation_updates').insert({
      event_id: eventId, type: 'nota',
      text: 'Relatório da ação publicado.', created_by_name: nome,
    });
    if (errAviso) console.warn('[RAPublicarModal] aviso não registrado:', errAviso.message);

    setBusy(false);
    showToast('Relatório publicado no Portal do Cliente.');
    onPublicado();
    onClose();
  };

  return (
    <Modal open={open} onClose={onClose} title="Publicar no Portal do Cliente" width={560}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ fontSize: 12.5, color: DS.colors.textSec }}>
          Só o que estiver marcado é gravado na versão do cliente. O que não for
          marcado não fica escondido — <b>não é enviado</b>.
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <Check label="Objetivo da ação" checked={escolhas.objetivo}
                 onChange={v => setEscolhas(e => ({ ...e, objetivo: v }))} />
          <Check label={'Resultados — ' + data.indicadores.filter(i => i.pessoas > 0).map(i => i.label).join(', ')}
                 checked={escolhas.indicadores} onChange={v => setEscolhas(e => ({ ...e, indicadores: v }))} />
          <Check label={data.fotos.length + (data.fotos.length === 1 ? ' foto' : ' fotos')}
                 checked={escolhas.fotos} onChange={v => setEscolhas(e => ({ ...e, fotos: v }))} />
          <Check label="Materiais distribuídos" checked={escolhas.materiais}
                 onChange={v => setEscolhas(e => ({ ...e, materiais: v }))} />
          <Check label="Observações da equipe (leia antes — costuma citar nomes)"
                 checked={escolhas.observacoes} onChange={v => setEscolhas(e => ({ ...e, observacoes: v }))} />
          <Check label="Resumo da equipe (quantos e horários, sem nomes nem cachê)"
                 checked={escolhas.equipe} onChange={v => setEscolhas(e => ({ ...e, equipe: v }))} />
        </div>

        {data.ocorrencias.length > 0 && (
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted,
                          textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>
              Ocorrências — nenhuma vai por padrão
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {data.ocorrencias.map((o, i) => (
                <Check key={i} label={o.categoria + ': ' + o.descricao}
                       checked={!!escolhas.ocorrencias[i]} onChange={v => marcarOcorrencia(i, v)} />
              ))}
            </div>
          </div>
        )}

        <div style={{ fontSize: 11.5, color: DS.colors.textSec, background: '#F8FAFC',
                      borderRadius: 8, padding: '8px 10px' }}>
          Nunca vão, marcados ou não: cachê, telefone e dados bancários da equipe.
          {publicado ? ' Republicar substitui a versão que o cliente vê hoje.' : ''}
        </div>

        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <Btn variant="secondary" onClick={onClose} disabled={busy}>Cancelar</Btn>
          <Btn icon="portal" onClick={publicar} disabled={busy}>
            {busy ? 'Publicando...' : (publicado ? 'Republicar' : 'Publicar')}
          </Btn>
        </div>
      </div>
    </Modal>
  );
}

function RAResumoNumero({ valor, rotulo }) {
  return (
    <div style={{ background: '#F8FAFC', borderRadius: DS.radius.sm, padding: '10px 14px', minWidth: 110 }}>
      <div style={{ fontSize: 18, fontWeight: 800, color: DS.colors.text }}>{valor}</div>
      <div style={{ fontSize: 11, color: DS.colors.textSec }}>{rotulo}</div>
    </div>
  );
}

// =================================================
// RELATORIO DA ACAO (RA)
// =================================================
function RAReport({ event, onClose, onSaved, showToast }) {
  const [data, setData] = React.useState(null);
  const [reportId, setReportId] = React.useState(null);
  const [publicado, setPublicado] = React.useState(null);
  const [publicarOpen, setPublicarOpen] = React.useState(false);
  const [loading, setLoading] = React.useState(true);
  const [saving, setSaving] = React.useState(false);
  const [exporting, setExporting] = React.useState(false);
  const [atualizando, setAtualizando] = React.useState(false);
  const pdfRef = React.useRef(null);

  React.useEffect(() => {
    (async () => {
      const { data: salvo } = await sb.from('event_reports')
        .select('id, payload').eq('event_id', event.id).eq('type', 'RA').maybeSingle();

      if (salvo && salvo.payload) {
        // Ja existe: vale o que foi salvo. Ver "POR QUE NAO REGERA SOZINHO".
        setReportId(salvo.id);
        setData(salvo.payload);
      } else {
        setData(await coletarDadosDaAcao(event));
      }

      const { data: pub } = await sb.from('relatorios_publicados')
        .select('publicado_em, publicado_por_nome').eq('event_id', event.id).maybeSingle();
      setPublicado(pub || null);

      setLoading(false);
    })();
  }, [event.id]);

  const setCampo = (campo, valor) => setData(d => ({ ...d, [campo]: valor }));

  // Traz numeros novos e preserva o texto escrito por gente.
  const atualizarDaOperacao = async () => {
    setAtualizando(true);
    const fresco = await coletarDadosDaAcao(event);
    setData(d => {
      const mantidos = {};
      RA_CAMPOS_DE_TEXTO.forEach(c => { if (d[c]) mantidos[c] = d[c]; });
      return { ...fresco, ...mantidos };
    });
    setAtualizando(false);
  };

  const salvar = async () => {
    setSaving(true);
    let err;
    if (reportId) {
      const res = await sb.from('event_reports').update({ payload: data }).eq('id', reportId);
      err = res.error;
    } else {
      const { data: row, error } = await sb.from('event_reports')
        .insert({ event_id: event.id, type: 'RA', payload: data }).select().single();
      if (row) setReportId(row.id);
      err = error;
    }
    setSaving(false);
    if (err) {
      console.error('[RAReport.salvar] Supabase error:', err);
      alert('Erro ao salvar o relatório: ' + err.message);
      return false;
    }
    if (onSaved) onSaved();
    return true;
  };

  const exportarPDF = async () => {
    setExporting(true);
    await salvar();
    const nome = (event.name || 'acao').replace(/[^a-z0-9-_\s]/gi, '').trim().replace(/\s+/g, '_');
    await renderPDF(pdfRef.current, `Relatorio_${nome}.pdf`);
    setExporting(false);
  };

  if (loading || !data) {
    return (
      <Modal open={true} onClose={onClose} title={`Relatório da ação — ${event.name}`} width={900}>
        <Spinner />
      </Modal>
    );
  }

  const presentes = data.equipe.filter(p => p.chegou).length;

  return (
    <Modal open={true} onClose={onClose} title={`Relatório da ação — ${event.name}`} width={900}>
      <PDFStyles />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <RAResumoNumero valor={presentes + '/' + data.equipe.length} rotulo="presentes" />
          <RAResumoNumero valor={data.fotos.length} rotulo={data.fotos.length === 1 ? 'foto' : 'fotos'} />
          <RAResumoNumero valor={data.ocorrencias.length} rotulo={data.ocorrencias.length === 1 ? 'ocorrência' : 'ocorrências'} />
          {data.indicadores.filter(i => i.pessoas > 0).map(i => (
            <RAResumoNumero key={i.chave} valor={i.total} rotulo={i.label} />
          ))}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap',
                      background: '#F8FAFC', borderRadius: DS.radius.sm, padding: '10px 14px' }}>
          <div style={{ fontSize: 11.5, color: DS.colors.textSec }}>
            Números coletados da operação. Os textos abaixo são seus — a atualização não mexe neles.
          </div>
          <Btn variant="secondary" icon="zap" onClick={atualizarDaOperacao} disabled={atualizando}>
            {atualizando ? 'Atualizando...' : 'Atualizar com os dados da operação'}
          </Btn>
        </div>

        <SectionTitle n={1}>Objetivo</SectionTitle>
        <Textarea label="Objetivo da ação" value={data.objetivo} onChange={v => setCampo('objetivo', v)} rows={3}
                  placeholder="Puxado do Pedido de Produção quando existe" />

        <SectionTitle n={2}>Equipe e horários</SectionTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {data.equipe.map((p, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap',
                                  fontSize: 12.5, color: DS.colors.text, borderBottom: '1px solid ' + DS.colors.border, paddingBottom: 6 }}>
              <b>{p.nome}</b>
              <span style={{ color: DS.colors.textMuted, fontSize: 11 }}>{p.funcao}</span>
              <span style={{ marginLeft: 'auto', fontSize: 11.5, color: p.chegou ? '#15803D' : '#B45309' }}>
                {p.chegou ? ('Chegou ' + raHora(p.chegou) + (p.saiu ? ' · saiu ' + raHora(p.saiu) : ' · sem check-out'))
                          : (p.status === 'Falta' ? 'Faltou' : p.status === 'Recusado' ? 'Recusou' : 'Sem check-in')}
              </span>
            </div>
          ))}
        </div>

        <SectionTitle n={3}>Materiais distribuídos</SectionTitle>
        <Textarea label="Materiais" value={data.materiais} onChange={v => setCampo('materiais', v)} rows={2}
                  placeholder="Ex: 1.200 panfletos, 350 amostras" />

        <SectionTitle n={4}>Ocorrências ({data.ocorrencias.length})</SectionTitle>
        {data.ocorrencias.length === 0
          ? <div style={{ fontSize: 12.5, color: DS.colors.textSec }}>Nenhuma ocorrência registrada.</div>
          : data.ocorrencias.map((o, i) => (
              <div key={i} style={{ fontSize: 12.5, color: DS.colors.text, marginBottom: 6 }}>
                <b>{o.categoria}</b> <span style={{ color: DS.colors.textMuted, fontSize: 11 }}>{raHora(o.hora)}</span>
                <div style={{ color: DS.colors.textSec }}>{o.descricao}</div>
                {o.resposta && <div style={{ color: '#15803D', fontSize: 11.5 }}>Produção: {o.resposta}</div>}
              </div>
            ))}

        <SectionTitle n={5}>Observações</SectionTitle>
        <Textarea label="Observações (o que a equipe relatou no check-out)" value={data.observacoes}
                  onChange={v => setCampo('observacoes', v)} rows={3} />

        <SectionTitle n={6}>Resultado</SectionTitle>
        <Textarea label="Resultado da ação" value={data.resultado} onChange={v => setCampo('resultado', v)} rows={4} />

        {/* Publicacao (item 25). Fica depois do Resultado de proposito: a
            producao le o relatorio inteiro antes de chegar no botao que manda
            para o cliente. */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap',
                      background: publicado ? '#F0FDF4' : '#F8FAFC',
                      border: '1px solid ' + (publicado ? '#BBF7D0' : DS.colors.border),
                      borderRadius: DS.radius.sm, padding: '12px 14px' }}>
          <div style={{ fontSize: 12, color: DS.colors.textSec }}>
            {publicado
              ? <>Publicado no Portal do Cliente em {new Date(publicado.publicado_em).toLocaleString('pt-BR')}
                  {publicado.publicado_por_nome ? ' por ' + publicado.publicado_por_nome : ''}.</>
              : 'Ainda não publicado. Você escolhe o que o cliente vê.'}
          </div>
          <Btn variant={publicado ? 'secondary' : 'primary'} icon="portal" onClick={() => setPublicarOpen(true)}>
            {publicado ? 'Republicar' : 'Publicar no Portal do Cliente'}
          </Btn>
        </div>

        <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
          <Btn variant="secondary" onClick={onClose}>Fechar</Btn>
          <Btn variant="secondary" icon="check" onClick={salvar} disabled={saving}>
            {saving ? 'Salvando...' : 'Salvar'}
          </Btn>
          <Btn icon="download" onClick={exportarPDF} disabled={exporting}>
            {exporting ? 'Gerando PDF...' : 'Gerar relatório (PDF)'}
          </Btn>
        </div>
      </div>

      <RAPublicarModal
        open={publicarOpen}
        eventId={event.id}
        data={data}
        publicado={publicado}
        onClose={() => setPublicarOpen(false)}
        onPublicado={() => setPublicado({ publicado_em: new Date().toISOString(), publicado_por_nome: null })}
        showToast={showToast || (m => alert(m))}
      />

      {/* Fora da tela: e o que o html2pdf fotografa. */}
      <div style={{ position: 'absolute', left: -99999, top: 0 }}>
        <RAPDFTemplate ref={pdfRef} data={data} />
      </div>
    </Modal>
  );
}

// =================================================
// PDF
// =================================================
const RAPDFTemplate = React.forwardRef(({ data }, ref) => {
  const presentes = data.equipe.filter(p => p.chegou).length;
  const fotos = data.fotos.slice(0, RA_FOTOS_NO_PDF);

  return (
    <div ref={ref} style={{ width: PDF_WIDTH_PX, background: '#fff', color: '#0F172A',
                            fontFamily: 'Inter, sans-serif', fontSize: 11, lineHeight: 1.45, padding: '0 34px' }}>
      <div style={{ borderBottom: '3px solid ' + PROMOUP_ORANGE, paddingBottom: 10, marginBottom: 14 }}>
        <div style={{ fontSize: 18, fontWeight: 800 }}>Relatório da Ação</div>
        <div style={{ fontSize: 12, color: '#475569' }}>{data.acao}</div>
      </div>

      <SectionPDF n={1} title="Identificação" />
      <FieldPDF label="Cliente" value={data.cliente} />
      <FieldPDF label="Ação" value={data.acao} />
      <FieldPDF label="Data" value={fmtDateBR(data.data)} />
      <FieldPDF label="Local" value={data.local} />
      <FieldPDF label="Horário previsto" value={data.horario_previsto} />
      <FieldPDF label="Operação"
        value={[data.primeiro_checkin ? 'primeiro check-in às ' + raHora(data.primeiro_checkin) : null,
                data.ultimo_checkout ? 'último check-out às ' + raHora(data.ultimo_checkout) : null]
               .filter(Boolean).join(' · ')} />

      <SectionPDF n={2} title="Objetivo" />
      <ParagraphPDF value={data.objetivo} />

      <SectionPDF n={3} title={'Equipe (' + presentes + ' de ' + data.equipe.length + ' presentes)'} />
      <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 10 }}>
        <thead>
          <tr>
            <th style={tdHeadStyle}>Profissional</th>
            <th style={tdHeadStyle}>Função</th>
            <th style={tdHeadStyle}>Entrada</th>
            <th style={tdHeadStyle}>Saída</th>
          </tr>
        </thead>
        <tbody>
          {data.equipe.map((p, i) => (
            <tr key={i}>
              <td style={tdStyle}>{p.nome}</td>
              <td style={tdStyle}>{p.funcao}</td>
              <td style={tdStyle}>{raHora(p.chegou) || (p.status === 'Falta' ? 'Faltou' : '—')}</td>
              <td style={tdStyle}>{raHora(p.saiu) || '—'}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {data.indicadores.some(i => i.pessoas > 0) && (
        <>
          <SectionPDF n={4} title="Resultados registrados" />
          <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 10 }}>
            <thead>
              <tr>
                <th style={tdHeadStyle}>Indicador</th>
                <th style={tdHeadStyle}>Total</th>
                <th style={tdHeadStyle}>Meta</th>
                <th style={tdHeadStyle}>Atingido</th>
              </tr>
            </thead>
            <tbody>
              {data.indicadores.filter(i => i.pessoas > 0).map(i => (
                <tr key={i.chave}>
                  <td style={tdStyle}>{i.label}</td>
                  <td style={tdStyle}>{i.total}</td>
                  <td style={tdStyle}>{i.meta || '—'}</td>
                  <td style={tdStyle}>{i.meta ? Math.round(i.total / i.meta * 100) + '%' : '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </>
      )}

      <SectionPDF n={5} title="Materiais distribuídos" />
      <ParagraphPDF value={data.materiais} />

      <SectionPDF n={6} title={'Ocorrências (' + data.ocorrencias.length + ')'} />
      {data.ocorrencias.length === 0
        ? <ParagraphPDF value="Nenhuma ocorrência registrada." />
        : (
          <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 10 }}>
            <thead>
              <tr>
                <th style={tdHeadStyle}>Hora</th>
                <th style={tdHeadStyle}>Categoria</th>
                <th style={tdHeadStyle}>Descrição</th>
                <th style={tdHeadStyle}>Situação</th>
              </tr>
            </thead>
            <tbody>
              {data.ocorrencias.map((o, i) => (
                <tr key={i}>
                  <td style={tdStyle}>{raHora(o.hora)}</td>
                  <td style={tdStyle}>{o.categoria}</td>
                  <td style={tdStyle}>{o.descricao}{o.resposta ? ' — Produção: ' + o.resposta : ''}</td>
                  <td style={tdStyle}>{o.resolvida ? 'Resolvida' : 'Em aberto'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}

      <SectionPDF n={7} title="Observações" />
      <ParagraphPDF value={data.observacoes} />

      <SectionPDF n={8} title="Resultado" />
      <ParagraphPDF value={data.resultado} />

      {fotos.length > 0 && (
        <>
          <SectionPDF n={9} title={'Fotos (' + fotos.length + ' de ' + data.fotos.length + ')'} />
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {fotos.map((f, i) => (
              // pdf-avoid-break: sem isto a legenda cai numa pagina e a foto
              // fica na outra, o mesmo problema que o Relatorio Fotografico
              // teve antes da correcao do 9bf5951.
              <div key={i} className="pdf-avoid-break" style={{ width: '31%' }}>
                <img src={f.url} alt="" crossOrigin="anonymous"
                     style={{ width: '100%', aspectRatio: '4/3', objectFit: 'cover', borderRadius: 4, display: 'block' }} />
                <div style={{ fontSize: 9, fontWeight: 700, marginTop: 3 }}>{f.categoria}</div>
                {f.legenda && <div style={{ fontSize: 9, color: '#475569' }}>{f.legenda}</div>}
                <div style={{ fontSize: 8, color: '#94A3B8' }}>
                  {[f.autor, raHora(f.hora)].filter(Boolean).join(' · ')}
                </div>
              </div>
            ))}
          </div>
        </>
      )}

      <div style={{ marginTop: 18, paddingTop: 8, borderTop: '1px solid #CBD5E1', fontSize: 9, color: '#94A3B8' }}>
        Gerado pelo Promo Up 360 em {new Date(data.gerado_em).toLocaleString('pt-BR')}
      </div>
    </div>
  );
});

Object.assign(window, { RAReport, RAPDFTemplate, coletarDadosDaAcao });