FPSMS-frontend/src/components/NavigationContent/NavigationContent.tsx

import { useSession } from "next-auth/react";
import Divider from "@mui/material/Divider";
import Box from "@mui/material/Box";
import React, { useEffect } from "react";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon from "@mui/material/ListItemIcon";
import WorkHistory from "@mui/icons-material/WorkHistory";
import Dashboard from "@mui/icons-material/Dashboard";
import SummarizeIcon from "@mui/icons-material/Summarize";
import PaymentsIcon from "@mui/icons-material/Payments";
import AccountTreeIcon from "@mui/icons-material/AccountTree";
import RequestQuote from "@mui/icons-material/RequestQuote";
import PeopleIcon from "@mui/icons-material/People";
import Task from "@mui/icons-material/Task";
import Assignment from "@mui/icons-material/Assignment";
import Settings from "@mui/icons-material/Settings";
import Analytics from "@mui/icons-material/Analytics";
import Payments from "@mui/icons-material/Payments";
import QrCodeIcon from "@mui/icons-material/QrCode";
import { useTranslation } from "react-i18next";
import Typography from "@mui/material/Typography";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";
import Logo from "../Logo";
import BugReportIcon from "@mui/icons-material/BugReport";
import { AUTH } from "../../authorities";

interface NavigationItem {
  icon: React.ReactNode;
  label: string;
  path: string;
  children?: NavigationItem[];
  isHidden?: boolean | undefined;
  requiredAbility?: string | string[];
}

const NavigationContent: React.FC = () => {
  const { data: session, status } = useSession();
  const abilities = session?.user?.abilities ?? [];

  // Helper: check if user has required permission
  const hasAbility = (required?: string | string[]): boolean => {
    if (!required) return true; // no requirement → always show
    if (Array.isArray(required)) {
      return required.some(ability => abilities.includes(ability));
    }
    return abilities.includes(required);
  };

  const navigationItems: NavigationItem[] = [
    {
      icon: <Dashboard />,
      label: "Dashboard",
      path: "/dashboard",
    },
    {
      icon: <RequestQuote />,
      label: "Store Management",
      path: "",
      requiredAbility: [AUTH.PURCHASE, AUTH.STOCK, AUTH.STOCK_TAKE, AUTH.STOCK_FG, AUTH.STOCK_IN_BIND, AUTH.ADMIN],
      children: [
        {
          icon: <RequestQuote />,
          label: "Purchase Order",
          requiredAbility: [AUTH.PURCHASE, AUTH.ADMIN],
          path: "/po",
        },
        {
          icon: <RequestQuote />,
          label: "Pick Order",
          requiredAbility: [AUTH.STOCK, AUTH.ADMIN],
          path: "/pickOrder",
        },
        // {
        //   icon: <RequestQuote />,
        //   label: "Cons. Pick Order",
        //   path: "",
        // },
        // {
        //   icon: <RequestQuote />,
        //   label: "Delivery Pick Order",
        //   path: "",
        // },
        // {
        //   icon: <RequestQuote />,
        //   label: "Warehouse",
        //   path: "",
        // },
        // {
        //   icon: <RequestQuote />,
        //   label: "Location Transfer Order",
        //   path: "",
        // },
        {
          icon: <RequestQuote />,
          label: "View item In-out And inventory Ledger",
          requiredAbility: [AUTH.STOCK, AUTH.ADMIN],
          path: "/inventory",
        },
        {
          icon: <RequestQuote />,
          label: "Stock Take Management",
          requiredAbility: [AUTH.STOCK_TAKE, AUTH.ADMIN],
          path: "/stocktakemanagement",
        },
        {
          icon: <RequestQuote />,
          label: "Stock Issue",
          requiredAbility: [AUTH.STOCK, AUTH.STOCK_TAKE, AUTH.ADMIN],
          path: "/stockIssue",
        },
        //TODO: anna
        //  {
        //   icon: <RequestQuote />,
        //   label: "Stock Issue",
        //   path: "/stockIssue",
        // },
        {
          icon: <RequestQuote />,
          label: "Put Away Scan",
          requiredAbility: [AUTH.STOCK, AUTH.STOCK_TAKE, AUTH.STOCK_IN_BIND, AUTH.ADMIN],
          path: "/putAway",
        },
        {
          icon: <RequestQuote />,
          label: "Finished Good Order",
          requiredAbility: [AUTH.STOCK_FG, AUTH.ADMIN],
          path: "/finishedGood",
        },
        {
          icon: <RequestQuote />,
          label: "Stock Record",
          requiredAbility: [AUTH.STOCK_TAKE, AUTH.STOCK_IN_BIND, AUTH.STOCK_FG, AUTH.ADMIN],
          path: "/stockRecord",
        },
      ],
    },
    {
      icon: <RequestQuote />,
      label: "Delivery",
      path: "",
      requiredAbility: [AUTH.STOCK_FG, AUTH.ADMIN],
      children: [
        {
          icon: <RequestQuote />,
          label: "Delivery Order",
          requiredAbility: [AUTH.STOCK_FG, AUTH.ADMIN],
          path: "/do",
        },
      ],
    },
    // {
    //   icon: <RequestQuote />,
    //   label: "Report",
    //   path: "",
    //   children: [
    //     {
    //       icon: <RequestQuote />,
    //       label: "report",
    //       path: "",
    //     },
    //   ],
    // },
    // {
    //   icon: <RequestQuote />,
    //   label: "Recipe",
    //   path: "",
    //   children: [
    //     {
    //       icon: <RequestQuote />,
    //       label: "FG Recipe",
    //       path: "",
    //     },
    //     {
    //       icon: <RequestQuote />,
    //       label: "SFG Recipe",
    //       path: "",
    //     },
    //     {
    //       icon: <RequestQuote />,
    //       label: "Recipe",
    //       path: "",
    //     },
    //   ],
    // },
    {
      icon: <RequestQuote />,
      label: "Scheduling",
      path: "",
      requiredAbility: [AUTH.FORECAST, AUTH.ADMIN],
      children: [
        {
          icon: <RequestQuote />,
          label: "Demand Forecast",
          path: "/scheduling/rough",
        },
        {
          icon: <RequestQuote />,
          label: "Detail Scheduling",
          path: "/scheduling/detailed",
        },
        /*
        {
          icon: <RequestQuote />,
          label: "Production",
          path: "/production",
        },
        */
      ],
    },
    {
      icon: <RequestQuote />,
      label: "Management Job Order",
      path: "",
      requiredAbility: [AUTH.JOB_CREATE, AUTH.JOB_PICK, AUTH.JOB_PROD, AUTH.ADMIN],
      children: [
        {
          icon: <RequestQuote />,
          label: "Search Job Order/ Create Job Order",
          requiredAbility: [AUTH.JOB_CREATE, AUTH.ADMIN],
          path: "/jo",
        },
        {
          icon: <RequestQuote />,
          label: "Job Order Pickexcution",
          requiredAbility: [AUTH.JOB_PICK, AUTH.JOB_MAT, AUTH.ADMIN],
          path: "/jodetail",
        },
        {
          icon: <RequestQuote />,
          label: "Job Order Production Process",
          requiredAbility: [AUTH.JOB_PROD, AUTH.ADMIN],
          path: "/productionProcess",
        },
        {
          icon: <RequestQuote />,
          label: "Bag Usage",
          requiredAbility: [AUTH.JOB_PROD, AUTH.ADMIN],
          path: "/bag",
        },
      ],
    },
    {
      icon: <BugReportIcon />,
      label: "PS",
      path: "/ps",
      requiredAbility: AUTH.TESTING,
      isHidden: false,
    },
    {
      icon: <BugReportIcon />,
      label: "Printer Testing",
      path: "/testing",
      requiredAbility: [AUTH.TESTING, AUTH.ADMIN],
      isHidden: false,
    },
    {
      icon: <BugReportIcon />,
      label: "Report Management",
      path: "/report",
      requiredAbility: [AUTH.TESTING, AUTH.ADMIN],
      isHidden: false,
    },
    {
      icon: <RequestQuote />,
      label: "Settings",
      path: "",
      requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],
      children: [
        {
          icon: <RequestQuote />,
          label: "User",
          path: "/settings/user",
          requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],
        },
        {
          icon: <RequestQuote />,
          label: "User Group",
          path: "/settings/user",
          requiredAbility: [AUTH.VIEW_GROUP, AUTH.ADMIN],
        },
        // {
        //   icon: <RequestQuote />,
        //   label: "Material",
        //   path: "/settings/material",
        // },
        // {
        //   icon: <RequestQuote />,
        //   label: "By-product",
        //   path: "/settings/byProduct",
        // },
        {
          icon: <RequestQuote />,
          label: "Items",
          path: "/settings/items",
        },
        {
          icon: <RequestQuote />,
          label: "ShopAndTruck",
          path: "/settings/shop",
        },
        {
          icon: <RequestQuote />,
          label: "Demand Forecast Setting",
          path: "/settings/rss",
        },
        //{
        //  icon: <RequestQuote />,
        //  label: "Equipment Type",
        //  path: "/settings/equipmentType",
        //},
        {
          icon: <RequestQuote />,
          label: "Equipment",
          path: "/settings/equipment",
        },
        {
          icon: <RequestQuote />,
          label: "Warehouse",
          path: "/settings/warehouse",
        },
        {
          icon: <RequestQuote />,
          label: "Supplier",
          path: "/settings/user",
        },
        {
          icon: <RequestQuote />,
          label: "Customer",
          path: "/settings/user",
        },
        {
          icon: <RequestQuote />,
          label: "QC Check Item",
          path: "/settings/qcItem",
        },
        {
          icon: <RequestQuote />,
          label: "QC Category",
          path: "/settings/qcCategory",
        },
        {
          icon: <RequestQuote />,
          label: "QC Check Template",
          path: "/settings/user",
        },
        {
          icon: <QrCodeIcon />,
          label: "QR Code Handle", 
          path: "/settings/qrCodeHandle",
        },
        // {
        //   icon: <RequestQuote />,
        //   label: "Mail",
        //   path: "/settings/mail",
        // },
        {
          icon: <RequestQuote />,
          label: "Import Testing",
          path: "/settings/m18ImportTesting",
        },
        {
          icon: <RequestQuote />,
          label: "Import Excel",
          path: "/settings/importExcel",
        },
      ],
    },
  ];
  const { t } = useTranslation("common");
  const pathname = usePathname();

  const [openItems, setOpenItems] = React.useState<string[]>([]);
  const toggleItem = (label: string) => {
    setOpenItems((prevOpenItems) =>
      prevOpenItems.includes(label)
        ? prevOpenItems.filter((item) => item !== label)
        : [...prevOpenItems, label],
    );
  };

  const renderNavigationItem = (item: NavigationItem) => {
    if (!hasAbility(item.requiredAbility)) {
      return null;
    }

    const isOpen = openItems.includes(item.label);
    const hasVisibleChildren = item.children?.some(child => hasAbility(child.requiredAbility));

    return (
      <Box
        key={`${item.label}-${item.path}`}
        component={Link}
        href={item.path}
        sx={{ textDecoration: "none", color: "inherit" }}
      >
        <ListItemButton
          selected={pathname.includes(item.label)}
          onClick={() => item.children && toggleItem(item.label)}
        >
          <ListItemIcon>{item.icon}</ListItemIcon>
          <ListItemText primary={t(item.label)} />
        </ListItemButton>
        {item.children && isOpen && hasVisibleChildren && (
          <List sx={{ pl: 2 }}>
            {item.children.map(
              (child) => !child.isHidden && renderNavigationItem(child),
            )}
          </List>
        )}
      </Box>
    );
  };

  if (status === "loading") {
    return <Box sx={{ width: NAVIGATION_CONTENT_WIDTH, p: 3 }}>Loading...</Box>;
  }

  return (
    <Box sx={{ width: NAVIGATION_CONTENT_WIDTH }}>
      <Box sx={{ p: 3, display: "flex" }}>
        <Logo height={60} />
        {/* <button className="float-right bg-transparent border-transparent" >
          <ArrowCircleLeftRoundedIcon className="text-slate-400 hover:text-blue-400 hover:cursor-pointer " style={{ fontSize: '35px' }} />
        </button> */}
      </Box>
      <Divider />
      <List component="nav">
        {navigationItems
          .filter(item => !item.isHidden)
          .map(renderNavigationItem)
          .filter(Boolean)}
        {/* {navigationItems.map(({ icon, label, path }, index) => {
          return (
            <Box
              key={`${label}-${index}`}
              component={Link}
              href={path}
              sx={{ textDecoration: "none", color: "inherit" }}
            >
              <ListItemButton selected={pathname.includes(path)}>
                <ListItemIcon>{icon}</ListItemIcon>
                <ListItemText primary={t(label)} />
              </ListItemButton>
            </Box>
          );
        })} */}
      </List>
    </Box>
  );
};

export default NavigationContent;