import { useState, useEffect } from "react";
import ProfilePA from "@/components/icons/ProfilePA";
import LogoutP from "@/components/icons/LogoutP";
import CardDA from "@/components/icons/CardDA";
import { Button, Popover } from "@mui/material";
import Link from "next/link";
import ModalLogout from "./ModalLogout";
import Cookies from "js-cookie";

function DetailProfile({ anchorEl, setAnchorEl }) {
  const [modal, setModal] = useState(false);
  const [hasRepresentationRole, setHasRepresentationRole] = useState(false);

  const handleClose = () => setAnchorEl(null);
  const closeModal = () => setModal(false);
  const openModal = () => setModal(true);

  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 open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <>
      <ModalLogout open={modal} handleClose={closeModal} />
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
      >
        <div className="flex pt-[11px] pb-[14px] flex-col items-start gap-[8px] min-w-[185px]">
          <Link href="/dashboard" className="w-full">
            <Button
              fullWidth
              variant="text"
              className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
            >
              <ProfilePA />
              پروفایل من
            </Button>
          </Link>
          <Link
            href={{
              pathname: "/dashboard",
              query: {
                sidebar: 2,
              },
            }}
            className="w-full"
          >
            <Button
              fullWidth
              variant="text"
              className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
            >
              <CardDA />
              تراکنش های من
            </Button>
          </Link>
          {hasRepresentationRole && (
            <Link href="/panel/dashboard" className="w-full">
              <Button
                fullWidth
                variant="text"
                className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
              >
                <ProfilePA />
                داشبورد نماینده
              </Button>
            </Link>
          )}
          <Button
            fullWidth
            color="error"
            variant="contained"
            onClick={openModal}
            sx={{
              "&.MuiButtonBase-root": {
                paddingTop: "8px !important",
                paddingBottom: "8px !important",
              },
            }}
            className="!flex !w-[calc(100%-16px)] !mx-auto !text-[#FAFAFA] !text-[14px] !font-medium !items-center !justify-center !gap-[5px]"
          >
            <LogoutP />
            خروج
          </Button>
        </div>
      </Popover>
    </>
  );
}

export default DetailProfile;