"use client";

import { MessageCircle } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { siteConfig } from "@/lib/data";
import { useState, useEffect } from "react";

export function FloatingWhatsApp() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setIsVisible(true), 1000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div 
          initial={{ opacity: 0, scale: 0.8, y: 20 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.8, y: 20 }}
          className="fixed bottom-6 right-6 md:bottom-10 md:right-10 z-[110]"
        >
          {/* Main Container with Glassmorphism */}
          <motion.a
            href={`https://wa.me/${siteConfig.contact.whatsapp}`}
            target="_blank"
            rel="noopener noreferrer"
            className="relative flex items-center group no-underline"
            whileHover="hover"
          >
            {/* Expanded Label on Hover */}
            <motion.div
              variants={{
                initial: { width: 64, opacity: 0 },
                hover: { width: "auto", opacity: 1 }
              }}
              transition={{ type: "spring", damping: 20, stiffness: 200 }}
              className="absolute right-0 flex items-center bg-white/10 backdrop-blur-xl border border-white/20 rounded-full pr-20 pl-6 py-4 overflow-hidden pointer-events-none shadow-2xl"
            >
              <div className="flex flex-col">
                <span className="text-white text-[10px] font-black uppercase tracking-widest whitespace-nowrap">Hemen Yazın</span>
                <span className="text-primary text-[12px] font-bold whitespace-nowrap">+90 537 720 09 90</span>
              </div>
            </motion.div>

            {/* Icon Button */}
            <div className="relative z-10 w-16 h-16 md:w-20 md:h-20">
              {/* Outer Glows */}
              <div className="absolute inset-0 bg-[#25D366] rounded-full blur-xl opacity-40 group-hover:opacity-70 transition-opacity animate-pulse" />
              
              {/* Main Button Body */}
              <div className="absolute inset-0 bg-gradient-to-tr from-[#128C7E] to-[#25D366] rounded-full flex items-center justify-center border-4 border-white/20 shadow-2xl group-hover:scale-110 transition-transform duration-500 overflow-hidden">
                <MessageCircle size={32} fill="white" className="text-white md:scale-125 group-hover:rotate-[360deg] transition-transform duration-700" />
                
                {/* Internal Reflection */}
                <div className="absolute top-0 left-0 w-full h-1/2 bg-white/20 rounded-t-full" />
              </div>

              {/* Ping Indicator */}
              <div className="absolute -top-1 -right-1 flex">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#25D366] opacity-75"></span>
                <span className="relative inline-flex rounded-full h-4 w-4 bg-[#25D366] border-2 border-white"></span>
              </div>
            </div>
          </motion.a>
        </motion.div>
      )}
    </AnimatePresence>
  );
}