// ═══════════════════════════════════════════════════════════════
// SCREEN · Painel de Administração
// ═══════════════════════════════════════════════════════════════

// ── Painel: Intersetorial (programas + modo) ───────────────────────────────

const PainelIntersetorial = ({ onSucesso }) => {
  const [modo, setModo] = useState(() => getModoIntersetorial());
  const [programas, setProgramas] = useState(() => getProgramasInter());
  const [modalNovo, setModalNovo] = useState(false);
  const [novo, setNovo] = useState({ nome: '', descricao: '', setores: [], prazoFim: '' });

  function alterarModo(m) {
    setModo(m); setModoIntersetorial(m);
    onSucesso?.(`Modo alterado para "${m === 'livre' ? 'Sempre liberado' : 'Por programa'}".`);
  }
  function toggleSetor(s) {
    setNovo(n => ({ ...n, setores: n.setores.includes(s) ? n.setores.filter(x => x !== s) : [...n.setores, s] }));
  }
  function salvarNovo() {
    if (!novo.nome.trim() || novo.setores.length < 2) return;
    const prog = { id: 'PRG' + Date.now().toString(36).toUpperCase(), ...novo, ativo: true, criadoEm: new Date().toISOString() };
    const arr = salvarProgramaInter(prog);
    setProgramas(arr); setModalNovo(false);
    setNovo({ nome: '', descricao: '', setores: [], prazoFim: '' });
    onSucesso?.('Programa criado.');
  }
  function alternarAtivo(id) {
    const p = programas.find(x => x.id === id);
    if (!p) return;
    const arr = salvarProgramaInter({ ...p, ativo: !p.ativo });
    setProgramas(arr);
  }
  function remover(id) {
    if (!confirm('Remover este programa?')) return;
    const arr = removerProgramaInter(id);
    setProgramas(arr);
  }

  return (
    <div style={{ animation: 'fadeIn .2s' }}>
      <Banner tone="info" style={{ marginBottom: 16 }}>
        Configure como a <strong>Avaliação Intersetorial</strong> funciona. No modo <em>livre</em>, todos os setores podem avaliar uns aos outros a qualquer momento. No modo <em>por programa</em>, só os setores envolvidos em programas/projetos ativos conseguem se avaliar.
      </Banner>

      <Card pad={20} style={{ marginBottom: 18 }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 12 }}>Modo de liberação</div>
        <div style={{ display: 'flex', gap: 10 }}>
          {[
            { id: 'livre', titulo: 'Sempre liberado', desc: 'Avaliação intersetorial fica disponível o tempo todo, entre todos os setores.' },
            { id: 'programa', titulo: 'Por programa / projeto', desc: 'GC define os programas (setores envolvidos + prazo). Só estes liberam a avaliação.' },
          ].map(opt => {
            const ativo = modo === opt.id;
            return (
              <button key={opt.id} onClick={() => alterarModo(opt.id)} style={{
                flex: 1, border: `2px solid ${ativo ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`,
                background: ativo ? 'var(--escalab-brand-tint)' : '#fff',
                borderRadius: 10, padding: '14px 16px', cursor: 'pointer', textAlign: 'left',
                fontFamily: 'var(--font-sans)',
              }}>
                <div style={{ fontSize: 13.5, fontWeight: 700, color: ativo ? 'var(--escalab-brand-deep)' : 'var(--escalab-ink)', marginBottom: 4 }}>{opt.titulo}</div>
                <div style={{ fontSize: 12, color: 'var(--escalab-mute)', lineHeight: 1.45 }}>{opt.desc}</div>
              </button>
            );
          })}
        </div>
      </Card>

      {modo === 'programa' && (
        <Card pad={22}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14, flexWrap: 'wrap', gap: 10 }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>Programas / projetos intersetoriais</div>
            <Button variant="primary" size="sm" icon="plus" onClick={() => setModalNovo(true)}>Novo programa</Button>
          </div>
          {programas.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '32px', color: 'var(--escalab-mute)', border: '2px dashed var(--escalab-line)', borderRadius: 10, fontSize: 13 }}>
              Nenhum programa criado. Crie um para liberar a avaliação intersetorial.
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {programas.map(p => (
                <div key={p.id} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '12px 14px', background: p.ativo ? '#fff' : 'var(--escalab-paper)', border: '1px solid var(--escalab-line)', borderRadius: 10 }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                      <div style={{ fontSize: 14, fontWeight: 700, color: p.ativo ? 'var(--escalab-ink)' : 'var(--escalab-mute)' }}>{p.nome}</div>
                      {p.ativo ? <Tag tone="success" size="xs">Ativo</Tag> : <Tag tone="neutral" size="xs">Pausado</Tag>}
                    </div>
                    {p.descricao && <div style={{ fontSize: 12.5, color: 'var(--escalab-slate)', marginBottom: 6, lineHeight: 1.5 }}>{p.descricao}</div>}
                    <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
                      {p.setores.map(s => <span key={s} style={{ fontSize: 11, fontWeight: 600, background: 'var(--escalab-brand-tint)', color: 'var(--escalab-brand-deep)', borderRadius: 5, padding: '2px 7px' }}>{s}</span>)}
                    </div>
                    {p.prazoFim && <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 6 }}><Icon name="calendar" size={11} /> Vai até {p.prazoFim.split('-').reverse().join('/')}</div>}
                  </div>
                  <div style={{ display: 'flex', gap: 6 }}>
                    <Button variant="ghost" size="sm" onClick={() => alternarAtivo(p.id)}>{p.ativo ? 'Pausar' : 'Ativar'}</Button>
                    <Button variant="ghost" size="sm" icon="close" onClick={() => remover(p.id)} />
                  </div>
                </div>
              ))}
            </div>
          )}
        </Card>
      )}

      {modalNovo && (
        <Modal open={true} onClose={() => setModalNovo(false)} title="Novo programa intersetorial"
          footer={<>
            <Button variant="outline" onClick={() => setModalNovo(false)}>Cancelar</Button>
            <Button variant="primary" icon="check" onClick={salvarNovo} disabled={!novo.nome.trim() || novo.setores.length < 2}>Criar programa</Button>
          </>}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Field label="Nome do programa / projeto">
              <Input value={novo.nome} onChange={v => setNovo(n => ({ ...n, nome: v }))} placeholder="Ex: Projeto Lighthouse · Vendas × PMO" />
            </Field>
            <Field label="Descrição (opcional)">
              <textarea value={novo.descricao} onChange={e => setNovo(n => ({ ...n, descricao: e.target.value }))} rows={2}
                placeholder="Contexto do projeto, objetivos, expectativas…"
                style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
            </Field>
            <Field label="Setores envolvidos" hint={`Selecione 2 ou mais (${novo.setores.length} selecionados)`}>
              <div style={{ maxHeight: 180, overflowY: 'auto', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: 6 }}>
                {SETORES.map(s => {
                  const sel = novo.setores.includes(s);
                  return (
                    <label key={s} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', cursor: 'pointer', background: sel ? 'var(--escalab-brand-tint)' : 'transparent', borderRadius: 6 }}>
                      <input type="checkbox" checked={sel} onChange={() => toggleSetor(s)} />
                      <span style={{ fontSize: 13, color: sel ? 'var(--escalab-brand-deep)' : 'var(--escalab-ink)', fontWeight: sel ? 600 : 400 }}>{s}</span>
                    </label>
                  );
                })}
              </div>
            </Field>
            <Field label="Prazo final (opcional)" hint="Após esta data, o programa fica indisponível">
              <input type="date" value={novo.prazoFim} onChange={e => setNovo(n => ({ ...n, prazoFim: e.target.value }))}
                style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0 }} />
            </Field>
          </div>
        </Modal>
      )}
    </div>
  );
};

// ── Painel: Permissões de Gestor ────────────────────────────────────────────
const PERMS_LABELS = {
  verAvaliacoes:       { label:'Avaliações',           desc:'Notas e respostas da AVD do liderado' },
  verFeedbacks:        { label:'Feedbacks',            desc:'Histórico de feedbacks recebidos' },
  verDadosOrg:         { label:'Dados Organizacionais',desc:'Cargo, gestor, departamento, salário…' },
  verSalario:          { label:'Salário Bruto',        desc:'Apenas o valor da remuneração' },
  verDadosPessoais:    { label:'Dados Pessoais',       desc:'CPF, RG, conta bancária, documentos' },
  verHistorico:        { label:'Histórico',            desc:'Movimentação profissional e conquistas' },
  verSobreMim:         { label:'Sobre mim',            desc:'Texto livre escrito pelo colaborador' },
  verAdmissaoTudo:     { label:'Admissão · todos os setores',     desc:'Por padrão vê só admissões do próprio setor. Libere para ver o kanban completo.' },
  verRecrutamentoTudo: { label:'Recrutamento · todos os processos', desc:'Por padrão só vê vagas onde é responsável. Libere para ver todos os processos.' },
};

// Agrupa as permissoes em 2 secoes para o modal (Dados do liderado vs Escopo de abas).
const PERMS_GRUPOS = [
  {
    id: 'dados',
    titulo: 'Dados do liderado',
    legenda: 'O que o gestor vê no perfil de cada pessoa do time.',
    chaves: ['verAvaliacoes','verFeedbacks','verDadosOrg','verSalario','verDadosPessoais','verHistorico','verSobreMim'],
  },
  {
    id: 'abas',
    titulo: 'Escopo das abas',
    legenda: 'Por padrão o gestor só vê do próprio setor / vagas em que é responsável. Libere para ampliar.',
    chaves: ['verAdmissaoTudo','verRecrutamentoTudo'],
  },
];

const PainelPermissoesGestor = ({ onSucesso }) => {
  const gestores = COLABORADORES.filter(c => c.perfil === 'gestor');
  const [editando, setEditando] = useState(null);
  const [draft, setDraft] = useState({});

  function iniciar(g) {
    setDraft(getGestorPerms(g.id));
    setEditando(g.id);
  }
  function salvar() {
    salvarGestorPerms(editando, draft);
    const g = gestores.find(x => x.id === editando);
    onSucesso(`Permissões de ${g?.nome.split(' ')[0]} atualizadas.`);
    setEditando(null);
  }

  return (
    <div style={{ animation:'fadeIn .2s' }}>
      <div style={{ fontSize: 13, color: 'var(--escalab-mute)', marginBottom: 16, background: 'var(--escalab-paper)', padding: '10px 14px', borderRadius: 8, borderLeft: '3px solid var(--escalab-brand)' }}>
        Defina o que cada gestor pode visualizar no perfil dos seus liderados. Por padrão, o gestor <strong>não vê</strong> dados pessoais, organizacionais e salário.
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {gestores.map(g => {
          const perms = getGestorPerms(g.id);
          const liberadasDados = PERMS_GRUPOS[0].chaves.filter(k => perms[k]).length;
          const liberadasAbas  = PERMS_GRUPOS[1].chaves.filter(k => perms[k]).length;
          return (
            <Card key={g.id} pad={16}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <Avatar nome={g.nome} cor={g.cor} iniciais={g.iniciais} size={36} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{g.nome}</div>
                  <div style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>{g.cargo} · {g.setor}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--escalab-slate)', marginTop: 4, display:'flex', gap:10, flexWrap:'wrap' }}>
                    <span>Dados: <strong style={{ color: 'var(--escalab-brand-deep)' }}>{liberadasDados}/{PERMS_GRUPOS[0].chaves.length}</strong></span>
                    <span style={{ color:'var(--escalab-line)' }}>·</span>
                    <span>Abas: <strong style={{ color: 'var(--escalab-brand-deep)' }}>{liberadasAbas}/{PERMS_GRUPOS[1].chaves.length}</strong></span>
                  </div>
                </div>
                <Button size="sm" variant="outline" icon="settings" onClick={() => iniciar(g)}>Configurar</Button>
              </div>
            </Card>
          );
        })}
      </div>

      {editando && (
        <div onClick={() => setEditando(null)} className="modal-overlay" style={{ position:'fixed', inset:0, background:'rgba(10,15,18,.55)', backdropFilter:'blur(4px)', zIndex:1000, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
          <div onClick={e => e.stopPropagation()} style={{ background:'#fff', borderRadius:14, width:'100%', maxWidth:560, maxHeight:'92vh', overflow:'auto', padding:'20px 22px', animation:'popIn .22s var(--ease-out)' }}>
            <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 4 }}>Permissões · {gestores.find(g => g.id === editando)?.nome.split(' ').slice(0, 2).join(' ')}</div>
            <div style={{ fontSize: 12, color: 'var(--escalab-mute)', marginBottom: 18 }}>Configure por seção. Por padrão, gestor não vê dados sensíveis e tem escopo restrito ao próprio setor.</div>
            {PERMS_GRUPOS.map(grupo => (
              <div key={grupo.id} style={{ marginBottom: 18 }}>
                <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 4 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--escalab-brand-deep)' }}>{grupo.titulo}</div>
                  <div style={{ fontSize: 11, color:'var(--escalab-mute)' }}>{grupo.chaves.filter(k => draft[k]).length} de {grupo.chaves.length}</div>
                </div>
                <div style={{ fontSize: 11.5, color:'var(--escalab-mute)', marginBottom: 8 }}>{grupo.legenda}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                  {grupo.chaves.map(k => {
                    const info = PERMS_LABELS[k];
                    return (
                      <label key={k} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '10px 12px', border: `1px solid ${draft[k] ? 'var(--escalab-brand-soft)' : 'var(--escalab-line)'}`, background: draft[k] ? 'var(--escalab-brand-tint)' : '#fff', borderRadius: 9, cursor: 'pointer' }}>
                        <input type="checkbox" checked={!!draft[k]} onChange={e => setDraft(d => ({ ...d, [k]: e.target.checked }))} style={{ marginTop: 3 }} />
                        <div>
                          <div style={{ fontSize: 13, fontWeight: 600, color: draft[k] ? 'var(--escalab-brand-deep)' : 'var(--escalab-ink)' }}>{info.label}</div>
                          <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 1 }}>{info.desc}</div>
                        </div>
                      </label>
                    );
                  })}
                </div>
              </div>
            ))}
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 14 }}>
              <Button variant="outline" onClick={() => setEditando(null)}>Cancelar</Button>
              <Button variant="primary" onClick={salvar}>Salvar permissões</Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// ── Painel: Catálogo de Cargos e Departamentos ────────────────────────────────
const PainelCatalogoCargos = ({ onSucesso }) => {
  const [cargos, setCargos] = useState(() => (typeof getCargosPadrao === 'function' ? getCargosPadrao() : []));
  const [deptos, setDeptos] = useState(() => (typeof getDeptosPadrao === 'function' ? getDeptosPadrao() : []));
  const [novoCargo, setNovoCargo] = useState('');
  const [novoDepto, setNovoDepto] = useState('');

  function addCargo() {
    const t = novoCargo.trim();
    if (!t || cargos.includes(t)) return;
    const arr = [...cargos, t];
    setCargos(arr); salvarCargosPadrao(arr); setNovoCargo('');
    onSucesso?.(`Cargo "${t}" adicionado ao catálogo.`);
  }
  function removerCargo(c) {
    if (!confirm(`Remover "${c}" do catálogo de cargos? Colaboradores já cadastrados com esse cargo continuam mantendo-o, mas ele não aparece mais na lista de seleção.`)) return;
    const arr = cargos.filter(x => x !== c);
    setCargos(arr); salvarCargosPadrao(arr);
    onSucesso?.(`Cargo removido.`);
  }
  function addDepto() {
    const t = novoDepto.trim();
    if (!t || deptos.includes(t)) return;
    const arr = [...deptos, t];
    setDeptos(arr); salvarDeptosPadrao(arr); setNovoDepto('');
    onSucesso?.(`Departamento "${t}" adicionado.`);
  }
  function removerDepto(d) {
    if (!confirm(`Remover "${d}" do catálogo de departamentos?`)) return;
    const arr = deptos.filter(x => x !== d);
    setDeptos(arr); salvarDeptosPadrao(arr);
    onSucesso?.(`Departamento removido.`);
  }

  const inp = { border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '8px 12px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 'none', boxSizing: 'border-box', flex: 1 };

  return (
    <div style={{ animation: 'fadeIn .2s' }}>
      <Banner tone="info" style={{ marginBottom: 18 }}>
        Padronize os <strong>cargos</strong> e <strong>departamentos</strong> usados em "Dados Organizacionais" de cada colaborador. Editar aqui faz com que os menus de seleção (dropdown) na ficha de cada pessoa fiquem sempre alinhados.
      </Banner>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
        {/* Cargos */}
        <Card pad={20}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <div style={{ fontSize: 14, fontWeight: 700 }}>Cargos padronizados</div>
            <Tag tone="brand" size="xs">{cargos.length} cargo(s)</Tag>
          </div>
          <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
            <input value={novoCargo} onChange={e => setNovoCargo(e.target.value)} onKeyDown={e => e.key === 'Enter' && addCargo()} placeholder="Ex: Analista IV" style={inp} />
            <Button variant="primary" size="sm" onClick={addCargo} disabled={!novoCargo.trim()}>+ Adicionar</Button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxHeight: 460, overflowY: 'auto' }}>
            {cargos.map(c => (
              <div key={c} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--escalab-paper)', borderRadius: 8, border: '1px solid var(--escalab-line)' }}>
                <span style={{ fontSize: 13 }}>{c}</span>
                <button onClick={() => removerCargo(c)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', fontSize: 12, padding: '2px 8px', fontFamily: 'var(--font-sans)', fontWeight: 600 }}>Remover</button>
              </div>
            ))}
            {cargos.length === 0 && <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Nenhum cargo cadastrado.</div>}
          </div>
        </Card>

        {/* Departamentos */}
        <Card pad={20}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <div style={{ fontSize: 14, fontWeight: 700 }}>Departamentos / Setores</div>
            <Tag tone="brand" size="xs">{deptos.length} depto(s)</Tag>
          </div>
          <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
            <input value={novoDepto} onChange={e => setNovoDepto(e.target.value)} onKeyDown={e => e.key === 'Enter' && addDepto()} placeholder="Ex: Compliance" style={inp} />
            <Button variant="primary" size="sm" onClick={addDepto} disabled={!novoDepto.trim()}>+ Adicionar</Button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxHeight: 460, overflowY: 'auto' }}>
            {deptos.map(d => (
              <div key={d} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--escalab-paper)', borderRadius: 8, border: '1px solid var(--escalab-line)' }}>
                <span style={{ fontSize: 13 }}>{d}</span>
                <button onClick={() => removerDepto(d)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', fontSize: 12, padding: '2px 8px', fontFamily: 'var(--font-sans)', fontWeight: 600 }}>Remover</button>
              </div>
            ))}
            {deptos.length === 0 && <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Nenhum departamento cadastrado.</div>}
          </div>
        </Card>
      </div>
    </div>
  );
};

// ── Painel: Tabela Salarial + Organograma (referência oficial) ───────────────
// Fonte: Documentos Treinamento/Organograma/[Estrutura Organizacional] Organograma, Cargos e Salarios.pdf
// 15 niveis + 4 areas / 14 setores.
//
// SEGURANCA: Os VALORES (min/max) FICAM NO SUPABASE (tabela_salarial · RLS admin-only),
// NUNCA no bundle JS publico. Aqui mantemos so a estrutura nao-sensivel (cargo + horas)
// como fallback de UI. Valores carregados em runtime via supabaseClient.from('tabela_salarial').
const TABELA_SALARIAL_PDF = [
  { cargo: 'Estagiário I',            horas: 30 },
  { cargo: 'Técnico/Assistente I',    horas: 20 },
  { cargo: 'Técnico/Assistente II',   horas: 30 },
  { cargo: 'Técnico/Assistente III',  horas: 40 },
  { cargo: 'Analista I',              horas: 20 },
  { cargo: 'Analista II',             horas: 30 },
  { cargo: 'Analista III',            horas: 40 },
  { cargo: 'Líder/Especialista I',    horas: 40 },
  { cargo: 'Líder/Especialista II',   horas: 40 },
  { cargo: 'Líder/Especialista III',  horas: 40 },
  { cargo: 'Coordenador Líder',       horas: 40 },
  { cargo: 'Coordenador Técnico',     horas: 40 },
  { cargo: 'Gerente Líder',           horas: 40 },
  { cargo: 'Gerente Técnico',         horas: 40 },
  { cargo: 'Diretor',                 horas: 40 },
];

const ORGANOGRAMA_PDF = [
  { area: 'Área de Vendas',     resp: 'Fabiano e Maria', cor: '#1F4A8A', setores: [
    { nome: 'Prospecção e Inteligência de Mercado', lider: 'Fabiano',    pessoas: 'Vanessa, Natália' },
    { nome: 'Carteira de Leads e Marketing',        lider: 'Maria',      pessoas: 'Amanda, Jorge, Isabella, Hiago, Germano' },
    { nome: 'Propostas e Fechamento',               lider: 'Ingrid, Rafa', pessoas: 'Leonardo' },
    { nome: 'Editais de Fomento',                   lider: 'Breno',      pessoas: 'Gustavo' },
  ]},
  { area: 'Área de Suporte',    resp: 'Maria', cor: '#00967B', setores: [
    { nome: 'Adm e Financeiro', lider: 'Maria', pessoas: 'Letícia, Bruno, Fabiana' },
    { nome: 'Gente e Cultura',  lider: 'Maria', pessoas: 'Clara Ferreira' },
  ]},
  { area: 'Área de Pós-Vendas', resp: 'Breno', cor: '#7A4A00', setores: [
    { nome: 'Fidelização P&D & Escalonamento',  lider: 'Carol',  pessoas: '—' },
    { nome: 'Fidelização NN e Viabilidade de Projetos', lider: 'Rafa', pessoas: '—' },
    { nome: 'PMO',                              lider: 'Yasmim', pessoas: '—' },
    { nome: 'P&D e Escalonamento',              lider: 'Ana P.', pessoas: 'Felipe, Julia, Juliana' },
    { nome: 'EVT',                              lider: 'Rafa',   pessoas: 'Isabelly' },
    { nome: 'NNE',                              lider: 'Duda',   pessoas: 'Novo Colaborador' },
  ]},
  { area: 'Área de Expansão',   resp: 'Fabiano', cor: '#6B3FA0', setores: [
    { nome: 'Venture Builder', lider: 'Rochel e Fabiano', pessoas: 'Maryna, Ana Campos' },
    { nome: 'Nanofood',        lider: 'Davyston',         pessoas: '—' },
  ]},
];

const fmtBRL = v => Number(v).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const renderFaixa = (row) => {
  if (!row) return null;
  const min = Number(row.sal_min), max = Number(row.sal_max);
  return min === max ? `R$ ${fmtBRL(min)}` : `R$ ${fmtBRL(min)} – ${fmtBRL(max)}`;
};

const PainelTabelaSalarial = () => {
  const totalSetores = ORGANOGRAMA_PDF.reduce((s, a) => s + a.setores.length, 0);
  const [faixas, setFaixas]   = useState(null);   // Map<cargo, row> ou null
  const [loading, setLoading] = useState(true);
  const [erro, setErro]       = useState('');

  useEffect(() => {
    let alive = true;
    (async () => {
      if (typeof window === 'undefined' || !window.supabaseClient) {
        if (alive) { setErro('Supabase não conectado.'); setLoading(false); }
        return;
      }
      try {
        const { data, error } = await window.supabaseClient
          .from('tabela_salarial')
          .select('cargo, horas, sal_min, sal_max, ordem, atualizado_em')
          .order('ordem');
        if (!alive) return;
        if (error) { setErro(error.message || 'Falha ao carregar tabela salarial.'); setLoading(false); return; }
        const map = new Map((data || []).map(r => [r.cargo, r]));
        setFaixas(map);
        setLoading(false);
      } catch (e) {
        if (alive) { setErro(String(e?.message || e)); setLoading(false); }
      }
    })();
    return () => { alive = false; };
  }, []);

  const atualizadoEm = (() => {
    if (!faixas || faixas.size === 0) return null;
    const datas = Array.from(faixas.values()).map(r => r.atualizado_em).filter(Boolean).sort();
    return datas.length ? new Date(datas[datas.length - 1]) : null;
  })();

  return (
    <div style={{ animation: 'fadeIn .2s' }}>
      <Banner tone="info" style={{ marginBottom: 18 }}>
        Referência derivada do PDF oficial <strong>“Estrutura Organizacional · Organograma, Cargos e Salários”</strong>. Apenas perfis <strong>Admin (GC)</strong> visualizam.
      </Banner>

      {/* Tabela Salarial · estrutura */}
      <Card pad={20} style={{ marginBottom: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, flexWrap:'wrap', gap:10 }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700 }}>Tabela Salarial</div>
            <div style={{ fontSize: 12, color: 'var(--escalab-mute)', marginTop:2 }}>
              15 níveis · carga horária 20/30/40h
              {atualizadoEm && <> · atualizado em {atualizadoEm.toLocaleDateString('pt-BR')}</>}
            </div>
          </div>
          <Tag tone="brand" size="xs">{TABELA_SALARIAL_PDF.length} cargos</Tag>
        </div>
        {erro && (
          <div style={{ background:'#FDECEC', border:'1px solid #B3261E33', borderRadius:10, padding:'10px 14px', marginBottom:14, display:'flex', alignItems:'flex-start', gap:8 }}>
            <Icon name="lock" size={13} />
            <div style={{ fontSize:12, color:'#7A1414', lineHeight:1.5 }}>
              <strong>Valores indisponíveis:</strong> {erro}. Confirme se a migration <code>014_tabela_salarial.sql</code> rodou e se seu perfil é admin.
            </div>
          </div>
        )}
        {!erro && (
          <div style={{ background:'#F0F7F5', border:'1px solid #00967B33', borderRadius:10, padding:'10px 14px', marginBottom:14, display:'flex', alignItems:'flex-start', gap:8 }}>
            <Icon name="lock" size={13} />
            <div style={{ fontSize:12, color:'#1F4A3A', lineHeight:1.5 }}>
              Valores R$ carregados em runtime do Supabase (tabela <code>tabela_salarial</code> · RLS admin-only). Nunca ficam no bundle JS público.
            </div>
          </div>
        )}
        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', minWidth: 480, borderCollapse:'collapse' }}>
            <thead>
              <tr style={{ background: 'var(--escalab-paper)' }}>
                <th style={{ textAlign:'left',  padding:'10px 12px', fontSize:11.5, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--escalab-mute)' }}>Cargo</th>
                <th style={{ textAlign:'left',  padding:'10px 12px', fontSize:11.5, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--escalab-mute)' }}>Carga horária</th>
                <th style={{ textAlign:'right', padding:'10px 12px', fontSize:11.5, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--escalab-mute)' }}>Faixa salarial</th>
              </tr>
            </thead>
            <tbody>
              {TABELA_SALARIAL_PDF.map(c => {
                const row = faixas?.get(c.cargo);
                let celulaSalario;
                if (loading) celulaSalario = <span style={{ color:'var(--escalab-mute)', fontStyle:'italic' }}>carregando…</span>;
                else if (erro) celulaSalario = <span style={{ color:'var(--escalab-mute)', fontStyle:'italic' }}>—</span>;
                else if (!row) celulaSalario = <span style={{ color:'var(--escalab-mute)', fontStyle:'italic' }}>sem registro</span>;
                else celulaSalario = <span style={{ color:'var(--escalab-ink)', fontWeight:600 }}>{renderFaixa(row)}</span>;
                return (
                  <tr key={c.cargo} style={{ borderTop:'1px solid var(--escalab-line)' }}>
                    <td style={{ padding:'10px 12px', fontSize:13, fontWeight:600, color:'var(--escalab-ink)' }}>{c.cargo}</td>
                    <td style={{ padding:'10px 12px', fontSize:12.5, color:'var(--escalab-slate)' }}>{c.horas}h</td>
                    <td style={{ padding:'10px 12px', fontSize:12.5, textAlign:'right' }}>{celulaSalario}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </Card>

      {/* Organograma */}
      <Card pad={20}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, flexWrap:'wrap', gap:10 }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700 }}>Organograma · Áreas e Setores</div>
            <div style={{ fontSize: 12, color: 'var(--escalab-mute)', marginTop:2 }}>{ORGANOGRAMA_PDF.length} áreas · {totalSetores} setores</div>
          </div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          {ORGANOGRAMA_PDF.map(a => (
            <div key={a.area} style={{ border:`1px solid ${a.cor}33`, borderRadius:12, overflow:'hidden', background:'#fff' }}>
              <div style={{ background:`linear-gradient(135deg, ${a.cor}, ${a.cor}dd)`, padding:'10px 14px' }}>
                <div style={{ fontSize:13, fontWeight:800, color:'#fff' }}>{a.area}</div>
                <div style={{ fontSize:11, color:'rgba(255,255,255,.85)', marginTop:1 }}>Responsável: {a.resp}</div>
              </div>
              <div style={{ padding:'10px 14px', display:'flex', flexDirection:'column', gap:8 }}>
                {a.setores.map(s => (
                  <div key={s.nome} style={{ borderLeft:`3px solid ${a.cor}`, paddingLeft:10 }}>
                    <div style={{ fontSize:12.5, fontWeight:700, color:'var(--escalab-ink)' }}>{s.nome}</div>
                    <div style={{ fontSize:11, color:'var(--escalab-mute)', marginTop:1 }}>Líder: <strong style={{ color:'var(--escalab-slate)' }}>{s.lider}</strong></div>
                    {s.pessoas !== '—' && <div style={{ fontSize:11, color:'var(--escalab-mute)', marginTop:1 }}>Equipe: {s.pessoas}</div>}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop:12, fontStyle:'italic' }}>
          Estrutura derivada do PDF oficial. Alterações em colaboradores específicos devem ser feitas na ficha individual (Dados Organizacionais).
        </div>
      </Card>
    </div>
  );
};

// ── Indicadores Financeiros Anuais (PDF Site AVD (2)) ──────────────────────
const PainelIndicadoresFinanceiros = ({ onSucesso }) => {
  const [registros, setRegistros] = useState(() => (typeof getIndicadoresFinanceiros === 'function' ? getIndicadoresFinanceiros() : []));
  const [novo, setNovo] = useState({ ano: new Date().getFullYear(), faturamento: '', lucro: '' });

  function recarregar() { setRegistros(getIndicadoresFinanceiros()); }

  function salvar(reg) {
    if (!reg.ano || isNaN(Number(reg.ano))) { alert('Ano inválido.'); return; }
    upsertIndicadorFinanceiro(reg);
    setNovo({ ano: new Date().getFullYear(), faturamento: '', lucro: '' });
    recarregar();
    onSucesso?.(`Indicador de ${reg.ano} salvo.`);
  }
  function remover(ano) {
    if (!confirm(`Remover indicadores do ano ${ano}?`)) return;
    removerIndicadorFinanceiro(ano);
    recarregar();
    onSucesso?.(`Indicador de ${ano} removido.`);
  }

  const fmt = v => 'R$ ' + (Number(v) || 0).toLocaleString('pt-BR');
  const inp = { border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '8px 12px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 'none', boxSizing: 'border-box' };

  return (
    <div style={{ animation: 'fadeIn .2s' }}>
      <Banner tone="info" style={{ marginBottom: 18 }}>
        Registre <strong>faturamento</strong> e <strong>lucro</strong> anuais do Escalab. Usado no Painel para os gráficos de Pessoas × Faturamento × Lucro e Margem de Contribuição.
      </Banner>

      <Card pad={20} style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 14 }}>+ Novo / Editar ano</div>
        <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr 1fr auto', gap: 10, alignItems: 'end' }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginBottom: 4 }}>Ano</div>
            <input value={novo.ano} onChange={e => setNovo(n => ({ ...n, ano: e.target.value }))} type="number" min="2000" max="2099" style={{ ...inp, width: '100%' }} />
          </div>
          <div>
            <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginBottom: 4 }}>Faturamento (R$)</div>
            <input value={novo.faturamento} onChange={e => setNovo(n => ({ ...n, faturamento: e.target.value }))} type="number" placeholder="2000000" style={{ ...inp, width: '100%' }} />
          </div>
          <div>
            <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginBottom: 4 }}>Lucro (R$)</div>
            <input value={novo.lucro} onChange={e => setNovo(n => ({ ...n, lucro: e.target.value }))} type="number" placeholder="300000" style={{ ...inp, width: '100%' }} />
          </div>
          <Button variant="primary" size="sm" onClick={() => salvar(novo)} disabled={!novo.ano || (!novo.faturamento && !novo.lucro)}>Salvar ano</Button>
        </div>
      </Card>

      <Card pad={20}>
        <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 14 }}>Histórico ({registros.length} {registros.length === 1 ? 'ano' : 'anos'})</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {registros.length === 0 && <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Nenhum indicador cadastrado.</div>}
          {registros.map(r => {
            const margem = r.faturamento > 0 ? Math.round(r.lucro / r.faturamento * 100) : 0;
            return (
              <div key={r.ano} style={{ display: 'grid', gridTemplateColumns: '80px 1fr 1fr 100px auto', gap: 10, alignItems: 'center', padding: '10px 14px', background: 'var(--escalab-paper)', borderRadius: 8, border: '1px solid var(--escalab-line)' }}>
                <span style={{ fontWeight: 800, color: 'var(--escalab-brand-deep)' }}>{r.ano}</span>
                <span style={{ fontSize: 13 }}>{fmt(r.faturamento)}</span>
                <span style={{ fontSize: 13 }}>{fmt(r.lucro)}</span>
                <Tag tone={margem >= 15 ? 'success' : margem >= 10 ? 'info' : 'warn'} size="xs">{margem}% margem</Tag>
                <div style={{ display: 'flex', gap: 6 }}>
                  <Button variant="ghost" size="sm" onClick={() => setNovo({ ano: r.ano, faturamento: r.faturamento, lucro: r.lucro })}>Editar</Button>
                  <button onClick={() => remover(r.ano)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', fontSize: 12, padding: '2px 8px', fontFamily: 'var(--font-sans)', fontWeight: 600 }}>Remover</button>
                </div>
              </div>
            );
          })}
        </div>
      </Card>
    </div>
  );
};

// ── Configuração de GC (custo de contratação) ──────────────────────────────
const PainelConfigRh = ({ onSucesso }) => {
  const [cfg, setCfg] = useState(() => (typeof getConfigRh === 'function' ? getConfigRh() : {}));
  // Case-insensitive: COLABORADORES tem 'Gente E Cultura' (E maiusculo no meio) pra Clara.
  const analistaOpcoes = COLABORADORES.filter(c => (c.setor || '').toLowerCase() === 'gente e cultura');
  const calc = (typeof calcularCustoContratacao === 'function') ? calcularCustoContratacao() : null;

  function salvar() {
    salvarConfigRh(cfg);
    onSucesso?.('Configuração de GC salva. Custo de contratação no Painel será atualizado.');
  }

  const inp = { border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '8px 12px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 'none', boxSizing: 'border-box', width: '100%' };

  return (
    <div style={{ animation: 'fadeIn .2s' }}>
      <Banner tone="info" style={{ marginBottom: 18 }}>
        O <strong>custo médio de contratação</strong> no Painel é calculado como <code>(salário do analista GC ÷ horas mensais) × horas por contratação</code>. Configure os parâmetros abaixo.
      </Banner>

      <Card pad={22}>
        <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 16 }}>Parâmetros de cálculo</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginBottom: 4 }}>Analista de GC responsável pelo PS</div>
            <select value={cfg.analistaRhId} onChange={e => setCfg(c => ({ ...c, analistaRhId: Number(e.target.value) }))} style={inp}>
              {analistaOpcoes.map(c => <option key={c.id} value={c.id}>{c.nome} · {c.cargo}</option>)}
            </select>
          </div>
          <div>
            <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginBottom: 4 }}>Horas dela por contratação</div>
            <input type="number" value={cfg.horasPorContratacao} onChange={e => setCfg(c => ({ ...c, horasPorContratacao: Number(e.target.value) }))} style={inp} />
          </div>
          <div>
            <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginBottom: 4 }}>Carga horária mensal padrão (h)</div>
            <input type="number" value={cfg.horasMensaisJornada} onChange={e => setCfg(c => ({ ...c, horasMensaisJornada: Number(e.target.value) }))} style={inp} />
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end' }}>
            <Button variant="primary" size="sm" onClick={salvar}>Salvar configuração</Button>
          </div>
        </div>

        {calc && (
          <div style={{ marginTop: 22, padding: 16, background: 'var(--escalab-paper)', borderRadius: 10, border: '1px solid var(--escalab-line)' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 10 }}>Resultado atual</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
              <div>
                <div style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>Analista de referência</div>
                <div style={{ fontSize: 14, fontWeight: 700 }}>{calc.analistaNome}</div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>Custo / hora</div>
                <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--escalab-brand-deep)' }}>R$ {calc.custoHora?.toFixed(2).replace('.', ',')}</div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>Custo / contratação</div>
                <div style={{ fontSize: 22, fontWeight: 900, color: '#B56500' }}>R$ {calc.custoUnitario?.toLocaleString('pt-BR')}</div>
              </div>
            </div>
          </div>
        )}
      </Card>
    </div>
  );
};

// ── Painel: Relatórios (export CSV real) ───────────────────────────────────
function csvEscape(v) {
  if (v === null || v === undefined) return '';
  const s = String(v);
  return /[",;\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
}
function downloadCSV(nome, linhas) {
  // BOM UTF-8 pro Excel reconhecer acentos
  const conteudo = '' + linhas.map(l => l.map(csvEscape).join(';')).join('\n');
  const blob = new Blob([conteudo], { type: 'text/csv;charset=utf-8' });
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href = url; a.download = nome;
  document.body.appendChild(a); a.click(); document.body.removeChild(a);
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

const PainelRelatorios = ({ onSucesso }) => {
  const cicloAberto = (typeof getCicloAvdAberto === 'function') ? getCicloAvdAberto() : null;
  const cicloLabel  = cicloAberto?.nome || (CICLOS.find(c => c.status === 'ativo')?.nome) || 'Ciclo atual';

  function exportarColaboradores() {
    const linhas = [['ID', 'Nome', 'Email', 'Cargo', 'Setor', 'Nível', 'Perfil', 'Gestor', 'Tempo empresa (meses)', 'Tempo cargo (meses)', 'Formação']];
    COLABORADORES.forEach(c => linhas.push([c.id, c.nome, c.email, c.cargo, c.setor, c.nivel, c.perfil, c.gestorNome || '', c.tempoEmpresa, c.tempoCargo, c.academico]));
    downloadCSV(`escalab-colaboradores-${new Date().toISOString().slice(0,10)}.csv`, linhas);
    onSucesso?.(`${COLABORADORES.length} colaboradores exportados.`);
  }
  function exportarResultadosCiclo() {
    const linhas = [['Ciclo', 'Colaborador ID', 'Colaborador', 'Setor', 'Cargo', 'Status', 'Tipo']];
    AVALIACOES.forEach(a => {
      const c = COLABORADORES.find(x => x.id === a.colaboradorId);
      const ciclo = CICLOS.find(x => x.id === a.cicloId);
      linhas.push([ciclo?.nome || a.cicloId, a.colaboradorId, c?.nome || '', c?.setor || '', c?.cargo || '', a.status, a.tipo || 'individual']);
    });
    downloadCSV(`escalab-resultados-ciclo-${new Date().toISOString().slice(0,10)}.csv`, linhas);
    onSucesso?.(`${AVALIACOES.length} avaliações exportadas.`);
  }
  function exportarFeedbacks() {
    let feedbacks = [];
    try { feedbacks = JSON.parse(localStorage.getItem('escalab_feedbacks') || '[]'); } catch {}
    const linhas = [['Data', 'Autor', 'Para', 'Tipo', 'Texto', 'Status']];
    feedbacks.forEach(f => {
      const autor = COLABORADORES.find(c => c.id === f.autorId);
      const para  = COLABORADORES.find(c => c.id === f.colabId);
      linhas.push([f.data || '', autor?.nome || '', para?.nome || '', f.tipo || '', f.texto || '', f.status || '']);
    });
    downloadCSV(`escalab-feedbacks-${new Date().toISOString().slice(0,10)}.csv`, linhas);
    onSucesso?.(`${feedbacks.length} feedbacks exportados.`);
  }
  function exportarPendencias() {
    const pendentes = AVALIACOES.filter(a => a.status !== 'concluida');
    const linhas = [['Ciclo', 'Colaborador', 'Setor', 'Cargo', 'Gestor', 'Status']];
    pendentes.forEach(a => {
      const c = COLABORADORES.find(x => x.id === a.colaboradorId);
      const ciclo = CICLOS.find(x => x.id === a.cicloId);
      linhas.push([ciclo?.nome || a.cicloId, c?.nome || '', c?.setor || '', c?.cargo || '', c?.gestorNome || '', a.status]);
    });
    downloadCSV(`escalab-pendencias-${new Date().toISOString().slice(0,10)}.csv`, linhas);
    onSucesso?.(`${pendentes.length} pendências exportadas.`);
  }

  const relatorios = [
    { titulo: 'Perfil dos Colaboradores', desc: `Dados pessoais e organizacionais dos ${COLABORADORES.length} colaboradores`, ciclo: 'Base atual',  tipo: 'CSV', acao: exportarColaboradores },
    { titulo: 'Resultados do Ciclo',      desc: 'Status das avaliações por colaborador e ciclo',                            ciclo: cicloLabel,     tipo: 'CSV', acao: exportarResultadosCiclo },
    { titulo: 'Histórico de Feedbacks',   desc: 'Feedbacks registrados (autor, destinatário, tipo, texto)',                ciclo: 'Todos',        tipo: 'CSV', acao: exportarFeedbacks },
    { titulo: 'Pendências do Ciclo',      desc: 'Avaliações ainda não concluídas',                                          ciclo: cicloLabel,     tipo: 'CSV', acao: exportarPendencias },
  ];

  return (
    <div style={{ animation: 'fadeIn .2s' }}>
      <Banner tone="info" style={{ marginBottom: 18 }}>
        Exporta CSV (compatível com Excel) com os dados atuais do sistema. Os arquivos saem com encoding UTF-8 BOM pra preservar acentos.
      </Banner>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
        {relatorios.map((r, i) => (
          <Card key={i} pad={20} hover onClick={r.acao}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
              <div style={{ color: 'var(--escalab-brand)' }}><Icon name="file" size={22} /></div>
              <Tag tone="info" size="xs">{r.tipo}</Tag>
            </div>
            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4 }}>{r.titulo}</div>
            <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginBottom: 12, lineHeight: 1.4 }}>{r.desc}</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontSize: 11.5, color: 'var(--escalab-brand)', fontWeight: 500 }}>{r.ciclo}</span>
              <Button variant="outline" size="sm" icon="download" onClick={(e) => { e.stopPropagation(); r.acao(); }}>Exportar</Button>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
};

// ── Painel: Ciclos AVD (abrir/fechar com state local pra re-render confiavel) ─
const PainelCiclos = ({ onSucesso }) => {
  // Fonte de verdade: ciclos.avd_aberta no Supabase. CICLOS e mutado in-place
  // por fetchCiclosSupabase, entao re-derivamos a cada refresh.
  const [cicloAberto, setCicloAberto] = useState(() => getCicloAvdAberto());
  const [saving, setSaving] = useState(false);

  // Refresh ao ganhar foco + polling 20s pra refletir mudancas de outros admins.
  useEffect(() => {
    let cancelado = false;
    const refresh = async () => {
      if (typeof fetchCiclosSupabase === 'function') await fetchCiclosSupabase();
      if (!cancelado) setCicloAberto(getCicloAvdAberto());
    };
    const onFocus = () => { refresh(); };
    window.addEventListener('focus', onFocus);
    const id = setInterval(refresh, 20000);
    return () => {
      cancelado = true;
      window.removeEventListener('focus', onFocus);
      clearInterval(id);
    };
  }, []);

  async function abrir(cicloId, cicloNome) {
    setSaving(true);
    try {
      await abrirCicloAvd(cicloId);
      setCicloAberto(getCicloAvdAberto());
      onSucesso?.(`AVD aberta · ciclo ${cicloNome}. Colaboradores já podem responder.`);
    } finally { setSaving(false); }
  }
  async function fechar() {
    setSaving(true);
    try {
      await fecharCicloAvd();
      setCicloAberto(getCicloAvdAberto());
      onSucesso?.('AVD fechada. Novas respostas bloqueadas.');
    } finally { setSaving(false); }
  }

  return (
    <div style={{ animation: 'fadeIn .2s' }}>
      <div style={{ background: cicloAberto ? 'var(--escalab-brand-tint)' : '#FFF7EB', border: `1px solid ${cicloAberto ? 'var(--escalab-brand-soft)' : '#F2D9A0'}`, borderRadius: 12, padding: '16px 20px', marginBottom: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: cicloAberto ? 'var(--escalab-brand-deep)' : '#7A4A00', marginBottom: 4 }}>Status da AVD</div>
          <div style={{ fontSize: 15, fontWeight: 700, color: cicloAberto ? 'var(--escalab-brand-deep)' : '#7A4A00' }}>
            {cicloAberto ? `AVD aberta · ciclo ${cicloAberto.nome}` : 'AVD fechada · colaboradores não conseguem responder'}
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginTop: 3 }}>
            {cicloAberto ? `Aberta em ${new Date(cicloAberto.abertoEm).toLocaleString('pt-BR')}. Feche o ciclo para impedir novas respostas.` : 'Abra um ciclo para liberar a avaliação para os colaboradores.'}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {cicloAberto ? (
            <Button variant="danger" icon="lock" size="sm" onClick={fechar} disabled={saving}>
              {saving ? 'Fechando...' : 'Fechar AVD'}
            </Button>
          ) : (
            CICLOS.filter(c => c.status === 'ativo').slice(0, 1).map(c => (
              <Button key={c.id} variant="primary" icon="check" size="sm" onClick={() => abrir(c.id, c.nome)} disabled={saving}>
                {saving ? 'Abrindo...' : `Abrir AVD · ${c.nome}`}
              </Button>
            ))
          )}
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {CICLOS.slice().reverse().map(c => (
          <Card key={c.id} pad={22}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 12 }}>
              <div>
                <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 6 }}>
                  <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>{c.nome}</h3>
                  <Tag tone={c.status === 'ativo' ? 'success' : 'neutral'}>{c.status === 'ativo' ? 'Ativo' : 'Concluído'}</Tag>
                  {cicloAberto?.cicloId === c.id && <Tag tone="brand" size="xs">AVD aberta agora</Tag>}
                </div>
                <div style={{ fontSize: 13, color: 'var(--escalab-slate)' }}>{c.inicio} · {c.fim}</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 20, marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--escalab-line)', flexWrap: 'wrap' }}>
              {[
                { label: 'Avaliações concluídas', val: AVALIACOES.filter(a => a.cicloId === c.id && a.status === 'concluida').length },
                { label: 'Em andamento',         val: AVALIACOES.filter(a => a.cicloId === c.id && a.status === 'em_andamento').length },
                { label: 'Pendentes',            val: AVALIACOES.filter(a => a.cicloId === c.id && a.status === 'pendente').length },
                { label: 'Avaliações de setor',  val: AVALIACOES_SETOR.filter(a => a.cicloId === c.id && a.status === 'concluida').length },
              ].map(s => (
                <div key={s.label}>
                  <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--escalab-brand-deep)' }}>{s.val}</div>
                  <div style={{ fontSize: 11, color: 'var(--escalab-mute)', fontWeight: 500, letterSpacing: '.05em' }}>{s.label}</div>
                </div>
              ))}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
};

const ScreenAdmin = ({ user, notasLiberadas, onLiberarNotas, onBloquearNotas }) => {
  const [aba, setAba] = useState('notas');
  const [sucesso, setSucesso] = useState('');
  const [buscaNotas, setBuscaNotas] = useState('');

  const tabs = [
    { id: 'notas',     label: 'Liberar Notas', icon: 'lock' },
    { id: 'usuarios',  label: 'Usuários',      icon: 'users' },
    { id: 'ciclos',    label: 'Ciclos',        icon: 'calendar' },
    { id: 'intersetorial', label: 'Intersetorial', icon: 'org' },
    { id: 'catalogo',  label: 'Cargos & Deptos', icon: 'clipboard' },
    { id: 'tabela_salarial', label: 'Tabela Salarial & Organograma', icon: 'trend_up' },
    { id: 'perguntas', label: 'Banco de Perguntas', icon: 'clipboard' },
    { id: 'permissoes',label: 'Permissões de Gestor', icon: 'eye' },
    { id: 'financeiro',label: 'Indicadores Financeiros', icon: 'trend_up' },
    { id: 'config_rh', label: 'Config GC (custo contratação)', icon: 'plus' },
    { id: 'relatorios',label: 'Relatórios',   icon: 'download' },
  ];

  const perfilLabel = { admin: 'Admin (GC)', gestor: 'Gestor', colaborador: 'Colaborador' };
  const perfilTone  = { admin: 'dark', gestor: 'brand', colaborador: 'neutral' };

  return (
    <div style={{ animation: 'fadeIn .22s var(--ease-out)' }}>
      {/* Header */}
      <div style={{ marginBottom: 24 }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 4 }}>Restrito</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <h2 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>Painel de Administração</h2>
          <Tag tone="dark">Admin</Tag>
        </div>
      </div>

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

      <Tabs tabs={tabs} active={aba} onChange={setAba} />
      <div style={{ paddingTop: 20 }}>

        {/* ── LIBERAR NOTAS ── */}
        {aba === 'notas' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <div style={{ marginBottom: 18 }}>
              <Banner tone="info">
                As notas de avaliação ficam <strong>bloqueadas por padrão</strong>. Libere abaixo para que o colaborador e gestores possam visualizá-las. Apenas o GC (Admin) pode liberar ou bloquear notas.
              </Banner>
            </div>

            {/* Estatísticas */}
            <div style={{ display: 'flex', gap: 14, marginBottom: 20, flexWrap: 'wrap' }}>
              {[
                { label: 'Total de colaboradores', val: COLABORADORES.length, cor: 'var(--escalab-brand-deep)' },
                { label: 'Notas liberadas', val: notasLiberadas ? notasLiberadas.size : 0, cor: '#00967B' },
                { label: 'Notas bloqueadas', val: COLABORADORES.length - (notasLiberadas ? notasLiberadas.size : 0), cor: '#B3261E' },
              ].map(k => (
                <div key={k.label} style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 10, padding: '14px 20px' }}>
                  <div style={{ fontSize: 22, fontWeight: 800, color: k.cor }}>{k.val}</div>
                  <div style={{ fontSize: 11, color: 'var(--escalab-mute)', fontWeight: 500, letterSpacing: '.05em', marginTop: 2 }}>{k.label}</div>
                </div>
              ))}
            </div>

            {/* Busca */}
            <div style={{ position: 'relative', maxWidth: 360, marginBottom: 16 }}>
              <div style={{ position: 'absolute', left: 11, top: '50%', transform: 'translateY(-50%)', color: 'var(--escalab-mute)', pointerEvents: 'none' }}>
                <Icon name="search" size={15} />
              </div>
              <input value={buscaNotas} onChange={e => setBuscaNotas(e.target.value)} placeholder="Buscar colaborador…"
                style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px 9px 34px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, background: '#fff' }} />
            </div>

            {/* Ações em lote */}
            <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
              <Button variant="primary" size="sm" icon="eye" onClick={() => {
                COLABORADORES.forEach(c => onLiberarNotas && onLiberarNotas(c.id));
                setSucesso('Notas liberadas para todos os colaboradores!');
              }}>Liberar todos</Button>
              <Button variant="outline" size="sm" icon="lock" onClick={() => {
                COLABORADORES.forEach(c => onBloquearNotas && onBloquearNotas(c.id));
                setSucesso('Todas as notas foram bloqueadas.');
              }}>Bloquear todos</Button>
            </div>

            <Card pad={0}>
              <table>
                <thead>
                  <tr>
                    <th>Colaborador</th>
                    <th>Cargo</th>
                    <th>Setor</th>
                    <th style={{ textAlign: 'center' }}>Status das notas</th>
                    <th style={{ textAlign: 'center' }}>Ação</th>
                  </tr>
                </thead>
                <tbody>
                  {COLABORADORES.filter(c => !buscaNotas || c.nome.toLowerCase().includes(buscaNotas.toLowerCase()) || c.cargo.toLowerCase().includes(buscaNotas.toLowerCase())).map(c => {
                    const liberado = notasLiberadas ? notasLiberadas.has(c.id) : false;
                    return (
                      <tr key={c.id}>
                        <td>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                            <Avatar nome={c.nome} cor={c.cor} iniciais={c.iniciais} size={30} />
                            <span style={{ fontSize: 13, fontWeight: 500 }}>{c.nome}</span>
                          </div>
                        </td>
                        <td style={{ fontSize: 12.5, color: 'var(--escalab-slate)' }}>{c.cargo}</td>
                        <td style={{ fontSize: 12.5, color: 'var(--escalab-mute)' }}>{c.setor}</td>
                        <td style={{ textAlign: 'center' }}>
                          {liberado
                            ? <Tag tone="success" size="xs">Liberada</Tag>
                            : <Tag tone="danger"  size="xs">Bloqueada</Tag>
                          }
                        </td>
                        <td style={{ textAlign: 'center' }}>
                          {liberado ? (
                            <Button variant="ghost" size="sm" icon="lock" onClick={() => { onBloquearNotas && onBloquearNotas(c.id); setSucesso(`Nota de ${c.nome.split(' ')[0]} bloqueada.`); }}>Bloquear</Button>
                          ) : (
                            <Button variant="outline" size="sm" icon="eye" onClick={() => { onLiberarNotas && onLiberarNotas(c.id); setSucesso(`Nota de ${c.nome.split(' ')[0]} liberada!`); }}>Liberar</Button>
                          )}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </Card>
          </div>
        )}

        {/* ── USUÁRIOS ── */}
        {aba === 'usuarios' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <Banner tone="info" style={{ marginBottom: 14 }}>
              Lista somente leitura. Para criar usuário ou trocar senha use a tela <strong>Admissão</strong> ou o Auth do Supabase. Permissões de gestor são configuradas na aba dedicada.
            </Banner>
            <Card pad={0}>
              <table>
                <thead>
                  <tr>
                    <th>Colaborador</th>
                    <th>E-mail</th>
                    <th>Perfil de acesso</th>
                    <th>Setor</th>
                    <th>Nível</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {COLABORADORES.map(c => (
                    <tr key={c.id}>
                      <td>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                          <Avatar nome={c.nome} cor={c.cor} iniciais={c.iniciais} size={30} />
                          <span style={{ fontSize: 13, fontWeight: 500 }}>{c.nome}</span>
                        </div>
                      </td>
                      <td style={{ fontSize: 12.5, color: 'var(--escalab-mute)', fontFamily: 'var(--font-mono)' }}>{c.email}</td>
                      <td><Tag tone={perfilTone[c.perfil]} size="xs">{perfilLabel[c.perfil]}</Tag></td>
                      <td style={{ fontSize: 13, color: 'var(--escalab-slate)' }}>{c.setor}</td>
                      <td style={{ fontSize: 12.5, color: 'var(--escalab-slate)' }}>{c.nivel}</td>
                      <td>
                        {/* "Permissoes" individual movido pra aba dedicada "Permissoes de Gestor". */}
                        <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>—</div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Card>

            <div style={{ marginTop: 20 }}>
              <Card pad={20}>
                <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 14 }}>Matriz de permissões</div>
                <div style={{ overflowX: 'auto' }}>
                  <table style={{ minWidth: 500 }}>
                    <thead>
                      <tr>
                        <th>Recurso</th>
                        <th>Colaborador</th>
                        <th>Gestor</th>
                        <th>Admin (GC)</th>
                      </tr>
                    </thead>
                    <tbody>
                      {[
                        ['Meu perfil', '✓', '✓', '✓'],
                        ['Responder avaliação', '✓', '✓', '✓'],
                        ['Ver histórico próprio', '✓', '✓', '✓'],
                        ['Ver colaboradores do setor', '✗', '✓', '✓'],
                        ['Ver feedbacks da equipe', '✗', '✓', '✓'],
                        ['Avaliação de setor', '✗', '✓', '✓'],
                        ['Dashboard geral', '✗', '✗', '✓'],
                        ['Gestão de usuários', '✗', '✗', '✓'],
                        ['Ciclos avaliativos', '✗', '✗', '✓'],
                        ['Banco de perguntas', '✗', '✗', '✓'],
                        ['Exportar relatórios', '✗', '✗', '✓'],
                        ['Ver salários', '✗', '✗', '✓'],
                      ].map(([r, c, g, a]) => (
                        <tr key={r}>
                          <td style={{ fontSize: 13 }}>{r}</td>
                          {[c, g, a].map((v, i) => (
                            <td key={i} style={{ textAlign: 'center' }}>
                              <span style={{ color: v === '✓' ? 'var(--escalab-brand)' : '#E05050', fontWeight: 700, fontSize: 15 }}>{v}</span>
                            </td>
                          ))}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>
            </div>
          </div>
        )}

        {/* ── CICLOS ── */}
        {aba === 'ciclos' && <PainelCiclos onSucesso={setSucesso} />}

        {/* ── INTERSETORIAL ── */}
        {aba === 'intersetorial' && <PainelIntersetorial onSucesso={(msg) => setSucesso(msg)} />}

        {/* ── CATÁLOGO de cargos e departamentos ── */}
        {aba === 'catalogo' && <PainelCatalogoCargos onSucesso={(msg) => setSucesso(msg)} />}

        {/* ── TABELA SALARIAL + ORGANOGRAMA (referencia PDF oficial) ── */}
        {aba === 'tabela_salarial' && <PainelTabelaSalarial />}

        {/* ── BANCO DE PERGUNTAS ── */}
        {aba === 'perguntas' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <Banner tone="info" style={{ marginBottom: 18 }}>
              Configure as perguntas por cargo. Cada bloco (Técnico, Comportamental, Metas, Liderança) pode ter perguntas específicas. O bloco Liderança é omitido para cargos sem função de liderança.
            </Banner>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {Object.entries(BANCO_PERGUNTAS).map(([cargo, pergs]) => (
                <Card key={cargo} pad={20}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{cargo === 'default' ? 'Padrão (todos os cargos)' : cargo}</div>
                    <div style={{ display: 'flex', gap: 6 }}>
                      <Tag tone="neutral" size="xs">{pergs.length} perguntas</Tag>
                      <Button variant="ghost" size="sm" icon="plus">Adicionar</Button>
                    </div>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {BLOCOS.map(b => {
                      const ps = pergs.filter(p => p.bloco === b.id);
                      if (!ps.length) return null;
                      return (
                        <div key={b.id} style={{ background: 'var(--escalab-paper)', borderRadius: 8, padding: '10px 14px' }}>
                          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: b.cor, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
                            <Icon name={b.icon} size={12} /> {b.label}
                          </div>
                          {ps.map((p, i) => (
                            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', padding: '6px 0', borderBottom: i < ps.length - 1 ? '1px solid var(--escalab-line)' : 0 }}>
                              <span style={{ fontSize: 13, color: 'var(--escalab-slate)', flex: 1, lineHeight: 1.4 }}>{p.pergunta}</span>
                              <Button variant="ghost" size="sm" icon="close" style={{ flexShrink: 0, padding: '2px 4px', marginLeft: 8 }} />
                            </div>
                          ))}
                        </div>
                      );
                    })}
                  </div>
                </Card>
              ))}
            </div>
          </div>
        )}

        {/* ── PERMISSÕES DE GESTOR ── */}
        {aba === 'permissoes' && (
          <PainelPermissoesGestor onSucesso={setSucesso} />
        )}

        {/* ── INDICADORES FINANCEIROS ── */}
        {aba === 'financeiro' && <PainelIndicadoresFinanceiros onSucesso={setSucesso} />}

        {/* ── CONFIG GC (custo de contratação) ── */}
        {aba === 'config_rh' && <PainelConfigRh onSucesso={setSucesso} />}

        {/* ── RELATÓRIOS ── */}
        {aba === 'relatorios' && <PainelRelatorios onSucesso={setSucesso} />}

      </div>
    </div>
  );
};

window.ScreenAdmin = ScreenAdmin;