"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Phone, MessageCircle, Mail, MapPin, Send, ArrowRight, Clock, CheckCircle } from "lucide-react"
import { AnimatedWrapper } from "@/components/animated-wrapper"
import { SectionTitle } from "@/components/section-title"
import { GlassCard } from "@/components/glass-card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"

interface ContactMethod {
    icon: React.ReactNode
    label: string
    value: string
    href?: string
    type: "phone" | "whatsapp" | "email" | "address"
    description?: string
}

interface ContactData {
    sectionId: string
    overline: string
    title: string
    subtitle?: string
    description: string
    contactMethods: ContactMethod[]
    businessHours: {
        weekdays: string
        saturday: string
        sunday?: string
    }
}

// Dados padrão de contato
const defaultContactData: ContactData = {
    sectionId: "contato",
    overline: "Entre em Contato",
    title: "Vamos Conversar Sobre Seu Projeto",
    subtitle: "Pronto para transformar sua gestão empresarial? Nossa equipe está aqui para ajudar você a encontrar a solução perfeita.",
    description: "Através da nossa Central de Atendimento você pode tirar dúvidas, solicitar demonstrações ou obter um orçamento personalizado para sua empresa.",
    contactMethods: [
        {
            icon: <Phone size={24} className="text-primary" />,
            label: "Telefone",
            value: "(44) 3025-5690",
            href: "tel:4430255690",
            type: "phone",
            description: "Horário comercial"
        },
        {
            icon: <MessageCircle size={24} className="text-primary" />,
            label: "WhatsApp",
            value: "(44) 99854-3210",
            href: "https://wa.me/5544998543210",
            type: "whatsapp",
            description: "Resposta rápida"
        },
        {
            icon: <Mail size={24} className="text-primary" />,
            label: "E-mail",
            value: "contato@ingasoft.com.br",
            href: "mailto:contato@ingasoft.com.br",
            type: "email",
            description: "Para orçamentos"
        },
        {
            icon: <MapPin size={24} className="text-primary" />,
            label: "Endereço",
            value: "Av. Carneiro Leão, 294 – Sala 1101\nMaringá/PR",
            type: "address",
            description: "Visite nosso escritório"
        }
    ],
    businessHours: {
        weekdays: "Segunda a Sexta: 8h às 18h",
        saturday: "Sábado: 8h às 12h",
        sunday: "Domingo: Fechado"
    }
}

// Componente para método de contato individual
interface ContactMethodCardProps {
    method: ContactMethod
    index: number
}

function ContactMethodCard({ method, index }: ContactMethodCardProps) {
    const content = (
        <div className="flex items-start gap-4 p-4 rounded-xl bg-background/50 hover:bg-background/80 transition-all duration-300 group border border-transparent hover:border-primary/20">
            <div className="flex-shrink-0 w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 group-hover:scale-110 transition-all duration-300">
                {method.icon}
            </div>
            <div className="flex-1 min-w-0">
                <h4 className="font-medium text-foreground group-hover:text-primary transition-colors duration-300">
                    {method.label}
                </h4>
                <p className="text-sm text-muted-foreground mt-1 break-words whitespace-pre-line">
                    {method.value}
                </p>
                {method.description && (
                    <p className="text-xs text-muted-foreground/80 mt-1">
                        {method.description}
                    </p>
                )}
            </div>
            {method.href && (
                <ArrowRight size={16} className="text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all duration-300" />
            )}
        </div>
    )

    if (method.href) {
        return (
            <AnimatedWrapper delay={index * 0.1}>
                <a
                    href={method.href}
                    target={method.type === "whatsapp" ? "_blank" : undefined}
                    rel={method.type === "whatsapp" ? "noopener noreferrer" : undefined}
                    className="block"
                >
                    {content}
                </a>
            </AnimatedWrapper>
        )
    }

    return (
        <AnimatedWrapper delay={index * 0.1}>
            {content}
        </AnimatedWrapper>
    )
}

// Componente do formulário de contato
interface ContactFormProps {
    onSubmit?: (data: FormData) => void
}

function ContactForm({ onSubmit }: ContactFormProps) {
    const [isSubmitting, setIsSubmitting] = useState(false)
    const [isSubmitted, setIsSubmitted] = useState(false)

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        setIsSubmitting(true)

        const formData = new FormData(e.currentTarget)

        try {
            // Simular delay de envio
            await new Promise(resolve => setTimeout(resolve, 1000))

            if (onSubmit) {
                onSubmit(formData)
            } else {
                console.log("Form submitted:", Object.fromEntries(formData))
            }

            setIsSubmitted(true)
            // Reset form
            e.currentTarget.reset()
        } catch (error) {
            console.error("Erro ao enviar formulário:", error)
        } finally {
            setIsSubmitting(false)
            // Reset success state after 3 seconds
            setTimeout(() => setIsSubmitted(false), 3000)
        }
    }

    return (
        <div className="space-y-6">
            <div>
                <h3 className="text-xl font-semibold text-foreground mb-2">
                    Envie sua Mensagem
                </h3>
                <p className="text-muted-foreground text-sm">
                    Preencha o formulário e entraremos em contato em até 24 horas.
                </p>
            </div>

            <form className="space-y-4" onSubmit={handleSubmit}>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <Input
                            name="name"
                            type="text"
                            placeholder="Seu nome completo"
                            required
                            disabled={isSubmitting}
                            className="bg-background/50 border-border/50 focus:border-primary/50 focus:bg-background transition-all duration-300"
                        />
                    </div>
                    <div>
                        <Input
                            name="email"
                            type="email"
                            placeholder="seu@email.com"
                            required
                            disabled={isSubmitting}
                            className="bg-background/50 border-border/50 focus:border-primary/50 focus:bg-background transition-all duration-300"
                        />
                    </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <Input
                            name="phone"
                            type="tel"
                            placeholder="(00) 00000-0000"
                            disabled={isSubmitting}
                            className="bg-background/50 border-border/50 focus:border-primary/50 focus:bg-background transition-all duration-300"
                        />
                    </div>
                    <div>
                        <Input
                            name="company"
                            type="text"
                            placeholder="Nome da empresa"
                            disabled={isSubmitting}
                            className="bg-background/50 border-border/50 focus:border-primary/50 focus:bg-background transition-all duration-300"
                        />
                    </div>
                </div>

                <div>
                    <Input
                        name="subject"
                        type="text"
                        placeholder="Assunto da mensagem"
                        disabled={isSubmitting}
                        className="bg-background/50 border-border/50 focus:border-primary/50 focus:bg-background transition-all duration-300"
                    />
                </div>

                <div>
                    <Textarea
                        name="message"
                        placeholder="Descreva seu projeto ou dúvida..."
                        rows={10}
                        required
                        disabled={isSubmitting}
                        className="bg-background/50 border-border/50 focus:border-primary/50 focus:bg-background transition-all duration-300 resize-none"
                    />
                </div>

                <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                    <Button
                        type="submit"
                        size="lg"
                        disabled={isSubmitting}
                        className="w-full bg-primary hover:bg-primary/90 text-primary-foreground relative overflow-hidden group"
                    >
                        {isSubmitting ? (
                            <>
                                <motion.div
                                    animate={{ rotate: 360 }}
                                    transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
                                    className="w-4 h-4 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full mr-2"
                                />
                                Enviando...
                            </>
                        ) : isSubmitted ? (
                            <>
                                <CheckCircle size={18} className="mr-2" />
                                Mensagem Enviada!
                            </>
                        ) : (
                            <>
                                <Send size={18} className="mr-2 group-hover:translate-x-1 transition-transform duration-200" />
                                Enviar Mensagem
                            </>
                        )}
                    </Button>
                </motion.div>
            </form>
        </div>
    )
}

// Componente das informações de contato e horários
interface ContactInfoProps {
    contactMethods: ContactMethod[]
    businessHours: ContactData['businessHours']
    description: string
}

function ContactInfo({ contactMethods, businessHours, description }: ContactInfoProps) {
    return (
        <div className="space-y-6">
            <div>
                <h3 className="text-xl font-semibold text-foreground mb-2">
                    Como Entrar em Contato
                </h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                    {description}
                </p>
            </div>

            {/* Métodos de contato */}
            <div className="space-y-3">
                {contactMethods.map((method, index) => (
                    <ContactMethodCard
                        key={method.label}
                        method={method}
                        index={index}
                    />
                ))}
            </div>

            {/* Horário de funcionamento */}
            <div className="p-4 rounded-xl bg-primary/5 border border-primary/20">
                <div className="flex items-center gap-2 mb-3">
                    <Clock size={20} className="text-primary" />
                    <h4 className="font-medium text-foreground">Horário de Atendimento</h4>
                </div>
                <div className="space-y-1 text-sm text-muted-foreground">
                    <p>{businessHours.weekdays}</p>
                    <p>{businessHours.saturday}</p>
                    {businessHours.sunday && <p>{businessHours.sunday}</p>}
                </div>
            </div>

            {/* Call to action adicional */}
            <div className="p-4 rounded-xl bg-gradient-to-r from-primary/10 to-accent/10 border border-primary/20">
                <p className="text-sm text-muted-foreground mb-3">
                    <strong className="text-foreground">Precisa de uma demonstração?</strong>
                </p>
                <p className="text-xs text-muted-foreground">
                    Agende uma demonstração gratuita e veja como nossas soluções podem transformar sua empresa.
                </p>
            </div>
        </div>
    )
}

// Componente principal da seção
interface ContactSectionProps {
    data?: ContactData
    className?: string
    onFormSubmit?: (data: FormData) => void
}

export function ContactSection({
    data = defaultContactData,
    className = "",
    onFormSubmit
}: ContactSectionProps) {
    return (
        <section
            id={data.sectionId}
            className={`py-20 lg:py-28 bg-gradient-to-br from-background to-secondary/30 ${className}`}
        >
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                {/* Header da seção */}
                <AnimatedWrapper>
                    <SectionTitle
                        overline={data.overline}
                        title={data.title}
                        subtitle={data.subtitle}
                    />
                </AnimatedWrapper>

                {/* Conteúdo principal */}
                <div className="mt-12">
                    <div className="grid lg:grid-cols-3 gap-8">
                        {/* Informações de contato - 1/3 */}
                        <div className="lg:col-span-1">
                            <AnimatedWrapper delay={0.1}>
                                <GlassCard className="h-fit">
                                    <ContactInfo
                                        contactMethods={data.contactMethods}
                                        businessHours={data.businessHours}
                                        description={data.description}
                                    />
                                </GlassCard>
                            </AnimatedWrapper>
                        </div>

                        {/* Formulário - 2/3 */}
                        <div className="lg:col-span-2">
                            <AnimatedWrapper delay={0.2}>
                                <GlassCard>
                                    <ContactForm onSubmit={onFormSubmit} />
                                </GlassCard>
                            </AnimatedWrapper>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}

// Exports para facilitar customização
export type { ContactMethod, ContactData }