"use client";

import { PO_WORKBENCH_DETAILS_GRID_META_FONT_SIZE } from "@/components/PoWorkbench/shared/poWorkbenchSharedStyles";
import type { PoWorkbenchListRow } from "@/components/PoWorkbench/types";
import Chip from "@mui/material/Chip";
import { useTheme } from "@mui/material";
import { useTranslation } from "react-i18next";

/** Status labels use `purchaseOrder` i18n namespace (shared with legacy PO screens). */

const STATUS_CHIP_SX = {
  height: "auto",
  minHeight: 26,
  fontWeight: 600,
  lineHeight: 1.25,
  "& .MuiChip-label": {
    px: 1,
    py: 0.25,
    display: "block",
  },
} as const;

const STATUS_CHIP_DENSE_SX = {
  height: "auto",
  minHeight: "unset",
  fontWeight: 600,
  lineHeight: 1.4,
  fontSize: PO_WORKBENCH_DETAILS_GRID_META_FONT_SIZE,
  "& .MuiChip-label": {
    px: 0.75,
    py: 0.125,
    fontSize: PO_WORKBENCH_DETAILS_GRID_META_FONT_SIZE,
    lineHeight: 1.4,
    display: "block",
  },
} as const;

export function receiveStatusChipColor(
  status: PoWorkbenchListRow["status"],
): "default" | "primary" | "success" | "warning" {
  if (status === "completed") return "success";
  if (status === "receiving") return "primary";
  return "warning";
}

interface PoWorkbenchReceiveStatusChipProps {
  status: PoWorkbenchListRow["status"];
  /** Use details-grid meta font size (0.8125rem). */
  dense?: boolean;
}

/** Receive workflow chip; same styling as PO list / details header. */
export default function PoWorkbenchReceiveStatusChip({
  status,
  dense = false,
}: PoWorkbenchReceiveStatusChipProps) {
  const { t } = useTranslation("purchaseOrder");
  const theme = useTheme();

  return (
    <Chip
      size="small"
      variant="outlined"
      color={receiveStatusChipColor(status)}
      label={t(status)}
      sx={{
        ...(dense ? STATUS_CHIP_DENSE_SX : STATUS_CHIP_SX),
        ...(!dense && { fontSize: theme.typography.body2.fontSize }),
      }}
    />
  );
}
