import { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ArrowLeftStartOnRectangleIcon, Cog6ToothIcon, QuestionMarkCircleIcon, UserCircleIcon } from '@heroicons/react/24/outline';
import { useAuth } from '@web/src/providers/auth-provider';
import { Avatar } from '../../presentation/user/Avatar';
import { useClickOutside } from '@web/src/hooks/useClickOutside';

export function UserMenuDropdown() {
    const [showMenu, setShowMenu] = useState(false);
    const menuRef = useRef<HTMLDivElement>(null);
    const { user, logout } = useAuth()
    useClickOutside(menuRef, () => setShowMenu(false));
    const menuItems = [
        { icon: <UserCircleIcon className='w-5 h-5'></UserCircleIcon>, label: '个人信息', action: () => { } },
        { icon: <Cog6ToothIcon className='w-5 h-5'></Cog6ToothIcon>, label: '设置', action: () => { } },
        { icon: <QuestionMarkCircleIcon className='w-5 h-5'></QuestionMarkCircleIcon>, label: '帮助', action: () => { } },
        { icon: <ArrowLeftStartOnRectangleIcon className='w-5 h-5' />, label: '注销', action: () => { logout() } },
    ];

    return (
        <div ref={menuRef} className="relative">
            <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => setShowMenu(!showMenu)}
                className="w-10 h-10"  // 移除了边框相关的类
            >
                <Avatar
                    src={user?.avatar}
                    name={user?.showname || user?.username}
                    size={40}
                    className="ring-2 ring-gray-200 hover:ring-blue-500 transition-colors"  // 使用 ring 替代 border
                />
            </motion.button>

            <AnimatePresence>
                {showMenu && (
                    <motion.div
                        initial={{ opacity: 0, y: -10 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: -10 }}
                        transition={{ duration: 0.2 }}
                        className="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"
                    >
                        <div className="p-3 border-b border-gray-100">
                            <h4 className="text-sm font-medium text-gray-900">{user?.showname}</h4>
                            <p className="text-xs text-gray-500">{user?.username}</p>
                        </div>

                        <div className="p-2">
                            {menuItems.map((item, index) => (
                                <motion.button
                                    key={index}
                                    whileHover={{ x: 4 }}
                                    onClick={item.action}
                                    className="flex items-center gap-2 w-full p-2 rounded-lg hover:bg-gray-100 text-gray-700 text-sm"
                                >
                                    {item.icon}
                                    <span>{item.label}</span>
                                </motion.button>
                            ))}
                        </div>
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    );
}