'use client';
import React, { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

interface FabButtonProps {
	children: React.ReactNode;
	onClick?: () => void;
	mainIcon?: React.ReactNode;
	position?: 'tr' | 'tl' | 'br' | 'bl' | 'center';
	variant?: 'primary' | 'secondary' | 'accent';
	size?: 'sm' | 'md' | 'lg';
	label?: string;
	hideLabel?: boolean;
}

const FabButton: React.FC<FabButtonProps> = ({
	children,
	onClick,
	mainIcon = '+',
	position = 'br',
	variant = 'primary',
	size = 'md',
	label = 'Actions',
	hideLabel = false,
}) => {
	const [isOpen, setIsOpen] = useState(false);
	const [isHovered, setIsHovered] = useState(false);
	const fabRef = useRef<HTMLDivElement>(null);

	// Close menu when clicking outside
	useEffect(() => {
		const handleClickOutside = (event: MouseEvent) => {
			if (fabRef.current && !fabRef.current.contains(event.target as Node)) {
				setIsOpen(false);
			}
		};

		document.addEventListener('mousedown', handleClickOutside);
		return () =>
			document.removeEventListener('mousedown', handleClickOutside);
	}, []);

	const toggleOpen = () => {
		setIsOpen(!isOpen);
		if (!isOpen && onClick) onClick();
	};

	// Position classes
	const positionClasses = {
		tr: 'top-6 right-6 items-end',
		tl: 'top-6 left-6 items-start',
		br: 'bottom-6 right-6 items-end',
		bl: 'bottom-6 left-6 items-start',
		center:
			'bottom-1/2 right-1/2 translate-x-1/2 translate-y-1/2 items-center',
	};

	// Variant classes
	const variantClasses = {
		primary: 'from-violet-500 to-purple-600 shadow-violet-500/25',
		secondary: 'from-slate-600 to-slate-700 shadow-slate-500/25',
		accent: 'from-cyan-400 to-blue-500 shadow-cyan-500/25',
	};

	// Size classes
	const sizeClasses = {
		sm: 'w-9 h-9 text-lg',
		md: 'w-12 h-12 text-xl',
		lg: 'w-14 h-14 text-2xl',
	};

	// Action item size classes
	const actionSizeClasses = {
		sm: 'w-5 h-5 text-sm',
		md: 'w-9 h-9 text-base',
		lg: 'w-12 h-12 text-lg',
	};

	return (
		<div
			ref={fabRef}
			className={`fixed z-50 flex flex-col ${positionClasses[position]}`}
		>
			{/* Backdrop overlay with blur */}
			<AnimatePresence>
				{isOpen && (
					<motion.div
						initial={{ opacity: 0 }}
						animate={{ opacity: 1 }}
						exit={{ opacity: 0 }}
						className="fixed inset-0 bg-black/20 backdrop-blur-sm"
						onClick={() => setIsOpen(false)}
					/>
				)}
			</AnimatePresence>

			{/* Action items */}
			<AnimatePresence>
				{isOpen && (
					<motion.div
						initial={{ opacity: 0, y: 20, scale: 0.9 }}
						animate={{ opacity: 1, y: 0, scale: 1 }}
						exit={{ opacity: 0, y: 20, scale: 0.9 }}
						transition={{ duration: 0.2, staggerChildren: 0.05 }}
						className="flex flex-col gap-3 mb-3"
					>
						{React.Children.map(children, (child, index) => (
							<motion.div
								key={index}
								initial={{ opacity: 0, x: 20 }}
								animate={{ opacity: 1, x: 0 }}
								exit={{ opacity: 0, x: 20 }}
								transition={{ delay: index * 0.05 }}
								className="relative"
							>
								{/* Action item background */}
								<motion.div
									whileHover={{ scale: 1.05 }}
									whileTap={{ scale: 0.95 }}
									className={`
                    ${actionSizeClasses[size]} 
                    bg-white/90 dark:bg-gray-800/90 
                    backdrop-blur-md rounded-2xl 
                    shadow-lg border border-white/20 
                    flex items-center justify-center
                    overflow-hidden
                  `}
								>
									{child}
								</motion.div>

								{/* Label for action item */}
								{!hideLabel && (
									<motion.div
										initial={{ opacity: 0, x: -10 }}
										animate={{ opacity: 1, x: 0 }}
										className="absolute right-full mr-3 top-1/2 -translate-y-1/2 
                             bg-gray-900/90 text-white text-xs py-1 px-2 
                             rounded-lg whitespace-nowrap backdrop-blur-md"
									>
										Action {index + 1}
									</motion.div>
								)}
							</motion.div>
						))}
					</motion.div>
				)}
			</AnimatePresence>

			{/* Main FAB Button */}
			<div className="relative">
				{/* Label for main button */}
				<AnimatePresence>
					{isHovered && !hideLabel && (
						<motion.div
							initial={{
								opacity: 0,
								x: position.includes('r') ? -10 : 10,
							}}
							animate={{ opacity: 1, x: 0 }}
							exit={{ opacity: 0, x: position.includes('r') ? -10 : 10 }}
							className={`
                absolute top-1/2 -translate-y-1/2 
                ${position.includes('r') ? 'right-full mr-3' : 'left-full ml-3'}
                bg-gray-900/90 text-white text-sm py-1.5 px-3 
                rounded-lg whitespace-nowrap backdrop-blur-md
              `}
						>
							{label}
						</motion.div>
					)}
				</AnimatePresence>

				{/* Main button */}
				<motion.button
					onClick={toggleOpen}
					onHoverStart={() => setIsHovered(true)}
					onHoverEnd={() => setIsHovered(false)}
					className={`
            relative
            ${sizeClasses[size]}
            ${variantClasses[variant]}
            bg-linear-to-br
            text-white 
            rounded-2xl 
            shadow-xl
            flex items-center justify-center
            focus:outline-none focus:ring-4 focus:ring-opacity-40
            backdrop-blur-sm
            border border-white/20
            overflow-hidden
          `}
					whileHover={{
						scale: 1.05,
						boxShadow: '0 10px 30px -5px rgba(0, 0, 0, 0.3)',
					}}
					whileTap={{ scale: 0.95 }}
					animate={{
						rotate: isOpen ? 45 : 0,
					}}
					transition={{
						type: 'spring',
						stiffness: 400,
						damping: 25,
					}}
				>
					{/* Animated background shine */}
					<motion.div
						className="absolute inset-0 bg-linear-to-r from-transparent via-white/20 to-transparent"
						animate={{ x: isHovered ? ['-100%', '200%'] : '-100%' }}
						transition={{
							duration: 1.5,
							repeat: isHovered ? Infinity : 0,
						}}
					/>

					{/* Icon */}
					<motion.span
						className="relative z-10 font-medium"
						animate={{ scale: isHovered ? 1.1 : 1 }}
						transition={{ type: 'spring', stiffness: 400, damping: 10 }}
					>
						{mainIcon}
					</motion.span>

					{/* Pulse ring effect when open */}
					<AnimatePresence>
						{isOpen && (
							<motion.div
								initial={{ scale: 1, opacity: 0.7 }}
								animate={{ scale: 1.5, opacity: 0 }}
								exit={{ scale: 1.5, opacity: 0 }}
								transition={{ duration: 1.5, repeat: Infinity }}
								className="absolute inset-0 border-2 border-white/30 rounded-2xl"
							/>
						)}
					</AnimatePresence>
				</motion.button>
			</div>
		</div>
	);
};

export default FabButton;