import React from 'react';
import { Trophy, DollarSign, TrendingUp, MapPin, Users, Calendar, Target } from 'lucide-react';
import { LotomaniaResult } from '../types';

interface PrizeAnalysisProps {
  result: LotomaniaResult;
  className?: string;
}

const PrizeAnalysis: React.FC<PrizeAnalysisProps> = ({ result, className = '' }) => {
  // Formatação de valores monetários
  const formatCurrency = (value: number): string => {
    return new Intl.NumberFormat('pt-BR', {
      style: 'currency',
      currency: 'BRL',
      minimumFractionDigits: 2
    }).format(value);
  };

  // Formatação de números
  const formatNumber = (value: number): string => {
    return new Intl.NumberFormat('pt-BR').format(value);
  };

  // Calcular total de ganhadores
  const totalGanhadores = result.premiacoes?.reduce((total, premio) => total + premio.ganhadores, 0) || 0;

  // Calcular total de prêmios distribuídos
  const totalPremios = result.premiacoes?.reduce((total, premio) => total + (premio.valorPremio * premio.ganhadores), 0) || 0;

  // Verificar se houve ganhador principal (20 acertos)
  const ganhadorPrincipal = result.premiacoes?.find(p => p.acertos === 20);
  const temGanhadorPrincipal = ganhadorPrincipal && ganhadorPrincipal.ganhadores > 0;

  return (
    <div className={`bg-white rounded-2xl shadow-xl border border-gray-100 ${className}`}>
      {/* Header */}
      <div className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white p-6 rounded-t-2xl">
        <div className="flex items-center space-x-3">
          <Trophy className="w-8 h-8" />
          <div>
            <h2 className="text-2xl font-bold">Análise de Prêmios</h2>
            <p className="text-yellow-100">Concurso {result.concurso} - {result.data}</p>
          </div>
        </div>
      </div>

      <div className="p-6">
        {/* Status do Concurso */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <div className="bg-gradient-to-br from-green-50 to-green-100 p-4 rounded-xl border border-green-200">
            <div className="flex items-center space-x-3">
              <DollarSign className="w-8 h-8 text-green-600" />
              <div>
                <p className="text-sm text-green-700 font-medium">Total Arrecadado</p>
                <p className="text-2xl font-bold text-green-800">
                  {formatCurrency(result.valorArrecadado || 0)}
                </p>
              </div>
            </div>
          </div>

          <div className={`p-4 rounded-xl border ${temGanhadorPrincipal 
            ? 'bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200' 
            : 'bg-gradient-to-br from-red-50 to-red-100 border-red-200'
          }`}>
            <div className="flex items-center space-x-3">
              <Target className={`w-8 h-8 ${temGanhadorPrincipal ? 'text-blue-600' : 'text-red-600'}`} />
              <div>
                <p className={`text-sm font-medium ${temGanhadorPrincipal ? 'text-blue-700' : 'text-red-700'}`}>
                  Status do Prêmio Principal
                </p>
                <p className={`text-2xl font-bold ${temGanhadorPrincipal ? 'text-blue-800' : 'text-red-800'}`}>
                  {temGanhadorPrincipal ? '🎯 Ganho!' : '🔄 Acumulou'}
                </p>
              </div>
            </div>
          </div>

          <div className="bg-gradient-to-br from-purple-50 to-purple-100 p-4 rounded-xl border border-purple-200">
            <div className="flex items-center space-x-3">
              <TrendingUp className="w-8 h-8 text-purple-600" />
              <div>
                <p className="text-sm text-purple-700 font-medium">Próximo Concurso</p>
                <p className="text-2xl font-bold text-purple-800">
                  {formatCurrency(result.valorEstimadoProximoConcurso || 0)}
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Informações do Sorteio */}
        <div className="bg-gray-50 rounded-xl p-4 mb-6">
          <h3 className="text-lg font-semibold text-gray-800 mb-3 flex items-center">
            <MapPin className="w-5 h-5 mr-2" />
            Informações do Sorteio
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
            <div>
              <span className="font-medium text-gray-600">Local:</span>
              <p className="text-gray-800">{result.localSorteio || 'Não informado'}</p>
            </div>
            <div>
              <span className="font-medium text-gray-600">Próximo Concurso:</span>
              <p className="text-gray-800">
                {result.numeroProximoConcurso} - {result.dataProximoConcurso}
              </p>
            </div>
            <div>
              <span className="font-medium text-gray-600">Total de Ganhadores:</span>
              <p className="text-gray-800 font-bold">{formatNumber(totalGanhadores)}</p>
            </div>
          </div>
        </div>

        {/* Tabela de Premiações */}
        <div className="mb-6">
          <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
            <Trophy className="w-5 h-5 mr-2 text-yellow-600" />
            Premiações por Faixa
          </h3>
          
          <div className="overflow-x-auto">
            <table className="w-full border-collapse bg-white rounded-lg overflow-hidden shadow-sm">
              <thead>
                <tr className="bg-gray-100">
                  <th className="text-left p-3 font-semibold text-gray-700">Faixa</th>
                  <th className="text-left p-3 font-semibold text-gray-700">Acertos</th>
                  <th className="text-center p-3 font-semibold text-gray-700">Ganhadores</th>
                  <th className="text-right p-3 font-semibold text-gray-700">Prêmio Individual</th>
                  <th className="text-right p-3 font-semibold text-gray-700">Total Pago</th>
                </tr>
              </thead>
              <tbody>
                {result.premiacoes?.map((premio, index) => {
                  const totalFaixa = premio.valorPremio * premio.ganhadores;
                  const isMainPrize = premio.acertos === 20;
                  const hasWinners = premio.ganhadores > 0;
                  
                  return (
                    <tr 
                      key={index} 
                      className={`border-b border-gray-100 hover:bg-gray-50 transition-colors ${
                        isMainPrize ? 'bg-yellow-50' : ''
                      }`}
                    >
                      <td className="p-3">
                        <div className="flex items-center space-x-2">
                          {isMainPrize && <Trophy className="w-4 h-4 text-yellow-600" />}
                          <span className={`font-medium ${isMainPrize ? 'text-yellow-800' : 'text-gray-700'}`}>
                            {premio.faixa}ª
                          </span>
                        </div>
                      </td>
                      <td className="p-3">
                        <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm font-medium">
                          {premio.acertos} acertos
                        </span>
                      </td>
                      <td className="p-3 text-center">
                        <span className={`font-bold ${hasWinners ? 'text-green-600' : 'text-gray-400'}`}>
                          {formatNumber(premio.ganhadores)}
                        </span>
                      </td>
                      <td className="p-3 text-right font-mono">
                        <span className={hasWinners ? 'text-green-600' : 'text-gray-400'}>
                          {formatCurrency(premio.valorPremio)}
                        </span>
                      </td>
                      <td className="p-3 text-right font-mono font-bold">
                        <span className={hasWinners ? 'text-green-700' : 'text-gray-400'}>
                          {formatCurrency(totalFaixa)}
                        </span>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
              <tfoot>
                <tr className="bg-gray-50 font-bold">
                  <td colSpan={3} className="p-3 text-gray-700">TOTAL DISTRIBUÍDO</td>
                  <td className="p-3 text-right text-gray-700">-</td>
                  <td className="p-3 text-right text-green-700 font-mono text-lg">
                    {formatCurrency(totalPremios)}
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>

        {/* Ganhadores por Cidade */}
        {result.ganhadores && result.ganhadores.length > 0 && (
          <div>
            <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
              <Users className="w-5 h-5 mr-2 text-blue-600" />
              Ganhadores por Cidade
            </h3>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {result.ganhadores.map((ganhador, index) => (
                <div key={index} className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-semibold text-blue-800">
                        {ganhador.municipio}
                      </p>
                      <p className="text-sm text-blue-600">{ganhador.uf}</p>
                    </div>
                    <div className="text-right">
                      <p className="text-2xl font-bold text-blue-700">
                        {ganhador.ganhadores}
                      </p>
                      <p className="text-xs text-blue-600">
                        {ganhador.ganhadores === 1 ? 'ganhador' : 'ganhadores'}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Estatísticas Adicionais */}
        <div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="bg-indigo-50 p-4 rounded-lg text-center">
            <Calendar className="w-6 h-6 text-indigo-600 mx-auto mb-2" />
            <p className="text-sm text-indigo-600 font-medium">Data do Sorteio</p>
            <p className="text-lg font-bold text-indigo-800">{result.data}</p>
          </div>
          
          <div className="bg-green-50 p-4 rounded-lg text-center">
            <DollarSign className="w-6 h-6 text-green-600 mx-auto mb-2" />
            <p className="text-sm text-green-600 font-medium">% Distribuído</p>
            <p className="text-lg font-bold text-green-800">
              {result.valorArrecadado ? ((totalPremios / result.valorArrecadado) * 100).toFixed(1) : 0}%
            </p>
          </div>
          
          <div className="bg-orange-50 p-4 rounded-lg text-center">
            <TrendingUp className="w-6 h-6 text-orange-600 mx-auto mb-2" />
            <p className="text-sm text-orange-600 font-medium">Acumulado</p>
            <p className="text-lg font-bold text-orange-800">
              {formatCurrency(result.valorAcumuladoProximoConcurso || 0)}
            </p>
          </div>
          
          <div className="bg-purple-50 p-4 rounded-lg text-center">
            <Users className="w-6 h-6 text-purple-600 mx-auto mb-2" />
            <p className="text-sm text-purple-600 font-medium">Total Ganhadores</p>
            <p className="text-lg font-bold text-purple-800">{formatNumber(totalGanhadores)}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PrizeAnalysis;