// ═══════════════════════════════════════════════════════════════
// SCREEN · Outras Pesquisas · criação GC + resposta colaboradores
// ═══════════════════════════════════════════════════════════════

const OP_KEY   = 'escalab_outras_pesquisas';
const OP_RESP  = 'escalab_op_respostas';
const OP_TIPOS = [
  { id:'escala',    label:'Escala numérica'      },
  { id:'multipla',  label:'Múltipla escolha'     },
  { id:'texto',     label:'Texto livre'           },
  { id:'boolean',   label:'Sim / Não'            },
  { id:'nome',      label:'Nome'                 },
  { id:'email',     label:'E-mail'               },
];

const OP_SEED = [
  {
    id:'OP_ENPS_2T2026', titulo:'eNPS · Avaliação 2º Trimestre',
    descricao:'Pesquisa rápida (3 min) para medir nosso eNPS · o quanto você recomendaria o Escalab como lugar pra trabalhar.',
    perguntas:[
      { id:'Q1', tipo:'escala', texto:'De 0 a 10, o quanto você recomendaria o Escalab pra um amigo trabalhar?', escalaMax:10, obrigatoria:true, opcoes:[] },
      { id:'Q2', tipo:'texto',  texto:'Qual o principal motivo dessa nota?', obrigatoria:false, opcoes:[] },
      { id:'Q3', tipo:'multipla', texto:'O que mais te motiva por aqui?', opcoes:['Equipe e cultura','Aprendizado e crescimento','Autonomia','Propósito do trabalho','Remuneração e benefícios','Liderança'], obrigatoria:false },
    ],
    status:'ativa', criadaEm:'2026-06-01', encerraEm:'2026-06-20', publico:['todos'], anonima:true, respondentes:14,
  },
  {
    id:'OP_BENEFICIOS_2026', titulo:'Pesquisa de Benefícios 2026',
    descricao:'Estamos revisando nossa política de benefícios. Sua resposta vai pesar nas decisões.',
    perguntas:[
      { id:'Q1', tipo:'multipla', texto:'Quais benefícios você mais valoriza hoje?', opcoes:['Vale-alimentação','Plano de saúde','Day Off','Home office','Auxílio educação','Auxílio creche'], obrigatoria:true },
      { id:'Q2', tipo:'multipla', texto:'Quais benefícios você gostaria de ter?', opcoes:['Vale-cultura','Gympass','Auxílio psicológico','Auxílio home office (R$200/mês)','Plano odontológico'], obrigatoria:true },
      { id:'Q3', tipo:'escala', texto:'Como avalia o pacote atual?', escalaMax:5, obrigatoria:true, opcoes:[] },
      { id:'Q4', tipo:'texto', texto:'Algum benefício específico que faria diferença?', obrigatoria:false, opcoes:[] },
    ],
    status:'ativa', criadaEm:'2026-05-20', encerraEm:'2026-06-15', publico:['todos'], anonima:true, respondentes:22,
  },
  {
    id:'OP_INTERNAL_NPS_1T', titulo:'NPS Treinamento de Liderança 1T',
    descricao:'Avaliação rápida do treinamento de liderança aplicado em maio/2026.',
    perguntas:[
      { id:'Q1', tipo:'escala', texto:'De 0 a 10, o quanto você recomendaria esse treinamento?', escalaMax:10, obrigatoria:true, opcoes:[] },
      { id:'Q2', tipo:'boolean', texto:'O conteúdo foi aplicável ao seu dia a dia?', obrigatoria:true, opcoes:[] },
      { id:'Q3', tipo:'texto', texto:'O que faltou ou o que sobrou?', obrigatoria:false, opcoes:[] },
    ],
    status:'encerrada', criadaEm:'2026-05-22', encerradaEm:'2026-05-30', publico:['gestores'], anonima:true, respondentes:11,
  },
  // Pesquisa anual de infraestrutura · alimenta KPI da Visão Executiva (PDF Site AVD (2))
  {
    id:'OP_INFRA_2025', titulo:'Avaliação de Infraestrutura 2025',
    descricao:'Pesquisa anual sobre condições de trabalho, equipamentos, ambiente físico e ferramentas. Suas respostas alimentam o indicador de infraestrutura na Visão Executiva.',
    categoria:'infraestrutura',
    perguntas:[
      { id:'Q1', tipo:'escala', texto:'De 0 a 10, como você avalia o ambiente físico do escritório (limpeza, iluminação, temperatura)?', escalaMax:10, obrigatoria:true, opcoes:[] },
      { id:'Q2', tipo:'escala', texto:'De 0 a 10, como você avalia os equipamentos de trabalho (notebook, monitor, periféricos)?', escalaMax:10, obrigatoria:true, opcoes:[] },
      { id:'Q3', tipo:'escala', texto:'De 0 a 10, como você avalia as ferramentas/sistemas digitais que usa no dia a dia?', escalaMax:10, obrigatoria:true, opcoes:[] },
      { id:'Q4', tipo:'escala', texto:'De 0 a 10, como você avalia a infraestrutura para trabalho remoto/híbrido (acesso, suporte)?', escalaMax:10, obrigatoria:true, opcoes:[] },
      { id:'Q5', tipo:'texto', texto:'O que faltou ou precisa de melhoria na infraestrutura?', obrigatoria:false, opcoes:[] },
    ],
    status:'encerrada', criadaEm:'2025-12-01', encerradaEm:'2025-12-31', publico:['todos'], anonima:true, respondentes:35,
  },
  {
    id:'OP_INFRA_2024', titulo:'Avaliação de Infraestrutura 2024',
    descricao:'Edição 2024 da pesquisa anual de infraestrutura. Mantida para comparação histórica.',
    categoria:'infraestrutura',
    perguntas:[
      { id:'Q1', tipo:'escala', texto:'De 0 a 10, como você avalia o ambiente físico do escritório?', escalaMax:10, obrigatoria:true, opcoes:[] },
      { id:'Q2', tipo:'escala', texto:'De 0 a 10, como você avalia os equipamentos de trabalho?', escalaMax:10, obrigatoria:true, opcoes:[] },
      { id:'Q3', tipo:'escala', texto:'De 0 a 10, como você avalia as ferramentas/sistemas digitais?', escalaMax:10, obrigatoria:true, opcoes:[] },
      { id:'Q4', tipo:'escala', texto:'De 0 a 10, como você avalia a infraestrutura para trabalho remoto/híbrido?', escalaMax:10, obrigatoria:true, opcoes:[] },
    ],
    status:'encerrada', criadaEm:'2024-12-01', encerradaEm:'2024-12-31', publico:['todos'], anonima:true, respondentes:28,
  },
  // Registro de acidentes graves · formulário contínuo (PDF Site AVD (2))
  {
    id:'OP_ACIDENTES_GRAVES', titulo:'Registro de Acidentes Graves',
    descricao:'Formulário contínuo para registro de acidentes de trabalho considerados graves. GC (Gente e Cultura) preenche um registro por ocorrência. Alimenta o KPI de Visão Executiva.',
    categoria:'acidentes',
    perguntas:[
      { id:'Q1', tipo:'nome', texto:'Nome do colaborador envolvido', obrigatoria:true, opcoes:[] },
      { id:'Q2', tipo:'texto', texto:'Data da ocorrência (formato AAAA-MM-DD)', obrigatoria:true, opcoes:[] },
      { id:'Q3', tipo:'multipla', texto:'Tipo de acidente', opcoes:['Queda','Corte/perfuração','Queimadura','Choque elétrico','Trânsito (deslocamento a trabalho)','Esforço repetitivo','Outro'], obrigatoria:true },
      { id:'Q4', tipo:'multipla', texto:'Gravidade', opcoes:['Leve com afastamento','Moderada','Grave','Fatal'], obrigatoria:true },
      { id:'Q5', tipo:'texto', texto:'Dias de afastamento (estimado)', obrigatoria:false, opcoes:[] },
      { id:'Q6', tipo:'texto', texto:'Descrição do ocorrido e ações tomadas', obrigatoria:true, opcoes:[] },
    ],
    status:'ativa', criadaEm:'2026-01-01', encerraEm:null, publico:['gestores'], anonima:false, respondentes:0,
  },
];

function getPesquisasCustom() {
  try {
    const r = localStorage.getItem(OP_KEY);
    if (r) return JSON.parse(r);
    localStorage.setItem(OP_KEY, JSON.stringify(OP_SEED));
    return OP_SEED;
  } catch { return OP_SEED; }
}
function _getPesquisasCustom_unused() {
  try { const r = localStorage.getItem(OP_KEY); return r ? JSON.parse(r) : []; } catch { return []; }
}
function salvarPesquisasCustom(l) {
  // Sem swallow silencioso: devolve {ok:false, motivo} pra UI mostrar feedback.
  try {
    localStorage.setItem(OP_KEY, JSON.stringify(l));
    return { ok: true };
  } catch (err) {
    const cheio = err && (err.name === 'QuotaExceededError' || err.code === 22 || err.code === 1014 || /quota/i.test(err.message || ''));
    console.error('[outras-pesquisas] falha ao gravar localStorage:', err);
    return { ok: false, motivo: cheio ? 'quota' : 'erro', err };
  }
}
function upsertPesquisa(p) {
  const l = getPesquisasCustom().filter(x => x.id !== p.id);
  l.unshift(p);
  return salvarPesquisasCustom(l);
}
function deletarPesquisa(id) { salvarPesquisasCustom(getPesquisasCustom().filter(p => p.id !== id)); }

function getRespostas() { try { return JSON.parse(localStorage.getItem(OP_RESP) || '[]'); } catch { return []; } }
function addResposta(r) {
  const id = 'R' + Date.now() + '_' + Math.random().toString(36).slice(2, 7);
  const l = getRespostas(); l.push({ ...r, id });
  localStorage.setItem(OP_RESP, JSON.stringify(l));
}
function jaRespondeu(pesquisaId, colaboradorId) {
  return getRespostas().some(r => r.pesquisaId === pesquisaId && r.colaboradorId === colaboradorId);
}
function gerarOpId() { return 'OP' + Date.now().toString(36).toUpperCase(); }

// ── Decisões do RH sobre respostas individuais (aprovado/reprovado/pendente) ─
const OP_DECISOES_KEY = 'escalab_op_decisoes';
function getDecisoes() {
  try { return JSON.parse(localStorage.getItem(OP_DECISOES_KEY) || '{}'); } catch { return {}; }
}
function setDecisao(respostaId, decisao, decisorId) {
  try {
    const all = getDecisoes();
    if (!decisao) delete all[respostaId];
    else all[respostaId] = { status: decisao, decisaoEm: new Date().toISOString(), decisorId };
    localStorage.setItem(OP_DECISOES_KEY, JSON.stringify(all));
  } catch {}
}
// Detecta perguntas que perguntam valor/preço/custo — usadas pra somar montante
function ehPerguntaValor(p) {
  const t = (p.texto || '').toLowerCase();
  return /valor|pre[cç]o|custo|investimento|or[cç]amento|montante|quanto custa|r\$/.test(t);
}
// Detecta perguntas com link/URL
function ehPerguntaLink(p) {
  const t = (p.texto || '').toLowerCase();
  return /link|url|site|p[aá]gina|http/.test(t);
}
// Parse de número BR (1.234,56 ou 1234.56)
function parseValorBR(v) {
  if (v == null) return null;
  const s = String(v).trim();
  if (!s) return null;
  const limpo = s.replace(/[^\d,.\-]/g, '');
  const norm = limpo.includes(',') ? limpo.replace(/\./g, '').replace(',', '.') : limpo;
  const n = Number(norm);
  return isFinite(n) ? n : null;
}
function formatBRL(n) {
  if (n == null || !isFinite(n)) return '·';
  return 'R$ ' + n.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

// ── Editor de perguntas ───────────────────────────────────────────────────────
const EditorPerguntas = ({ perguntas, onChange, onRascunhoChange }) => {
  const [novo, setNovo] = useState({ tipo:'escala', texto:'', opcoes:'', escalaMax:10, obrigatoria:false });
  const inp = { border:'1px solid var(--escalab-line)', borderRadius:7, padding:'7px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:'none', background:'#fff' };

  // Avisa o pai se há texto digitado mas ainda não adicionado — usado pra alertar antes de salvar
  useEffect(() => {
    onRascunhoChange?.({ tem: !!novo.texto.trim(), texto: novo.texto });
  }, [novo.texto]);

  function addP() {
    if (!novo.texto.trim()) return;
    const p = { id:'Q'+Date.now()+'_'+Math.floor(Math.random()*9999), tipo:novo.tipo, texto:novo.texto.trim(), opcoes: novo.tipo==='multipla' ? novo.opcoes.split('\n').map(o=>o.trim()).filter(Boolean) : [], escalaMax: novo.tipo==='escala' ? (Number(novo.escalaMax)||10) : null, obrigatoria: !!novo.obrigatoria };
    onChange([...perguntas, p]);
    setNovo({ tipo:'escala', texto:'', opcoes:'', escalaMax:10, obrigatoria:false });
  }
  function remP(id) { onChange(perguntas.filter(p => p.id !== id)); }
  function toggleObrig(id) { onChange(perguntas.map(p => p.id === id ? { ...p, obrigatoria: !p.obrigatoria } : p)); }
  function moveP(i, dir) {
    const arr = [...perguntas]; const j = i + dir;
    if (j < 0 || j >= arr.length) return;
    [arr[i], arr[j]] = [arr[j], arr[i]]; onChange(arr);
  }

  return (
    <div>
      <div style={{ display:'flex', flexDirection:'column', gap:8, marginBottom:14 }}>
        {perguntas.map((p, i) => (
          <div key={p.id} style={{ display:'flex', gap:8, alignItems:'center', padding:'10px 12px', background:'var(--escalab-paper)', borderRadius:9, border:'1px solid var(--escalab-line)' }}>
            <div style={{ display:'flex', flexDirection:'column', gap:2 }}>
              <button onClick={() => moveP(i,-1)} disabled={i===0} style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)', padding:0, lineHeight:1 }}>▲</button>
              <button onClick={() => moveP(i,+1)} disabled={i===perguntas.length-1} style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)', padding:0, lineHeight:1 }}>▼</button>
            </div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:13, fontWeight:600, color:'var(--escalab-ink)' }}>{i+1}. {p.texto}{p.obrigatoria && <span style={{ color:'#B3261E' }}> *</span>}</div>
              <div style={{ fontSize:11, color:'var(--escalab-mute)', marginTop:2 }}>{p.tipo==='escala'?`Escala 1–${p.escalaMax||10}`:OP_TIPOS.find(t=>t.id===p.tipo)?.label}{p.opcoes?.length ? ` · ${p.opcoes.join(', ')}` : ''}</div>
            </div>
            <button onClick={() => toggleObrig(p.id)} title="Marcar como obrigatória" style={{ border:`1px solid ${p.obrigatoria?'var(--escalab-brand-soft)':'var(--escalab-line)'}`, background:p.obrigatoria?'var(--escalab-brand-tint)':'#fff', color:p.obrigatoria?'var(--escalab-brand-deep)':'var(--escalab-mute)', borderRadius:6, padding:'4px 8px', cursor:'pointer', fontSize:11, fontFamily:'var(--font-sans)', fontWeight:600, whiteSpace:'nowrap' }}>Obrigatória</button>
            <button onClick={() => remP(p.id)} style={{ border:0, background:'transparent', cursor:'pointer', color:'#B3261E', padding:4 }}><Icon name="close" size={14}/></button>
          </div>
        ))}
      </div>
      {/* Add nova pergunta */}
      <div style={{ background:'#fff', border:'1px dashed var(--escalab-line)', borderRadius:10, padding:'14px' }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', marginBottom:10 }}>+ Nova pergunta</div>
        <div style={{ display:'grid', gridTemplateColumns:'160px 1fr', gap:10, marginBottom:8 }}>
          <select value={novo.tipo} onChange={e=>setNovo(n=>({...n,tipo:e.target.value}))} style={{...inp, width:'100%'}}>
            {OP_TIPOS.map(t=><option key={t.id} value={t.id}>{t.label}</option>)}
          </select>
          <input value={novo.texto} onChange={e=>setNovo(n=>({...n,texto:e.target.value}))} placeholder="Texto da pergunta..." style={{...inp, width:'100%'}} onKeyDown={e=>e.key==='Enter'&&addP()}/>
        </div>
        {novo.tipo === 'escala' && (
          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
            <span style={{ fontSize:12.5, color:'var(--escalab-slate)' }}>Escala de 1 a</span>
            <input type="number" min={2} max={100} value={novo.escalaMax} onChange={e=>setNovo(n=>({...n,escalaMax:e.target.value}))} style={{...inp, width:70, textAlign:'center'}}/>
            <span style={{ fontSize:12, color:'var(--escalab-mute)' }}>(ex: 5, 10, 100 para NPS)</span>
          </div>
        )}
        {novo.tipo === 'multipla' && (
          <textarea value={novo.opcoes} onChange={e=>setNovo(n=>({...n,opcoes:e.target.value}))} rows={3} placeholder="Uma opção por linha..." style={{...inp, width:'100%', resize:'vertical', marginBottom:8}}/>
        )}
        <label style={{ display:'flex', gap:7, alignItems:'center', cursor:'pointer', marginBottom:10 }}>
          <input type="checkbox" checked={novo.obrigatoria} onChange={e=>setNovo(n=>({...n,obrigatoria:e.target.checked}))} style={{ width:15, height:15 }}/>
          <span style={{ fontSize:12.5, color:'var(--escalab-slate)' }}>Resposta obrigatória</span>
        </label>
        <button onClick={addP} style={{ border:0, borderRadius:7, padding:'6px 14px', background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontSize:12, fontWeight:600, fontFamily:'var(--font-sans)' }}>Adicionar pergunta</button>
      </div>
    </div>
  );
};

// ── Formulário de criação/edição ──────────────────────────────────────────────
// Template padrão: Pesquisa Pós-Projeto (disponível para PMO usar)
// Template Escalab School: pedido de curso (não-anônima, com valor e link)
function templateEscalabSchool() {
  return {
    id: gerarOpId(),
    titulo: 'Pesquisa Escalab School · pedidos de curso',
    descricao: 'Diga qual curso você gostaria de fazer pelo programa Escalab School. O RH vai avaliar todos os pedidos e responder se foi aprovado.',
    prazo: '', anonima: false, status: 'rascunho', midia: null,
    criadaEm: new Date().toISOString(),
    perguntas: [
      { id: 'esc_'+Date.now()+'_1', tipo: 'texto', texto: 'Qual curso você quer fazer? (nome e instituição)', obrigatoria: true },
      { id: 'esc_'+Date.now()+'_2', tipo: 'texto', texto: 'Link do curso (página oficial onde o RH pode conferir)', obrigatoria: true },
      { id: 'esc_'+Date.now()+'_3', tipo: 'texto', texto: 'Valor total do curso (R$)', obrigatoria: true },
      { id: 'esc_'+Date.now()+'_4', tipo: 'texto', texto: 'Por que esse curso é importante pro seu trabalho no Escalab?', obrigatoria: true },
      { id: 'esc_'+Date.now()+'_5', tipo: 'texto', texto: 'Quando você pretende começar?', obrigatoria: false },
    ],
  };
}

function templatePosProjeto() {
  return {
    id: gerarOpId(), titulo: 'Pesquisa Pós-Projeto · [nome do projeto]', descricao: 'Avaliação para identificar aprendizados, pontos fortes e oportunidades de melhoria após a entrega do projeto. Resultado vai para o PMO.', prazo: '', anonima: false, status: 'rascunho', midia: null, criadaEm: new Date().toISOString(),
    perguntas: [
      { id: 'pq_'+Date.now()+'_1', tipo: 'nome',     texto: 'Seu nome', obrigatoria: true },
      { id: 'pq_'+Date.now()+'_2', tipo: 'multipla', texto: 'Qual seu papel no projeto?', obrigatoria: true, opcoes: ['Gestor do projeto','Membro do squad','Stakeholder','Apoio operacional','Cliente interno'] },
      { id: 'pq_'+Date.now()+'_3', tipo: 'escala',   texto: 'Como você avalia o resultado final do projeto?', obrigatoria: true, escalaMax: 5 },
      { id: 'pq_'+Date.now()+'_4', tipo: 'escala',   texto: 'Como foi a comunicação durante o projeto?',        obrigatoria: true, escalaMax: 5 },
      { id: 'pq_'+Date.now()+'_5', tipo: 'escala',   texto: 'O escopo foi claro do começo ao fim?',             obrigatoria: true, escalaMax: 5 },
      { id: 'pq_'+Date.now()+'_6', tipo: 'escala',   texto: 'Os prazos foram realistas?',                       obrigatoria: true, escalaMax: 5 },
      { id: 'pq_'+Date.now()+'_7', tipo: 'texto',    texto: 'O que mais funcionou bem? (pontos fortes)',        obrigatoria: false },
      { id: 'pq_'+Date.now()+'_8', tipo: 'texto',    texto: 'O que pode melhorar no próximo projeto?',           obrigatoria: false },
      { id: 'pq_'+Date.now()+'_9', tipo: 'texto',    texto: 'Algum aprendizado que o PMO deveria capturar?',     obrigatoria: false },
      { id: 'pq_'+Date.now()+'_10', tipo: 'boolean', texto: 'Você recomendaria essa metodologia para outro projeto?', obrigatoria: true },
    ],
  };
}

const FormPesquisa = ({ pesquisa, onSalvar, onCancelar }) => {
  const [f, setF] = useState(pesquisa || { id:gerarOpId(), titulo:'', descricao:'', prazo:'', anonima:true, status:'rascunho', perguntas:[], midia:null, criadaEm:new Date().toISOString() });
  const [erro, setErro] = useState('');
  // Rascunho de pergunta nova compartilhado com EditorPerguntas, pra validar no Salvar
  const [perguntaPendente, setPerguntaPendente] = useState({ tem: false, texto: '' });
  const set = (k,v) => { setErro(''); setF(p=>({...p,[k]:v})); };
  const inp = { border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:'none', width:'100%', boxSizing:'border-box' };

  function handleSalvar() {
    setErro('');
    const titulo = (f.titulo || '').trim();
    if (!titulo) { setErro('Informe um título antes de salvar.'); return; }
    if (perguntaPendente.tem && perguntaPendente.texto.trim()) {
      if (!confirm(`Há uma pergunta nova escrita ("${perguntaPendente.texto.slice(0,40)}…") que ainda não foi adicionada. Salvar mesmo assim?`)) return;
    }
    const res = upsertPesquisa({ ...f, titulo });
    if (!res.ok) {
      setErro(res.motivo === 'quota'
        ? 'Não consegui salvar — o navegador atingiu o limite de armazenamento. Remova a foto/vídeo da pesquisa ou exclua pesquisas antigas e tente de novo.'
        : 'Falha ao salvar. Confira o console do navegador (F12) e tente novamente.');
      return;
    }
    onSalvar();
  }

  function handleMidia(e) {
    const file = e.target.files[0]; if (!file) return;
    const tipo = file.type.startsWith('video') ? 'video' : 'imagem';
    const r = new FileReader();
    r.onload = ev => set('midia', { tipo, url: ev.target.result, nome: file.name });
    r.readAsDataURL(file);
  }

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap:12 }}>
        <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Título *</span>
          <input value={f.titulo} onChange={e=>set('titulo',e.target.value)} style={inp} placeholder="Nome da pesquisa" required/>
        </label>
        <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Prazo</span>
          <input type="date" value={f.prazo} onChange={e=>set('prazo',e.target.value)} style={inp}/>
        </label>
      </div>
      <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
        <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Descrição</span>
        <textarea value={f.descricao} onChange={e=>set('descricao',e.target.value)} rows={2} style={{ ...inp, resize:'vertical' }} placeholder="Explique o objetivo desta pesquisa..."/>
      </label>
      <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
        <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>Foto ou vídeo (opcional)</span>
        {f.midia ? (
          <div style={{ display:'flex', gap:12, alignItems:'center', border:'1px solid var(--escalab-line)', borderRadius:10, padding:'10px 12px' }}>
            {f.midia.tipo === 'video'
              ? <video src={f.midia.url} style={{ width:90, height:60, borderRadius:8, objectFit:'cover', background:'#000' }} muted />
              : <img src={f.midia.url} alt="" style={{ width:90, height:60, borderRadius:8, objectFit:'cover' }} />}
            <div style={{ flex:1, fontSize:12.5, color:'var(--escalab-slate)' }}>{f.midia.tipo === 'video' ? 'Vídeo' : 'Imagem'} adicionado{f.midia.nome ? ` · ${f.midia.nome}` : ''}</div>
            <button type="button" onClick={() => set('midia', null)} style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)' }}><Icon name="close" size={16} /></button>
          </div>
        ) : (
          <label style={{ display:'flex', alignItems:'center', gap:8, border:'1px dashed var(--escalab-line)', borderRadius:10, padding:'12px 14px', cursor:'pointer', color:'var(--escalab-mute)', fontSize:13 }}>
            <Icon name="upload" size={15} /> Adicionar foto ou vídeo ao formulário
            <input type="file" accept="image/*,video/*" style={{ display:'none' }} onChange={handleMidia} />
          </label>
        )}
      </label>
      <div style={{ display:'flex', gap:16, alignItems:'center' }}>
        <label style={{ display:'flex', alignItems:'center', gap:8, cursor:'pointer' }}>
          <input type="checkbox" checked={f.anonima} onChange={e=>set('anonima',e.target.checked)}/>
          <span style={{ fontSize:13 }}>Respostas anônimas</span>
        </label>
        <label style={{ display:'flex', alignItems:'center', gap:6, fontSize:13 }}>
          Status:
          <select value={f.status} onChange={e=>set('status',e.target.value)} style={{ border:'1px solid var(--escalab-line)', borderRadius:6, padding:'4px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:'none' }}>
            <option value="rascunho">Rascunho</option>
            <option value="ativa">Ativa</option>
            <option value="encerrada">Encerrada</option>
          </select>
        </label>
      </div>

      <div style={{ background:'var(--escalab-paper)', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'16px' }}>
        <div style={{ fontSize:12, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', marginBottom:14 }}>Perguntas ({f.perguntas.length})</div>
        <EditorPerguntas perguntas={f.perguntas} onChange={ps=>set('perguntas',ps)} onRascunhoChange={setPerguntaPendente}/>
      </div>

      {erro && (
        <div style={{ background:'#FDECEC', border:'1px solid #F4C7C3', color:'#B3261E', borderRadius:10, padding:'10px 14px', fontSize:13, display:'flex', gap:8, alignItems:'flex-start' }}>
          <Icon name="close" size={14}/>
          <span>{erro}</span>
        </div>
      )}

      <div style={{ display:'flex', gap:10, justifyContent:'flex-end', alignItems:'center' }}>
        {perguntaPendente.tem && (
          <span style={{ fontSize:12, color:'#B56500', marginRight:'auto' }}>
            ⚠ Há uma pergunta digitada que ainda não foi adicionada à lista
          </span>
        )}
        <button onClick={onCancelar} style={{ padding:'9px 18px', border:'1px solid var(--escalab-line)', borderRadius:8, background:'#fff', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)' }}>Cancelar</button>
        <button onClick={handleSalvar}
          style={{ padding:'9px 22px', border:0, borderRadius:8, background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:13, fontFamily:'var(--font-sans)' }}>
          Salvar pesquisa
        </button>
      </div>
    </div>
  );
};

// ── Resultados de uma pesquisa ────────────────────────────────────────────────
const ResultadosPesquisa = ({ pesquisa, onVoltar, user }) => {
  const respostas = getRespostas().filter(r => r.pesquisaId === pesquisa.id);
  const n = respostas.length;
  const totalEsperado = COLABORADORES.length;
  const taxa = totalEsperado > 0 ? Math.round(n / totalEsperado * 100) : 0;
  const taxaCor = taxa >= 80 ? '#00836B' : taxa >= 60 ? '#1F4A8A' : taxa >= 40 ? '#B56500' : '#B3261E';
  const taxaBg  = taxa >= 80 ? '#E6F5F1' : taxa >= 60 ? '#EEF3FA' : taxa >= 40 ? '#FFF7EB' : '#FDECEC';
  const [subAba, setSubAba] = useState('agregado');
  return (
    <div>
      <button onClick={onVoltar} style={{ border:0, background:'transparent', cursor:'pointer', display:'flex', alignItems:'center', gap:6, color:'var(--escalab-mute)', fontSize:13, padding:0, marginBottom:18, fontFamily:'var(--font-sans)' }}>
        <Icon name="chev_left" size={14}/> Voltar
      </button>
      <div style={{ fontSize:16, fontWeight:700, marginBottom:4 }}>{pesquisa.titulo}</div>
      <div style={{ fontSize:13, color:'var(--escalab-mute)', marginBottom:14 }}>{n} resposta{n!==1?'s':''} · {pesquisa.anonima?'Anônima':'Identificada'}</div>
      {/* Taxa de respostas */}
      <div style={{ display:'flex', gap:12, marginBottom:18, flexWrap:'wrap' }}>
        <div style={{ background:taxaBg, border:'1px solid var(--escalab-line)', borderRadius:10, padding:'12px 18px', textAlign:'center', minWidth:130 }}>
          <div style={{ fontSize:22, fontWeight:800, color:taxaCor, lineHeight:1 }}>{taxa}%</div>
          <div style={{ fontSize:11, color:'var(--escalab-slate)', marginTop:3, fontWeight:600 }}>Taxa de respostas</div>
        </div>
        <div style={{ background:'#EEF3FA', border:'1px solid var(--escalab-line)', borderRadius:10, padding:'12px 18px', textAlign:'center', minWidth:130 }}>
          <div style={{ fontSize:22, fontWeight:800, color:'#1F4A8A', lineHeight:1 }}>{n}<span style={{ fontSize:14, color:'var(--escalab-slate)', fontWeight:500 }}> / {totalEsperado}</span></div>
          <div style={{ fontSize:11, color:'var(--escalab-slate)', marginTop:3, fontWeight:600 }}>Respondentes</div>
        </div>
      </div>

      {/* Sub-abas: agregado x respostas individuais (somente pesquisa identificada) */}
      {!pesquisa.anonima && n > 0 && (
        <div style={{ display:'flex', gap:4, marginBottom:18, borderBottom:'1px solid var(--escalab-line)' }}>
          {[
            { id:'agregado',    label:'Resultado agregado',     icon:'chart' },
            { id:'individuais', label:`Respostas individuais (${n})`, icon:'clipboard' },
          ].map(t => (
            <button key={t.id} onClick={() => setSubAba(t.id)}
              style={{ border:0, background:'transparent', cursor:'pointer', padding:'10px 16px', fontSize:13, fontFamily:'var(--font-sans)', fontWeight: subAba === t.id ? 700 : 600,
                color: subAba === t.id ? 'var(--escalab-brand)' : 'var(--escalab-slate)',
                borderBottom: subAba === t.id ? '2px solid var(--escalab-brand)' : '2px solid transparent', marginBottom:-1,
                display:'flex', gap:6, alignItems:'center' }}>
              <Icon name={t.icon} size={13}/> {t.label}
            </button>
          ))}
        </div>
      )}

      {/* Conteúdo: respostas individuais */}
      {!pesquisa.anonima && subAba === 'individuais' && (
        <RespostasIndividuais pesquisa={pesquisa} respostas={respostas} user={user} />
      )}

      {(pesquisa.anonima || subAba === 'agregado') && (
        n === 0
        ? <div style={{ textAlign:'center', padding:'48px', color:'var(--escalab-slate)', fontSize:14 }}>Nenhuma resposta ainda.</div>
        : <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
            {pesquisa.perguntas.map(p => {
              const vals = respostas.map(r => r.respostas[p.id]).filter(v => v != null && v !== '');
              const isNum = ['escala','boolean'].includes(p.tipo);
              const media = isNum && vals.length ? (vals.reduce((s,v) => s + Number(v), 0) / vals.length).toFixed(1) : null;
              const max = p.tipo === 'escala' ? (p.escalaMax||10) : p.tipo === 'boolean' ? 1 : 5;
              const contagem = {};
              vals.forEach(v => { contagem[v] = (contagem[v]||0)+1; });
              return (
                <div key={p.id} style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'16px 18px' }}>
                  <div style={{ fontSize:13.5, fontWeight:600, marginBottom:10 }}>{p.texto}</div>
                  {media !== null && (
                    <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:10 }}>
                      <div style={{ fontSize:30, fontWeight:900, color:'var(--escalab-brand)', lineHeight:1 }}>{media}</div>
                      <div style={{ flex:1, height:8, background:'var(--escalab-line)', borderRadius:999 }}>
                        <div style={{ width:(Number(media)/max*100)+'%', height:'100%', background:'var(--escalab-brand)', borderRadius:999, transition:'width .4s' }}/>
                      </div>
                      <span style={{ fontSize:12, color:'var(--escalab-mute)' }}>de {max}</span>
                    </div>
                  )}
                  {(p.tipo==='multipla'||p.tipo==='boolean') && (
                    <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                      {(p.tipo==='boolean'?['Sim','Não']:p.opcoes).map(op => {
                        const k = p.tipo==='boolean' ? (op==='Sim'?'true':'false') : op;
                        const cnt = contagem[k]||0; const pct = vals.length ? Math.round(cnt/vals.length*100) : 0;
                        return (
                          <div key={op} style={{ display:'flex', alignItems:'center', gap:10 }}>
                            <span style={{ fontSize:12.5, minWidth:100, color:'var(--escalab-slate)' }}>{op}</span>
                            <div style={{ flex:1, height:6, background:'var(--escalab-line)', borderRadius:999 }}>
                              <div style={{ width:pct+'%', height:'100%', background:'var(--escalab-brand-soft)', borderRadius:999 }}/>
                            </div>
                            <span style={{ fontSize:12, color:'var(--escalab-mute)', minWidth:40 }}>{cnt} ({pct}%)</span>
                          </div>
                        );
                      })}
                    </div>
                  )}
                  {['texto','nome','email'].includes(p.tipo) && (
                    <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                      {vals.slice(0,5).map((v,i) => <div key={i} style={{ fontSize:13, color:'var(--escalab-slate)', background:'var(--escalab-paper)', borderRadius:7, padding:'8px 10px', lineHeight:1.5 }}>{v}</div>)}
                      {vals.length>5 && <div style={{ fontSize:12, color:'var(--escalab-mute)' }}>+{vals.length-5} respostas</div>}
                    </div>
                  )}
                  <div style={{ fontSize:11, color:'var(--escalab-slate)', marginTop:8, fontWeight:600 }}>{vals.length}/{n} responderam esta pergunta</div>
                </div>
              );
            })}
          </div>
      )}
    </div>
  );
};

// ── Respostas individuais (somente para pesquisas identificadas) ──────────────
const RespostasIndividuais = ({ pesquisa, respostas, user }) => {
  const [decisoes, setDecisoes] = useState(() => getDecisoes());
  const [modalDetalhe, setModalDetalhe] = useState(null);
  const [filtroStatus, setFiltroStatus] = useState('todos'); // todos | pendente | aprovado | reprovado

  // Identifica perguntas-chave (valor, link, nome de curso etc.) automaticamente
  const perguntaValor = pesquisa.perguntas.find(ehPerguntaValor);
  const perguntaLink  = pesquisa.perguntas.find(ehPerguntaLink);
  // Primeira pergunta texto não-link como "objeto" (ex.: nome do curso)
  const perguntaObjeto = pesquisa.perguntas.find(p => p.tipo === 'texto' && !ehPerguntaLink(p) && !ehPerguntaValor(p));

  function aplicarDecisao(respId, decisao) {
    setDecisao(respId, decisao, user?.id);
    setDecisoes(getDecisoes());
  }

  function nomeColab(id) {
    const c = COLABORADORES.find(x => x.id === id);
    return c?.nome || 'Colaborador';
  }

  // Enriquecer respostas com decisão + valor parseado
  const linhas = respostas.map(r => {
    const dec = decisoes[r.id]?.status || 'pendente';
    const valor = perguntaValor ? parseValorBR(r.respostas[perguntaValor.id]) : null;
    const link  = perguntaLink ? String(r.respostas[perguntaLink.id] || '').trim() : '';
    const objeto = perguntaObjeto ? String(r.respostas[perguntaObjeto.id] || '').trim() : '';
    return { resp: r, dec, valor, link, objeto };
  });

  const filtradas = filtroStatus === 'todos' ? linhas : linhas.filter(l => l.dec === filtroStatus);

  // Montante: soma só dos aprovados + ainda pendentes (o que de fato pode ser gasto)
  const totalAprovado  = linhas.filter(l => l.dec === 'aprovado').reduce((s, l) => s + (l.valor || 0), 0);
  const totalPendente  = linhas.filter(l => l.dec === 'pendente').reduce((s, l) => s + (l.valor || 0), 0);
  const totalReprovado = linhas.filter(l => l.dec === 'reprovado').reduce((s, l) => s + (l.valor || 0), 0);
  const totalGeral     = totalAprovado + totalPendente + totalReprovado;

  function exportarCSV() {
    const cabecalho = ['Colaborador', ...pesquisa.perguntas.map(p => p.texto), 'Status', 'Decidido em'];
    const linhasCsv = linhas.map(l => [
      nomeColab(l.resp.colaboradorId),
      ...pesquisa.perguntas.map(p => String(l.resp.respostas[p.id] ?? '').replace(/"/g, '""')),
      l.dec,
      decisoes[l.resp.id]?.decisaoEm || '',
    ]);
    const csv = [cabecalho, ...linhasCsv].map(row => row.map(c => `"${c}"`).join(',')).join('\n');
    const blob = new Blob(['﻿' + csv], { type: 'text/csv;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = `${pesquisa.titulo.replace(/[^a-z0-9]+/gi, '_')}.csv`;
    a.click(); URL.revokeObjectURL(url);
  }

  const decConfig = {
    pendente:  { label: 'Pendente',   cor: '#B56500', bg: '#FFF7EB' },
    aprovado:  { label: 'Aprovado',   cor: '#00836B', bg: '#E6F5F1' },
    reprovado: { label: 'Reprovado',  cor: '#B3261E', bg: '#FDECEC' },
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {/* Cards de montante */}
      {perguntaValor && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 10 }}>
          {[
            { label: 'Total geral',       val: totalGeral,     cor: '#1F4A8A', bg: '#EEF3FA' },
            { label: 'Aprovados',         val: totalAprovado,  cor: '#00836B', bg: '#E6F5F1' },
            { label: 'Aguardando análise', val: totalPendente,  cor: '#B56500', bg: '#FFF7EB' },
            { label: 'Reprovados',        val: totalReprovado, cor: '#B3261E', bg: '#FDECEC' },
          ].map(k => (
            <div key={k.label} style={{ background: k.bg, border: `1px solid ${k.cor}30`, borderRadius: 10, padding: '12px 14px' }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--escalab-slate)', textTransform: 'uppercase', letterSpacing: '.06em' }}>{k.label}</div>
              <div style={{ fontSize: 18, fontWeight: 800, color: k.cor, lineHeight: 1.1, marginTop: 4 }}>{formatBRL(k.val)}</div>
            </div>
          ))}
        </div>
      )}

      {/* Filtro de status + export */}
      <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: 4, background: 'var(--escalab-paper)', borderRadius: 8, padding: 3, border: '1px solid var(--escalab-line)' }}>
          {[
            { id: 'todos',     label: `Todos (${linhas.length})` },
            { id: 'pendente',  label: `Pendentes (${linhas.filter(l=>l.dec==='pendente').length})` },
            { id: 'aprovado',  label: `Aprovados (${linhas.filter(l=>l.dec==='aprovado').length})` },
            { id: 'reprovado', label: `Reprovados (${linhas.filter(l=>l.dec==='reprovado').length})` },
          ].map(f => (
            <button key={f.id} onClick={() => setFiltroStatus(f.id)} style={{
              border: 0, borderRadius: 6, padding: '5px 12px', cursor: 'pointer',
              fontSize: 12, fontWeight: filtroStatus === f.id ? 700 : 600,
              background: filtroStatus === f.id ? '#fff' : 'transparent',
              color: filtroStatus === f.id ? 'var(--escalab-ink)' : 'var(--escalab-slate)',
              boxShadow: filtroStatus === f.id ? '0 1px 4px rgba(0,0,0,.08)' : 'none', fontFamily: 'var(--font-sans)',
            }}>
              {f.label}
            </button>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        <button onClick={exportarCSV} style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 8, padding: '7px 14px', cursor: 'pointer', fontSize: 12.5, color: 'var(--escalab-slate)', fontFamily: 'var(--font-sans)', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon name="download" size={12} /> Exportar CSV
        </button>
      </div>

      {/* Tabela */}
      <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, overflow: 'hidden' }}>
        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, minWidth: 720 }}>
            <thead>
              <tr style={{ background: 'var(--escalab-paper)' }}>
                <th style={{ textAlign: 'left', padding: '10px 14px', fontSize: 11, fontWeight: 700, color: 'var(--escalab-slate)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Colaborador</th>
                {perguntaObjeto && <th style={{ textAlign: 'left', padding: '10px 14px', fontSize: 11, fontWeight: 700, color: 'var(--escalab-slate)', textTransform: 'uppercase', letterSpacing: '.06em' }}>{perguntaObjeto.texto.length > 30 ? perguntaObjeto.texto.slice(0,30)+'…' : perguntaObjeto.texto}</th>}
                {perguntaLink && <th style={{ textAlign: 'left', padding: '10px 14px', fontSize: 11, fontWeight: 700, color: 'var(--escalab-slate)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Link</th>}
                {perguntaValor && <th style={{ textAlign: 'right', padding: '10px 14px', fontSize: 11, fontWeight: 700, color: 'var(--escalab-slate)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Valor</th>}
                <th style={{ textAlign: 'center', padding: '10px 14px', fontSize: 11, fontWeight: 700, color: 'var(--escalab-slate)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Status</th>
                <th style={{ textAlign: 'right', padding: '10px 14px', fontSize: 11, fontWeight: 700, color: 'var(--escalab-slate)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Ações</th>
              </tr>
            </thead>
            <tbody>
              {filtradas.length === 0 ? (
                <tr><td colSpan={6} style={{ textAlign: 'center', padding: '32px', color: 'var(--escalab-slate)' }}>Nenhuma resposta com este status.</td></tr>
              ) : filtradas.map((l, i) => {
                const cfg = decConfig[l.dec];
                const c = COLABORADORES.find(x => x.id === l.resp.colaboradorId);
                return (
                  <tr key={l.resp.id} style={{ borderTop: i > 0 ? '1px solid var(--escalab-line)' : 0 }}>
                    <td style={{ padding: '10px 14px' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                        <div style={{ width: 28, height: 28, borderRadius: '50%', background: c?.cor || '#6B7280', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700 }}>{c?.iniciais || '?'}</div>
                        <div style={{ minWidth: 0 }}>
                          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--escalab-ink)' }}>{c?.nome || 'Colab desconhecido'}</div>
                          <div style={{ fontSize: 11, color: 'var(--escalab-slate)' }}>{c?.setor || '·'}</div>
                        </div>
                      </div>
                    </td>
                    {perguntaObjeto && (
                      <td style={{ padding: '10px 14px', fontSize: 12.5, color: 'var(--escalab-ink)', maxWidth: 240 }}>
                        <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{l.objeto || '—'}</div>
                      </td>
                    )}
                    {perguntaLink && (
                      <td style={{ padding: '10px 14px' }}>
                        {l.link ? (
                          <a href={l.link.startsWith('http') ? l.link : 'https://' + l.link} target="_blank" rel="noopener noreferrer" style={{ fontSize: 12, color: 'var(--escalab-brand)', textDecoration: 'underline' }}>Abrir ↗</a>
                        ) : <span style={{ fontSize: 12, color: 'var(--escalab-slate)' }}>—</span>}
                      </td>
                    )}
                    {perguntaValor && (
                      <td style={{ padding: '10px 14px', textAlign: 'right', fontSize: 13, fontWeight: 700, color: l.valor != null ? 'var(--escalab-ink)' : 'var(--escalab-slate)' }}>
                        {l.valor != null ? formatBRL(l.valor) : '—'}
                      </td>
                    )}
                    <td style={{ padding: '10px 14px', textAlign: 'center' }}>
                      <span style={{ fontSize: 11, fontWeight: 700, color: cfg.cor, background: cfg.bg, border: `1px solid ${cfg.cor}40`, borderRadius: 999, padding: '3px 10px' }}>{cfg.label}</span>
                    </td>
                    <td style={{ padding: '10px 14px', textAlign: 'right' }}>
                      <div style={{ display: 'inline-flex', gap: 4 }}>
                        <button onClick={() => setModalDetalhe(l)} title="Ver resposta completa"
                          style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 6, padding: '4px 9px', cursor: 'pointer', fontSize: 11, color: 'var(--escalab-slate)', fontFamily: 'var(--font-sans)', fontWeight: 600 }}>
                          Ver
                        </button>
                        {l.dec !== 'aprovado' && (
                          <button onClick={() => aplicarDecisao(l.resp.id, 'aprovado')} title="Aprovar"
                            style={{ border: '1px solid #B5E3D7', background: '#E6F5F1', color: '#00836B', borderRadius: 6, padding: '4px 9px', cursor: 'pointer', fontSize: 11, fontFamily: 'var(--font-sans)', fontWeight: 700 }}>
                            ✓
                          </button>
                        )}
                        {l.dec !== 'reprovado' && (
                          <button onClick={() => aplicarDecisao(l.resp.id, 'reprovado')} title="Reprovar"
                            style={{ border: '1px solid #F4C7C3', background: '#FDECEC', color: '#B3261E', borderRadius: 6, padding: '4px 9px', cursor: 'pointer', fontSize: 11, fontFamily: 'var(--font-sans)', fontWeight: 700 }}>
                            ✕
                          </button>
                        )}
                        {l.dec !== 'pendente' && (
                          <button onClick={() => aplicarDecisao(l.resp.id, null)} title="Voltar para pendente"
                            style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 6, padding: '4px 9px', cursor: 'pointer', fontSize: 11, color: 'var(--escalab-slate)', fontFamily: 'var(--font-sans)' }}>
                            ↺
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Modal detalhe da resposta */}
      {modalDetalhe && (
        <div onClick={() => setModalDetalhe(null)}
          style={{ position: 'fixed', inset: 0, background: 'rgba(10,15,18,.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
          <div onClick={e => e.stopPropagation()}
            style={{ background: '#fff', borderRadius: 14, maxWidth: 640, width: '100%', maxHeight: '85vh', overflow: 'auto', boxShadow: '0 12px 40px rgba(0,0,0,.25)' }}>
            <div style={{ padding: '18px 22px', borderBottom: '1px solid var(--escalab-line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--escalab-ink)' }}>Resposta de {nomeColab(modalDetalhe.resp.colaboradorId)}</div>
                <div style={{ fontSize: 12, color: 'var(--escalab-slate)', marginTop: 2 }}>Enviada em {new Date(modalDetalhe.resp.respondidoEm).toLocaleString('pt-BR')}</div>
              </div>
              <button onClick={() => setModalDetalhe(null)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-slate)' }}>
                <Icon name="close" size={16} />
              </button>
            </div>
            <div style={{ padding: '18px 22px', display: 'flex', flexDirection: 'column', gap: 14 }}>
              {pesquisa.perguntas.map(p => {
                const v = modalDetalhe.resp.respostas[p.id];
                return (
                  <div key={p.id}>
                    <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--escalab-slate)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 4 }}>{p.texto}</div>
                    <div style={{ fontSize: 13.5, color: v != null && v !== '' ? 'var(--escalab-ink)' : 'var(--escalab-slate)', background: 'var(--escalab-paper)', borderRadius: 8, padding: '10px 12px', whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>
                      {v != null && v !== '' ? (
                        ehPerguntaLink(p) && String(v).match(/^https?:\/\//)
                          ? <a href={String(v)} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--escalab-brand)', textDecoration: 'underline' }}>{String(v)}</a>
                          : String(v)
                      ) : <em>Não respondida</em>}
                    </div>
                  </div>
                );
              })}
            </div>
            <div style={{ padding: '14px 22px', borderTop: '1px solid var(--escalab-line)', background: 'var(--escalab-paper)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
              <button onClick={() => { aplicarDecisao(modalDetalhe.resp.id, 'reprovado'); setModalDetalhe(null); }}
                style={{ border: '1px solid #F4C7C3', background: '#FDECEC', color: '#B3261E', borderRadius: 8, padding: '8px 16px', cursor: 'pointer', fontSize: 13, fontWeight: 700, fontFamily: 'var(--font-sans)' }}>
                ✕ Reprovar
              </button>
              <button onClick={() => { aplicarDecisao(modalDetalhe.resp.id, 'aprovado'); setModalDetalhe(null); }}
                style={{ border: 0, background: 'var(--escalab-brand)', color: '#fff', borderRadius: 8, padding: '8px 16px', cursor: 'pointer', fontSize: 13, fontWeight: 700, fontFamily: 'var(--font-sans)' }}>
                ✓ Aprovar
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// ── Formulário de resposta (colaborador) ──────────────────────────────────────
const FormResposta = ({ pesquisa, user, onVoltar, onEnviado }) => {
  const [resps, setResps] = useState({});
  const set = (id,v) => setResps(r=>({...r,[id]:v}));
  const inp = { border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:'none', width:'100%', boxSizing:'border-box' };

  function submit(e) {
    e.preventDefault();
    for (const p of pesquisa.perguntas) {
      if (p.obrigatoria) {
        const v = resps[p.id];
        if (v == null || (typeof v === 'string' && !v.trim())) { alert('Responda: ' + p.texto); return; }
      }
    }
    addResposta({ pesquisaId:pesquisa.id, colaboradorId:pesquisa.anonima?null:user.id, respostas:resps, respondidoEm:new Date().toISOString() });
    onEnviado();
  }

  return (
    <div>
      <button onClick={onVoltar} style={{ border:0, background:'transparent', cursor:'pointer', display:'flex', alignItems:'center', gap:6, color:'var(--escalab-mute)', fontSize:13, padding:0, marginBottom:18, fontFamily:'var(--font-sans)' }}>
        <Icon name="chev_left" size={14}/> Todas as pesquisas
      </button>
      <div style={{ background:'linear-gradient(135deg,var(--escalab-brand),var(--escalab-brand-deep))', borderRadius:14, padding:'18px 22px', marginBottom:22 }}>
        <div style={{ fontSize:16, fontWeight:700, color:'#fff' }}>{pesquisa.titulo}</div>
        {pesquisa.descricao && <div style={{ fontSize:13, color:'rgba(255,255,255,.92)', marginTop:4, lineHeight:1.5 }}>{pesquisa.descricao}</div>}
        {pesquisa.anonima && <div style={{ fontSize:11.5, fontWeight:700, color:'rgba(255,255,255,.82)', marginTop:6, letterSpacing:'.04em' }}>🔒 Suas respostas são anônimas</div>}
      </div>
      {pesquisa.midia && (
        <div style={{ marginBottom:22, borderRadius:14, overflow:'hidden', border:'1px solid var(--escalab-line)' }}>
          {pesquisa.midia.tipo === 'video'
            ? <video src={pesquisa.midia.url} controls style={{ width:'100%', maxHeight:320, background:'#000', display:'block' }} />
            : <img src={pesquisa.midia.url} alt="" style={{ width:'100%', maxHeight:320, objectFit:'cover', display:'block' }} />}
        </div>
      )}
      <form onSubmit={submit} style={{ display:'flex', flexDirection:'column', gap:14 }}>
        {pesquisa.perguntas.map((p,i) => (
          <div key={p.id} style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'16px 18px' }}>
            <div style={{ fontSize:14, fontWeight:600, color:'var(--escalab-ink)', marginBottom:12 }}>{i+1}. {p.texto}{p.obrigatoria && <span style={{ color:'#B3261E' }}> *</span>}</div>
            {p.tipo==='escala' && (
              <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
                {Array.from({length:p.escalaMax||10},(_,k)=>k+1).map(n=>(
                  <button key={n} type="button" onClick={()=>set(p.id,n)} style={{ width:40, height:40, border:`2px solid ${resps[p.id]===n?'var(--escalab-brand)':'var(--escalab-line)'}`, borderRadius:8, background:resps[p.id]===n?'var(--escalab-brand)':'#fff', color:resps[p.id]===n?'#fff':'var(--escalab-slate)', cursor:'pointer', fontWeight:700, fontSize:14, fontFamily:'var(--font-sans)' }}>{n}</button>
                ))}
              </div>
            )}
            {p.tipo==='boolean' && (
              <div style={{ display:'flex', gap:10 }}>
                {['Sim','Não'].map(op=>(
                  <button key={op} type="button" onClick={()=>set(p.id,op==='Sim'?'true':'false')} style={{ padding:'8px 22px', border:`2px solid ${resps[p.id]===(op==='Sim'?'true':'false')?'var(--escalab-brand)':'var(--escalab-line)'}`, borderRadius:8, background:resps[p.id]===(op==='Sim'?'true':'false')?'var(--escalab-brand-tint)':'#fff', color:resps[p.id]===(op==='Sim'?'true':'false')?'var(--escalab-brand)':'var(--escalab-slate)', cursor:'pointer', fontWeight:600, fontSize:14, fontFamily:'var(--font-sans)' }}>{op}</button>
                ))}
              </div>
            )}
            {p.tipo==='multipla' && (
              <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                {p.opcoes.map(op=>(
                  <button key={op} type="button" onClick={()=>set(p.id,op)} style={{ textAlign:'left', padding:'10px 14px', border:`2px solid ${resps[p.id]===op?'var(--escalab-brand)':'var(--escalab-line)'}`, borderRadius:9, background:resps[p.id]===op?'var(--escalab-brand-tint)':'#fff', color:resps[p.id]===op?'var(--escalab-brand)':'var(--escalab-ink)', cursor:'pointer', fontSize:14, fontFamily:'var(--font-sans)', fontWeight:resps[p.id]===op?600:400 }}>{op}</button>
                ))}
              </div>
            )}
            {p.tipo==='texto' && <textarea value={resps[p.id]||''} onChange={e=>set(p.id,e.target.value)} rows={3} style={{...inp,resize:'vertical'}} placeholder="Sua resposta..."/>}
            {p.tipo==='nome' && <input value={resps[p.id]||''} onChange={e=>set(p.id,e.target.value)} style={inp} placeholder="Seu nome..."/>}
            {p.tipo==='email' && <input type="email" value={resps[p.id]||''} onChange={e=>set(p.id,e.target.value)} style={inp} placeholder="seu@email.com"/>}
          </div>
        ))}
        <div style={{ display:'flex', justifyContent:'flex-end' }}>
          <button type="submit" style={{ padding:'11px 28px', border:0, borderRadius:9, background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:14, fontFamily:'var(--font-sans)' }}>Enviar resposta</button>
        </div>
      </form>
    </div>
  );
};

// ── Screen principal ──────────────────────────────────────────────────────────
const ScreenOutrasPesquisas = ({ user }) => {
  const isAdmin = user.perfil === 'admin';
  const [pesquisas, setPesquisas] = useState(getPesquisasCustom);
  const [modo, setModo]           = useState('lista'); // lista | criar | editar | responder | resultados
  const [selecionada, setSel]     = useState(null);
  const [enviado, setEnviado]     = useState(false);

  function reload() { setPesquisas(getPesquisasCustom()); }
  function abrir(p, m) { setSel(p); setModo(m); setEnviado(false); }
  function voltar() { setModo('lista'); setSel(null); setEnviado(false); reload(); }

  const ativas = pesquisas.filter(p => p.status === 'ativa');
  const listaAdmin = pesquisas;
  const listaColab = ativas;

  const STATUS_CORES = { ativa:['#00836B','#E6F5F1','#A3D9CE'], rascunho:['#B56500','#FFF7EB','#FFD6A3'], encerrada:['var(--escalab-mute)','var(--escalab-paper)','var(--escalab-line)'] };

  if (modo === 'criar' || modo === 'editar') {
    return (
      <div className="fade-in" style={{ maxWidth:800 }}>
        <h2 style={{ margin:'0 0 20px', fontSize:20, fontWeight:800 }}>{modo==='criar'?'Nova pesquisa':'Editar pesquisa'}</h2>
        <FormPesquisa pesquisa={modo==='editar'?selecionada:null} onSalvar={voltar} onCancelar={voltar}/>
      </div>
    );
  }
  if (modo === 'resultados') return <div className="fade-in" style={{ maxWidth:1000 }}><ResultadosPesquisa pesquisa={selecionada} onVoltar={voltar} user={user}/></div>;
  if (modo === 'responder') {
    if (enviado) return (
      <div className="fade-in" style={{ maxWidth:600, textAlign:'center', padding:'64px 20px' }}>
        <div style={{ width:72, height:72, borderRadius:'50%', background:'#E6F5F1', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 20px' }}>
          <Icon name="check" size={32}/>
        </div>
        <h3 style={{ fontSize:20, fontWeight:800, marginBottom:8 }}>Resposta enviada!</h3>
        <p style={{ color:'var(--escalab-mute)', fontSize:14, marginBottom:24 }}>Obrigado por responder a pesquisa <strong>{selecionada?.titulo}</strong>.</p>
        <button onClick={voltar} style={{ border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 22px', background:'#fff', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)' }}>Ver outras pesquisas</button>
      </div>
    );
    return <div className="fade-in" style={{ maxWidth:700 }}><FormResposta pesquisa={selecionada} user={user} onVoltar={voltar} onEnviado={()=>setEnviado(true)}/></div>;
  }

  const lista = isAdmin ? listaAdmin : listaColab;

  return (
    <div className="fade-in" style={{ maxWidth:900 }}>
      <div style={{ display:'flex', alignItems:'flex-start', gap:12, marginBottom:24, flexWrap:'wrap' }}>
        <div style={{ flex:1 }}>
          <h2 style={{ margin:0, fontSize:22, fontWeight:800 }}>Outras Pesquisas</h2>
          <p style={{ margin:'4px 0 0', fontSize:13.5, color:'var(--escalab-mute)' }}>{isAdmin?'Crie e gerencie pesquisas customizadas':'Pesquisas disponíveis para responder'}</p>
        </div>
        {isAdmin && (
          <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
            <button onClick={() => { setSel(templateEscalabSchool()); setModo('editar'); }} style={{ padding:'9px 16px', border:'1px solid var(--escalab-brand)', borderRadius:8, background:'var(--escalab-brand-tint)', color:'var(--escalab-brand-deep)', cursor:'pointer', fontWeight:600, fontSize:13, fontFamily:'var(--font-sans)' }}>
              + Pesquisa Escalab School
            </button>
            <button onClick={() => { setSel(templatePosProjeto()); setModo('editar'); }} style={{ padding:'9px 16px', border:'1px solid #B56500', borderRadius:8, background:'#FFF7EB', color:'#B56500', cursor:'pointer', fontWeight:600, fontSize:13, fontFamily:'var(--font-sans)' }}>
              + Pesquisa Pós-Projeto (PMO)
            </button>
            <button onClick={() => setModo('criar')} style={{ padding:'9px 18px', border:0, borderRadius:8, background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:13, fontFamily:'var(--font-sans)' }}>+ Nova pesquisa</button>
          </div>
        )}
      </div>

      {lista.length === 0
        ? <div style={{ textAlign:'center', padding:'60px 20px', color:'var(--escalab-mute)', fontSize:14, background:'#fff', borderRadius:16, border:'1px solid var(--escalab-line)' }}>
            {isAdmin ? 'Nenhuma pesquisa criada. Clique em "+ Nova pesquisa" para começar.' : 'Nenhuma pesquisa disponível no momento.'}
          </div>
        : <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
            {lista.map(p => {
              const [cor,bg,brd] = STATUS_CORES[p.status] || STATUS_CORES.rascunho;
              const nResp = getRespostas().filter(r=>r.pesquisaId===p.id).length;
              const respondeu = !isAdmin && jaRespondeu(p.id, user.id);
              return (
                <div key={p.id} style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:14, padding:'18px 22px', display:'flex', gap:14, alignItems:'flex-start' }}>
                  <div style={{ flex:1 }}>
                    <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:6, flexWrap:'wrap' }}>
                      <span style={{ fontSize:15, fontWeight:700, color:'var(--escalab-ink)' }}>{p.titulo}</span>
                      <span style={{ fontSize:11, fontWeight:600, background:bg, color:cor, border:`1px solid ${brd}`, borderRadius:5, padding:'2px 8px' }}>{p.status.charAt(0).toUpperCase()+p.status.slice(1)}</span>
                      {respondeu && <span style={{ fontSize:11, fontWeight:600, background:'#E6F5F1', color:'#00836B', border:'1px solid #A3D9CE', borderRadius:5, padding:'2px 8px' }}>✓ Respondida</span>}
                    </div>
                    {p.descricao && <div style={{ fontSize:13, color:'var(--escalab-slate)', marginBottom:6, lineHeight:1.5 }}>{p.descricao}</div>}
                    <div style={{ fontSize:12, color:'var(--escalab-mute)', display:'flex', gap:14, flexWrap:'wrap' }}>
                      <span>{p.perguntas.length} pergunta{p.perguntas.length!==1?'s':''}</span>
                      {isAdmin && <span>{nResp} resposta{nResp!==1?'s':''}</span>}
                      {p.prazo && <span>Prazo: {p.prazo.split('-').reverse().join('/')}</span>}
                      {p.anonima && <span>🔒 Anônima</span>}
                    </div>
                  </div>
                  <div style={{ display:'flex', gap:8, flexShrink:0, flexWrap:'wrap' }}>
                    {isAdmin && (
                      <>
                        <button onClick={() => abrir(p,'resultados')} style={{ padding:'7px 12px', border:'1px solid var(--escalab-line)', borderRadius:7, background:'#fff', cursor:'pointer', fontSize:12, color:'var(--escalab-slate)', fontFamily:'var(--font-sans)' }}>Resultados</button>
                        {p.status === 'ativa' ? (
                          <button onClick={() => { if (confirm(`Desativar (encerrar) "${p.titulo}"? Ninguem vai conseguir responder depois disso.`)) { upsertPesquisa({ ...p, status:'encerrada', encerradaEm:new Date().toISOString().slice(0,10) }); reload(); } }}
                            title="Desativar/encerrar a pesquisa"
                            style={{ padding:'7px 12px', border:'1px solid #F4C7C3', borderRadius:7, background:'#FDECEC', cursor:'pointer', fontSize:12, color:'#B3261E', fontFamily:'var(--font-sans)', fontWeight:600, display:'inline-flex', alignItems:'center', gap:5 }}>
                            <Icon name="lock" size={11}/> Desativar
                          </button>
                        ) : (
                          <button onClick={() => { if (confirm(`Ativar "${p.titulo}"? Vai aparecer pros colaboradores responderem.`)) { upsertPesquisa({ ...p, status:'ativa' }); reload(); } }}
                            title={p.status === 'encerrada' ? 'Reabrir pesquisa' : 'Ativar pesquisa'}
                            style={{ padding:'7px 12px', border:'1px solid #B5E3D7', borderRadius:7, background:'#E6F5F1', cursor:'pointer', fontSize:12, color:'#00836B', fontFamily:'var(--font-sans)', fontWeight:600, display:'inline-flex', alignItems:'center', gap:5 }}>
                            <Icon name="check" size={11}/> Ativar
                          </button>
                        )}
                        <button onClick={() => abrir(p,'editar')} style={{ padding:'7px 12px', border:'1px solid var(--escalab-brand-soft)', borderRadius:7, background:'var(--escalab-brand-tint)', cursor:'pointer', fontSize:12, color:'var(--escalab-brand-deep)', fontFamily:'var(--font-sans)', fontWeight:600 }}>Editar</button>
                        <button onClick={() => { if (confirm('Excluir esta pesquisa?')) { deletarPesquisa(p.id); reload(); } }} style={{ padding:'7px 12px', border:'1px solid #F4C7C3', borderRadius:7, background:'#FDECEC', cursor:'pointer', fontSize:12, color:'#B3261E', fontFamily:'var(--font-sans)' }}>Excluir</button>
                      </>
                    )}
                    {!isAdmin && p.status==='ativa' && !respondeu && p.perguntas.length > 0 && (
                      <button onClick={() => abrir(p,'responder')} style={{ padding:'9px 18px', border:0, borderRadius:8, background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:13, fontFamily:'var(--font-sans)' }}>Responder</button>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
      }
    </div>
  );
};

window.ScreenOutrasPesquisas = ScreenOutrasPesquisas;
