"use client";

import { useState, type MouseEvent } from "react";

import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import IconButton from "@mui/material/IconButton";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Tooltip from "@mui/material/Tooltip";
import { alpha, useTheme } from "@mui/material/styles";

import {
  ExportCommentIcon,
  EyeViewIcon,
  PencilEditIcon,
} from "@/components/ui/icon";

type ProgressReportCommentActionsMenuProps = {
  onViewDetail?: () => void;
  onAddComment?: () => void;
  addCommentDisabled?: boolean;
  addCommentDisabledReason?: string;
  onEditComment?: () => void;
  onDeleteComment?: () => void;
};

/**
 * CDC-GPSF can open the comment actions for a report Issue or RGC decision.
 * Comment saving will be connected when its API is added in the next workflow
 * phase.
 */
export function ProgressReportCommentActionsMenu({
  onViewDetail,
  onAddComment,
  addCommentDisabled = false,
  addCommentDisabledReason,
  onEditComment,
  onDeleteComment,
}: ProgressReportCommentActionsMenuProps) {
  const theme = useTheme();
  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
  const isOpen = Boolean(anchorElement);
  const isDark = theme.palette.mode === "dark";

  function openMenu(event: MouseEvent<HTMLElement>) {
    setAnchorElement(event.currentTarget);
  }

  function closeMenu() {
    setAnchorElement(null);
  }

  const menuItemSx = {
    minHeight: 44,
    px: 2,
    gap: 1.5,
    fontSize: 13,
    fontWeight: 500,
    color: isDark ? alpha("#ffffff", 0.86) : "#414651",
  } as const;
  const iconSx = {
    fontSize: 20,
    color: isDark ? alpha("#ffffff", 0.72) : "#717680",
  } as const;

  return (
    <>
      <IconButton
        size="small"
        aria-label="Open comment actions"
        aria-haspopup="menu"
        aria-expanded={isOpen ? "true" : undefined}
        onClick={openMenu}
        sx={{ color: "text.secondary" }}
      >
        <MoreVertIcon sx={{ fontSize: 22 }} />
      </IconButton>

      <Menu
        anchorEl={anchorElement}
        open={isOpen}
        onClose={closeMenu}
        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
        transformOrigin={{ vertical: "top", horizontal: "right" }}
        slotProps={{
          paper: {
            sx: {
              mt: 0.5,
              minWidth: 220,
              borderRadius: "12px",
              border: `1px solid ${isDark ? alpha("#ffffff", 0.12) : "#f5f5f5"}`,
              bgcolor: isDark ? "#101828" : "#ffffff",
              boxShadow: isDark
                ? "0 12px 30px rgba(0, 0, 0, 0.5)"
                : "0px 0px 10.6px rgba(0, 0, 0, 0.1)",
            },
          },
        }}
      >
        <MenuItem
          onClick={() => {
            closeMenu();
            onViewDetail?.();
          }}
          sx={menuItemSx}
        >
          <EyeViewIcon sx={iconSx} />
          View Detail
        </MenuItem>
        {onAddComment ? (
          <Tooltip
            title={addCommentDisabled ? addCommentDisabledReason : ""}
            placement="left"
          >
            <span>
              <MenuItem
                disabled={addCommentDisabled}
                onClick={() => {
                  closeMenu();
                  onAddComment();
                }}
                sx={menuItemSx}
              >
                <ExportCommentIcon sx={iconSx} />
                Add Comment
              </MenuItem>
            </span>
          </Tooltip>
        ) : null}
        {onEditComment ? (
          <MenuItem
            onClick={() => {
              closeMenu();
              onEditComment();
            }}
            sx={menuItemSx}
          >
            <PencilEditIcon sx={iconSx} />
            Edit Comment
          </MenuItem>
        ) : null}
        {onDeleteComment ? (
          <MenuItem
            onClick={() => {
              closeMenu();
              onDeleteComment();
            }}
            sx={menuItemSx}
          >
            <DeleteOutlinedIcon sx={{ ...iconSx, color: "#f04438" }} />
            Delete Comment
          </MenuItem>
        ) : null}
      </Menu>
    </>
  );
}