import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { useToast } from '@/hooks/use-toast';
import { useMutation } from '@tanstack/react-query';
import { apiRequest } from '@/lib/queryClient';
import { useLocation } from 'wouter';
import {
  Star,
  Target,
  Brain,
  Heart,
  Rocket,
  MessageCircle,
  BookOpen,
  Trophy,
  Sparkles,
  Users,
  ChevronRight,
  Mail,
  Phone,
  MapPin,
  Send,
  CheckCircle,
  ArrowRight
} from 'lucide-react';

interface ChatMessage {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
}

const LandingPage = () => {
  const [, navigate] = useLocation();
  const { toast } = useToast();
  
  // Chat state
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([
    {
      id: '1',
      role: 'assistant',
      content: 'Olá! Estou aqui para guiar sua jornada de transformação. No que posso ajudar hoje?',
      timestamp: new Date()
    }
  ]);
  const [userInput, setUserInput] = useState('');
  const [isChatLoading, setIsChatLoading] = useState(false);

  // Registration form state
  const [registrationForm, setRegistrationForm] = useState({
    name: '',
    email: '',
    phone: '',
    interests: '',
    message: ''
  });

  // Chat with AI mutation
  const chatMutation = useMutation({
    mutationFn: async (message: string) => {
      // Mock AI response - replace with actual API call
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      const responses = [
        'Sua jornada de transformação começa com autoconhecimento. Que área da sua vida você gostaria de desenvolver primeiro?',
        'A clareza sobre seus objetivos é fundamental. Você já tem alguma meta específica em mente?',
        'O desenvolvimento pessoal é uma jornada única para cada pessoa. Conte-me mais sobre seus sonhos.',
        'Transformação real acontece quando alinhamos propósito, ação e persistência. O que mais te motiva?'
      ];
      
      return responses[Math.floor(Math.random() * responses.length)];
    },
    onSuccess: (aiResponse) => {
      const assistantMessage: ChatMessage = {
        id: (Date.now() + Math.random()).toString(),
        role: 'assistant',
        content: aiResponse,
        timestamp: new Date()
      };
      setChatMessages(prev => [...prev, assistantMessage]);
      setIsChatLoading(false);
    },
    onError: () => {
      setIsChatLoading(false);
      toast({
        title: "Erro na conversa",
        description: "Não foi possível processar sua mensagem. Tente novamente.",
        variant: "destructive"
      });
    }
  });

  // Registration mutation
  const registrationMutation = useMutation({
    mutationFn: async (data: typeof registrationForm) => {
      // Mock registration - replace with actual API call
      await new Promise(resolve => setTimeout(resolve, 2000));
      return { success: true };
    },
    onSuccess: () => {
      toast({
        title: "Inscrição realizada!",
        description: "Entraremos em contato em breve para sua jornada de transformação.",
      });
      setRegistrationForm({
        name: '',
        email: '',
        phone: '',
        interests: '',
        message: ''
      });
    },
    onError: () => {
      toast({
        title: "Erro na inscrição",
        description: "Não foi possível processar sua inscrição. Tente novamente.",
        variant: "destructive"
      });
    }
  });

  const handleSendMessage = () => {
    if (!userInput.trim()) return;

    const userMessage: ChatMessage = {
      id: Date.now().toString(),
      role: 'user',
      content: userInput,
      timestamp: new Date()
    };

    setChatMessages(prev => [...prev, userMessage]);
    setIsChatLoading(true);
    chatMutation.mutate(userInput);
    setUserInput('');
  };

  const handleRegistration = (e: React.FormEvent) => {
    e.preventDefault();
    registrationMutation.mutate(registrationForm);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-slate-900 to-blue-900 text-white">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-purple-900/70 backdrop-blur-md border-b border-purple-500/20">
        <nav className="container mx-auto px-4 py-4 flex justify-between items-center">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full flex items-center justify-center">
              <Sparkles className="h-6 w-6 text-white" />
            </div>
            <span className="text-2xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
              Persona360
            </span>
          </div>
          <div className="hidden md:flex space-x-6">
            <a href="#inicio" className="hover:text-purple-300 transition-colors">Início</a>
            <a href="#jornada" className="hover:text-purple-300 transition-colors">Jornada</a>
            <a href="#mentor" className="hover:text-purple-300 transition-colors">Mentor IA</a>
            <a href="#participar" className="hover:text-purple-300 transition-colors">Participar</a>
          </div>
          <Button 
            onClick={() => navigate('/login')}
            className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700"
          >
            Entrar
          </Button>
        </nav>
      </header>

      <main className="container mx-auto px-4 py-8">
        {/* Hero Section */}
        <section id="inicio" className="min-h-[80vh] flex flex-col justify-center items-center text-center py-20">
          <div className="max-w-4xl mx-auto space-y-8">
            <div className="space-y-4">
              <h1 className="text-5xl md:text-7xl font-bold bg-gradient-to-r from-purple-400 via-blue-400 to-cyan-400 bg-clip-text text-transparent leading-tight">
                Transforme quem você é,
                <br />
                <span className="text-4xl md:text-6xl">sem deixar de ser você.</span>
              </h1>
              <p className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
                Uma nova forma de evoluir mente, propósito e emoções — com IA, gamificação e metodologias comprovadas.
              </p>
            </div>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <Button 
                onClick={() => document.getElementById('participar')?.scrollIntoView({ behavior: 'smooth' })}
                className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-8 py-4 text-lg font-semibold rounded-full shadow-xl transform hover:scale-105 transition-all"
              >
                <Rocket className="h-5 w-5 mr-2" />
                Quero fazer parte da próxima jornada
              </Button>
              <Button 
                variant="outline"
                onClick={() => navigate('/login')}
                className="border-purple-500 text-purple-300 hover:bg-purple-500/10 px-8 py-4 text-lg rounded-full"
              >
                Já tenho conta
                <ArrowRight className="h-5 w-5 ml-2" />
              </Button>
            </div>
          </div>
        </section>

        {/* Manifesto */}
        <section className="py-20">
          <Card className="bg-purple-900/30 backdrop-blur border-purple-500/20 max-w-5xl mx-auto">
            <CardContent className="p-12 text-center">
              <blockquote className="text-3xl md:text-4xl font-light italic text-purple-200 leading-relaxed">
                "O Persona360 nasceu para guiar pessoas em busca de clareza, cura e autoconexão. 
                Não somos mais uma plataforma de desenvolvimento. 
                Somos um espelho interativo da sua evolução."
              </blockquote>
            </CardContent>
          </Card>
        </section>

        {/* O Que Você Vai Viver */}
        <section className="py-20 text-center">
          <div className="max-w-6xl mx-auto space-y-16">
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-purple-300 mb-6">O Que Você Vai Viver</h2>
              <p className="text-xl text-gray-300 max-w-3xl mx-auto">
                Descubra ferramentas que se adaptam ao seu ritmo e objetivos únicos
              </p>
            </div>
            
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {[
                {
                  icon: Target,
                  title: "Metas que fazem sentido com sua alma",
                  description: "Sistema inteligente que adapta seus objetivos ao seu perfil único"
                },
                {
                  icon: Heart,
                  title: "Rituais diários que cabem no seu tempo",
                  description: "Práticas personalizadas para cada momento do seu dia"
                },
                {
                  icon: Brain,
                  title: "Recomendações que parecem ter sido feitas para você",
                  description: "IA que aprende seus padrões e sugere o próximo passo ideal"
                },
                {
                  icon: BookOpen,
                  title: "Um diário que te responde",
                  description: "Registre seus pensamentos e receba insights profundos"
                },
                {
                  icon: Trophy,
                  title: "Missões que te levam a um novo estágio",
                  description: "Gamificação inteligente que torna evolução em aventura"
                },
                {
                  icon: MessageCircle,
                  title: "Um mentor que entende você de verdade",
                  description: "Conversas com IA especializada em desenvolvimento humano"
                }
              ].map((feature, index) => (
                <Card 
                  key={index}
                  className="bg-slate-800/50 backdrop-blur border-slate-700 hover:bg-slate-700/50 transition-all duration-300 hover:scale-105 hover:border-purple-500/50"
                >
                  <CardContent className="p-8 text-center space-y-4">
                    <div className="w-16 h-16 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full flex items-center justify-center mx-auto">
                      <feature.icon className="h-8 w-8 text-white" />
                    </div>
                    <h3 className="text-xl font-semibold text-white">{feature.title}</h3>
                    <p className="text-gray-300">{feature.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>

            <div className="text-center">
              <p className="text-xl font-light italic text-purple-300">
                "Não contamos tudo aqui… porque é você quem vai descobrir o seu caminho."
              </p>
            </div>
          </div>
        </section>

        {/* Chat com Mentor IA */}
        <section id="mentor" className="py-20">
          <Card className="bg-slate-800/30 backdrop-blur border-slate-700 max-w-4xl mx-auto">
            <CardHeader className="text-center space-y-4">
              <CardTitle className="text-4xl md:text-5xl font-bold text-purple-300">
                Converse com o Mentor IA
              </CardTitle>
              <p className="text-xl text-gray-300 max-w-2xl mx-auto">
                Experimente o poder da nossa IA. Pergunte o que você quiser sobre autoconhecimento e receba uma resposta inspiradora.
              </p>
            </CardHeader>
            <CardContent className="p-8">
              <div className="bg-white rounded-2xl shadow-xl text-gray-800 flex flex-col h-[500px]">
                {/* Chat Messages */}
                <div className="flex-grow overflow-y-auto p-6 space-y-4">
                  {chatMessages.map((message) => (
                    <div 
                      key={message.id}
                      className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
                    >
                      <div 
                        className={`max-w-xs md:max-w-md p-4 rounded-lg shadow-md ${
                          message.role === 'user' 
                            ? 'bg-purple-600 text-white ml-4' 
                            : 'bg-purple-100 text-purple-900 mr-4'
                        }`}
                      >
                        <p className="text-sm">{message.content}</p>
                      </div>
                    </div>
                  ))}
                  
                  {isChatLoading && (
                    <div className="flex justify-start">
                      <div className="bg-purple-100 text-purple-900 p-4 rounded-lg shadow-md max-w-md mr-4">
                        <div className="flex items-center space-x-2">
                          <div className="w-2 h-2 bg-purple-600 rounded-full animate-pulse"></div>
                          <div className="w-2 h-2 bg-purple-600 rounded-full animate-pulse" style={{ animationDelay: '0.2s' }}></div>
                          <div className="w-2 h-2 bg-purple-600 rounded-full animate-pulse" style={{ animationDelay: '0.4s' }}></div>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
                
                {/* Chat Input */}
                <div className="p-6 border-t border-gray-200">
                  <div className="flex items-center space-x-2">
                    <Input
                      value={userInput}
                      onChange={(e) => setUserInput(e.target.value)}
                      placeholder="Digite sua pergunta..."
                      className="flex-grow"
                      onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
                    />
                    <Button 
                      onClick={handleSendMessage}
                      disabled={!userInput.trim() || isChatLoading}
                      className="bg-purple-600 hover:bg-purple-700"
                    >
                      <span className="mr-2">Perguntar</span>
                      <Sparkles className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </section>

        {/* Depoimentos */}
        <section className="py-20 text-center">
          <div className="max-w-6xl mx-auto space-y-12">
            <h2 className="text-4xl md:text-5xl font-bold text-purple-300">O que dizem sobre nós</h2>
            <div className="grid md:grid-cols-2 gap-8">
              {[
                {
                  name: "Mariana T., 28 anos",
                  avatar: "M",
                  testimonial: "Nunca fui tão bem guiada sem ter alguém me dizendo o que fazer. Parece que a plataforma me conhece."
                },
                {
                  name: "Carlos D., 35 anos", 
                  avatar: "C",
                  testimonial: "O que eu não esperava era me emocionar com os resultados que escrevi meses atrás. É surreal."
                }
              ].map((testimonial, index) => (
                <Card key={index} className="bg-slate-800/50 backdrop-blur border-slate-700">
                  <CardContent className="p-8 space-y-6">
                    <div className="w-20 h-20 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full flex items-center justify-center mx-auto text-2xl font-bold text-white">
                      {testimonial.avatar}
                    </div>
                    <blockquote className="text-lg italic text-gray-300 leading-relaxed">
                      "{testimonial.testimonial}"
                    </blockquote>
                    <p className="text-purple-300 font-semibold">— {testimonial.name}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Jornada de Transformação */}
        <section id="jornada" className="py-20">
          <Card className="bg-slate-800/30 backdrop-blur border-slate-700">
            <CardContent className="p-12 text-center space-y-12">
              <div>
                <h2 className="text-4xl md:text-5xl font-bold text-purple-300 mb-6">
                  Sua Jornada de Transformação
                </h2>
                <p className="text-xl md:text-2xl text-gray-300 max-w-4xl mx-auto">
                  Imagine desbloquear seu próximo nível de vida como num jogo… mas com sentido real.
                </p>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-5 gap-8 items-center max-w-5xl mx-auto">
                {[
                  { icon: Sparkles, text: "Defina sua intenção" },
                  { icon: Brain, text: "Deixe a IA guiar você" },
                  { icon: Target, text: "Descubra missões alinhadas" },
                  { icon: BookOpen, text: "Registre sua evolução" },
                  { icon: Trophy, text: "Celebre conquistas" }
                ].map((step, index) => (
                  <div key={index} className="flex flex-col items-center space-y-4">
                    <div className="w-20 h-20 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full flex items-center justify-center">
                      <step.icon className="h-10 w-10 text-white" />
                    </div>
                    <p className="text-lg font-medium text-white text-center">{step.text}</p>
                    {index < 4 && (
                      <ChevronRight className="hidden md:block h-6 w-6 text-purple-400 absolute right-0 transform translate-x-1/2" />
                    )}
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </section>

        {/* Formulário de Inscrição */}
        <section id="participar" className="py-20">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-4xl md:text-5xl font-bold text-purple-300 mb-6">
                Pronto para Transformar sua Vida?
              </h2>
              <p className="text-xl text-gray-300 max-w-2xl mx-auto">
                Junte-se à comunidade de pessoas que escolheram evoluir de forma inteligente e personalizada.
              </p>
            </div>

            <Card className="bg-slate-800/50 backdrop-blur border-slate-700">
              <CardContent className="p-8">
                <form onSubmit={handleRegistration} className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">
                        Nome completo *
                      </label>
                      <Input
                        value={registrationForm.name}
                        onChange={(e) => setRegistrationForm(prev => ({ ...prev, name: e.target.value }))}
                        placeholder="Como você gostaria de ser chamado?"
                        required
                        className="bg-slate-900/50 border-slate-600 text-white"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">
                        Email *
                      </label>
                      <Input
                        type="email"
                        value={registrationForm.email}
                        onChange={(e) => setRegistrationForm(prev => ({ ...prev, email: e.target.value }))}
                        placeholder="seu@email.com"
                        required
                        className="bg-slate-900/50 border-slate-600 text-white"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      Telefone
                    </label>
                    <Input
                      value={registrationForm.phone}
                      onChange={(e) => setRegistrationForm(prev => ({ ...prev, phone: e.target.value }))}
                      placeholder="(11) 99999-9999"
                      className="bg-slate-900/50 border-slate-600 text-white"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      Principais interesses
                    </label>
                    <Input
                      value={registrationForm.interests}
                      onChange={(e) => setRegistrationForm(prev => ({ ...prev, interests: e.target.value }))}
                      placeholder="Ex: liderança, produtividade, bem-estar..."
                      className="bg-slate-900/50 border-slate-600 text-white"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      Conte-nos um pouco sobre seus objetivos
                    </label>
                    <Textarea
                      value={registrationForm.message}
                      onChange={(e) => setRegistrationForm(prev => ({ ...prev, message: e.target.value }))}
                      placeholder="O que você espera alcançar em sua jornada de desenvolvimento?"
                      rows={4}
                      className="bg-slate-900/50 border-slate-600 text-white"
                    />
                  </div>

                  <Button 
                    type="submit"
                    disabled={registrationMutation.isPending}
                    className="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white py-4 text-lg font-semibold"
                  >
                    {registrationMutation.isPending ? (
                      <div className="flex items-center">
                        <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></div>
                        Processando...
                      </div>
                    ) : (
                      <>
                        <Send className="h-5 w-5 mr-2" />
                        Quero começar minha transformação
                      </>
                    )}
                  </Button>

                  <p className="text-sm text-gray-400 text-center">
                    Ao se inscrever, você concorda com nossos termos de uso e política de privacidade.
                  </p>
                </form>
              </CardContent>
            </Card>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="bg-slate-900/50 backdrop-blur border-t border-slate-700">
        <div className="container mx-auto px-4 py-12">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <div className="flex items-center space-x-3 mb-4">
                <div className="w-10 h-10 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full flex items-center justify-center">
                  <Sparkles className="h-6 w-6 text-white" />
                </div>
                <span className="text-2xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
                  Persona360
                </span>
              </div>
              <p className="text-gray-400">
                Transformando vidas através da tecnologia, gamificação e desenvolvimento pessoal inteligente.
              </p>
            </div>
            <div>
              <h4 className="text-white font-semibold mb-4">Links Úteis</h4>
              <ul className="space-y-2">
                <li><a href="#inicio" className="text-gray-400 hover:text-purple-300 transition-colors">Início</a></li>
                <li><a href="#jornada" className="text-gray-400 hover:text-purple-300 transition-colors">Jornada</a></li>
                <li><a href="#mentor" className="text-gray-400 hover:text-purple-300 transition-colors">Mentor IA</a></li>
                <li><Button variant="link" onClick={() => navigate('/login')} className="text-gray-400 hover:text-purple-300 p-0">Login</Button></li>
              </ul>
            </div>
            <div>
              <h4 className="text-white font-semibold mb-4">Contato</h4>
              <div className="space-y-2">
                <div className="flex items-center space-x-2 text-gray-400">
                  <Mail className="h-4 w-4" />
                  <span>contato@persona360.com</span>
                </div>
                <div className="flex items-center space-x-2 text-gray-400">
                  <Phone className="h-4 w-4" />
                  <span>(11) 9999-9999</span>
                </div>
                <div className="flex items-center space-x-2 text-gray-400">
                  <MapPin className="h-4 w-4" />
                  <span>São Paulo, Brasil</span>
                </div>
              </div>
            </div>
          </div>
          <div className="border-t border-slate-700 mt-8 pt-8 text-center">
            <p className="text-gray-400">
              © 2024 Persona360. Todos os direitos reservados. Feito com ❤️ para transformar vidas.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default LandingPage;