// Event Reports Module — PP / RF / CONTRATO
// Fase 1: Pedido de Produção (PP)

// -------------------------------------------------
// PDF helper — usa html2pdf que respeita page-break-inside: avoid
// para nao cortar tabelas, secoes ou linhas no meio.
// -------------------------------------------------
const PDF_BREAK_CSS = `
  .pdf-section { page-break-after: avoid !important; break-after: avoid !important; }
  table { page-break-inside: auto; break-inside: auto; }
  tr { page-break-inside: avoid !important; break-inside: avoid !important; }
  thead { display: table-header-group; }
  .pdf-keep { page-break-inside: avoid !important; break-inside: avoid !important; }
`;

function PDFStyles() {
  return <style dangerouslySetInnerHTML={{ __html: PDF_BREAK_CSS }} />;
}

async function renderPDF(node, filename) {
  if (!node || !window.html2pdf) {
    alert('Biblioteca de PDF nao carregada. Recarregue a pagina.');
    return false;
  }
  // Clonamos o template para um container fora do modal antes de capturar.
  // Sem isso, o html2canvas captura o original (que esta com opacity:0
  // dentro do modal) e o PDF sai todo em branco. O clone tem opacity 1
  // mas fica num wrapper z-index -9999 atras do modal - invisivel pro
  // usuario, capturavel pra renderizacao.
  const wrapper = document.createElement('div');
  wrapper.style.cssText = 'position:fixed;top:0;left:0;z-index:-9999;background:transparent;pointer-events:none;';
  const clone = node.cloneNode(true);
  clone.style.position = 'relative';
  clone.style.left = '0';
  clone.style.top = '0';
  clone.style.opacity = '1';
  clone.style.zIndex = 'auto';
  clone.style.pointerEvents = 'none';
  wrapper.appendChild(clone);
  document.body.appendChild(wrapper);
  void clone.offsetHeight; // forca reflow
  // Aguarda imagens carregarem no clone
  await Promise.all(Array.from(clone.querySelectorAll('img')).map(img =>
    img.complete ? Promise.resolve() : new Promise(res => { img.onload = res; img.onerror = res; })
  ));
  const rect = clone.getBoundingClientRect();
  if (rect.width < 10 || rect.height < 10) {
    document.body.removeChild(wrapper);
    alert('Erro: o conteudo do PDF nao foi renderizado a tempo. Tente novamente.');
    return false;
  }
  const opt = {
    margin: [10, 10, 10, 10],
    filename,
    image: { type: 'jpeg', quality: 0.95 },
    html2canvas: { scale: 2, backgroundColor: '#ffffff', useCORS: true, allowTaint: false },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
    pagebreak: { mode: ['css', 'legacy', 'avoid-all'], avoid: ['tr', '.pdf-section', '.pdf-keep'] },
  };
  try {
    await window.html2pdf().set(opt).from(clone).save();
    return true;
  } catch (err) {
    console.error(err);
    alert('Erro ao gerar PDF: ' + (err.message || err));
    return false;
  } finally {
    if (wrapper.parentNode) document.body.removeChild(wrapper);
  }
}

// -------------------------------------------------
// Helpers de campo (Textarea, Checkbox, RadioGroup)
// -------------------------------------------------
function Textarea({ label, value, onChange, rows = 3, placeholder = '' }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {label && <label style={{ fontSize: 12, fontWeight: 600, color: DS.colors.textSec }}>{label}</label>}
      <textarea
        value={value || ''}
        rows={rows}
        placeholder={placeholder}
        onChange={e => onChange(e.target.value)}
        style={{
          border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm,
          padding: '9px 12px', fontSize: 13, color: DS.colors.text,
          outline: 'none', fontFamily: 'inherit', resize: 'vertical',
        }}
        onFocus={e => e.target.style.borderColor = DS.colors.primary}
        onBlur={e => e.target.style.borderColor = DS.colors.border}
      />
    </div>
  );
}

function Check({ label, checked, onChange }) {
  return (
    <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13, color: DS.colors.text, padding: '6px 0' }}>
      <input type="checkbox" checked={!!checked} onChange={e => onChange(e.target.checked)} style={{ width: 16, height: 16, cursor: 'pointer', accentColor: DS.colors.primary }} />
      <span>{label}</span>
    </label>
  );
}

function RadioGroup({ label, value, onChange, options, inline = true }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {label && <label style={{ fontSize: 12, fontWeight: 600, color: DS.colors.textSec }}>{label}</label>}
      <div style={{ display: 'flex', flexDirection: inline ? 'row' : 'column', gap: inline ? 16 : 6, flexWrap: 'wrap' }}>
        {options.map(o => (
          <label key={o.value} style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 13, color: DS.colors.text }}>
            <input type="radio" checked={value === o.value} onChange={() => onChange(o.value)} style={{ accentColor: DS.colors.primary, cursor: 'pointer' }} />
            <span>{o.label}</span>
          </label>
        ))}
      </div>
    </div>
  );
}

// -------------------------------------------------
// Estado inicial do PP (todos os campos)
// -------------------------------------------------
const PP_ESTRUTURAS = [
  { value: 'stand', label: 'Stand personalizado' },
  { value: 'balcao', label: 'Balcão promocional' },
  { value: 'carrinho', label: 'Carrinho Promoup' },
  { value: 'totem', label: 'Totem / Backdrop' },
  { value: 'tenda', label: 'Tenda' },
  { value: 'roleta', label: 'Roleta / Jogo interativo' },
];

const PP_MATERIAIS_BASE = [
  { item: 'Flyers / Panfletos', qtde: '', status: '' },
  { item: 'Brindes', qtde: '', status: '' },
  { item: 'Produtos para sampling', qtde: '', status: '' },
  { item: 'Uniforme', qtde: '', status: '' },
  { item: 'Equipamento extra', qtde: '', status: '' },
];

const PP_CHECKLIST_LABELS = [
  ['arte_aprovada', 'Arte aprovada'],
  ['materiais_impressos', 'Materiais impressos'],
  ['brindes_separados', 'Brindes separados'],
  ['equipe_confirmada', 'Equipe confirmada'],
  ['logistica_confirmada', 'Logística confirmada'],
  ['checklist_enviado', 'Checklist enviado ao supervisor'],
  ['cliente_alinhado', 'Cliente alinhado sobre horários'],
  ['plano_b', 'Plano B em caso de chuva'],
];

function buildDefaultPP(event, appUsers, client) {
  const vendedor = appUsers.find(u => u.id === event.vendedor_id);
  const resp = appUsers.find(u => u.id === event.responsavel_producao_id);
  const today = new Date().toISOString().slice(0, 10);
  return {
    cliente: event.client || '',
    projeto: '',
    evento: event.name || '',
    codigo: '',
    resp_comercial: vendedor ? (vendedor.name || vendedor.email) : '',
    resp_producao: resp ? (resp.name || resp.email) : '',
    data_envio: today,

    data_ativacao: event.date_iso || '',
    horario_inicio: event.time || '',
    horario_fim: '',
    horario_montagem: '',
    horario_desmontagem: '',
    local: event.location || '',
    cidade_estado: client?.city || '',
    ponto_referencia: '',

    objetivo: '',

    estruturas: [],
    estruturas_outros: '',
    materiais: PP_MATERIAIS_BASE.map(m => ({ ...m })),

    equipe: {
      promotores: { qtde: '', nome: '' },
      supervisor: { qtde: '', nome: '' },
      coordenador: { qtde: '', nome: '' },
      motorista: { qtde: '', nome: '' },
    },

    origem_materiais: '',
    responsavel_retirada: '',
    veiculo: '',
    horario_saida: '',

    cronograma: {
      chegada: '', montagem: '', inicio: '', pausa: '',
      encerramento: '', desmontagem: '', saida: '',
    },

    script: '',
    regras: '',
    dress_code: '',

    checklist: PP_CHECKLIST_LABELS.reduce((acc, [k]) => ({ ...acc, [k]: false }), {}),

    resultados: '',
    pessoas_impactadas: '',
    fotos_recebidas: '',
    observacoes: '',

    assinatura_nome: resp ? (resp.name || resp.email) : '',
    assinatura_cargo: 'Produção Promoup',
    assinatura_data: today,
  };
}

// -------------------------------------------------
// Layout helpers
// -------------------------------------------------
function SectionTitle({ n, children }) {
  return (
    <div style={{ marginTop: 24, marginBottom: 12, paddingBottom: 8, borderBottom: `2px solid ${DS.colors.border}`, fontSize: 14, fontWeight: 700, color: DS.colors.text, letterSpacing: '0.02em', textTransform: 'uppercase' }}>
      <span style={{ color: DS.colors.primary, marginRight: 8 }}>{n}.</span>{children}
    </div>
  );
}

const fmtDateBR = (iso) => {
  if (!iso) return '';
  const [y, m, d] = iso.split('-');
  if (!y || !m || !d) return iso;
  return `${d}/${m}/${y}`;
};

// =================================================
// COMPONENTE PRINCIPAL — dispatcher por tipo
// =================================================
function EventReport(props) {
  if (props.type === 'RF') return <RFReport {...props} />;
  return <PPReport {...props} />;
}

// =================================================
// PEDIDO DE PRODUÇÃO (PP)
// =================================================
function PPReport({ event, type, appUsers, onClose, onSaved }) {
  const [data, setData] = React.useState(null);
  const [client, setClient] = React.useState(null);
  const [reportId, setReportId] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [saving, setSaving] = React.useState(false);
  const [exporting, setExporting] = React.useState(false);
  const pdfTemplateRef = React.useRef(null);

  // Carrega cliente (CRM) + report existente
  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      const [clientRes, reportRes] = await Promise.all([
        sb.from('clients').select('*').eq('name', event.client).maybeSingle(),
        sb.from('event_reports').select('*').eq('event_id', event.id).eq('type', 'PP').maybeSingle(),
      ]);
      if (cancelled) return;
      const c = clientRes.data || null;
      setClient(c);
      if (reportRes.data) {
        setReportId(reportRes.data.id);
        setData({ ...buildDefaultPP(event, appUsers, c), ...reportRes.data.payload });
      } else {
        setData(buildDefaultPP(event, appUsers, c));
      }
      setLoading(false);
    })();
    return () => { cancelled = true; };
  }, [event.id]);

  const setField = (key, value) => setData(d => ({ ...d, [key]: value }));
  const setNested = (group, key, value) => setData(d => ({ ...d, [group]: { ...d[group], [key]: value } }));
  const toggleEstrutura = (v) => setData(d => {
    const has = d.estruturas.includes(v);
    return { ...d, estruturas: has ? d.estruturas.filter(x => x !== v) : [...d.estruturas, v] };
  });
  const setMaterial = (idx, key, value) => setData(d => ({
    ...d,
    materiais: d.materiais.map((m, i) => i === idx ? { ...m, [key]: value } : m),
  }));

  const handleSave = async () => {
    setSaving(true);
    let err = null;
    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: 'PP', payload: data,
      }).select().single();
      if (row) setReportId(row.id);
      err = error;
    }
    setSaving(false);
    if (err) {
      alert('Erro ao salvar Pedido de Producao: ' + err.message);
      return false;
    }
    if (onSaved) onSaved();
    return true;
  };

  const handleExportPDF = async () => {
    setExporting(true);
    await handleSave();
    const safeName = (event.name || 'evento').replace(/[^a-z0-9-_\s]/gi, '').trim().replace(/\s+/g, '_');
    await renderPDF(pdfTemplateRef.current, `PP_${safeName}.pdf`);
    setExporting(false);
  };

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

  const title = `Pedido de Produção — ${event.name}`;
  const actions = (
    <>
      <Btn variant="secondary" icon="check" onClick={handleSave} disabled={saving || exporting} size="sm">
        {saving ? 'Salvando…' : 'Salvar'}
      </Btn>
      <Btn icon="download" onClick={handleExportPDF} disabled={exporting} size="sm">
        {exporting ? 'Gerando…' : 'Exportar PDF'}
      </Btn>
    </>
  );

  // ===============================================
  // FORMULÁRIO
  // ===============================================
  return (
    <Modal open={true} onClose={onClose} title={title} width={960} extra={actions}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>

        <SectionTitle n="1">Informações Gerais do Projeto</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <Input label="Cliente" value={data.cliente} onChange={v => setField('cliente', v)} />
          <Input label="Projeto / Campanha" value={data.projeto} onChange={v => setField('projeto', v)} />
          <Input label="Evento / Ação" value={data.evento} onChange={v => setField('evento', v)} />
          <Input label="Código interno Promoup" value={data.codigo} onChange={v => setField('codigo', v)} />
          <Input label="Responsável Comercial" value={data.resp_comercial} onChange={v => setField('resp_comercial', v)} />
          <Input label="Responsável Produção / Operação" value={data.resp_producao} onChange={v => setField('resp_producao', v)} />
          <Input label="Data de envio do pedido" type="date" value={data.data_envio} onChange={v => setField('data_envio', v)} />
        </div>

        <SectionTitle n="2">Dados da Ação</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
          <Input label="Data(s) da ativação" type="date" value={data.data_ativacao} onChange={v => setField('data_ativacao', v)} />
          <Input label="Horário da ação — início" value={data.horario_inicio} onChange={v => setField('horario_inicio', v)} placeholder="09:00" />
          <Input label="Horário da ação — fim" value={data.horario_fim} onChange={v => setField('horario_fim', v)} placeholder="18:00" />
          <Input label="Horário de montagem" value={data.horario_montagem} onChange={v => setField('horario_montagem', v)} />
          <Input label="Horário de desmontagem" value={data.horario_desmontagem} onChange={v => setField('horario_desmontagem', v)} />
          <Input label="Cidade / Estado" value={data.cidade_estado} onChange={v => setField('cidade_estado', v)} />
        </div>
        <div style={{ marginTop: 14 }}>
          <Input label="Local / Endereço completo" value={data.local} onChange={v => setField('local', v)} />
        </div>
        <div style={{ marginTop: 14 }}>
          <Input label="Ponto de referência" value={data.ponto_referencia} onChange={v => setField('ponto_referencia', v)} />
        </div>

        <SectionTitle n="3">Objetivo da Ativação</SectionTitle>
        <Textarea label="Descreva o propósito da ação (sampling, divulgação, experiência, engajamento etc.)" value={data.objetivo} onChange={v => setField('objetivo', v)} rows={4} />

        <SectionTitle n="4">Estrutura e Materiais Necessários</SectionTitle>
        <div style={{ fontSize: 13, fontWeight: 600, color: DS.colors.text, marginBottom: 8 }}>Estruturas Promoup</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, marginBottom: 12 }}>
          {PP_ESTRUTURAS.map(e => (
            <Check key={e.value} label={e.label} checked={data.estruturas.includes(e.value)} onChange={() => toggleEstrutura(e.value)} />
          ))}
        </div>
        <Input label="Outros (especificar)" value={data.estruturas_outros} onChange={v => setField('estruturas_outros', v)} />

        <div style={{ fontSize: 13, fontWeight: 600, color: DS.colors.text, margin: '20px 0 8px' }}>Materiais de Produção</div>
        <div style={{ border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 2fr', gap: 0, background: '#F8FAFC', padding: '8px 12px', fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
            <div>Item</div><div>Quantidade</div><div>Status</div>
          </div>
          {data.materiais.map((m, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 2fr', gap: 8, padding: '8px 12px', borderTop: `1px solid ${DS.colors.border}`, alignItems: 'center' }}>
              <div style={{ fontSize: 13, color: DS.colors.text }}>{m.item}</div>
              <Input value={m.qtde} onChange={v => setMaterial(i, 'qtde', v)} placeholder="0" />
              <Input value={m.status} onChange={v => setMaterial(i, 'status', v)} placeholder="Ex: OK / Produzir / Cliente envia" />
            </div>
          ))}
        </div>

        <SectionTitle n="5">Equipe Operacional</SectionTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            ['promotores', 'Promotores(as)'],
            ['supervisor', 'Supervisor(a)'],
            ['coordenador', 'Coordenador(a)'],
            ['motorista', 'Motorista / Apoio'],
          ].map(([k, label]) => (
            <div key={k} style={{ display: 'grid', gridTemplateColumns: '1fr 100px 2fr', gap: 12, alignItems: 'end' }}>
              <div style={{ fontSize: 13, color: DS.colors.text, paddingBottom: 9, fontWeight: 600 }}>{label}</div>
              <Input label="Qtde" value={data.equipe[k].qtde} onChange={v => setNested('equipe', k, { ...data.equipe[k], qtde: v })} />
              <Input label="Nome (se definido)" value={data.equipe[k].nome} onChange={v => setNested('equipe', k, { ...data.equipe[k], nome: v })} />
            </div>
          ))}
        </div>

        <SectionTitle n="6">Logística e Transporte</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <Input label="Materiais saem de" value={data.origem_materiais} onChange={v => setField('origem_materiais', v)} />
          <Input label="Responsável pela retirada" value={data.responsavel_retirada} onChange={v => setField('responsavel_retirada', v)} />
          <Input label="Horário de saída" value={data.horario_saida} onChange={v => setField('horario_saida', v)} />
        </div>
        <div style={{ marginTop: 14 }}>
          <RadioGroup
            label="Veículo necessário"
            value={data.veiculo}
            onChange={v => setField('veiculo', v)}
            options={[
              { value: 'carro', label: 'Carro' },
              { value: 'van', label: 'Van' },
              { value: 'caminhao', label: 'Caminhão pequeno' },
              { value: 'cliente', label: 'Cliente entrega no local' },
            ]}
          />
        </div>

        <SectionTitle n="7">Cronograma do Dia</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {[
            ['chegada', 'Chegada equipe'],
            ['montagem', 'Montagem estrutura'],
            ['inicio', 'Início ativação'],
            ['pausa', 'Pausa / Revezamento'],
            ['encerramento', 'Encerramento'],
            ['desmontagem', 'Desmontagem'],
            ['saida', 'Saída do local'],
          ].map(([k, label]) => (
            <Input key={k} label={label} value={data.cronograma[k]} onChange={v => setNested('cronograma', k, v)} placeholder="00:00" />
          ))}
        </div>

        <SectionTitle n="8">Orientações Importantes para a Equipe</SectionTitle>
        <Textarea label="Script de abordagem / fala padrão" value={data.script} onChange={v => setField('script', v)} rows={3} />
        <div style={{ marginTop: 12 }}>
          <Textarea label="Regras do local" value={data.regras} onChange={v => setField('regras', v)} rows={2} />
        </div>
        <div style={{ marginTop: 12 }}>
          <Textarea label="Dress code / uniforme" value={data.dress_code} onChange={v => setField('dress_code', v)} rows={2} />
        </div>

        <SectionTitle n="9">Checklist Final de Produção</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0 }}>
          {PP_CHECKLIST_LABELS.map(([k, label]) => (
            <Check key={k} label={label} checked={data.checklist[k]} onChange={v => setNested('checklist', k, v)} />
          ))}
        </div>

        <SectionTitle n="10">Relatório Pós-Ação</SectionTitle>
        <div style={{ fontSize: 11, color: DS.colors.textMuted, marginBottom: 8 }}>(Preencher depois do evento)</div>
        <Textarea label="Resultados gerais" value={data.resultados} onChange={v => setField('resultados', v)} rows={3} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 12 }}>
          <Input label="Quantidade de pessoas impactadas" type="number" value={data.pessoas_impactadas} onChange={v => setField('pessoas_impactadas', v)} />
          <RadioGroup label="Fotos recebidas" value={data.fotos_recebidas} onChange={v => setField('fotos_recebidas', v)} options={[{ value: 'sim', label: 'Sim' }, { value: 'nao', label: 'Não' }]} />
        </div>
        <div style={{ marginTop: 12 }}>
          <Textarea label="Observações" value={data.observacoes} onChange={v => setField('observacoes', v)} rows={3} />
        </div>

        <div style={{ marginTop: 24, marginBottom: 12, fontSize: 13, fontWeight: 700, color: DS.colors.text }}>Assinatura — Produção Promoup</div>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 2fr 1fr', gap: 14 }}>
          <Input label="Nome" value={data.assinatura_nome} onChange={v => setField('assinatura_nome', v)} />
          <Input label="Cargo" value={data.assinatura_cargo} onChange={v => setField('assinatura_cargo', v)} />
          <Input label="Data" type="date" value={data.assinatura_data} onChange={v => setField('assinatura_data', v)} />
        </div>

        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 24, paddingTop: 16, borderTop: `1px solid ${DS.colors.border}` }}>
          <Btn variant="secondary" onClick={onClose}>Fechar</Btn>
          <Btn variant="secondary" icon="check" onClick={handleSave} disabled={saving || exporting}>{saving ? 'Salvando…' : 'Salvar'}</Btn>
          <Btn icon="download" onClick={handleExportPDF} disabled={exporting}>{exporting ? 'Gerando PDF…' : 'Exportar PDF'}</Btn>
        </div>
      </div>

      {/* Template oculto usado pra renderizar o PDF */}
      <PPPDFTemplate ref={pdfTemplateRef} data={data} event={event} />
    </Modal>
  );
}

// =================================================
// TEMPLATE PDF — renderiza o documento estilo Word
// =================================================
const PPPDFTemplate = React.forwardRef(({ data, event }, ref) => {
  const labelEstrutura = (v) => (PP_ESTRUTURAS.find(e => e.value === v) || {}).label;
  const labelVeiculo = {
    carro: 'Carro', van: 'Van', caminhao: 'Caminhão pequeno', cliente: 'Cliente entrega no local',
  };

  const checkbox = (on) => on ? '☒' : '☐';

  return (
    <div
      ref={ref}
      style={{
        position: 'fixed',
        left: 0,
        top: 0,
        opacity: 0,
        pointerEvents: 'none',
        zIndex: -1,
        width: '794px',           // A4 a 96dpi
        padding: '48px 56px',
        background: '#fff',
        fontFamily: 'Arial, Helvetica, sans-serif',
        color: '#000',
        fontSize: '11px',
        lineHeight: 1.45,
      }}
    >
      <PDFStyles />
      {/* Cabeçalho com logo */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24, paddingBottom: 16, borderBottom: '2px solid #EA6B00' }}>
        <img src="logo.png" alt="Promoup" style={{ height: 48 }} crossOrigin="anonymous" />
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#EA6B00', letterSpacing: '0.04em' }}>PEDIDO DE PRODUÇÃO</div>
          <div style={{ fontSize: 11, color: '#475569', marginTop: 2 }}>Ações Promocionais | Promoup</div>
        </div>
      </div>

      {/* 1. Informações Gerais */}
      <SectionPDF n="1" title="Informações Gerais do Projeto" />
      <FieldPDF label="Cliente" value={data.cliente} />
      <FieldPDF label="Projeto / Campanha" value={data.projeto} />
      <FieldPDF label="Evento / Ação" value={data.evento} />
      <FieldPDF label="Código interno Promoup" value={data.codigo} />
      <FieldPDF label="Responsável Comercial" value={data.resp_comercial} />
      <FieldPDF label="Responsável Produção / Operação" value={data.resp_producao} />
      <FieldPDF label="Data de envio do pedido" value={fmtDateBR(data.data_envio)} />

      {/* 2. Dados da Ação */}
      <SectionPDF n="2" title="Dados da Ação" />
      <FieldPDF label="Data(s) da ativação" value={fmtDateBR(data.data_ativacao)} />
      <FieldPDF label="Horário da ação" value={`${data.horario_inicio || '____'} às ${data.horario_fim || '____'}`} />
      <FieldPDF label="Horário de montagem" value={data.horario_montagem} />
      <FieldPDF label="Horário de desmontagem" value={data.horario_desmontagem} />
      <FieldPDF label="Local / Endereço completo" value={data.local} />
      <FieldPDF label="Cidade / Estado" value={data.cidade_estado} />
      <FieldPDF label="Ponto de referência" value={data.ponto_referencia} />

      {/* 3. Objetivo */}
      <SectionPDF n="3" title="Objetivo da Ativação" />
      <ParagraphPDF value={data.objetivo} />

      {/* 4. Estruturas e Materiais */}
      <SectionPDF n="4" title="Estrutura e Materiais Necessários" />
      <div style={{ fontWeight: 700, marginBottom: 6 }}>Estruturas Promoup</div>
      <div style={{ marginBottom: 12 }}>
        {PP_ESTRUTURAS.map(e => (
          <div key={e.value} style={{ marginBottom: 3 }}>
            ({data.estruturas.includes(e.value) ? 'X' : ' '}) {e.label}
          </div>
        ))}
        {data.estruturas_outros && <div>(X) Outros: {data.estruturas_outros}</div>}
      </div>

      <div style={{ fontWeight: 700, marginBottom: 6 }}>Materiais de Produção</div>
      <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 12 }}>
        <thead>
          <tr style={{ background: '#F1F5F9' }}>
            <th style={tdHeadStyle}>Item</th>
            <th style={tdHeadStyle}>Quantidade</th>
            <th style={tdHeadStyle}>Status</th>
          </tr>
        </thead>
        <tbody>
          {data.materiais.map((m, i) => (
            <tr key={i}>
              <td style={tdStyle}>{m.item}</td>
              <td style={tdStyle}>{m.qtde || '—'}</td>
              <td style={tdStyle}>{m.status || '—'}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* 5. Equipe */}
      <SectionPDF n="5" title="Equipe Operacional" />
      <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 12 }}>
        <thead>
          <tr style={{ background: '#F1F5F9' }}>
            <th style={tdHeadStyle}>Função</th>
            <th style={tdHeadStyle}>Qtde</th>
            <th style={tdHeadStyle}>Nome (se definido)</th>
          </tr>
        </thead>
        <tbody>
          {[
            ['promotores', 'Promotores(as)'],
            ['supervisor', 'Supervisor(a)'],
            ['coordenador', 'Coordenador(a)'],
            ['motorista', 'Motorista / Apoio'],
          ].map(([k, label]) => (
            <tr key={k}>
              <td style={tdStyle}>{label}</td>
              <td style={tdStyle}>{data.equipe[k].qtde || '—'}</td>
              <td style={tdStyle}>{data.equipe[k].nome || '—'}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* 6. Logística */}
      <SectionPDF n="6" title="Logística e Transporte" />
      <FieldPDF label="Materiais saem de" value={data.origem_materiais} />
      <FieldPDF label="Responsável pela retirada" value={data.responsavel_retirada} />
      <FieldPDF label="Veículo necessário" value={labelVeiculo[data.veiculo] || '—'} />
      <FieldPDF label="Horário de saída" value={data.horario_saida} />

      {/* 7. Cronograma */}
      <SectionPDF n="7" title="Cronograma do Dia" />
      <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 12 }}>
        <thead>
          <tr style={{ background: '#F1F5F9' }}>
            <th style={tdHeadStyle}>Horário</th>
            <th style={tdHeadStyle}>Atividade</th>
          </tr>
        </thead>
        <tbody>
          {[
            ['chegada', 'Chegada equipe'],
            ['montagem', 'Montagem estrutura'],
            ['inicio', 'Início ativação'],
            ['pausa', 'Pausa / Revezamento'],
            ['encerramento', 'Encerramento'],
            ['desmontagem', 'Desmontagem'],
            ['saida', 'Saída do local'],
          ].map(([k, label]) => (
            <tr key={k}>
              <td style={tdStyle}>{data.cronograma[k] || '—'}</td>
              <td style={tdStyle}>{label}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* 8. Orientações */}
      <SectionPDF n="8" title="Orientações Importantes para a Equipe" />
      <FieldPDF label="Script de abordagem / fala padrão" value={data.script} block />
      <FieldPDF label="Regras do local" value={data.regras} block />
      <FieldPDF label="Dress code / uniforme" value={data.dress_code} block />

      {/* 9. Checklist */}
      <SectionPDF n="9" title="Checklist Final de Produção" />
      <div style={{ marginBottom: 12 }}>
        {PP_CHECKLIST_LABELS.map(([k, label]) => (
          <div key={k} style={{ marginBottom: 3 }}>
            ({data.checklist[k] ? 'X' : ' '}) {label}
          </div>
        ))}
      </div>

      {/* 10. Pós-ação */}
      <SectionPDF n="10" title="Relatório Pós-Ação" />
      <FieldPDF label="Resultados gerais" value={data.resultados} block />
      <FieldPDF label="Quantidade de pessoas impactadas" value={data.pessoas_impactadas} />
      <FieldPDF label="Fotos recebidas" value={data.fotos_recebidas === 'sim' ? '(X) Sim ( ) Não' : data.fotos_recebidas === 'nao' ? '( ) Sim (X) Não' : '( ) Sim ( ) Não'} />
      <FieldPDF label="Observações" value={data.observacoes} block />

      {/* Assinatura */}
      <div className="pdf-keep" style={{ marginTop: 32, paddingTop: 16, borderTop: '1px solid #94A3B8' }}>
        <div style={{ fontWeight: 700, marginBottom: 12 }}>Assinatura Produção Promoup</div>
        <FieldPDF label="Nome" value={data.assinatura_nome} />
        <FieldPDF label="Cargo" value={data.assinatura_cargo} />
        <FieldPDF label="Data" value={fmtDateBR(data.assinatura_data)} />
        <div style={{ marginTop: 30, borderTop: '1px solid #000', width: '60%', paddingTop: 4, fontSize: 10 }}>Assinatura</div>
      </div>
    </div>
  );
});

// Helpers PDF (cell styles + sub-componentes)
const tdHeadStyle = { border: '1px solid #94A3B8', padding: '6px 10px', textAlign: 'left', fontSize: 11, fontWeight: 700 };
const tdStyle = { border: '1px solid #CBD5E1', padding: '6px 10px', fontSize: 11, verticalAlign: 'top' };

function SectionPDF({ n, title }) {
  return (
    <div className="pdf-section" style={{ marginTop: 16, marginBottom: 8, paddingBottom: 4, borderBottom: '1px solid #94A3B8', fontWeight: 700, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.04em', pageBreakAfter: 'avoid', breakAfter: 'avoid' }}>
      <span style={{ color: '#EA6B00', marginRight: 6 }}>{n}.</span>{title}
    </div>
  );
}

function FieldPDF({ label, value, block = false }) {
  if (block) {
    return (
      <div style={{ marginBottom: 8 }}>
        <div style={{ fontWeight: 700, marginBottom: 2 }}>{label}:</div>
        <div style={{ whiteSpace: 'pre-wrap', minHeight: 14 }}>{value || '—'}</div>
      </div>
    );
  }
  return (
    <div style={{ marginBottom: 4 }}>
      <span style={{ fontWeight: 700 }}>{label}:</span> {value || '—'}
    </div>
  );
}

function ParagraphPDF({ value }) {
  return <div style={{ whiteSpace: 'pre-wrap', marginBottom: 12, minHeight: 14 }}>{value || '—'}</div>;
}

// =================================================
// RELATÓRIO FOTOGRÁFICO (RF)
// =================================================
const PROMOUP_ORANGE = '#EA6B00';

function buildDefaultRF(event, client) {
  return {
    numero: `RF-${event.id}`,
    cliente_nome: event.client || (client?.name || ''),
    cliente_cnpj: client?.cnpj || '',
    cliente_email: client?.email || '',
    cliente_contato: client?.contact || client?.phone || '',
    cliente_endereco: client?.address || '',
    data: event.date_iso || '',
    execucao: '',
    hora: event.time || '',
    tipo: event.type || '',
    nome_acao: event.name || '',
    qtde_material_recebido: '',
    publico_alvo: '',
    fotos: Array.from({ length: 8 }, () => ({ url: '', titulo: '' })),
    atividades: '',
    resultados: '',
    desafios: '',
    consideracoes: '',
    supervisor: '',
    assinatura_data: new Date().toISOString().slice(0, 10),
  };
}

async function uploadPhoto(file, eventId, slotIdx) {
  const ext = (file.name.split('.').pop() || 'jpg').toLowerCase();
  const path = `${eventId}/foto-${slotIdx + 1}-${Date.now()}.${ext}`;
  const { error } = await sb.storage.from('event-photos').upload(path, file, { upsert: true, contentType: file.type });
  if (error) throw error;
  const { data: { publicUrl } } = sb.storage.from('event-photos').getPublicUrl(path);
  return publicUrl;
}

function PhotoSlot({ photo, idx, onChange, onUpload, uploading }) {
  const inputRef = React.useRef(null);
  const handleFile = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    onUpload(idx, file);
    e.target.value = ''; // permite re-upload do mesmo arquivo
  };
  const clearPhoto = () => onChange(idx, { ...photo, url: '' });
  return (
    <div style={{ border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, overflow: 'hidden', background: '#fff' }}>
      <div style={{ background: PROMOUP_ORANGE, color: '#fff', padding: '6px 10px', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
        Foto {idx + 1}
      </div>
      <div
        onClick={() => !photo.url && inputRef.current?.click()}
        style={{
          width: '100%', aspectRatio: '4/3', background: '#F8FAFC',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: photo.url ? 'default' : 'pointer',
          position: 'relative', overflow: 'hidden',
        }}
      >
        {uploading ? (
          <Spinner size={24} />
        ) : photo.url ? (
          <>
            <img src={photo.url} alt={`Foto ${idx + 1}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} crossOrigin="anonymous" />
            <button onClick={clearPhoto} title="Remover" style={{ position: 'absolute', top: 6, right: 6, background: 'rgba(15,23,42,0.7)', color: '#fff', border: 'none', borderRadius: 4, width: 22, height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
              <Icon name="x" size={12} color="#fff" />
            </button>
          </>
        ) : (
          <div style={{ textAlign: 'center', color: DS.colors.textMuted, fontSize: 11 }}>
            <Icon name="photo" size={28} color={DS.colors.textMuted} />
            <div style={{ marginTop: 4 }}>Clique para anexar</div>
          </div>
        )}
        <input ref={inputRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleFile} />
      </div>
      <div style={{ padding: 8 }}>
        <input
          type="text"
          value={photo.titulo}
          onChange={e => onChange(idx, { ...photo, titulo: e.target.value })}
          placeholder="Título"
          style={{ width: '100%', border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, padding: '6px 8px', fontSize: 12, outline: 'none', fontFamily: 'inherit' }}
        />
      </div>
    </div>
  );
}

function RFReport({ event, appUsers, onClose, onSaved }) {
  const [data, setData] = React.useState(null);
  const [client, setClient] = React.useState(null);
  const [reportId, setReportId] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [saving, setSaving] = React.useState(false);
  const [exporting, setExporting] = React.useState(false);
  const [uploadingIdx, setUploadingIdx] = React.useState(null);
  const pdfTemplateRef = React.useRef(null);

  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      const [clientRes, reportRes] = await Promise.all([
        sb.from('clients').select('*').eq('name', event.client).maybeSingle(),
        sb.from('event_reports').select('*').eq('event_id', event.id).eq('type', 'RF').maybeSingle(),
      ]);
      if (cancelled) return;
      const c = clientRes.data || null;
      setClient(c);
      if (reportRes.data) {
        setReportId(reportRes.data.id);
        const merged = { ...buildDefaultRF(event, c), ...reportRes.data.payload };
        // Garante 8 slots de foto
        const fotos = Array.from({ length: 8 }, (_, i) => merged.fotos?.[i] || { url: '', titulo: '' });
        setData({ ...merged, fotos });
      } else {
        setData(buildDefaultRF(event, c));
      }
      setLoading(false);
    })();
    return () => { cancelled = true; };
  }, [event.id]);

  const setField = (key, value) => setData(d => ({ ...d, [key]: value }));
  const setPhoto = (idx, photo) => setData(d => ({
    ...d,
    fotos: d.fotos.map((p, i) => i === idx ? photo : p),
  }));

  const handleUploadPhoto = async (idx, file) => {
    setUploadingIdx(idx);
    try {
      const url = await uploadPhoto(file, event.id, idx);
      setPhoto(idx, { ...data.fotos[idx], url });
    } catch (err) {
      console.error(err);
      alert('Erro ao enviar foto: ' + (err.message || err));
    }
    setUploadingIdx(null);
  };

  const handleSave = async () => {
    setSaving(true);
    let err = null;
    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: 'RF', payload: data,
      }).select().single();
      if (row) setReportId(row.id);
      err = error;
    }
    setSaving(false);
    if (err) {
      alert('Erro ao salvar Relatorio Fotografico: ' + err.message);
      return false;
    }
    if (onSaved) onSaved();
    return true;
  };

  const handleExportPDF = async () => {
    setExporting(true);
    await handleSave();
    const safeName = (event.name || 'evento').replace(/[^a-z0-9-_\s]/gi, '').trim().replace(/\s+/g, '_');
    await renderPDF(pdfTemplateRef.current, `RF_${safeName}.pdf`);
    setExporting(false);
  };

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

  const title = `Relatório Fotográfico — ${event.name}`;
  const actions = (
    <>
      <Btn variant="secondary" icon="check" onClick={handleSave} disabled={saving || exporting} size="sm">
        {saving ? 'Salvando…' : 'Salvar'}
      </Btn>
      <Btn icon="download" onClick={handleExportPDF} disabled={exporting} size="sm">
        {exporting ? 'Gerando…' : 'Exportar PDF'}
      </Btn>
    </>
  );

  return (
    <Modal open={true} onClose={onClose} title={title} width={960} extra={actions}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14, marginBottom: 16 }}>
          <Input label="Nº do Relatório" value={data.numero} onChange={v => setField('numero', v)} />
          <Input label="Data" type="date" value={data.data} onChange={v => setField('data', v)} />
        </div>

        <SectionTitle n="1">Informações do Cliente</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <Input label="Nome do cliente" value={data.cliente_nome} onChange={v => setField('cliente_nome', v)} />
          <Input label="CNPJ" value={data.cliente_cnpj} onChange={v => setField('cliente_cnpj', v)} />
          <Input label="Email" value={data.cliente_email} onChange={v => setField('cliente_email', v)} />
          <Input label="Contato" value={data.cliente_contato} onChange={v => setField('cliente_contato', v)} />
          <Input label="Endereço" value={data.cliente_endereco} onChange={v => setField('cliente_endereco', v)} style={{ gridColumn: '1 / -1' }} />
        </div>

        <SectionTitle n="2">Informações da Ação</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
          <Input label="Execução (equipe)" value={data.execucao} onChange={v => setField('execucao', v)} />
          <Input label="Hora" value={data.hora} onChange={v => setField('hora', v)} placeholder="09:00" />
          <Input label="Tipo de Ação/Evento" value={data.tipo} onChange={v => setField('tipo', v)} />
        </div>
        <div style={{ marginTop: 14 }}>
          <Input label="Nome da Ação/Evento" value={data.nome_acao} onChange={v => setField('nome_acao', v)} />
        </div>

        <SectionTitle n="3">Quantidade Material Recebido</SectionTitle>
        <Textarea value={data.qtde_material_recebido} onChange={v => setField('qtde_material_recebido', v)} rows={2} />

        <SectionTitle n="4">Público Alvo</SectionTitle>
        <Textarea value={data.publico_alvo} onChange={v => setField('publico_alvo', v)} rows={2} />

        <SectionTitle n="5">Galeria de Fotos (até 8)</SectionTitle>
        <div style={{ fontSize: 11, color: DS.colors.textMuted, marginBottom: 12 }}>Clique em cada slot para anexar a foto. JPG ou PNG.</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {data.fotos.map((p, i) => (
            <PhotoSlot key={i} photo={p} idx={i} onChange={setPhoto} onUpload={handleUploadPhoto} uploading={uploadingIdx === i} />
          ))}
        </div>

        <SectionTitle n="6">Atividades desenvolvidas na ação</SectionTitle>
        <Textarea value={data.atividades} onChange={v => setField('atividades', v)} rows={3} />

        <SectionTitle n="7">Resultados alcançados</SectionTitle>
        <Textarea label="Avaliação do sucesso do evento em relação aos objetivos" value={data.resultados} onChange={v => setField('resultados', v)} rows={3} />

        <SectionTitle n="8">Desafios e Lições Aprendidas</SectionTitle>
        <Textarea value={data.desafios} onChange={v => setField('desafios', v)} rows={3} />

        <SectionTitle n="9">Considerações Finais</SectionTitle>
        <Textarea value={data.consideracoes} onChange={v => setField('consideracoes', v)} rows={3} />

        <div style={{ marginTop: 24, marginBottom: 12, fontSize: 13, fontWeight: 700, color: DS.colors.text }}>Supervisor</div>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14 }}>
          <Input label="Nome do Supervisor" value={data.supervisor} onChange={v => setField('supervisor', v)} />
          <Input label="Data" type="date" value={data.assinatura_data} onChange={v => setField('assinatura_data', v)} />
        </div>

        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 24, paddingTop: 16, borderTop: `1px solid ${DS.colors.border}` }}>
          <Btn variant="secondary" onClick={onClose}>Fechar</Btn>
          <Btn variant="secondary" icon="check" onClick={handleSave} disabled={saving || exporting}>{saving ? 'Salvando…' : 'Salvar'}</Btn>
          <Btn icon="download" onClick={handleExportPDF} disabled={exporting}>{exporting ? 'Gerando PDF…' : 'Exportar PDF'}</Btn>
        </div>
      </div>

      {/* Template oculto para o PDF */}
      <RFPDFTemplate ref={pdfTemplateRef} data={data} />
    </Modal>
  );
}

// =================================================
// TEMPLATE PDF — Relatório Fotográfico (visual laranja)
// =================================================
const rfTdHead = { background: PROMOUP_ORANGE, color: '#fff', padding: '8px 12px', fontSize: 11, fontWeight: 700, textAlign: 'left', border: '1px solid ' + PROMOUP_ORANGE };
const rfTdCell = { padding: '8px 12px', fontSize: 11, border: '1px solid #CBD5E1', verticalAlign: 'top', minHeight: 18 };

const RFPDFTemplate = React.forwardRef(({ data }, ref) => {
  return (
    <div
      ref={ref}
      style={{
        position: 'fixed', left: 0, top: 0, opacity: 0, pointerEvents: 'none', zIndex: -1,
        width: '794px', padding: '40px 48px', background: '#fff',
        fontFamily: 'Arial, Helvetica, sans-serif', color: '#000',
        fontSize: '11px', lineHeight: 1.45,
      }}
    >
      <PDFStyles />
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <img src="logo.png" alt="Promoup" style={{ height: 50 }} crossOrigin="anonymous" />
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: '#475569' }}>Promoup Marketing</div>
            <div style={{ fontSize: 10, color: '#64748B' }}>Email: contato@promoupmarketing.com.br</div>
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 20, fontWeight: 800, color: PROMOUP_ORANGE, letterSpacing: '0.04em' }}>RELATÓRIO FOTOGRÁFICO</div>
          <div style={{ fontSize: 12, color: '#475569', marginTop: 4 }}>Nº {data.numero || '—'}</div>
        </div>
      </div>
      <div style={{ height: 2, background: PROMOUP_ORANGE, marginBottom: 16 }} />

      {/* Tabela de informações */}
      <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 16 }}>
        <thead>
          <tr>
            <th style={rfTdHead} colSpan={2}>Informações do cliente</th>
            <th style={rfTdHead} colSpan={2}>Informações</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style={{ ...rfTdCell, fontWeight: 700, width: '20%' }}>Nome do cliente:</td>
            <td style={rfTdCell}>{data.cliente_nome || '—'}</td>
            <td style={{ ...rfTdCell, fontWeight: 700, width: '15%' }}>Data:</td>
            <td style={rfTdCell}>{fmtDateBR(data.data)}</td>
          </tr>
          <tr>
            <td style={{ ...rfTdCell, fontWeight: 700 }}>CNPJ:</td>
            <td style={rfTdCell}>{data.cliente_cnpj || '—'}</td>
            <td style={{ ...rfTdCell, fontWeight: 700 }}>Execução:</td>
            <td style={rfTdCell}>{data.execucao || '—'}</td>
          </tr>
          <tr>
            <td style={{ ...rfTdCell, fontWeight: 700 }}>Email:</td>
            <td style={rfTdCell}>{data.cliente_email || '—'}</td>
            <td style={{ ...rfTdCell, fontWeight: 700 }}>Hora:</td>
            <td style={rfTdCell}>{data.hora || '—'}</td>
          </tr>
          <tr>
            <td style={{ ...rfTdCell, fontWeight: 700 }}>Contato:</td>
            <td style={rfTdCell}>{data.cliente_contato || '—'}</td>
            <td style={{ ...rfTdCell, fontWeight: 700 }}>Tipo de Ação/Evento:</td>
            <td style={rfTdCell}>{data.tipo || '—'}</td>
          </tr>
          <tr>
            <td style={{ ...rfTdCell, fontWeight: 700 }}>Endereço:</td>
            <td style={rfTdCell}>{data.cliente_endereco || '—'}</td>
            <td style={{ ...rfTdCell, fontWeight: 700 }}>Nome da Ação/Evento:</td>
            <td style={rfTdCell}>{data.nome_acao || '—'}</td>
          </tr>
        </tbody>
      </table>

      {/* Quantidade Material */}
      <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 12 }}>
        <thead><tr><th style={rfTdHead}>1) Quantidade Material Recebido</th></tr></thead>
        <tbody><tr><td style={{ ...rfTdCell, whiteSpace: 'pre-wrap', minHeight: 30 }}>{data.qtde_material_recebido || ' '}</td></tr></tbody>
      </table>

      {/* Público Alvo */}
      <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 16 }}>
        <thead><tr><th style={rfTdHead}>2) Público Alvo</th></tr></thead>
        <tbody><tr><td style={{ ...rfTdCell, whiteSpace: 'pre-wrap', minHeight: 30 }}>{data.publico_alvo || ' '}</td></tr></tbody>
      </table>

      {/* Grid de fotos — duas linhas de 4 */}
      {[0, 4].map(start => (
        <table key={start} style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 12, tableLayout: 'fixed' }}>
          <thead>
            <tr>
              {[0, 1, 2, 3].map(j => (
                <th key={j} style={{ ...rfTdHead, width: '25%' }}>Foto {start + j + 1}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            <tr>
              {[0, 1, 2, 3].map(j => {
                const p = data.fotos[start + j] || { url: '', titulo: '' };
                return (
                  <td key={j} style={{ ...rfTdCell, padding: 4, height: 130, textAlign: 'center', verticalAlign: 'middle', background: '#FAFAFA' }}>
                    {p.url ? (
                      <img src={p.url} alt={`Foto ${start + j + 1}`} crossOrigin="anonymous" style={{ width: '100%', height: '120px', objectFit: 'cover', display: 'block' }} />
                    ) : (
                      <span style={{ color: '#94A3B8', fontSize: 10 }}>[Anexar foto aqui]</span>
                    )}
                  </td>
                );
              })}
            </tr>
            <tr>
              {[0, 1, 2, 3].map(j => {
                const p = data.fotos[start + j] || { titulo: '' };
                return (
                  <td key={j} style={{ ...rfTdCell, textAlign: 'center', fontSize: 10, color: '#475569', minHeight: 16 }}>
                    {p.titulo || 'Título'}
                  </td>
                );
              })}
            </tr>
          </tbody>
        </table>
      ))}

      {/* Sessões finais */}
      {[
        ['3) Atividades desenvolvidas na ação', data.atividades],
        ['4) Resultados alcançados: Avaliação do sucesso do evento em relação aos objetivos.', data.resultados],
        ['5) Desafios e Lições Aprendidas', data.desafios],
        ['6) Considerações finais', data.consideracoes],
      ].map(([title, value], i) => (
        <table key={i} style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 12 }}>
          <thead><tr><th style={rfTdHead}>{title}</th></tr></thead>
          <tbody><tr><td style={{ ...rfTdCell, whiteSpace: 'pre-wrap', minHeight: 40 }}>{value || ' '}</td></tr></tbody>
        </table>
      ))}

      {/* Supervisor / Assinatura */}
      <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 24 }}>
        <tbody>
          <tr>
            <td style={{ ...rfTdCell, fontWeight: 700, width: '50%' }}>Supervisor: <span style={{ fontWeight: 400 }}>{data.supervisor || '—'}</span></td>
            <td style={{ ...rfTdCell, fontWeight: 700, width: '50%' }}>Assinatura:</td>
          </tr>
          <tr>
            <td style={{ ...rfTdCell, fontSize: 10, color: '#64748B' }}>Data: {fmtDateBR(data.assinatura_data)}</td>
            <td style={{ ...rfTdCell, height: 40 }}> </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
});

// =================================================
// CONTRATO DE PRESTAÇÃO DE SERVIÇO (vinculado ao Orçamento)
// =================================================
const fmtBRL = (n) => 'R$ ' + (Number(n) || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

function buildDefaultContract(budget, items, client, event) {
  return {
    // Contratante
    contratante_nome: client?.name || budget.client_name || '',
    contratante_cnpj: client?.cnpj || '',
    contratante_endereco: client?.address || '',
    // Evento
    tipo_evento: event?.type || '',
    data_evento: event?.date_iso || '',
    horario_evento: event?.time || '',
    // Itens (snapshot do orçamento)
    itens_snapshot: (items || []).map(it => ({
      descricao: it.description || '',
      detalhe: it.service_description || '',
      qty: it.qty || 1,
      unit_price: it.unit_price || 0,
      total: it.total || 0,
    })),
    // Pagamento
    valor_total: budget.value || 0,
    parcelas: '',
    condicao: '50_50', // '50_50' | 'outro'
    condicao_outro: '',
    // Assinatura
    data_assinatura: new Date().toISOString().slice(0, 10),
    contratante_assinante: '',
  };
}

function BudgetContract({ budget, onClose, onSaved }) {
  const [data, setData] = React.useState(null);
  const [client, setClient] = React.useState(null);
  const [reportId, setReportId] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [saving, setSaving] = React.useState(false);
  const [exporting, setExporting] = React.useState(false);
  const pdfRef = React.useRef(null);

  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      const [clientRes, itemsRes, eventRes, reportRes] = await Promise.all([
        sb.from('clients').select('*').eq('name', budget.client_name).maybeSingle(),
        sb.from('budget_items').select('*').eq('budget_id', budget.id),
        sb.from('events').select('*').eq('name', budget.event_name).maybeSingle(),
        sb.from('event_reports').select('*').eq('budget_id', budget.id).eq('type', 'CONTRATO').maybeSingle(),
      ]);
      if (cancelled) return;
      const c = clientRes.data || null;
      const items = itemsRes.data || [];
      const ev = eventRes.data ? {
        type: eventRes.data.type,
        date_iso: eventRes.data.event_date,
        time: eventRes.data.event_time,
      } : null;
      setClient(c);
      if (reportRes.data) {
        setReportId(reportRes.data.id);
        const def = buildDefaultContract(budget, items, c, ev);
        setData({ ...def, ...reportRes.data.payload });
      } else {
        setData(buildDefaultContract(budget, items, c, ev));
      }
      setLoading(false);
    })();
    return () => { cancelled = true; };
  }, [budget.id]);

  const setField = (key, value) => setData(d => ({ ...d, [key]: value }));

  const handleSave = async () => {
    setSaving(true);
    if (reportId) {
      await sb.from('event_reports').update({ payload: data }).eq('id', reportId);
    } else {
      const { data: row } = await sb.from('event_reports').insert({
        budget_id: budget.id, type: 'CONTRATO', payload: data,
      }).select().single();
      if (row) setReportId(row.id);
    }
    setSaving(false);
    if (onSaved) onSaved();
  };

  const handleExportPDF = async () => {
    setExporting(true);
    await handleSave();
    const safeName = (budget.code || `Orcamento_${budget.id}`).replace(/[^a-z0-9-_\s#]/gi, '').trim().replace(/\s+/g, '_');
    await renderPDF(pdfRef.current, `Contrato_${safeName}.pdf`);
    setExporting(false);
  };

  if (loading || !data) {
    return (
      <Modal open={true} onClose={onClose} title={`Contrato — ${budget.code || ''}`} width={900}>
        <Spinner />
      </Modal>
    );
  }

  const title = `Contrato de Prestação de Serviço — ${budget.code || ''}`;
  const actions = (
    <>
      <Btn variant="secondary" icon="check" onClick={handleSave} disabled={saving || exporting} size="sm">
        {saving ? 'Salvando…' : 'Salvar'}
      </Btn>
      <Btn icon="download" onClick={handleExportPDF} disabled={exporting} size="sm">
        {exporting ? 'Gerando…' : 'Exportar PDF'}
      </Btn>
    </>
  );

  return (
    <Modal open={true} onClose={onClose} title={title} width={900} extra={actions}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>

        <div style={{ padding: '10px 14px', background: '#FFF7ED', border: `1px solid ${PROMOUP_ORANGE}40`, borderRadius: DS.radius.sm, fontSize: 12, color: '#7C3F00', marginBottom: 12 }}>
          O contrato é gerado a partir do orçamento <strong>{budget.code}</strong>. As cláusulas 2ª a 8ª e os dados da Promoup são fixos no PDF. Só os campos abaixo são editáveis.
        </div>

        <SectionTitle n="1">Dados do Contratante</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14 }}>
          <Input label="Nome / Razão Social" value={data.contratante_nome} onChange={v => setField('contratante_nome', v)} />
          <Input label="CNPJ" value={data.contratante_cnpj} onChange={v => setField('contratante_cnpj', v)} />
        </div>
        <div style={{ marginTop: 14 }}>
          <Input label="Endereço completo" value={data.contratante_endereco} onChange={v => setField('contratante_endereco', v)} />
        </div>

        <SectionTitle n="2">Dados do Evento</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 14 }}>
          <Input label="Tipo de evento" value={data.tipo_evento} onChange={v => setField('tipo_evento', v)} />
          <Input label="Data do evento" type="date" value={data.data_evento} onChange={v => setField('data_evento', v)} />
          <Input label="Horário" value={data.horario_evento} onChange={v => setField('horario_evento', v)} placeholder="09:00" />
        </div>

        <SectionTitle n="3">Itens Contratados</SectionTitle>
        <div style={{ fontSize: 11, color: DS.colors.textMuted, marginBottom: 8 }}>Vem automaticamente do orçamento {budget.code}. Para alterar, edite o orçamento.</div>
        <div style={{ border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '3fr 0.5fr 1fr 1fr', gap: 0, background: '#F8FAFC', padding: '8px 12px', fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
            <div>Descrição</div><div style={{ textAlign: 'center' }}>Qtde</div><div style={{ textAlign: 'right' }}>Unitário</div><div style={{ textAlign: 'right' }}>Total</div>
          </div>
          {data.itens_snapshot.length === 0 ? (
            <div style={{ padding: 12, fontSize: 12, color: DS.colors.textMuted, textAlign: 'center' }}>Nenhum item cadastrado no orçamento</div>
          ) : data.itens_snapshot.map((it, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '3fr 0.5fr 1fr 1fr', gap: 0, padding: '8px 12px', borderTop: `1px solid ${DS.colors.border}`, fontSize: 12, color: DS.colors.text }}>
              <div>
                <div style={{ fontWeight: 600 }}>{it.descricao}</div>
                {it.detalhe && <div style={{ fontSize: 11, color: DS.colors.textSec }}>{it.detalhe}</div>}
              </div>
              <div style={{ textAlign: 'center' }}>{it.qty}</div>
              <div style={{ textAlign: 'right' }}>{fmtBRL(it.unit_price)}</div>
              <div style={{ textAlign: 'right', fontWeight: 600 }}>{fmtBRL(it.total)}</div>
            </div>
          ))}
        </div>

        <SectionTitle n="4">Valor e Pagamento</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <Input label="Valor total (R$)" type="number" value={data.valor_total} onChange={v => setField('valor_total', parseFloat(v) || 0)} />
        </div>
        <div style={{ marginTop: 14 }}>
          <Textarea label="Forma de Pagamento / Parcelas" value={data.parcelas} onChange={v => setField('parcelas', v)} rows={3} placeholder="Ex: 2x de R$ 5.000,00 — 1ª parcela na assinatura, 2ª em 30 dias" />
        </div>
        <div style={{ marginTop: 14 }}>
          <RadioGroup
            label="Condições"
            value={data.condicao}
            onChange={v => setField('condicao', v)}
            options={[
              { value: '50_50', label: '50% na assinatura + 50% até 02 dias após conclusão' },
              { value: 'outro', label: 'Outro (especificar)' },
            ]}
            inline={false}
          />
        </div>
        {data.condicao === 'outro' && (
          <div style={{ marginTop: 10 }}>
            <Input label="Especificar condição" value={data.condicao_outro} onChange={v => setField('condicao_outro', v)} />
          </div>
        )}

        <SectionTitle n="5">Assinatura</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14 }}>
          <Input label="Nome do signatário da Contratante" value={data.contratante_assinante} onChange={v => setField('contratante_assinante', v)} />
          <Input label="Data" type="date" value={data.data_assinatura} onChange={v => setField('data_assinatura', v)} />
        </div>

        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 24, paddingTop: 16, borderTop: `1px solid ${DS.colors.border}` }}>
          <Btn variant="secondary" onClick={onClose}>Fechar</Btn>
          <Btn variant="secondary" icon="check" onClick={handleSave} disabled={saving || exporting}>{saving ? 'Salvando…' : 'Salvar'}</Btn>
          <Btn icon="download" onClick={handleExportPDF} disabled={exporting}>{exporting ? 'Gerando PDF…' : 'Exportar PDF'}</Btn>
        </div>
      </div>

      <ContractPDFTemplate ref={pdfRef} data={data} budget={budget} />
    </Modal>
  );
}

// =================================================
// TEMPLATE PDF — Contrato de Prestação de Serviço
// =================================================
const ContractPDFTemplate = React.forwardRef(({ data, budget }, ref) => {
  const clauseStyle = { marginBottom: 10, textAlign: 'justify' };
  const clauseTitle = { fontWeight: 700, marginBottom: 4 };

  const condicaoLabel = data.condicao === '50_50'
    ? '50% na assinatura + 50% até 02 dias após conclusão'
    : (data.condicao_outro || '—');

  return (
    <div
      ref={ref}
      style={{
        position: 'fixed', left: 0, top: 0, opacity: 0, pointerEvents: 'none', zIndex: -1,
        width: '794px', padding: '48px 64px', background: '#fff',
        fontFamily: 'Arial, Helvetica, sans-serif', color: '#000',
        fontSize: '11px', lineHeight: 1.5,
      }}
    >
      <PDFStyles />
      {/* Cabeçalho */}
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <img src="logo.png" alt="Promoup" style={{ height: 56, marginBottom: 12 }} crossOrigin="anonymous" />
        <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: '0.06em' }}>CONTRATO DE PRESTAÇÃO DE SERVIÇO</div>
      </div>

      {/* Dados da Contratada (fixos) */}
      <div style={{ marginBottom: 16 }}>
        <div style={{ fontWeight: 700, marginBottom: 4 }}>CONTRATADA — PROMOUP MARKETING E EVENTOS</div>
        <div>CNPJ: 61.63.567/0001-7</div>
        <div>Endereço: Rua Antonieta Clotilde, 615 — Jardim Iracema</div>
        <div>CEP: 60.330-605 — Fortaleza / Ceará</div>
        <div>Representante Legal: Silvana Rocha Mendes — Diretora Geral</div>
      </div>

      {/* Contratante */}
      <div style={{ marginBottom: 16 }}>
        <div style={{ fontWeight: 700, marginBottom: 4 }}>CONTRATANTE</div>
        <div>Nome / Razão Social: {data.contratante_nome || '—'}</div>
        <div>CNPJ: {data.contratante_cnpj || '—'}</div>
        <div>Endereço: {data.contratante_endereco || '—'}</div>
      </div>

      <div style={{ marginBottom: 16 }}>
        <div><strong>Data do Evento:</strong> {fmtDateBR(data.data_evento)} {data.horario_evento ? `às ${data.horario_evento}` : ''}</div>
      </div>

      {/* Cláusula 1 - Objeto */}
      <div style={{ fontWeight: 700, marginBottom: 4, marginTop: 8 }}>DO OBJETO</div>
      <div style={clauseStyle}>
        <strong>Cláusula 1ª</strong> — O objeto do presente contrato consiste na prestação de serviço pela CONTRATADA à CONTRATANTE, referente à realização do evento: <strong>{data.tipo_evento || '—'}</strong>.
      </div>

      <div style={{ fontWeight: 700, marginBottom: 6 }}>Itens Contratados:</div>
      <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 12 }}>
        <thead>
          <tr style={{ background: '#F1F5F9' }}>
            <th style={tdHeadStyle}>Descrição</th>
            <th style={{ ...tdHeadStyle, textAlign: 'center', width: 50 }}>Qtde</th>
            <th style={{ ...tdHeadStyle, textAlign: 'right', width: 90 }}>Unitário</th>
            <th style={{ ...tdHeadStyle, textAlign: 'right', width: 100 }}>Total</th>
          </tr>
        </thead>
        <tbody>
          {data.itens_snapshot.length === 0 ? (
            <tr><td colSpan={4} style={{ ...tdStyle, textAlign: 'center', color: '#94A3B8' }}>Nenhum item</td></tr>
          ) : data.itens_snapshot.map((it, i) => (
            <tr key={i}>
              <td style={tdStyle}>
                {it.descricao}
                {it.detalhe && <div style={{ fontSize: 10, color: '#475569' }}>{it.detalhe}</div>}
              </td>
              <td style={{ ...tdStyle, textAlign: 'center' }}>{it.qty}</td>
              <td style={{ ...tdStyle, textAlign: 'right' }}>{fmtBRL(it.unit_price)}</td>
              <td style={{ ...tdStyle, textAlign: 'right', fontWeight: 700 }}>{fmtBRL(it.total)}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <div style={{ marginBottom: 6 }}><strong>Forma de Pagamento:</strong></div>
      <div style={{ whiteSpace: 'pre-wrap', marginBottom: 8 }}>{data.parcelas || '—'}</div>
      <div style={{ marginBottom: 6 }}><strong>Valor total:</strong> {fmtBRL(data.valor_total)}</div>
      <div style={{ marginBottom: 12 }}><strong>Condições:</strong> {condicaoLabel}</div>
      <div style={{ marginBottom: 16, fontSize: 10, color: '#475569' }}>Serviços extras serão cobrados separadamente.</div>

      {/* Cláusula 2 */}
      <div style={{ fontWeight: 700, marginBottom: 4 }}>DAS OBRIGAÇÕES</div>
      <div style={clauseStyle}><strong>Cláusula 2ª</strong> — A CONTRATADA fornecerá à CONTRATANTE:</div>
      <ul style={{ marginLeft: 18, marginBottom: 12 }}>
        <li>Planejar, produzir e executar a ação conforme escopo contratado.</li>
        <li>Disponibilizar equipe de produção, supervisão e promotores treinados.</li>
        <li>Fornecer materiais e equipamentos descritos no orçamento aprovado.</li>
        <li>Zelar pela segurança e pela qualidade da experiência.</li>
        <li>Emitir relatórios quando contratados.</li>
        <li>Cumprir cronograma acordado.</li>
      </ul>

      {/* Cláusula 3 */}
      <div style={clauseStyle}><strong>Cláusula 3ª — Responsabilidades da CONTRATANTE</strong></div>
      <ul style={{ marginLeft: 18, marginBottom: 12 }}>
        <li>Disponibilizar informações necessárias.</li>
        <li>Garantir acesso ao espaço, energia, pontos estratégicos e autorizações.</li>
        <li>Realizar os pagamentos conforme Cláusula 1ª.</li>
        <li>Aprovar peças e materiais em tempo hábil.</li>
      </ul>

      {/* Cláusula 4 */}
      <div style={clauseStyle}>
        <strong>Cláusula 4ª — Prazos e Cronograma.</strong> A ação será realizada no dia <strong>{fmtDateBR(data.data_evento) || '____/____/______'}</strong>, no horário <strong>{data.horario_evento || '______'}</strong>. Alterações devem ser informadas com 72h de antecedência.
      </div>

      {/* Cláusula 5 */}
      <div style={clauseTitle}>Cláusula 5ª — Cancelamento e Remarcação</div>
      <ul style={{ marginLeft: 18, marginBottom: 12 }}>
        <li>Até 5 dias: retenção de 30%</li>
        <li>Menos de 3 dias: 50%</li>
        <li>Menos de 48h: 80%</li>
        <li>No dia: valor integral</li>
      </ul>
      <div style={clauseStyle}>Em caso de força maior, nova data será acordada.</div>

      {/* Cláusula 6 */}
      <div style={clauseStyle}>
        <strong>Cláusula 6ª — Propriedade de Imagem.</strong> A CONTRATANTE autoriza o uso de fotos/vídeos para portfólio, salvo aviso prévio por escrito.
      </div>

      {/* Cláusula 7 */}
      <div style={clauseStyle}>
        <strong>Cláusula 7ª — Equipamentos e Danos.</strong> A CONTRATANTE será responsável por danos causados por terceiros.
      </div>

      {/* Cláusula 8 */}
      <div style={clauseStyle}>
        <strong>Cláusula 8ª — Confidencialidade.</strong> Ambas as partes manterão sigilo sobre informações comerciais e estratégicas.
      </div>

      {/* Vigência e Foro */}
      <div style={{ marginTop: 12, marginBottom: 8 }}>
        <strong>VIGÊNCIA:</strong> Este contrato vigora após assinatura e encerra-se com a conclusão dos serviços.
      </div>
      <div style={{ marginBottom: 24 }}>
        <strong>FORO:</strong> Fica eleito o foro de Fortaleza / CE.
      </div>

      {/* Assinaturas */}
      <div style={{ marginTop: 32, fontWeight: 700 }}>ASSINATURAS</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 24 }}>
        <div>
          <div style={{ fontWeight: 700, marginBottom: 6 }}>CONTRATANTE</div>
          <div>Nome: {data.contratante_assinante || '__________________________________'}</div>
          <div style={{ marginTop: 22, borderTop: '1px solid #000', paddingTop: 4, fontSize: 10 }}>Assinatura</div>
          <div style={{ marginTop: 8 }}>Data: {fmtDateBR(data.data_assinatura) || '____/____/______'}</div>
        </div>
        <div>
          <div style={{ fontWeight: 700, marginBottom: 6 }}>CONTRATADA — PROMOUP</div>
          <div>Nome: Silvana Rocha Mendes</div>
          <div>Cargo: Diretora Geral</div>
          <div style={{ marginTop: 22, borderTop: '1px solid #000', paddingTop: 4, fontSize: 10 }}>Assinatura</div>
          <div style={{ marginTop: 8 }}>Data: {fmtDateBR(data.data_assinatura) || '____/____/______'}</div>
        </div>
      </div>
    </div>
  );
});

Object.assign(window, { EventReport, BudgetContract });