"use client";

import CardD from "@/components/icons/CardD";
import LogoutD from "@/components/icons/LogoutD";
import CalndarD from "@/components/icons/CalndarD";
import MessageD from "@/components/icons/MessageD";
import ProfileD from "@/components/icons/ProfileD";
import NotificationD from "@/components/icons/NotificationD";
import { Button } from "@mui/material";
import ArrowLeftSideBar from "@/components/icons/ArrowLeftSideBar";
import { useState, useEffect } from "react";
import ModalLogout from "../../../app/component/ModalLogout";
import Cookies from "js-cookie";
import { useRouter } from "next/navigation";

function List({
  value,
  setValue,
  isTurnsDetails,
  setIsTurnsDetails,
  setIsOpenSide,
}) {
  const router = useRouter();
  const [hasRepresentationRole, setHasRepresentationRole] = useState(false);

  useEffect(() => {
    const userInfo = Cookies.get("userInfo");
    if (userInfo) {
      try {
        const parsedUserInfo = JSON.parse(userInfo);
        const roles = parsedUserInfo?.roles || {};
        const hasRole = Object.values(roles).includes("representation");
        setHasRepresentationRole(hasRole);
      } catch (error) {
        console.error("Error parsing userInfo:", error);
      }
    }
  }, []);

  const baseListMenu = [
    { name: "حساب کاربری", icon: <ProfileD active={value === 0} />, action: "tab" },
    { name: "نوبت های من", icon: <CalndarD active={value === 1} />, action: "tab" },
    { name: "تراکنش های من", icon: <CardD active={value === 2} />, action: "tab" },
  ];

  // اگر نقش representation دارد، داشبورد نماینده را اضافه کن
  if (hasRepresentationRole) {
    baseListMenu.push({
      name: "داشبورد نماینده",
      icon: <ProfileD active={value === 3} />,
      action: "navigate",
      path: "/panel/dashboard"
    });
  }

  const listMenu = [
    ...baseListMenu,
    { name: "نظرات من", icon: <MessageD active={value === hasRepresentationRole ? 4 : 3} />, action: "tab" },
    { name: "پیام ها", icon: <NotificationD active={value === hasRepresentationRole ? 5 : 4} />, action: "tab" },
    { name: "خروج", icon: <LogoutD active={value === hasRepresentationRole ? 6 : 5} />, action: "logout" },
  ];

  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const handleMenuClick = (item, idx) => {
    setIsOpenSide(false);
    !isTurnsDetails && setIsTurnsDetails(false);

    if (item.action === "logout") {
      handleOpen();
    } else if (item.action === "navigate") {
      router.push(item.path);
    } else {
      setValue(idx);
    }
  };

  return (
    <ul className="flex flex-col items-start justify-start w-full">
      <ModalLogout open={open} handleClose={handleClose} />
      {listMenu.map((item, idx) => (
        <li className="w-full" key={idx}>
          <Button
            className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
                            transition-all duration-300 before:transition-all before:duration-300
                            !relative before:!absolute before:!right-0 !flex !justify-between !items-center
                            before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px]
                            ${value === idx
                ? "before:md:!bg-[#5559CE]"
                : "before:!bg-transparent"
              }`}
            onClick={() => handleMenuClick(item, idx)}
          >
            <div className="!flex !w-full !items-center !justify-start !gap-[8px] md:px-[24px]">
              <div className="w-[24px] h-[24px]">{item.icon}</div>
              <h2
                className={`
                                text-[16px] transition-all duration-500
                                ${value === idx
                    ? "text-[#5559CE] font-bold"
                    : "text-[#7E7E7E] font-normal"
                  }
                            `}
              >
                {item.name}
              </h2>
            </div>
            <div className="flex md:hidden">
              <ArrowLeftSideBar active={value === idx} />
            </div>
          </Button>
          {listMenu.length > idx + 1 && (
            <span className="block bg-[#EFEFEF] h-px mx-[24px] w-[calc(100%-48px)]"></span>
          )}
        </li>
      ))}
    </ul>
  );
}

export default List;