import { useContext, useEffect, useState } from "react";
import { AppContext } from "../../../../contexts/AppContext";
import { Button, TextField, Tooltip, Typography } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment";
import { useDispatch } from "react-redux";
import { dashboardGetSlaughterPeriodicPerformance } from "../../services/dashboard-slaughter-periodic-performance";
import farmIcon1 from "../../../../assets/images/dashboard/farmIcon1.png";
import farmIcon2 from "../../../../assets/images/dashboard/farmIcon2.png";
import farmIcon4 from "../../../../assets/images/dashboard/farmIcon4.png";
import farmIcon6 from "../../../../assets/images/dashboard/farmIcon6.png";
import farmIcon7 from "../../../../assets/images/dashboard/farmIcon7.png";
import farmIcon8 from "../../../../assets/images/dashboard/farmIcon8.png";
import killedInProvinceIcon1 from "../../../../assets/images/dashboard/killedInProvinceIcon1.png";
import killedInProvinceIcon2 from "../../../../assets/images/dashboard/killedInProvinceIcon2.png";
import killedInProvinceIcon3 from "../../../../assets/images/dashboard/killedInProvinceIcon3.png";
import iconLeft from "../../../../assets/images/dashboard/iconLeft.png";
import iconRight from "../../../../assets/images/dashboard/iconRight.png";
import buyerPerformanceIcon from "../../../../assets/images/dashboard/buyerPerformanceIcon.png";
import warningIcon from "../../../../assets/images/dashboard/warningIcon.png";
import { SPACING } from "../../../../data/spacing";
import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { LinearProgress } from "@mui/material";
import { ImFilePdf } from "react-icons/im";
import axios from "axios";

export const DashboardPeriodicPerformance = () => {
  const dispatch = useDispatch();
  const [, , selectedDate1, setSelectedDate1, selectedDate2, setSelectedDate2] =
    useContext(AppContext);
  const [data, setData] = useState({});

  useEffect(() => {
    dispatch(
      dashboardGetSlaughterPeriodicPerformance({
        date1: selectedDate1,
        date2: selectedDate2,
      })
    ).then((r) => {
      if (r.payload?.data) {
        setData(r.payload.data);
      }
    });
  }, [dispatch, selectedDate1, selectedDate2]);

  const reportCards = [
    {
      title: "تعداد ",

      key: (data) =>
        `${data?.poultryHatchingGt60?.toLocaleString() || "0"} فارم`,
    },
    {
      title: "حجم ",

      key: (data) =>
        `${data?.poultryHatchingGt60Quantity?.toLocaleString() || "0"} قطعه`,
    },
    {
      title: "مانده در سالن",

      key: (data) =>
        `${data?.poultryHatchingGt60LeftOver?.toLocaleString() || "0"} قطعه (${
          (
            (data?.poultryHatchingGt60LeftOver /
              data?.poultryHatchingGt60Quantity) *
              100 || 0
          ).toFixed(0) || 0
        }%)`,
    },
  ];

  const reportBarKilledInProvince = [
    {
      title: "تعداد بارها",
      icon: killedInProvinceIcon1,
      key: (data) =>
        `${data?.killHouseRequestCount?.toLocaleString() || 0} بار`,
    },
    {
      title: "حجم کشتار",
      icon: killedInProvinceIcon2,
      key: (data) =>
        `${data?.killHouseRequestQuantity?.toLocaleString() || 0} قطعه`,
    },
    {
      title: "وزن کشتار",
      icon: killedInProvinceIcon1,
      key: (data) =>
        `${data?.killHouseRequestWeight?.toLocaleString() || 0} کیلوگرم`,
    },

    {
      title: "میانگین وزن",

      icon: killedInProvinceIcon3,
      key: (data) =>
        `${data?.killHouseRequestAverageWeight?.toLocaleString() || 0} کیلوگرم`,
    },
  ];

  console.log(data);
  const reportBarKilledOutProvince = [
    {
      title: "تعداد بارها",
      icon: iconLeft,
      key: (data) => `${data?.freeBarsCount?.toLocaleString() || 0} بار`,
    },
    {
      title: "حجم کشتار",
      icon: iconRight,
      key: (data) => `${data?.freeBarsQuantity?.toLocaleString() || 0} قطعه`,
    },
    // {
    //   title: "وزن کشتار",
    //   icon: iconRight,
    //   key: (data) => `${data?.freeBarsWeight?.toLocaleString() || 0} کیلوگرم`,
    // },
    {
      title: `بیشترین خرید : ${data?.killHouseName}`,
      icon: iconLeft,
      key: (data) => `${data?.transactionCount?.toLocaleString() || 0} بار`,
    },
  ];

  const reportBuyerPerformance = [
    {
      title: "بیشترین خرید داخل استان",
      key: (data) => `${data?.killHouseNameReq?.toLocaleString() || 0} `,
    },
    {
      title: "بیشترین خرید خارج از استان",
      key: (data) => `${data?.killHouseName?.toLocaleString() || 0}`,
    },
    {
      title: "بیشترین بار ارسالی مرغدار داخل استان",
      key: (data) =>
        `${data?.poultryReqNameReq?.toLocaleString() || 0} با ${
          data?.topPoultryReqStatsTotalQuantity
        }  قطعه در شهرستان  ${data?.poultryCityReqNameReq}`,
    },

    {
      title: "بیشترین بار ارسالی مرغدار خارج استان",
      key: (data) =>
        `${data?.outPoultryReqNameReq?.toLocaleString() || 0} با ${
          data?.outTopPoultryReqStatsTotalQuantity
        } قطعه در شهرستان ${data?.outPoultryCityReqNameReq}`,
    },
  ];

  const reportDistributerCorpse = [
    {
      title: "بیشترین درصد توزیع",
      key: (data) => `${data?.managementKillHouseDict?.maxPercent || "-"} `,
    },

    {
      title: "بیشترین درصد توزیع به خارج استان",
      key: (data) => `${data?.managementKillHouseDict?.maxOutProvince || "-"} `,
    },
    {
      title: "بیشترین درصد توزیع به داخل استان",
      key: (data) => `${data?.managementKillHouseDict?.maxInProvince || "-"} `,
    },

    {
      title: "کمترین درصد توزیع به خارج استان",
      key: (data) => `${data?.managementKillHouseDict?.minOutProvince || "-"} `,
    },
    {
      title: "کمترین درصد توزیع به داخل استان",
      key: (data) => `${data?.managementKillHouseDict?.minInProvince || "-"} `,
    },
    {
      title: "بیشترین وزن مانده در انبار",
      key: (data) => `${data?.managementKillHouseDict?.maxProduct || "-"} `,
    },
  ];

  const reportBillScale = [
    {
      title: "بیشترین سند ثبت شده نسبت به تعداد بارها",
      key: (data) => `${data?.maxAndMinAssigment?.maxDucName || "-"} `,
    },
    {
      title: "کمترین سند ثبت شده نسبت به تعداد بارها",
      key: (data) => `${data?.maxAndMinAssigment?.minDucName || "-"} `,
    },
    {
      title: "بیشترین سند تایید شده نسبت به تعداد بارها",
      key: (data) => `${data?.maxAndMinAssigment?.maxDucAcceptedName || "-"} `,
    },

    {
      title: "کمترین سند تایید شده نسبت به تعداد بارها",
      key: (data) => `${data?.maxAndMinAssigment?.minDucAcceptedName || "-"} `,
    },
    {
      title: "بیشترین مغایرت نسبت به کل بارها",
      key: (data) => `${data?.maxAndMinAssigment?.maxDucRejectedName || "-"} `,
    },
    {
      title: "کمترین مغایرت نسبت به کل بارها",
      key: (data) => `${data?.maxAndMinAssigment?.minDucRejectedName || "-"} `,
    },
  ];

  return (
    <Grid
      container
      direction="column"
      xs={12}
      md={12}
      sx={{ paddingBottom: "30px" }}
    >
      <Grid
        container
        xs={12}
        gap={1}
        sx={{
          margin: {
            xs: "10px  0 ",
          },
          // padding: "8px",
          justifyContent: {
            xs: "center",
            md: "start",
          },
          width: "100%",
          alignItems: {
            xs: "center",
          },
        }}
      >
        <Grid>
          <DatePicker
            label="از تاریخ"
            renderInput={(params) => (
              <TextField {...params} style={{ width: "160px" }} size="small" />
            )}
            value={selectedDate1}
            onChange={(newValue) => {
              setSelectedDate1(moment(newValue).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
        <Grid>
          <DatePicker
            label="تا تاریخ"
            renderInput={(params) => (
              <TextField {...params} style={{ width: "160px" }} size="small" />
            )}
            value={selectedDate2}
            onChange={(newValue) => {
              setSelectedDate2(moment(newValue).format("YYYY-MM-DD"));
            }}
          />
        </Grid>

        <Tooltip title="خروجی پی دی اف">
          <a
            href={`${axios.defaults.baseURL}management_all_poultry_and_warehouse_pdf/?date1=${selectedDate1}&date2=${selectedDate2}
            `}
            rel="noreferrer"
          >
            <Button color="error">
              <ImFilePdf size={32} />
            </Button>
          </a>
        </Tooltip>
      </Grid>

      <Grid
        md={11.8}
        lg={11.9}
        container
        sx={{
          borderRadius: "8px",
          border: "1px solid  rgba(0, 0, 0, 0.18)",
          backgroundColor: "rgba(249, 249, 250, 1)",
        }}
      >
        <Typography
          align="left"
          sx={{ color: "#2D5FFF", padding: "20px" }}
          variant="body1"
        >
          وضعیت فارم های فعال
        </Typography>

        <Grid
          container
          gap={2}
          sx={{
            justifyContent: "center",
            padding: "20px",
          }}
        >
          {[
            {
              label: "تعداد فارم‌ها",
              value: data?.poultryCount ?? 0,
              unit: "فارم",
              icon: farmIcon1,
            },
            {
              label: "حجم جوجه‌ریزی",
              value: data?.poultryHatchingQuantity ?? 0,
              unit: "قطعه",
              icon: farmIcon2,
            },

            {
              label: "حجم تلفات",
              value: data?.poultryHatchingTotalLosses ?? 0,
              unit: `قطعه (${(
                ((data?.poultryHatchingTotalLosses ?? 0) /
                  (data?.poultryHatchingQuantity ?? 1)) *
                100
              ).toFixed(1)}%)`,
              icon: farmIcon4,
            },
            {
              label: "حجم کشتار",
              value: data?.poultryHatchingKilledQuantity ?? 0,
              unit: "قطعه",
              icon: farmIcon6,
            },

            {
              label: " وزن کشتار",
              value: data?.poultryHatchingTotalKilledWeight ?? 0,
              unit: "کیلوگرم",
              icon: farmIcon7,
            },
            {
              label: "حجم مانده در سالن",
              value: data?.poultryHatchingLeftOver ?? 0,
              unit: `قطعه (${(
                ((data?.poultryHatchingLeftOver ?? 0) /
                  (data?.poultryHatchingQuantity ?? 1)) *
                100
              ).toFixed(0)}%)`,
              icon: farmIcon8,
            },

            {
              label: "میانگین تلفات",
              value: data?.avgLosses?.toLocaleString() || 0,
              unit: "قطعه",
              icon: farmIcon7,
            },
            {
              label: "میانگین سن کشتار",
              value: data?.totalKillingAveAge?.toLocaleString() || 0,
              unit: "روز",
              icon: farmIcon7,
            },

            {
              label: "میانگین وزن کشتار",
              value: data?.avgTotalKilledWeight?.toLocaleString() || 0,
              unit: "کیلوگرم",
              icon: farmIcon7,
            },
          ].map((item, index) => (
            <Grid
              key={index}
              item
              xs={12}
              md={3.82}
              xl={3.9}
              sx={{
                backgroundColor: "rgba(255, 255, 255, 1)",
                color: "#717171",
                border: "1px solid rgba(151, 151, 151, 1)",
                borderRadius: "8px",
                justifyContent: "space-between",
                alignItems: "center",
                display: "flex",
                padding: "10px",
              }}
            >
              <Grid sx={{ display: "flex", alignItems: "center" }}>
                <img src={item.icon} alt="icon" width="32" height="32" />
                <Typography sx={{ marginLeft: "10px" }}>
                  {item.label}{" "}
                </Typography>
              </Grid>

              <Typography
                sx={{
                  color:
                    parseInt(item.value) > 0 || item.value === 0
                      ? "rgba(53, 53, 53, 1)"
                      : "red",
                  display: "flex",
                  alignItems: "center",
                }}
              >
                <span
                  style={{
                    fontWeight: "bold",
                    marginLeft: "4px",
                    direction: "ltr",
                    display: "inline-block",
                  }}
                >
                  {item.value?.toLocaleString?.() || item.value}
                </span>
                <span>{item.unit}</span>
              </Typography>
            </Grid>
          ))}
        </Grid>
      </Grid>

      <Grid
        container
        gap={2}
        sx={{
          width: "100%",
        }}
      >
        <Grid
          md={5.8}
          lg={5.9}
          xs={12}
          item
          mt={SPACING.SMALL}
          sx={{
            justifyContent: "center",
            border: "1px solid #CCCCCD",
            backgroundColor: "#F9F9FA",
            borderRadius: "8px",
          }}
        >
          <Typography
            align="left"
            sx={{ color: "#2D5FFF", padding: "20px" }}
            variant="body1"
          >
            فارم‌های با سن بیشتر از ۶۰ روز
          </Typography>

          <Grid
            container
            justifyContent="center"
            xs={12}
            gap={4}
            sx={{
              padding: "15px",
            }}
          >
            {reportCards.map((item, index) => (
              <Grid
                item
                key={index}
                md={3}
                xs={12}
                sx={{
                  width: "100%",
                  backgroundColor:
                    index % 2 === 0
                      ? "rgba(45, 95, 255, 0.11)"
                      : "rgba(230, 250, 245, 1)",
                  border: "1px solid #ccc",
                  borderRadius: "8px",
                  padding: "0",
                }}
              >
                <Grid
                  style={{
                    borderRadius: "8px",
                    backgroundColor:
                      index % 2 === 0
                        ? "rgba(27, 57, 153, 1)"
                        : "rgba(0, 204, 153, 1)",
                  }}
                >
                  <Typography style={{ color: "#fff", padding: "10px" }}>
                    {item.title}
                  </Typography>
                </Grid>
                <Grid sx={{ padding: "15px" }} gap={3}>
                  <Typography
                    style={{
                      color: "#353535",
                    }}
                  >
                    {item.key(data)}
                  </Typography>
                </Grid>
              </Grid>
            ))}
          </Grid>
        </Grid>

        <Grid
          item
          md={5.8}
          lg={5.9}
          xs={12}
          mt={SPACING.SMALL}
          sx={{
            justifyContent: "center",
            border: "1px solid #CCCCCD",
            backgroundColor: "#F9F9FA",
            borderRadius: "8px",
            padding: "17px",
          }}
        >
          <Grid
            container
            sx={{ alignItems: "center", justifyContent: "space-between" }}
          >
            <Typography sx={{ color: "#2D5FFF" }} variant="body1">
              بیشترین سن کشتار :{data?.maxAgePoultry} روز
            </Typography>
            {(data?.maxAgePoultryName !== "-" ||
              data?.maxAgePoultryCity !== "-") && (
              <Grid>
                <Typography
                  sx={{
                    marginLeft: "20px",
                    color: "rgba(0, 163, 122, 1)",
                  }}
                >
                  {data?.maxAgePoultryName} - {data?.maxAgePoultryCity}
                </Typography>
              </Grid>
            )}

            <Tooltip
              title={`${(
                (data?.maxAgePoultryLeftOver * 100) /
                  data?.maxAgePoultryQuantity || 0
              ).toFixed(2)}%`}
            >
              <LinearProgress
                variant="determinate"
                value={
                  (data?.maxAgePoultryLeftOver / data?.maxAgePoultryQuantity) *
                  100
                }
                sx={{
                  marginTop: {
                    xs: "10px",
                  },
                  width: "200px",
                  height: "10px",
                  borderRadius: 5,
                  backgroundColor: "rgba(217, , 217, 1)",
                  "& .MuiLinearProgress-bar": {
                    backgroundColor: (() => {
                      const percent =
                        (data?.maxAgePoultryLeftOver * 100) /
                        data?.maxAgePoultryQuantity;

                      if (percent > 0 && percent < 25) return "red";
                      if (percent >= 25 && percent < 50) return "orange";
                      if (percent >= 50 && percent < 75) return "yellow";
                      return "green";
                    })(),
                  },
                }}
              />
            </Tooltip>
          </Grid>

          <Grid
            container
            xs={12}
            mt={SPACING.SMALL}
            sx={{
              padding: "7px",
              justifyContent: "space-between",
              backgroundColor: " rgba(227, 232, 251, 1);",
            }}
          >
            <Typography>
              حجم جوجه ریزی:
              {data?.maxAgePoultryQuantity?.toLocaleString()}
            </Typography>
            <Typography>
              کشتار شده : {data?.maxAgePoultryKilledQuantity?.toLocaleString()}
            </Typography>
            <Typography>
              مانده در سالن : {data?.maxAgePoultryLeftOver?.toLocaleString()}
            </Typography>
          </Grid>

          <Grid
            container
            mt={SPACING.SMALL}
            sx={{ alignItems: "center", justifyContent: "space-between" }}
          >
            <Typography sx={{ color: "#2D5FFF" }} variant="body1">
              کمترین سن کشتار: {data?.minAgePoultry} روز
            </Typography>

            {(data?.minAgePoultryName !== "-" ||
              data?.minAgePoultryCity !== "-") && (
              <Grid>
                <Typography
                  sx={{
                    marginLeft: "20px",
                    color: "rgba(0, 163, 122, 1)",
                  }}
                >
                  {data?.minAgePoultryName} - {data?.minAgePoultryCity}
                </Typography>
              </Grid>
            )}

            <Tooltip
              title={`${(
                (data?.minAgePoultryLeftOver / data?.minAgePoultryQuantity) *
                  100 || 0
              ).toFixed(2)}%`}
            >
              <LinearProgress
                variant="determinate"
                value={
                  (data?.minAgePoultryLeftOver / data?.minAgePoultryQuantity) *
                  100
                }
                sx={{
                  marginTop: {
                    xs: "10px",
                  },
                  width: "200px",
                  height: "10px",
                  borderRadius: 5,
                  backgroundColor: "rgba(217, 217, 217, 1)",
                  "& .MuiLinearProgress-bar": {
                    backgroundColor: (() => {
                      const percent =
                        (data?.minAgePoultryLeftOver /
                          data?.minAgePoultryQuantity) *
                        100;

                      if (percent > 0 && percent < 25) return "red";
                      if (percent >= 25 && percent < 50) return "orange";
                      if (percent >= 50 && percent < 75) return "yellow";
                      return "green";
                    })(),
                  },
                }}
              />
            </Tooltip>

            <Grid
              item
              xs={12}
              mt={SPACING.SMALL}
              sx={{
                display: "flex",
                justifyContent: "space-between",
                backgroundColor: " rgba(255, 219, 197, 1)",
                padding: "7px",
              }}
            >
              <Typography>
                حجم جوجه ریزی:
                {data?.minAgePoultryQuantity?.toLocaleString() || 0}
              </Typography>
              <Typography>
                کشتار شده :
                {data?.minAgePoultryKilledQuantity?.toLocaleString() || 0}
              </Typography>
              <Typography>
                مانده در سالن :
                {data?.minAgePoultryLeftOver?.toLocaleString() || 0}
              </Typography>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
      <Grid
        container
        gap={2}
        sx={{
          width: "100%",
        }}
      >
        <Grid
          md={5.8}
          lg={5.9}
          xs={12}
          item
          mt={SPACING.SMALL}
          sx={{
            justifyContent: "center",
            border: "1px solid #CCCCCD",
            backgroundColor: "#F9F9FA",
            borderRadius: "8px",
          }}
        >
          <Typography
            align="left"
            sx={{ color: "#2D5FFF", padding: "20px" }}
            variant="body1"
          >
            کشتار داخل استان (زنده)
          </Typography>

          <Grid
            container
            gap={2}
            justifyContent="center"
            xs={12}
            sx={{
              padding: "20px",
            }}
          >
            {reportBarKilledInProvince?.map((item, index) => (
              <Grid
                key={index}
                md={11.8}
                xs={12}
                sx={{
                  alignItems: "center",
                  width: "100%",
                  display: "flex",
                  boxShadow: "0px 8px 8px 0px #0000001A",
                  border: "1px solid rgba(255, 252, 252, 1)",
                  borderRadius: "50px",
                }}
              >
                <img
                  src={item.icon}
                  key={item.icon}
                  alt="icon"
                  width="64"
                  height="43"
                />
                <Grid
                  xs={12}
                  sx={{
                    alignItems: "center",
                    justifyContent: "space-between",
                    display: "flex",
                  }}
                >
                  <Typography style={{ color: "#535353" }}>
                    {item.title}
                  </Typography>
                  <Typography
                    style={{
                      color: "#353535",
                      padding: "10px",
                    }}
                  >
                    {item.key(data)}
                  </Typography>
                </Grid>
              </Grid>
            ))}
          </Grid>
        </Grid>

        <Grid
          item
          xs={12}
          md={5.8}
          lg={5.9}
          mt={SPACING.SMALL}
          sx={{
            justifyContent: "center",
            border: "1px solid #CCCCCD",
            backgroundColor: "#F9F9FA",
            borderRadius: "8px",
          }}
        >
          <Typography
            align="left"
            sx={{ color: "#2D5FFF", padding: "20px" }}
            variant="body1"
          >
            کشتار خارج استان (زنده)
          </Typography>

          <Grid
            container
            xs={12}
            gap={3}
            justifyContent="center"
            sx={{ padding: "20px" }}
          >
            {reportBarKilledOutProvince.map((item, index) => (
              <Grid
                item
                key={index}
                xs={12}
                md={12}
                sx={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: index % 2 === 0 ? "end" : "start",
                }}
              >
                {item.icon === iconLeft && (
                  <img
                    src={iconLeft}
                    alt="icon-left"
                    width="32"
                    height="32"
                    style={{ marginLeft: "-2px" }}
                  />
                )}

                <Grid
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    width: {
                      md: "579px",
                      xs: "100%",
                    },
                    border:
                      index % 2 === 0
                        ? "2px solid #00CC99"
                        : "2px solid #1B3999",
                    backgroundColor:
                      index % 2 === 0
                        ? "rgba(235, 255, 250, 1)"
                        : "rgba(237, 241, 255, 1)",
                    borderRadius: "8px",
                    padding: "7px",
                    zIndex: "10",
                    justifyContent: item?.title ? "space-between" : "start",
                  }}
                >
                  <Typography sx={{ color: "#535353" }}>
                    {item?.title}
                  </Typography>
                  <Typography sx={{ color: "#353535" }}>
                    {item.key(data)}
                  </Typography>
                </Grid>

                {item.icon === iconRight && (
                  <img
                    src={iconRight}
                    alt="icon-right"
                    width="32"
                    height="32"
                    style={{ marginRight: "-2px" }}
                  />
                )}
              </Grid>
            ))}

            <Typography
              align="left"
              sx={{ color: "#EB5757", width: "100%", marginTop: "10px" }}
              variant="body1"
            >
              * بیشترین حجم کشتار در {data?.persianDate} با{" "}
              {data?.freeBarsQuantity?.toLocaleString() || "0"} قطعه رخ داده است
            </Typography>
          </Grid>
        </Grid>
      </Grid>
      <Grid
        container
        xs={12}
        md={11.8}
        lg={11.9}
        mt={2}
        sx={{
          width: "100%",
          justifyContent: "center",
          border: "1px solid #CCCCCD",
          backgroundColor: "#F9F9FA",
          borderRadius: "8px",
          padding: "6px",
        }}
      >
        <Typography
          align="left"
          sx={{ color: "#2D5FFF", padding: "20px", width: "100%" }}
          variant="body1"
        >
          عملکرد خریداران
        </Typography>
        {data?.killHousesData?.length > 0 && (
          <Grid
            container
            justifyContent="center"
            sx={{ width: "100%" }}
            spacing={2}
          >
            <Grid item xs={12} md={2.3}>
              <Grid container direction="column" sx={{ marginTop: "32px" }}>
                <Grid
                  container
                  sx={{
                    borderRadius: "8px",
                    margin: "2px",
                    padding: "5px",
                    border: "1px solid #D9D9D9",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <Grid item xs={12}>
                    <Typography
                      textAlign="center"
                      fontWeight="400"
                      sx={{ color: "#444444" }}
                    >
                      نام کشتارگاه
                    </Typography>
                  </Grid>
                </Grid>

                {data.killHousesData.map((item, index) => (
                  <Grid
                    container
                    key={index}
                    sx={{
                      borderRadius: "8px",
                      margin: "2px",
                      padding: "5px",
                      border: "1px solid rgba(217, 217, 217, 1)",
                      backgroundColor: index % 2 === 0 ? "#ebfffa" : "#fff",
                    }}
                  >
                    <Grid item xs={12}>
                      <Typography textAlign="center">
                        {item?.name || "-"}
                      </Typography>
                    </Grid>
                  </Grid>
                ))}
              </Grid>
            </Grid>
            <Grid item xs={12} md={3.2}>
              <Typography
                textAlign="center"
                sx={{ color: "#444444", fontWeight: "400" }}
                fontWeight="600"
              >
                داخل استان
              </Typography>
              <Grid container direction="column" sx={{ marginTop: "10px" }}>
                <Grid
                  container
                  sx={{
                    borderRadius: "8px",
                    margin: "2px",
                    padding: "5px",
                    border: "1px solid #D9D9D9",
                    alignItems: "center",
                    justifyContent: "space-around",
                  }}
                >
                  <Typography
                    textAlign="center"
                    fontWeight="400"
                    sx={{ color: "#444444" }}
                  >
                    تعداد بار
                  </Typography>
                  <Typography
                    textAlign="center"
                    fontWeight="400"
                    sx={{ color: "#444444" }}
                  >
                    حجم بار
                  </Typography>

                  <Typography
                    textAlign="center"
                    fontWeight="400"
                    sx={{ color: "#444444" }}
                  >
                    وزن بار
                  </Typography>
                </Grid>

                {data.killHousesData.map((item, index) => (
                  <Grid
                    container
                    key={index}
                    sx={{
                      margin: "2px",
                      padding: "5px",
                      borderRadius: "8px",
                      border: "1px solid rgba(217, 217, 217, 1)",
                      backgroundColor: index % 2 === 0 ? "#E3E8FB" : "#fff",
                    }}
                  >
                    <Grid item xs={4}>
                      <Typography textAlign="center">
                        {item?.loadCountInProvince?.toLocaleString() || 0}
                      </Typography>
                    </Grid>
                    <Grid item xs={4}>
                      <Typography textAlign="center">
                        {item?.inProvinceQuantity?.toLocaleString() || 0}
                      </Typography>
                    </Grid>
                    <Grid item xs={4}>
                      <Typography textAlign="center">
                        {item?.inProvinceWight?.toLocaleString() || 0}
                      </Typography>
                    </Grid>
                  </Grid>
                ))}
              </Grid>
            </Grid>
            <Grid item xs={12} md={3.2}>
              <Typography
                textAlign="center"
                sx={{ color: "#444444", fontWeight: "400" }}
                fontWeight="600"
              >
                خارج استان
              </Typography>
              <Grid container direction="column" sx={{ marginTop: "10px" }}>
                <Grid
                  container
                  sx={{
                    borderRadius: "8px",
                    margin: "2px",
                    padding: "5px",
                    border: "1px solid #D9D9D9",
                    alignItems: "center",
                    justifyContent: "space-around",
                  }}
                >
                  <Typography
                    textAlign="center"
                    fontWeight="400"
                    sx={{ color: "#444444" }}
                  >
                    تعداد بار
                  </Typography>
                  <Typography
                    textAlign="center"
                    fontWeight="400"
                    sx={{ color: "#444444" }}
                  >
                    حجم بار
                  </Typography>

                  <Typography
                    textAlign="center"
                    fontWeight="400"
                    sx={{ color: "#444444" }}
                  >
                    وزن بار
                  </Typography>
                </Grid>

                {data.killHousesData.map((item, index) => (
                  <Grid
                    container
                    key={index}
                    sx={{
                      borderRadius: "8px",
                      margin: "2px",
                      padding: "5px",
                      border: "1px solid rgba(217, 217, 217, 1)",
                      backgroundColor: index % 2 === 0 ? "#EDEDED" : "#fff",
                    }}
                  >
                    <Grid item xs={4}>
                      <Typography textAlign="center">
                        {item?.loadCountOutProvince?.toLocaleString() || 0}
                      </Typography>
                    </Grid>
                    <Grid item xs={4}>
                      <Typography textAlign="center">
                        {item?.outProvinceQuantity?.toLocaleString() || 0}
                      </Typography>
                    </Grid>
                    <Grid item xs={4}>
                      <Typography textAlign="center">
                        {item?.outProvinceWeight?.toLocaleString() || 0}
                      </Typography>
                    </Grid>
                  </Grid>
                ))}
              </Grid>
            </Grid>

            <Grid item xs={12} md={3.2}>
              <Typography
                textAlign="center"
                sx={{ color: "#444444", fontWeight: "400" }}
                fontWeight="600"
              >
                کل بارها
              </Typography>
              <Grid container direction="column" sx={{ marginTop: "10px" }}>
                <Grid
                  container
                  sx={{
                    borderRadius: "8px",
                    margin: "2px",
                    padding: "5px",
                    border: "1px solid #D9D9D9",
                    alignItems: "center",
                    justifyContent: "space-around",
                  }}
                >
                  <Typography
                    textAlign="center"
                    fontWeight="400"
                    sx={{ color: "#444444" }}
                  >
                    تعداد بار
                  </Typography>
                  <Typography
                    textAlign="center"
                    fontWeight="400"
                    sx={{ color: "#444444" }}
                  >
                    حجم بار
                  </Typography>

                  <Typography
                    textAlign="center"
                    fontWeight="400"
                    sx={{ color: "#444444" }}
                  >
                    وزن بار
                  </Typography>
                </Grid>

                {data.killHousesData.map((item, index) => (
                  <Grid
                    container
                    key={index}
                    sx={{
                      borderRadius: "8px",
                      margin: "2px",
                      padding: "5px",
                      border: "1px solid rgba(217, 217, 217, 1)",
                      backgroundColor: index % 2 === 0 ? "#F9F0EB" : "#fff",
                    }}
                  >
                    <Grid item xs={4}>
                      <Typography textAlign="center">
                        {item?.loadCount?.toLocaleString() || 0}
                      </Typography>
                    </Grid>
                    <Grid item xs={4}>
                      <Typography textAlign="center">
                        {item?.totalQuantity?.toLocaleString() || 0}
                      </Typography>
                    </Grid>
                    <Grid item xs={4}>
                      <Typography textAlign="center">
                        {item?.totalWeight?.toLocaleString() || 0}
                      </Typography>
                    </Grid>
                  </Grid>
                ))}
              </Grid>
            </Grid>
          </Grid>
        )}

        <Grid container sx={{ marginTop: "10px" }}>
          {reportBuyerPerformance.map((item, index) => (
            <Grid item xs={12} md={6} key={index}>
              <Grid container sx={{ padding: "10px" }}>
                <Grid item alignItems="center" sx={{ display: "flex" }}>
                  <img
                    src={buyerPerformanceIcon}
                    alt="icon"
                    width="32"
                    height="32"
                  />
                  <Typography
                    sx={{ marginLeft: 1, fontSize: { xs: "13px", md: "16px" } }}
                  >
                    {item.title} : {item.key(data)}
                  </Typography>
                </Grid>
              </Grid>
            </Grid>
          ))}
        </Grid>
      </Grid>
      <Grid
        container
        xs={12}
        mt={SPACING.SMALL}
        sx={{
          width: " 100%",
          justifyContent: "center",

          padding: "6px",
        }}
      >
        <Typography
          align="left"
          sx={{ color: "#2D5FFF", padding: "20px", width: "100%" }}
          variant="body1"
        >
          عملکرد کشتار و توزیع لاشه
        </Typography>

        <Grid xs={12} sx={{ padding: "10px" }}>
          <SimpleTable
            columns={[
              "ردیف",
              "نام",
              "وزن بار زنده",
              "وزن وارد شده به انبار",
              "وزن توزیع داخل استان",
              "وزن توزیع خارج استان",
              "وزن کل توزیع شده",
              "وزن مانده در انبار فعلی",
              "درصد توزیع",
            ]}
            data={data?.managementKillHouseData?.map((item, i) => [
              i + 1,
              item?.name || " -",
              item?.inProvinceQuantity.toLocaleString() || 0,
              item?.inWareHouseQuantity.toLocaleString() || 0,
              item?.stewardAllocationQuantity.toLocaleString() || 0,
              item?.killHouseFreeBarQuantity.toLocaleString() || 0,
              item?.allQuantity.toLocaleString() || 0,
              item?.product.toLocaleString() || 0,
              item?.percent.toLocaleString() || 0,
            ])}
            rowColors={["#FFF", "#F2F5FF"]}
            headerColor="#E0E7FF"
          />
        </Grid>
        <Grid
          xs={12}
          sx={{
            display: "flex",
            alignItems: "center",
          }}
        >
          <Typography
            align="left"
            sx={{ color: "#EB5757", width: "100%" }}
            variant="body1"
          >
            * وزن ها بر حسب کیلوگرم میباشد.
          </Typography>
        </Grid>
        <Grid container sx={{ marginTop: "10px" }}>
          {reportDistributerCorpse.map((item, index) => (
            <Grid item xs={12} md={6} key={index}>
              <Grid container sx={{ padding: "10px" }}>
                <Grid item alignItems="center" sx={{ display: "flex" }}>
                  <img
                    src={buyerPerformanceIcon}
                    alt="icon"
                    width="32"
                    height="32"
                  />
                  <Typography
                    sx={{ marginLeft: 1, fontSize: { xs: "13px", md: "16px" } }}
                  >
                    {item.title} : {item.key(data)}
                  </Typography>
                </Grid>
              </Grid>
            </Grid>
          ))}
        </Grid>
      </Grid>
      <Grid
        container
        xs={12}
        mt={SPACING.SMALL}
        sx={{
          width: " 100%",
          justifyContent: "center",
          padding: "6px",
          border: "1px solid #CCCCCD",
          backgroundColor: "#F9F9FA",
          borderRadius: "8px",
        }}
      >
        <Typography
          align="left"
          sx={{ color: "#2D5FFF", padding: "20px", width: "100%" }}
          variant="body1"
        >
          گزارش اسناد و قبوض باسکول
        </Typography>

        <Grid xs={12} sx={{ padding: "10px" }}>
          <SimpleTable
            columns={[
              "ردیف",
              "نام",
              " کل بارها",
              " بارهای دارای سند",
              " بارهای بدون سند",
              "تعداد  تایید شده",
              "تعداد  دارای مغایرت",
              "درصد  تایید شده",
              "درصد  دارای مغایرت",
            ]}
            data={data?.ducKillHouseData?.map((item, i) => [
              i + 1,
              item?.name || " -",
              item?.killHouseRequest1Count.toLocaleString() || 0,
              item?.barAssigmentTrueCount.toLocaleString() || 0,
              item?.barAssigmentPendingCount.toLocaleString() || 0,
              item?.barDocumentStatusAccepted.toLocaleString() || 0,
              item?.barDocumentStatusRejected.toLocaleString() || 0,
              item?.percentBarDocumentStatusAccepted.toLocaleString() || 0,
              item?.percentBarDocumentStatusRejected.toLocaleString() || 0,
            ])}
            headerColor="#B0EFDF"
            rowColors={["#FFF", "#E6FAF5"]}
          />
        </Grid>
        <Grid
          xs={12}
          sx={{
            display: "flex",
            alignItems: "center",
          }}
        >
          <img src={warningIcon} alt="icon" width="32" height="32" />
          <Typography
            align="left"
            sx={{ color: "#EB5757", width: "100%" }}
            variant="body1"
          >
            هشدار: بیش از ۵۰٪ بارها دارای سند مشکوک یا دست‌نویس هستند.
          </Typography>
        </Grid>
        <Grid
          xs={12}
          sx={{
            display: "flex",
            alignItems: "center",
          }}
        >
          <img src={warningIcon} alt="icon" width="32" height="32" />
          <Typography
            align="left"
            sx={{ color: "#EB5757", width: "100%" }}
            variant="body1"
          >
            هشدار: تعداد اسناد مشکوک و دارای مغایرت{" "}
            {data?.barAssigmentPendingCount1?.toLocaleString() || 0} بار
            می‌باشد.
          </Typography>
        </Grid>

        <Grid container sx={{ marginTop: "10px" }}>
          {reportBillScale.map((item, index) => (
            <Grid item xs={12} md={6} key={index}>
              <Grid container sx={{ padding: "10px" }}>
                <Grid item alignItems="center" sx={{ display: "flex" }}>
                  <img
                    src={buyerPerformanceIcon}
                    alt="icon"
                    width="32"
                    height="32"
                  />
                  <Typography
                    sx={{ marginLeft: 1, fontSize: { xs: "13px", md: "16px" } }}
                  >
                    {item.title} : {item.key(data)}
                  </Typography>
                </Grid>
              </Grid>
            </Grid>
          ))}
        </Grid>
      </Grid>
    </Grid>
  );
};
