// ═══════════════════════════════════════════════════════════════
// SCREEN · PDI (Plano de Desenvolvimento Individual)
// Spec original em SPEC_PDI.md · entregue por G&C em 16/06/2026
// ═══════════════════════════════════════════════════════════════

// ── Storage ──────────────────────────────────────────────────────────────────
const PDI_KEY      = 'escalab_pdi_v1';
const PDI_HIST_KEY = 'escalab_pdi_historico_v1';

function getPDIs() {
  try {
    const arr = JSON.parse(localStorage.getItem(PDI_KEY) || '[]');
    return arr.map(normalizarPDI);
  } catch { return []; }
}
function salvarPDIs(arr) {
  try { localStorage.setItem(PDI_KEY, JSON.stringify(arr)); } catch {}
}
function getHistoricoAll() {
  try { return JSON.parse(localStorage.getItem(PDI_HIST_KEY) || '[]'); } catch { return []; }
}
function salvarHistorico(arr) {
  try { localStorage.setItem(PDI_HIST_KEY, JSON.stringify(arr)); } catch {}
}
function registrarHistorico(pdiId, autorId, autorNome, acao, detalhes) {
  const arr = getHistoricoAll();
  arr.push({
    id: Date.now() + '_' + Math.random().toString(36).slice(2, 7),
    pdiId, autorId, autorNome, acao, detalhes,
    data: new Date().toISOString(),
  });
  salvarHistorico(arr);
}
function getHistoricoPDI(pdiId) {
  return getHistoricoAll().filter(h => h.pdiId === pdiId).sort((a,b) => b.data.localeCompare(a.data));
}

// ── PDI helpers ──────────────────────────────────────────────────────────────
function novoPDI(colaboradorId) {
  return {
    id: 'pdi_' + colaboradorId + '_' + Date.now(),
    colaboradorId,
    status: 'ativo',
    pontosFortes: '',
    pontosDev: '',
    sonhoPessoal: '',         // visível ao colaborador
    sonhoProfissional: '',    // visível ao colaborador
    cargoAtual: '',           // texto fixo ex.: "Analista I · Step II"
    cargoAtualDesde: '',      // YYYY-MM-DD
    historicoCargos: [],      // [{ id, cargo, desde, ate }]
    cargoAlvo: '',
    horizonte: '12 meses',
    liberadoColaborador: false, // RH libera para o colaborador ver Projeção/Cargo-alvo
    liberadoEm: null,
    acoesDestaque: [],
    competencias: [],
    acoes: [],                // ações criadas pelo RH/gestor (RH controla; colab marca status)
    acoesColab: [],           // ações adicionadas pelo próprio colaborador
    projecaoCarreira: [],     // [{ id, cargo, dataAlvo, realizadoEm?, dataReal? }]
    projecaoSalarial: [],
    criadoEm: new Date().toISOString(),
    atualizadoEm: new Date().toISOString(),
    ultimaRevisao: null,
  };
}

// Normaliza PDIs antigos (LocalStorage v1) para o shape novo
function normalizarPDI(p) {
  if (!p) return p;
  return {
    sonhoPessoal: '',
    sonhoProfissional: '',
    cargoAtual: '',
    cargoAtualDesde: '',
    historicoCargos: [],
    liberadoColaborador: false,
    liberadoEm: null,
    acoesColab: [],
    ...p,
  };
}

function statusVisual(pdi) {
  if (!pdi) return { label: 'Sem PDI', cor: '#3F4856', bg: '#F3F4F6' };
  const meses = pdi.ultimaRevisao
    ? Math.floor((Date.now() - new Date(pdi.ultimaRevisao).getTime()) / (1000*60*60*24*30))
    : null;
  if (meses != null && meses > 6) return { label: 'Vencido', cor: '#7C3D04', bg: '#FEF3C7', mesesSemRev: meses };
  if (pdi.status === 'em_revisao')   return { label: 'Em revisão',   cor: '#7C3D04', bg: '#FEF3C7' };
  if (pdi.status === 'em_construcao')return { label: 'Em construção',cor: '#3F4856', bg: '#F3F4F6' };
  return { label: 'Ativo', cor: '#005E4D', bg: '#E6F5F1' };
}

// ── Componente: Cadeado Confidencial ─────────────────────────────────────────
const CadeadoConfidencial = ({ size = 12, inline = true }) => {
  const [hov, setHov] = useState(false);
  return (
    <span
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        display: inline ? 'inline-flex' : 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: size + 8, height: size + 8,
        borderRadius: 5,
        background: '#FEF3C7',
        color: '#92400E',
        marginLeft: 5,
        position: 'relative',
        cursor: 'help',
        verticalAlign: 'middle',
      }}>
      <Icon name="lock" size={size} />
      {hov && (
        <div style={{
          position: 'absolute', bottom: '120%', left: '50%', transform: 'translateX(-50%)',
          background: '#1F2937', color: '#fff', fontSize: 11, fontWeight: 600,
          padding: '5px 9px', borderRadius: 6, whiteSpace: 'nowrap',
          boxShadow: '0 4px 14px rgba(0,0,0,.18)', zIndex: 10,
        }}>
          Visível apenas para RH e gestor
        </div>
      )}
    </span>
  );
};

// ── Componente: Faixa de Aviso (vencido / confidencial) ──────────────────────
const FaixaAviso = ({ tone = 'warn', children, action }) => {
  const cfg = {
    warn:   { bg: '#FEF3C7', border: '#F59E0B', fg: '#92400E', icon: 'warn' },
    danger: { bg: '#FEE2E2', border: '#DC2626', fg: '#991B1B', icon: 'warn' },
    info:   { bg: '#DBEAFE', border: '#3B82F6', fg: '#1E40AF', icon: 'info' },
  }[tone];
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      background: cfg.bg, border: `1px solid ${cfg.border}`,
      borderRadius: 10, padding: '11px 14px', fontSize: 13, color: cfg.fg,
      marginBottom: 14,
    }}>
      <Icon name={cfg.icon} size={16} />
      <div style={{ flex: 1, lineHeight: 1.5 }}>{children}</div>
      {action}
    </div>
  );
};

// ── Componente: Badge de status ──────────────────────────────────────────────
const StatusBadge = ({ pdi, size = 'md' }) => {
  const s = statusVisual(pdi);
  const fontSize = size === 'sm' ? 10.5 : 11.5;
  const padding  = size === 'sm' ? '2px 8px' : '3px 10px';
  return (
    <span style={{
      display: 'inline-block', fontSize, fontWeight: 700,
      padding, borderRadius: 999,
      background: s.bg, color: s.cor, letterSpacing: '.02em',
    }}>{s.label}</span>
  );
};

// ── Componente: Empty State ──────────────────────────────────────────────────
const EmptyState = ({ icon = 'star', titulo, descricao, acao }) => (
  <div style={{
    padding: '32px 20px', textAlign: 'center',
    background: 'var(--escalab-paper)', border: '1px dashed var(--escalab-line)',
    borderRadius: 12,
  }}>
    <div style={{
      width: 48, height: 48, margin: '0 auto 12px', borderRadius: 12,
      background: 'var(--escalab-brand-tint)', color: 'var(--escalab-brand-deep)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <Icon name={icon} size={20} />
    </div>
    <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--escalab-ink)' }}>{titulo}</div>
    {descricao && <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginTop: 4, lineHeight: 1.5, maxWidth: 360, margin: '4px auto 0' }}>{descricao}</div>}
    {acao && <div style={{ marginTop: 14 }}>{acao}</div>}
  </div>
);

// ═══════════════════════════════════════════════════════════════
// PAINEL · Tela 1 — Lista de PDIs com indicadores
// ═══════════════════════════════════════════════════════════════
const PainelPDIs = ({ user, colaboradoresVisiveis, pdis: pdisProp, onAbrirPDI, onCriarPDI }) => {
  const [filtro, setFiltro] = useState('todos'); // todos | ativos | vencidos | revisao | sem_pdi
  const [busca, setBusca] = useState('');
  const [setor, setSetor] = useState('todos');

  const pdis = pdisProp || getPDIs();
  const setores = useMemo(() => [...new Set(colaboradoresVisiveis.map(c => c.setor).filter(Boolean))].sort(), [colaboradoresVisiveis]);

  // Cruzamento: cada colab + PDI dele (se existir)
  const linhas = useMemo(() => {
    return colaboradoresVisiveis.map(c => {
      const pdi = pdis.find(p => p.colaboradorId === c.id);
      const s = statusVisual(pdi);
      return { colab: c, pdi, status: s };
    });
  }, [colaboradoresVisiveis, pdis.length]);

  const stats = useMemo(() => {
    let ativos = 0, vencidos = 0, revisao = 0, semPDI = 0;
    linhas.forEach(l => {
      if (!l.pdi) semPDI++;
      else if (l.status.label === 'Vencido') vencidos++;
      else if (l.status.label === 'Em revisão') revisao++;
      else if (l.status.label === 'Ativo') ativos++;
    });
    return { ativos, vencidos, revisao, semPDI, total: linhas.length };
  }, [linhas]);

  // ── Estatísticas dos marcos (projeção vs realidade) ─────────────────────────
  const marcosStats = useMemo(() => {
    let concluidosNoPrazo = 0, concluidosFora = 0, pendentesNoPrazo = 0, pendentesAtrasados = 0;
    const desviosDias = []; // (dataReal - dataAlvo) em dias para os concluídos
    const detalhes = []; // pra futuro: lista de marcos com nome
    linhas.forEach(l => {
      if (!l.pdi) return;
      (l.pdi.projecaoCarreira || []).forEach(m => {
        if (!m.cargo) return;
        if (m.realizadoEm && m.dataReal && m.dataAlvo) {
          const diff = Math.round((new Date(m.dataReal + 'T00:00:00').getTime() - new Date(m.dataAlvo + 'T00:00:00').getTime()) / 86400000);
          desviosDias.push(diff);
          if (diff <= 30) concluidosNoPrazo++; else concluidosFora++;
          detalhes.push({ colab: l.colab.nome, cargo: m.cargo, dataAlvo: m.dataAlvo, dataReal: m.dataReal, desvio: diff, status: diff <= 30 ? 'no_prazo' : 'fora' });
        } else if (m.realizadoEm) {
          concluidosNoPrazo++; // marcado como realizado mas sem data — conta como no prazo
        } else if (m.dataAlvo) {
          const dist = distanciaParaData(m.dataAlvo);
          if (dist?.atrasado) pendentesAtrasados++; else pendentesNoPrazo++;
        } else {
          pendentesNoPrazo++;
        }
      });
    });
    const total = concluidosNoPrazo + concluidosFora + pendentesNoPrazo + pendentesAtrasados;
    const desvioMedio = desviosDias.length ? Math.round(desviosDias.reduce((s, d) => s + d, 0) / desviosDias.length) : null;
    return { concluidosNoPrazo, concluidosFora, pendentesNoPrazo, pendentesAtrasados, total, desvioMedio, detalhes };
  }, [linhas]);

  // ── Estatísticas das ações (planejadas / em andamento / concluídas) ────────
  const acoesStats = useMemo(() => {
    let planejada = 0, em_andamento = 0, concluida = 0, cancelada = 0;
    let proximasAVencer = 0; // ações com prazo nos próximos 7 dias e ainda não concluídas
    const hoje = Date.now();
    const limite = hoje + 7 * 86400000;
    linhas.forEach(l => {
      if (!l.pdi) return;
      [...(l.pdi.acoes || []), ...(l.pdi.acoesColab || [])].forEach(a => {
        const st = a.status || 'planejada';
        if (st === 'planejada')         planejada++;
        else if (st === 'em_andamento') em_andamento++;
        else if (st === 'concluida')    concluida++;
        else if (st === 'cancelada')    cancelada++;
        if (a.prazo && st !== 'concluida' && st !== 'cancelada') {
          const t = new Date(a.prazo + 'T00:00:00').getTime();
          if (isFinite(t) && t >= hoje && t <= limite) proximasAVencer++;
        }
      });
    });
    const total = planejada + em_andamento + concluida + cancelada;
    return { planejada, em_andamento, concluida, cancelada, total, proximasAVencer };
  }, [linhas]);

  const linhasFiltradas = useMemo(() => {
    let arr = linhas;
    if (filtro === 'ativos')   arr = arr.filter(l => l.status.label === 'Ativo');
    if (filtro === 'vencidos') arr = arr.filter(l => l.status.label === 'Vencido');
    if (filtro === 'revisao')  arr = arr.filter(l => l.status.label === 'Em revisão');
    if (filtro === 'sem_pdi')  arr = arr.filter(l => !l.pdi);
    if (setor !== 'todos')     arr = arr.filter(l => l.colab.setor === setor);
    if (busca.trim()) {
      const q = busca.toLowerCase();
      arr = arr.filter(l =>
        l.colab.nome.toLowerCase().includes(q) ||
        (l.colab.cargo || '').toLowerCase().includes(q) ||
        (l.pdi?.cargoAlvo || '').toLowerCase().includes(q));
    }
    return arr;
  }, [linhas, filtro, setor, busca]);

  const IndicadorCard = ({ id, label, valor, cor, bg }) => (
    <button onClick={() => setFiltro(filtro === id ? 'todos' : id)}
      style={{
        border: filtro === id ? `2px solid ${cor}` : '1px solid var(--escalab-line)',
        background: filtro === id ? bg : '#fff',
        borderRadius: 12, padding: '14px 16px', textAlign: 'left',
        cursor: 'pointer', fontFamily: 'var(--font-sans)',
        transition: 'all .15s', flex: 1, minWidth: 130,
      }}>
      <div style={{ fontSize: 28, fontWeight: 800, color: cor, lineHeight: 1 }}>{valor}</div>
      <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--escalab-slate)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '.06em' }}>{label}</div>
    </button>
  );

  return (
    <div style={{ animation: 'fadeIn .22s var(--ease-out)' }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 22, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 4 }}>Gestão de Pessoas</div>
          <h2 style={{ fontSize: 22, fontWeight: 800, margin: 0, letterSpacing: '-.01em' }}>Plano de Desenvolvimento Individual</h2>
          <p style={{ fontSize: 13.5, color: 'var(--escalab-slate)', margin: '4px 0 0' }}>
            {user?.perfil === 'admin' ? 'Acompanhe o desenvolvimento de toda a empresa.' : 'Acompanhe o desenvolvimento do seu time.'}
          </p>
        </div>
      </div>

      {/* Indicadores */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 18, flexWrap: 'wrap' }}>
        <IndicadorCard id="ativos"   label="Ativos"      valor={stats.ativos}   cor="#005E4D" bg="#E6F5F1" />
        <IndicadorCard id="vencidos" label="Vencidos"    valor={stats.vencidos} cor="#B45309" bg="#FEF3C7" />
        <IndicadorCard id="revisao"  label="Em revisão"  valor={stats.revisao}  cor="#92400E" bg="#FEF3C7" />
        <IndicadorCard id="sem_pdi"  label="Sem PDI"     valor={stats.semPDI}   cor="#3F4856" bg="#F3F4F6" />
        <div style={{ flex: 1, minWidth: 120, padding: '14px 16px', border: '1px solid var(--escalab-line)', borderRadius: 12, background: 'var(--escalab-paper)' }}>
          <div style={{ fontSize: 28, fontWeight: 800, color: 'var(--escalab-ink)', lineHeight: 1 }}>{stats.total}</div>
          <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--escalab-slate)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '.06em' }}>Total pessoas</div>
        </div>
      </div>

      {/* Ações do PDI · status (planejadas / em andamento / concluídas) */}
      {acoesStats.total > 0 && (
        <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px', marginBottom: 18, boxShadow: '0 2px 12px rgba(0,0,0,.04)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, flexWrap: 'wrap', gap: 8 }}>
            <div>
              <h3 style={{ margin: 0, fontSize: 15, fontWeight: 800, color: 'var(--escalab-ink)' }}>Ações do PDI · status</h3>
              <div style={{ fontSize: 12, color: 'var(--escalab-slate)', marginTop: 2 }}>Distribuição das ações entre planejadas, em andamento e concluídas.</div>
            </div>
            <div style={{ fontSize: 12, color: 'var(--escalab-mute)', textAlign: 'right' }}>
              <div>{acoesStats.total} ação{acoesStats.total === 1 ? '' : 'ões'} no total</div>
              {acoesStats.proximasAVencer > 0 && (
                <div style={{ color: '#B45309', fontWeight: 700 }}>
                  {acoesStats.proximasAVencer} próxima{acoesStats.proximasAVencer === 1 ? '' : 's'} do prazo (7 dias)
                </div>
              )}
            </div>
          </div>
          {(() => {
            const pct = v => acoesStats.total ? Math.round(v / acoesStats.total * 100) : 0;
            const segs = [
              { label: 'Planejadas',    val: acoesStats.planejada,    cor: '#3F4856', bg: '#6B7280' },
              { label: 'Em andamento',  val: acoesStats.em_andamento, cor: '#1F4A8A', bg: '#3B82F6' },
              { label: 'Concluídas',    val: acoesStats.concluida,    cor: '#005E4D', bg: '#00836B' },
              { label: 'Canceladas',    val: acoesStats.cancelada,    cor: '#991B1B', bg: '#DC2626' },
            ];
            return (
              <>
                <div style={{ display: 'flex', height: 14, borderRadius: 7, overflow: 'hidden', background: '#F3F4F6' }}>
                  {segs.filter(s => s.val > 0).map(s => (
                    <div key={s.label} title={`${s.label}: ${s.val} (${pct(s.val)}%)`}
                      style={{ width: pct(s.val) + '%', background: s.bg, transition: 'width .3s' }} />
                  ))}
                </div>
                <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 12 }}>
                  {segs.map(s => (
                    <div key={s.label} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                      <span style={{ width: 12, height: 12, borderRadius: 3, background: s.bg }} />
                      <div>
                        <div style={{ fontSize: 12.5, color: 'var(--escalab-ink)', fontWeight: 600 }}>{s.label}</div>
                        <div style={{ fontSize: 11, color: s.cor, fontWeight: 700 }}>{s.val} ação{s.val === 1 ? '' : 'ões'} · {pct(s.val)}%</div>
                      </div>
                    </div>
                  ))}
                </div>
              </>
            );
          })()}
        </div>
      )}

      {/* Marcos · projeção vs realidade */}
      {marcosStats.total > 0 && (
        <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px', marginBottom: 18, boxShadow: '0 2px 12px rgba(0,0,0,.04)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, flexWrap: 'wrap', gap: 8 }}>
            <div>
              <h3 style={{ margin: 0, fontSize: 15, fontWeight: 800, color: 'var(--escalab-ink)' }}>Marcos de carreira · projeção vs realidade</h3>
              <div style={{ fontSize: 12, color: 'var(--escalab-slate)', marginTop: 2 }}>Quantos marcos foram alcançados no prazo, fora do prazo, ou ainda estão pendentes.</div>
            </div>
            <div style={{ fontSize: 12, color: 'var(--escalab-mute)', textAlign: 'right' }}>
              <div>{marcosStats.total} marco{marcosStats.total === 1 ? '' : 's'} planejado{marcosStats.total === 1 ? '' : 's'}</div>
              {marcosStats.desvioMedio != null && (
                <div style={{ color: marcosStats.desvioMedio > 30 ? '#B45309' : '#005E4D', fontWeight: 700 }}>
                  Desvio médio: {marcosStats.desvioMedio >= 0 ? '+' : ''}{marcosStats.desvioMedio} dias vs alvo
                </div>
              )}
            </div>
          </div>

          {/* Barra empilhada */}
          {(() => {
            const pct = v => marcosStats.total ? Math.round(v / marcosStats.total * 100) : 0;
            const segs = [
              { label: 'No prazo',       val: marcosStats.concluidosNoPrazo,   cor: '#00836B', bg: '#00836B' },
              { label: 'Fora do prazo',  val: marcosStats.concluidosFora,      cor: '#B45309', bg: '#F59E0B' },
              { label: 'Em rota',        val: marcosStats.pendentesNoPrazo,    cor: '#1F4A8A', bg: '#3B82F6' },
              { label: 'Atrasados',      val: marcosStats.pendentesAtrasados,  cor: '#991B1B', bg: '#DC2626' },
            ];
            return (
              <>
                <div style={{ display: 'flex', height: 14, borderRadius: 7, overflow: 'hidden', background: '#F3F4F6' }}>
                  {segs.filter(s => s.val > 0).map(s => (
                    <div key={s.label} title={`${s.label}: ${s.val} (${pct(s.val)}%)`}
                      style={{ width: pct(s.val) + '%', background: s.bg, transition: 'width .3s' }} />
                  ))}
                </div>
                <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 12 }}>
                  {segs.map(s => (
                    <div key={s.label} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                      <span style={{ width: 12, height: 12, borderRadius: 3, background: s.bg }} />
                      <div>
                        <div style={{ fontSize: 12.5, color: 'var(--escalab-ink)', fontWeight: 600 }}>{s.label}</div>
                        <div style={{ fontSize: 11, color: s.cor, fontWeight: 700 }}>{s.val} marco{s.val === 1 ? '' : 's'} · {pct(s.val)}%</div>
                      </div>
                    </div>
                  ))}
                </div>
              </>
            );
          })()}

          {/* Comparação projeção vs realidade · tabela dos últimos realizados */}
          {marcosStats.detalhes.length > 0 && (
            <div style={{ marginTop: 18, borderTop: '1px solid var(--escalab-line)', paddingTop: 14 }}>
              <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 8 }}>
                Últimos marcos realizados — alvo vs realidade
              </div>
              <div style={{ overflowX: 'auto' }}>
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5, minWidth: 580 }}>
                  <thead>
                    <tr style={{ background: 'var(--escalab-paper)' }}>
                      <th style={{ textAlign: 'left', padding: '7px 10px', fontSize: 10.5, fontWeight: 700, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Pessoa</th>
                      <th style={{ textAlign: 'left', padding: '7px 10px', fontSize: 10.5, fontWeight: 700, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Cargo</th>
                      <th style={{ textAlign: 'left', padding: '7px 10px', fontSize: 10.5, fontWeight: 700, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Alvo</th>
                      <th style={{ textAlign: 'left', padding: '7px 10px', fontSize: 10.5, fontWeight: 700, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Real</th>
                      <th style={{ textAlign: 'right', padding: '7px 10px', fontSize: 10.5, fontWeight: 700, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Desvio</th>
                    </tr>
                  </thead>
                  <tbody>
                    {marcosStats.detalhes.slice(0, 10).map((d, i) => (
                      <tr key={i} style={{ borderBottom: '1px solid var(--escalab-line)' }}>
                        <td style={{ padding: '7px 10px', color: 'var(--escalab-ink)' }}>{d.colab}</td>
                        <td style={{ padding: '7px 10px', color: 'var(--escalab-slate)' }}>{d.cargo}</td>
                        <td style={{ padding: '7px 10px', color: 'var(--escalab-slate)' }}>{new Date(d.dataAlvo + 'T00:00:00').toLocaleDateString('pt-BR')}</td>
                        <td style={{ padding: '7px 10px', color: 'var(--escalab-slate)' }}>{new Date(d.dataReal + 'T00:00:00').toLocaleDateString('pt-BR')}</td>
                        <td style={{ padding: '7px 10px', textAlign: 'right', fontWeight: 700, color: d.status === 'no_prazo' ? '#00836B' : '#B45309' }}>
                          {d.desvio >= 0 ? '+' : ''}{d.desvio}d
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      )}

      {/* Filtros */}
      <div style={{ display: 'flex', gap: 10, marginBottom: 14, flexWrap: 'wrap', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 9, padding: '7px 12px', flex: 1, maxWidth: 320 }}>
          <Icon name="search" size={13} />
          <input value={busca} onChange={e => setBusca(e.target.value)} placeholder="Buscar por nome, cargo ou cargo-alvo…"
            style={{ border: 0, outline: 0, fontSize: 13, fontFamily: 'var(--font-sans)', background: 'transparent', flex: 1 }} />
          {busca && <button onClick={() => setBusca('')} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)' }}><Icon name="close" size={11} /></button>}
        </div>
        <select value={setor} onChange={e => setSetor(e.target.value)}
          style={{ border: '1px solid var(--escalab-line)', borderRadius: 9, padding: '7px 12px', fontSize: 13, fontFamily: 'var(--font-sans)', background: '#fff' }}>
          <option value="todos">Todos os setores</option>
          {setores.map(s => <option key={s} value={s}>{s}</option>)}
        </select>
        {filtro !== 'todos' && (
          <button onClick={() => setFiltro('todos')}
            style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 9, padding: '7px 12px', cursor: 'pointer', fontSize: 12.5, color: 'var(--escalab-slate)' }}>
            Limpar filtros
          </button>
        )}
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>
          Mostrando <strong>{linhasFiltradas.length}</strong> de {linhas.length}
        </span>
      </div>

      {/* Lista */}
      {linhasFiltradas.length === 0 ? (
        <EmptyState
          icon="search"
          titulo="Nenhum colaborador encontrado"
          descricao={`Nenhum resultado para os filtros atuais. Tente limpar ou ajustar a busca.`}
          acao={<button onClick={() => { setFiltro('todos'); setBusca(''); setSetor('todos'); }}
            style={{ border: 0, background: 'var(--escalab-brand)', color: '#fff', borderRadius: 9, padding: '8px 16px', cursor: 'pointer', fontSize: 13, fontWeight: 600 }}>
            Limpar filtros
          </button>}
        />
      ) : (
        <div style={{ background: '#fff', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--escalab-line)', boxShadow: '0 2px 12px rgba(0,0,0,.04)' }}>
          {/* Cabeçalho */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'minmax(180px,2fr) 1.4fr 1.5fr 130px 120px 100px',
            gap: 0, padding: '10px 18px', background: 'var(--escalab-paper)',
            borderBottom: '1px solid var(--escalab-line)', position: 'sticky', top: 0, zIndex: 1,
          }} className="pdi-tbl-h">
            {['Pessoa', 'Cargo atual', 'Cargo-alvo', 'Horizonte', 'Última revisão', 'Status'].map(h => (
              <div key={h} style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>{h}</div>
            ))}
          </div>
          {/* Linhas */}
          {linhasFiltradas.map((l, i) => {
            const isVenc = l.status.label === 'Vencido';
            return (
              <div key={l.colab.id}
                onClick={() => l.pdi ? onAbrirPDI(l.pdi) : onCriarPDI(l.colab)}
                style={{
                  display: 'grid', gridTemplateColumns: 'minmax(180px,2fr) 1.4fr 1.5fr 130px 120px 100px',
                  gap: 0, padding: '12px 18px',
                  borderBottom: i < linhasFiltradas.length - 1 ? '1px solid var(--escalab-line)' : 0,
                  background: isVenc ? '#FFFBEB' : (i % 2 === 0 ? '#fff' : 'var(--escalab-paper)'),
                  cursor: 'pointer', alignItems: 'center', transition: 'background .12s',
                }}
                onMouseEnter={e => e.currentTarget.style.background = 'var(--escalab-brand-tint)'}
                onMouseLeave={e => e.currentTarget.style.background = isVenc ? '#FFFBEB' : (i % 2 === 0 ? '#fff' : 'var(--escalab-paper)')}
                className="pdi-tbl-r">
                {/* Pessoa */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 32, height: 32, borderRadius: '50%', background: l.colab.cor || '#6B7280', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, flexShrink: 0 }}>
                    {l.colab.iniciais || l.colab.nome.split(' ').map(n => n[0]).slice(0,2).join('').toUpperCase()}
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--escalab-ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{l.colab.nome}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{l.colab.setor}</div>
                  </div>
                </div>
                {/* Cargo atual */}
                <div style={{ fontSize: 12.5, color: 'var(--escalab-ink)' }}>{l.colab.cargo || '·'}</div>
                {/* Cargo-alvo */}
                <div style={{ fontSize: 12.5, color: l.pdi?.cargoAlvo ? 'var(--escalab-ink)' : 'var(--escalab-mute)', fontStyle: l.pdi?.cargoAlvo ? 'normal' : 'italic' }}>
                  {l.pdi?.cargoAlvo || (l.pdi ? '·' : 'sem PDI')}
                </div>
                {/* Horizonte */}
                <div style={{ fontSize: 12.5, color: 'var(--escalab-slate)' }}>{l.pdi?.horizonte || '·'}</div>
                {/* Última revisão */}
                <div style={{ fontSize: 12, color: 'var(--escalab-slate)' }}>
                  {l.pdi?.ultimaRevisao
                    ? new Date(l.pdi.ultimaRevisao).toLocaleDateString('pt-BR')
                    : (l.pdi ? <em style={{ color: 'var(--escalab-mute)' }}>nunca</em> : '·')}
                  {isVenc && l.status.mesesSemRev && (
                    <div style={{ fontSize: 10.5, color: '#B45309', fontWeight: 700, marginTop: 1 }}>há {l.status.mesesSemRev}m</div>
                  )}
                </div>
                {/* Status */}
                <div><StatusBadge pdi={l.pdi} size="sm" /></div>
              </div>
            );
          })}
        </div>
      )}

      <style>{`
        @media (max-width: 920px) {
          .pdi-tbl-h, .pdi-tbl-r {
            grid-template-columns: 1fr 90px !important;
          }
          .pdi-tbl-h > *:nth-child(n+2):nth-child(-n+5),
          .pdi-tbl-r > *:nth-child(n+2):nth-child(-n+5) {
            display: none !important;
          }
        }
      `}</style>
    </div>
  );
};

// ── Helpers: cargo alvo & marcos ─────────────────────────────────────────────
// Distância em meses humanizada entre hoje e uma data YYYY-MM-DD
function distanciaParaData(dataAlvo) {
  if (!dataAlvo) return null;
  const ms = new Date(dataAlvo + 'T00:00:00').getTime() - Date.now();
  if (!isFinite(ms)) return null;
  const dias = Math.round(ms / 86400000);
  if (dias < 0) return { dias, texto: `há ${Math.abs(Math.round(dias / 30))} m`, atrasado: true };
  if (dias < 30) return { dias, texto: `em ${dias} dias` };
  const meses = Math.round(dias / 30);
  if (meses < 18) return { dias, texto: `em ${meses} meses` };
  const anos = Math.round(meses / 12 * 10) / 10;
  return { dias, texto: `em ${anos} anos` };
}
// Próximo marco da projeção: o primeiro pendente (sem realizadoEm)
function proximoMarco(pdi) {
  return (pdi.projecaoCarreira || []).find(m => !m.realizadoEm) || null;
}

// ═══════════════════════════════════════════════════════════════
// PDI INDIVIDUAL · Tela 2 — Header + abas (RH vê 4, colab vê 2)
// ═══════════════════════════════════════════════════════════════
const PDIIndividual = ({ pdi: pdiInicial, colaborador, user, onVoltar, onAtualizar, viewMode = 'rh' }) => {
  const isColab = viewMode === 'colab';
  const [aba, setAba] = useState('resumo');
  const [draft, setDraft] = useState(pdiInicial);
  const dirty = JSON.stringify(draft) !== JSON.stringify(pdiInicial);
  const status = statusVisual(draft);
  const venceu = status.label === 'Vencido' && !isColab;

  function salvar() {
    if (!dirty) return;
    const mudancas = [];
    Object.keys(draft).forEach(k => {
      if (JSON.stringify(draft[k]) !== JSON.stringify(pdiInicial[k])) {
        mudancas.push(k);
      }
    });
    const novoStatus = (!isColab && draft.status === 'em_construcao') ? 'ativo' : draft.status;
    const atualizado = { ...draft, status: novoStatus, atualizadoEm: new Date().toISOString() };
    setDraft(atualizado);
    onAtualizar(atualizado);
    if (mudancas.length) {
      registrarHistorico(draft.id, user.id, user.nome, isColab ? 'editou (colaborador)' : 'editou', { campos: mudancas });
    }
  }

  function marcarRevisao() {
    const atualizado = { ...draft, ultimaRevisao: new Date().toISOString(), status: 'ativo' };
    setDraft(atualizado);
    onAtualizar(atualizado);
    registrarHistorico(draft.id, user.id, user.nome, 'marcou revisão', {});
  }

  function toggleLiberacao() {
    const novo = !draft.liberadoColaborador;
    const atualizado = {
      ...draft,
      liberadoColaborador: novo,
      liberadoEm: novo ? new Date().toISOString() : null,
    };
    setDraft(atualizado);
    onAtualizar(atualizado);
    registrarHistorico(draft.id, user.id, user.nome, novo ? 'liberou pro colaborador' : 'bloqueou para o colaborador', {});
  }

  // Abas: colaborador vê apenas Resumo + Desenvolvimento
  const tabs = isColab
    ? [
        { id: 'resumo',         label: 'Resumo',          icon: 'home' },
        { id: 'desenvolvimento',label: 'Desenvolvimento', icon: 'trend_up' },
      ]
    : [
        { id: 'resumo',         label: 'Resumo',          icon: 'home' },
        { id: 'desenvolvimento',label: 'Desenvolvimento', icon: 'trend_up' },
        { id: 'projecao',       label: 'Projeção · Carreira & Salário', icon: 'lock' },
        { id: 'historico',      label: 'Histórico',       icon: 'clock' },
      ];

  return (
    <div style={{ animation: 'fadeIn .22s var(--ease-out)' }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 14, marginBottom: 16, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1, minWidth: 0 }}>
          {!isColab && (
            <button onClick={onVoltar}
              style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 9, padding: '8px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, color: 'var(--escalab-slate)', fontSize: 13, fontWeight: 600 }}>
              <Icon name="chev_right" size={12} style={{ transform: 'rotate(180deg)' }} />
              PDIs
            </button>
          )}
          <div style={{ width: 48, height: 48, borderRadius: '50%', background: colaborador.cor || '#6B7280', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontWeight: 700, flexShrink: 0 }}>
            {colaborador.iniciais || colaborador.nome.split(' ').map(n => n[0]).slice(0,2).join('').toUpperCase()}
          </div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 2 }}>{isColab ? 'Meu PDI' : 'PDI'}</div>
            <h2 style={{ fontSize: 20, fontWeight: 800, margin: 0, letterSpacing: '-.01em', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{colaborador.nome}</h2>
            <div style={{ fontSize: 12.5, color: 'var(--escalab-slate)', marginTop: 1 }}>
              {colaborador.cargo} · {colaborador.setor}
              {!isColab && <StatusBadge pdi={draft} size="sm" />}
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
          {!isColab && (
            <button onClick={toggleLiberacao} title={draft.liberadoColaborador ? 'Bloquear visualização do colaborador' : 'Liberar visualização para o colaborador'}
              style={{
                border: '1px solid ' + (draft.liberadoColaborador ? '#00836B' : 'var(--escalab-line)'),
                background: draft.liberadoColaborador ? '#E6F5F1' : '#fff',
                color: draft.liberadoColaborador ? '#00836B' : 'var(--escalab-slate)',
                borderRadius: 9, padding: '8px 14px', cursor: 'pointer',
                fontSize: 12.5, fontWeight: 700, fontFamily: 'var(--font-sans)',
                display: 'flex', alignItems: 'center', gap: 6,
              }}>
              <Icon name={draft.liberadoColaborador ? 'check' : 'lock'} size={12} />
              {draft.liberadoColaborador ? 'Liberado pro colab' : 'Liberar pro colab'}
            </button>
          )}
          <button
            onClick={salvar} disabled={!dirty}
            style={{
              border: 0, borderRadius: 9, padding: '10px 22px', cursor: dirty ? 'pointer' : 'not-allowed',
              fontSize: 13.5, fontWeight: 700, fontFamily: 'var(--font-sans)',
              background: dirty ? 'var(--escalab-brand)' : '#E5E8EE',
              color: dirty ? '#fff' : '#6B7280',
              display: 'flex', alignItems: 'center', gap: 7,
              boxShadow: dirty ? '0 4px 12px rgba(0,150,123,.30)' : 'none',
              transition: 'all .15s',
            }}>
            <Icon name="check" size={13} />
            {dirty ? 'Salvar alterações' : 'Sem alterações'}
          </button>
        </div>
      </div>

      {/* Faixa de vencido */}
      {venceu && (
        <FaixaAviso tone="warn"
          action={
            <button onClick={marcarRevisao}
              style={{ border: 0, background: '#F59E0B', color: '#fff', borderRadius: 8, padding: '6px 14px', cursor: 'pointer', fontSize: 12.5, fontWeight: 700, fontFamily: 'var(--font-sans)' }}>
              Marcar revisão
            </button>
          }>
          Este PDI não é revisado há <strong>{status.mesesSemRev} meses</strong>. Recomendamos revisar com o colaborador.
        </FaixaAviso>
      )}

      {/* Faixa pro colab quando ainda não foi liberado */}
      {isColab && !draft.liberadoColaborador && (
        <FaixaAviso tone="info">
          Seu PDI ainda está sendo construído pelo RH. <strong>Cargo-alvo e projeções</strong> serão liberados em breve. Enquanto isso, você já pode preencher seus sonhos e acompanhar suas ações.
        </FaixaAviso>
      )}

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 18, borderBottom: '1px solid var(--escalab-line)', flexWrap: 'wrap', overflowX: 'auto' }} className="pdi-tabs">
        {tabs.map(t => (
          <button key={t.id} onClick={() => setAba(t.id)} data-tab-id={t.id}
            style={{
              border: 0, background: 'transparent', cursor: 'pointer',
              padding: '11px 16px', fontFamily: 'var(--font-sans)', fontSize: 13.5,
              fontWeight: aba === t.id ? 700 : 500,
              color: aba === t.id ? 'var(--escalab-brand)' : 'var(--escalab-slate)',
              borderBottom: aba === t.id ? '2px solid var(--escalab-brand)' : '2px solid transparent',
              marginBottom: -1, display: 'flex', alignItems: 'center', gap: 6,
              transition: 'all .12s', whiteSpace: 'nowrap',
            }}>
            <Icon name={t.icon} size={13} />
            {t.label}
            {t.id === 'projecao' && <CadeadoConfidencial size={10} />}
          </button>
        ))}
      </div>

      {/* Conteúdo das abas */}
      {aba === 'resumo'          && <AbaResumo          draft={draft} setDraft={setDraft} colaborador={colaborador} isColab={isColab} />}
      {aba === 'desenvolvimento' && <AbaDesenvolvimento draft={draft} setDraft={setDraft} isColab={isColab} user={user} />}
      {aba === 'projecao'        && !isColab && <AbaProjecao        draft={draft} setDraft={setDraft} />}
      {aba === 'historico'       && !isColab && <AbaHistorico       pdiId={draft.id} />}
    </div>
  );
};

// ── Aba: RESUMO ──────────────────────────────────────────────────────────────
const AbaResumo = ({ draft, setDraft, colaborador, isColab = false }) => {
  function up(k, v) { setDraft({ ...draft, [k]: v }); }
  const ultimaAvd = null; // TODO: integrar com data.jsx getAvaliacoesColaborador(colaborador.id)
  const proximo = proximoMarco(draft);
  const dist = proximo?.dataAlvo ? distanciaParaData(proximo.dataAlvo) : null;
  // Cargo-alvo visível ao colab apenas se RH liberou
  const podeVerAlvo = !isColab || draft.liberadoColaborador;

  const inp = { width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 9, padding: '10px 13px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 'none', boxSizing: 'border-box', background: '#fff' };
  const inpRo = { ...inp, background: '#F5F7FA', color: 'var(--escalab-slate)' };
  const lbl = { fontSize: 11, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-slate)', marginBottom: 6, display: 'block' };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="pdi-grid2">
      {/* Coluna esquerda */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* Sonhos · sempre visíveis ao colab (pode editar) */}
        <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px' }}>
          <label style={lbl}>Sonho pessoal</label>
          <textarea value={draft.sonhoPessoal || ''} onChange={e => up('sonhoPessoal', e.target.value)}
            placeholder="O que você sonha pra sua vida? Algo grande que te move?"
            rows={3} style={{ ...inp, resize: 'vertical', lineHeight: 1.5 }} />
        </div>
        <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px' }}>
          <label style={lbl}>Sonho profissional</label>
          <textarea value={draft.sonhoProfissional || ''} onChange={e => up('sonhoProfissional', e.target.value)}
            placeholder="Onde você quer chegar na carreira? Que impacto quer gerar?"
            rows={3} style={{ ...inp, resize: 'vertical', lineHeight: 1.5 }} />
        </div>
        {/* Pontos fortes e a desenvolver · só RH edita; colab vê leitura */}
        <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px' }}>
          <label style={lbl}>Pontos fortes</label>
          {isColab ? (
            <div style={{ ...inpRo, minHeight: 60, whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>
              {draft.pontosFortes || <em style={{ color: 'var(--escalab-mute)' }}>Ainda não preenchido pelo RH.</em>}
            </div>
          ) : (
            <textarea value={draft.pontosFortes || ''} onChange={e => up('pontosFortes', e.target.value)}
              placeholder="O que essa pessoa faz bem hoje? Quais são as forças que ela pode aproveitar?"
              rows={3} style={{ ...inp, resize: 'vertical', lineHeight: 1.5 }} />
          )}
        </div>
        <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px' }}>
          <label style={lbl}>Pontos a desenvolver</label>
          {isColab ? (
            <div style={{ ...inpRo, minHeight: 60, whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>
              {draft.pontosDev || <em style={{ color: 'var(--escalab-mute)' }}>Ainda não preenchido pelo RH.</em>}
            </div>
          ) : (
            <textarea value={draft.pontosDev || ''} onChange={e => up('pontosDev', e.target.value)}
              placeholder="Em que áreas precisa crescer? Que comportamentos ou habilidades focar?"
              rows={3} style={{ ...inp, resize: 'vertical', lineHeight: 1.5 }} />
          )}
        </div>
      </div>

      {/* Coluna direita */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* Próximo marco — só aparece se cargo-alvo está liberado */}
        {podeVerAlvo && proximo && (
          <div style={{ background: 'var(--escalab-brand-tint)', border: '1px solid var(--escalab-brand-soft)', borderRadius: 12, padding: '16px 18px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
              <Icon name="trend_up" size={14} />
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--escalab-brand-deep)', textTransform: 'uppercase', letterSpacing: '.08em' }}>Próximo cargo alvo</div>
            </div>
            <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--escalab-brand-deep)' }}>{proximo.cargo || '—'}</div>
            {dist && (
              <div style={{ fontSize: 12.5, color: 'var(--escalab-slate)', marginTop: 4 }}>
                {proximo.dataAlvo && <>previsão para <strong>{new Date(proximo.dataAlvo + 'T00:00:00').toLocaleDateString('pt-BR', { month: 'short', year: 'numeric' })}</strong> · </>}
                <span style={{ color: dist.atrasado ? '#B45309' : 'var(--escalab-brand-deep)', fontWeight: 700 }}>{dist.texto}</span>
              </div>
            )}
          </div>
        )}

        {/* Cargo-alvo · campo livre só para o RH (legado). Colab vê via "Próximo cargo" acima */}
        {!isColab && (
          <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px' }}>
            <label style={lbl}>Cargo-alvo (livre) <CadeadoConfidencial /></label>
            <input value={draft.cargoAlvo || ''} onChange={e => up('cargoAlvo', e.target.value)}
              placeholder="Ex: Coordenador(a) de Projetos" style={inp} />
            <div style={{ marginTop: 12 }}>
              <label style={lbl}>Horizonte</label>
              <select value={draft.horizonte || '12 meses'} onChange={e => up('horizonte', e.target.value)} style={{ ...inp, background: '#fff' }}>
                <option>3 meses</option>
                <option>6 meses</option>
                <option>12 meses</option>
                <option>18 meses</option>
                <option>24 meses</option>
                <option>+ 24 meses</option>
              </select>
            </div>
            <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginTop: 10, lineHeight: 1.4 }}>
              Use a aba <strong>Projeção</strong> pra montar a sequência de marcos (cargos × datas). O próximo marco aberto vira o "próximo cargo alvo" mostrado ao colaborador.
            </div>
          </div>
        )}

        <div style={{ background: 'var(--escalab-paper)', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '14px 16px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <Icon name="star" size={14} />
            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--escalab-slate)', textTransform: 'uppercase', letterSpacing: '.08em' }}>Última avaliação (AVD)</div>
          </div>
          {ultimaAvd ? (
            <div>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--escalab-brand-deep)' }}>{ultimaAvd.nota}</div>
              <div style={{ fontSize: 12, color: 'var(--escalab-slate)' }}>Ciclo {ultimaAvd.ciclo} · {ultimaAvd.data}</div>
            </div>
          ) : (
            <div style={{ fontSize: 12.5, color: 'var(--escalab-slate)', fontStyle: 'italic' }}>Nenhuma avaliação registrada ainda.</div>
          )}
        </div>
      </div>

      {/* Ações destaque (full width) */}
      <div style={{ gridColumn: '1 / -1', background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <label style={{ ...lbl, marginBottom: 0 }}>3 ações mais importantes</label>
          <span style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{isColab ? 'Definidas pelo RH a partir do plano de ação' : 'Edite os destaques da aba Desenvolvimento aqui'}</span>
        </div>
        {(draft.acoesDestaque || []).length === 0 ? (
          <EmptyState
            icon="trophy"
            titulo="Nenhuma ação em destaque"
            descricao={isColab ? "O RH ainda não destacou ações prioritárias pra você." : "Vá pra aba Desenvolvimento, cadastre ações e marque até 3 como destaque."}
          />
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {(draft.acoesDestaque || []).slice(0, 3).map((a, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', background: 'var(--escalab-paper)', borderRadius: 9 }}>
                <div style={{ width: 24, height: 24, borderRadius: 6, background: 'var(--escalab-brand)', color: '#fff', fontSize: 12, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{i + 1}</div>
                <div style={{ flex: 1, fontSize: 13, color: 'var(--escalab-ink)' }}>{a}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

// ── Aba: DESENVOLVIMENTO (competências + ações) ─────────────────────────────
const AbaDesenvolvimento = ({ draft, setDraft, isColab = false, user }) => {
  function addCompetencia() {
    setDraft({
      ...draft,
      competencias: [...(draft.competencias || []), { id: Date.now() + '_c', nome: '', nivelAtual: 1, nivelEsperado: 3 }],
    });
  }
  function updCompetencia(id, patch) {
    setDraft({
      ...draft,
      competencias: (draft.competencias || []).map(c => c.id === id ? { ...c, ...patch } : c),
    });
  }
  function rmCompetencia(id) {
    setDraft({ ...draft, competencias: (draft.competencias || []).filter(c => c.id !== id) });
  }

  function addAcao() {
    setDraft({
      ...draft,
      acoes: [...(draft.acoes || []), { id: Date.now() + '_a', tipo: 'treinamento', descricao: '', prazo: '', status: 'planejada', destaque: false }],
    });
  }
  function updAcao(id, patch) {
    setDraft({
      ...draft,
      acoes: (draft.acoes || []).map(a => a.id === id ? { ...a, ...patch } : a),
    });
  }
  function rmAcao(id) {
    setDraft({ ...draft, acoes: (draft.acoes || []).filter(a => a.id !== id) });
  }
  // Ações criadas pelo colaborador (lista separada)
  function addAcaoColab() {
    setDraft({
      ...draft,
      acoesColab: [...(draft.acoesColab || []), {
        id: Date.now() + '_ac', tipo: 'outro', descricao: '', prazo: '', status: 'planejada',
        autorId: user?.id, autorNome: user?.nome, criadoEm: new Date().toISOString(),
      }],
    });
  }
  function updAcaoColab(id, patch) {
    setDraft({
      ...draft,
      acoesColab: (draft.acoesColab || []).map(a => a.id === id ? { ...a, ...patch } : a),
    });
  }
  function rmAcaoColab(id) {
    setDraft({ ...draft, acoesColab: (draft.acoesColab || []).filter(a => a.id !== id) });
  }
  function toggleDestaque(id) {
    const acao = (draft.acoes || []).find(a => a.id === id);
    if (!acao) return;
    const destaques = (draft.acoes || []).filter(a => a.destaque).map(a => a.id);
    if (acao.destaque) {
      updAcao(id, { destaque: false });
      setDraft(d => ({ ...d, acoesDestaque: (d.acoes || []).filter(a => a.destaque && a.id !== id).map(a => a.descricao).filter(Boolean) }));
    } else {
      if (destaques.length >= 3) {
        alert('Máximo de 3 ações em destaque. Desmarque uma antes de adicionar outra.');
        return;
      }
      updAcao(id, { destaque: true });
      setDraft(d => {
        const acs = (d.acoes || []).map(a => a.id === id ? { ...a, destaque: true } : a);
        return { ...d, acoes: acs, acoesDestaque: acs.filter(a => a.destaque).map(a => a.descricao).filter(Boolean) };
      });
    }
  }

  const inp = { border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '7px 10px', fontSize: 12.5, fontFamily: 'var(--font-sans)', outline: 'none', background: '#fff' };
  const tipoConfig = {
    treinamento: { cor: '#1F4A8A', bg: '#E8EEF8', label: 'Treinamento' },
    mentoria:    { cor: '#6B3FA0', bg: '#F0E9F8', label: 'Mentoria' },
    projeto:     { cor: '#00836B', bg: '#E6F5F1', label: 'Projeto' },
    leitura:     { cor: '#B45309', bg: '#FEF3C7', label: 'Leitura' },
    outro:       { cor: '#3F4856', bg: '#F3F4F6', label: 'Outro' },
  };
  const statusConfig = {
    planejada:    { cor: '#3F4856', bg: '#F3F4F6', label: 'Planejada' },
    em_andamento: { cor: '#1F4A8A', bg: '#E8EEF8', label: 'Em andamento' },
    concluida:    { cor: '#005E4D', bg: '#E6F5F1', label: 'Concluída' },
    cancelada:    { cor: '#991B1B', bg: '#FEE2E2', label: 'Cancelada' },
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {/* Competências · colab só lê */}
      <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>Competências a desenvolver</h3>
          {!isColab && (
            <button onClick={addCompetencia}
              style={{ border: 0, background: 'var(--escalab-brand)', color: '#fff', borderRadius: 8, padding: '7px 14px', cursor: 'pointer', fontSize: 12.5, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 }}>
              <Icon name="plus" size={12} /> Adicionar
            </button>
          )}
        </div>
        {(draft.competencias || []).length === 0 ? (
          <EmptyState
            icon="trend_up"
            titulo="Nenhuma competência ainda"
            descricao={isColab ? "O RH ainda não definiu competências para o seu plano." : "Liste as competências que a pessoa precisa desenvolver pra chegar no cargo-alvo. Defina nível atual e esperado em escala 1 a 5."}
            acao={!isColab && <button onClick={addCompetencia} style={{ border: 0, background: 'var(--escalab-brand)', color: '#fff', borderRadius: 9, padding: '8px 16px', cursor: 'pointer', fontSize: 13, fontWeight: 600 }}>+ Primeira competência</button>}
          />
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {(draft.competencias || []).map(c => (
              <div key={c.id} style={{ display: 'grid', gridTemplateColumns: isColab ? '1fr 110px 110px' : '1fr 110px 110px 36px', gap: 10, alignItems: 'center', padding: '10px 12px', background: 'var(--escalab-paper)', borderRadius: 9 }} className="pdi-comp-row">
                {isColab ? (
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--escalab-ink)' }}>{c.nome || '—'}</div>
                ) : (
                  <input value={c.nome} onChange={e => updCompetencia(c.id, { nome: e.target.value })}
                    placeholder="Nome da competência" style={{ ...inp, width: '100%' }} />
                )}
                <div>
                  <div style={{ fontSize: 10, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 2 }}>Atual</div>
                  {isColab ? (
                    <div style={{ ...inp, width: '100%', background: '#fff', textAlign: 'center', fontWeight: 700 }}>{c.nivelAtual}</div>
                  ) : (
                    <select value={c.nivelAtual} onChange={e => updCompetencia(c.id, { nivelAtual: +e.target.value })} style={{ ...inp, width: '100%', background: '#fff' }}>
                      {[1,2,3,4,5].map(n => <option key={n} value={n}>{n}</option>)}
                    </select>
                  )}
                </div>
                <div>
                  <div style={{ fontSize: 10, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 2 }}>Esperado</div>
                  {isColab ? (
                    <div style={{ ...inp, width: '100%', background: '#fff', textAlign: 'center', fontWeight: 700 }}>{c.nivelEsperado}</div>
                  ) : (
                    <select value={c.nivelEsperado} onChange={e => updCompetencia(c.id, { nivelEsperado: +e.target.value })} style={{ ...inp, width: '100%', background: '#fff' }}>
                      {[1,2,3,4,5].map(n => <option key={n} value={n}>{n}</option>)}
                    </select>
                  )}
                </div>
                {!isColab && (
                  <button onClick={() => rmCompetencia(c.id)} title="Remover" style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 4 }}>
                    <Icon name="close" size={14} />
                  </button>
                )}
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Ações planejadas · RH cria; colab só muda status. */}
      <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>Ações planejadas {isColab && <span style={{ fontSize: 11, color: 'var(--escalab-mute)', fontWeight: 500 }}>· definidas pelo RH</span>}</h3>
          {!isColab && (
            <button onClick={addAcao}
              style={{ border: 0, background: 'var(--escalab-brand)', color: '#fff', borderRadius: 8, padding: '7px 14px', cursor: 'pointer', fontSize: 12.5, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 }}>
              <Icon name="plus" size={12} /> Adicionar
            </button>
          )}
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginBottom: 12 }}>
          {isColab ? 'Você pode marcar cada ação como "Em andamento" ou "Concluída" conforme for executando.' : 'Treinamentos, mentorias, projetos e leituras. Marque até 3 como destaque pra aparecer no Resumo.'}
        </div>
        {(draft.acoes || []).length === 0 ? (
          <EmptyState
            icon="calendar"
            titulo="Nenhuma ação cadastrada"
            descricao={isColab ? "O RH ainda não cadastrou ações pra você." : "Cadastre o plano de ação que essa pessoa vai seguir. Pode ser treinamento, mentoria, projeto desafio ou leitura."}
            acao={!isColab && <button onClick={addAcao} style={{ border: 0, background: 'var(--escalab-brand)', color: '#fff', borderRadius: 9, padding: '8px 16px', cursor: 'pointer', fontSize: 13, fontWeight: 600 }}>+ Primeira ação</button>}
          />
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {(draft.acoes || []).map(a => {
              const tc = tipoConfig[a.tipo] || tipoConfig.outro;
              const sc = statusConfig[a.status] || statusConfig.planejada;
              return (
                <div key={a.id} style={{ display: 'grid', gridTemplateColumns: isColab ? '110px 1fr 110px 130px' : '110px 1fr 130px 130px 36px 36px', gap: 8, alignItems: 'center', padding: '10px 12px', background: a.destaque ? 'var(--escalab-brand-tint)' : 'var(--escalab-paper)', border: a.destaque ? '1px solid var(--escalab-brand-soft)' : '1px solid transparent', borderRadius: 9 }} className="pdi-acao-row">
                  {isColab ? (
                    <span style={{ ...inp, width: '100%', background: tc.bg, color: tc.cor, fontWeight: 700, textAlign: 'center', display: 'block' }}>{tc.label}</span>
                  ) : (
                    <select value={a.tipo} onChange={e => updAcao(a.id, { tipo: e.target.value })} style={{ ...inp, width: '100%', background: tc.bg, color: tc.cor, fontWeight: 700 }}>
                      {Object.keys(tipoConfig).map(k => <option key={k} value={k}>{tipoConfig[k].label}</option>)}
                    </select>
                  )}
                  {isColab ? (
                    <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--escalab-ink)' }}>
                      {a.descricao || '—'}
                      {a.prazo && <span style={{ fontSize: 11, color: 'var(--escalab-mute)', marginLeft: 8 }}>· prazo {new Date(a.prazo + 'T00:00:00').toLocaleDateString('pt-BR')}</span>}
                    </div>
                  ) : (
                    <input value={a.descricao} onChange={e => updAcao(a.id, { descricao: e.target.value })}
                      placeholder="Descrição (ex: Curso de Power BI · Coursera)" style={{ ...inp, width: '100%' }} />
                  )}
                  {!isColab && <input type="date" value={a.prazo || ''} onChange={e => updAcao(a.id, { prazo: e.target.value })} style={{ ...inp, width: '100%' }} />}
                  {/* Status: colab pode alterar (essa é a única coisa que ele edita aqui) */}
                  <select value={a.status} onChange={e => updAcao(a.id, { status: e.target.value })} style={{ ...inp, width: '100%', background: sc.bg, color: sc.cor, fontWeight: 700 }}>
                    {Object.keys(statusConfig).map(k => <option key={k} value={k}>{statusConfig[k].label}</option>)}
                  </select>
                  {!isColab && (
                    <button onClick={() => toggleDestaque(a.id)} title={a.destaque ? 'Remover destaque' : 'Marcar como destaque (max 3)'}
                      style={{ border: 0, background: 'transparent', cursor: 'pointer', color: a.destaque ? '#F59E0B' : 'var(--escalab-mute)', padding: 4 }}>
                      <Icon name="star" size={15} />
                    </button>
                  )}
                  {!isColab && (
                    <button onClick={() => rmAcao(a.id)} title="Remover" style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 4 }}>
                      <Icon name="close" size={14} />
                    </button>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* Ações do colaborador · gerenciadas só pelo colab */}
      <div style={{ background: '#fff', border: '1px solid var(--escalab-brand-soft)', borderRadius: 12, padding: '16px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 8 }}>
            {isColab ? 'Minhas ações' : 'Ações adicionadas pelo colaborador'}
            <span style={{ fontSize: 10.5, fontWeight: 700, background: 'var(--escalab-brand-tint)', color: 'var(--escalab-brand-deep)', padding: '2px 8px', borderRadius: 999, letterSpacing: '.06em', textTransform: 'uppercase' }}>colab</span>
          </h3>
          {isColab && (
            <button onClick={addAcaoColab}
              style={{ border: 0, background: 'var(--escalab-brand)', color: '#fff', borderRadius: 8, padding: '7px 14px', cursor: 'pointer', fontSize: 12.5, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 }}>
              <Icon name="plus" size={12} /> Adicionar minha
            </button>
          )}
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginBottom: 12 }}>
          {isColab ? 'Aqui você pode incluir ações que você mesmo definiu (curso, leitura, projeto…). Você gerencia 100% — adiciona, edita e marca como concluída.' : 'Ações que o colaborador adicionou por conta própria. Você pode acompanhar mas não editar.'}
        </div>
        {(draft.acoesColab || []).length === 0 ? (
          <EmptyState
            icon="plus"
            titulo={isColab ? "Nenhuma ação sua ainda" : "O colaborador ainda não adicionou ações"}
            descricao={isColab ? "Clique em 'Adicionar minha' pra cadastrar a primeira." : "Quando o colaborador adicionar ações, aparecem aqui."}
          />
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {(draft.acoesColab || []).map(a => {
              const tc = tipoConfig[a.tipo] || tipoConfig.outro;
              const sc = statusConfig[a.status] || statusConfig.planejada;
              const podeEditar = isColab;
              return (
                <div key={a.id} style={{ display: 'grid', gridTemplateColumns: podeEditar ? '110px 1fr 130px 130px 36px' : '110px 1fr 130px', gap: 8, alignItems: 'center', padding: '10px 12px', background: 'var(--escalab-paper)', borderRadius: 9 }} className="pdi-acao-row">
                  {podeEditar ? (
                    <select value={a.tipo} onChange={e => updAcaoColab(a.id, { tipo: e.target.value })} style={{ ...inp, width: '100%', background: tc.bg, color: tc.cor, fontWeight: 700 }}>
                      {Object.keys(tipoConfig).map(k => <option key={k} value={k}>{tipoConfig[k].label}</option>)}
                    </select>
                  ) : (
                    <span style={{ ...inp, width: '100%', background: tc.bg, color: tc.cor, fontWeight: 700, textAlign: 'center', display: 'block' }}>{tc.label}</span>
                  )}
                  {podeEditar ? (
                    <input value={a.descricao} onChange={e => updAcaoColab(a.id, { descricao: e.target.value })}
                      placeholder="O que você vai fazer?" style={{ ...inp, width: '100%' }} />
                  ) : (
                    <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--escalab-ink)' }}>
                      {a.descricao || '—'}
                      {a.prazo && <span style={{ fontSize: 11, color: 'var(--escalab-mute)', marginLeft: 8 }}>· prazo {new Date(a.prazo + 'T00:00:00').toLocaleDateString('pt-BR')}</span>}
                    </div>
                  )}
                  {podeEditar && <input type="date" value={a.prazo || ''} onChange={e => updAcaoColab(a.id, { prazo: e.target.value })} style={{ ...inp, width: '100%' }} />}
                  <select value={a.status} onChange={e => podeEditar && updAcaoColab(a.id, { status: e.target.value })} disabled={!podeEditar} style={{ ...inp, width: '100%', background: sc.bg, color: sc.cor, fontWeight: 700, cursor: podeEditar ? 'pointer' : 'default' }}>
                    {Object.keys(statusConfig).map(k => <option key={k} value={k}>{statusConfig[k].label}</option>)}
                  </select>
                  {podeEditar && (
                    <button onClick={() => rmAcaoColab(a.id)} title="Remover" style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 4 }}>
                      <Icon name="close" size={14} />
                    </button>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
};

// ── Sub-componente: Editor do cargo atual (inline) ──────────────────────────
const EditorCargoAtual = ({ atual, desde, cargosCatalogo, onSalvar, onCancelar }) => {
  const [cargo, setCargo] = useState(atual || '');
  const [data, setData]   = useState(desde || new Date().toISOString().slice(0, 10));
  const inp = { width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '7px 10px', fontSize: 12.5, fontFamily: 'var(--font-sans)', outline: 'none', background: '#fff', boxSizing: 'border-box' };
  return (
    <div style={{ minWidth: 220, background: '#fff', border: '2px dashed var(--escalab-brand)', borderRadius: 12, padding: '12px 14px' }}>
      <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--escalab-brand-deep)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 6 }}>Editar cargo atual</div>
      <select value={cargo} onChange={e => setCargo(e.target.value)} style={{ ...inp, fontWeight: 700, marginBottom: 6 }}>
        <option value="">· selecione um cargo ·</option>
        {(cargosCatalogo || []).map(c => <option key={c.value} value={c.value}>{c.value}</option>)}
      </select>
      <div style={{ fontSize: 10, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 2 }}>Está nesse cargo desde</div>
      <input type="date" value={data} onChange={e => setData(e.target.value)} style={inp} />
      <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
        <button onClick={() => onSalvar(cargo, data)}
          disabled={!cargo || !data}
          style={{ flex: 1, border: 0, background: cargo && data ? 'var(--escalab-brand)' : '#E5E8EE', color: cargo && data ? '#fff' : '#6B7280', borderRadius: 7, padding: '6px 10px', cursor: cargo && data ? 'pointer' : 'not-allowed', fontSize: 11.5, fontWeight: 700 }}>
          Salvar
        </button>
        <button onClick={onCancelar}
          style={{ border: '1px solid var(--escalab-line)', background: '#fff', color: 'var(--escalab-slate)', borderRadius: 7, padding: '6px 10px', cursor: 'pointer', fontSize: 11.5, fontWeight: 700 }}>
          Cancelar
        </button>
      </div>
      <div style={{ fontSize: 10, color: 'var(--escalab-mute)', marginTop: 6, lineHeight: 1.3 }}>
        Ao salvar, o cargo anterior vai pro histórico automaticamente.
      </div>
    </div>
  );
};

// ── Sub-componente: Modal de histórico de cargos ─────────────────────────────
const HistoricoCargosModal = ({ historico, atual, onClose }) => {
  // Ordena por data desde (asc) — mais antigo primeiro
  const linhas = (historico || []).slice().sort((a, b) => (a.desde || '').localeCompare(b.desde || ''));
  return (
    <div onClick={onClose}
      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.4)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()}
        style={{ background: '#fff', borderRadius: 14, maxWidth: 540, width: '100%', maxHeight: '80vh', overflow: 'auto', padding: '20px 24px', boxShadow: '0 12px 40px rgba(0,0,0,.25)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <h3 style={{ margin: 0, fontSize: 16, fontWeight: 800 }}>Histórico de cargos</h3>
          <button onClick={onClose} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)' }}>
            <Icon name="close" size={14} />
          </button>
        </div>
        {linhas.length === 0 && !atual?.cargo ? (
          <div style={{ fontSize: 13, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Nenhum cargo anterior registrado. Quando você alterar o cargo atual, o anterior é salvo automaticamente aqui.</div>
        ) : (
          <div style={{ position: 'relative', paddingLeft: 24 }}>
            <div style={{ position: 'absolute', top: 4, bottom: 4, left: 8, width: 2, background: 'var(--escalab-line)' }} />
            {linhas.map(l => (
              <div key={l.id} style={{ position: 'relative', marginBottom: 14 }}>
                <div style={{ position: 'absolute', left: -22, top: 3, width: 14, height: 14, borderRadius: '50%', background: 'var(--escalab-mute)', border: '3px solid #fff' }} />
                <div style={{ fontSize: 11, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 700 }}>
                  {l.desde ? new Date(l.desde + 'T00:00:00').toLocaleDateString('pt-BR') : '—'} → {l.ate ? new Date(l.ate + 'T00:00:00').toLocaleDateString('pt-BR') : '—'}
                </div>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--escalab-ink)', marginTop: 2 }}>{l.cargo}</div>
              </div>
            ))}
            {/* Atual */}
            {atual?.cargo && (
              <div style={{ position: 'relative' }}>
                <div style={{ position: 'absolute', left: -22, top: 3, width: 14, height: 14, borderRadius: '50%', background: 'var(--escalab-brand)', border: '3px solid #fff' }} />
                <div style={{ fontSize: 11, color: 'var(--escalab-brand-deep)', textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 700 }}>
                  {atual.desde ? new Date(atual.desde + 'T00:00:00').toLocaleDateString('pt-BR') : '—'} → hoje
                </div>
                <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--escalab-brand-deep)', marginTop: 2 }}>{atual.cargo} <span style={{ fontSize: 10, fontWeight: 700, background: 'var(--escalab-brand-tint)', padding: '2px 8px', borderRadius: 999, marginLeft: 6, letterSpacing: '.06em', textTransform: 'uppercase' }}>atual</span></div>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

// ── Aba: PROJEÇÃO (CONFIDENCIAL) ─────────────────────────────────────────────
const AbaProjecao = ({ draft, setDraft }) => {
  const [editandoAtual, setEditandoAtual] = useState(false);
  const [verHistorico, setVerHistorico] = useState(false);
  const [marcoEditando, setMarcoEditando] = useState(null); // id do marco em modo edição
  const cargosCatalogo = (typeof listarCargosComStep !== 'undefined') ? listarCargosComStep() : [];

  function addCargoTimeline() {
    const novo = { id: Date.now() + '_pc', cargo: '', dataAlvo: '', realizadoEm: null, dataReal: null };
    setDraft({
      ...draft,
      projecaoCarreira: [...(draft.projecaoCarreira || []), novo],
    });
    setMarcoEditando(novo.id);
  }
  function updCargoTimeline(id, patch) {
    setDraft({ ...draft, projecaoCarreira: (draft.projecaoCarreira || []).map(p => p.id === id ? { ...p, ...patch } : p) });
  }
  function rmCargoTimeline(id) {
    setDraft({ ...draft, projecaoCarreira: (draft.projecaoCarreira || []).filter(p => p.id !== id) });
  }
  function marcarMarcoConcluido(id) {
    const hoje = new Date().toISOString().slice(0, 10);
    const dataReal = prompt('Data em que o cargo foi efetivamente alcançado (YYYY-MM-DD):', hoje) || hoje;
    updCargoTimeline(id, { realizadoEm: new Date().toISOString(), dataReal });
  }
  function desmarcarMarcoConcluido(id) {
    updCargoTimeline(id, { realizadoEm: null, dataReal: null });
  }

  // Cargo atual
  function alterarCargoAtual(novoCargo, novaData) {
    if (!novoCargo || !novaData) return;
    const histPrev = draft.historicoCargos || [];
    const novoHist = draft.cargoAtual
      ? [...histPrev, { id: Date.now() + '_hc', cargo: draft.cargoAtual, desde: draft.cargoAtualDesde || '', ate: novaData }]
      : histPrev;
    setDraft({
      ...draft,
      cargoAtual: novoCargo,
      cargoAtualDesde: novaData,
      historicoCargos: novoHist,
    });
    setEditandoAtual(false);
  }

  function addMarcoSalarial() {
    setDraft({
      ...draft,
      projecaoSalarial: [...(draft.projecaoSalarial || []), { id: Date.now() + '_ps', marco: '+6 meses', faixaMin: '', faixaMax: '' }],
    });
  }
  function updMarcoSalarial(id, patch) {
    setDraft({ ...draft, projecaoSalarial: (draft.projecaoSalarial || []).map(p => p.id === id ? { ...p, ...patch } : p) });
  }
  function rmMarcoSalarial(id) {
    setDraft({ ...draft, projecaoSalarial: (draft.projecaoSalarial || []).filter(p => p.id !== id) });
  }

  const inp = { border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '7px 10px', fontSize: 12.5, fontFamily: 'var(--font-sans)', outline: 'none', background: '#fff' };

  return (
    <div>
      {/* Faixa de aviso confidencial */}
      <FaixaAviso tone="warn">
        <strong>Área confidencial.</strong> Tudo nesta aba é visível apenas para RH e gestor — nunca para o colaborador. Confira ao compartilhar tela.
      </FaixaAviso>

      {/* Projeção de carreira (timeline) */}
      <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px', marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12, flexWrap: 'wrap', gap: 8 }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6 }}>
            Projeção de carreira <CadeadoConfidencial />
          </h3>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={() => setVerHistorico(true)}
              style={{ border: '1px solid var(--escalab-line)', background: '#fff', color: 'var(--escalab-slate)', borderRadius: 8, padding: '7px 12px', cursor: 'pointer', fontSize: 12.5, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 }}>
              <Icon name="clock" size={12} /> Histórico de cargos {(draft.historicoCargos || []).length > 0 && `(${(draft.historicoCargos || []).length})`}
            </button>
            <button onClick={addCargoTimeline}
              style={{ border: 0, background: 'var(--escalab-brand)', color: '#fff', borderRadius: 8, padding: '7px 14px', cursor: 'pointer', fontSize: 12.5, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 }}>
              <Icon name="plus" size={12} /> Adicionar marco
            </button>
          </div>
        </div>

        {/* Timeline horizontal */}
        <div style={{ overflowX: 'auto', paddingBottom: 8 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 0, minWidth: 'max-content' }}>
            {/* Marco atual (sempre primeiro) — sempre verde */}
            <div style={{ display: 'flex', alignItems: 'flex-start' }}>
              {!editandoAtual ? (
                <div onClick={() => setEditandoAtual(true)}
                  style={{ minWidth: 180, textAlign: 'center', background: 'var(--escalab-brand-tint)', border: '2px solid var(--escalab-brand)', borderRadius: 12, padding: '12px 14px', cursor: 'pointer', position: 'relative' }}
                  title="Clique para alterar o cargo atual">
                  <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--escalab-brand-deep)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Atual</div>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--escalab-brand-deep)', marginTop: 4 }}>{draft.cargoAtual || 'Cargo atual'}</div>
                  <div style={{ fontSize: 11, color: 'var(--escalab-slate)', marginTop: 2 }}>
                    {draft.cargoAtualDesde
                      ? <>desde {new Date(draft.cargoAtualDesde + 'T00:00:00').toLocaleDateString('pt-BR', { month: 'short', year: 'numeric' })}</>
                      : 'sem data registrada'}
                  </div>
                </div>
              ) : (
                <EditorCargoAtual
                  atual={draft.cargoAtual} desde={draft.cargoAtualDesde}
                  cargosCatalogo={cargosCatalogo}
                  onSalvar={alterarCargoAtual}
                  onCancelar={() => setEditandoAtual(false)}
                />
              )}
            </div>
            {(draft.projecaoCarreira || []).map((p, i) => {
              const filled = !!p.cargo;
              const editando = marcoEditando === p.id;
              const concluido = !!p.realizadoEm;
              return (
                <div key={p.id} style={{ display: 'flex', alignItems: 'flex-start' }}>
                  {/* Conector */}
                  <div style={{ width: 40, height: 2, background: filled ? 'var(--escalab-brand)' : 'var(--escalab-line)', position: 'relative', marginTop: 36 }}>
                    <div style={{ position: 'absolute', right: -1, top: -4, width: 0, height: 0, borderTop: '5px solid transparent', borderBottom: '5px solid transparent', borderLeft: '8px solid ' + (filled ? 'var(--escalab-brand)' : 'var(--escalab-line)') }} />
                  </div>
                  {/* Card */}
                  {(!filled || editando) ? (
                    /* Modo edição: branco, com select + data */
                    <div style={{ minWidth: 190, background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '12px 14px', position: 'relative' }}>
                      <button onClick={() => rmCargoTimeline(p.id)} title="Remover"
                        style={{ position: 'absolute', top: 6, right: 6, border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 2 }}>
                        <Icon name="close" size={11} />
                      </button>
                      <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--escalab-slate)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Marco {i + 1}</div>
                      <select value={p.cargo} onChange={e => updCargoTimeline(p.id, { cargo: e.target.value })}
                        style={{ ...inp, width: '100%', marginTop: 6, fontWeight: 700 }}>
                        <option value="">· selecione um cargo ·</option>
                        {cargosCatalogo.map(c => <option key={c.value} value={c.value}>{c.value}</option>)}
                      </select>
                      <input type="date" value={p.dataAlvo || ''} onChange={e => updCargoTimeline(p.id, { dataAlvo: e.target.value })}
                        style={{ ...inp, width: '100%', marginTop: 6 }} />
                      {editando && filled && (
                        <button onClick={() => setMarcoEditando(null)}
                          style={{ marginTop: 8, border: '1px solid var(--escalab-brand)', background: 'var(--escalab-brand-tint)', color: 'var(--escalab-brand-deep)', borderRadius: 7, padding: '5px 10px', cursor: 'pointer', fontSize: 11, fontWeight: 700, width: '100%' }}>
                          OK · fixar
                        </button>
                      )}
                    </div>
                  ) : (
                    /* Modo fixo: VERDE como o atual, clicável pra editar */
                    <div style={{
                      minWidth: 180, textAlign: 'center',
                      background: concluido ? '#D1FADF' : 'var(--escalab-brand-tint)',
                      border: '2px solid ' + (concluido ? '#00836B' : 'var(--escalab-brand)'),
                      borderRadius: 12, padding: '12px 14px', position: 'relative',
                    }}>
                      <div style={{ position: 'absolute', top: 4, right: 4, display: 'flex', gap: 2 }}>
                        <button onClick={() => setMarcoEditando(p.id)} title="Editar marco"
                          style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-brand-deep)', padding: 2 }}>
                          <Icon name="edit" size={11} />
                        </button>
                        <button onClick={() => rmCargoTimeline(p.id)} title="Remover marco"
                          style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 2 }}>
                          <Icon name="close" size={11} />
                        </button>
                      </div>
                      <div style={{ fontSize: 10, fontWeight: 700, color: concluido ? '#005E4D' : 'var(--escalab-brand-deep)', textTransform: 'uppercase', letterSpacing: '.06em' }}>
                        Marco {i + 1}{concluido && ' · concluído'}
                      </div>
                      <div style={{ fontSize: 13.5, fontWeight: 700, color: concluido ? '#005E4D' : 'var(--escalab-brand-deep)', marginTop: 4 }}>{p.cargo}</div>
                      {p.dataAlvo && (
                        <div style={{ fontSize: 11, color: 'var(--escalab-slate)', marginTop: 2 }}>
                          alvo: {new Date(p.dataAlvo + 'T00:00:00').toLocaleDateString('pt-BR', { month: 'short', year: 'numeric' })}
                        </div>
                      )}
                      {concluido && p.dataReal && (
                        <div style={{ fontSize: 11, color: '#005E4D', marginTop: 2, fontWeight: 700 }}>
                          real: {new Date(p.dataReal + 'T00:00:00').toLocaleDateString('pt-BR', { month: 'short', year: 'numeric' })}
                        </div>
                      )}
                      <button onClick={() => concluido ? desmarcarMarcoConcluido(p.id) : marcarMarcoConcluido(p.id)}
                        style={{ marginTop: 8, border: '1px solid ' + (concluido ? '#00836B' : 'var(--escalab-brand)'), background: '#fff', color: concluido ? '#00836B' : 'var(--escalab-brand-deep)', borderRadius: 7, padding: '4px 10px', cursor: 'pointer', fontSize: 10.5, fontWeight: 700, width: '100%' }}>
                        {concluido ? '↺ Desmarcar' : '✓ Marcar realizado'}
                      </button>
                    </div>
                  )}
                </div>
              );
            })}
            {(draft.projecaoCarreira || []).length === 0 && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--escalab-mute)', fontSize: 12.5, fontStyle: 'italic', padding: '0 16px' }}>
                <Icon name="chev_right" size={14} />
                Nenhum marco projetado ainda — clique "+ Adicionar marco"
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Modal histórico de cargos */}
      {verHistorico && (
        <HistoricoCargosModal
          historico={draft.historicoCargos || []}
          atual={{ cargo: draft.cargoAtual, desde: draft.cargoAtualDesde }}
          onClose={() => setVerHistorico(false)}
        />
      )}

      {/* Projeção salarial (tabela) */}
      <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6 }}>
            Projeção salarial <CadeadoConfidencial />
          </h3>
          <button onClick={addMarcoSalarial}
            style={{ border: 0, background: 'var(--escalab-brand)', color: '#fff', borderRadius: 8, padding: '7px 14px', cursor: 'pointer', fontSize: 12.5, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 }}>
            <Icon name="plus" size={12} /> Adicionar marco
          </button>
        </div>
        {(draft.projecaoSalarial || []).length === 0 ? (
          <EmptyState
            icon="trophy"
            titulo="Sem projeção salarial"
            descricao="Adicione marcos como '+6 meses', '+12 meses', 'Próximo cargo' e defina faixas (mín-máx) projetadas. Tudo confidencial."
            acao={<button onClick={addMarcoSalarial} style={{ border: 0, background: 'var(--escalab-brand)', color: '#fff', borderRadius: 9, padding: '8px 16px', cursor: 'pointer', fontSize: 13, fontWeight: 600 }}>+ Primeiro marco</button>}
          />
        ) : (
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, minWidth: 520 }}>
              <thead>
                <tr style={{ background: 'var(--escalab-paper)' }}>
                  <th style={{ textAlign: 'left', padding: '10px 12px', fontSize: 11, fontWeight: 700, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em', width: 40 }}></th>
                  <th style={{ textAlign: 'left', padding: '10px 12px', fontSize: 11, fontWeight: 700, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Marco</th>
                  <th style={{ textAlign: 'left', padding: '10px 12px', fontSize: 11, fontWeight: 700, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Faixa mín. (R$)</th>
                  <th style={{ textAlign: 'left', padding: '10px 12px', fontSize: 11, fontWeight: 700, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Faixa máx. (R$)</th>
                  <th style={{ width: 40 }}></th>
                </tr>
              </thead>
              <tbody>
                {(draft.projecaoSalarial || []).map(p => (
                  <tr key={p.id} style={{ borderBottom: '1px solid var(--escalab-line)' }}>
                    <td style={{ padding: '8px 12px', textAlign: 'center' }}>
                      <CadeadoConfidencial size={11} />
                    </td>
                    <td style={{ padding: '8px 12px' }}>
                      <input value={p.marco} onChange={e => updMarcoSalarial(p.id, { marco: e.target.value })}
                        placeholder="+12 meses" style={{ ...inp, width: '100%' }} />
                    </td>
                    <td style={{ padding: '8px 12px' }}>
                      <input value={p.faixaMin} onChange={e => updMarcoSalarial(p.id, { faixaMin: e.target.value })}
                        placeholder="0,00" style={{ ...inp, width: '100%' }} />
                    </td>
                    <td style={{ padding: '8px 12px' }}>
                      <input value={p.faixaMax} onChange={e => updMarcoSalarial(p.id, { faixaMax: e.target.value })}
                        placeholder="0,00" style={{ ...inp, width: '100%' }} />
                    </td>
                    <td style={{ padding: '8px 12px', textAlign: 'center' }}>
                      <button onClick={() => rmMarcoSalarial(p.id)} title="Remover" style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 2 }}>
                        <Icon name="close" size={13} />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
};

// ── Aba: HISTÓRICO ───────────────────────────────────────────────────────────
const AbaHistorico = ({ pdiId }) => {
  const eventos = getHistoricoPDI(pdiId);
  return (
    <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px' }}>
      <h3 style={{ margin: '0 0 4px', fontSize: 15, fontWeight: 700 }}>Histórico de alterações</h3>
      <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginBottom: 14 }}>Registro automático e somente leitura.</div>

      {eventos.length === 0 ? (
        <EmptyState
          icon="clock"
          titulo="Nenhum evento registrado ainda"
          descricao="Toda alteração feita no PDI aparece aqui automaticamente — quem editou, quando e o que mudou."
        />
      ) : (
        <div style={{ position: 'relative', paddingLeft: 24 }}>
          <div style={{ position: 'absolute', top: 4, bottom: 4, left: 8, width: 2, background: 'var(--escalab-line)' }} />
          {eventos.map((e, i) => (
            <div key={e.id} style={{ position: 'relative', marginBottom: 14 }}>
              <div style={{ position: 'absolute', left: -22, top: 3, width: 14, height: 14, borderRadius: '50%', background: 'var(--escalab-brand)', border: '3px solid var(--escalab-paper)' }} />
              <div style={{ fontSize: 11, color: 'var(--escalab-mute)', textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 700 }}>
                {new Date(e.data).toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
              </div>
              <div style={{ fontSize: 13, color: 'var(--escalab-ink)', marginTop: 2 }}>
                <strong>{e.autorNome || 'Sistema'}</strong> {e.acao}
                {e.detalhes?.campos && (
                  <span style={{ color: 'var(--escalab-slate)' }}> · campos: {e.detalhes.campos.join(', ')}</span>
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ═══════════════════════════════════════════════════════════════
// MAIN · ScreenPDI
// ═══════════════════════════════════════════════════════════════
const ScreenPDI = ({ user }) => {
  const [pdis, setPdis] = useState(() => getPDIs());
  const [pdiAberto, setPdiAberto] = useState(null);
  const [versao, setVersao] = useState(0); // força re-render quando lista atualiza
  // Gestor: modo de visualizacao - 'meu' (PDI proprio, visao colab) | 'lider' (PDI do lider) | 'time' (painel do time)
  const [modoGestor, setModoGestor] = useState('meu');

  // Visibilidade
  const colabsTodos = (typeof COLABORADORES !== 'undefined') ? COLABORADORES : [];
  const colaboradoresVisiveis = useMemo(() => {
    if (user?.perfil === 'admin') return colabsTodos;
    if (user?.perfil === 'gestor') {
      // Gestor vê PDI dos liderados (gestorNome bate com o nome dele) + o próprio PDI
      const meus = colabsTodos.filter(c => c.gestorNome === user.nome);
      const eu   = colabsTodos.find(c => c.id === user.id);
      return [...(eu ? [eu] : []), ...meus]
        .filter((c, i, arr) => arr.findIndex(x => x.id === c.id) === i);
    }
    return [];
  }, [user, colabsTodos.length]);

  // Helper para renderizar a visao colab de um PDI (usado por colaborador E por gestor pro proprio)
  function renderPDIColab(meuPDI, eu) {
    if (!meuPDI) {
      return (
        <EmptyState
          icon="trend_up"
          titulo="Seu PDI ainda não está disponível"
          descricao="O RH está montando seu Plano de Desenvolvimento Individual. Assim que ele for criado, ele aparece aqui pra você acompanhar."
        />
      );
    }
    return (
      <PDIIndividual
        key={meuPDI.id + '_colab_' + versao}
        pdi={meuPDI} colaborador={eu} user={user}
        viewMode="colab"
        onVoltar={() => {}}
        onAtualizar={pdiAtualizado => {
          const arr = pdis.map(p => p.id === pdiAtualizado.id ? pdiAtualizado : p);
          setPdis(arr); salvarPDIs(arr);
          setVersao(v => v + 1);
        }}
      />
    );
  }

  // VISÃO DO COLABORADOR
  if (user?.perfil === 'colaborador') {
    const meuPDI = pdis.find(p => p.colaboradorId === user.id);
    const eu = colabsTodos.find(c => c.id === user.id) || { nome: user.nome, cargo: '·', setor: '·', cor: '#6B7280' };
    return renderPDIColab(meuPDI, eu);
  }

  // Bloqueio para outros perfis (não admin, gestor ou colaborador)
  if (user?.perfil !== 'admin' && user?.perfil !== 'gestor') {
    return (
      <EmptyState
        icon="lock"
        titulo="Acesso restrito"
        descricao="O módulo PDI é visível apenas para RH, gestores e colaboradores com PDI ativo."
      />
    );
  }

  function abrirPDI(pdi) { setPdiAberto(pdi); }
  function criarPDI(colab) {
    const novo = novoPDI(colab.id);
    // Pré-popula cargoAtual com o cargo do COLABORADORES (RH pode refinar com o step depois)
    if (colab.cargo) { novo.cargoAtual = colab.cargo; }
    const arr = [...pdis, novo];
    setPdis(arr);
    salvarPDIs(arr);
    registrarHistorico(novo.id, user.id, user.nome, 'criou', { colaborador: colab.nome });
    setPdiAberto(novo);
  }
  function atualizarPDI(pdiAtualizado) {
    const arr = pdis.map(p => p.id === pdiAtualizado.id ? pdiAtualizado : p);
    setPdis(arr);
    salvarPDIs(arr);
    setPdiAberto(pdiAtualizado);
    setVersao(v => v + 1);
  }

  if (pdiAberto) {
    const colab = colabsTodos.find(c => c.id === pdiAberto.colaboradorId) || { nome: 'Colaborador', cargo: '·', setor: '·', cor: '#6B7280' };
    return (
      <PDIIndividual
        key={pdiAberto.id + '_' + versao}
        pdi={pdiAberto} colaborador={colab} user={user}
        onVoltar={() => { setPdiAberto(null); setPdis(getPDIs()); }}
        onAtualizar={atualizarPDI}
      />
    );
  }

  // VISÃO DO GESTOR · default = meu PDI (igual colab) com switcher pra PDI do líder e PDIs do time
  if (user?.perfil === 'gestor') {
    const eu = colabsTodos.find(c => c.id === user.id) || { nome: user.nome, cargo: '·', setor: '·', cor: '#6B7280' };
    const meuPDI = pdis.find(p => p.colaboradorId === user.id);
    const meuLider = eu.gestorNome ? colabsTodos.find(c => c.nome === eu.gestorNome) : null;
    const pdiLider = meuLider ? pdis.find(p => p.colaboradorId === meuLider.id) : null;

    const SwitcherGestor = () => (
      <div style={{ display:'flex', gap:8, marginBottom:18, flexWrap:'wrap' }}>
        <button onClick={() => setModoGestor('meu')}
          style={{ border:`2px solid ${modoGestor==='meu'?'var(--escalab-brand)':'var(--escalab-line)'}`, background:modoGestor==='meu'?'var(--escalab-brand-tint)':'#fff', color:modoGestor==='meu'?'var(--escalab-brand-deep)':'var(--escalab-slate)', borderRadius:9, padding:'8px 14px', cursor:'pointer', fontSize:13, fontWeight:modoGestor==='meu'?700:600, fontFamily:'var(--font-sans)', display:'flex', alignItems:'center', gap:6 }}>
          <Icon name="user" size={12} /> Meu PDI
        </button>
        {meuLider && (
          <button onClick={() => setModoGestor('lider')}
            style={{ border:`2px solid ${modoGestor==='lider'?'var(--escalab-brand)':'var(--escalab-line)'}`, background:modoGestor==='lider'?'var(--escalab-brand-tint)':'#fff', color:modoGestor==='lider'?'var(--escalab-brand-deep)':'var(--escalab-slate)', borderRadius:9, padding:'8px 14px', cursor:'pointer', fontSize:13, fontWeight:modoGestor==='lider'?700:600, fontFamily:'var(--font-sans)', display:'flex', alignItems:'center', gap:6 }}>
            <Icon name="trend_up" size={12} /> PDI do meu líder · {meuLider.nome.split(' ')[0]}
          </button>
        )}
        <button onClick={() => setModoGestor('time')}
          style={{ border:`2px solid ${modoGestor==='time'?'var(--escalab-brand)':'var(--escalab-line)'}`, background:modoGestor==='time'?'var(--escalab-brand-tint)':'#fff', color:modoGestor==='time'?'var(--escalab-brand-deep)':'var(--escalab-slate)', borderRadius:9, padding:'8px 14px', cursor:'pointer', fontSize:13, fontWeight:modoGestor==='time'?700:600, fontFamily:'var(--font-sans)', display:'flex', alignItems:'center', gap:6 }}>
          <Icon name="users" size={12} /> PDIs do meu time
        </button>
      </div>
    );

    if (modoGestor === 'meu') {
      return (
        <div>
          <SwitcherGestor />
          {renderPDIColab(meuPDI, eu)}
        </div>
      );
    }
    if (modoGestor === 'lider' && meuLider) {
      if (!pdiLider) {
        return (
          <div>
            <SwitcherGestor />
            <EmptyState
              icon="trend_up"
              titulo={`PDI de ${meuLider.nome.split(' ')[0]} ainda não foi criado`}
              descricao="O RH ainda não montou o PDI do seu líder direto. Quando criar, você poderá visualizar e editar por aqui."
            />
          </div>
        );
      }
      return (
        <div>
          <SwitcherGestor />
          <PDIIndividual
            key={pdiLider.id + '_lider_' + versao}
            pdi={pdiLider} colaborador={meuLider} user={user}
            onVoltar={() => setModoGestor('meu')}
            onAtualizar={atualizarPDI}
          />
        </div>
      );
    }
    // modoGestor === 'time'
    return (
      <div>
        <SwitcherGestor />
        <PainelPDIs
          key={'painel_' + versao}
          user={user}
          colaboradoresVisiveis={colaboradoresVisiveis.filter(c => c.id !== user.id)}
          pdis={pdis}
          onAbrirPDI={abrirPDI}
          onCriarPDI={criarPDI}
        />
      </div>
    );
  }

  return (
    <PainelPDIs
      key={'painel_' + versao}
      user={user}
      colaboradoresVisiveis={colaboradoresVisiveis}
      pdis={pdis}
      onAbrirPDI={abrirPDI}
      onCriarPDI={criarPDI}
    />
  );
};

// ── Responsividade mobile (estilos auxiliares) ───────────────────────────────
if (typeof document !== 'undefined' && !document.getElementById('pdi-mobile-css')) {
  const s = document.createElement('style');
  s.id = 'pdi-mobile-css';
  s.textContent = `
    @media (max-width: 720px) {
      .pdi-grid2 { grid-template-columns: 1fr !important; }
      .pdi-comp-row { grid-template-columns: 1fr 1fr !important; }
      .pdi-comp-row > *:nth-child(1) { grid-column: 1 / -1; }
      .pdi-acao-row { grid-template-columns: 100px 1fr 36px 36px !important; }
      .pdi-acao-row > *:nth-child(3), .pdi-acao-row > *:nth-child(4) { grid-column: 1 / -1; }
    }
  `;
  document.head.appendChild(s);
}