"use client";

import { useRouter } from "next/navigation";
import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import Divider from "@mui/material/Divider";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import Popover from "@mui/material/Popover";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import { useAppLanguage } from "@/components/providers/app-language-provider";
import { logout } from "@/features/auth/service/auth-service";
import type { TranslationKey } from "./header-data";
// import { useRouter } from "next/navigation";

import {
  BellMenuIcon,
  Download,
  GearIcon,
  GlobeMenuIcon,
  LogoutIcon,
  PeopleIcon,
} from "./header-icons";

type ProfileDropdownProps = {
  anchorEl: HTMLElement | null;
  open: boolean;
  onClose: () => void;
};

type ProfileMenuItem = {
  key: string;
  labelKey: TranslationKey;
  icon: ReactNode;
  danger?: boolean;
  dividerAbove?: boolean;
};

const profileMenuItems: ProfileMenuItem[] = [
  {
    key: "account",
    labelKey: "accountSetting",
    icon: <GearIcon />,
  },
  {
    key: "notification",
    labelKey: "notificationSetting",
    icon: <BellMenuIcon />,
  },
  {
    key: "organization",
    labelKey: "myOrganization",
    icon: <PeopleIcon />,
  },
  {
    key: "download",
    labelKey: "downloadApp",
    icon: <Download />,
  },
  {
    key: "language",
    labelKey: "language",
    icon: <GlobeMenuIcon />,
  },
  {
    key: "logout",
    labelKey: "logout",
    icon: <LogoutIcon color="#F04438" />,
    danger: true,
    dividerAbove: true,
  },
];

export function ProfileDropdown({
  anchorEl,
  open,
  onClose,
}: ProfileDropdownProps) {
  const theme = useTheme();
  const router = useRouter();
  const { language, setLanguage, t } = useAppLanguage();

  async function handleMenuClick(key: string) {
    onClose();

    if (key === "account") {
      router.push("/account-setting");
      return;
    }

    if (key === "notification") {
      router.push("/notification-setting");
      return;
    }

    if (key === "organization") {
      router.push("/my-organization");
      return;
    }

    if (key === "download") {
      // router.push("/download-app");
      return;
    }

    if (key === "language") {
      setLanguage(language === "kh" ? "en" : "kh");
      return;
    }

    if (key === "logout") {
      await logout();
      router.push("/auth/login");
      router.refresh();
    }
  }

  return (
    <Popover
      open={open}
      anchorEl={anchorEl}
      onClose={onClose}
      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
      transformOrigin={{ vertical: "top", horizontal: "right" }}
      elevation={0}
      slotProps={{
        paper: {
          sx: {
            mt: 1,
            width: 230,
            borderRadius: "12px",
            boxShadow:
              theme.palette.mode === "dark"
                ? "0px 12px 32px rgba(0, 0, 0, 0.4)"
                : "0px 8px 24px rgba(16, 24, 40, 0.12)",
            border: `1px solid ${theme.palette.divider}`,
            py: 1,
            backgroundColor: theme.palette.background.paper,
          },
        },
      }}
    >
      <List disablePadding>
        {profileMenuItems.map((item) => (
          <Box key={item.key}>
            {item.dividerAbove ? <Divider sx={{ my: 0.5 }} /> : null}

            <ListItemButton
              onClick={() => handleMenuClick(item.key)}
              sx={{
                minHeight: 44,
                px: 2,
                "&:hover": {
                  backgroundColor: item.danger
                    ? alpha("#F04438", 0.08)
                    : theme.palette.action.hover,
                },
              }}
            >
              <ListItemIcon sx={{ minWidth: 30 }}>
                {item.icon}
              </ListItemIcon>

              <Typography
                sx={{
                  fontSize: 14,
                  fontWeight: 500,
                  color: item.danger
                    ? "#F04438"
                    : theme.palette.text.secondary,
                }}
              >
                {t(item.labelKey)}
              </Typography>
            </ListItemButton>
          </Box>
        ))}
      </List>
    </Popover>
  );
}