"use client";

import React, { useMemo } from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  IconButton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
  Stack,
} from "@mui/material";
import { X } from "lucide-react";
import { useTranslation } from "react-i18next";
import type { MasterDataIssueGroup } from "./groupMasterDataIssues";
import { buildDetailRows, primaryTitle } from "./buildDisplayLines";

interface Props {
  open: boolean;
  group: MasterDataIssueGroup | null;
  onClose: () => void;
}

const MasterDataIssueDetailDialog: React.FC<Props> = ({
  open,
  group,
  onClose,
}) => {
  const { t } = useTranslation("masterDataIssue");

  const issueMessage = (code: string) =>
    t(`masterDataIssue_${code}`, { defaultValue: code });

  const detailRows = useMemo(() => {
    if (!group) return [];
    return buildDetailRows(group, t, issueMessage);
  }, [group, t]);

  if (!group) return null;

  const showBomCol = group.groupType !== "item";
  const showUomCols = detailRows.some(
    (r) => r.expected != null || r.actual != null,
  );

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle sx={{ pr: 6 }}>
        <Stack spacing={0.5}>
          <Typography variant="h6" component="span" sx={{ fontWeight: 700 }}>
            {primaryTitle(group)}
          </Typography>
        </Stack>
        <IconButton
          aria-label={t("masterDataIssue_close")}
          onClick={onClose}
          sx={{ position: "absolute", right: 8, top: 8 }}
        >
          <X size={18} />
        </IconButton>
      </DialogTitle>
      <DialogContent dividers>
        <TableContainer>
          <Table size="small">
            <TableHead>
              <TableRow>
                {showBomCol ? (
                  <TableCell>{t("masterDataIssue_col_bom")}</TableCell>
                ) : null}
                <TableCell>{t("masterDataIssue_col_issue")}</TableCell>
                {showUomCols ? (
                  <TableCell>{t("masterDataIssue_col_expected")}</TableCell>
                ) : null}
                {showUomCols ? (
                  <TableCell>{t("masterDataIssue_col_actual")}</TableCell>
                ) : null}
              </TableRow>
            </TableHead>
            <TableBody>
              {detailRows.map((row) => (
                <TableRow key={row.key}>
                  {showBomCol ? (
                    <TableCell>{row.bomLabel ?? "-"}</TableCell>
                  ) : null}
                  <TableCell sx={{ color: "warning.dark" }}>
                    {row.problem}
                  </TableCell>
                  {showUomCols ? (
                    <TableCell>{row.expected ?? "-"}</TableCell>
                  ) : null}
                  {showUomCols ? (
                    <TableCell>{row.actual ?? "-"}</TableCell>
                  ) : null}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </DialogContent>
    </Dialog>
  );
};

export default MasterDataIssueDetailDialog;
