import {
  AppShell,
  Center,
  Image,
  ScrollArea,
  Stack,
  Tooltip,
} from "@mantine/core";
import {
  IconFileDescription,
  IconFlame,
  IconId,
  IconMail,
  IconMessage,
  IconStack2,
  IconTag,
  IconUsers,
  IconRobot,
  IconHistory,
  IconBuilding,
  IconGift,
  IconArrowsRightLeft,
  IconChartBar,
} from "@tabler/icons-react";

import { matchPath, NavLink, useLocation } from "react-router";
import { useRoleAccess } from "../../hooks/useRoleAccess";

export const ConsoleMainSidebar = () => {
  const location = useLocation();
  const {
    checkClientAccess,
    hasAnyChatbotAccess,
    hasAnyMembershipAccess,
    isSuperAdmin,
  } = useRoleAccess();

  const MainMenu = [
    {
      Icon: IconStack2,
      label: "Dashboard",
      href: "/admin/dashboard",
      show: checkClientAccess("read", "dashboard"),
    },
    {
      Icon: IconUsers,
      label: "Members",
      href: "/admin/members",
      show: checkClientAccess("read", "members"),
    },
    {
      Icon: IconFileDescription,
      label: "Bookings",
      href: "/admin/bookings",
      show: checkClientAccess("read", "bookings"),
    },
    {
      Icon: IconId,
      label: "Memberships",
      href: "/admin/memberships/account-types",
      show: hasAnyMembershipAccess(),
    },
    {
      Icon: IconMessage,
      label: "Notification",
      href: "/admin/notifications",
      show: checkClientAccess("read", "notifications"),
    },
    {
      Icon: IconRobot,
      label: "Chatbot",
      href: "/admin/chatbot",
      show: hasAnyChatbotAccess(),
    },
    {
      Icon: IconTag,
      label: "Promo Codes",
      href: checkClientAccess("read", "promo-code-campaigns")
        ? "/admin/promo-code-campaigns"
        : checkClientAccess("read", "promo-codes")
          ? "/admin/promo-codes"
          : "/admin/kcgm",
      show:
        checkClientAccess("read", "promo-codes") ||
        checkClientAccess("read", "promo-code-campaigns") ||
        checkClientAccess("read", "kcgm"),
    },
    // {
    //   Icon: IconFlame,
    //   label: "Hot Deals",
    //   href: "/admin/hot-deals",
    //   show: checkClientAccess("read", "hot-deals"),
    // },
    {
      Icon: IconMail,
      label: "Email Templates",
      href: "/admin/edm",
      show: checkClientAccess("read", "edm"),
    },
    {
      Icon: IconBuilding,
      label: "Resorts",
      href: "/admin/resorts",
      show: checkClientAccess("read", "resorts"),
    },
    {
      Icon: IconGift,
      label: "Member Offers",
      href: "/admin/member-offers",
      show: checkClientAccess("read", "member-offers"),
    },
    {
      Icon: IconArrowsRightLeft,
      label: "Points Transfer",
      href: "/admin/points-transfer",
      show:
        checkClientAccess("read", "points-transfer") ||
        checkClientAccess("read", "my-points"),
    },
    {
      Icon: IconChartBar,
      label: "Event Analytics",
      href: "/admin/event-analytics",
      show: checkClientAccess("read", "event-analytics"),
    },
    {
      Icon: IconHistory,
      label: "Logs",
      href: "/admin/activity-logs",
      show: checkClientAccess("read", "admin-logs"),
    },
  ];

  return (
    <AppShell.Navbar w={60} py={10} px={2}>
      {/* Logo sits at the top of the rail, level with the header. */}
      <AppShell.Section>
        <Center h={30} mb={16}>
          <Image radius="md" src="/logo.svg" w={30} />
        </Center>
      </AppShell.Section>

      {/*
       * The rail scrolls on short screens.
       *
       * It used to be a Stack with `h="100vh"` — taller than the navbar's own
       * content box, which already excludes the header — so on a laptop screen
       * the last few modules sat below the fold with no way to reach them.
       * `grow` + ScrollArea gives the section the leftover height and scrolls
       * inside it; the scrollbar only appears on hover so the 60px rail keeps
       * its alignment.
       */}
      <AppShell.Section
        grow
        component={ScrollArea}
        type="hover"
        scrollbarSize={4}
        offsetScrollbars={false}
      >
        <Stack w="100%" align="center" gap={12} pb={8}>
          {MainMenu.filter((menu) => menu.show).map((menu, id) => {
            const isActive = matchPath(`${menu.href}/*`, location.pathname);
            return (
              <Tooltip
                key={id}
                label={menu.label}
                position="right"
                withArrow
                arrowSize={10}
                arrowRadius={3}
                arrowOffset={10}
                color="dark.9"
                py={8}
              >
                <NavLink to={menu.href}>
                  <Center
                    c={isActive ? "blue.9" : "dark.9"}
                    bg={isActive ? "blue.1" : "none"}
                    w={32}
                    h={32}
                    bdrs={"xs"}
                    aria-label={menu.label}
                    aria-current={isActive ? "page" : undefined}
                  >
                    <menu.Icon size={20} stroke={2} />
                  </Center>
                </NavLink>
              </Tooltip>
            );
          })}
        </Stack>
      </AppShell.Section>
    </AppShell.Navbar>
  );
};