"use client";

import { RootState } from "@/app/_globalRedux/store";
import { DownOutlined, UserOutlined } from "@ant-design/icons";
import {
  Divider,
  Dropdown,
  DropdownProps,
  MenuProps,
  Popover,
  Space,
  Spin,
  Switch,
  theme,
  Tooltip,
} from "antd";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { ChangePassword } from "./ChangePassword";
import { LogoutItem } from "../navigation/TopNavbar";
import { useSaveMapChoiceMutation } from "@/app/_globalRedux/services/trackingDashboard";
import { setAuth } from "@/app/_globalRedux/common/authSlice";
import { ReloadWindowModal } from "../navigation/ReloadWindowModal";
import { useGetSubUsersQuery } from "@/app/_globalRedux/services/yatayaat";

const { useToken } = theme;

function UserSettings() {
  const { userName, isGoogleMap, userId, parentUser, ssoGivenName } =
    useSelector((state: RootState) => state.auth);
  const permissions = JSON.parse(localStorage.getItem("permissions") || "{}");

  // Get SSO given name from Redux or localStorage as fallback
  const displayGivenName = ssoGivenName || permissions.ssoGivenName;

  const auth = useSelector((state: RootState) => state.auth);
  const dispatch = useDispatch();

  const [userSettingsOpen, setUserSettingsOpen] = useState(false);
  const [changePasswordModalOpen, setChangePasswordModalOpen] = useState(false);
  const [reloadWindowModal, setReloadWindowModal] = useState(false);
  const [isGlobalLoader, setIsGlobalLoader] = useState(false);
  const [subuserOptions, setSubuserOptions] = useState<
    { value: string; label: string }[]
  >([]);

  const [saveMapChoice, { isLoading }] = useSaveMapChoiceMutation();
  const { data: subuserData, isLoading: isSubuserLoading } =
    useGetSubUsersQuery(
      {
        userId: permissions.userId,
      },
      { skip: !permissions.userId || Number(permissions.parentUser) !== 1 }
    );

  useEffect(() => {
    if (subuserData && subuserData.length > 0) {
      const options = subuserData.map((user) => ({
        value: user.user_id,
        label: user.sys_username,
      }));
      setSubuserOptions(options);
    }
  }, [subuserData]);

  const handleOpenChange: DropdownProps["onOpenChange"] = (nextOpen, info) => {
    if (info.source === "trigger" || nextOpen) {
      setUserSettingsOpen(nextOpen);
    }
  };

  const { token } = useToken();

  const contentStyle: React.CSSProperties = {
    backgroundColor: token.colorBgElevated,
    borderRadius: token.borderRadiusLG,
    boxShadow: token.boxShadowSecondary,
  };

  const menuStyle: React.CSSProperties = {
    boxShadow: "none",
  };

  const items: MenuProps["items"] = [
    // Only include username dropdown if userId is not 83482 and not SSO user
    ...(Number(userId) !== 83482 && !displayGivenName
      ? [
          {
            key: "0",
            label: (
              <div className="relative mb-1">
                {permissions.parentUser === 1 ? (
                  <div className="w-full">
                    <Popover
                      arrow={false}
                      trigger={"click"}
                      placement="leftBottom"
                      overlayInnerStyle={{
                        padding: 0,
                        marginRight: 15,
                        marginTop: -8,
                      }}
                      className="w-full"
                      content={
                        <div className="w-full flex flex-col h-[500px] overflow-y-scroll scrollbar-thumb-thumb-green scrollbar-w-2  scrollbar-thumb-rounded-md scrollbar overflow-visible">
                          <div className="w-full border-b-[1px] border-neutral-300 py-1.5 pl-3">
                            <p className="text-lg font-semibold">Subusers</p>
                            <div
                              className="text-xs font-semibold py-0.5 cursor-pointer"
                              onClick={() => {
                                const updatedAuth = {
                                  ...auth,
                                  userId: `${permissions.userId}`,
                                  groupId: `${permissions.groupId}`,
                                  parentUser: "1",
                                  userName: permissions.userName,
                                };
                                dispatch(setAuth(updatedAuth));
                                localStorage.setItem(
                                  "auth-session",
                                  JSON.stringify(updatedAuth)
                                );
                                window.location.reload();
                              }}
                            >
                              Switch to main account
                            </div>
                          </div>

                          {subuserData && subuserData?.length > 0
                            ? subuserData.map((option) => (
                                <div
                                  className="hover:bg-neutral-100 pr-10 pl-3 py-2 font-medium text-sm cursor-pointer w-full"
                                  key={option.user_id}
                                  onClick={() => {
                                    const updatedAuth = {
                                      ...auth,
                                      userId: option.user_id,
                                      groupId: option.sys_group_id,
                                      parentUser: `${permissions.userId}`,
                                      userName: option.sys_username,
                                    };
                                    dispatch(setAuth(updatedAuth));
                                    localStorage.setItem(
                                      "auth-session",
                                      JSON.stringify(updatedAuth)
                                    );
                                    window.location.reload();
                                  }}
                                >
                                  {option.sys_username}
                                </div>
                              ))
                            : null}
                        </div>
                      }
                    >
                      <div className="flex items-center justify-between">
                        <p className="font-medium text-xl text-gray-600 select-none">
                          {userName?.charAt(0)?.toUpperCase() +
                            userName?.slice(1)}
                        </p>
                        <DownOutlined className="text-xl" />
                      </div>
                    </Popover>
                  </div>
                ) : (
                  <p className="font-medium text-xl text-gray-600 select-none text-center w-full">
                    {userName?.charAt(0)?.toUpperCase() + userName?.slice(1)}
                  </p>
                )}
              </div>
            ),
            disabled: Number(permissions.parentUser) !== 1 ? true : false,
          },
        ]
      : displayGivenName
      ? [
          {
            key: "0",
            label: (
              <div className="relative mb-1">
                <p className="font-medium text-xl text-gray-600 select-none text-center w-full">
                  {displayGivenName}
                </p>
              </div>
            ),
            disabled: true,
          },
        ]
      : []),

    ...(Number(userId) === 87307 ||
    Number(userId) === 3085 ||
    Number(parentUser) === 3085 ||
    Number(userId) === 87162 ||
    Number(parentUser) === 87162
      ? []
      : [
          {
            key: "toggle_open_street_map",
            label: (
              <div className="w-full rounded-sm hover:text-primary-green transition-colors duration-300 flex items-center justify-between">
                <p>Toggle open street map</p>
                <Switch
                  loading={isLoading}
                  value={isGoogleMap === 0}
                  onClick={() => {
                    saveMapChoice({
                      userid: Number(userId),
                      isgooglemap: isGoogleMap === 1 ? 0 : 1,
                    }).then(() => {
                      setReloadWindowModal(true);
                      const updatedIsGoogleMap = isGoogleMap === 1 ? 0 : 1;

                      dispatch(
                        setAuth({ ...auth, isGoogleMap: updatedIsGoogleMap })
                      );
                      localStorage.setItem(
                        "auth-session",
                        JSON.stringify({
                          ...auth,
                          isGoogleMap: updatedIsGoogleMap,
                        })
                      );
                    });
                  }}
                />
              </div>
            ),
          },
        ]),

    Number(userId) === 4607 || Number(userId) === 83482
      ? null
      : {
          key: "change_password",
          label: (
            <p
              className="w-full rounded-sm hover:text-primary-green transition-colors duration-300"
              onClick={() => {
                setChangePasswordModalOpen(true);
              }}
            >
              Change password
            </p>
          ),
        },
  ];

  return (
    <>
      <ReloadWindowModal
        reloadWindowModal={reloadWindowModal}
        setReloadWindowModal={setReloadWindowModal}
      />
      {isGlobalLoader ? (
        <div className="h-screen w-screen absolute top-0 -left-[15px] z-[9999] bg-[rgba(255,255,255)] flex items-center justify-center">
          <Spin size="large" spinning={true} />
        </div>
      ) : (
        ""
      )}
      <ChangePassword
        setChangePasswordModalOpen={setChangePasswordModalOpen}
        changePasswordModalOpen={changePasswordModalOpen}
      />
      <Dropdown
        menu={{
          items,
          onClick: () => {},
        }}
        dropdownRender={(menu) => (
          <div style={contentStyle}>
            {React.cloneElement(menu as React.ReactElement, {
              style: menuStyle,
            })}
            <Divider style={{ margin: 0 }} />
            <Space className="pb-2 pt-4 px-2 w-full">
              <button
                onClick={() => {
                  setUserSettingsOpen(false);
                  setIsGlobalLoader(true);
                  LogoutItem({ dispatch, setAuth });
                }}
                className=" text-white py-2 w-[286px] rounded-sm font-semibold bg-primary-orange hover:bg-[rgba(218,94,26)] transition-colors duration-300"
              >
                Logout
              </button>
            </Space>
          </div>
        )}
        trigger={["click"]}
        placement="bottomRight"
        open={userSettingsOpen}
        onOpenChange={handleOpenChange}
        arrow={{ pointAtCenter: true }}
        overlayStyle={{ width: "300px" }}
      >
        <Tooltip title="User Settings" mouseEnterDelay={1}>
          <div className="rounded-full border-primary-orange border-2">
            <div className="rounded-full border-white border-2 px-1.5  bg-primary-orange cursor-pointer">
              <UserOutlined
                className="text-xs"
                style={{ color: "rgb(214, 211, 209)" }}
              />
            </div>
          </div>
        </Tooltip>
      </Dropdown>
    </>
  );
}

export default UserSettings;