import { Avatar, Menu, Text, Box, Flex } from "@mantine/core";
import { IconLogout2, IconSettings, IconUserCircle } from "@tabler/icons-react";
import { Link } from "react-router";
import { useRoleAccess } from "../../hooks/useRoleAccess";
import { useUser } from "@/providers/UserProvider";
import packageJson from "../../../package.json";

export const AdminUserMenu = () => {
  const { hasAnySettingsAccess } = useRoleAccess();
  const { user } = useUser();

  const initials = user
    ? `${user.first_name?.[0] || ""}${user.last_name?.[0] || ""}`.toUpperCase()
    : "KA";

  return (
    <Menu shadow="md" width={220}>
      <Menu.Target>
        <Avatar
          src={user?.avatar_url ?? undefined}
          color="cyan"
          radius="xl"
          size={"sm"}
          style={{ cursor: "pointer" }}
        >
          {initials}
        </Avatar>
      </Menu.Target>

      <Menu.Dropdown>
        <Box px="md" py="xs">
          <Text size="md" fw={500}>
            {user?.first_name} {user?.last_name}
          </Text>
          <Text size="sm" color="dimmed">
            {user?.email?.slice(0, 25)}
          </Text>
        </Box>
        <Menu.Divider />

        <Menu.Item
          component={Link}
          to="/admin/settings/profile"
          leftSection={<IconUserCircle size={14} />}
        >
          My profile
        </Menu.Item>

        {hasAnySettingsAccess() && (
          <>
            <Menu.Label>Settings</Menu.Label>
            <Menu.Item
              component={Link}
              to="/admin/settings/users"
              leftSection={<IconSettings size={14} />}
            >
              Settings
            </Menu.Item>
          </>
        )}
        {/*<Menu.Item leftSection={<IconPhoto size={14} />}>Gallery</Menu.Item>*/}
        {/*<Menu.Item
          leftSection={<IconSearch size={14} />}
          rightSection={
            <Text size="xs" c="dimmed">
              ⌘K
            </Text>
          }
        >
          Search
        </Menu.Item>*/}

        <Menu.Divider />
        <form method="post" action={"/auth/logout"}>
          <Flex align="center" justify="space-between" gap="sm" px="md" py="xs">
            <Text
              size="sm"
              c="dimmed"
              fw={500}
              style={{ pointerEvents: "auto" }}
            >
              v{packageJson.version}
            </Text>
          </Flex>
          <Menu.Item
            type="submit"
            color="red"
            leftSection={<IconLogout2 size={14} />}
          >
            Sign out
          </Menu.Item>
        </form>
      </Menu.Dropdown>
    </Menu>
  );
};