'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { Heart, Bell, CreditCard, Shield, UserPlus } from 'lucide-react';
import { useFavorites } from '@/app/contexts/FavoritesContext';

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

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

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

  const side = isRTL ? 'left' : 'right';
  const positionStyle = {
    [side]: 0,
    top: '50%',
    transform: 'translateY(-50%)',
  };

  const cardVariants = {
    initial: { opacity: 0, x: isRTL ? -20 : 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 ${isRTL ? 'right-full mr-2' : 'left-full ml-2'} top-1/2 -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded-lg whitespace-nowrap z-20 shadow-lg flex items-center`}
      >
        <span className="relative">
          {label}
          <span
            className={`absolute ${isRTL ? 'right-full -mr-1' : 'left-full -ml-1'} top-1/2 -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-transparent ${
              isRTL ? 'border-r-4 border-r-gray-800' : 'border-l-4 border-l-gray-800'
            }`}
          ></span>
        </span>
      </div>
    );
  };

  return (
    <motion.div
      className="fixed z-50"
      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-3 px-2 flex flex-col gap-3 transition-all duration-300 hover:shadow-xl hover:bg-white/95">
        {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-12 h-12 rounded-xl bg-amber-50 border border-amber-200 text-amber-600 hover:bg-amber-100 transition-colors"
              >
                <UserPlus className="w-6 h-6" />
              </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-12 h-12 rounded-xl bg-slate-50 border border-slate-200 text-slate-700 hover:bg-slate-100 transition-colors"
              >
                <Shield className="w-6 h-6" />
              </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-12 h-12 rounded-xl transition-colors"
              >
                <div className="relative">
                  <Heart className="w-6 h-6 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-5 h-5 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-12 h-12 rounded-xl transition-colors"
              >
                <div className="relative">
                  <Bell className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" />
                  <motion.span
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    className="absolute -right-1 -top-1 w-5 h-5 bg-linear-to-r from-red-500 to-red-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
                  >
                    3
                  </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-12 h-12 rounded-xl transition-colors"
              >
                <CreditCard className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" />
              </Link>
              {renderTooltip('payments', 'المدفوعات')}
            </motion.div>
          </>
        )}
      </div>
    </motion.div>
  );
}