"use client";

import type { PoWorkbenchDetailsGridLineRow } from "@/components/PoWorkbench/types";
import { PO_WORKBENCH_META_ICON_SX } from "@/components/PoWorkbench/shared/poWorkbenchSharedStyles";
import PoWorkbenchReceiveStatusChip from "@/components/PoWorkbench/shared/PoWorkbenchReceiveStatusChip";
import Inventory2Icon from "@mui/icons-material/Inventory2";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import type { ReactNode } from "react";
import { useTranslation } from "react-i18next";

const SINGLE_LINE_CLAMP_SX = {
  overflow: "hidden",
  textOverflow: "ellipsis",
  whiteSpace: "nowrap",
  minWidth: 0,
} as const;

const WRAP_TEXT_SX = {
  minWidth: 0,
  overflowWrap: "break-word",
  wordBreak: "break-word",
} as const;

const META_LINE_TEXT_SX = {
  fontSize: "0.8125rem",
  lineHeight: 1.4,
} as const;

const META_ICON_SLOT_SX = {
  ...META_LINE_TEXT_SX,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  flexShrink: 0,
  width: 16,
  height: "1.45em",
} as const;

const ITEM_CELL_ROOT_SX = {
  display: "flex",
  flexDirection: "column",
  gap: 0.375,
  width: "100%",
  minWidth: 0,
  boxSizing: "border-box",
} as const;

interface ItemMetaIconRowProps {
  icon: ReactNode;
  children: ReactNode;
}

function ItemMetaIconRow({ icon, children }: ItemMetaIconRowProps) {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        gap: 0.75,
        alignItems: "flex-start",
        width: "100%",
        minWidth: 0,
        ...META_LINE_TEXT_SX,
      }}
    >
      <Box sx={META_ICON_SLOT_SX}>{icon}</Box>
      <Box sx={{ minWidth: 0, flex: 1 }}>{children}</Box>
    </Box>
  );
}

interface PoWorkbenchDetailsGridItemCellProps {
  row: PoWorkbenchDetailsGridLineRow;
}

/** Row 1: name. Rows 2–3: code/category, location. Row 4: status chip. */
export default function PoWorkbenchDetailsGridItemCell({
  row,
}: PoWorkbenchDetailsGridItemCellProps) {
  const { t } = useTranslation("poWorkbench");

  const categoryLabel = t(`detailsGrid.itemCategory.${row.category}`);

  return (
    <Box sx={ITEM_CELL_ROOT_SX}>
      <Typography
        variant="body2"
        sx={{
          fontSize: "0.8125rem",
          fontWeight: 600,
          lineHeight: 1.4,
          ...WRAP_TEXT_SX,
        }}
      >
        {row.itemName}
      </Typography>

      <ItemMetaIconRow icon={<Inventory2Icon sx={PO_WORKBENCH_META_ICON_SX} aria-hidden />}>
        <Typography
          color="text.secondary"
          title={`${row.itemCode} · ${categoryLabel}`}
          sx={{ ...META_LINE_TEXT_SX, ...WRAP_TEXT_SX }}
        >
          {`${row.itemCode} · ${categoryLabel}`}
        </Typography>
      </ItemMetaIconRow>

      <ItemMetaIconRow icon={<LocationOnIcon sx={PO_WORKBENCH_META_ICON_SX} aria-hidden />}>
        <Typography
          color="text.secondary"
          title={row.storageLocation}
          sx={{
            fontWeight: 600,
            ...META_LINE_TEXT_SX,
            ...SINGLE_LINE_CLAMP_SX,
          }}
        >
          {row.storageLocation}
        </Typography>
      </ItemMetaIconRow>

      <Box sx={{ alignSelf: "flex-start" }}>
        <PoWorkbenchReceiveStatusChip status={row.receiveStatus} dense />
      </Box>
    </Box>
  );
}
