import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { Award, Gift, RefreshCcw, LogOut } from 'lucide-react';
import confetti from 'canvas-confetti';

export default function ResultPage() {
  const [lead, setLead] = useState(null);

  useEffect(() => {
    const data = JSON.parse(localStorage.getItem('currentLead') || '{}');
    setLead(data);
    
    let intervalId;

    if (data.pontuacao === 100) {
      // Gabaritou! Confetes infinitos verde e amarelo caindo das laterais
      const colors = ['#009B3A', '#FDE100'];
      
      intervalId = setInterval(() => {
        // Confetes lado esquerdo
        confetti({
          particleCount: 4,
          angle: 60,
          spread: 55,
          origin: { x: 0, y: 0.8 },
          colors: colors,
          zIndex: 1000
        });
        
        // Confetes lado direito
        confetti({
          particleCount: 4,
          angle: 120,
          spread: 55,
          origin: { x: 1, y: 0.8 },
          colors: colors,
          zIndex: 1000
        });
      }, 150);

    } else if (data.pontuacao === 80) {
      // Bateu na trave! Confetes comemorativos por 3 segundos
      const duration = 3 * 1000;
      const animationEnd = Date.now() + duration;
      const colors = ['#009B3A', '#FDE100', '#E30613'];

      intervalId = setInterval(() => {
        const timeLeft = animationEnd - Date.now();

        if (timeLeft <= 0) {
          return clearInterval(intervalId);
        }

        const particleCount = 40 * (timeLeft / duration);
        confetti({
          particleCount,
          startVelocity: 30,
          spread: 360,
          ticks: 60,
          origin: { x: Math.random(), y: Math.random() - 0.2 },
          colors: colors,
          zIndex: 1000
        });
      }, 250);
    }

    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, []);

  if (!lead) return null;

  const score = lead.pontuacao || 0;

  // Lógica de Renderização Baseada na Pontuação
  let title = '';
  let textContent = null;
  let iconElement = null;

  if (score === 100) {
    iconElement = <Award size={72} className="mb-4 animate-bounce" style={{ color: 'var(--secondary-color)' }} />;
    title = 'GABARITOU! RESULTADO PERFEITO! 🏆';
    textContent = (
      <>
        Que desempenho espetacular! Você provou que tem foco, conhecimento e dedicação de sobra — exatamente o perfil que se destaca no mercado de trabalho!<br /><br />
        Com uma nota dessas, o seu lugar é estudando com a gente. Chame um dos nossos consultores no stand agora mesmo para conhecer o seu futuro curso e celebrar esse resultado!<br /><br />
        Parabéns! Suas chances de levar o Kit da Seleção Brasileira acabam de ficar ainda maiores!
      </>
    );
  } else if (score === 80) {
    iconElement = <Award size={64} className="mb-4" style={{ color: 'rgba(255, 255, 255, 0.7)' }} />;
    title = 'BATEU NA TRAVE! FOI POR MUITO POUCO! 🔥';
    textContent = (
      <>
        Que resultado excelente! Você mostrou que já tem muito conhecimento e está super preparado para grandes desafios. Com essa dedicação, você vai longe!<br /><br />
        Aproveite esse embalo e venha falar com a nossa equipe no stand. Descubra os detalhes do curso que vai te dar os 20% que faltam para você ser um profissional nota 100!<br /><br />
        Cruze os dedos: você está fortíssimo na disputa pelo Kit da Seleção Brasileira!
      </>
    );
  } else {
    // 20, 40 ou 60 pontos
    iconElement = <Gift size={64} className="mb-4" style={{ color: 'var(--primary-color)' }} />;
    title = 'NO CAMINHO CERTO! 🚀';
    textContent = (
      <>
        Todo aprendizado é uma jornada, e você já deu o primeiro passo! Mostrou que tem curiosidade e vontade de aprender. Que tal transformar essa energia no seu próximo grande salto profissional?<br /><br />
        Converse agora com a nossa equipe no stand, descubra tudo sobre o curso e veja como podemos te preparar para chegar ao topo.<br /><br />
        Ah, e fique na torcida: a sua participação já garantiu que você concorra ao Kit da Seleção Brasileira!
      </>
    );
  }

  return (
    <div className="glass-panel animate-fade-in delay-300 flex flex-col items-center text-center">
      {iconElement}
      
      <h2 className="text-2xl md:text-3xl font-bold mb-2 text-gradient" style={{ minHeight: '3.5rem', display: 'flex', alignItems: 'center' }}>
        {title}
      </h2>
      
      <div className="text-4xl font-bold my-6 p-6 rounded-2xl" style={{ background: 'rgba(0,0,0,0.3)', border: '1px solid var(--border-color)', boxShadow: '0 8px 20px rgba(0,0,0,0.2)' }}>
        {score} <span className="text-lg text-muted">/ 100 pts</span>
      </div>

      <p className="text-base md:text-lg mb-8 leading-relaxed text-slate-200">
        {textContent}
      </p>

      {score === 100 ? (
        <Link 
          to="/" 
          className="btn-danger" 
          onClick={() => localStorage.removeItem('currentLead')}
          style={{ maxWidth: '320px' }}
        >
          <LogOut size={20} /> Sair
        </Link>
      ) : (
        <Link 
          to="/" 
          className="btn-secondary" 
          onClick={() => localStorage.removeItem('currentLead')}
          style={{ maxWidth: '320px' }}
        >
          <RefreshCcw size={20} /> Jogar Novamente
        </Link>
      )}
    </div>
  );
}
