GearBox/src/client/components/FabMenu.tsx

import { AnimatePresence, motion } from "framer-motion";
import { Package, Plus, Search } from "lucide-react";
import { useTranslation } from "react-i18next";
import { useUIStore } from "../stores/uiStore";

interface FabMenuProps {
	isSetupsPage: boolean;
}

const spring = { type: "spring", stiffness: 400, damping: 25 } as const;

interface MenuItem {
	label: string;
	icon: React.ReactNode;
	onClick: () => void;
}

export function FabMenu({ isSetupsPage }: FabMenuProps) {
	const { t } = useTranslation();
	const fabMenuOpen = useUIStore((s) => s.fabMenuOpen);
	const openFabMenu = useUIStore((s) => s.openFabMenu);
	const closeFabMenu = useUIStore((s) => s.closeFabMenu);
	const openCatalogSearch = useUIStore((s) => s.openCatalogSearch);
	const catalogSearchOpen = useUIStore((s) => s.catalogSearchOpen);

	// Hide FAB when catalog search overlay is open
	if (catalogSearchOpen) return null;

	const menuItems: MenuItem[] = [
		{
			label: t("fab.addToCollection"),
			icon: <Package className="w-5 h-5 text-gray-600" />,
			onClick: () => openCatalogSearch("collection"),
		},
		{
			label: t("fab.startNewThread"),
			icon: <Search className="w-5 h-5 text-gray-600" />,
			onClick: () => openCatalogSearch("thread"),
		},
	];

	if (isSetupsPage) {
		menuItems.push({
			label: t("fab.newSetup"),
			icon: <Plus className="w-5 h-5 text-gray-600" />,
			onClick: () => {
				closeFabMenu();
				// Stub: setup creation is handled by the setups page itself
			},
		});
	}

	function handleFabClick() {
		if (fabMenuOpen) {
			closeFabMenu();
		} else {
			openFabMenu();
		}
	}

	return (
		<>
			{/* Backdrop */}
			<AnimatePresence>
				{fabMenuOpen && (
					<motion.div
						className="fixed inset-0 z-10 bg-black/20"
						initial={{ opacity: 0 }}
						animate={{ opacity: 1 }}
						exit={{ opacity: 0 }}
						transition={{ duration: 0.15 }}
						onClick={closeFabMenu}
					/>
				)}
			</AnimatePresence>

			{/* Menu items */}
			<AnimatePresence>
				{fabMenuOpen && (
					<div className="fixed bottom-24 right-6 z-20 flex flex-col-reverse gap-3">
						{menuItems.map((item, index) => (
							<motion.button
								key={item.label}
								type="button"
								className="flex items-center gap-3 bg-white shadow-lg rounded-full px-4 py-3 hover:bg-gray-50 transition-colors"
								initial={{ opacity: 0, y: 10, scale: 0.9 }}
								animate={{ opacity: 1, y: 0, scale: 1 }}
								exit={{ opacity: 0, y: 10, scale: 0.9 }}
								transition={{
									...spring,
									delay: index * 0.05,
								}}
								onClick={item.onClick}
							>
								{item.icon}
								<span className="text-sm font-medium text-gray-700 whitespace-nowrap">
									{item.label}
								</span>
							</motion.button>
						))}
					</div>
				)}
			</AnimatePresence>

			{/* FAB button */}
			<motion.button
				type="button"
				className="fixed bottom-6 right-6 z-20 w-14 h-14 bg-gray-700 hover:bg-gray-800 text-white rounded-full shadow-lg hover:shadow-xl transition-colors flex items-center justify-center"
				onClick={handleFabClick}
				animate={{ rotate: fabMenuOpen ? 45 : 0 }}
				transition={spring}
			>
				<Plus className="w-6 h-6" />
			</motion.button>
		</>
	);
}