import { Avatar, Menu, Dropdown } from "antd";
import {
	LogoutOutlined,
	SettingOutlined,
	UserAddOutlined,
	UserSwitchOutlined,
} 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="user-settings"
						icon={<UserSwitchOutlined />}
						className="px-4">
						个人设置
					</Menu.Item>
					<Menu.Item
						key="settings"
						icon={<SettingOutlined />}
						onClick={() => {
							navigate("/admin/staff");
						}}
						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>
	);
};