// ═══════════════════════════════════════════════════════════════════════════
// AVD · Responder o formulário (Fase 3 — SQL 073)
// Cada pessoa vê "quem eu tenho que avaliar" (matriz 072 + autoavaliação), abre a
// ficha do cargo do avaliado (071) filtrada pelas categorias que aquele tipo responde,
// e dá nota 0-5 por indicador. Salva granular no Supabase (avd_respostas). Sem LS.
// ═══════════════════════════════════════════════════════════════════════════

// 'diretoria' = avaliação cruzada da diretoria sobre a camada mais alta (só a
// parte organizacional). Sem entrada aqui, o card da tarefa saía com a tarja
// em branco e cor `undefined`.
const AVD_TIPO_LABEL = { auto: 'Autoavaliação', lider: 'Você como líder', par: 'Você como par', liderado: 'Você como liderado', diretoria: 'Você como diretoria' };
const AVD_TIPO_COR   = { auto: '#6B3FA0', lider: '#00836B', par: '#1F4A8A', liderado: '#B26A00', diretoria: '#2F3F4C' };
const AVD_CAT_TITULO = {
  organizacional: 'Competências Organizacionais',
  comportamental: 'Competências Comportamentais',
  comportamental_lideranca: 'Competências de Liderança',
  // 122 · na ficha da Diretoria isto é só o bloco de convívio; em todas as
  // outras é o comportamental inteiro, então o título genérico serve aos dois.
  comportamental_par: 'Competências Comportamentais',
  performance: 'Indicadores de Performance',
};
// 091 · id da linha da pergunta aberta que fecha cada categoria.
//
// O id passa pela categoria BASE (avdCategoriaBase) de propósito. A 118 criou
// exatamente três indicadores — ABERTA_organizacional, ABERTA_comportamental e
// ABERTA_performance — e `avd_respostas.indicador_id` tem FK pra
// avd_indicadores desde a 073. Quando a 122 trouxe as categorias derivadas, o
// par da Diretoria passou a mandar 'ABERTA_comportamental_par' e o liderado
// 'ABERTA_comportamental_lideranca': dois ids que nunca existiram. Toda
// tentativa morria em violação de chave estrangeira e a pessoa via "não salvou
// no servidor" — foi o erro relatado em 03/08.
//
// Dobrar no id, em vez de criar indicador novo por recorte, mantém a FK e não
// depende de rodar SQL: a linha continua única porque a UNIQUE de avd_respostas
// inclui o `tipo`, que é o que separa o comentário do par do comentário do
// líder. A coluna `categoria` continua guardando o recorte original.
const _idAberta = cat => 'ABERTA_' + (typeof avdCategoriaBase === 'function' ? avdCategoriaBase(cat) : cat);

// Botões 0-5 com legenda da régua no title.
const RespostaEscalaBotoes = ({ nota, reguaKey, onPick }) => {
  const regua = (typeof AVD_REGUA_DB !== 'undefined' ? AVD_REGUA_DB[reguaKey] : null) || {};
  return (
    <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
      {[0,1,2,3,4,5].map(n => {
        const sel = nota === n;
        return (
          <button key={n} onClick={() => onPick(n)} title={regua[n] || `Nota ${n}`}
            onMouseEnter={e => { if (!sel) { e.currentTarget.style.borderColor = 'var(--escalab-brand-soft)'; e.currentTarget.style.background = 'var(--escalab-brand-tint)'; } }}
            onMouseLeave={e => { if (!sel) { e.currentTarget.style.borderColor = 'var(--escalab-line)'; e.currentTarget.style.background = '#fff'; } }}
            style={{
              width: 42, height: 42, borderRadius: 10, cursor: 'pointer', fontSize: 16, fontWeight: 800,
              border: sel ? '2px solid var(--escalab-brand)' : '2px solid var(--escalab-line)',
              background: sel ? 'var(--escalab-brand)' : '#fff', color: sel ? '#fff' : 'var(--escalab-slate)',
              boxShadow: sel ? '0 4px 12px rgba(0,150,123,.28)' : 'none',
              transform: sel ? 'translateY(-1px)' : 'none',
              fontFamily: 'var(--font-sans)', flexShrink: 0,
              transition: 'all .18s var(--ease-out)',
            }}>{n}</button>
        );
      })}
    </div>
  );
};

// Pergunta aberta ao final de cada categoria (091). Salva ao sair do campo
// (blur), não a cada tecla: são respostas longas e um upsert por caractere
// entupiria a rede.
//
// 05/08 · virou OBRIGATÓRIA por decisão do G&C. Obrigatória aqui quer dizer
// "conta no progresso da ficha e a seção fica marcada enquanto estiver vazia" —
// não há botão de enviar pra bloquear: cada resposta é salva na hora, e a ficha
// só é "concluída" quando todos os itens esperados existem. Contar a aberta em
// _avdContarTarefa e em getProgressoAvdDoAvaliado é o que torna isso real; o
// vermelho aqui é só o aviso de que falta.
const PerguntaAberta = ({ categoria, titulo, valor, onSalvar }) => {
  const [txt, setTxt] = React.useState(valor || '');
  const [estado, setEstado] = React.useState('');   // '' | 'salvando' | 'salvo'
  // Se a resposta chegar do banco depois da montagem, adota — mas nunca por
  // cima do que a pessoa está digitando.
  React.useEffect(() => { if (!txt && valor) setTxt(valor); }, [valor]);

  const preenchida = !!String(txt || '').trim();

  async function salvar() {
    if ((txt || '') === (valor || '')) return;
    setEstado('salvando');
    await onSalvar(txt);
    setEstado('salvo');
    setTimeout(() => setEstado(''), 2200);
  }

  return (
    <div style={{
      marginTop: 6, padding: '16px 18px', borderRadius: 12, background: 'var(--escalab-paper)',
      border: preenchida ? '1px solid var(--escalab-brand-soft)' : '1px dashed #B3261E',
      borderLeft: `4px solid ${preenchida ? 'var(--escalab-brand)' : '#B3261E'}`,
    }}>
      <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--escalab-ink)', marginBottom: 3 }}>
        Explique as notas de {String(titulo).toLowerCase()}
        <span style={{ color: '#B3261E', marginLeft: 4 }}>*</span>
        <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '.05em', textTransform: 'uppercase', color: preenchida ? '#00836B' : '#B3261E', marginLeft: 8 }}>
          {preenchida ? '✓ respondida' : 'obrigatória'}
        </span>
      </div>
      <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginBottom: 9, lineHeight: 1.45 }}>
        Dê exemplos concretos, justifique uma nota alta ou baixa, aponte o que ajudaria a evoluir. É o que dá utilidade à nota — sem ela a ficha não fecha.
      </div>
      <textarea
        value={txt}
        onChange={e => setTxt(e.target.value)}
        onBlur={salvar}
        rows={4}
        placeholder="Escreva aqui…"
        style={{ width: '100%', border: `1px solid ${preenchida ? 'var(--escalab-line)' : '#B3261E'}`, borderRadius: 10, padding: '11px 14px', fontSize: 14, lineHeight: 1.55, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box', background: '#fff' }}
      />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 5, fontSize: 11.5, color: 'var(--escalab-mute)' }}>
        <span>{estado === 'salvando' ? 'Salvando…' : estado === 'salvo' ? '✓ Salvo' : 'Salva sozinho ao sair do campo'}</span>
        <span>{(txt || '').length} caracteres</span>
      </div>
    </div>
  );
};

// Conta indicadores e respondidos de uma tarefa (p/ progresso).
// Setor "Associados de Projetos" (a variante do banco pode ter sufixo — a 042
// unificou os nomes, mas o prefixo é o que importa aqui).
function ehAssociadoDeProjetos(colab) {
  return /^associados de projetos/i.test(String(colab?.setor || '').trim());
}

function _avdContarTarefa(tarefa) {
  const avaliado = (typeof COLABORADORES !== 'undefined' ? COLABORADORES : []).find(c => c.id === tarefa.avaliadoId);
  const ficha = typeof montarFichaDoColaborador === 'function' ? montarFichaDoColaborador(avaliado) : { organizacional: [], comportamental: [], performance: [] };
  let total = 0, feitos = 0, faltamNotas = 0, faltamAbertas = 0;
  tarefa.categorias.forEach(cat => {
    const comps = (typeof compsDaCategoria === 'function' ? compsDaCategoria(ficha, cat) : ficha[cat]) || [];
    comps.forEach(comp => (comp.indicadores || []).forEach(ind => {
      total++;
      if (getMinhaNotaResposta(tarefa.avaliadoId, tarefa.tipo, ind.id) != null) feitos++; else faltamNotas++;
    }));
    // A pergunta aberta que fecha a categoria ENTRA no total (05/08): o G&C
    // tornou a justificativa obrigatória — "é o que dá utilidade à nota". Só
    // conta onde a seção existe de fato; categoria sem competência nenhuma não
    // mostra a pergunta, e cobrá-la deixaria a ficha impossível de fechar.
    if (comps.length) {
      total++;
      if (String(getMinhaRespostaTexto(tarefa.avaliadoId, tarefa.tipo, _idAberta(cat)) || '').trim()) feitos++; else faltamAbertas++;
    }
  });
  return { total, feitos, faltamNotas, faltamAbertas, avaliado, ficha };
}

// Formulário de UMA tarefa (avaliado + tipo).
const AvaliarTarefaForm = ({ user, tarefa, ciclo, onVoltar }) => {
  const [, force] = React.useReducer(x => x + 1, 0);
  const { avaliado, ficha } = _avdContarTarefa(tarefa);
  if (!avaliado) return null;

  async function pick(categoria, ind, nota) {
    await salvarAvdResposta({
      cicloId: ciclo?.cicloId || null, avaliadoId: tarefa.avaliadoId, avaliadorId: user.id,
      tipo: tarefa.tipo, indicadorId: ind.id, categoria, nota,
    });
    force();
  }

  // 091 · pergunta aberta que fecha cada categoria. Salva na mesma tabela
  // (avd_respostas), com indicador_id = ABERTA_<categoria> e nota nula.
  async function salvarAberta(categoria, texto) {
    await salvarAvdResposta({
      cicloId: ciclo?.cicloId || null, avaliadoId: tarefa.avaliadoId, avaliadorId: user.id,
      tipo: tarefa.tipo, indicadorId: _idAberta(categoria), categoria, nota: null, texto,
    });
  }

  const secoes = tarefa.categorias.map(cat => ({
    categoria: cat, titulo: AVD_CAT_TITULO[cat],
    comps: (typeof compsDaCategoria === 'function' ? compsDaCategoria(ficha, cat) : ficha[cat]) || [],
  }));

  const primeiroNome = (avaliado.nome || '').split(' ').slice(0, 2).join(' ');
  const { total, feitos } = _avdContarTarefa(tarefa);
  const pct = total ? Math.round((feitos / total) * 100) : 0;
  const cor = AVD_TIPO_COR[tarefa.tipo];

  return (
    <div>
      <button onClick={onVoltar} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)', fontSize: 13, display: 'flex', alignItems: 'center', gap: 6, marginBottom: 14, padding: 0, fontFamily: 'var(--font-sans)' }}>
        <Icon name="chev_left" size={15} /> Voltar
      </button>

      {/* Cabeçalho fixo: quem, que papel, quanto falta */}
      <div style={{ position: 'sticky', top: 0, zIndex: 5, background: '#fff', borderRadius: 14, border: '1px solid var(--escalab-line)', borderTop: `4px solid ${cor}`, padding: '16px 18px', marginBottom: 20, boxShadow: '0 4px 16px rgba(0,0,0,.06)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 13, flexWrap: 'wrap' }}>
          <Avatar id={avaliado.id} nome={avaliado.nome} cor={avaliado.cor} iniciais={avaliado.iniciais} size={46} />
          <div style={{ flex: 1, minWidth: 140 }}>
            <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-.02em', lineHeight: 1.2 }}>{tarefa.tipo === 'auto' ? 'Sua autoavaliação' : primeiroNome}</div>
            <span style={{ display: 'inline-block', marginTop: 5, fontSize: 11, fontWeight: 800, letterSpacing: '.06em', textTransform: 'uppercase', color: cor, background: `${cor}18`, padding: '3px 10px', borderRadius: 20 }}>{AVD_TIPO_LABEL[tarefa.tipo]}</span>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 26, fontWeight: 900, color: pct === 100 ? '#00836B' : cor, lineHeight: 1 }}>{pct}%</div>
            <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', fontWeight: 600, marginTop: 2 }}>{feitos} de {total}</div>
          </div>
        </div>
        <div style={{ height: 8, borderRadius: 5, background: 'var(--escalab-line)', overflow: 'hidden', marginTop: 14 }}>
          <div style={{ height: '100%', width: `${pct}%`, background: pct === 100 ? '#00836B' : cor, borderRadius: 5, transition: 'width .3s var(--ease-out)' }} />
        </div>
      </div>

      <div style={{ display: 'flex', gap: 9, alignItems: 'flex-start', background: 'var(--escalab-brand-tint)', border: '1px solid var(--escalab-brand-soft)', borderRadius: 10, padding: '11px 14px', fontSize: 13, lineHeight: 1.5, color: 'var(--escalab-brand-deep)', marginBottom: 22 }}>
        <div style={{ flexShrink: 0, marginTop: 1 }}><Icon name="info" size={16} /></div>
        <div>Dê a nota de <strong>0 a 5</strong> em cada indicador e escreva a <strong>justificativa</strong> ao final de cada bloco — ela é obrigatória. Passe o mouse na nota pra ver o que ela significa. <strong>Tudo é salvo na hora</strong> — pode sair e voltar depois.</div>
      </div>

      {secoes.map(sec => (
        <div key={sec.categoria} style={{ marginBottom: 30 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <div style={{ fontSize: 15.5, fontWeight: 800, letterSpacing: '-.015em', color: 'var(--escalab-ink)' }}>{sec.titulo}</div>
            <div style={{ flex: 1, height: 1, background: 'var(--escalab-line)' }} />
          </div>
          {(!sec.comps || !sec.comps.length) && (
            <div style={{ fontSize: 13, color: 'var(--escalab-mute)', fontStyle: 'italic', padding: '8px 0' }}>
              A ficha deste cargo ainda não tem esta parte cadastrada.
            </div>
          )}
          {/* 091 · sem divisão por grupo: a ficha é competências + indicadores. */}
          {(sec.comps || []).map(comp => {
            return (
              <div key={comp.id} style={{ marginBottom: 20 }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, marginBottom: 10, color: 'var(--escalab-ink)' }}>{comp.nome}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {(comp.indicadores || []).map(ind => {
                    const nota = getMinhaNotaResposta(tarefa.avaliadoId, tarefa.tipo, ind.id);
                    const ok = nota != null;
                    return (
                      <div key={ind.id} style={{
                        display: 'flex', gap: 16, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap',
                        padding: '16px 18px', borderRadius: 12,
                        border: `1px solid ${ok ? 'var(--escalab-brand-soft)' : 'var(--escalab-line)'}`,
                        borderLeft: `4px solid ${ok ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`,
                        background: '#fff',
                        boxShadow: ok ? '0 2px 12px rgba(0,150,123,.08)' : '0 1px 4px rgba(0,0,0,.04)',
                        transition: 'all .2s var(--ease-out)',
                      }}>
                        <div style={{ flex: '1 1 240px', fontSize: 14, lineHeight: 1.5, fontWeight: 500, color: 'var(--escalab-ink)' }}>{ind.texto}</div>
                        <RespostaEscalaBotoes nota={nota} reguaKey={AVD_REGUA_DE_CATEGORIA[sec.categoria]} onPick={n => pick(sec.categoria, ind, n)} />
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}

          {/* Pergunta aberta que fecha a categoria (091) */}
          {(sec.comps || []).length > 0 && (
            <PerguntaAberta
              categoria={sec.categoria}
              titulo={sec.titulo}
              valor={getMinhaRespostaTexto(tarefa.avaliadoId, tarefa.tipo, _idAberta(sec.categoria))}
              onSalvar={txt => salvarAberta(sec.categoria, txt)}
            />
          )}
        </div>
      ))}

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap', paddingTop: 20, borderTop: '1px solid var(--escalab-line)' }}>
        <div style={{ fontSize: 13.5, color: pct === 100 ? '#00836B' : 'var(--escalab-mute)', fontWeight: pct === 100 ? 700 : 500 }}>
          {pct === 100 ? '✓ Tudo respondido — pode voltar tranquilo.' : `Faltam ${total - feitos} item(ns) — as justificativas de cada bloco também são obrigatórias.`}
        </div>
        <Button variant={pct === 100 ? 'primary' : 'outline'} icon={pct === 100 ? 'check' : 'chev_left'} onClick={onVoltar}>
          {pct === 100 ? 'Concluir e voltar' : 'Voltar à lista'}
        </Button>
      </div>
    </div>
  );
};

// Lista de tarefas + roteia pro formulário.
const AvaliarAVDView = ({ user }) => {
  const [, force] = React.useReducer(x => x + 1, 0);
  const [aberta, setAberta] = React.useState(null); // chave "avaliadoId_tipo"
  React.useEffect(() => {
    const h = () => force();
    window.addEventListener('escalab:avd-respostas-changed', h);
    window.addEventListener('escalab:avd-avaliadores-changed', h);
    window.addEventListener('escalab:avd-fichas-changed', h);
    return () => {
      window.removeEventListener('escalab:avd-respostas-changed', h);
      window.removeEventListener('escalab:avd-avaliadores-changed', h);
      window.removeEventListener('escalab:avd-fichas-changed', h);
    };
  }, []);

  const ciclo = typeof getCicloAvdAberto === 'function' ? getCicloAvdAberto() : null;
  const tarefas = typeof getTarefasAvaliacao === 'function' ? getTarefasAvaliacao(user.id) : [];
  const chave = t => `${t.avaliadoId}_${t.tipo}`;
  const tarefaAberta = tarefas.find(t => chave(t) === aberta);

  if (!ciclo) {
    return (
      <div style={{ background: '#fff8e1', border: '1px solid #f5c518', borderRadius: 10, padding: '14px 16px', fontSize: 13.5, color: '#5a4500', lineHeight: 1.5 }}>
        <strong>Nenhum ciclo de AVD aberto.</strong> Enquanto o ciclo estiver fechado, ninguém responde. Um admin abre o ciclo em <strong>Avaliações → menu do ciclo → Abrir ciclo</strong>.
      </div>
    );
  }

  if (tarefaAberta) {
    return <AvaliarTarefaForm user={user} tarefa={tarefaAberta} ciclo={ciclo} onVoltar={() => { setAberta(null); force(); }} />;
  }

  const resumo = tarefas.map(t => _avdContarTarefa(t));
  const concluidas = resumo.filter(r => r.total > 0 && r.feitos === r.total).length;
  const pendentes = tarefas.length - concluidas;

  return (
    <div>
      {/* Chamada principal · o que falta fazer */}
      <div style={{
        background: pendentes ? 'linear-gradient(135deg, var(--escalab-brand) 0%, var(--escalab-brand-deep) 100%)' : 'var(--escalab-brand-tint)',
        border: pendentes ? 'none' : '1px solid var(--escalab-brand-soft)',
        borderRadius: 16, padding: '22px 24px', marginBottom: 22,
        color: pendentes ? '#fff' : 'var(--escalab-brand-deep)',
        boxShadow: pendentes ? '0 8px 26px rgba(0,150,123,.26)' : 'none',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18, flexWrap: 'wrap',
      }}>
        <div style={{ minWidth: 200 }}>
          <div style={{ fontSize: 10.5, fontWeight: 800, letterSpacing: '.12em', textTransform: 'uppercase', opacity: .8 }}>
            Ciclo aberto · {ciclo.nome}
          </div>
          <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-.025em', margin: '5px 0 3px', lineHeight: 1.15 }}>
            {pendentes === 0
              ? 'Você respondeu tudo!'
              : `Você tem ${pendentes} avaliaç${pendentes === 1 ? 'ão' : 'ões'} para responder`}
          </div>
          <div style={{ fontSize: 13.5, opacity: .9, lineHeight: 1.45 }}>
            {pendentes === 0
              ? 'Nada pendente neste ciclo. Obrigado por participar.'
              : 'Escolha uma pessoa abaixo para começar. Cada nota é salva na hora.'}
          </div>
        </div>
        <div style={{ textAlign: 'center', flexShrink: 0 }}>
          <div style={{ fontSize: 40, fontWeight: 900, lineHeight: 1 }}>{concluidas}<span style={{ fontSize: 20, opacity: .65 }}>/{tarefas.length}</span></div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', opacity: .8, marginTop: 4 }}>Concluídas</div>
        </div>
      </div>

      {!tarefas.length && (
        <div style={{ border: '1px dashed var(--escalab-line)', borderRadius: 12, padding: '28px 20px', textAlign: 'center', color: 'var(--escalab-mute)', fontSize: 13.5 }}>
          Ninguém foi atribuído a você neste ciclo. Se você deveria avaliar alguém, fale com o Gente &amp; Cultura.
        </div>
      )}

      {/* Associado de projetos vê TODOS os outros associados como par, porque o
          G&C não tem como saber de antemão quem dividiu projeto com quem. A
          mensagem é o combinado: a pessoa escolhe quem realmente acompanhou. */}
      {ehAssociadoDeProjetos(user) && tarefas.some(t => t.tipo === 'par') && (
        <div style={{ background: 'var(--escalab-brand-tint)', border: '1px solid var(--escalab-brand-soft)', borderRadius: 10, padding: '11px 14px', marginBottom: 14, fontSize: 13, color: 'var(--escalab-brand-deep)', lineHeight: 1.5 }}>
          <strong>Avalie quem você trabalha junto.</strong> Aparecem aqui todos os associados de projetos — responda só sobre quem dividiu projeto com você neste ciclo.
        </div>
      )}

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(290px, 1fr))', gap: 14 }}>
        {tarefas.map((t, idx) => {
          const { total, feitos, faltamNotas, faltamAbertas, avaliado } = resumo[idx];
          if (!avaliado) return null;
          const pct = total ? Math.round((feitos / total) * 100) : 0;
          const completo = total > 0 && feitos === total;
          // Quem deu todas as notas e parou antes da justificativa lê
          // "49/51 respondidos" como "eu terminei" — e a ficha nunca fecha.
          // A justificativa virou obrigatória em 05/08, depois de muita gente
          // já ter respondido; o card tem que dizer o que falta, não só quanto.
          const soFaltaJustificativa = !completo && feitos > 0 && !faltamNotas && faltamAbertas > 0;
          const cor = AVD_TIPO_COR[t.tipo];
          const iniciada = feitos > 0 && !completo;
          return (
            <button key={chave(t)} onClick={() => setAberta(chave(t))}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 10px 26px rgba(0,0,0,.10)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = completo ? '0 2px 12px rgba(0,150,123,.10)' : '0 1px 5px rgba(0,0,0,.05)'; }}
              style={{
                textAlign: 'left', cursor: 'pointer', fontFamily: 'var(--font-sans)',
                border: `1px solid ${completo ? 'var(--escalab-brand-soft)' : 'var(--escalab-line)'}`,
                borderTop: `4px solid ${completo ? '#00836B' : cor}`,
                borderRadius: 14, padding: '16px 18px', background: '#fff',
                boxShadow: completo ? '0 2px 12px rgba(0,150,123,.10)' : '0 1px 5px rgba(0,0,0,.05)',
                transition: 'transform .2s var(--ease-out), box-shadow .2s var(--ease-out)',
              }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                <div style={{ position: 'relative', flexShrink: 0 }}>
                  <Avatar id={avaliado.id} nome={avaliado.nome} cor={avaliado.cor} iniciais={avaliado.iniciais} size={42} />
                  {completo && (
                    <div style={{ position: 'absolute', right: -3, bottom: -3, width: 18, height: 18, borderRadius: '50%', background: '#00836B', color: '#fff', border: '2px solid #fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name="check" size={10} />
                    </div>
                  )}
                </div>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-.01em', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {t.tipo === 'auto' ? 'Minha autoavaliação' : (avaliado.nome || '').split(' ').slice(0, 2).join(' ')}
                  </div>
                  <span style={{ display: 'inline-block', marginTop: 4, fontSize: 10, fontWeight: 800, letterSpacing: '.06em', textTransform: 'uppercase', color: cor, background: `${cor}15`, padding: '2px 8px', borderRadius: 20 }}>
                    {AVD_TIPO_LABEL[t.tipo]}
                  </span>
                </div>
              </div>

              <div style={{ height: 8, borderRadius: 5, background: 'var(--escalab-line)', overflow: 'hidden', marginBottom: 9 }}>
                <div style={{ height: '100%', width: `${pct}%`, background: completo ? '#00836B' : cor, borderRadius: 5, transition: 'width .3s var(--ease-out)' }} />
              </div>

              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                <span style={{ fontSize: 12.5, color: completo ? '#00836B' : 'var(--escalab-mute)', fontWeight: completo ? 700 : 500 }}>
                  {total === 0 ? 'Ficha do cargo não cadastrada'
                    : completo ? 'Concluída'
                    : soFaltaJustificativa ? `Falta a justificativa (${faltamAbertas})`
                    : `${feitos}/${total} respondidos`}
                </span>
                {total > 0 && !completo && (
                  <span style={{ fontSize: 12.5, fontWeight: 700, color: cor, display: 'flex', alignItems: 'center', gap: 3 }}>
                    {iniciada ? 'Continuar' : 'Começar'} <Icon name="chev_right" size={13} />
                  </span>
                )}
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
};

window.AvaliarAVDView = AvaliarAVDView;
