import { Card, CardContent, Stack, Typography } from "@mui/material";
import dayjs from "dayjs";
import { OUTPUT_DATE_FORMAT } from "@/app/utils/formatUtil";
import { useTranslation } from "react-i18next";
import { ProductProcessWithLinesResponse } from "@/app/api/jo/actions"; 

interface Props {
  processData?: ProductProcessWithLinesResponse | null;
}

const ProcessSummaryHeader: React.FC<Props> = ({ processData }) => {
  const { t } = useTranslation(["common", "jo"]);
  
  // 计算 Assume Time Need：从所有 productProcessLines 的 durationInMinutes 求和
  const assumeTimeNeed = processData?.productProcessLines?.reduce(
    (sum, line) => sum + (line.durationInMinutes || 0),
    0
  ) || 0;
  
  // Start Time：使用 processData.startTime
  const startTime = processData?.startTime;
  
  // Assume End Time：Start Time + Assume Time Need（分钟）
  const assumeEndTime = startTime 
    ? dayjs(startTime).add(assumeTimeNeed, 'minute')
    : null;
  
  return (
  <Card sx={{ mb: 2 }}>
    <CardContent>
      <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
          {t("Job Order Code")}: <strong>{processData?.jobOrderCode}</strong>
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
          {t("Item")}: <strong>{processData?.itemCode+"-"+processData?.itemName}</strong>
        </Typography>

        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
          {t("Job Type")}: <strong style={{ color: "green" }}>{t(processData?.jobType ?? "")}</strong>
        </Typography>

        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
          {t("Qty")}: <strong style={{ color: "green" }}>{processData?.outputQty}</strong> ({processData?.outputQtyUom ?? ""})
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
          {t("Production Date")}: <strong style={{ color: "green" }}>{processData?.date ? dayjs(processData.date).format(OUTPUT_DATE_FORMAT) : ""}</strong>
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
          {t("Assume Time Need")}: <strong style={{ color: "blue" }}>{assumeTimeNeed} {t("minutes")}</strong>
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
          {t("Start Time")}: <strong>
            {startTime 
              ? (
                <>
                  <span style={{ color: "green" }}>{dayjs(startTime).format("MM-DD")}</span>
                  {" "}
                  <span style={{ color: "blue" }}>{dayjs(startTime).format("HH:mm")}</span>
                </>
              )
              : "-"}
          </strong>
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
          {t("Assume End Time")}: <strong>
            {assumeEndTime ? (
              <>
                <span style={{ color: "green" }}>{assumeEndTime.format("MM-DD")}</span>
                {" "}
                <span style={{ color: "blue" }}>{assumeEndTime.format("HH:mm")}</span>
              </>
            ) : "-"}
          </strong>
        </Typography>
      </Stack>
      </CardContent>
    </Card>
  );
};

export default ProcessSummaryHeader;