import React, { useState, useRef, useEffect } from 'react';
import { User, Settings, Edit3, Bell, Shield, LogOut, ChevronDown } from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';

interface UserDropdownProps {
  onEditProfile: () => void;
  onPreferences: () => void;
}

const UserDropdown: React.FC<UserDropdownProps> = ({ onEditProfile, onPreferences }) => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const { isDarkMode } = useTheme();

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };

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

  const menuItems = [
    {
      icon: User,
      label: 'View Profile',
      action: () => {
        console.log('View Profile clicked');
        setIsOpen(false);
      },
      description: 'See your public profile'
    },
    {
      icon: Edit3,
      label: 'Edit Profile',
      action: () => {
        onEditProfile();
        setIsOpen(false);
      },
      description: 'Update your information'
    },
    {
      icon: Settings,
      label: 'Preferences',
      action: () => {
        onPreferences();
        setIsOpen(false);
      },
      description: 'Customize your experience'
    },
    {
      icon: Bell,
      label: 'Notifications',
      action: () => {
        console.log('Notifications clicked');
        setIsOpen(false);
      },
      description: 'Manage notification settings'
    },
    {
      icon: Shield,
      label: 'Privacy & Security',
      action: () => {
        console.log('Privacy & Security clicked');
        setIsOpen(false);
      },
      description: 'Control your privacy settings'
    }
  ];

  return (
    <div className="relative" ref={dropdownRef}>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-all duration-200 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 group"
        title="User menu"
      >
        <div className="w-8 h-8 rounded-full bg-gray-900 dark:bg-white flex items-center justify-center text-white dark:text-gray-900 font-medium group-hover:scale-105 transition-transform duration-200">
          <User size={16} />
        </div>
        <ChevronDown 
          size={14} 
          className={`transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
        />
      </button>

      {isOpen && (
        <div className="absolute right-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden z-50 animate-in slide-in-from-top-2 duration-200">
          {/* User Info Header */}
          <div className="p-4 border-b border-gray-100 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/50">
            <div className="flex items-center space-x-3">
              <div className="w-12 h-12 rounded-full bg-gray-900 dark:bg-white flex items-center justify-center text-white dark:text-gray-900 font-medium text-lg">
                Y
              </div>
              <div>
                <h4 className="font-semibold text-gray-900 dark:text-white">You</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">you@example.com</p>
              </div>
            </div>
          </div>

          {/* Menu Items */}
          <div className="py-2">
            {menuItems.map((item, index) => {
              const Icon = item.icon;
              return (
                <button
                  key={index}
                  onClick={item.action}
                  className="w-full flex items-center space-x-3 px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group"
                >
                  <div className="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-200 dark:group-hover:bg-gray-600 transition-colors">
                    <Icon size={18} className="text-gray-600 dark:text-gray-400" />
                  </div>
                  <div className="flex-1">
                    <div className="font-medium text-gray-900 dark:text-white">{item.label}</div>
                    <div className="text-sm text-gray-500 dark:text-gray-400">{item.description}</div>
                  </div>
                </button>
              );
            })}
          </div>

          {/* Separator */}
          <div className="border-t border-gray-100 dark:border-gray-700"></div>

          {/* Sign Out */}
          <div className="py-2">
            <button
              onClick={() => {
                console.log('Sign out clicked');
                setIsOpen(false);
              }}
              className="w-full flex items-center space-x-3 px-4 py-3 text-left hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors group"
            >
              <div className="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center group-hover:bg-red-100 dark:group-hover:bg-red-900/30 transition-colors">
                <LogOut size={18} className="text-gray-600 dark:text-gray-400 group-hover:text-red-600 dark:group-hover:text-red-400" />
              </div>
              <div className="flex-1">
                <div className="font-medium text-gray-900 dark:text-white group-hover:text-red-600 dark:group-hover:text-red-400">Sign Out</div>
                <div className="text-sm text-gray-500 dark:text-gray-400">Sign out of your account</div>
              </div>
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default UserDropdown;