// ═══════════════════════════════════════════════════════════════
// SCREEN · Módulo de Feedbacks
// ═══════════════════════════════════════════════════════════════

const PREPARO_KEY = 'escalab_feedback_preparo';
const PREPARO_COMPETENCIAS_KEY = 'escalab_feedback_competencias_v2';
const PREPARO_PERGUNTAS_DEFAULT = [
  { id: 'qualidade',     label: 'Qualidade do trabalho — precisão, atenção aos detalhes, padrão de excelência' },
  { id: 'produtividade', label: 'Produtividade — volume e ritmo de entrega dentro dos prazos' },
  { id: 'metas',         label: 'Cumprimento de metas e objetivos acordados' },
  { id: 'resolucao',     label: 'Capacidade de resolver problemas e tomar decisões' },
  { id: 'comunicacao',   label: 'Comunicação — clareza, escuta, capacidade de dar e receber retorno' },
  { id: 'adaptabilidade',label: 'Adaptabilidade a mudanças' },
  { id: 'cultura',       label: 'Alinhamento com valores e cultura da empresa' },
];
function getPreparoPerguntas() {
  try {
    const raw = localStorage.getItem(PREPARO_COMPETENCIAS_KEY);
    if (!raw) return PREPARO_PERGUNTAS_DEFAULT;
    const arr = JSON.parse(raw);
    if (!Array.isArray(arr) || arr.length === 0) return PREPARO_PERGUNTAS_DEFAULT;
    return arr;
  } catch { return PREPARO_PERGUNTAS_DEFAULT; }
}
function salvarPreparoPerguntas(arr) {
  try { localStorage.setItem(PREPARO_COMPETENCIAS_KEY, JSON.stringify(arr)); } catch {}
}
function resetPreparoPerguntas() {
  try { localStorage.removeItem(PREPARO_COMPETENCIAS_KEY); } catch {}
}
function preparoKey(trimestre, liderId, colabId) { return `${trimestre}_${liderId}_${colabId}`; }
function getPreparos() { try { return JSON.parse(localStorage.getItem(PREPARO_KEY) || '{}'); } catch { return {}; } }
function getPreparoUm(trimestre, liderId, colabId) { return getPreparos()[preparoKey(trimestre, liderId, colabId)] || null; }
function salvarPreparo(trimestre, liderId, colabId, dados) {
  try {
    const m = getPreparos();
    m[preparoKey(trimestre, liderId, colabId)] = { ...dados, preenchidoEm: new Date().toISOString() };
    localStorage.setItem(PREPARO_KEY, JSON.stringify(m));
  } catch {}
}

// ── Modal de Preparo de Feedback ──────────────────────────────────────────────
const ModalPreparoFeedback = ({ user, colab, trimestre, onClose, onConcluido, preparoExistente }) => {
  const podeEditarCompetencias = user?.perfil === 'admin';
  const [perguntas, setPerguntas] = useState(() => getPreparoPerguntas());
  const [editandoComp, setEditandoComp] = useState(false);
  const [notas, setNotas] = useState(() => preparoExistente?.notas || {});
  const [destaque, setDestaque] = useState(() => preparoExistente?.destaque || '');
  const [desenvolver, setDesenvolver] = useState(() => preparoExistente?.desenvolver || '');
  const [expectativas, setExpectativas] = useState(() => preparoExistente?.expectativas || '');
  const [err, setErr] = useState('');
  const notasOk = perguntas.every(p => notas[p.id]);
  const podeSalvar = notasOk && destaque.trim() && desenvolver.trim();

  function salvar() {
    if (!podeSalvar) { setErr('Preencha todas as notas e os campos obrigatórios.'); return; }
    salvarPreparo(trimestre, user.id, colab.id, { notas, destaque, desenvolver, expectativas });
    onConcluido?.();
  }

  function addComp() {
    setPerguntas(p => [...p, { id: 'c_' + Date.now(), label: '' }]);
  }
  function updComp(id, label) {
    setPerguntas(p => p.map(x => x.id === id ? { ...x, label } : x));
  }
  function rmComp(id) {
    setPerguntas(p => p.filter(x => x.id !== id));
  }
  function salvarComp() {
    const filtrado = perguntas.filter(p => p.label.trim());
    if (filtrado.length === 0) { setErr('Adicione ao menos uma competência.'); return; }
    salvarPreparoPerguntas(filtrado);
    setPerguntas(filtrado);
    setEditandoComp(false);
    setErr('');
  }
  function restaurarPadrao() {
    if (!window.confirm('Restaurar as 7 competências padrão? Isso descarta suas alterações.')) return;
    resetPreparoPerguntas();
    setPerguntas(PREPARO_PERGUNTAS_DEFAULT);
    setEditandoComp(false);
  }

  return (
    <Modal open={true} onClose={onClose} title={`Preparo de Feedback · ${colab.nome.split(' ').slice(0,2).join(' ')}`}
      footer={<>
        <Button variant="outline" onClick={onClose}>Cancelar</Button>
        <Button variant="primary" icon="check" onClick={salvar} disabled={!podeSalvar}>Salvar preparo e abrir feedback</Button>
      </>}>
      <div style={{ display:'flex', flexDirection:'column', gap:18 }}>
        <div style={{ fontSize:13, color:'var(--escalab-mute)', background:'var(--escalab-paper)', borderLeft:'3px solid var(--escalab-brand)', borderRadius:6, padding:'10px 14px', lineHeight:1.55 }}>
          Antes de dar feedback, é obrigatório preparar a conversa. Avalie objetivamente cada eixo de 1 a 5 e descreva o que vai destacar e o que pode evoluir. Isso garante <strong>qualidade</strong>, não só quantidade de feedbacks. · Período: <strong>{trimestre}</strong>
        </div>

        <div>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
            <div style={{ fontSize:12, fontWeight:700, letterSpacing:'.06em', textTransform:'uppercase', color:'var(--escalab-mute)' }}>
              Competências · Notas (1 a 5)
            </div>
            {podeEditarCompetencias && !editandoComp && (
              <button onClick={() => setEditandoComp(true)}
                style={{ border:'1px solid var(--escalab-line)', background:'#fff', borderRadius:7, padding:'5px 10px', cursor:'pointer', fontSize:11.5, fontFamily:'var(--font-sans)', color:'var(--escalab-slate)', fontWeight:600, display:'flex', alignItems:'center', gap:5 }}>
                <Icon name="edit" size={11} /> Editar competências
              </button>
            )}
          </div>
          {editandoComp ? (
            <div style={{ background:'var(--escalab-brand-tint)', border:'1px solid var(--escalab-brand-soft)', borderRadius:9, padding:'12px 14px', display:'flex', flexDirection:'column', gap:7 }}>
              <div style={{ fontSize:11.5, color:'var(--escalab-brand-deep)', marginBottom:4 }}>
                Edição válida para <strong>todos os preparos</strong> daqui em diante. Use “Restaurar padrão” pra voltar às 7 competências sugeridas.
              </div>
              {perguntas.map(p => (
                <div key={p.id} style={{ display:'flex', gap:7, alignItems:'center' }}>
                  <input value={p.label} onChange={e => updComp(p.id, e.target.value)} placeholder="Nome da competência"
                    style={{ flex:1, border:'1px solid var(--escalab-line)', borderRadius:7, padding:'7px 10px', fontSize:12.5, fontFamily:'var(--font-sans)', outline:'none' }} />
                  <button onClick={() => rmComp(p.id)} title="Remover"
                    style={{ border:0, background:'transparent', cursor:'pointer', color:'#B3261E', padding:5 }}>
                    <Icon name="close" size={13} />
                  </button>
                </div>
              ))}
              <div style={{ display:'flex', gap:7, marginTop:5, flexWrap:'wrap' }}>
                <button onClick={addComp}
                  style={{ border:'1px dashed var(--escalab-brand-soft)', background:'transparent', borderRadius:7, padding:'6px 12px', cursor:'pointer', fontSize:12, fontFamily:'var(--font-sans)', color:'var(--escalab-brand-deep)', fontWeight:600 }}>
                  + Adicionar competência
                </button>
                <button onClick={restaurarPadrao}
                  style={{ border:'1px solid var(--escalab-line)', background:'#fff', borderRadius:7, padding:'6px 12px', cursor:'pointer', fontSize:12, fontFamily:'var(--font-sans)', color:'var(--escalab-slate)' }}>
                  Restaurar padrão
                </button>
                <div style={{ flex:1 }} />
                <button onClick={() => { setPerguntas(getPreparoPerguntas()); setEditandoComp(false); setErr(''); }}
                  style={{ border:'1px solid var(--escalab-line)', background:'#fff', borderRadius:7, padding:'6px 12px', cursor:'pointer', fontSize:12, fontFamily:'var(--font-sans)', color:'var(--escalab-slate)' }}>
                  Cancelar
                </button>
                <button onClick={salvarComp}
                  style={{ border:0, background:'var(--escalab-brand)', color:'#fff', borderRadius:7, padding:'6px 14px', cursor:'pointer', fontSize:12, fontFamily:'var(--font-sans)', fontWeight:700 }}>
                  Salvar competências
                </button>
              </div>
            </div>
          ) : (
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {perguntas.map(p => (
              <div key={p.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 12px', background:'var(--escalab-paper)', borderRadius:8 }}>
                <span style={{ flex:1, fontSize:13.5, color:'var(--escalab-ink)' }}>{p.label}</span>
                <div style={{ display:'flex', gap:4 }}>
                  {[1,2,3,4,5].map(n => (
                    <button key={n} onClick={() => setNotas(s => ({...s, [p.id]: n }))}
                      style={{ width:30, height:30, borderRadius:6, border:`2px solid ${notas[p.id]===n?'var(--escalab-brand)':'var(--escalab-line)'}`, background:notas[p.id]===n?'var(--escalab-brand)':'#fff', color:notas[p.id]===n?'#fff':'var(--escalab-slate)', cursor:'pointer', fontWeight:700, fontSize:13, fontFamily:'var(--font-sans)' }}>
                      {n}
                    </button>
                  ))}
                </div>
              </div>
            ))}
          </div>
          )}
        </div>

        <Field label="O que vou destacar (forte)" hint="Obrigatório">
          <textarea value={destaque} onChange={e => setDestaque(e.target.value)} rows={2}
            placeholder="Conquistas, comportamentos exemplares, pontos fortes…"
            style={{ width:'100%', border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:0, resize:'vertical', boxSizing:'border-box' }} />
        </Field>
        <Field label="O que pode evoluir" hint="Obrigatório">
          <textarea value={desenvolver} onChange={e => setDesenvolver(e.target.value)} rows={2}
            placeholder="Pontos de atenção, áreas de desenvolvimento…"
            style={{ width:'100%', border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:0, resize:'vertical', boxSizing:'border-box' }} />
        </Field>
        <Field label="Expectativas para o próximo trimestre" hint="Opcional">
          <textarea value={expectativas} onChange={e => setExpectativas(e.target.value)} rows={2}
            placeholder="Metas, projetos esperados, comportamentos a desenvolver…"
            style={{ width:'100%', border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:0, resize:'vertical', boxSizing:'border-box' }} />
        </Field>

        {err && <Banner tone="danger">{err}</Banner>}
      </div>
    </Modal>
  );
};

// ── Modal de configuração das competências (só RH) ───────────────────────────
const ModalConfigCompetencias = ({ onClose }) => {
  const [perguntas, setPerguntas] = useState(() => getPreparoPerguntas());
  const [err, setErr] = useState('');
  function addComp() { setPerguntas(p => [...p, { id: 'c_' + Date.now(), label: '' }]); }
  function updComp(id, label) { setPerguntas(p => p.map(x => x.id === id ? { ...x, label } : x)); }
  function rmComp(id) { setPerguntas(p => p.filter(x => x.id !== id)); }
  function salvar() {
    const filtrado = perguntas.filter(p => p.label.trim());
    if (filtrado.length === 0) { setErr('Adicione ao menos uma competência.'); return; }
    salvarPreparoPerguntas(filtrado);
    onClose();
  }
  function restaurarPadrao() {
    if (!window.confirm('Restaurar as 7 competências padrão? Suas alterações serão perdidas.')) return;
    resetPreparoPerguntas();
    setPerguntas(PREPARO_PERGUNTAS_DEFAULT);
  }
  return (
    <Modal open={true} onClose={onClose} title="Competências do preparo de feedback"
      footer={<>
        <Button variant="outline" onClick={onClose}>Cancelar</Button>
        <Button variant="primary" icon="check" onClick={salvar}>Salvar competências</Button>
      </>}>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <div style={{ fontSize:13, color:'var(--escalab-mute)', background:'var(--escalab-paper)', borderLeft:'3px solid var(--escalab-brand)', borderRadius:6, padding:'10px 14px', lineHeight:1.55 }}>
          Essas são as competências que <strong>todo gestor</strong> precisa avaliar (nota 1-5) antes de registrar um feedback com o liderado. Você define o conteúdo aqui; o gestor apenas preenche as notas. Vale para todos os preparos daqui em diante.
        </div>
        {err && <Banner tone="danger">{err}</Banner>}
        <div style={{ display:'flex', flexDirection:'column', gap:7 }}>
          {perguntas.map((p, i) => (
            <div key={p.id} style={{ display:'flex', gap:8, alignItems:'center' }}>
              <span style={{ width:24, textAlign:'center', fontSize:12, fontWeight:700, color:'var(--escalab-mute)' }}>{i+1}.</span>
              <textarea value={p.label} onChange={e => updComp(p.id, e.target.value)} placeholder="Nome da competência" rows={1}
                style={{ flex:1, border:'1px solid var(--escalab-line)', borderRadius:8, padding:'8px 12px', fontSize:13, fontFamily:'var(--font-sans)', outline:'none', resize:'vertical', minHeight:36 }} />
              <button onClick={() => rmComp(p.id)} title="Remover"
                style={{ border:0, background:'transparent', cursor:'pointer', color:'#B3261E', padding:6 }}>
                <Icon name="close" size={13} />
              </button>
            </div>
          ))}
        </div>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
          <button onClick={addComp}
            style={{ border:'1px dashed var(--escalab-brand-soft)', background:'transparent', borderRadius:8, padding:'8px 14px', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)', color:'var(--escalab-brand-deep)', fontWeight:600 }}>
            + Adicionar competência
          </button>
          <button onClick={restaurarPadrao}
            style={{ border:'1px solid var(--escalab-line)', background:'#fff', borderRadius:8, padding:'8px 14px', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)', color:'var(--escalab-slate)' }}>
            Restaurar padrão (7 competências)
          </button>
        </div>
      </div>
    </Modal>
  );
};

// ── Ciclos de feedback (estruturados) ─────────────────────────────────────────
const CICLOS_FB_KEY = 'escalab_ciclos_feedback';
function getCiclosFeedback() { try { return JSON.parse(localStorage.getItem(CICLOS_FB_KEY) || '[]'); } catch { return []; } }
function salvarCiclosFeedback(l) { try { localStorage.setItem(CICLOS_FB_KEY, JSON.stringify(l)); } catch {} }
function addCicloFeedback(c) { const l = getCiclosFeedback(); l.unshift(c); salvarCiclosFeedback(l); }
function updateCicloFeedback(id, up) { salvarCiclosFeedback(getCiclosFeedback().map(c => c.id === id ? { ...c, ...up } : c)); }

const ABAS_FEEDBACK = [
  { id:'estruturados',   label:'Ciclos estruturados', icon:'clipboard' },
  { id:'livres',         label:'Feedbacks livres',    icon:'message' },
  { id:'one_a_one',      label:'One-a-one (GC)',      icon:'user' },
  { id:'acompanhamento', label:'Acompanhamento GC',   icon:'eye' },
];

const ScreenFeedbacks = ({ user }) => {
  const [aba, setAba] = useState('livres');
  const [trimestreFiltro, setTrimestreFiltro] = useState('');
  const [setorFiltro, setSetorFiltro] = useState('');
  const [novoOpen, setNovoOpen] = useState(false);
  const [preparoOpen, setPreparoOpen] = useState(false);
  const [configCompOpen, setConfigCompOpen] = useState(false);
  // Fluxo direto "Preparar feedback": pergunta colab+período e abre o ModalPreparoFeedback
  const [preparoDiretoOpen, setPreparoDiretoOpen] = useState(false);
  const [preparoDiretoColab, setPreparoDiretoColab] = useState('');
  const [preparoDiretoTrim, setPreparoDiretoTrim] = useState('');
  const [novoColab, setNovoColab] = useState('');
  const [periodicidade, setPeriodicidade] = useState(() => {
    try { return localStorage.getItem('escalab_feedback_periodicidade') || 'trimestre'; } catch { return 'trimestre'; }
  });
  const [novoTrim, setNovoTrim] = useState(() => {
    const d = new Date();
    const periodTipo = (() => { try { return localStorage.getItem('escalab_feedback_periodicidade') || 'trimestre'; } catch { return 'trimestre'; } })();
    if (periodTipo === 'mes') {
      const mesesAbrev = ['jan','fev','mar','abr','mai','jun','jul','ago','set','out','nov','dez'];
      return `${mesesAbrev[d.getMonth()]}/${d.getFullYear()}`;
    }
    const trim = Math.floor(d.getMonth() / 3) + 1;
    return `${trim}T${d.getFullYear()}`;
  });
  function setPeriodicidadeSalvar(tipo) {
    setPeriodicidade(tipo);
    try { localStorage.setItem('escalab_feedback_periodicidade', tipo); } catch {}
    const d = new Date();
    if (tipo === 'mes') {
      const mesesAbrev = ['jan','fev','mar','abr','mai','jun','jul','ago','set','out','nov','dez'];
      setNovoTrim(`${mesesAbrev[d.getMonth()]}/${d.getFullYear()}`);
    } else {
      const trim = Math.floor(d.getMonth() / 3) + 1;
      setNovoTrim(`${trim}T${d.getFullYear()}`);
    }
  }
  const opcoesPeriodo = useMemo(() => {
    if (periodicidade === 'mes') {
      const mesesAbrev = ['jan','fev','mar','abr','mai','jun','jul','ago','set','out','nov','dez'];
      const arr = [];
      const hoje = new Date();
      for (let i = 0; i < 24; i++) {
        const d = new Date(hoje.getFullYear(), hoje.getMonth() - i, 1);
        arr.push(`${mesesAbrev[d.getMonth()]}/${d.getFullYear()}`);
      }
      return arr;
    }
    const anos = [2026, 2025, 2024];
    return anos.flatMap(a => [`4T${a}`,`3T${a}`,`2T${a}`,`1T${a}`]);
  }, [periodicidade]);
  const [novoResp, setNovoResp] = useState(user.nome);
  const [novoComentario, setNovoComentario] = useState('');
  const [feedbacksLocal, setFeedbacksLocal] = useState([]);
  const [sucesso, setSucesso] = useState('');
  const [novoCicloOpen, setNovoCicloOpen] = useState(false);
  const [ciclosFB, setCiclosFB] = useState(() => getCiclosFeedback());
  function recarregarCiclos() { setCiclosFB(getCiclosFeedback()); }

  const todosFeeds = [...FEEDBACKS, ...feedbacksLocal];

  const trimestres = [...new Set(todosFeeds.map(f => f.trimestre))].sort().reverse();

  const colabsVisiveis = getColaboradoresVisiveis(user);

  const lista = useMemo(() => {
    return colabsVisiveis.map(c => {
      const feeds = todosFeeds.filter(f => f.colaboradorId === c.id);
      const trims = trimestreFiltro ? feeds.filter(f => f.trimestre === trimestreFiltro) : feeds;
      if (setorFiltro && c.setor !== setorFiltro) return null;
      return { ...c, feeds, trims };
    }).filter(Boolean);
  }, [trimestreFiltro, setorFiltro, feedbacksLocal]);

  const coberturaAtual = useMemo(() => {
    const trim = trimestreFiltro || '1T2025';
    const total = COLABORADORES.length;
    const rec = COLABORADORES.filter(c => todosFeeds.some(f => f.colaboradorId === c.id && f.trimestre === trim)).length;
    return { total, rec, pct: Math.round((rec / total) * 100) };
  }, [trimestreFiltro, feedbacksLocal]);

  function salvarFeedback() {
    if (!novoColab) return;
    const colab = COLABORADORES.find(c => c.id === parseInt(novoColab));
    if (!colab) return;
    // Condicionante: precisa de preparo salvo para esse (líder, liderado, trimestre)
    const preparo = getPreparoUm(novoTrim, user.id, colab.id);
    if (!preparo) {
      setPreparoOpen(true);
      return;
    }
    const novo = {
      id: 'F_' + Date.now(), colaboradorId: colab.id, data: new Date().toISOString().slice(0, 10),
      responsavel: novoResp, trimestre: novoTrim, arquivo: null, preparoOk: true,
      comentarios: novoComentario ? [novoComentario] : [],
    };
    setFeedbacksLocal(prev => [...prev, novo]);
    setSucesso(`Feedback de ${colab.nome} registrado (com preparo)!`);
    setNovoOpen(false);
    setNovoComentario('');
    setNovoColab('');
  }

  const colabSelecionado = COLABORADORES.find(c => c.id === parseInt(novoColab));
  const preparoAtual = colabSelecionado ? getPreparoUm(novoTrim, user.id, colabSelecionado.id) : null;

  return (
    <div style={{ animation: 'fadeIn .22s var(--ease-out)' }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 4 }}>GC</div>
          <h2 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>Feedbacks</h2>
          <p style={{ margin: '4px 0 0', fontSize: 13.5, color: 'var(--escalab-slate)', maxWidth: '100%' }}>Controle trimestral de feedbacks por colaborador</p>
        </div>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
          {user?.perfil === 'admin' && (
            <Button variant="outline" icon="edit" onClick={() => setConfigCompOpen(true)}>Editar formulário de preparo</Button>
          )}
          {aba === 'estruturados' && <Button variant="outline" icon="plus" onClick={() => setNovoCicloOpen(true)}>Novo ciclo</Button>}
          {(user?.perfil === 'gestor' || user?.perfil === 'admin') && (
            <Button variant="primary" icon="clipboard" onClick={() => {
              setPreparoDiretoColab('');
              setPreparoDiretoTrim(novoTrim);
              setPreparoDiretoOpen(true);
            }}>Preparar feedback</Button>
          )}
          <Button variant={(user?.perfil === 'gestor' || user?.perfil === 'admin') ? 'outline' : 'primary'} icon="plus" onClick={() => setNovoOpen(true)}>Registrar feedback</Button>
        </div>
      </div>

      {/* Abas */}
      <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--escalab-line)', marginBottom: 18, overflowX: 'auto' }} className="tabs-scroll">
        {ABAS_FEEDBACK.map(t => {
          const ativa = aba === t.id;
          return (
            <button key={t.id} onClick={() => setAba(t.id)} style={{
              border: 0, background: 'transparent', cursor: 'pointer', padding: '9px 16px',
              fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: ativa ? 700 : 500,
              color: ativa ? 'var(--escalab-brand)' : 'var(--escalab-mute)',
              borderBottom: `2px solid ${ativa ? 'var(--escalab-brand)' : 'transparent'}`,
              whiteSpace: 'nowrap', marginBottom: -1, display: 'flex', alignItems: 'center', gap: 6, transition: 'all .15s',
            }}>
              <Icon name={t.icon} size={13} /> {t.label}
            </button>
          );
        })}
      </div>

      {sucesso && <div style={{ marginBottom: 16 }}><Banner tone="success" onClose={() => setSucesso('')}>{sucesso}</Banner></div>}

      {/* Dashboard mensal · sempre visível */}
      <DashboardFeedbacks feedbacks={todosFeeds} />

      {/* Ciclos estruturados */}
      {aba === 'estruturados' && (
        <PainelCiclosFeedback ciclos={ciclosFB} user={user} onRefresh={recarregarCiclos} />
      )}

      {/* One-a-one GC */}
      {aba === 'one_a_one' && (
        <Card pad={22}>
          <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 6 }}>One-a-one realizados pelo GC</div>
          <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginBottom: 12 }}>Registros das conversas individuais entre GC e colaboradores.</div>
          <ListaFeedbacksTipo feedbacks={todosFeeds.filter(f => f.tipo === 'one_a_one')} vazioMsg="Nenhum one-a-one registrado ainda. Use 'Registrar feedback' marcando tipo One-a-one." />
        </Card>
      )}

      {/* Acompanhamento GC */}
      {aba === 'acompanhamento' && (
        <Card pad={22}>
          <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 6 }}>Acompanhamento de time</div>
          <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginBottom: 12 }}>Reuniões de acompanhamento do GC com cada gestor sobre seu time.</div>
          <ListaFeedbacksTipo feedbacks={todosFeeds.filter(f => f.tipo === 'acompanhamento')} vazioMsg="Nenhum acompanhamento registrado." />
        </Card>
      )}

      {/* Livres (visão atual) · mantém comportamento existente */}
      {aba === 'livres' && (<>
      {/* KPIs de cobertura */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12, marginBottom: 22 }}>
        <KpiCard label="Cobertura atual" value={`${coberturaAtual.pct}%`} sublabel={`${coberturaAtual.rec} de ${coberturaAtual.total} colaboradores`} dark icon="users" />
        <KpiCard label="Sem feedback" value={coberturaAtual.total - coberturaAtual.rec} sublabel="pendentes no trimestre" icon="warn" />
        <KpiCard label="Total registrado" value={todosFeeds.length} sublabel="feedbacks no histórico" icon="file" />
      </div>

      {/* Filtros */}
      <div style={{ display: 'flex', gap: 10, marginBottom: 18, flexWrap: 'wrap' }}>
        <SelectInput value={trimestreFiltro} onChange={setTrimestreFiltro} placeholder="Todos os trimestres"
          options={trimestres.map(t => ({ value: t, label: t }))} />
        <SelectInput value={setorFiltro} onChange={setSetorFiltro} placeholder="Todos os setores"
          options={SETORES.map(s => ({ value: s, label: s }))} />
        {(trimestreFiltro || setorFiltro) && (
          <Button variant="ghost" size="sm" icon="close" onClick={() => { setTrimestreFiltro(''); setSetorFiltro(''); }}>Limpar</Button>
        )}
      </div>

      {/* Tabela */}
      <Card pad={0}>
        <table>
          <thead>
            <tr>
              <th>Colaborador</th>
              <th>Setor</th>
              <th>Feedbacks</th>
              <th>Último trimestre</th>
              <th>Responsável</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {lista.map(c => {
              const feedAtual = c.feeds.filter(f => f.trimestre === (trimestreFiltro || '1T2025'));
              const temFeed = feedAtual.length > 0;
              const ultimo = c.feeds.sort((a, b) => b.data.localeCompare(a.data))[0];
              return (
                <tr key={c.id}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <Avatar nome={c.nome} cor={c.cor} iniciais={c.iniciais} size={32} />
                      <div>
                        <div style={{ fontWeight: 500, fontSize: 13 }}>{c.nome}</div>
                        <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{c.cargo}</div>
                      </div>
                    </div>
                  </td>
                  <td style={{ fontSize: 13, color: 'var(--escalab-slate)' }}>{c.setor}</td>
                  <td>
                    <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
                      {c.feeds.slice(-3).map(f => (
                        <span key={f.id} title={`${f.trimestre} · ${f.responsavel}`} style={{ background: 'var(--escalab-brand-tint)', color: 'var(--escalab-brand-deep)', borderRadius: 5, padding: '2px 7px', fontSize: 11, fontWeight: 600 }}>{f.trimestre}</span>
                      ))}
                      {c.feeds.length === 0 && <span style={{ color: 'var(--escalab-mute)', fontSize: 12 }}>Nenhum</span>}
                    </div>
                  </td>
                  <td style={{ fontSize: 12.5, color: 'var(--escalab-slate)' }}>{ultimo ? `${ultimo.trimestre} · ${ultimo.data}` : '·'}</td>
                  <td style={{ fontSize: 12.5, color: 'var(--escalab-slate)' }}>{ultimo?.responsavel || '·'}</td>
                  <td>
                    {temFeed
                      ? <Tag tone="success">Recebeu</Tag>
                      : <Tag tone="danger">Pendente</Tag>
                    }
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>

      {/* Coberturas por setor */}
      <div style={{ marginTop: 20 }}>
        <Card pad={22}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 16 }}>Cobertura por setor · {trimestreFiltro || '1T2025'}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 14 }}>
            {FEEDBACKS_SETOR_ATUAL.map(f => {
              const tone = f.pct >= 90 ? 'success' : f.pct >= 60 ? 'warn' : 'danger';
              const color = f.pct >= 90 ? 'var(--escalab-brand)' : f.pct >= 60 ? '#E89B3B' : '#E05050';
              return (
                <div key={f.setor} style={{ background: 'var(--escalab-paper)', borderRadius: 10, padding: '14px 16px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                    <span style={{ fontWeight: 500, fontSize: 13 }}>{f.setor}</span>
                    <Tag tone={tone}>{f.pct}%</Tag>
                  </div>
                  <div style={{ height: 6, background: 'var(--escalab-line)', borderRadius: 999 }}>
                    <div style={{ width: f.pct + '%', height: '100%', background: color, borderRadius: 999, transition: 'width .5s' }} />
                  </div>
                  <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 6 }}>{f.receberam} de {f.total} colaboradores</div>
                </div>
              );
            })}
          </div>
        </Card>
      </div>
      </>)}

      {/* Modal configuração das competências (RH) */}
      {configCompOpen && <ModalConfigCompetencias onClose={() => setConfigCompOpen(false)} />}

      {/* Modal · Preparar feedback (caminho direto: escolhe colab e abre o forms) */}
      <Modal open={preparoDiretoOpen} onClose={() => setPreparoDiretoOpen(false)} title="Preparar feedback"
        footer={<>
          <Button variant="outline" onClick={() => setPreparoDiretoOpen(false)}>Cancelar</Button>
          <Button variant="primary" icon="clipboard"
            disabled={!preparoDiretoColab || !preparoDiretoTrim}
            onClick={() => {
              // Reutiliza o fluxo do preparo via novoColab/novoTrim
              setNovoColab(preparoDiretoColab);
              setNovoTrim(preparoDiretoTrim);
              setPreparoDiretoOpen(false);
              setPreparoOpen(true);
            }}>Abrir formulário</Button>
        </>}>
        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
          <div style={{ fontSize:13, color:'var(--escalab-mute)', background:'var(--escalab-paper)', borderLeft:'3px solid var(--escalab-brand)', borderRadius:6, padding:'10px 14px', lineHeight:1.55 }}>
            Use o formulário de preparo como guia antes de conversar com o liderado. Avalie as competências e descreva o que vai destacar e o que pode evoluir.
          </div>
          <Field label="Liderado">
            <SelectInput value={preparoDiretoColab} onChange={setPreparoDiretoColab} placeholder="Escolha o liderado"
              options={colabsVisiveis.filter(c => c.id !== user.id).map(c => ({ value: c.id, label: `${c.nome} · ${c.cargo}` }))} />
          </Field>
          <Field label="Período">
            <SelectInput value={preparoDiretoTrim} onChange={setPreparoDiretoTrim}
              options={opcoesPeriodo.map(t => ({ value: t, label: t }))} />
          </Field>
        </div>
      </Modal>

      {/* Modal novo ciclo de feedback */}
      {novoCicloOpen && <ModalNovoCicloFB user={user} onClose={() => setNovoCicloOpen(false)} onSalvar={recarregarCiclos} />}

      {/* Modal novo feedback */}
      <Modal open={novoOpen} onClose={() => setNovoOpen(false)} title="Registrar Feedback"
        footer={<>
          <Button variant="outline" onClick={() => setNovoOpen(false)}>Cancelar</Button>
          {colabSelecionado && !preparoAtual ? (
            <Button variant="primary" icon="clipboard" onClick={() => setPreparoOpen(true)} disabled={!novoColab}>Preparar feedback primeiro</Button>
          ) : (
            <Button variant="primary" icon="check" onClick={salvarFeedback} disabled={!novoColab}>Salvar</Button>
          )}
        </>}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <Field label="Colaborador">
            <SelectInput value={novoColab} onChange={setNovoColab} placeholder="Selecionar colaborador"
              options={colabsVisiveis.map(c => ({ value: c.id, label: `${c.nome} · ${c.cargo}` }))} />
          </Field>
          <Field label="Periodicidade" hint="Defina se o ciclo é mensal ou trimestral">
            <div style={{ display:'flex', gap:8 }}>
              <button onClick={() => setPeriodicidadeSalvar('trimestre')}
                style={{ flex:1, border:`2px solid ${periodicidade==='trimestre'?'var(--escalab-brand)':'var(--escalab-line)'}`, background:periodicidade==='trimestre'?'var(--escalab-brand-tint)':'#fff', color:periodicidade==='trimestre'?'var(--escalab-brand-deep)':'var(--escalab-slate)', borderRadius:8, padding:'9px 14px', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)', fontWeight:periodicidade==='trimestre'?700:500 }}>
                Trimestral
              </button>
              <button onClick={() => setPeriodicidadeSalvar('mes')}
                style={{ flex:1, border:`2px solid ${periodicidade==='mes'?'var(--escalab-brand)':'var(--escalab-line)'}`, background:periodicidade==='mes'?'var(--escalab-brand-tint)':'#fff', color:periodicidade==='mes'?'var(--escalab-brand-deep)':'var(--escalab-slate)', borderRadius:8, padding:'9px 14px', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)', fontWeight:periodicidade==='mes'?700:500 }}>
                Mensal
              </button>
            </div>
          </Field>
          <Field label={periodicidade === 'mes' ? 'Mês de referência' : 'Trimestre'}>
            <SelectInput value={novoTrim} onChange={setNovoTrim}
              options={opcoesPeriodo.map(t => ({ value: t, label: t }))} />
          </Field>

          {colabSelecionado && (
            preparoAtual ? (
              <div style={{ background: 'var(--escalab-brand-tint)', border: '1px solid var(--escalab-brand-soft)', borderRadius: 10, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
                <Icon name="check" size={16} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--escalab-brand-deep)' }}>Preparo concluído</div>
                  <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>Preenchido em {new Date(preparoAtual.preenchidoEm).toLocaleDateString('pt-BR')}</div>
                </div>
                <button onClick={() => setPreparoOpen(true)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-brand-deep)', fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-sans)', textDecoration: 'underline' }}>
                  Revisar
                </button>
              </div>
            ) : (
              <div style={{ background: '#FFF7EB', border: '1px solid #F2D9A0', borderRadius: 10, padding: '12px 14px', display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <Icon name="warn" size={16} />
                <div style={{ fontSize: 12.5, color: '#7A4A00', lineHeight: 1.5 }}>
                  <strong>Preparo pendente.</strong> Para garantir qualidade, é obrigatório preparar o feedback (notas + destaque + pontos a evoluir) antes de registrá-lo. Clique em <strong>“Preparar feedback primeiro”</strong> abaixo.
                </div>
              </div>
            )
          )}

          <Field label="Responsável pelo feedback">
            <Input value={novoResp} onChange={setNovoResp} placeholder="Nome do responsável" />
          </Field>
          <Field label="Comentários" hint="Opcional · observações do feedback">
            <textarea value={novoComentario} onChange={e => setNovoComentario(e.target.value)}
              placeholder="Adicione um comentário…"
              style={{ border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '10px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', resize: 'vertical', minHeight: 80, color: 'var(--escalab-ink)', outline: 0 }} />
          </Field>
          <Field label="Arquivo" hint="Funcionalidade de upload · em desenvolvimento">
            <div style={{ border: '1.5px dashed var(--escalab-line)', borderRadius: 8, padding: '18px', textAlign: 'center', color: 'var(--escalab-mute)', fontSize: 13 }}>
              <Icon name="upload" size={20} />
              <div style={{ marginTop: 6 }}>Arraste o arquivo PDF aqui</div>
            </div>
          </Field>
        </div>
      </Modal>

      {/* Modal de preparo (encadeado) */}
      {preparoOpen && colabSelecionado && (
        <ModalPreparoFeedback
          user={user}
          colab={colabSelecionado}
          trimestre={novoTrim}
          preparoExistente={preparoAtual}
          onClose={() => setPreparoOpen(false)}
          onConcluido={() => { setPreparoOpen(false); setSucesso('Preparo salvo! Agora você pode registrar o feedback.'); }}
        />
      )}
    </div>
  );
};

// ── Dashboard mensal + comparação por setor ───────────────────────────────────
const DashboardFeedbacks = ({ feedbacks }) => {
  // #/mês últimos 12 meses
  const agora = new Date();
  const meses = [];
  for (let i = 11; i >= 0; i--) {
    const d = new Date(agora.getFullYear(), agora.getMonth() - i, 1);
    meses.push({ ano: d.getFullYear(), mes: d.getMonth(), label: d.toLocaleDateString('pt-BR', { month: 'short' }) });
  }
  const counts = meses.map(m => ({
    ...m,
    qtd: feedbacks.filter(f => { const d = new Date(f.data); return d.getMonth() === m.mes && d.getFullYear() === m.ano; }).length,
  }));
  const maxQ = Math.max(1, ...counts.map(c => c.qtd));

  // Comparação por setor · % de pessoas que receberam ao menos 1 feedback nos últimos 6 meses
  const seisMesesAtras = new Date(agora.getFullYear(), agora.getMonth() - 6, 1).toISOString().slice(0, 10);
  const setores = [...new Set(COLABORADORES.map(c => c.setor))];
  const setorData = setores.map(setor => {
    const total = COLABORADORES.filter(c => c.setor === setor).length;
    const receberam = COLABORADORES.filter(c => c.setor === setor && feedbacks.some(f => f.colaboradorId === c.id && f.data >= seisMesesAtras)).length;
    return { setor, total, receberam, pct: total > 0 ? Math.round(receberam / total * 100) : 0 };
  }).sort((a, b) => b.pct - a.pct);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14, marginBottom: 20 }} className="mobile-col1">
      <Card pad={18}>
        <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 6 }}>Feedbacks por mês · últimos 12</div>
        <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginBottom: 14 }}>Volume de feedbacks registrados</div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 110, paddingBottom: 22, position: 'relative' }}>
          {counts.map((c, i) => (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, position: 'relative' }}>
              <div title={`${c.qtd} feedback(s)`} style={{
                width: '100%', height: `${(c.qtd / maxQ) * 100}%`, minHeight: 2,
                background: c.qtd === 0 ? 'var(--escalab-line)' : 'linear-gradient(180deg, var(--escalab-brand), var(--escalab-brand-deep))',
                borderRadius: '4px 4px 0 0', transition: 'height .4s',
              }} />
              <div style={{ position: 'absolute', bottom: -20, fontSize: 9.5, color: 'var(--escalab-mute)', textTransform: 'capitalize' }}>{c.label.replace('.', '')}</div>
              {c.qtd > 0 && <div style={{ position: 'absolute', top: -16, fontSize: 10, fontWeight: 700, color: 'var(--escalab-brand-deep)' }}>{c.qtd}</div>}
            </div>
          ))}
        </div>
      </Card>
      <Card pad={18}>
        <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 6 }}>Cobertura por setor · 6 meses</div>
        <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginBottom: 12 }}>% de pessoas que receberam feedback</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 7, maxHeight: 200, overflowY: 'auto' }}>
          {setorData.slice(0, 8).map(s => (
            <div key={s.setor} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11.5, color: 'var(--escalab-ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginBottom: 2 }}>{s.setor}</div>
                <div style={{ height: 5, background: 'var(--escalab-line)', borderRadius: 999 }}>
                  <div style={{ width: s.pct + '%', height: '100%', background: s.pct >= 80 ? '#00836B' : s.pct >= 50 ? '#E89B3B' : '#B3261E', borderRadius: 999 }} />
                </div>
              </div>
              <span style={{ fontSize: 11, fontWeight: 700, color: s.pct >= 80 ? '#00836B' : s.pct >= 50 ? '#E89B3B' : '#B3261E', minWidth: 36, textAlign: 'right' }}>{s.pct}%</span>
              <span style={{ fontSize: 10, color: 'var(--escalab-mute)', minWidth: 40, textAlign: 'right' }}>{s.receberam}/{s.total}</span>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
};

// ── Lista simples de feedbacks por tipo ──────────────────────────────────────
const ListaFeedbacksTipo = ({ feedbacks, vazioMsg }) => {
  if (feedbacks.length === 0) {
    return <div style={{ textAlign: 'center', padding: '24px 16px', color: 'var(--escalab-mute)', fontSize: 13 }}>{vazioMsg}</div>;
  }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {feedbacks.map(f => {
        const c = COLABORADORES.find(x => x.id === f.colaboradorId);
        return (
          <div key={f.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', border: '1px solid var(--escalab-line)', borderRadius: 9 }}>
            {c && <Avatar nome={c.nome} cor={c.cor} iniciais={c.iniciais} size={28} />}
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600 }}>{c?.nome || 'Colaborador'}</div>
              <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{f.responsavel} · {f.data}</div>
            </div>
            {f.arquivo && <Tag tone="brand" size="xs">📎</Tag>}
          </div>
        );
      })}
    </div>
  );
};

// ── Painel de ciclos estruturados ─────────────────────────────────────────────
const PainelCiclosFeedback = ({ ciclos, user, onRefresh }) => {
  if (ciclos.length === 0) {
    return (
      <Card pad={28}>
        <div style={{ textAlign: 'center', padding: '20px' }}>
          <div style={{ fontSize: 32, marginBottom: 8 }}>📋</div>
          <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 6 }}>Nenhum ciclo de feedback criado ainda</div>
          <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', maxWidth: 420, margin: '0 auto' }}>
            Crie um ciclo estruturado: defina a data, anexe as perguntas e direcione quem dará feedback a quem.
            O ciclo é concluído quando todos os arquivos forem enviados.
          </div>
        </div>
      </Card>
    );
  }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {ciclos.map(c => {
        const totalDirec = (c.direcionamentos || []).length;
        const entregues = (c.entregues || []).length;
        const pct = totalDirec > 0 ? Math.round(entregues / totalDirec * 100) : 0;
        return (
          <Card key={c.id} pad={18}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', flexWrap: 'wrap' }}>
              <div style={{ flex: 1, minWidth: 220 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{c.titulo}</div>
                  <Tag tone={c.status === 'concluido' ? 'success' : c.status === 'ativo' ? 'brand' : 'neutral'} size="xs">
                    {c.status === 'concluido' ? 'Concluído' : c.status === 'ativo' ? 'Em andamento' : 'Pendente'}
                  </Tag>
                </div>
                <div style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>
                  📅 {c.data?.split('-').reverse().join('/')} · 👥 {totalDirec} direcionamentos
                  {c.arquivoNome && <> · 📎 {c.arquivoNome}</>}
                </div>
              </div>
              <div style={{ minWidth: 160 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, marginBottom: 4 }}>
                  <span style={{ color: 'var(--escalab-mute)' }}>Entregues</span>
                  <strong style={{ color: 'var(--escalab-brand-deep)' }}>{pct}%</strong>
                </div>
                <div style={{ height: 6, background: 'var(--escalab-line)', borderRadius: 999 }}>
                  <div style={{ width: pct + '%', height: '100%', background: 'var(--escalab-brand)', borderRadius: 999 }} />
                </div>
                <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginTop: 4 }}>{entregues} de {totalDirec}</div>
              </div>
            </div>
          </Card>
        );
      })}
    </div>
  );
};

// ── Modal criar novo ciclo de feedback ────────────────────────────────────────
const ModalNovoCicloFB = ({ user, onClose, onSalvar }) => {
  const [titulo, setTitulo] = useState('');
  const [data, setData] = useState(new Date().toISOString().slice(0, 10));
  const [arquivo, setArquivo] = useState(null);
  const [direcionamentos, setDirecionamentos] = useState([]); // [{ avaliador, avaliado }]
  const [erro, setErro] = useState('');

  function handleArquivo(e) {
    const f = e.target.files?.[0]; if (!f) return;
    if (f.size > 3 * 1024 * 1024) { setErro('Arquivo até 3MB.'); return; }
    const r = new FileReader();
    r.onload = ev => { setArquivo({ nome: f.name, data: ev.target.result }); setErro(''); };
    r.readAsDataURL(f);
  }

  function addDirecionamento() {
    setDirecionamentos(d => [...d, { id: Date.now(), avaliadorId: '', avaliadoId: '' }]);
  }
  function rmDirecionamento(id) {
    setDirecionamentos(d => d.filter(x => x.id !== id));
  }
  function setDirec(id, key, val) {
    setDirecionamentos(d => d.map(x => x.id === id ? { ...x, [key]: val } : x));
  }

  function salvar() {
    setErro('');
    if (!titulo.trim()) { setErro('Dê um nome ao ciclo.'); return; }
    if (!data) { setErro('Defina a data.'); return; }
    if (direcionamentos.length === 0) { setErro('Adicione ao menos 1 direcionamento (quem avalia quem).'); return; }
    if (direcionamentos.some(d => !d.avaliadorId || !d.avaliadoId)) { setErro('Preencha todos os direcionamentos.'); return; }
    addCicloFeedback({
      id: 'CF' + Date.now(),
      titulo: titulo.trim(),
      data,
      criadoPor: user.nome,
      criadoEm: new Date().toISOString(),
      arquivoNome: arquivo?.nome || null,
      arquivoData: arquivo?.data || null,
      direcionamentos: direcionamentos.map(d => ({ avaliadorId: Number(d.avaliadorId), avaliadoId: Number(d.avaliadoId) })),
      entregues: [],
      status: 'ativo',
    });
    onSalvar?.();
    onClose();
  }

  return (
    <div onClick={onClose} className="modal-overlay" style={{ position:'fixed', inset:0, background:'rgba(10,15,18,.55)', backdropFilter:'blur(4px)', zIndex:1000, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
      <div onClick={e => e.stopPropagation()} style={{ background:'#fff', borderRadius:14, width:'100%', maxWidth:640, maxHeight:'92vh', overflow:'auto', padding:'18px 22px', animation:'popIn .22s var(--ease-out)' }}>
        <div style={{ fontSize:16, fontWeight:700, marginBottom:14 }}>Novo ciclo de feedback</div>
        {erro && <div style={{ marginBottom:10 }}><Banner tone="danger">{erro}</Banner></div>}
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap:12, marginBottom:12 }} className="mobile-col1">
          <input value={titulo} onChange={e => setTitulo(e.target.value)} placeholder="Nome do ciclo (ex: Feedback 1T 2026)"
            style={{ border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:'none' }} />
          <input type="date" value={data} onChange={e => setData(e.target.value)}
            style={{ border:'1px solid var(--escalab-line)', borderRadius:8, padding:'9px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:'none' }} />
        </div>
        <label style={{ display:'flex', alignItems:'center', gap:8, padding:'10px 12px', border:'1px dashed var(--escalab-line)', borderRadius:8, cursor:'pointer', background:arquivo ? 'var(--escalab-brand-tint)' : '#fff', marginBottom:14 }}>
          <Icon name="upload" size={13} />
          <span style={{ fontSize:13, color:arquivo ? 'var(--escalab-brand-deep)' : 'var(--escalab-slate)', fontWeight: arquivo ? 600 : 400, flex:1 }}>
            {arquivo ? arquivo.nome : 'Anexar perguntas do ciclo (PDF/imagem)'}
          </span>
          <input type="file" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" onChange={handleArquivo} style={{ display:'none' }} />
        </label>
        <div style={{ fontSize:12, fontWeight:700, color:'var(--escalab-slate)', textTransform:'uppercase', letterSpacing:'.08em', marginBottom:8 }}>Direcionamentos (quem avalia quem)</div>
        <div style={{ display:'flex', flexDirection:'column', gap:7, marginBottom:8, maxHeight:240, overflowY:'auto' }}>
          {direcionamentos.map(d => (
            <div key={d.id} style={{ display:'grid', gridTemplateColumns:'1fr 24px 1fr 28px', gap:8, alignItems:'center' }}>
              <select value={d.avaliadorId} onChange={e => setDirec(d.id, 'avaliadorId', e.target.value)} style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'7px 9px', fontSize:12.5, fontFamily:'var(--font-sans)' }}>
                <option value="">Avaliador…</option>
                {COLABORADORES.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
              </select>
              <div style={{ textAlign:'center', color:'var(--escalab-mute)' }}>→</div>
              <select value={d.avaliadoId} onChange={e => setDirec(d.id, 'avaliadoId', e.target.value)} style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'7px 9px', fontSize:12.5, fontFamily:'var(--font-sans)' }}>
                <option value="">Avaliado…</option>
                {COLABORADORES.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
              </select>
              <button onClick={() => rmDirecionamento(d.id)} style={{ border:0, background:'transparent', cursor:'pointer', color:'#B3261E' }}>
                <Icon name="close" size={13} />
              </button>
            </div>
          ))}
        </div>
        <button onClick={addDirecionamento} style={{ width:'100%', border:'1px dashed var(--escalab-brand-soft)', background:'transparent', borderRadius:8, padding:'8px 12px', cursor:'pointer', fontSize:13, color:'var(--escalab-brand-deep)', fontFamily:'var(--font-sans)', fontWeight:600 }}>
          + Adicionar direcionamento
        </button>
        <div style={{ display:'flex', gap:8, justifyContent:'flex-end', marginTop:14 }}>
          <Button variant="outline" onClick={onClose}>Cancelar</Button>
          <Button variant="primary" onClick={salvar}>Criar ciclo</Button>
        </div>
      </div>
    </div>
  );
};

window.ScreenFeedbacks = ScreenFeedbacks;