import { Box, Typography } from "@mui/material";
import { SPACING } from "../../../../data/spacing";

const reportItems = [
  { label: "حجم درخواست کشتار مرغدار:", key: "quantityYesterday" },
  { label: "وزن درخواست کشتار مرغدار:", key: "totalWeightYesterday" },
  { label: "حجم خرید های مستقیم :", key: "killRequestQuantityYesterday" },
  { label: "وزن خرید های مستقیم :", key: "killRequestWeightYesterday" },
  {
    label: "حجم خرید های خارج از استان (زنده) :",
    key: "quantityKillHouseFreeBarLiveYesterday",
  },
  {
    label: "وزن خرید های خارج از استان (زنده) :",
    key: "WeightKillHouseFreeBarLiveYesterday",
  },
  {
    label: "وزن خرید های خارج از استان (لاشه) :",
    key: "WeightKillHouseFreeBarCarcassYesterday",
  },
  {
    label: "حجم کل تخصیصات (خرید مستقیم/ مرغدار ):",
    key: "provinceKillRequestQuantityYesterday",
  },
  {
    label: "وزن کل تخصیصات (خرید مستقیم/ مرغدار ):",
    key: "provinceKillRequestWeightCarcassYesterday",
  },
  {
    label: "حجم فروش به خارج استان:",
    key: "poultryOutProvinceQuantityYesterday",
  },
  {
    label: "وزن فروش به خارج استان:",
    key: "poultryOutProvinceWeightYesterday",
  },
  { label: "حجم بارها:", key: "KillHouseRequestQuantityYesterday" },
  { label: "وزن بارها:", key: "KillHouseRequestWeightYesterday" },
  {
    label: "لاشه تولیدی با احتساب 25درصد افت کشتار :",
    key: "totalLossWeightYesterday",
  },
];

const ReportRow = ({ label, value }) => (
  <Box
    sx={{
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      minHeight: 40,
      px: 2,
      py: 0.5,
      borderRadius: 1,
      backgroundColor: "rgba(86, 156, 221, 0.1)",
    }}
  >
    <Typography
      color="text.primary"
      sx={{ fontSize: "0.85rem", textAlign: "left" }}
    >
      {label}
    </Typography>
    <Typography
      color="primary.main"
      fontWeight="bold"
      sx={{ fontSize: "0.85rem", textAlign: "left" }}
    >
      {value?.toLocaleString() || 0}
    </Typography>
  </Box>
);

export const YesterdayKillingReport = ({ boxStats }) => (
  <Box
    sx={{
      width: "100%",
      borderRadius: 2,
      border: "1px solid",
      borderColor: "divider",
      p: SPACING.SMALL,
      boxSizing: "border-box",
      display: "flex",
      flexDirection: "column",
      gap: 2,
    }}
  >
    <Typography
      textAlign="start"
      variant="subtitle1"
      color="text.primary"
      sx={{ fontWeight: 600, fontSize: "1rem" }}
    >
      گزارش کشتار دیروز مرغ گوشتی استان
    </Typography>

    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        gap: 1,
        overflowY: "auto",
        flex: 1,
        maxHeight: "500px",
      }}
    >
      {reportItems.map((item, index) => (
        <ReportRow
          key={index}
          label={item.label}
          value={boxStats?.killingYesterday?.[item.key]}
        />
      ))}
    </Box>
  </Box>
);