import React from 'react';
import { CheckCircle, XCircle, Target, Zap, Trophy, Eye } from 'lucide-react';
import { LotomaniaGame, LotomaniaResult } from '../types';
import { LotomaniaAlgorithm } from '../utils/lotomaniaAlgorithm';

interface RealComparisonDemoProps {
  game: LotomaniaGame;
  result: LotomaniaResult | null;
  algorithm: LotomaniaAlgorithm;
}

const RealComparisonDemo: React.FC<RealComparisonDemoProps> = ({
  game,
  result,
  algorithm
}) => {
  if (!result) {
    return (
      <div className="bg-gray-100 p-6 rounded-xl text-center">
        <Eye className="w-8 h-8 text-gray-400 mx-auto mb-2" />
        <p className="text-gray-600">Carregando resultado da Lotomania para comparação...</p>
      </div>
    );
  }

  // Pegar números exatos marcados no jogo
  const gameNumbers = algorithm.getNumbersFromGame(game);
  const resultNumbers = result.numeros;

  // Log para transparência total (dados reais sendo comparados)
  console.log('🔍 COMPARAÇÃO REAL - Dados sendo comparados:');
  console.log(`Jogo #${game.id} (${game.type}):`, gameNumbers.sort((a, b) => a - b));
  console.log(`Concurso #${result.concurso}:`, resultNumbers.sort((a, b) => a - b));
  
  // Fazer comparação real
  const matches = gameNumbers.filter(num => resultNumbers.includes(num));
  const nonMatches = gameNumbers.filter(num => !resultNumbers.includes(num));
  // const drawnButNotPlayed = resultNumbers.filter(num => !gameNumbers.includes(num));
  
  console.log(`Acertos encontrados:`, matches.sort((a, b) => a - b));
  console.log(`Total de acertos: ${matches.length}`);

  // Calcular pontuação oficial da Lotomania
  const matchCount = matches.length;
  let points = 0;
  let prizeType = '';
  let prizeEmoji = '';

  if (matchCount === 20 || matchCount === 0) {
    points = 20;
    prizeType = 'PRÊMIO MÁXIMO';
    prizeEmoji = '🎉🏆';
  } else if (matchCount === 19) {
    points = 19;
    prizeType = 'PRÊMIO ALTO';
    prizeEmoji = '🏆';
  } else if (matchCount === 18) {
    points = 18;
    prizeType = 'PRÊMIO MÉDIO';
    prizeEmoji = '🥉';
  } else if (matchCount === 17) {
    points = 17;
    prizeType = 'PRÊMIO BAIXO';
    prizeEmoji = '🏅';
  } else {
    points = matchCount;
    prizeType = 'SEM PRÊMIO';
    prizeEmoji = '❌';
  }

  return (
    <div className="bg-white border-2 border-blue-200 rounded-xl p-6 shadow-lg">
      <div className="text-center mb-6">
        <div className="flex items-center justify-center gap-3 mb-2">
          <Target className="w-6 h-6 text-blue-600" />
          <h3 className="text-xl font-bold text-gray-800">
            🔍 COMPARAÇÃO REAL E VERDADEIRA
          </h3>
          <Zap className="w-6 h-6 text-yellow-500" />
        </div>
        <p className="text-gray-600">
          Jogo #{game.id} vs Concurso #{result.concurso} ({result.data})
        </p>
      </div>

      {/* Informações do Jogo */}
      <div className="grid md:grid-cols-3 gap-6 mb-6">
        
        {/* Números Jogados */}
        <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
          <h4 className="font-bold text-blue-800 mb-3 flex items-center">
            <span className="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
            NÚMEROS JOGADOS ({gameNumbers.length})
          </h4>
          <div className="text-sm text-blue-700 mb-2">
            {game.type === 'vertical' 
              ? `Colunas: ${game.markedColumns.join(', ')}` 
              : `Linhas: ${game.markedRows?.join(', ')}`
            }
          </div>
          <div className="flex flex-wrap gap-1 max-h-32 overflow-y-auto">
            {gameNumbers.sort((a, b) => a - b).map(num => (
              <span
                key={num}
                className={`px-2 py-1 text-xs rounded font-bold ${
                  matches.includes(num) 
                    ? 'bg-green-500 text-white ring-2 ring-green-300'
                    : 'bg-blue-500 text-white'
                }`}
              >
                {num}
              </span>
            ))}
          </div>
        </div>

        {/* Números Sorteados */}
        <div className="bg-purple-50 p-4 rounded-lg border border-purple-200">
          <h4 className="font-bold text-purple-800 mb-3 flex items-center">
            <span className="w-2 h-2 bg-purple-600 rounded-full mr-2"></span>
            NÚMEROS SORTEADOS (20)
          </h4>
          <div className="text-sm text-purple-700 mb-2">
            Concurso Oficial #{result.concurso}
          </div>
          <div className="flex flex-wrap gap-1 max-h-32 overflow-y-auto">
            {resultNumbers.sort((a, b) => a - b).map(num => (
              <span
                key={num}
                className={`px-2 py-1 text-xs rounded font-bold ${
                  matches.includes(num) 
                    ? 'bg-green-500 text-white ring-2 ring-green-300'
                    : 'bg-purple-500 text-white'
                }`}
              >
                {num}
              </span>
            ))}
          </div>
        </div>

        {/* Resultado da Comparação */}
        <div className={`p-4 rounded-lg border-2 ${
          points >= 17 
            ? 'bg-green-50 border-green-300' 
            : 'bg-gray-50 border-gray-300'
        }`}>
          <h4 className={`font-bold mb-3 flex items-center ${
            points >= 17 ? 'text-green-800' : 'text-gray-700'
          }`}>
            {points >= 17 ? <Trophy className="w-4 h-4 mr-2" /> : <XCircle className="w-4 h-4 mr-2" />}
            RESULTADO
          </h4>
          <div className="text-center">
            <div className="text-3xl font-bold mb-1">
              {prizeEmoji}
            </div>
            <div className={`text-2xl font-bold ${
              points >= 17 ? 'text-green-600' : 'text-gray-600'
            }`}>
              {matchCount} ACERTOS
            </div>
            <div className={`text-lg font-bold ${
              points >= 17 ? 'text-green-700' : 'text-gray-700'
            }`}>
              {points} PONTOS
            </div>
            <div className={`text-sm font-medium mt-2 px-2 py-1 rounded ${
              points >= 17 ? 'bg-green-200 text-green-800' : 'bg-gray-200 text-gray-700'
            }`}>
              {prizeType}
            </div>
          </div>
        </div>
      </div>

      {/* Análise Detalhada */}
      <div className="grid md:grid-cols-2 gap-4">
        {/* Números que Acertaram */}
        <div className="bg-green-50 p-4 rounded-lg border border-green-200">
          <h4 className="font-bold text-green-800 mb-3 flex items-center">
            <CheckCircle className="w-5 h-5 mr-2" />
            ACERTOS ({matches.length})
          </h4>
          {matches.length > 0 ? (
            <div className="flex flex-wrap gap-1">
              {matches.sort((a, b) => a - b).map(num => (
                <span
                  key={num}
                  className="px-3 py-1 bg-green-600 text-white rounded-lg font-bold text-sm"
                >
                  {num}
                </span>
              ))}
            </div>
          ) : (
            <p className="text-green-700 italic">Nenhum número acertado neste jogo.</p>
          )}
        </div>

        {/* Números que Erraram */}
        <div className="bg-red-50 p-4 rounded-lg border border-red-200">
          <h4 className="font-bold text-red-800 mb-3 flex items-center">
            <XCircle className="w-5 h-5 mr-2" />
            ERROS ({nonMatches.length})
          </h4>
          <div className="flex flex-wrap gap-1 max-h-24 overflow-y-auto">
            {nonMatches.sort((a, b) => a - b).map(num => (
              <span
                key={num}
                className="px-2 py-1 bg-red-500 text-white rounded font-bold text-xs"
              >
                {num}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Processo de Comparação Passo a Passo */}
      <div className="mt-6 p-6 bg-gray-50 rounded-xl border">
        <h4 className="font-bold text-gray-800 mb-4 text-center">
          🔬 COMO A COMPARAÇÃO É FEITA (Passo a Passo)
        </h4>
        <div className="grid md:grid-cols-4 gap-4 text-sm">
          <div className="bg-white p-3 rounded-lg border text-center">
            <div className="text-2xl mb-2">1️⃣</div>
            <div className="font-semibold text-gray-800 mb-1">Gerar Números</div>
            <div className="text-gray-600 text-xs">
              Estratégia calcula quais dos 100 números estão marcados
            </div>
          </div>
          
          <div className="bg-white p-3 rounded-lg border text-center">
            <div className="text-2xl mb-2">2️⃣</div>
            <div className="font-semibold text-gray-800 mb-1">Buscar Resultado</div>
            <div className="text-gray-600 text-xs">
              API oficial da Caixa fornece os 20 números sorteados
            </div>
          </div>
          
          <div className="bg-white p-3 rounded-lg border text-center">
            <div className="text-2xl mb-2">3️⃣</div>
            <div className="font-semibold text-gray-800 mb-1">Comparar</div>
            <div className="text-gray-600 text-xs">
              Verificar quantos números do jogo estão no resultado
            </div>
          </div>
          
          <div className="bg-white p-3 rounded-lg border text-center">
            <div className="text-2xl mb-2">4️⃣</div>
            <div className="font-semibold text-gray-800 mb-1">Pontuar</div>
            <div className="text-gray-600 text-xs">
              Aplicar regras oficiais da Lotomania (17+, 18+, 19+, 20 ou 0 = prêmio)
            </div>
          </div>
        </div>
      </div>

      {/* Fórmula Matemática */}
      <div className="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
        <h5 className="font-bold text-blue-800 mb-2 text-center">📐 FÓRMULA MATEMÁTICA</h5>
        <div className="bg-white p-3 rounded border text-center font-mono text-sm">
          <div className="text-gray-700">
            ACERTOS = números_do_jogo <span className="text-blue-600 font-bold">∩</span> números_sorteados
          </div>
          <div className="text-xs text-gray-500 mt-2">
            (interseção de conjuntos - matemática pura)
          </div>
        </div>
        <div className="text-center mt-2 text-sm text-blue-700">
          <strong>Exemplo atual:</strong> {gameNumbers.length} números jogados ∩ 20 sorteados = {matches.length} acertos
        </div>
      </div>

      {/* Garantia de Veracidade */}
      <div className="mt-4 p-4 bg-gradient-to-r from-blue-100 to-green-100 rounded-lg border">
        <div className="text-center">
          <div className="flex items-center justify-center gap-2 mb-2">
            <CheckCircle className="w-5 h-5 text-green-600" />
            <span className="font-bold text-green-800">100% DADOS REAIS</span>
            <CheckCircle className="w-5 h-5 text-green-600" />
          </div>
          <div className="text-sm text-gray-700 space-y-1">
            <p>✅ Números do jogo calculados pela estratégia real</p>
            <p>✅ Resultado oficial da Caixa Econômica Federal</p>
            <p>✅ Comparação matemática exata (sem invenções)</p>
            <p>✅ Pontuação conforme regras oficiais da Lotomania</p>
            <p className="text-blue-700 font-semibold">🔍 Verifique o console do navegador para logs de transparência!</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default RealComparisonDemo;