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

const reportItems = [
  { label: "حجم درخواست کشتار مرغدار:", key: "quantity" },
  { label: "وزن درخواست کشتار مرغدار:", key: "totalWeight" },
  { label: "حجم خرید های مستقیم :", key: "killRequestQuantity" },
  { label: "وزن خرید های مستقیم :", key: "killRequestWeight" },
  {
    label: "حجم خرید های خارج از استان (زنده) :",
    key: "quantityKillHouseFreeBarLive",
  },
  {
    label: "وزن خرید های خارج از استان (زنده) :",
    key: "WeightKillHouseFreeBarLive",
  },
  {
    label: "وزن خرید های خارج از استان (لاشه) :",
    key: "WeightKillHouseFreeBarCarcass",
  },
  {
    label: "حجم کل تخصیصات (خرید مستقیم/ مرغدار ):",
    key: "provinceKillRequestQuantity",
  },
  {
    label: "وزن کل تخصیصات (خرید مستقیم/ مرغدار ):",
    key: "provinceKillRequestWeightCarcass",
  },
  { label: "حجم فروش به خارج استان:", key: "poultryOutProvinceQuantity" },
  { label: "وزن فروش به خارج استان:", key: "poultryOutProvinceWeight" },
  { label: "حجم بارها:", key: "KillHouseRequestQuantity" },
  { label: "وزن بارها:", key: "KillHouseRequestWeight" },
  {
    label: "لاشه تولیدی امروز با احتساب 25درصد افت کشتار :",
    key: "totalLossWeight",
  },
];

const ReportRow = ({ label, value }) => (
  <Box
    sx={{
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      minHeight: 40,
      px: 2,
      py: 0.5,
      borderRadius: 1,
      backgroundColor: "rgba(147, 112, 219, 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 DailykillingReport = ({ 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) => (
        <ReportRow
          key={item.key}
          label={item.label}
          value={boxStats?.killing?.[item.key]}
        />
      ))}
    </Box>
  </Box>
);
