SweetHome/app/components/FloatingSidebar.js

'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { Heart, Bell, CreditCard, Settings } from 'lucide-react';
import { useFavorites } from '@/app/contexts/FavoritesContext';
import { useNotifications } from '@/app/contexts/NotificationsContext';
import AuthService from '@/app/services/AuthService';

export default function FloatingSidebar({ isRTL }) {
  const { favorites } = useFavorites();
  const { unreadCount } = useNotifications();
  const [tooltip, setTooltip] = useState(null);
  let timeoutId = null;

  const showTooltip = (id) => {
    timeoutId = setTimeout(() => {
      setTooltip(id);
    }, 300);
  };

  const hideTooltip = () => {
    clearTimeout(timeoutId);
    setTooltip(null);
  };

  if (!AuthService.isAuthenticated()) return null;

    const positionStyle = {
    left: '16px',
    top: '50%',
    transform: 'translateY(-50%)',
  };

  const cardVariants = {
    initial: { opacity: 0, x: 20 },
    animate: { opacity: 1, x: 0, transition: { duration: 0.4, ease: 'easeOut' } },
  };

  const buttonVariants = {
    rest: { scale: 1, backgroundColor: 'rgba(255,255,255,0)' },
    hover: { scale: 1.05, backgroundColor: 'rgba(245,158,11,0.1)', transition: { duration: 0.2 } },
    tap: { scale: 0.95 },
  };

  const renderTooltip = (id, label) => {
    if (tooltip !== id) return null;
    return (
      <div className="absolute left-full mr-3 top-1/2 -translate-y-1/2 px-3 py-2 bg-gray-800 text-white text-sm rounded-lg whitespace-nowrap z-20 shadow-lg">
        {label}
      </div>
    );
  };

  return (
    <motion.div
      className="fixed z-40 pointer-events-none"
      style={positionStyle}
      variants={cardVariants}
      initial="initial"
      animate="animate"
    >
      <div className="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg border border-gray-200/60 py-4 px-3 flex flex-col gap-4 transition-all duration-300 hover:shadow-xl hover:bg-white/95 max-h-[75vh] overflow-y-auto pointer-events-auto">
        <motion.div
          className="relative group"
          variants={buttonVariants}
          initial="rest"
          whileHover="hover"
          whileTap="tap"
          onMouseEnter={() => showTooltip('favorites')}
          onMouseLeave={hideTooltip}
        >
          <Link
            href="/favorites"
            className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
          >
            <div className="relative">
              <Heart className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
              {favorites.length > 0 && (
                <motion.span
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  className="absolute -right-1 -top-1 w-6 h-6 bg-linear-to-r from-amber-500 to-amber-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
                >
                  {favorites.length}
                </motion.span>
              )}
            </div>
          </Link>
          {renderTooltip('favorites', 'المفضلة')}
        </motion.div>
        <motion.div
          className="relative group"
          variants={buttonVariants}
          initial="rest"
          whileHover="hover"
          whileTap="tap"
          onMouseEnter={() => showTooltip('notifications')}
          onMouseLeave={hideTooltip}
        >
          <Link
            href="/notifications"
            className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
          >
            <div className="relative">
              <Bell className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
              {unreadCount > 0 && (
                <motion.span
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  className="absolute -right-1 -top-1 w-6 h-6 bg-linear-to-r from-red-500 to-red-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
                >
                  {unreadCount}
                </motion.span>
              )}
            </div>
          </Link>
          {renderTooltip('notifications', 'الإشعارات')}
        </motion.div>
        <motion.div
          className="relative group"
          variants={buttonVariants}
          initial="rest"
          whileHover="hover"
          whileTap="tap"
          onMouseEnter={() => showTooltip('payments')}
          onMouseLeave={hideTooltip}
        >
          <Link
            href="/payments"
            className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
          >
            <CreditCard className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
          </Link>
          {renderTooltip('payments', 'المدفوعات')}
        </motion.div>
        <motion.div
          className="relative group"
          variants={buttonVariants}
          initial="rest"
          whileHover="hover"
          whileTap="tap"
          onMouseEnter={() => showTooltip('settings')}
          onMouseLeave={hideTooltip}
        >
          <Link
            href="/settings"
            className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
          >
            <Settings className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
          </Link>
          {renderTooltip('settings', 'الإعدادات')}
        </motion.div>
      </div>
    </motion.div>
  );
}