import React, { useContext, useEffect, useState, useCallback } from "react";
import { Grid } from "../../../../components/grid/Grid";
import {
  Autocomplete,
  Button,
  FormControl,
  FormControlLabel,
  Radio,
  RadioGroup,
  TextField,
  Typography,
} from "@mui/material";
import { useDispatch } from "react-redux";
import { slaughterGetProductsService } from "../../services/slaughter-inventory-gets";
import { NumberInput } from "../../../../components/number-format-custom/NumberFormatCustom";
import { useFormik } from "formik";
import { Yup } from "../../../../lib/yup/yup";
import {
  slaughterAllocateStewardService,
  slaughterEditAllocateStewardService,
} from "../../services/slaughter-allocate-steward";
import { AppContext } from "../../../../contexts/AppContext";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";
import { liveStockGetInventoryData } from "../../../live-stock-support/services/live-stock-get-inventory-data";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment";
import { fetchSlaughterBroadcastAndProducts } from "../../services/handle-fetch-slaughter-products";
import MonthlyDataCalendar from "../../../../components/date-picker/MonthlyDataCalendar";
import PersianDate from "persian-date";
import axios from "axios";
import { LabelField } from "../../../../components/label-field/LabelField";

export const SlaughterAllocateForFreezing = ({
  sellerType,
  fetchData, // eslint-disable-line no-unused-vars
  sellType,
  updateTable,
  fetchApiData,
  editData,
  priceInfo, // eslint-disable-line no-unused-vars
  remainWeight,
}) => {
  const dispatch = useDispatch();
  const [productData, setProductData] = useState([]);
  const [productKey, setProductKey] = useState(null);
  const [coldHouseData, setColdHouseData] = useState([]);
  const [coldHouseKey, setColdHouseKey] = useState(null);
  const [selectedInventory, setSelectedInventory] = useState("governmental");
  const [approvedStatus, setApprovedStatus] = useState(
    priceInfo?.active === false ? false : true
  );

  const [openNotif] = useContext(AppContext);

  // Calendar states
  const [selectedCalendarDate, setSelectedCalendarDate] = useState(null);
  const [calendarDayData, setCalendarDayData] = useState({});
  const [productionDate, setProductionDate] = useState(null);
  const [selectedDateAmount, setSelectedDateAmount] = useState(null);
  const [calendarRawData, setCalendarRawData] = useState({
    governmental: [],
    free: [],
  });

  // Calendar functions - Define BEFORE useEffect
  // Transform calendar data from array format to object format
  // Input: [{day: "2025-10-10", amount: 100}]
  // Output: {"1404/07/19": {value1: 100, originalDay: "2025-10-10"}}
  const transformCalendarData = useCallback((dataArray) => {
    if (!Array.isArray(dataArray)) return {};

    const transformedData = {};
    dataArray.forEach((item) => {
      if (item.day && item.amount !== undefined) {
        // Convert Gregorian date to Persian date
        const persianDate = new PersianDate(new Date(item.day));
        const persianDateStr = persianDate.format("YYYY/MM/DD");
        // Calendar expects 'value1' property, also store the original day
        transformedData[persianDateStr] = {
          value1: item.amount,
          originalDay: item.day, // Store the original Gregorian date
          active: item.active === true, // Store active status
        };
      }
    });
    return transformedData;
  }, []);

  // Function to update calendar data from API response
  const updateCalendarData = useCallback(
    (dataArray) => {
      const transformed = transformCalendarData(dataArray);
      setCalendarDayData(transformed);
    },
    [transformCalendarData]
  );

  // Fetch calendar data from API
  const fetchCalendarData = useCallback(
    async (dateParam) => {
      try {
        const response = await axios.get("/kill-house-remain-weight/", {
          params: {
            date: dateParam,
          },
        });
        if (response.data) {
          setCalendarRawData({
            governmental: response.data.governmental || [],
            free: response.data.free || [],
          });
          // Update calendar based on current inventory type
          const dataToShow =
            selectedInventory === "governmental"
              ? response.data.governmental
              : response.data.free;
          updateCalendarData(dataToShow);
        }
      } catch (error) {
        console.error("Error fetching calendar data:", error);
      }
    },
    [selectedInventory, updateCalendarData]
  );

  const handleDateSelect = (dateInfo) => {
    if (dateInfo && dateInfo.formattedDate) {
      setSelectedCalendarDate(dateInfo.formattedDate);

      // Get the data for the selected date
      const data = calendarDayData[dateInfo.formattedDate];

      // Use the original Gregorian date from the API data for production_date
      if (data && data.originalDay) {
        const selectedOriginalDay = data.originalDay;
        // Prevent choosing a production date after the main form date
        if (
          selectedDate1 &&
          moment(selectedOriginalDay).isAfter(moment(selectedDate1), "day")
        ) {
          setCalendarDateError(
            "تاریخ تولید نمی‌تواند بعد از تاریخ انتخابی باشد"
          );
          return;
        }
        setCalendarDateError(null);
        setProductionDate(selectedOriginalDay);
      }

      // Get the amount for the selected date
      if (data && data.value1 !== undefined) {
        setSelectedDateAmount(data.value1);
      } else {
        setSelectedDateAmount(null);
      }
    }
  };

  const getValidationSchema = useCallback(
    () =>
      Yup.object({
        weight: Yup.number()
          .required("این فیلد اجباری است!")
          .integer("عدد باید صحیح باشد!")
          .min(1, "یک مقدار مثبت وارد کنید!")
          .max(
            remainWeight + (editData?.realWeightOfCarcasses || 0),
            "وزن وارد شده بیش از موجودی انبار است!"
          )
          .test(
            "max-production-date-amount",
            `وزن نمی‌تواند بیشتر از موجودی تاریخ تولید (${
              selectedDateAmount?.toLocaleString() || 0
            } کیلوگرم) باشد!`,
            function (value) {
              if (!selectedDateAmount || selectedDateAmount === null)
                return true;
              return value <= selectedDateAmount;
            }
          ),
      }),
    [remainWeight, editData, selectedDateAmount]
  );

  const validationSchema = getValidationSchema();
  const [selectedDate1, setSelectedDate1] = useState(
    moment(new Date()).format("YYYY-MM-DD")
  );
  const [dateRangeError, setDateRangeError] = useState(null);
  const [calendarDateError, setCalendarDateError] = useState(null);

  const formik = useFormik({
    initialValues: {
      weight: editData?.realWeightOfCarcasses || "",
    },
    validationSchema,
  });

  const successSubmit = () => {
    dispatch(CLOSE_MODAL());
    openNotif({
      vertical: "top",
      horizontal: "center",
      msg: "عملیات با موفقیت انجام شد.",
      severity: "success",
    });
    dispatch(fetchSlaughterBroadcastAndProducts());
    fetchApiData();
    updateTable();
  };

  const handleSellType = (event) => {
    const newType = event.target.value;
    setSelectedInventory(newType);
  };

  const handleApprovedPrice = (event) => {
    const newType = event.target.value;
    setApprovedStatus(newType);
  };

  useEffect(() => {
    if (!editData) {
      dispatch(slaughterGetProductsService()).then((r) => {
        setProductData(r.payload.data);
      });

      dispatch(liveStockGetInventoryData()).then((r) => {
        setColdHouseData(r.payload.data);
      });
    }
    // Fetch calendar data on mount with initial date
    fetchCalendarData(selectedDate1);
  }, [dispatch, editData, fetchCalendarData, selectedDate1]);

  // Refetch calendar data when selected date changes
  useEffect(() => {
    fetchCalendarData(selectedDate1);
  }, [selectedDate1, fetchCalendarData]);

  // Update calendar when inventory type changes
  useEffect(() => {
    if (
      calendarRawData.governmental.length > 0 ||
      calendarRawData.free.length > 0
    ) {
      const dataToShow =
        selectedInventory === "governmental"
          ? calendarRawData.governmental
          : calendarRawData.free;
      updateCalendarData(dataToShow);
      // Reset selected date when inventory type changes
      setSelectedCalendarDate(null);
      setProductionDate(null);
      setSelectedDateAmount(null);
    }
  }, [selectedInventory, calendarRawData, updateCalendarData]);

  useEffect(() => {
    formik.validateForm();
  }, [selectedDateAmount]);

  return (
    <Grid
      container
      xs={12}
      direction="column"
      justifyContent="center"
      alignItems="center"
      gap={1}
    >
      {!editData && (
        <DatePicker
          label="تاریخ"
          id="date"
          renderInput={(params) => (
            <TextField
              fullWidth
              {...params}
              error={Boolean(dateRangeError) || params.error}
              helperText={dateRangeError || params.helperText}
            />
          )}
          shouldDisableDate={(date) => {
            const d = moment(date);
            const today = moment();
            const yesterday = moment().subtract(1, "day");
            return !(d.isSame(today, "day") || d.isSame(yesterday, "day"));
          }}
          value={selectedDate1}
          onChange={(e) => {
            if (!e) {
              setDateRangeError(null);
              return;
            }
            const d = moment(e);
            const today = moment();
            const yesterday = moment().subtract(1, "day");
            const isAllowed =
              d.isSame(today, "day") || d.isSame(yesterday, "day");
            if (!isAllowed) {
              setDateRangeError(
                "تنها امکان انتخاب «امروز» یا «دیروز» وجود دارد."
              );
              return;
            }
            setDateRangeError(null);
            const formatted = moment(e).format("YYYY-MM-DD");
            setSelectedDate1(formatted);
            fetchCalendarData(formatted);
          }}
        />
      )}
      {!editData && (
        <Grid xs={12} container>
          <Autocomplete
            fullWidth
            style={{ minWidth: 210 }}
            disablePortal
            id="hatching"
            options={
              productData
                ? productData.map((i) => {
                    return {
                      data: i,
                      label: `${i.name}`,
                    };
                  })
                : []
            }
            onChange={(event, value) => {
              setProductKey(value.data);
            }}
            renderInput={(params) => (
              <TextField fullWidth {...params} label="انتخاب محصول" />
            )}
          />
        </Grid>
      )}

      {!editData && (
        <Grid xs={12} container>
          <Autocomplete
            fullWidth
            style={{ minWidth: 210 }}
            disablePortal
            id="hatching"
            options={
              coldHouseData
                ? coldHouseData.map((i) => {
                    return {
                      data: i,
                      label: `${i.name}`,
                    };
                  })
                : []
            }
            onChange={(event, value) => {
              setColdHouseKey(value.data?.key);
            }}
            renderInput={(params) => (
              <TextField fullWidth {...params} label="انتخاب سردخانه" />
            )}
          />
        </Grid>
      )}

      {!editData && priceInfo?.active && (
        <FormControl>
          <RadioGroup
            row
            aria-labelledby="segment-type-radio-group"
            name="segmentType"
            value={approvedStatus}
            onChange={handleApprovedPrice}
          >
            <FormControlLabel
              value={true}
              control={<Radio />}
              label="قیمت دولتی"
            />
            <FormControlLabel
              value={false}
              control={<Radio />}
              label="قیمت آزاد"
            />
          </RadioGroup>
        </FormControl>
      )}

      {!editData && (
        <Grid my={1} xs={12}>
          <LabelField label="نوع انبار">
            <FormControl>
              <RadioGroup
                row
                aria-labelledby="segment-type-radio-group"
                name="segmentType"
                value={selectedInventory}
                onChange={handleSellType}
              >
                <FormControlLabel
                  value="governmental"
                  control={<Radio />}
                  label="دولتی"
                />
                <FormControlLabel
                  value="free"
                  control={<Radio />}
                  label="آزاد"
                />
              </RadioGroup>
            </FormControl>
          </LabelField>
        </Grid>
      )}

      {!editData && (
        <Grid
          style={{ width: "100%" }}
          container
          xs={12}
          lg={3}
          justifyContent="center"
          alignItems="center"
          mb={3}
          mt={2}
          gap={1}
        >
          <MonthlyDataCalendar
            onDateSelect={handleDateSelect}
            dayData={calendarDayData}
            selectedDate={selectedCalendarDate}
            maxGregorianDate={selectedDate1}
            label={`تاریخ تولید گوشت ${
              selectedDateAmount !== null
                ? `(موجودی: ${selectedDateAmount?.toLocaleString()} کیلوگرم)`
                : ""
            }`}
          />
          {calendarDateError && (
            <Typography
              sx={{
                color: "#d32f2f",
                fontSize: "0.75rem",
                marginTop: "4px",
                marginRight: "14px",
                textAlign: "right",
              }}
            >
              {calendarDateError}
            </Typography>
          )}
        </Grid>
      )}

      <NumberInput
        allowLeadingZeros
        thousandSeparator=","
        decimalScale={0}
        allowNegative={false}
        fullWidth
        id="weight"
        disabled={remainWeight < 1}
        label="وزن لاشه"
        variant="outlined"
        value={formik.values.weight}
        error={
          remainWeight < 1
            ? true
            : formik.touched.weight
            ? Boolean(formik.errors.weight)
            : selectedDateAmount && formik.values.weight > selectedDateAmount
        }
        onChange={(e) => {
          const value = e.target.value;
          if (value === "" || value === null || value === undefined) {
            formik.setFieldValue("weight", "");
            return;
          }
          const intValue = Math.floor(Number(value));
          if (intValue > 0) {
            formik.setFieldValue("weight", intValue);
          } else if (intValue === 0) {
            formik.setFieldValue("weight", "");
          }
        }}
        onBlur={formik.handleBlur}
        helperText={
          remainWeight < 1
            ? "موجودی انبار خالی است!"
            : selectedDateAmount && formik.values.weight > selectedDateAmount
            ? `وزن نمی‌تواند بیشتر از موجودی تاریخ تولید (${selectedDateAmount?.toLocaleString()} کیلوگرم) باشد!`
            : formik.touched.weight && Boolean(formik.errors.weight)
            ? formik.errors.weight
            : null
        }
      />

      <Button
        variant="contained"
        fullWidth
        disabled={
          editData
            ? !formik.isValid
            : !formik.isValid ||
              !productKey ||
              !coldHouseKey ||
              !productionDate ||
              (selectedDateAmount &&
                formik.values.weight > selectedDateAmount) ||
              (productionDate &&
                selectedDate1 &&
                moment(productionDate).isAfter(moment(selectedDate1), "day"))
        }
        onClick={() => {
          let req = {};
          if (!editData) {
            req = {
              seller_type: sellerType,
              product_key: productKey.key,
              type: "manual",
              number_of_carcasses: 0,
              weight_of_carcasses: formik.values.weight,
              approved_price_status: approvedStatus === "true" ? true : false,
              quota: selectedInventory,
              sell_type: sellType,
              buyer_type: "ColdHouse",
              cold_house_key: coldHouseKey,
              allocation_type: "ColdHouse",
              date: selectedDate1,
              production_date: productionDate,
              distribution_type: "web",
            };
          } else {
            req = {
              weight_of_carcasses: formik.values.weight,
              allocation_key: editData?.key,
              distribution_type: "web",
            };
          }

          if (!editData) {
            dispatch(slaughterAllocateStewardService(req)).then((r) => {
              if (r.payload.error) {
                openNotif({
                  vertical: "top",
                  horizontal: "center",
                  msg: r.payload.error,
                  severity: "error",
                });
              } else {
                successSubmit();
              }
            });
          } else {
            dispatch(slaughterEditAllocateStewardService(req)).then((r) => {
              if (r.payload.error) {
                openNotif({
                  vertical: "top",
                  horizontal: "center",
                  msg: r.payload.error,
                  severity: "error",
                });
              } else {
                successSubmit();
              }
            });
          }
        }}
      >
        ثبت
      </Button>
    </Grid>
  );
};
