import { Avatar, Menu, Dropdown } from 'antd';
import { LogoutOutlined, SettingOutlined } from '@ant-design/icons';
import { useAuth } from '@web/src/providers/auth-provider';
import { useNavigate } from 'react-router-dom';

export const UserMenu = () => {
    const { isAuthenticated, logout, user } = useAuth();
    const navigate = useNavigate();

    return (
        <Menu className="w-48">
            {isAuthenticated ? (
                <>
                    <Menu.Item key="profile" className="px-4 py-2">
                        <div className="flex items-center space-x-3">
                            <Avatar className="bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold">
                                {(user?.showname || user?.username || '')[0]?.toUpperCase()}
                            </Avatar>
                            <div className="flex flex-col">
                                <span className="font-medium">{user?.showname || user?.username}</span>
                                <span className="text-xs text-gray-500">{user?.department?.name || user?.officerId}</span>
                            </div>
                        </div>
                    </Menu.Item>
                    <Menu.Divider />
                    <Menu.Item key="settings" icon={<SettingOutlined />} className="px-4">
                        个人设置
                    </Menu.Item>
                    <Menu.Item
                        key="logout"
                        icon={<LogoutOutlined />}
                        onClick={async () => await logout()}
                        className="px-4 text-red-500 hover:text-red-600 hover:bg-red-50"
                    >
                        退出登录
                    </Menu.Item>
                </>
            ) : (
                <Menu.Item
                    key="login"
                    onClick={() => navigate("/login")}
                    className="px-4 text-blue-500 hover:text-blue-600 hover:bg-blue-50"
                >
                    登录/注册
                </Menu.Item>
            )}
        </Menu>
    );
};