import {
  Box,
  Typography,
  Avatar,
  Card,
  CardHeader,
  CardContent,
} from "@mui/material";
import {
  LocalShipping,
  Scale,
  Numbers,
  TrendingUp,
  FitnessCenter,
} from "@mui/icons-material";
import { SPACING } from "../../../../data/spacing";
import { Grid } from "../../../../components/grid/Grid";

export const DashboardLivePurchase = ({ boxStats }) => {
  const livePurchaseStats = [
    {
      title: "تعداد بار زنده",
      value: boxStats?.freeLiveBar?.count?.toLocaleString() || "0",
      icon: <Numbers color="inherit" fontSize="small" />,
    },
    {
      title: "حجم بار زنده",
      value: `${boxStats?.freeLiveBar?.quantity?.toLocaleString() || "0"} قطعه`,
      icon: <LocalShipping color="inherit" fontSize="small" />,
    },
    {
      title: "وزن بار زنده",
      value: `${
        boxStats?.freeLiveBar?.weight?.toLocaleString() || "0"
      } کیلوگرم`,
      icon: <Scale color="inherit" fontSize="small" />,
    },
    {
      title: "وزن لاشه بار",
      value: `${
        boxStats?.freeLiveBar?.weightCarcass?.toLocaleString() || "0"
      } کیلوگرم`,
      icon: <FitnessCenter color="inherit" fontSize="small" />,
    },
    {
      title: "میانگین وزن",
      value: `${
        boxStats?.freeLiveBar?.avgWeight?.toLocaleString() || "0"
      } کیلوگرم`,
      icon: <TrendingUp color="inherit" fontSize="small" />,
    },
  ];

  return (
    <Box
      sx={{
        flex: "1 1 79%",
        minWidth: { xs: "100%", sm: "79%" },
        maxWidth: { xs: "100%", md: "79%" },
        borderRadius: 2,
        border: "1px solid",
        borderColor: "divider",
        p: SPACING.MEDIUM,
        pt: 4,
        display: "flex",
        flexDirection: "column",
        boxSizing: "border-box",
        textAlign: "left",
      }}
    >
      <Typography
        variant="h6"
        color="text.primary"
        sx={{ mb: 2, display: "flex", alignItems: "center" }}
      >
        خرید زنده خارج از استان
      </Typography>

      <Grid
        container
        spacing={2}
        sx={{
          flex: 1,
          pr: 1,
          alignContent: "center",
        }}
      >
        {livePurchaseStats.map((stat, index) => (
          <Grid
            item
            key={index}
            xs={12}
            sm={6}
            md={12}
            lg={6}
            xl={4}
            mt={2}
            sx={{
              display: "flex",
              minHeight: "120px",
            }}
          >
            <Card
              sx={{
                flex: 1,
                borderTop: `4px solid ${stat.color}`,
                position: "relative",
                overflow: "visible",
                display: "flex",
                flexDirection: "column",
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  justifyContent: "center",
                  width: "100%",
                }}
              >
                <Avatar
                  sx={{
                    bgcolor: stat.color,
                    position: "absolute",
                    top: -20,
                    width: 40,
                    height: 40,
                    boxShadow: 2,
                  }}
                >
                  {stat.icon}
                </Avatar>
              </Box>
              <CardHeader sx={{ pt: 4, pb: 0 }} />
              <CardContent
                sx={{
                  flexGrow: 1,
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  textAlign: "center",
                }}
              >
                <Typography variant="subtitle2" color="text.secondary">
                  {stat.title}
                </Typography>
                <Typography variant="h6" sx={{ mt: 1 }}>
                  {stat.value}
                </Typography>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};
