import { useState, useEffect } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import { Phone, Mail, MapPin, Clock, Send, MessageCircle, Instagram, Loader2 } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { HoverScale, HoverLift, InteractiveCard, InteractiveLink } from "@/components/ui/micro-interactions";

const Contact = () => {
  const { toast } = useToast();
  const [isLoading, setIsLoading] = useState(false);
  const [isContactInfoLoading, setIsContactInfoLoading] = useState(true);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    graduationType: '',
    university: '',
    date: '',
    guestCount: '',
    services: [],
    message: ''
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    
    try {
      // Simulate form processing delay
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      // Create WhatsApp message
      const message = `Olá! Gostaria de solicitar um orçamento para organização completa de formatura:
      
Nome: ${formData.name}
Email: ${formData.email}
Telefone: ${formData.phone}
Tipo de formatura: ${formData.graduationType}
Universidade/Escola: ${formData.university}
Data da formatura: ${formData.date}
Número aproximado de convidados: ${formData.guestCount}
Mensagem: ${formData.message}`;
      
      const whatsappUrl = `https://wa.me/5549988340246?text=${encodeURIComponent(message)}`;
      window.open(whatsappUrl, '_blank');
      
      toast({
        title: "Redirecionando para WhatsApp",
        description: "Você será redirecionado para o WhatsApp para finalizar sua solicitação de orçamento.",
      });
    } catch (error) {
      toast({
        title: "Erro",
        description: "Ocorreu um erro ao processar sua solicitação. Tente novamente.",
        variant: "destructive"
      });
    } finally {
      setIsLoading(false);
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSelectChange = (name: string, value: string) => {
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const contactInfo = [
    {
      icon: Phone,
      title: "Telefone",
      content: "(49) 98834-0246",
      action: "tel:+5549988340246"
    },
    {
      icon: MessageCircle,
      title: "WhatsApp",
      content: "(49) 98834-0246",
      action: "https://wa.me/5549988340246"
    },
    {
      icon: Mail,
      title: "E-mail",
      content: "contato@grupomemorizze.com.br",
      action: "mailto:contato@grupomemorizze.com.br"
    },
    {
      icon: MapPin,
      title: "Localização",
      content: "Florianópolis - SC",
      action: null
    },
    {
      icon: Instagram,
      title: "Instagram",
      content: "@memorizzeformaturas",
      action: "https://instagram.com/memorizzeformaturas"
    }
  ];

  // Simulate loading contact info
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsContactInfoLoading(false);
    }, 1000);
    return () => clearTimeout(timer);
  }, []);

  const ContactInfoSkeleton = () => (
    <div className="space-y-6">
      {[...Array(5)].map((_, index) => (
        <div key={index} className="flex items-center space-x-4">
          <Skeleton className="w-12 h-12 rounded-full" />
          <div className="space-y-2">
            <Skeleton className="h-4 w-20" />
            <Skeleton className="h-3 w-32" />
          </div>
        </div>
      ))}
    </div>
  );

  return (
    <section id="contato" className="py-20 bg-background">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-primary mb-6">
            Entre em Contato
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Pronto para organizar sua formatura dos sonhos? Entre em contato conosco e receba 
            um orçamento personalizado completo em até 2 horas.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* WhatsApp Button */}
          <Card className="shadow-elegant border-0">
            <CardHeader>
              <CardTitle className="text-2xl text-primary">
                Fale Conosco pelo WhatsApp
              </CardTitle>
            </CardHeader>
            <CardContent className="flex flex-col items-center justify-center p-8">
              <Button
                size="lg"
                className="w-full bg-[#25D366] hover:bg-[#128C7E] text-white text-lg py-8 disabled:opacity-50"
                onClick={() => window.open('https://wa.me/5549988340246', '_blank')}
                disabled={isLoading}
              >
                {isLoading ? (
                  <Loader2 className="h-8 w-8 mr-4 animate-spin" />
                ) : (
                  <MessageCircle className="h-8 w-8 mr-4" />
                )}
                <div className="text-center">
                  <div className="font-bold text-xl">
                    {isLoading ? 'Processando...' : 'WhatsApp'}
                  </div>
                  <div className="text-sm">(49) 98834-0246</div>
                </div>
              </Button>
              <p className="mt-6 text-center text-muted-foreground">
                Clique no botão acima para falar diretamente com nosso time de atendimento.
              </p>
            </CardContent>
          </Card>

          {/* Contact Information */}
          <div className="space-y-8">
            <Card className="shadow-elegant border-0">
              <CardContent className="p-8">
                <h3 className="text-2xl font-bold text-primary mb-6">
                  Informações de Contato
                </h3>
                {isContactInfoLoading ? (
                  <ContactInfoSkeleton />
                ) : (
                  <div className="space-y-6">
                    {contactInfo.map((info, index) => {
                      const IconComponent = info.icon;
                      return (
                        <HoverScale key={index} className="flex items-center space-x-4 animate-in fade-in duration-500" style={{animationDelay: `${index * 100}ms`}}>
                          <HoverLift className="w-12 h-12 bg-gradient-accent rounded-full flex items-center justify-center flex-shrink-0">
                            <IconComponent className="h-6 w-6 text-accent-foreground" />
                          </HoverLift>
                          <div>
                            <h4 className="font-semibold text-primary">{info.title}</h4>
                            {info.action ? (
                              <InteractiveLink 
                                href={info.action}
                                className="text-muted-foreground hover:text-accent transition-smooth"
                              >
                                {info.content}
                              </InteractiveLink>
                            ) : (
                              <span className="text-muted-foreground">{info.content}</span>
                            )}
                          </div>
                        </HoverScale>
                      );
                    })}
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Business Hours */}
            <InteractiveCard>
              <Card className="shadow-elegant border-0">
                <CardContent className="p-8">
                  <div className="flex items-center space-x-3 mb-6">
                    <HoverScale className="w-12 h-12 bg-gradient-accent rounded-full flex items-center justify-center">
                      <Clock className="h-6 w-6 text-accent-foreground" />
                    </HoverScale>
                    <h3 className="text-2xl font-bold text-primary">
                      Horário de Atendimento
                    </h3>
                  </div>
                  <div className="space-y-3">
                    <HoverScale className="flex justify-between">
                      <span className="text-primary font-medium">Segunda - Sexta</span>
                      <span className="text-muted-foreground">08:00 - 18:00</span>
                    </HoverScale>
                    <HoverScale className="flex justify-between">
                      <span className="text-primary font-medium">Sábado</span>
                      <span className="text-muted-foreground">08:00 - 14:00</span>
                    </HoverScale>
                    <HoverScale className="flex justify-between">
                      <span className="text-primary font-medium">Domingo</span>
                      <span className="text-muted-foreground">Somente eventos</span>
                    </HoverScale>
                  </div>
                </CardContent>
              </Card>
            </InteractiveCard>

            {/* Quick Response */}
            <HoverLift className="bg-gradient-accent rounded-2xl p-8 text-accent-foreground">
              <h3 className="text-2xl font-bold mb-4">Organização Completa</h3>
              <p className="text-lg mb-4">
                Orçamento completo incluindo todos os serviços necessários para sua formatura perfeita.
              </p>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <HoverScale className="text-center">
                  <div className="text-xl font-bold">2h</div>
                  <div className="text-sm opacity-90">Resposta</div>
                </HoverScale>
                <HoverScale className="text-center">
                  <div className="text-xl font-bold">24h</div>
                  <div className="text-sm opacity-90">Orçamento</div>
                </HoverScale>
                <HoverScale className="text-center">
                  <div className="text-xl font-bold">100%</div>
                  <div className="text-sm opacity-90">Gratuito</div>
                </HoverScale>
                <HoverScale className="text-center">
                  <div className="text-xl font-bold">Total</div>
                  <div className="text-sm opacity-90">Organização</div>
                </HoverScale>
              </div>
            </HoverLift>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Contact;
