"use client"

import { useState, useEffect } from "react"
import { usePathname } from "next/navigation"
import { motion, AnimatePresence } from "framer-motion"
import { Phone, X, Mail, MessageSquare, Headphones } from "lucide-react"

export default function FloatingCTA() {
  const [isOpen, setIsOpen] = useState(false)
  const [isVisible, setIsVisible] = useState(false)
  const pathname = usePathname()

  // Admin ve portal sayfalarında gösterme
  const isAdminOrPortal = pathname?.startsWith('/admin') || pathname?.startsWith('/portal')

  useEffect(() => {
    const handleScroll = () => {
      setIsVisible(window.scrollY > 100)
    }
    handleScroll()
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  // Dışarı tıklayınca kapat
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      const target = e.target as HTMLElement
      if (isOpen && !target.closest('.floating-cta-container')) {
        setIsOpen(false)
      }
    }
    document.addEventListener('click', handleClickOutside)
    return () => document.removeEventListener('click', handleClickOutside)
  }, [isOpen])

  const contactOptions = [
    {
      href: "https://wa.me/905551234567?text=Merhaba,%20ISG%20hizmetleri%20hakkında%20bilgi%20almak%20istiyorum.",
      icon: MessageSquare,
      label: "WhatsApp ile Yaz",
      desc: "Hızlı yanıt",
      gradient: "from-emerald-500 to-green-600",
    },
    {
      href: "tel:+905551234567",
      icon: Phone,
      label: "Hemen Ara",
      desc: "0555 123 45 67",
      gradient: "from-[#0F2A44] to-slate-700",
    },
    {
      href: "mailto:info@analitikisg.com",
      icon: Mail,
      label: "E-posta Gönder",
      desc: "info@analitikisg.com",
      gradient: "from-[#C8102E] to-rose-600",
    },
  ]

  // Admin veya portal sayfalarındaysa hiçbir şey render etme
  if (isAdminOrPortal) {
    return null
  }

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div 
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 50 }}
          className="floating-cta-container fixed bottom-6 right-6 z-50"
        >
          {/* Expanded Panel */}
          <AnimatePresence>
            {isOpen && (
              <motion.div
                initial={{ opacity: 0, scale: 0.9, y: 20 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.9, y: 20 }}
                transition={{ type: "spring", stiffness: 400, damping: 30 }}
                className="absolute bottom-20 right-0 w-72 bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden"
              >
                {/* Header */}
                <div className="bg-gradient-to-r from-[#0F2A44] to-[#1a3a5c] p-4">
                  <h3 className="text-white font-semibold">Bize Ulaşın</h3>
                  <p className="text-slate-300 text-sm">Size nasıl yardımcı olabiliriz?</p>
                </div>

                {/* Options */}
                <div className="p-3 space-y-2">
                  {contactOptions.map((option, index) => {
                    const Icon = option.icon
                    return (
                      <motion.a
                        key={option.label}
                        href={option.href}
                        target={option.href.startsWith("https") ? "_blank" : undefined}
                        rel={option.href.startsWith("https") ? "noopener noreferrer" : undefined}
                        initial={{ opacity: 0, x: 20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: index * 0.1 }}
                        onClick={() => setIsOpen(false)}
                        className="flex items-center gap-3 p-3 rounded-xl hover:bg-slate-50 transition-colors group"
                      >
                        <div className={`w-11 h-11 rounded-xl bg-gradient-to-br ${option.gradient} flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform`}>
                          <Icon className="w-5 h-5 text-white" />
                        </div>
                        <div className="flex-1">
                          <p className="font-medium text-slate-800 text-sm">{option.label}</p>
                          <p className="text-xs text-slate-500">{option.desc}</p>
                        </div>
                      </motion.a>
                    )
                  })}
                </div>

                {/* Footer */}
                <div className="px-4 py-3 bg-slate-50 border-t border-slate-100">
                  <p className="text-xs text-slate-400 text-center">7/24 destek hattı</p>
                </div>
              </motion.div>
            )}
          </AnimatePresence>

          {/* Main Button */}
          <motion.button
            onClick={(e) => {
              e.stopPropagation()
              setIsOpen(!isOpen)
            }}
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className={`relative w-14 h-14 rounded-full shadow-2xl flex items-center justify-center transition-all duration-300 ${
              isOpen 
                ? "bg-slate-800 rotate-0" 
                : "bg-gradient-to-br from-[#C8102E] to-[#a50d26]"
            }`}
            style={{ 
              boxShadow: isOpen 
                ? '0 10px 40px rgba(0,0,0,0.3)' 
                : '0 10px 40px rgba(200,16,46,0.4)' 
            }}
          >
            <AnimatePresence mode="wait">
              {isOpen ? (
                <motion.div
                  key="close"
                  initial={{ rotate: -90, opacity: 0 }}
                  animate={{ rotate: 0, opacity: 1 }}
                  exit={{ rotate: 90, opacity: 0 }}
                  transition={{ duration: 0.2 }}
                >
                  <X className="w-6 h-6 text-white" />
                </motion.div>
              ) : (
                <motion.div
                  key="support"
                  initial={{ scale: 0.5, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  exit={{ scale: 0.5, opacity: 0 }}
                  transition={{ duration: 0.2 }}
                >
                  <Headphones className="w-6 h-6 text-white" />
                </motion.div>
              )}
            </AnimatePresence>

            {/* Pulse */}
            {!isOpen && (
              <>
                <motion.span 
                  className="absolute inset-0 rounded-full bg-[#C8102E]"
                  animate={{ 
                    scale: [1, 1.5],
                    opacity: [0.3, 0]
                  }}
                  transition={{ 
                    duration: 2, 
                    repeat: Infinity,
                    ease: "easeOut"
                  }}
                />
                {/* Badge */}
                <span className="absolute -top-1 -right-1 w-4 h-4 bg-emerald-500 rounded-full border-2 border-white flex items-center justify-center">
                  <span className="w-1.5 h-1.5 bg-white rounded-full animate-pulse" />
                </span>
              </>
            )}
          </motion.button>
        </motion.div>
      )}
    </AnimatePresence>
  )
}