import React, { useMemo } from 'react';
import { Target, Calculator, TrendingUp, Zap, Percent, BarChart3, DollarSign, PieChart } from 'lucide-react';
import { LotomaniaGame, LotomaniaResult } from '../types';
import { Bar } from 'react-chartjs-2';
import '../utils/chartSetup'; // Importar configuração do Chart.js

interface ProbabilityCalculatorProps {
  verticalGames: LotomaniaGame[];
  horizontalGames: LotomaniaGame[];
  latestResult?: LotomaniaResult | null;
}

const ProbabilityCalculator: React.FC<ProbabilityCalculatorProps> = ({
  verticalGames,
  horizontalGames,
  latestResult
}) => {
  // Removendo variáveis não utilizadas por enquanto
  // const [selectedScenario, setSelectedScenario] = useState<'single' | 'multiple' | 'strategy'>('strategy');
  // const [customNumbers, setCustomNumbers] = useState<number[]>([]);
  
  // Cálculos de probabilidade teórica
  const theoreticalProbabilities = useMemo(() => {
    // Probabilidades baseadas na combinatória da Lotomania
    // Total de números: 100, Números sorteados: 20, Números jogados: 50
    
    const totalNumbers = 100;
    const drawnNumbers = 20;
    const playedNumbers = 50;
    
    // Função para calcular combinações C(n, k)
    const combination = (n: number, k: number): number => {
      if (k > n || k < 0) return 0;
      if (k === 0 || k === n) return 1;
      
      let result = 1;
      for (let i = 0; i < Math.min(k, n - k); i++) {
        result = result * (n - i) / (i + 1);
      }
      return result;
    };

    // Função para calcular probabilidade de acertar exatamente k números
    const calculateProbability = (k: number): number => {
      const numerator = combination(playedNumbers, k) * combination(totalNumbers - playedNumbers, drawnNumbers - k);
      const denominator = combination(totalNumbers, drawnNumbers);
      return numerator / denominator;
    };

    return {
      exact0: calculateProbability(0),
      exact15: calculateProbability(15),
      exact16: calculateProbability(16),
      exact17: calculateProbability(17),
      exact18: calculateProbability(18),
      exact19: calculateProbability(19),
      exact20: calculateProbability(20),
      winning15Plus: calculateProbability(15) + calculateProbability(16) + calculateProbability(17) + calculateProbability(18) + calculateProbability(19) + calculateProbability(20) + calculateProbability(0),
      winning17Plus: calculateProbability(17) + calculateProbability(18) + calculateProbability(19) + calculateProbability(20) + calculateProbability(0),
      winning18Plus: calculateProbability(18) + calculateProbability(19) + calculateProbability(20) + calculateProbability(0),
      winning19Plus: calculateProbability(19) + calculateProbability(20) + calculateProbability(0),
      winning20: calculateProbability(20) + calculateProbability(0),
    };
  }, []);

  // Cálculos para estratégia completa
  const strategyCalculations = useMemo(() => {
    const totalVerticalGames = verticalGames.length;
    const totalHorizontalGames = horizontalGames.length;
    const totalGames = totalVerticalGames + totalHorizontalGames;

    // Probabilidade de pelo menos um prêmio na estratégia completa
    const probNoWin17Plus = Math.pow(1 - theoreticalProbabilities.winning17Plus, totalGames);
    const probAtLeastOneWin17Plus = 1 - probNoWin17Plus;

    const probNoWin20 = Math.pow(1 - theoreticalProbabilities.winning20, totalGames);
    const probAtLeastOneWin20 = 1 - probNoWin20;

    return {
      totalGames,
      totalVerticalGames,
      totalHorizontalGames,
      probAtLeastOneWin17Plus: probAtLeastOneWin17Plus * 100,
      probAtLeastOneWin20: probAtLeastOneWin20 * 100,
      expectedWins17Plus: totalGames * theoreticalProbabilities.winning17Plus,
      expectedWins20: totalGames * theoreticalProbabilities.winning20,
      expectedValue: totalGames * (
        theoreticalProbabilities.exact17 * 5 + // Prêmio estimado 17 pontos
        theoreticalProbabilities.exact18 * 50 + // Prêmio estimado 18 pontos  
        theoreticalProbabilities.exact19 * 1000 + // Prêmio estimado 19 pontos
        theoreticalProbabilities.winning20 * 100000 // Prêmio estimado 20/0 pontos
      )
    };
  }, [verticalGames, horizontalGames, theoreticalProbabilities]);

  // Cálculos de ganhos reais baseados no último concurso
  const realPrizesAnalysis = useMemo(() => {
    if (!latestResult || !latestResult.premiacoes) {
      return null;
    }

    const totalGames = 504;
    const gameCost = 3.00;
    const totalInvestment = totalGames * gameCost; // R$ 1.512,00
    
    // Organizar prêmios por faixa de pontos
    const prizesByPoints: Record<number, { value: number; description: string }> = {};
    
    latestResult.premiacoes.forEach(premio => {
      if (premio.acertos !== undefined && premio.valorPremio !== undefined) {
        prizesByPoints[premio.acertos] = {
          value: premio.valorPremio,
          description: premio.descricao || `${premio.acertos} acertos`
        };
      }
    });

    // Calcular ganhos potenciais para nossa estratégia
    const potentialGains = {
      15: prizesByPoints[15]?.value || 0,
      16: prizesByPoints[16]?.value || 0,
      17: prizesByPoints[17]?.value || 0,
      18: prizesByPoints[18]?.value || 0,
      19: prizesByPoints[19]?.value || 0,
      20: prizesByPoints[20]?.value || 0,
      0: prizesByPoints[0]?.value || 0, // Prêmio de consolação
    };

    // Estimativa de ganhos baseada em probabilidades
    const estimatedWinnings = Object.entries(potentialGains).reduce((total, [points, value]) => {
      const pointsNum = parseInt(points);
      let probability = 0;
      
      switch (pointsNum) {
        case 0: probability = theoreticalProbabilities.exact0; break;
        case 15: probability = theoreticalProbabilities.exact15; break;
        case 16: probability = theoreticalProbabilities.exact16; break;
        case 17: probability = theoreticalProbabilities.exact17; break;
        case 18: probability = theoreticalProbabilities.exact18; break;
        case 19: probability = theoreticalProbabilities.exact19; break;
        case 20: probability = theoreticalProbabilities.exact20; break;
      }
      
      const expectedGames = totalGames * probability;
      return total + (expectedGames * value);
    }, 0);

    const netResult = estimatedWinnings - totalInvestment;
    const roi = totalInvestment > 0 ? (netResult / totalInvestment) * 100 : 0;

    return {
      concurso: latestResult.concurso,
      data: latestResult.data,
      totalInvestment,
      estimatedWinnings,
      netResult,
      roi,
      prizesByPoints,
      acumulado: latestResult.acumulado,
      valorAcumulado: latestResult.valorAcumuladoProximoConcurso || 0
    };
  }, [latestResult, theoreticalProbabilities]);

  // Dados para gráficos
  const probabilityChartData = {
    labels: ['0 pontos', '17 pontos', '18 pontos', '19 pontos', '20 pontos'],
    datasets: [{
      label: 'Probabilidade Individual (%)',
      data: [
        theoreticalProbabilities.exact0 * 100,
        theoreticalProbabilities.exact17 * 100,
        theoreticalProbabilities.exact18 * 100,
        theoreticalProbabilities.exact19 * 100,
        theoreticalProbabilities.exact20 * 100
      ],
      backgroundColor: [
        'rgba(34, 197, 94, 0.8)',
        'rgba(59, 130, 246, 0.8)',
        'rgba(245, 158, 11, 0.8)',
        'rgba(239, 68, 68, 0.8)',
        'rgba(168, 85, 247, 0.8)'
      ],
      borderColor: [
        'rgb(34, 197, 94)',
        'rgb(59, 130, 246)', 
        'rgb(245, 158, 11)',
        'rgb(239, 68, 68)',
        'rgb(168, 85, 247)'
      ],
      borderWidth: 2
    }]
  };

  const strategyComparisonData = {
    labels: ['Vertical', 'Horizontal', 'Total'],
    datasets: [{
      label: 'Prêmios Esperados (17+)',
      data: [
        strategyCalculations.totalVerticalGames * theoreticalProbabilities.winning17Plus,
        strategyCalculations.totalHorizontalGames * theoreticalProbabilities.winning17Plus,
        strategyCalculations.expectedWins17Plus
      ],
      backgroundColor: 'rgba(59, 130, 246, 0.8)',
      borderColor: 'rgb(59, 130, 246)',
      borderWidth: 2
    }, {
      label: 'Prêmios Máximos Esperados (20/0)',
      data: [
        strategyCalculations.totalVerticalGames * theoreticalProbabilities.winning20,
        strategyCalculations.totalHorizontalGames * theoreticalProbabilities.winning20,
        strategyCalculations.expectedWins20
      ],
      backgroundColor: 'rgba(239, 68, 68, 0.8)',
      borderColor: 'rgb(239, 68, 68)',
      borderWidth: 2
    }]
  };

  const StatCard: React.FC<{
    title: string;
    value: string | number;
    icon: React.ReactNode;
    color: string;
    subtitle?: string;
    percentage?: boolean;
  }> = ({ title, value, icon, color, subtitle, percentage = false }) => (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
      <div className="flex items-center justify-between">
        <div className="flex-1">
          <p className="text-sm font-medium text-gray-600 mb-1">{title}</p>
          <p className={`text-2xl font-bold ${color}`}>
            {percentage && typeof value === 'number' ? `${value.toFixed(4)}%` : value}
          </p>
          {subtitle && (
            <p className="text-xs text-gray-500 mt-1">{subtitle}</p>
          )}
        </div>
        <div className={`p-3 rounded-full ${color.replace('text-', 'bg-').replace('-600', '-100')}`}>
          {icon}
        </div>
      </div>
    </div>
  );

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="bg-gradient-to-r from-purple-600 to-purple-700 p-6 rounded-xl text-white">
        <h2 className="text-2xl font-bold mb-2">Calculadora de Probabilidades</h2>
        <p className="text-purple-100">
          Análise matemática das chances de premiação na sua estratégia
        </p>
      </div>

      {/* Probabilidades Teóricas Individuais */}
      <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
        <h3 className="text-lg font-semibold mb-4 text-gray-800">
          Probabilidades Teóricas por Jogo Individual
        </h3>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
          <StatCard
            title="Prêmio Máximo (20/0)"
            value={theoreticalProbabilities.winning20 * 100}
            icon={<Target className="w-6 h-6 text-red-600" />}
            color="text-red-600"
            subtitle="20 acertos ou 0 acertos"
            percentage={true}
          />
          
          <StatCard
            title="19 Pontos"
            value={theoreticalProbabilities.exact19 * 100}
            icon={<Zap className="w-6 h-6 text-orange-600" />}
            color="text-orange-600"
            subtitle="19 acertos exatos"
            percentage={true}
          />
          
          <StatCard
            title="18 Pontos"
            value={theoreticalProbabilities.exact18 * 100}
            icon={<Percent className="w-6 h-6 text-yellow-600" />}
            color="text-yellow-600"
            subtitle="18 acertos exatos"
            percentage={true}
          />
          
          <StatCard
            title="17+ Pontos"
            value={theoreticalProbabilities.winning17Plus * 100}
            icon={<TrendingUp className="w-6 h-6 text-green-600" />}
            color="text-green-600"
            subtitle="Qualquer premiação"
            percentage={true}
          />
        </div>

        <div className="h-64">
          <Bar 
            data={probabilityChartData}
            options={{
              responsive: true,
              maintainAspectRatio: false,
              plugins: {
                legend: {
                  position: 'top',
                },
                title: {
                  display: true,
                  text: 'Probabilidade de Cada Pontuação por Jogo Individual'
                }
              },
              scales: {
                y: {
                  beginAtZero: true,
                  ticks: {
                    callback: function(value) {
                      return value + '%';
                    }
                  }
                }
              }
            }}
          />
        </div>
      </div>

      {/* Análise da Estratégia Completa */}
      <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
        <h3 className="text-lg font-semibold mb-4 text-gray-800">
          Análise da Estratégia Completa
        </h3>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
          <StatCard
            title="Total de Jogos"
            value={strategyCalculations.totalGames.toLocaleString()}
            icon={<Calculator className="w-6 h-6 text-blue-600" />}
            color="text-blue-600"
            subtitle={`${strategyCalculations.totalVerticalGames} verticais + ${strategyCalculations.totalHorizontalGames} horizontais`}
          />
          
          <StatCard
            title="Chance de Prêmio Máximo"
            value={strategyCalculations.probAtLeastOneWin20}
            icon={<Target className="w-6 h-6 text-red-600" />}
            color="text-red-600"
            subtitle="Pelo menos um 20/0 pontos"
            percentage={true}
          />
          
          <StatCard
            title="Chance de Premiação"
            value={strategyCalculations.probAtLeastOneWin17Plus}
            icon={<TrendingUp className="w-6 h-6 text-green-600" />}
            color="text-green-600"
            subtitle="Pelo menos um prêmio 17+"
            percentage={true}
          />
          
          <StatCard
            title="Prêmios Esperados (17+)"
            value={strategyCalculations.expectedWins17Plus.toFixed(1)}
            icon={<BarChart3 className="w-6 h-6 text-purple-600" />}
            color="text-purple-600"
            subtitle="Expectativa matemática"
          />
        </div>

        <div className="h-64">
          <Bar 
            data={strategyComparisonData}
            options={{
              responsive: true,
              maintainAspectRatio: false,
              plugins: {
                legend: {
                  position: 'top',
                },
                title: {
                  display: true,
                  text: 'Comparação: Jogos Verticais vs Horizontais'
                }
              },
              scales: {
                y: {
                  beginAtZero: true,
                }
              }
            }}
          />
        </div>
      </div>

      {/* Simulador de Cenários */}
      <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
        <h3 className="text-lg font-semibold mb-4 text-gray-800">
          Simulador de Cenários
        </h3>
        
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium mb-3 text-gray-700">Investimento vs Retorno Esperado</h4>
            <div className="space-y-3">
              <div className="flex justify-between py-2 border-b">
                <span className="text-gray-600">Custo por jogo (R$ 3,00):</span>
                <span className="font-semibold">R$ 3,00</span>
              </div>
              <div className="flex justify-between py-2 border-b">
                <span className="text-gray-600">Investimento total:</span>
                <span className="font-semibold">R$ {(strategyCalculations.totalGames * 3.0).toLocaleString()}</span>
              </div>
              <div className="flex justify-between py-2 border-b">
                <span className="text-gray-600">Retorno esperado estimado:</span>
                <span className="font-semibold">R$ {strategyCalculations.expectedValue.toLocaleString()}</span>
              </div>
              <div className="flex justify-between py-2 font-bold">
                <span className="text-gray-800">ROI Esperado:</span>
                <span className={`${strategyCalculations.expectedValue > (strategyCalculations.totalGames * 3.0) ? 'text-green-600' : 'text-red-600'}`}>
                  {(((strategyCalculations.expectedValue / (strategyCalculations.totalGames * 3.0)) - 1) * 100).toFixed(2)}%
                </span>
              </div>
            </div>
          </div>
          
          <div>
            <h4 className="font-medium mb-3 text-gray-700">Métricas Avançadas</h4>
            <div className="space-y-3">
              <div className="flex justify-between py-2 border-b">
                <span className="text-gray-600">Jogos para 90% chance prêmio:</span>
                <span className="font-semibold">
                  {Math.ceil(Math.log(0.1) / Math.log(1 - theoreticalProbabilities.winning17Plus)).toLocaleString()}
                </span>
              </div>
              <div className="flex justify-between py-2 border-b">
                <span className="text-gray-600">Jogos para 50% chance prêmio máximo:</span>
                <span className="font-semibold">
                  {Math.ceil(Math.log(0.5) / Math.log(1 - theoreticalProbabilities.winning20)).toLocaleString()}
                </span>
              </div>
              <div className="flex justify-between py-2 border-b">
                <span className="text-gray-600">Frequência esperada prêmio:</span>
                <span className="font-semibold">
                  1 a cada {Math.round(1 / theoreticalProbabilities.winning17Plus)} jogos
                </span>
              </div>
              <div className="flex justify-between py-2">
                <span className="text-gray-600">Cobertura da estratégia:</span>
                <span className="font-semibold">50% dos números</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Análise de Ganhos Reais */}
      {realPrizesAnalysis && (
        <div className="bg-green-50 border border-green-200 p-6 rounded-lg">
          <div className="flex items-center space-x-2 mb-4">
            <DollarSign className="w-6 h-6 text-green-600" />
            <h3 className="text-lg font-bold text-green-800">
              Análise de Ganhos Reais - Concurso {realPrizesAnalysis.concurso}
            </h3>
          </div>
          
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Prêmios por Faixa */}
            <div>
              <h4 className="font-semibold text-gray-700 mb-3">💰 Prêmios por Faixa de Pontos</h4>
              <div className="space-y-2">
                {Object.entries(realPrizesAnalysis.prizesByPoints)
                  .sort(([a], [b]) => parseInt(b) - parseInt(a))
                  .map(([points, prize]) => (
                    <div key={points} className="flex justify-between items-center p-2 bg-white rounded border">
                      <span className={`font-medium ${
                        points === '20' || points === '0' ? 'text-purple-600' :
                        parseInt(points) >= 18 ? 'text-red-600' :
                        parseInt(points) >= 17 ? 'text-orange-600' :
                        'text-green-600'
                      }`}>
                        {points === '0' ? '0 pontos (consolação)' : `${points} pontos`}
                      </span>
                      <span className="font-bold text-gray-800">
                        {prize.value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}
                      </span>
                    </div>
                  ))}
              </div>
              
              {realPrizesAnalysis.acumulado && (
                <div className="mt-3 p-3 bg-yellow-100 border border-yellow-300 rounded">
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="w-4 h-4 text-yellow-600" />
                    <span className="text-sm font-medium text-yellow-800">
                      Concurso Acumulado: {realPrizesAnalysis.valorAcumulado.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}
                    </span>
                  </div>
                </div>
              )}
            </div>

            {/* Análise Financeira */}
            <div>
              <h4 className="font-semibold text-gray-700 mb-3">📊 Análise Financeira da Estratégia</h4>
              <div className="space-y-3">
                <div className="p-4 bg-blue-50 border border-blue-200 rounded">
                  <div className="flex justify-between items-center mb-2">
                    <span className="text-blue-700 font-medium">💸 Investimento Total:</span>
                    <span className="text-lg font-bold text-blue-800">
                      {realPrizesAnalysis.totalInvestment.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}
                    </span>
                  </div>
                  <div className="text-xs text-blue-600">504 jogos × R$ 3,00</div>
                </div>

                <div className="p-4 bg-green-50 border border-green-200 rounded">
                  <div className="flex justify-between items-center mb-2">
                    <span className="text-green-700 font-medium">💰 Ganho Estimado:</span>
                    <span className="text-lg font-bold text-green-800">
                      {realPrizesAnalysis.estimatedWinnings.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}
                    </span>
                  </div>
                  <div className="text-xs text-green-600">Baseado em probabilidades</div>
                </div>

                <div className={`p-4 border rounded ${
                  realPrizesAnalysis.netResult >= 0 
                    ? 'bg-green-50 border-green-200' 
                    : 'bg-red-50 border-red-200'
                }`}>
                  <div className="flex justify-between items-center mb-2">
                    <span className={`font-medium ${
                      realPrizesAnalysis.netResult >= 0 ? 'text-green-700' : 'text-red-700'
                    }`}>
                      {realPrizesAnalysis.netResult >= 0 ? '📈 Lucro Líquido:' : '📉 Prejuízo:'}
                    </span>
                    <span className={`text-lg font-bold ${
                      realPrizesAnalysis.netResult >= 0 ? 'text-green-800' : 'text-red-800'
                    }`}>
                      {realPrizesAnalysis.netResult.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}
                    </span>
                  </div>
                  <div className={`text-xs ${
                    realPrizesAnalysis.netResult >= 0 ? 'text-green-600' : 'text-red-600'
                  }`}>
                    ROI: {realPrizesAnalysis.roi.toFixed(2)}%
                  </div>
                </div>

                <div className="p-3 bg-purple-50 border border-purple-200 rounded">
                  <div className="flex items-center justify-between">
                    <span className="text-purple-700 font-medium text-sm">🎯 Estratégia:</span>
                    <span className="text-purple-800 font-bold text-sm">
                      {realPrizesAnalysis.roi >= 0 ? 'VIÁVEL' : 'ALTO RISCO'}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Gráfico de Ganhos Potenciais */}
          <div className="mt-6">
            <h4 className="font-semibold text-gray-700 mb-3">📈 Distribuição de Ganhos por Faixa</h4>
            <div className="bg-white p-4 rounded border">
              <Bar
                data={{
                  labels: Object.keys(realPrizesAnalysis.prizesByPoints)
                    .sort((a, b) => parseInt(a) - parseInt(b))
                    .map(points => points === '0' ? '0 pts' : `${points} pts`),
                  datasets: [{
                    label: 'Valor do Prêmio (R$)',
                    data: Object.entries(realPrizesAnalysis.prizesByPoints)
                      .sort(([a], [b]) => parseInt(a) - parseInt(b))
                      .map(([, prize]) => prize.value),
                    backgroundColor: [
                      'rgba(34, 197, 94, 0.8)',   // 0 pontos
                      'rgba(59, 130, 246, 0.8)',  // 15 pontos
                      'rgba(245, 158, 11, 0.8)',  // 16 pontos
                      'rgba(239, 68, 68, 0.8)',   // 17 pontos
                      'rgba(168, 85, 247, 0.8)',  // 18 pontos
                      'rgba(236, 72, 153, 0.8)',  // 19 pontos
                      'rgba(14, 165, 233, 0.8)'   // 20 pontos
                    ],
                    borderColor: [
                      'rgb(34, 197, 94)',
                      'rgb(59, 130, 246)',
                      'rgb(245, 158, 11)',
                      'rgb(239, 68, 68)',
                      'rgb(168, 85, 247)',
                      'rgb(236, 72, 153)',
                      'rgb(14, 165, 233)'
                    ],
                    borderWidth: 2
                  }]
                }}
                options={{
                  responsive: true,
                  plugins: {
                    legend: {
                      display: false
                    },
                    title: {
                      display: false
                    }
                  },
                  scales: {
                    y: {
                      beginAtZero: true,
                      ticks: {
                        callback: function(value) {
                          return new Intl.NumberFormat('pt-BR', {
                            style: 'currency',
                            currency: 'BRL',
                            minimumFractionDigits: 0
                          }).format(value as number);
                        }
                      }
                    }
                  }
                }}
              />
            </div>
          </div>

          {/* Insights e Recomendações */}
          <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="p-4 bg-blue-50 border border-blue-200 rounded text-center">
              <PieChart className="w-6 h-6 text-blue-600 mx-auto mb-2" />
              <div className="text-lg font-bold text-blue-800">
                {((realPrizesAnalysis.estimatedWinnings / realPrizesAnalysis.totalInvestment) * 100).toFixed(1)}%
              </div>
              <div className="text-sm text-blue-600">Taxa de Retorno</div>
            </div>

            <div className="p-4 bg-green-50 border border-green-200 rounded text-center">
              <Target className="w-6 h-6 text-green-600 mx-auto mb-2" />
              <div className="text-lg font-bold text-green-800">
                {Object.keys(realPrizesAnalysis.prizesByPoints).length}
              </div>
              <div className="text-sm text-green-600">Faixas de Prêmio</div>
            </div>

            <div className="p-4 bg-purple-50 border border-purple-200 rounded text-center">
              <Calculator className="w-6 h-6 text-purple-600 mx-auto mb-2" />
              <div className="text-lg font-bold text-purple-800">504</div>
              <div className="text-sm text-purple-600">Jogos Analisados</div>
            </div>
          </div>
        </div>
      )}

      {/* Aviso quando não há dados da API */}
      {!realPrizesAnalysis && (
        <div className="bg-orange-50 border border-orange-200 p-4 rounded-lg">
          <div className="flex items-center space-x-2">
            <TrendingUp className="w-5 h-5 text-orange-600" />
            <div>
              <h4 className="font-semibold text-orange-800">Dados de Prêmios Indisponíveis</h4>
              <p className="text-orange-700 text-sm mt-1">
                Aguardando dados do último concurso da API da Caixa para análise de ganhos reais.
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Disclaimer */}
      <div className="bg-yellow-50 border border-yellow-200 p-4 rounded-lg">
        <div className="flex items-start space-x-2">
          <Target className="w-5 h-5 text-yellow-600 mt-0.5" />
          <div>
            <h4 className="font-semibold text-yellow-800">Importante:</h4>
            <p className="text-yellow-700 text-sm mt-1">
              Os cálculos apresentados são baseados em probabilidades teóricas e não garantem resultados.
              A Lotomania é um jogo de azar e deve ser jogada com responsabilidade. 
              Nunca aposte mais do que pode perder.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProbabilityCalculator;
