import { Box, Typography } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { Pie } from "react-chartjs-2";
import { StatItem } from "../dashboard-state-item/StateItem";
import { SPACING } from "../../../../data/spacing";

export const PieChartSection = ({ boxStats }) => {
  const pieChartTotal =
    (boxStats?.yesterdayKilling?.quantityKillHouseFreeBarCarcass || 0) +
    (boxStats?.yesterdayKilling?.weightKillHouseFreeBarCarcass || 0) +
    (boxStats?.yesterdayKilling?.provinceKillRequestQuantity || 0) +
    (boxStats?.yesterdayKilling?.provinceKillRequestWeight || 0) +
    (boxStats?.yesterdayKilling?.quantityKillHouseFreeBarLive || 0) +
    (boxStats?.yesterdayKilling?.weightOfCarcass || 0) +
    (boxStats?.yesterdayKilling?.losses || 0);

  const pieChartData = {
    labels: [
      "حجم خرید خارج استان",
      "وزن خرید خارج استان",
      "حجم کشتار داخل استان",
      "وزن کشتار داخل استان",
      "حجم فروش به خارج استان (زنده)",
      "وزن لاشه تولیدی",
      "درصد افت دیروز",
    ],
    datasets: [
      {
        data: [
          boxStats?.yesterdayKilling?.quantityKillHouseFreeBarCarcass || 0,
          boxStats?.yesterdayKilling?.weightKillHouseFreeBarCarcass || 0,
          boxStats?.yesterdayKilling?.provinceKillRequestQuantity || 0,
          boxStats?.yesterdayKilling?.provinceKillRequestWeight || 0,
          boxStats?.yesterdayKilling?.outQuantity || 0,
          boxStats?.yesterdayKilling?.weightOfCarcass || 0,
          boxStats?.yesterdayKilling?.losses || 0,
        ],
        backgroundColor: [
          "#FF6384",
          "#36A2EB",
          "#FFCE56",
          "#4BC0C0",
          "#9966FF",
          "#FF9F40",
          "#C9CBCF",
        ],
        hoverBackgroundColor: [
          "#FF6384",
          "#36A2EB",
          "#FFCE56",
          "#4BC0C0",
          "#9966FF",
          "#FF9F40",
          "#C9CBCF",
        ],
        borderWidth: 1,
      },
    ],
  };

  const pieChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      datalabels: {
        display: false,
      },
      tooltip: {
        enabled: true,
        callbacks: {
          label: (context) => {
            const value = context.raw;
            const total = context.dataset.data.reduce((a, b) => a + b, 0);
            if (total === 0) return "0";
            const percentage = ((value / total) * 100).toFixed(2);
            return `${value.toLocaleString()} (${percentage}%)`;
          },
        },
      },
      legend: {
        display: false,
      },
    },
  };

  return (
    <Box
      sx={{
        flex: "1 1 20%",
        width: "100%",
        borderRadius: 2,
        border: "1px solid",
        borderColor: "divider",
        p: SPACING.MEDIUM,
        boxSizing: "border-box",
        display: "flex",
        flexDirection: "column",
        justifyContent: "flex-start",
      }}
    >
      <Typography
        textAlign="start"
        variant="subtitle1"
        color="text.primary"
        sx={{ mb: 2, fontWeight: 600, fontSize: "1rem" }}
      >
        آمار روز گذشته کشتار مرغ گوشتی استان
      </Typography>

      <Box
        sx={{
          height: "240px",
          width: "100%",
          mb: 2,
        }}
      >
        {pieChartTotal > 0 ? (
          <Pie
            data={pieChartData}
            options={pieChartOptions}
            style={{ height: "100%", width: "100%" }}
          />
        ) : (
          <Box
            sx={{
              display: "flex",
              height: "100%",
              width: "100%",
              alignItems: "center",
              justifyContent: "center",
              fontSize: "0.9rem",
              color: "text.primary",
              textAlign: "center",
            }}
          >
            داده‌ای برای نمایش چارت موجود نیست.
          </Box>
        )}
      </Box>

      <Grid
        container
        spacing={1}
        sx={{
          fontSize: "1.5rem",
          position: "relative",
        }}
      >
        <Box
          sx={{
            position: "absolute",
            left: "50%",
            top: 0,
            bottom: 0,
            width: "1px",
            backgroundColor: "divider",
            zIndex: 1,
          }}
        />

        <Grid item xs={6}>
          <StatItem
            title="وزن خرید خارج استان"
            value={boxStats?.yesterdayKilling?.weightKillHouseFreeBarLive || 0}
            unit="کیلو گرم"
            color="primary"
            small
          />
        </Grid>
        <Grid item xs={6}>
          <StatItem
            title="وزن کشتار داخل استان"
            value={boxStats?.yesterdayKilling?.provinceKillRequestWeight || 0}
            unit="کیلو گرم"
            color="primary"
            small
          />
        </Grid>
        <Grid item xs={6}>
          <StatItem
            title="حجم فروش به خارج استان (زنده)"
            value={
              boxStats?.yesterdayKilling?.quantityKillHouseFreeBarLive || 0
            }
            color="primary"
            small
          />
        </Grid>
        <Grid item xs={6}>
          <StatItem
            title="وزن لاشه تولیدی"
            value={boxStats?.yesterdayKilling?.weightOfCarcass || 0}
            unit="کیلو گرم"
            color="primary"
            small
          />
        </Grid>
        <Grid item xs={6}>
          <StatItem
            title="درصد افت دیروز"
            value={
              boxStats?.yesterdayKilling?.losses
                ? `${boxStats.yesterdayKilling.losses}%`
                : "0%"
            }
            color="primary"
            small
          />
        </Grid>
      </Grid>
    </Box>
  );
};
