ranking/frontend/src/components/CompararModal.jsx

import React from 'react';
import './CompararModal.css';

const CompararModal = ({ consultor1, consultor2, onClose }) => {
  if (!consultor1 || !consultor2) return null;

  const calcularDiferenca = (val1, val2) => {
    const diff = val1 - val2;
    if (diff === 0) return { texto: '=', classe: 'igual' };
    if (diff > 0) return { texto: `+${diff}`, classe: 'maior' };
    return { texto: `${diff}`, classe: 'menor' };
  };

  const renderLinhaComparacao = (label, val1, val2, cor) => {
    const diff1 = calcularDiferenca(val1, val2);
    const diff2 = calcularDiferenca(val2, val1);

    return (
      <div className="linha-comparacao">
        <div className={`valor ${diff1.classe}`} style={{ '--cor-componente': cor }}>
          <span className="valor-numero">{val1}</span>
          <span className="valor-diff">{diff1.texto}</span>
        </div>
        <div className="label-centro">{label}</div>
        <div className={`valor ${diff2.classe}`} style={{ '--cor-componente': cor }}>
          <span className="valor-numero">{val2}</span>
          <span className="valor-diff">{diff2.texto}</span>
        </div>
      </div>
    );
  };

  const p1 = consultor1.pontuacao || {};
  const p2 = consultor2.pontuacao || {};

  const blocoA1 = p1.bloco_a || { total: consultor1.bloco_a || 0 };
  const blocoA2 = p2.bloco_a || { total: consultor2.bloco_a || 0 };
  const blocoB1 = p1.bloco_b || { total: consultor1.bloco_b || 0 };
  const blocoB2 = p2.bloco_b || { total: consultor2.bloco_b || 0 };
  const blocoC1 = p1.bloco_c || { total: consultor1.bloco_c || 0 };
  const blocoC2 = p2.bloco_c || { total: consultor2.bloco_c || 0 };
  const blocoD1 = p1.bloco_d || { total: consultor1.bloco_d || 0 };
  const blocoD2 = p2.bloco_d || { total: consultor2.bloco_d || 0 };

  const total1 = (blocoA1.total || 0) + (blocoB1.total || 0) + (blocoC1.total || 0) + (blocoD1.total || 0);
  const total2 = (blocoA2.total || 0) + (blocoB2.total || 0) + (blocoC2.total || 0) + (blocoD2.total || 0);

  const c1 = consultor1.consultoria;
  const c2 = consultor2.consultoria;

  const somarAtuacoes = (atuacoes, campo) => {
    if (!atuacoes || !Array.isArray(atuacoes)) return 0;
    return atuacoes.reduce((sum, a) => sum + (a[campo] || 0), 0);
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>&times;</button>

        <h2 className="modal-titulo">Comparar Consultores</h2>

        <div className="comparacao-header">
          <div className="consultor-header consultor-1">
            <div className="rank-badge">#{consultor1.posicao || consultor1.rank}</div>
            <div className="info">
              <span className="nome">{consultor1.nome}</span>
              <span className="anos">{consultor1.anos_atuacao} anos</span>
              {consultor1.ativo && <span className="badge badge-ativo">ATIVO</span>}
              {!consultor1.ativo && <span className="badge badge-historico">HIST.</span>}
            </div>
          </div>
          <div className="vs">VS</div>
          <div className="consultor-header consultor-2">
            <div className="rank-badge">#{consultor2.posicao || consultor2.rank}</div>
            <div className="info">
              <span className="nome">{consultor2.nome}</span>
              <span className="anos">{consultor2.anos_atuacao} anos</span>
              {consultor2.ativo && <span className="badge badge-ativo">ATIVO</span>}
              {!consultor2.ativo && <span className="badge badge-historico">HIST.</span>}
            </div>
          </div>
        </div>

        <div className="comparacao-secao">
          <h3>Pontuacao Total</h3>
          {renderLinhaComparacao('TOTAL', total1, total2, 'var(--accent)')}
        </div>

        <div className="comparacao-secao">
          <h3 style={{ color: 'var(--accent-2)' }}>A - Coordenacao CAPES</h3>
          {renderLinhaComparacao('Total', blocoA1.total, blocoA2.total, 'var(--accent-2)')}
          {blocoA1.atuacoes && blocoA2.atuacoes && (
            <>
              {renderLinhaComparacao('Base', somarAtuacoes(blocoA1.atuacoes, 'base'), somarAtuacoes(blocoA2.atuacoes, 'base'), 'var(--accent-2)')}
              {renderLinhaComparacao('Tempo', somarAtuacoes(blocoA1.atuacoes, 'tempo'), somarAtuacoes(blocoA2.atuacoes, 'tempo'), 'var(--accent-2)')}
              {renderLinhaComparacao('Bonus', somarAtuacoes(blocoA1.atuacoes, 'bonus'), somarAtuacoes(blocoA2.atuacoes, 'bonus'), 'var(--accent-2)')}
            </>
          )}
        </div>

        <div className="comparacao-secao">
          <h3 style={{ color: 'var(--accent)' }}>B - Coordenacao PPG</h3>
          {renderLinhaComparacao('Total', blocoB1.total, blocoB2.total, 'var(--accent)')}
        </div>

        <div className="comparacao-secao">
          <h3 style={{ color: 'var(--gold)' }}>C - Consultoria</h3>
          {renderLinhaComparacao('Total', blocoC1.total, blocoC2.total, 'var(--gold)')}
          {blocoC1.atuacoes && blocoC2.atuacoes && (
            <>
              {renderLinhaComparacao('Base', somarAtuacoes(blocoC1.atuacoes, 'base'), somarAtuacoes(blocoC2.atuacoes, 'base'), 'var(--gold)')}
              {renderLinhaComparacao('Tempo', somarAtuacoes(blocoC1.atuacoes, 'tempo'), somarAtuacoes(blocoC2.atuacoes, 'tempo'), 'var(--gold)')}
              {renderLinhaComparacao('Bonus', somarAtuacoes(blocoC1.atuacoes, 'bonus'), somarAtuacoes(blocoC2.atuacoes, 'bonus'), 'var(--gold)')}
            </>
          )}
        </div>

        <div className="comparacao-secao">
          <h3 style={{ color: 'var(--bronze)' }}>D - Premiacoes/Avaliacoes</h3>
          {renderLinhaComparacao('Total', blocoD1.total, blocoD2.total, 'var(--bronze)')}
          {blocoD1.atuacoes && blocoD2.atuacoes && (
            <>
              {renderLinhaComparacao('Base', somarAtuacoes(blocoD1.atuacoes, 'base'), somarAtuacoes(blocoD2.atuacoes, 'base'), 'var(--bronze)')}
              {renderLinhaComparacao('Tempo', somarAtuacoes(blocoD1.atuacoes, 'tempo'), somarAtuacoes(blocoD2.atuacoes, 'tempo'), 'var(--bronze)')}
              {renderLinhaComparacao('Bonus', somarAtuacoes(blocoD1.atuacoes, 'bonus'), somarAtuacoes(blocoD2.atuacoes, 'bonus'), 'var(--bronze)')}
            </>
          )}
        </div>

        {(c1 || c2) && (
          <div className="comparacao-secao">
            <h3>Dados de Consultoria</h3>
            {renderLinhaComparacao('Anos Consec.', c1?.anos_consecutivos || 0, c2?.anos_consecutivos || 0, 'var(--muted)')}
            {renderLinhaComparacao('Retornos', c1?.retornos || 0, c2?.retornos || 0, 'var(--muted)')}
          </div>
        )}

        <div className="comparacao-resumo">
          <div className="resumo-item">
            <span className="resumo-label">Vencedor por pontuacao:</span>
            <span className="resumo-valor">
              {total1 > total2
                ? consultor1.nome.split(' ').slice(0, 2).join(' ')
                : total2 > total1
                  ? consultor2.nome.split(' ').slice(0, 2).join(' ')
                  : 'Empate'}
            </span>
          </div>
          <div className="resumo-item">
            <span className="resumo-label">Diferenca total:</span>
            <span className="resumo-valor diferenca">
              {Math.abs(total1 - total2)} pts
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CompararModal;