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, Shield, UserPlus, 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, isAdmin }) {
  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">
        {isAdmin ? (
          <>
            <motion.div
              className="relative group"
              variants={buttonVariants}
              initial="rest"
              whileHover="hover"
              whileTap="tap"
              onMouseEnter={() => showTooltip('addAdmin')}
              onMouseLeave={hideTooltip}
            >
              <Link
                href="/admin/add-admin"
                className="flex items-center justify-center w-14 h-14 rounded-xl bg-amber-50 border border-amber-200 text-amber-600 hover:bg-amber-100 transition-colors"
              >
                <UserPlus className="w-7 h-7" />
              </Link>
              {renderTooltip('addAdmin', 'إضافة أدمن')}
            </motion.div>

            <motion.div
              className="relative group"
              variants={buttonVariants}
              initial="rest"
              whileHover="hover"
              whileTap="tap"
              onMouseEnter={() => showTooltip('editPrivacy')}
              onMouseLeave={hideTooltip}
            >
              <Link
                href="/admin/privacy"
                className="flex items-center justify-center w-14 h-14 rounded-xl bg-slate-50 border border-slate-200 text-slate-700 hover:bg-slate-100 transition-colors"
              >
                <Shield className="w-7 h-7" />
              </Link>
              {renderTooltip('editPrivacy', 'تعديل سياسة الخصوصية')}
            </motion.div>
          </>
        ) : (
          <>
            <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>
  );
}