import React, { useState, useRef, useEffect, useMemo, memo } from 'react';
import './ConsultorCard.css';
import RawDataModal from './RawDataModal';
import { rankingService } from '../services/api';

const SELOS = {
  PRESID_CAMARA: { label: 'Presidente Camara', cor: 'selo-camara', icone: '👑' },
  COORD_PPG: { label: 'Coord. PPG', cor: 'selo-coord', icone: '🎓' },
  BPQ: { label: 'BPQ', cor: 'selo-bpq', icone: '🏅' },
  AUTOR_GP: { label: 'Autor GP', cor: 'selo-gp', icone: '🏆' },
  AUTOR_PREMIO: { label: 'Autor Premio', cor: 'selo-premio', icone: '🥇' },
  AUTOR_MENCAO: { label: 'Autor Mencao', cor: 'selo-mencao', icone: '🥈' },
  ORIENT_GP: { label: 'Orient. GP', cor: 'selo-gp', icone: '🏆' },
  ORIENT_PREMIO: { label: 'Orient. Premio', cor: 'selo-orient-premio', icone: '🎖️' },
  ORIENT_MENCAO: { label: 'Orient. Mencao', cor: 'selo-orient-mencao', icone: '📜' },
  COORIENT_GP: { label: 'Coorient. GP', cor: 'selo-gp', icone: '🏆' },
  COORIENT_PREMIO: { label: 'Coorient. Premio', cor: 'selo-coorient-premio', icone: '🎖️' },
  COORIENT_MENCAO: { label: 'Coorient. Mencao', cor: 'selo-coorient-mencao', icone: '📜' },
  ORIENT_TESE: { label: 'Orient. Tese', cor: 'selo-orient', icone: '📚' },
  ORIENT_DISS: { label: 'Orient. Diss.', cor: 'selo-orient', icone: '📄' },
  ORIENT_POS_DOC: { label: 'Orient. Pos-Doc', cor: 'selo-orient', icone: '🔬' },
  CO_ORIENT_TESE: { label: 'Coorient. Tese', cor: 'selo-coorient', icone: '📚' },
  CO_ORIENT_DISS: { label: 'Coorient. Diss.', cor: 'selo-coorient', icone: '📄' },
  CO_ORIENT_POS_DOC: { label: 'Coorient. Pos-Doc', cor: 'selo-coorient', icone: '🔬' },
};

const TIPOS_ATUACAO_CONFIG = {
  'Coordenador': { cor: 'tipo-coordenador', icone: '🎯' },
  'Consultor': { cor: 'tipo-consultor', icone: '💼' },
  'Avaliador': { cor: 'tipo-avaliador', icone: '📋' },
  'Premiado': { cor: 'tipo-premiado', icone: '🏆' },
  'Orientador': { cor: 'tipo-orientador', icone: '🎓' },
  'Bolsista CNPq': { cor: 'tipo-bolsista', icone: '🔬' },
  'Inscrito Premio': { cor: 'tipo-inscrito', icone: '📝' },
  'Projeto': { cor: 'tipo-projeto', icone: '📊' },
  'Evento': { cor: 'tipo-evento', icone: '📅' },
};

const gerarSelos = (consultor) => {
  const selos = [];

  const isPresidCamaraVigente = consultor.coordenacoes_capes?.some(
    (c) => c.codigo === 'CAM' && c.presidente && (c.ativo ?? !c.fim)
  );
  if (isPresidCamaraVigente) {
    selos.push({ ...SELOS.PRESID_CAMARA, qtd: 1, hint: 'Presidente Câmara Temática' });
  }

  if (consultor.coordenador_ppg) {
    selos.push({ ...SELOS.COORD_PPG, qtd: 1, hint: 'Coordenador de PPG' });
  }

  const bolsas = Array.isArray(consultor.bolsas_cnpq) ? consultor.bolsas_cnpq : [];
  if (bolsas.length > 0) {
    const porNivel = {};
    for (const b of bolsas) {
      const nivel = (b.nivel || 'N/A').toString().trim();
      porNivel[nivel] = (porNivel[nivel] || 0) + 1;
    }
    const niveis = Object.keys(porNivel).sort();
    const label = niveis.length === 1 ? `BPQ ${niveis[0]}` : 'BPQ';
    const niveisStr = niveis.join(', ');
    selos.push({ ...SELOS.BPQ, label, qtd: bolsas.length, hint: `BPQ NIVEL ${niveisStr}` });
  }

  const premiacoes = Array.isArray(consultor.premiacoes) ? consultor.premiacoes : [];

  const gerarSelosPorPapel = (papel, seloGP, seloPremio, seloMencao, hintPrefix) => {
    const lista = premiacoes.filter((p) => (p.papel || '').toString().toLowerCase() === papel.toLowerCase());
    const gp = lista.filter((p) => p.codigo === 'PREMIACAO_GP_AUTOR').length;
    const premio = lista.filter((p) => p.codigo === 'PREMIACAO_AUTOR').length;
    const mencao = lista.filter((p) => p.codigo === 'MENCAO_AUTOR').length;

    if (gp > 0) selos.push({ ...seloGP, qtd: gp, hint: `${hintPrefix} - Grande Prêmio` });
    if (premio > 0) selos.push({ ...seloPremio, qtd: premio, hint: `${hintPrefix} - Prêmio` });
    if (mencao > 0) selos.push({ ...seloMencao, qtd: mencao, hint: `${hintPrefix} - Menção Honrosa` });
  };

  gerarSelosPorPapel('autor', SELOS.AUTOR_GP, SELOS.AUTOR_PREMIO, SELOS.AUTOR_MENCAO, 'Autor');
  gerarSelosPorPapel('orientador', SELOS.ORIENT_GP, SELOS.ORIENT_PREMIO, SELOS.ORIENT_MENCAO, 'Orientador');
  gerarSelosPorPapel('coorientador', SELOS.COORIENT_GP, SELOS.COORIENT_PREMIO, SELOS.COORIENT_MENCAO, 'Coorientador');

  const orientacoes = Array.isArray(consultor.orientacoes) ? consultor.orientacoes : [];

  const gerarSelosOrientacaoContagem = (codigo, isCoorientacao, seloBase) => {
    const lista = orientacoes.filter((o) => o.codigo === codigo && (isCoorientacao ? o.coorientacao : !o.coorientacao));
    if (lista.length > 0) {
      selos.push({ ...seloBase, qtd: lista.length, hint: `${seloBase.label} (${lista.length}x)` });
    }
  };

  gerarSelosOrientacaoContagem('ORIENT_POS_DOC', false, SELOS.ORIENT_POS_DOC);
  gerarSelosOrientacaoContagem('ORIENT_TESE', false, SELOS.ORIENT_TESE);
  gerarSelosOrientacaoContagem('ORIENT_DISS', false, SELOS.ORIENT_DISS);

  gerarSelosOrientacaoContagem('CO_ORIENT_POS_DOC', true, SELOS.CO_ORIENT_POS_DOC);
  gerarSelosOrientacaoContagem('CO_ORIENT_TESE', true, SELOS.CO_ORIENT_TESE);
  gerarSelosOrientacaoContagem('CO_ORIENT_DISS', true, SELOS.CO_ORIENT_DISS);

  return selos;
};

const SelosBadges = ({ selos, compacto = false }) => {
  if (!selos || selos.length === 0) return null;

  const selosExibidos = compacto ? selos.slice(0, 4) : selos;
  const selosOcultos = compacto && selos.length > 4 ? selos.length - 4 : 0;

  return (
    <div className={`selos-container ${compacto ? 'selos-compacto' : ''}`}>
      {selosExibidos.map((selo, idx) => (
        <span
          key={idx}
          className={`selo ${selo.cor}`}
          title={selo.hint || `${selo.label}${selo.qtd > 1 ? ` (${selo.qtd}x)` : ''}`}
        >
          <span className="selo-icone">{selo.icone}</span>
          {!compacto && <span className="selo-label">{selo.label}</span>}
          {!compacto && <span className="selo-qtd">{selo.qtd || 1}</span>}
        </span>
      ))}
      {selosOcultos > 0 && (
        <span className="selo selo-mais" title={`+${selosOcultos} selos`}>+{selosOcultos}</span>
      )}
    </div>
  );
};

const TiposAtuacaoBadges = ({ tipos, exibirTodos = false }) => {
  if (!tipos || tipos.length === 0) return null;

  const tiposExibidos = exibirTodos ? tipos : tipos.slice(0, 4);
  const tiposOcultos = !exibirTodos && tipos.length > 4 ? tipos.length - 4 : 0;

  return (
    <div className={`tipos-atuacao-container ${exibirTodos ? 'tipos-expandido' : ''}`}>
      {tiposExibidos.map((tipo, idx) => {
        const config = TIPOS_ATUACAO_CONFIG[tipo] || { cor: 'tipo-default', icone: '📌' };
        return (
          <span key={idx} className={`tipo-atuacao ${config.cor}`} title={tipo}>
            <span className="tipo-icone">{config.icone}</span>
            <span className="tipo-label">{tipo}</span>
          </span>
        );
      })}
      {tiposOcultos > 0 && (
        <span className="tipo-atuacao tipo-mais" title={tipos.slice(4).join(', ')}>
          +{tiposOcultos}
        </span>
      )}
    </div>
  );
};

const FORMULAS = {
  bloco_a: {
    titulo: 'Coordenacao CAPES',
    descricao: 'CA=200 | CAJ=150 | CAJ_MP=120 | CAM=100\nTempo: multiplicador por ano (anos completos)\nBônus atualidade (mandato vigente) + Retorno (mandato anterior)',
  },
  bloco_b: {
    titulo: 'Coordenacao PPG',
    descricao: 'Reservado no V1: PPG_COORD base=0 | teto=0 (dados incompletos no ATUACAPES para pontuar).',
  },
  bloco_c: {
    titulo: 'Consultoria',
    descricao: 'CONS_ATIVO=150 | CONS_HIST=100 | CONS_FALECIDO=100\nTempo: 5 pts/ano (max 50)\nContinuidade: 3a=+5, 5a=+10, 8a+=+20 (escalonado)\nRetorno (reativação): +15 (uma vez)',
  },
  bloco_d: {
    titulo: 'Premiacoes/Avaliacoes',
    descricao: 'Premiações: GP=100 (teto 300) | Prêmio=50 (teto 150) | Menção=30 (teto 90)\nBolsas: BPQ=30 (teto 60)\nInscrições/Avaliações/Comissões/Participações (com tetos por código)\nOrientações/Bancas: apenas selos (0 pts)',
  },
};

const PONTOS_BASE = {
  CA: 200, CAJ: 150, CAJ_MP: 120, CAM: 100,
  CONS_ATIVO: 150, CONS_HIST: 100, CONS_FALECIDO: 100,
  INSC_AUTOR: 10, INSC_INST_AUTOR: 20,
  AVAL_COMIS_PREMIO: 30, AVAL_COMIS_GP: 40,
  COORD_COMIS_PREMIO: 40, COORD_COMIS_GP: 50,
  PREMIACAO_GP_AUTOR: 100, PREMIACAO_AUTOR: 50, MENCAO_AUTOR: 30,
  BOL_BPQ_NIVEL: 30,
  EVENTO: 1, PROJ: 10,
  ORIENT_POS_DOC: 0, ORIENT_TESE: 0, ORIENT_DISS: 0,
  CO_ORIENT_POS_DOC: 0, CO_ORIENT_TESE: 0, CO_ORIENT_DISS: 0,
  MB_BANCA_POS_DOC: 0, MB_BANCA_TESE: 0, MB_BANCA_DISS: 0,
};

const TETOS = {
  INSC_AUTOR: { teto: 20, doc: '3.3 Inscrições', bonus: '+2/participação (max 10)' },
  INSC_INST_AUTOR: { teto: 50, doc: '3.3 Inscrições', bonus: '+5/participação (max 10)' },
  AVAL_COMIS_PREMIO: { teto: 60, doc: '3.4 Avaliação/Comissão', bonus: '+2/ano (max 15)' },
  AVAL_COMIS_GP: { teto: 80, doc: '3.4 Avaliação/Comissão', bonus: '+3/ano (max 20)' },
  COORD_COMIS_PREMIO: { teto: 100, doc: '3.4 Avaliação/Comissão', bonus: '+4/ano (max 20)' },
  COORD_COMIS_GP: { teto: 120, doc: '3.4 Avaliação/Comissão', bonus: '+6/ano (max 20)' },
  PREMIACAO_GP_AUTOR: { teto: 300, doc: '3.4 Premiações e Bolsas' },
  PREMIACAO_AUTOR: { teto: 150, doc: '3.4 Premiações e Bolsas' },
  MENCAO_AUTOR: { teto: 90, doc: '3.4 Premiações e Bolsas' },
  EVENTO: { teto: 5, doc: '3.5 Participações Acadêmicas', bonus: '+1/participação (max 10)' },
  PROJ: { teto: 30, doc: '3.5 Participações Acadêmicas', bonus: '+2/participação (max 10)' },
  BOL_BPQ_NIVEL: { teto: 60, doc: '3.4 Premiações e Bolsas' },
  ORIENT_POS_DOC: { teto: 0, doc: 'Selo (sem pontuação)' },
  ORIENT_TESE: { teto: 0, doc: 'Selo (sem pontuação)' },
  ORIENT_DISS: { teto: 0, doc: 'Selo (sem pontuação)' },
  CO_ORIENT_POS_DOC: { teto: 0, doc: 'Selo (sem pontuação)' },
  CO_ORIENT_TESE: { teto: 0, doc: 'Selo (sem pontuação)' },
  CO_ORIENT_DISS: { teto: 0, doc: 'Selo (sem pontuação)' },
  MB_BANCA_POS_DOC: { teto: 0, doc: 'Selo (sem pontuação)' },
  MB_BANCA_TESE: { teto: 0, doc: 'Selo (sem pontuação)' },
  MB_BANCA_DISS: { teto: 0, doc: 'Selo (sem pontuação)' },
};

const ScoreItemWithTooltip = ({ value, label, formula, style }) => (
  <div className="score-item-wrapper">
    <div className="score-item" style={style}>
      <div className="score-item-value" style={style}>{value}</div>
      <div className="score-item-label">{label}</div>
    </div>
    {formula && <div className="score-tooltip">{formula}</div>}
  </div>
);

const ConsultorCard = memo(({ consultor, highlight, selecionado, onToggleSelecionado }) => {
  const [expanded, setExpanded] = useState(false);
  const [showRawModal, setShowRawModal] = useState(false);
  const cardRef = useRef(null);

  useEffect(() => {
    if (highlight && cardRef.current) {
      const timeoutId = setTimeout(() => {
        cardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }, 100);
      return () => clearTimeout(timeoutId);
    }
  }, [highlight]);

  const getRankClass = (rank) => {
    if (rank === 1) return 'rank-1';
    if (rank === 2) return 'rank-2';
    if (rank === 3) return 'rank-3';
    return '';
  };

  const formatDate = (dateStr) => {
    if (!dateStr) return 'Atual';
    return new Date(dateStr).toLocaleDateString('pt-BR');
  };

  const handleCheckboxClick = (e) => {
    e.stopPropagation();
    onToggleSelecionado(consultor);
  };

  const handleRawDataClick = (e) => {
    e.stopPropagation();
    setShowRawModal(true);
  };

  const { consultoria, pontuacao } = consultor;
  const blocoA = pontuacao?.bloco_a || { total: consultor.bloco_a || 0 };
  const blocoB = pontuacao?.bloco_b || { total: consultor.bloco_b || 0 };
  const blocoC = pontuacao?.bloco_c || { total: consultor.bloco_c || 0 };
  const blocoD = pontuacao?.bloco_d || { total: consultor.bloco_d || 0 };
  const pontuacaoTotal = (blocoA.total || 0) + (blocoB.total || 0) + (blocoC.total || 0) + (blocoD.total || 0);

  const selos = useMemo(() => gerarSelos(consultor), [consultor]);

  return (
    <div ref={cardRef} className={`ranking-card ${expanded ? 'expanded' : ''} ${highlight ? 'highlight' : ''} ${selecionado ? 'selecionado' : ''}`} onClick={() => setExpanded(!expanded)}>
      <div className="card-main">
        <div className="selecao-checkbox" onClick={handleCheckboxClick} title="Selecionar para comparar">
          <input
            type="checkbox"
            checked={selecionado}
            onChange={() => {}}
          />
          <span className="checkmark"></span>
        </div>
        <div className={`rank ${getRankClass(consultor.posicao || consultor.rank)}`}>
          <span className={`rank-number rank-digits-${String(consultor.posicao || consultor.rank).length}`}>
            #{consultor.posicao || consultor.rank}
          </span>
        </div>

        <div className="card-info">
          <div className="consultant-name">
            {import.meta.env.VITE_HOST_ATUACAPES && consultor.id_pessoa && (
              <a
                href={`${import.meta.env.VITE_HOST_ATUACAPES}/perfil/${consultor.id_pessoa}`}
                target="_blank"
                rel="noopener noreferrer"
                className="link-atuacapes"
                onClick={(e) => e.stopPropagation()}
                title="Ver perfil no ATUACAPES"
              >
                ↗
              </a>
            )}
            {consultor.nome}
            {consultor.ativo && <span className="badge badge-ativo">ATIVO</span>}
            {!consultor.ativo && <span className="badge badge-historico">HISTORICO</span>}
            {consultor.veterano && <span className="badge badge-veterano">VETERANO</span>}
            <SelosBadges selos={selos} compacto={true} />
          </div>
          <div className="consultant-area">
            {consultor.anos_atuacao} anos de atuacao
            {consultoria?.inicio && ` | Desde ${formatDate(consultoria.inicio)}`}
          </div>
        </div>

        <div className="card-stats">
          <div className="stat" title={(() => {
            const coords = consultor.coordenacoes_capes || [];
            if (coords.length === 0) return 'Sem coordenação CAPES';
            const prioridade = { CA: 1, CAJ: 2, CAJ_MP: 3, CAM: 4 };
            const sorted = [...coords].sort((a, b) => {
              const aAtivo = a.ativo ?? !a.fim;
              const bAtivo = b.ativo ?? !b.fim;
              if (aAtivo !== bAtivo) return bAtivo ? 1 : -1;
              return (prioridade[a.codigo] || 99) - (prioridade[b.codigo] || 99);
            });
            return sorted[0]?.area_avaliacao || 'Coordenação CAPES';
          })()}>
            <div className="stat-value">{(() => {
              const coords = consultor.coordenacoes_capes || [];
              if (coords.length === 0) return '-';
              const prioridade = { CA: 1, CAJ: 2, CAJ_MP: 3, CAM: 4 };
              const sorted = [...coords].sort((a, b) => {
                const aAtivo = a.ativo ?? !a.fim;
                const bAtivo = b.ativo ?? !b.fim;
                if (aAtivo !== bAtivo) return bAtivo ? 1 : -1;
                return (prioridade[a.codigo] || 99) - (prioridade[b.codigo] || 99);
              });
              return sorted[0]?.codigo || '-';
            })()}</div>
            <div className="stat-label">Coord.</div>
          </div>
          <div className="stat" title={`${consultoria?.anos_consecutivos || 0} anos consecutivos`}>
            <div className="stat-value">{consultoria?.anos_consecutivos || 0}</div>
            <div className="stat-label">Anos Consec.</div>
          </div>
          <div className="stat">
            <div className="score-value">{pontuacaoTotal}</div>
            <div className="stat-label">Score</div>
          </div>
          <button
            className="btn-raw-data"
            onClick={handleRawDataClick}
            title="Ver dados completos do ATUACAPES"
          >
            ⋮
          </button>
          <div className="expand-icon">{expanded ? '▲' : '▼'}</div>
        </div>
      </div>

      {expanded && (
        <div className="card-details">
          <div className="details-grid">
            <div className="detail-section">
              <h4>Pontuacao Total</h4>
              <div className="score-breakdown-total">
                <ScoreItemWithTooltip
                  value={blocoA.total}
                  label="BLOCO A"
                  formula={FORMULAS.bloco_a.descricao}
                  style={{ color: blocoA.total > 0 ? 'var(--accent-2)' : 'var(--muted)' }}
                />
                <ScoreItemWithTooltip
                  value={blocoB.total}
                  label="BLOCO B"
                  formula={FORMULAS.bloco_b.descricao}
                  style={{ color: blocoB.total > 0 ? 'var(--accent)' : 'var(--muted)' }}
                />
                <ScoreItemWithTooltip
                  value={blocoC.total}
                  label="BLOCO C"
                  formula={FORMULAS.bloco_c.descricao}
                  style={{ color: blocoC.total > 0 ? 'var(--gold)' : 'var(--muted)' }}
                />
                <ScoreItemWithTooltip
                  value={blocoD.total}
                  label="BLOCO D"
                  formula={FORMULAS.bloco_d.descricao}
                  style={{ color: blocoD.total > 0 ? 'var(--bronze)' : 'var(--muted)' }}
                />
                <div className="score-item-wrapper">
                  <div className="score-item score-total">
                    <div className="score-item-value">{pontuacaoTotal}</div>
                    <div className="score-item-label">TOTAL</div>
                  </div>
                  <div className="score-tooltip">Bloco A + Bloco B + Bloco C + Bloco D</div>
                </div>
              </div>
            </div>

            {blocoA.atuacoes && blocoA.atuacoes.length > 0 && (
              <BlocoDetalhes titulo="A - Coordenacao CAPES" bloco={blocoA} cor="var(--accent-2)" />
            )}

            {(blocoB.total > 0 || (blocoB.atuacoes && blocoB.atuacoes.length > 0)) && (
              <BlocoDetalhes titulo="B - Coordenacao PPG" bloco={blocoB} cor="var(--accent)" />
            )}

            {blocoC.atuacoes && blocoC.atuacoes.length > 0 && (
              <BlocoDetalhes titulo="C - Consultoria" bloco={blocoC} cor="var(--gold)" />
            )}

            {blocoD.atuacoes && blocoD.atuacoes.length > 0 && (
              <BlocoDetalhes titulo="D - Premiacoes/Avaliacoes" bloco={blocoD} cor="var(--bronze)" />
            )}
          </div>

          {consultor.tipos_atuacao?.length > 0 && (
            <div className="detail-section tipos-section">
              <h4>Tipos de Atuacao</h4>
              <TiposAtuacaoBadges tipos={consultor.tipos_atuacao} exibirTodos={true} />
            </div>
          )}

          {selos.length > 0 && (
            <div className="detail-section selos-section">
              <h4>Selos e Reconhecimentos</h4>
              <SelosBadges selos={selos} />
            </div>
          )}

          {consultoria?.vinculos?.length > 0 && (
            <div className="extra-details">
              <h4>Vinculos de Consultoria</h4>
              <div className="list-items">
                {[...consultoria.vinculos]
                  .sort((a, b) => new Date(b.periodo?.inicio || 0) - new Date(a.periodo?.inicio || 0))
                  .map((vinculo, idx) => {
                  const periodo = vinculo.periodo || {};
                  const isAtivo = periodo.ativo ?? !periodo.fim;
                  return (
                    <div key={idx} className="list-item">
                      <span className={`badge ${isAtivo ? 'badge-ativo' : 'badge-historico'}`}>
                        {isAtivo ? 'ATIVO' : 'ENCERRADO'}
                      </span>
                      <span className="ies-nome">
                        {vinculo.ies
                          ? vinculo.ies.sigla && vinculo.ies.nome
                            ? `${vinculo.ies.sigla} - ${vinculo.ies.nome}`
                            : vinculo.ies.sigla || vinculo.ies.nome
                          : 'IES nao informada'}
                      </span>
                      <span className="muted">
                        {formatDate(periodo.inicio)} - {isAtivo ? 'Atual' : formatDate(periodo.fim)}
                      </span>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {consultor.coordenacoes_capes?.length > 0 && (
            <div className="extra-details">
              <h4>Coordenacoes CAPES</h4>
              <div className="list-items">
                {[...consultor.coordenacoes_capes]
                  .sort((a, b) => new Date(b.inicio || b.periodo?.inicio || 0) - new Date(a.inicio || a.periodo?.inicio || 0))
                  .map((coord, idx) => (
                  <div key={idx} className="list-item">
                    <span className="badge">{coord.codigo || coord.tipo}</span>
                    <span className="pontos">{PONTOS_BASE[coord.codigo] || 0} pts</span>
                    <span>{coord.area_avaliacao}</span>
                    <span className="muted">
                      {formatDate(coord.inicio || coord.periodo?.inicio)} - {formatDate(coord.fim || coord.periodo?.fim)}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {consultor.premiacoes?.length > 0 && (
            <div className="extra-details">
              <h4>Premiacoes</h4>
              <div className="list-items">
                {[...consultor.premiacoes]
                  .sort((a, b) => (b.ano || 0) - (a.ano || 0))
                  .map((prem, idx) => (
                  <div key={idx} className="list-item">
                    <span className="badge">{prem.codigo}</span>
                    <span className="pontos">{PONTOS_BASE[prem.codigo] || 0} pts</span>
                    <span>{prem.nome_premio}</span>
                    <span className="muted">{prem.ano}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {consultor.avaliacoes_comissao?.length > 0 && (
            <div className="extra-details">
              <h4>Avaliacoes de Comissao</h4>
              <div className="list-items">
                {[...consultor.avaliacoes_comissao]
                  .sort((a, b) => (b.ano || 0) - (a.ano || 0))
                  .map((aval, idx) => (
                  <div key={idx} className="list-item">
                    <span className="badge">{aval.codigo}</span>
                    <span className="pontos">{PONTOS_BASE[aval.codigo] || 0} pts</span>
                    <span>{aval.nome_comissao || aval.premio}</span>
                    <span className="muted">{aval.ano}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {consultor.inscricoes?.length > 0 && (
            <div className="extra-details">
              <h4>Inscricoes</h4>
              <div className="list-items">
                {[...consultor.inscricoes]
                  .sort((a, b) => (b.ano || 0) - (a.ano || 0))
                  .map((insc, idx) => (
                  <div key={idx} className="list-item">
                    <span className="badge">{insc.codigo}</span>
                    <span className="pontos">{PONTOS_BASE[insc.codigo] || 0} pts</span>
                    <span>{insc.premio}</span>
                    <span className="muted">{insc.ano}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {consultor.participacoes?.length > 0 && (
            <div className="extra-details">
              <h4>Participacoes (Eventos/Projetos)</h4>
              <div className="list-items">
                {[...consultor.participacoes]
                  .sort((a, b) => (b.ano || 0) - (a.ano || 0))
                  .slice(0, 10)
                  .map((part, idx) => (
                  <div key={idx} className="list-item">
                    <span className="badge">{part.codigo}</span>
                    <span className="pontos">{PONTOS_BASE[part.codigo] || 0} pts</span>
                    <span>{part.descricao || part.tipo}</span>
                    <span className="muted">{part.ano}</span>
                  </div>
                ))}
                {consultor.participacoes.length > 10 && (
                  <div className="list-item muted">... e mais {consultor.participacoes.length - 10} participacoes</div>
                )}
              </div>
            </div>
          )}
        </div>
      )}

      {showRawModal && (
        <RawDataModal
          idPessoa={consultor.id_pessoa}
          nome={consultor.nome}
          onClose={() => setShowRawModal(false)}
        />
      )}
    </div>
  );
});

ConsultorCard.displayName = 'ConsultorCard';

const BlocoDetalhes = memo(({ titulo, bloco, cor }) => (
  <div className="detail-section">
    <h4 style={{ color: cor }}>{titulo}</h4>
    <div className="score-breakdown">
      {bloco.atuacoes?.map((at, idx) => (
        <div key={idx} className="score-item-wrapper">
          <div className="score-item">
            <div className="score-item-value">{at.total}</div>
            <div className="score-item-label">{at.codigo}</div>
          </div>
          <div className="score-tooltip">
            {(() => {
              const base = at.base || 0;
              const tempo = at.tempo || 0;
              const bonus = at.bonus || 0;
              const bruto = base + tempo + bonus;
              const meta = TETOS[at.codigo];
              const hasTeto = meta && meta.teto > 0;
              const capped = hasTeto && bruto > meta.teto;
              const unidade = at.quantidade > 1 ? Math.round(base / at.quantidade) : null;

              const partes = [];
              partes.push(
                unidade
                  ? `Base ${unidade} x ${at.quantidade} = ${base}`
                  : `Base ${base}`
              );
              if (tempo) partes.push(`Tempo ${tempo}`);
              if (bonus) partes.push(`Bônus ${bonus}`);
              if (hasTeto) partes.push(`Teto ${meta.teto}`);
              if (meta && meta.bonus) partes.push(meta.bonus);
              partes.push(capped ? `Total ${at.total} (teto)` : `Total ${at.total}`);
              return partes.join(" | ");
            })()}
          </div>
        </div>
      ))}
      <div className="score-item-wrapper">
        <div className="score-item score-total">
          <div className="score-item-value">{bloco.total}</div>
          <div className="score-item-label">TOTAL</div>
        </div>
      </div>
    </div>
  </div>
));

BlocoDetalhes.displayName = 'BlocoDetalhes';

export default ConsultorCard;
