// ═══════════════════════════════════════════════════════════════════════════
// AVD · Admin da Ficha de Avaliação (Fase 1 — fundação, SQL 071)
// Gerencia competências / indicadores / régua da AVD 100% no Supabase.
// Substitui os bancos de perguntas / régua que viviam em localStorage.
// Fontes (data.jsx): AVD_FICHAS, AVD_COMPETENCIAS, AVD_INDICADORES,
// AVD_FICHA_CARGOS, AVD_REGUA_DB + salvar/excluir* + setAvdFichaCargos + salvarAvdRegua.
// Componentes no nível do módulo (prefixo "Ficha") p/ o input não perder foco.
// ═══════════════════════════════════════════════════════════════════════════

const CAT_DEFAULT_NIVEL = { organizacional: 5, comportamental: 4, performance: 5 };

// Campo de texto com edição local + salva no blur (evita re-render a cada tecla).
const FichaTextoEditavel = ({ value, onSave, placeholder, multiline, style }) => {
  const [val, setVal] = React.useState(value ?? '');
  const [salvando, setSalvando] = React.useState(false);
  React.useEffect(() => { setVal(value ?? ''); }, [value]);
  async function commit() {
    if ((val ?? '') === (value ?? '')) return;
    setSalvando(true);
    await onSave(val);
    setSalvando(false);
  }
  const base = {
    width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 7,
    padding: '7px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 'none',
    boxSizing: 'border-box', background: salvando ? '#f6faf9' : '#fff', color: 'var(--escalab-ink)', ...style,
  };
  return multiline
    ? <textarea value={val} onChange={e => setVal(e.target.value)} onBlur={commit} placeholder={placeholder}
        rows={2} style={{ ...base, resize: 'vertical', lineHeight: 1.4 }} />
    : <input value={val} onChange={e => setVal(e.target.value)} onBlur={commit} placeholder={placeholder} style={base} />;
};

// Uma linha de indicador: texto + nível requerido + excluir.
const FichaIndicadorRow = ({ ind, onChanged }) => {
  async function salvarTexto(texto) { await salvarAvdIndicador({ ...ind, texto }); onChanged(); }
  async function salvarNivel(nivel_requerido) { await salvarAvdIndicador({ ...ind, nivel_requerido }); onChanged(); }
  // 143 · o confirm antigo dizia só "Excluir este indicador?" e apagava. Com o
  // CASCADE da 073, isso levava junto toda nota já dada naquela pergunta, de
  // todo mundo, sem volta — foi assim que 12 respostas da Isabella sumiram em
  // 05/08. Agora a pessoa vê quantas avaliações estão em jogo antes de decidir,
  // e quando há alguma a pergunta é desativada em vez de apagada.
  async function excluir() {
    if (!(await escalabConfirmar('Excluir este indicador?'))) return;
    const r = await excluirAvdIndicador(ind.id);
    if (r?.ok && r.modo === 'desativado') {
      avisarToast(`Pergunta tirada da ficha. As ${r.respostas} avaliação(ões) já respondidas nela foram preservadas e continuam contando na média.`, 'ok');
    }
    onChanged();
  }
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 118px 30px', gap: 8, alignItems: 'start' }}>
      <FichaTextoEditavel value={ind.texto} onSave={salvarTexto} multiline placeholder="Texto do indicador (a frase pontuada 0-5)" />
      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
        <span style={{ fontSize: 10.5, color: 'var(--escalab-mute)' }}>nível</span>
        <select value={ind.nivel_requerido ?? 5} onChange={e => salvarNivel(Number(e.target.value))}
          style={{ flex: 1, border: '1px solid var(--escalab-line)', borderRadius: 6, padding: '6px 4px', fontSize: 12.5, background: '#fff', outline: 'none' }}
          title="Nível requerido (meta 0-5)">
          {[0,1,2,3,4,5].map(n => <option key={n} value={n}>{n}</option>)}
        </select>
      </div>
      <button onClick={excluir} title="Excluir indicador"
        style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 6, height: 30, cursor: 'pointer', color: '#B3261E', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name="close" size={13} />
      </button>
    </div>
  );
};

// Card de uma competência: nome (+ grupo se comportamental) + indicadores + ações.
const FichaCompetenciaCard = ({ comp, indicadores, onChanged, showGrupo }) => {
  async function salvarNome(nome) { await salvarAvdCompetencia({ ...comp, nome }); onChanged(); }
  async function salvarGrupo(grupo) { await salvarAvdCompetencia({ ...comp, grupo }); onChanged(); }
  async function addIndicador() {
    const ordem = (indicadores.reduce((m, i) => Math.max(m, i.ordem || 0), 0)) + 1;
    await salvarAvdIndicador({ competencia_id: comp.id, texto: '', nivel_requerido: CAT_DEFAULT_NIVEL[comp.categoria] || 5, ordem });
    onChanged();
  }
  async function excluir() {
    if (!(await escalabConfirmar(`Excluir a competência "${comp.nome}" e todos os seus indicadores?`))) return;
    const r = await excluirAvdCompetencia(comp.id);
    if (r?.ok && r.modo === 'desativado') {
      avisarToast(`Competência tirada da ficha. As ${r.respostas} avaliação(ões) já respondidas nela foram preservadas e continuam contando na média.`, 'ok');
    }
    onChanged();
  }
  return (
    <div style={{ border: '1px solid var(--escalab-line)', borderRadius: 10, padding: 12, marginBottom: 10, background: '#fff' }}>
      <div style={{ display: 'grid', gridTemplateColumns: showGrupo ? '150px 1fr 30px' : '1fr 30px', gap: 8, alignItems: 'center', marginBottom: 10 }}>
        {showGrupo && <FichaTextoEditavel value={comp.grupo} onSave={salvarGrupo} placeholder="Grupo (ex: Grupo I - Resultado)" style={{ fontWeight: 600 }} />}
        <FichaTextoEditavel value={comp.nome} onSave={salvarNome} placeholder="Nome da competência" style={{ fontWeight: 700 }} />
        <button onClick={excluir} title="Excluir competência"
          style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 6, height: 34, cursor: 'pointer', color: '#B3261E', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="close" size={14} />
        </button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
        {indicadores.map(ind => <FichaIndicadorRow key={ind.id} ind={ind} onChanged={onChanged} />)}
        {!indicadores.length && <div style={{ fontSize: 12, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Sem indicadores ainda.</div>}
      </div>
      <button onClick={addIndicador}
        style={{ marginTop: 9, border: '1px dashed var(--escalab-line)', background: 'var(--escalab-paper)', borderRadius: 7, padding: '6px 12px', fontSize: 12.5, cursor: 'pointer', color: 'var(--escalab-slate)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        <Icon name="plus" size={12} /> Indicador
      </button>
    </div>
  );
};

// Editor de cargos atribuídos à ficha (chips + adicionar da lista de cargos reais).
const FichaCargosEditor = ({ ficha, onChanged }) => {
  const [novo, setNovo] = React.useState('');
  const cargos = AVD_FICHA_CARGOS.filter(x => x.ficha_id === ficha.id).map(x => x.cargo);
  const cargosDisponiveis = [...new Set((typeof COLABORADORES !== 'undefined' ? COLABORADORES : [])
    .map(c => c.cargo).filter(Boolean))].sort((a, b) => a.localeCompare(b));
  async function commit(lista) { await setAvdFichaCargos(ficha.id, lista); onChanged(); }
  async function add() {
    const c = novo.trim();
    if (!c || cargos.includes(c)) { setNovo(''); return; }
    setNovo(''); await commit([...cargos, c]);
  }
  async function remover(c) { await commit(cargos.filter(x => x !== c)); }
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--escalab-slate)', marginBottom: 6 }}>Cargos que usam esta ficha</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 8 }}>
        {cargos.map(c => (
          <span key={c} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#E6F5F1', color: '#00836B', borderRadius: 20, padding: '4px 10px', fontSize: 12.5, fontWeight: 600 }}>
            {c}
            <button onClick={() => remover(c)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#00836B', display: 'flex', padding: 0 }} title="Remover cargo">
              <Icon name="close" size={12} />
            </button>
          </span>
        ))}
        {!cargos.length && <span style={{ fontSize: 12, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Nenhum cargo atribuído — a ficha não aparece pra ninguém ainda.</span>}
      </div>
      <div style={{ display: 'flex', gap: 8, maxWidth: 460 }}>
        <input list="ficha-cargos-datalist" value={novo} onChange={e => setNovo(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter') add(); }} placeholder="Adicionar cargo…"
          style={{ flex: 1, border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '8px 12px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 'none', boxSizing: 'border-box' }} />
        <datalist id="ficha-cargos-datalist">{cargosDisponiveis.map(c => <option key={c} value={c} />)}</datalist>
        <Button variant="outline" onClick={add}>Adicionar</Button>
      </div>

      <FichaPessoasPainel ficha={ficha} onChanged={onChanged} />
    </div>
  );
};

// 091 · "Como vou ter certeza que a ficha está indo pra pessoa certa?"
// Mostra NOMINALMENTE quem vai responder esta ficha, e deixa ligar alguém
// direto a ela (vence a regra do cargo — serve pra exceção e pra quando o
// cargo da pessoa está escrito diferente do cadastrado aqui).
const FichaPessoasPainel = ({ ficha, onChanged }) => {
  const [busca, setBusca] = React.useState('');
  const [erro, setErro] = React.useState('');
  const [salvando, setSalvando] = React.useState(false);
  const [tick, setTick] = React.useState(0);

  const temApi = typeof colaboradoresDaFicha === 'function' && typeof definirFichaDoColaborador === 'function';
  if (!temApi) return null;

  const pessoas = colaboradoresDaFicha(ficha.id);
  const semFicha = typeof colaboradoresSemFicha === 'function' ? colaboradoresSemFicha() : [];
  const ativos = typeof getColaboradoresAtivos === 'function' ? getColaboradoresAtivos() : [];
  const nb = busca.trim().toLowerCase();
  const candidatos = nb
    ? ativos.filter(c => !pessoas.some(p => p.id === c.id) && (c.nome || '').toLowerCase().includes(nb)).slice(0, 8)
    : [];

  // Direto = ligado a ESTA ficha pela pessoa; herdado = veio da regra do cargo.
  const ehDireto = c => (typeof AVD_FICHA_COLAB !== 'undefined') && AVD_FICHA_COLAB[c.id] === ficha.id;

  async function ligar(c) {
    setSalvando(true); setErro('');
    const r = await definirFichaDoColaborador(c.id, ficha.id);
    setSalvando(false);
    if (!r?.ok) { setErro(r?.erro || 'não consegui vincular'); return; }
    setBusca(''); setTick(t => t + 1); onChanged?.();
  }
  async function desligar(c) {
    setSalvando(true); setErro('');
    const r = await definirFichaDoColaborador(c.id, null);
    setSalvando(false);
    if (!r?.ok) { setErro(r?.erro || 'não consegui desvincular'); return; }
    setTick(t => t + 1); onChanged?.();
  }

  return (
    <div style={{ marginTop: 16, borderTop: '1px solid var(--escalab-line)', paddingTop: 14 }} data-tick={tick}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap', marginBottom: 8 }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--escalab-slate)' }}>Quem responde esta ficha</div>
        <span style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>
          {pessoas.length === 0 ? 'ninguém ainda' : `${pessoas.length} pessoa${pessoas.length === 1 ? '' : 's'}`}
        </span>
      </div>

      {pessoas.length === 0 ? (
        <div style={{ background: '#FFF7EB', border: '1px solid #FFD6A3', borderRadius: 9, padding: '10px 13px', fontSize: 12.5, color: '#7A4A00', lineHeight: 1.5, marginBottom: 10 }}>
          <strong>Esta ficha não chega a ninguém.</strong> Adicione um cargo acima, ou ligue uma pessoa direto abaixo.
        </div>
      ) : (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 10 }}>
          {pessoas.map(c => {
            const direto = ehDireto(c);
            return (
              <span key={c.id} title={direto ? 'Ligada direto a esta pessoa' : `Herdada do cargo: ${c.cargo || '—'}`}
                style={{ display: 'inline-flex', alignItems: 'center', gap: 6, borderRadius: 20, padding: '4px 10px 4px 4px', fontSize: 12.5, fontWeight: 600,
                  background: direto ? '#F4EEFF' : 'var(--escalab-paper)',
                  border: `1px solid ${direto ? '#D9C7F0' : 'var(--escalab-line)'}`,
                  color: direto ? '#6B3FA0' : 'var(--escalab-slate)' }}>
                <PhotoAvatar colaborador={c} size={22} />
                {(c.nome || '').split(' ').slice(0, 2).join(' ')}
                {direto && (
                  <button onClick={() => desligar(c)} disabled={salvando} title="Desfazer vínculo direto"
                    style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#6B3FA0', display: 'flex', padding: 0 }}>
                    <Icon name="close" size={12} />
                  </button>
                )}
              </span>
            );
          })}
        </div>
      )}

      <input value={busca} onChange={e => setBusca(e.target.value)} placeholder="Ligar uma pessoa direto a esta ficha…"
        style={{ width: '100%', maxWidth: 460, border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '8px 12px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 'none', boxSizing: 'border-box' }} />
      {candidatos.length > 0 && (
        <div style={{ maxWidth: 460, border: '1px solid var(--escalab-line)', borderRadius: 8, marginTop: 6, overflow: 'hidden' }}>
          {candidatos.map(c => (
            <button key={c.id} onClick={() => ligar(c)} disabled={salvando}
              style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 9, padding: '7px 11px', border: 0, borderBottom: '1px solid var(--escalab-line)', background: '#fff', cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--font-sans)' }}>
              <PhotoAvatar colaborador={c} size={24} />
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: 'block', fontSize: 13, fontWeight: 600 }}>{c.nome}</span>
                <span style={{ display: 'block', fontSize: 11, color: 'var(--escalab-mute)' }}>{c.cargo || 'sem cargo'}</span>
              </span>
              <Icon name="plus" size={13} />
            </button>
          ))}
        </div>
      )}

      {semFicha.length > 0 && (
        <div style={{ marginTop: 12, background: '#FDECEC', border: '1px solid #F4C7C3', borderRadius: 9, padding: '10px 13px', fontSize: 12.5, color: '#B3261E', lineHeight: 1.5 }}>
          <strong>{semFicha.length} pessoa{semFicha.length === 1 ? '' : 's'} ativa{semFicha.length === 1 ? '' : 's'} sem ficha nenhuma</strong> — ninguém consegue avaliá-la{semFicha.length === 1 ? '' : 's'}:{' '}
          {semFicha.slice(0, 8).map(c => `${(c.nome || '').split(' ').slice(0, 2).join(' ')} (${c.cargo || 'sem cargo'})`).join(' · ')}
          {semFicha.length > 8 && ` … e mais ${semFicha.length - 8}`}
        </div>
      )}

      {erro && <div style={{ marginTop: 8, fontSize: 12, color: '#B3261E' }}>{erro}</div>}
    </div>
  );
};

// Editor da régua 0-5 (competencia = org+comportamental; performance).
const FichaReguaEditor = ({ onChanged }) => {
  const [aberto, setAberto] = React.useState(false);
  const cats = [
    { id: 'competencia', label: 'Competências (organizacional + comportamental)' },
    { id: 'performance', label: 'Indicadores de Performance' },
  ];
  return (
    <div style={{ border: '1px solid var(--escalab-line)', borderRadius: 10, marginBottom: 22, background: '#fff' }}>
      <button onClick={() => setAberto(a => !a)}
        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', border: 0, background: 'transparent', cursor: 'pointer', padding: '13px 16px', fontSize: 14, fontWeight: 700, color: 'var(--escalab-ink)' }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="settings" size={15} /> Régua da avaliação (escala 0 a 5)</span>
        <Icon name={aberto ? 'chev_up' : 'chev_down'} size={15} />
      </button>
      {aberto && (
        <div style={{ padding: '0 16px 16px' }}>
          {cats.map(cat => (
            <div key={cat.id} style={{ marginTop: 12 }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--escalab-brand)', marginBottom: 7 }}>{cat.label}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {[0,1,2,3,4,5].map(n => (
                  <div key={n} style={{ display: 'grid', gridTemplateColumns: '26px 1fr', gap: 8, alignItems: 'start' }}>
                    <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--escalab-slate)', paddingTop: 7 }}>{n}</span>
                    <FichaTextoEditavel value={(AVD_REGUA_DB[cat.id] || {})[n] || ''} multiline
                      placeholder={`Legenda da nota ${n}`}
                      onSave={async (legenda) => { await salvarAvdRegua(cat.id, { ...(AVD_REGUA_DB[cat.id] || {}), [n]: legenda }); onChanged(); }} />
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// Bloco de uma categoria (comportamental agrupado por "grupo" / performance flat).
const FichaCategoriaBloco = ({ titulo, descricao, comps, categoria, fichaId, agrupar, onChanged }) => {
  async function addCompetencia() {
    const ordem = comps.reduce((m, c) => Math.max(m, c.ordem || 0), 0) + 1;
    await salvarAvdCompetencia({ ficha_id: fichaId || null, categoria, grupo: agrupar ? '' : null, nome: '', ordem });
    onChanged();
  }
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontSize: 14.5, fontWeight: 700, marginBottom: 2 }}>{titulo}</div>
      {descricao && <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginBottom: 10 }}>{descricao}</div>}
      {comps.map(c => (
        <FichaCompetenciaCard key={c.id} comp={c}
          indicadores={AVD_INDICADORES.filter(i => i.competencia_id === c.id && i.ativo !== false).sort((a, b) => (a.ordem || 0) - (b.ordem || 0))}
          onChanged={onChanged} showGrupo={agrupar} />
      ))}
      {!comps.length && <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', fontStyle: 'italic', marginBottom: 8 }}>Nenhuma competência ainda.</div>}
      <Button variant="outline" onClick={addCompetencia}>+ Competência</Button>
    </div>
  );
};

// ── View principal (admin) ───────────────────────────────────────────────────
const AdminFichasView = ({ user }) => {
  const [, force] = React.useReducer(x => x + 1, 0);
  const [fichaSel, setFichaSel] = React.useState('');
  React.useEffect(() => {
    const h = () => force();
    window.addEventListener('escalab:avd-fichas-changed', h);
    return () => window.removeEventListener('escalab:avd-fichas-changed', h);
  }, []);

  const semBanco = !AVD_COMPETENCIAS.length && !AVD_FICHAS.length;
  const orgComps = AVD_COMPETENCIAS.filter(c => c.ficha_id == null && c.categoria === 'organizacional')
    .sort((a, b) => (a.ordem || 0) - (b.ordem || 0));
  const fichas = [...AVD_FICHAS].sort((a, b) => String(a.nome).localeCompare(String(b.nome)));
  const fichaAtual = fichas.find(f => f.id === fichaSel) || fichas[0] || null;

  async function novaFicha() {
    const r = await salvarAvdFicha({ nome: 'Nova ficha' });
    if (r.ok) { setFichaSel(r.id); force(); }
  }
  async function excluirFichaAtual() {
    if (!fichaAtual) return;
    if (!(await escalabConfirmar(`Excluir a ficha "${fichaAtual.nome}" (competências e indicadores dela)? A parte Organizacional universal NÃO é afetada.`))) return;
    await excluirAvdFicha(fichaAtual.id); setFichaSel(''); force();
  }
  async function addOrgCompetencia() {
    const ordem = orgComps.reduce((m, c) => Math.max(m, c.ordem || 0), 0) + 1;
    await salvarAvdCompetencia({ ficha_id: null, categoria: 'organizacional', grupo: null, nome: '', ordem });
    force();
  }

  const comportComps = fichaAtual ? AVD_COMPETENCIAS.filter(c => c.ficha_id === fichaAtual.id && c.categoria === 'comportamental').sort((a, b) => (a.ordem || 0) - (b.ordem || 0)) : [];
  const perfComps = fichaAtual ? AVD_COMPETENCIAS.filter(c => c.ficha_id === fichaAtual.id && c.categoria === 'performance').sort((a, b) => (a.ordem || 0) - (b.ordem || 0)) : [];

  return (
    <div>
      <div style={{ background: 'var(--escalab-paper)', border: '1px solid var(--escalab-line)', borderRadius: 10, padding: '12px 15px', marginBottom: 20, fontSize: 13, lineHeight: 1.5, color: 'var(--escalab-slate)' }}>
        Aqui você monta as fichas da AVD. As <strong>Competências Organizacionais</strong> valem para todos os cargos. Cada <strong>ficha por cargo</strong> tem suas competências comportamentais e indicadores de performance. Tudo é salvo direto no banco.
      </div>

      {semBanco && (
        <div style={{ background: '#FDECEC', border: '1px solid #f5b5b0', borderRadius: 10, padding: '12px 15px', marginBottom: 20, fontSize: 13, color: '#B3261E' }}>
          <strong>Banco vazio.</strong> Rode o <code>supabase/071_avd_fichas.sql</code> no SQL Editor e dê F5 — ele cria as tabelas e semeia o Organizacional + a ficha "Analista III de Prospecção".
        </div>
      )}

      <FichaReguaEditor onChanged={force} />

      {/* Organizacional universal */}
      <div style={{ border: '1px solid var(--escalab-line)', borderRadius: 12, padding: 16, marginBottom: 24 }}>
        <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 4 }}>Vale para todos os cargos</div>
        <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 12 }}>Competências Organizacionais</div>
        {orgComps.map(c => (
          <FichaCompetenciaCard key={c.id} comp={c}
            indicadores={AVD_INDICADORES.filter(i => i.competencia_id === c.id && i.ativo !== false).sort((a, b) => (a.ordem || 0) - (b.ordem || 0))}
            onChanged={force} showGrupo={false} />
        ))}
        <Button variant="outline" onClick={addOrgCompetencia}>+ Competência organizacional</Button>
      </div>

      {/* Fichas por cargo */}
      <div style={{ border: '1px solid var(--escalab-line)', borderRadius: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 4 }}>Específico por cargo</div>
            <div style={{ fontSize: 16, fontWeight: 700 }}>Fichas por cargo</div>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            {fichas.length > 0 && (
              <select value={fichaAtual?.id || ''} onChange={e => setFichaSel(e.target.value)}
                style={{ border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 13.5, fontFamily: 'var(--font-sans)', background: '#fff', outline: 'none', minWidth: 220 }}>
                {fichas.map(f => <option key={f.id} value={f.id}>{f.nome}</option>)}
              </select>
            )}
            <Button variant="primary" onClick={novaFicha}>+ Nova ficha</Button>
          </div>
        </div>

        {!fichaAtual && <div style={{ fontSize: 13, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Nenhuma ficha ainda. Crie a primeira em "+ Nova ficha".</div>}

        {fichaAtual && (
          <div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, alignItems: 'center', marginBottom: 14 }}>
              <FichaTextoEditavel value={fichaAtual.nome} onSave={async (nome) => { await salvarAvdFicha({ ...fichaAtual, nome }); force(); }}
                placeholder="Nome da ficha (ex: Analista III de Prospecção)" style={{ fontSize: 15, fontWeight: 700 }} />
              <button onClick={excluirFichaAtual} title="Excluir ficha"
                style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 7, padding: '8px 12px', cursor: 'pointer', color: '#B3261E', display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, fontFamily: 'var(--font-sans)' }}>
                <Icon name="close" size={13} /> Excluir ficha
              </button>
            </div>

            <FichaCargosEditor ficha={fichaAtual} onChanged={force} />

            <FichaCategoriaBloco titulo="Competências Comportamentais" descricao="Agrupadas por grupo (ex: Resultado, Comunicação, Inovação). Avaliadas por liderados, pares e líder."
              comps={comportComps} categoria="comportamental" fichaId={fichaAtual.id} agrupar={true} onChanged={force} />

            <FichaCategoriaBloco titulo="Indicadores de Performance" descricao="Atividades do cargo com meta. Somente o líder responde sobre o liderado."
              comps={perfComps} categoria="performance" fichaId={fichaAtual.id} agrupar={false} onChanged={force} />
          </div>
        )}
      </div>
    </div>
  );
};

window.AdminFichasView = AdminFichasView;