import React from 'react';
import { 
  Grid3X3, 
  BarChart3, 
  PlayCircle, 
  Trophy, 
  Settings,
  Calculator,
  TrendingUp,
  Target,
  Eye,
  Database,
  Search,
  HelpCircle
} from 'lucide-react';

interface SidebarProps {
  activeSection: string;
  onSectionChange: (section: string) => void;
  gameStats: {
    currentGame: number;
    totalGames: number;
    remainingGames: number;
  };
}

const Sidebar: React.FC<SidebarProps> = ({ 
  activeSection, 
  onSectionChange,
  gameStats 
}) => {
  const menuItems = [
    {
      id: 'real-comparison',
      title: 'Comparação Real',
      icon: Search,
      description: '100% dados verdadeiros',
      badge: 'REAL'
    },
    {
      id: 'dual-visualizer',
      title: 'Visualizador Dual',
      icon: Eye,
      description: 'Jogos verticais e horizontais',
      badge: gameStats.currentGame
    },
    {
      id: 'grid',
      title: 'Grid Interativo',
      icon: Grid3X3,
      description: 'Visualizar padrões',
    },
    {
      id: 'statistics',
      title: 'Estatísticas',
      icon: BarChart3,
      description: 'Análises detalhadas',
    },
    {
      id: 'results-analysis',
      title: 'Análise de Resultados',
      icon: Trophy,
      description: 'Comparar com sorteios oficiais',
    },
    {
      id: 'calculator',
      title: 'Calculadora',
      icon: Calculator,
      description: 'Cálculos de jogos',
      badge: gameStats.totalGames
    },
    {
      id: 'probability',
      title: 'Probabilidades',
      icon: Target,
      description: 'Chances de acerto',
    },
    {
      id: 'lotomania-features',
      title: 'Funcionalidades',
      icon: HelpCircle,
      description: 'Conhecer a Lotomania',
    },
    {
      id: 'patterns',
      title: 'Análise de Padrões',
      icon: TrendingUp,
      description: 'Padrões e tendências',
    },
    {
      id: 'simulator',
      title: 'Simulador Avançado',
      icon: PlayCircle,
      description: 'Simular apostas',
    },
    {
      id: 'settings',
      title: 'Configurações',
      icon: Settings,
      description: 'Preferências do sistema',
    }
  ];

  return (
    <div className="bg-white border-r border-gray-200 w-64 min-h-screen shadow-lg flex flex-col relative">
      {/* Header */}
      <div className="p-6 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700 flex-shrink-0">
        <h1 className="text-xl font-bold text-white mb-1">
          Lotomania Pro
        </h1>
        <p className="text-blue-100 text-sm">
          Estratégia Inteligente
        </p>
      </div>

      {/* Stats Overview */}
      <div className="p-4 bg-gray-50 border-b border-gray-200 flex-shrink-0">
        <div className="grid grid-cols-1 gap-3">
          <div className="bg-white p-3 rounded-lg shadow-sm border">
            <div className="flex items-center justify-between">
              <span className="text-xs font-medium text-gray-600">Jogo Atual</span>
              <Database className="w-4 h-4 text-blue-500" />
            </div>
            <div className="text-lg font-bold text-gray-900">
              {gameStats.currentGame}
            </div>
          </div>
          
          <div className="bg-white p-3 rounded-lg shadow-sm border">
            <div className="flex items-center justify-between">
              <span className="text-xs font-medium text-gray-600">Total de Jogos</span>
              <Calculator className="w-4 h-4 text-green-500" />
            </div>
            <div className="text-lg font-bold text-gray-900">
              {gameStats.totalGames}
            </div>
          </div>
          
          <div className="bg-white p-3 rounded-lg shadow-sm border">
            <div className="flex items-center justify-between">
              <span className="text-xs font-medium text-gray-600">Restantes</span>
              <Target className="w-4 h-4 text-orange-500" />
            </div>
            <div className="text-lg font-bold text-gray-900">
              {gameStats.remainingGames}
            </div>
          </div>
        </div>
      </div>

      {/* Progress Bar */}
      <div className="p-4 border-b border-gray-200 flex-shrink-0">
        <div className="mb-2">
          <div className="flex justify-between text-sm text-gray-600 mb-1">
            <span>Progresso</span>
            <span>{Math.round((gameStats.currentGame / gameStats.totalGames) * 100)}%</span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div 
              className="bg-blue-600 h-2 rounded-full transition-all duration-300"
              style={{ 
                width: `${Math.min((gameStats.currentGame / gameStats.totalGames) * 100, 100)}%` 
              }}
            ></div>
          </div>
        </div>
      </div>

      {/* Navigation Menu - Flex grow para ocupar espaço disponível */}
      <nav className="p-2 flex-1 overflow-y-auto">
        <div className="space-y-1">
          {menuItems.map((item) => {
            const Icon = item.icon;
            const isActive = activeSection === item.id;
            
            return (
              <button
                key={item.id}
                onClick={() => onSectionChange(item.id)}
                className={`
                  w-full flex items-center justify-between p-3 rounded-lg transition-all duration-200
                  ${isActive 
                    ? 'bg-blue-100 text-blue-700 border-r-4 border-blue-600' 
                    : 'text-gray-700 hover:bg-gray-100 hover:text-blue-600'
                  }
                `}
              >
                <div className="flex items-center space-x-3">
                  <Icon className={`w-5 h-5 ${isActive ? 'text-blue-600' : 'text-gray-500'}`} />
                  <div className="text-left">
                    <div className="text-sm font-medium">
                      {item.title}
                    </div>
                    <div className="text-xs text-gray-500">
                      {item.description}
                    </div>
                  </div>
                </div>
                
                {item.badge && (
                  <span className={`
                    px-2 py-1 text-xs font-semibold rounded-full
                    ${isActive 
                      ? 'bg-blue-200 text-blue-800' 
                      : 'bg-gray-200 text-gray-700'
                    }
                  `}>
                    {item.badge}
                  </span>
                )}
              </button>
            );
          })}
        </div>
      </nav>

      {/* Footer - Fixo na parte inferior */}
      <div className="p-3 border-t border-gray-200 bg-gray-50 flex-shrink-0 mt-auto">
        <div className="text-center">
          <p className="text-xs text-gray-500 mb-1">
            Versão 1.0.0
          </p>
          <p className="text-xs text-gray-400">
            Desenvolvido com ❤️
          </p>
        </div>
      </div>
    </div>
  );
};

export default Sidebar;