import { useState, useEffect } from 'react';
import { Navigation } from '@/components/Navigation';
import { ResultsDashboard } from '@/components/ResultsDashboard';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Card } from '@/components/ui/card';
import { TeamData, CompetitorData, MatchFixture, SimulationResult } from '@/types';
import { runMonteCarloSimulation } from '@/lib/simulation';
import { Trophy, TrendingDown, Home, Youtube, RefreshCw } from 'lucide-react';
import { toast } from 'sonner';
import { brasileirao2025Data } from '@/data/standings';
import santosverseLogo from '@/assets/santosverse-logo.png';
import { supabase } from '@/integrations/supabase/client';

const Index = () => {
  const [selectedTeam, setSelectedTeam] = useState<string>('');
  const [currentPoints, setCurrentPoints] = useState<number>(0);
  const [currentRound, setCurrentRound] = useState<number>(29);
  const [results, setResults] = useState<SimulationResult | null>(null);
  const [isSimulating, setIsSimulating] = useState(false);
  const [standingsData, setStandingsData] = useState<any>(brasileirao2025Data);
  const [isLoadingData, setIsLoadingData] = useState(false);

  useEffect(() => {
    fetchStandingsData();
  }, []);

  const fetchStandingsData = async () => {
    setIsLoadingData(true);
    try {
      console.log('Buscando dados do Brasileirão...');
      const { data, error } = await supabase.functions.invoke('fetch-brasileirao');
      
      // Se houver erro HTTP, tentar acessar os dados da resposta
      if (error) {
        console.error('Erro ao buscar dados:', error);
        
        // Verificar se é um erro de fallback (API retornou dados incompletos)
        // Neste caso, usar dados locais sem mostrar erro
        if (data && data.useFallback) {
          console.log('API retornou dados incompletos, usando dados locais');
          toast.info('Usando dados locais atualizados', {
            description: '📊 Tabela completa do Brasileirão com 20 times',
            duration: 3000,
          });
          setStandingsData(brasileirao2025Data);
          setIsLoadingData(false);
          return;
        }
        
        throw error;
      }
      
      // Verificar se há erro de API key
      if (data && data.error) {
        console.error('Erro da API:', data);
        
        // Se for erro de API incompleta, usar fallback
        if (data.useFallback || data.error === 'API_UNAVAILABLE') {
          console.log('API indisponível ou incompleta, usando dados locais');
          toast.info('Usando dados locais atualizados', {
            description: '📊 Tabela completa do Brasileirão com 20 times',
            duration: 3000,
          });
          setStandingsData(brasileirao2025Data);
          return;
        }
        
        if (data.error === 'API_KEY_NOT_CONFIGURED') {
          toast.error('API não configurada', {
            description: '📝 Para dados ao vivo, configure uma chave API gratuita em api-football.com',
            duration: 6000,
          });
        } else if (data.error === 'INVALID_API_KEY') {
          toast.error('Chave API inválida', {
            description: '🔑 Verifique sua chave API ou obtenha uma nova em api-football.com',
            duration: 6000,
          });
        } else {
          toast.error('Erro na API', {
            description: data.message || 'Usando dados locais',
            duration: 4000,
          });
        }
        
        // Usar dados locais como fallback
        setStandingsData(brasileirao2025Data);
        return;
      }
      
      if (data && data.teams) {
        console.log('Dados recebidos:', data);
        setStandingsData(data);
        setCurrentRound(data.round || 29);
        toast.success('✅ Dados atualizados!', {
          description: `Rodada ${data.round} • ${data.teams.length} times`
        });
      }
    } catch (error) {
      console.error('Erro ao buscar dados da API:', error);
      toast.info('Usando dados locais atualizados', {
        description: '📊 Tabela completa do Brasileirão com 20 times',
        duration: 3000,
      });
      setStandingsData(brasileirao2025Data);
    } finally {
      setIsLoadingData(false);
    }
  };

  const handleSimulation = () => {
    if (!selectedTeam) {
      toast.error('Selecione um time para analisar');
      return;
    }

    setIsSimulating(true);
    toast.info('Iniciando simulação de Monte Carlo...', {
      description: 'Processando 1 milhão de cenários'
    });

    setTimeout(() => {
      try {
        const teamInfo = standingsData.teams.find((t: any) => t.name === selectedTeam);
        if (!teamInfo) return;

        // Prepare team data using user-provided values
        const teamData: TeamData = {
          name: teamInfo.name,
          points: currentPoints,
          gamesPlayed: currentRound,
          wins: teamInfo.wins,
          draws: teamInfo.draws,
          losses: teamInfo.losses,
          goalDifference: teamInfo.goalDifference,
          position: teamInfo.position
        };

        // Prepare competitors (teams around relegation zone - positions 12-20)
        const competitors: CompetitorData[] = standingsData.teams
          .filter((t: any) => t.position >= 12 && t.name !== selectedTeam)
          .map((t: any) => ({
            name: t.name,
            points: t.points,
            gamesPlayed: t.gamesPlayed,
            position: t.position
          }));

        // Generate realistic fixtures for remaining games
        const remainingGames = 38 - currentRound;
        const fixtures: MatchFixture[] = [];
        
        for (let i = 0; i < remainingGames; i++) {
          const homeAway = Math.random() > 0.5 ? 'C' : 'F';
          const opponentPool = standingsData.teams.filter((t: any) => t.name !== selectedTeam);
          const opponent = opponentPool[Math.floor(Math.random() * opponentPool.length)];
          
          fixtures.push({
            matchNumber: i + 1,
            homeAway: homeAway as 'C' | 'F',
            opponent: opponent.name,
            opponentPosition: opponent.position
          });
        }

        const result = runMonteCarloSimulation({
          targetTeam: teamData,
          competitors,
          fixtures
        });

        setResults(result);
        setIsSimulating(false);
        
        toast.success('Simulação concluída!', {
          description: `Probabilidade: ${result.relegationProbability.toFixed(2)}%`
        });

        setTimeout(() => {
          document.getElementById('results')?.scrollIntoView({ 
            behavior: 'smooth', 
            block: 'start' 
          });
        }, 100);
      } catch (error) {
        console.error('Erro na simulação:', error);
        toast.error('Erro ao executar simulação');
        setIsSimulating(false);
      }
    }, 1500);
  };

  return (
    <div className="min-h-screen bg-background">
      <Navigation />

      {/* Hero Section */}
      <header className="bg-gradient-to-b from-background to-secondary py-16 px-4 border-b border-primary/20">
        <div className="container mx-auto max-w-6xl">
          <div className="flex items-center justify-center gap-4 mb-4">
            <img src={santosverseLogo} alt="Santosverse" className="w-16 h-16" />
            <h1 className="text-4xl md:text-6xl font-black text-primary text-center">
              SANTOSVERSE
            </h1>
          </div>
          <p className="text-lg md:text-xl text-center text-foreground max-w-3xl mx-auto">
            Análise Estatística Avançada - Simulação de Monte Carlo
          </p>
          <p className="text-sm text-center text-muted-foreground mt-2">
            Brasileirão Série A 2025 • Modelo Preditivo com 1 milhão de iterações
          </p>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto max-w-4xl px-4 py-12">
        <Card className="p-8 mb-8 bg-card border-primary/20">
          <h2 className="text-2xl font-bold mb-6 text-primary">
            Configuração da Análise
          </h2>
          
          <div className="grid md:grid-cols-2 gap-6 mb-8">
            <div>
              <label className="block text-sm font-medium mb-2 text-foreground">
                Time para Análise
              </label>
              <Select value={selectedTeam} onValueChange={setSelectedTeam} disabled={isLoadingData}>
                <SelectTrigger className="bg-input border-primary/30 text-foreground">
                  <SelectValue placeholder={isLoadingData ? "Carregando..." : "Escolha um time"} />
                </SelectTrigger>
                <SelectContent className="bg-popover border-primary/30">
                  {standingsData.teams.map((team: any) => (
                    <SelectItem 
                      key={team.name} 
                      value={team.name}
                      className="text-popover-foreground"
                    >
                      {team.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div>
              <label className="block text-sm font-medium mb-2 text-foreground">
                Pontos Atuais
              </label>
              <input
                type="number"
                min="0"
                max="114"
                value={currentPoints}
                onChange={(e) => setCurrentPoints(parseInt(e.target.value) || 0)}
                className="w-full h-10 px-3 rounded-md bg-input border border-primary/30 text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="Ex: 38"
              />
            </div>

            <div>
              <label className="block text-sm font-medium mb-2 text-foreground">
                Rodada Atual
              </label>
              <input
                type="number"
                min="1"
                max="38"
                value={currentRound}
                onChange={(e) => setCurrentRound(parseInt(e.target.value) || 29)}
                className="w-full h-10 px-3 rounded-md bg-input border border-primary/30 text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="Ex: 29"
              />
            </div>
          </div>

          <div className="flex gap-3 justify-center">
            <Button
              onClick={handleSimulation}
              disabled={isSimulating || !selectedTeam || !currentPoints || isLoadingData}
              size="lg"
              className="bg-primary text-primary-foreground text-lg px-12 py-6 hover:bg-primary/90 transition-all font-bold"
            >
              {isSimulating ? (
                <>
                  <div className="animate-spin rounded-full h-5 w-5 border-2 border-primary-foreground border-t-transparent mr-3" />
                  Simulando...
                </>
              ) : (
                <>
                  <TrendingDown className="w-5 h-5 mr-2" />
                  Executar Simulação Monte Carlo
                </>
              )}
            </Button>
            <Button
              onClick={fetchStandingsData}
              disabled={isLoadingData}
              size="lg"
              variant="outline"
              className="border-primary/30 px-6"
            >
              <RefreshCw className={`w-5 h-5 ${isLoadingData ? 'animate-spin' : ''}`} />
            </Button>
          </div>
        </Card>

        {/* Resultados */}
        {results && selectedTeam && (
          <section id="results" className="scroll-mt-8">
            <h2 className="text-2xl font-bold mb-6 flex items-center gap-2 text-primary">
              <Trophy className="w-6 h-6" />
              Resultados da Análise
            </h2>
            <ResultsDashboard results={results} teamName={selectedTeam} />
          </section>
        )}
      </main>

      {/* Footer */}
      <footer className="bg-secondary mt-16 py-12 px-4 border-t border-primary/20">
        <div className="container mx-auto max-w-6xl">
          <div className="grid md:grid-cols-3 gap-8">
            {/* Logo e Descrição */}
            <div>
              <div className="flex items-center gap-3 mb-4">
                <img src={santosverseLogo} alt="Santosverse" className="w-12 h-12" />
                <span className="text-primary font-bold text-xl">SANTOSVERSE</span>
              </div>
              <p className="text-sm text-muted-foreground">
                O universo completo do Santos FC: Tática com IA, Elenco, Formações e bordões santista.
              </p>
            </div>

            {/* Links Rápidos */}
            <div>
              <h3 className="text-primary font-semibold mb-4">Links Rápidos</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <a href="/sobre" className="text-muted-foreground hover:text-primary transition-colors">
                    → Sobre Nós
                  </a>
                </li>
                <li>
                  <a href="/politica-privacidade" className="text-muted-foreground hover:text-primary transition-colors">
                    → Política de Privacidade
                  </a>
                </li>
                <li>
                  <a href="/termos-uso" className="text-muted-foreground hover:text-primary transition-colors">
                    → Termos de Uso
                  </a>
                </li>
                <li>
                  <a href="/cultura-santista" className="text-muted-foreground hover:text-primary transition-colors">
                    → Vocabulário Santista
                  </a>
                </li>
                <li>
                  <a href="/" className="text-muted-foreground hover:text-primary transition-colors">
                    → Campo Tático Interativo
                  </a>
                </li>
              </ul>
            </div>

            {/* Conecte-se */}
            <div>
              <h3 className="text-primary font-semibold mb-4">Conecte-se</h3>
              <div className="flex gap-4 mb-4">
                <a 
                  href="https://www.youtube.com/@Santosverse" 
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center hover:bg-primary/20 transition-colors"
                  aria-label="YouTube"
                >
                  <Youtube className="w-5 h-5 text-primary" />
                </a>
                <a 
                  href="/" 
                  className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center hover:bg-primary/20 transition-colors"
                  aria-label="Home"
                >
                  <Home className="w-5 h-5 text-primary" />
                </a>
              </div>
              <p className="text-xs text-muted-foreground">
                Canal no YouTube com zoeiras, bordões e táticas do Peixão.
              </p>
            </div>
          </div>

          {/* Divider */}
          <div className="border-t border-primary/20 mt-8 pt-8">
            <div className="flex flex-col md:flex-row justify-between items-center gap-4">
              <p className="text-sm text-muted-foreground">
                © 2025 Santosverse | Todos os direitos reservados
              </p>
              <p className="text-xs text-muted-foreground text-center">
                Seja pra perder ou pra ganhar, o Santosverse é sua casa.
              </p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Index;