"use client";

import type { MouseEvent } from "react";

import MoreVertOutlinedIcon from
  "@mui/icons-material/MoreVertOutlined";

import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";

import { useState } from "react";

import type { ProgressReportRow } from
  "../../progress-report-data";
import { EyeViewIcon } from "@/components/ui/icon";

type TextCellProps = {
  value?: string | null;
  maxLines?: number;
};

export function ProgressReportTextCell({
  value,
  maxLines = 2,
}: TextCellProps) {
  const text = value?.trim() || "-";

  return (
    <Tooltip title={text} arrow>
      <Typography
        component="span"
        sx={{
          width: "100%",
          fontSize: 13,
          fontWeight: 400,
          lineHeight: 1.45,
          color: "text.primary",
          overflow: "hidden",
          textOverflow: "ellipsis",
          display: "-webkit-box",
          WebkitBoxOrient: "vertical",
          WebkitLineClamp: maxLines,
          wordBreak: "break-word",
        }}
      >
        {text}
      </Typography>
    </Tooltip>
  );
}

type ActionsCellProps = {
  row: ProgressReportRow;
  viewLabel: string;
  onView?: (row: ProgressReportRow) => void;
};

export function ProgressReportActionsCell({
  row,
  viewLabel,
  onView,
}: ActionsCellProps) {
  const [anchorElement, setAnchorElement] =
    useState<HTMLElement | null>(null);

  const open = Boolean(anchorElement);

  const handleOpenMenu = (
    event: MouseEvent<HTMLButtonElement>,
  ) => {
    event.stopPropagation();
    setAnchorElement(event.currentTarget);
  };

  const handleCloseMenu = () => {
    setAnchorElement(null);
  };

  const handleView = () => {
    handleCloseMenu();
    onView?.(row);
  };

  return (
    <Box
      sx={{
        width: "100%",
        display: "flex",
        justifyContent: "center",
      }}
    >
      <IconButton
        size="small"
        aria-label="Progress report actions"
        onClick={handleOpenMenu}
        sx={{
          width: 32,
          height: 32,
        }}
      >
        <MoreVertOutlinedIcon fontSize="small" />
      </IconButton>

      <Menu
        anchorEl={anchorElement}
        open={open}
        onClose={handleCloseMenu}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
        slotProps={{
          paper: {
            sx: {
              minWidth: 170,
              borderRadius: 2,
              boxShadow:
                "0 8px 24px rgba(16, 24, 40, 0.14)",
            },
          },
        }}
      >
        <MenuItem onClick={handleView}>
          <ListItemIcon>
            <EyeViewIcon
              fontSize="small"
            />
          </ListItemIcon>

          <ListItemText primary={viewLabel} />
        </MenuItem>
      </Menu>
    </Box>
  );
}