import { Box, TextField, Typography } from "@mui/material";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { BackButton } from "../components/back-button/BackButton";
import { useContext, useState } from "react";
import { AppContext } from "../contexts/AppContext";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment";
import axios from "axios";
import { getRoleFromUrl } from "../utils/getRoleFromUrl";
import { useSelector } from "react-redux";
import { RiFileExcel2Fill, RiTicket2Line } from "react-icons/ri";
import { ImFilePdf } from "react-icons/im";

import { motion } from "framer-motion";

const ProvinceRequests = () => {
  const [, , selectedDate1, setSelectedDate1, selectedDate2, setSelectedDate2] =
    useContext(AppContext);
  useContext(AppContext);
  const [openNotif] = useContext(AppContext);

  const authToken = useSelector((state) => state.userSlice.authToken);
  const userInfo = useSelector((state) => state.userSlice);
  const [textValue, setTextValue] = useState("");

  const handleDownload = (link, isTicket = false) => {
    if (!isTicket) {
      openNotif({
        vertical: "top",
        horizontal: "center",
        msg: "فایل در حال دانلود می باشد، این عملیات ممکن است زمان بر باشد لطفا صبر کنید.",
        severity: "success",
      });
      window.location.href = link;
    }
  };

  const handleTicketClick = async (link) => {
    try {
      const response = await axios.get(link);
      if (response.status === 200) {
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: "تیکت با موفقیت ارسال شد",
          severity: "success",
        });
      }
    } catch (error) {
      openNotif({
        vertical: "top",
        horizontal: "center",
        msg: "خطا در ارسال تیکت",
        severity: "error",
      });
    }
  };

  const reportList = [
    {
      title: "گزارش تحلیلی",
      description: "گزارش تحلیلی از زنجیره مرغ گوشتی در استان",
      link: `${axios.defaults.baseURL}management_all_poultry_and_warehouse_pdf/?date1=${selectedDate1}&date2=${selectedDate2}`,
      icon: <ImFilePdf size={24} color="red" />,
    },
    {
      title: "تیکت وضعیت سند بار ها",
      description: "تیکت وضعیت سند بار ها",
      link: `${axios.defaults.baseURL}send_bar_info_from_ticket/?key=${userInfo?.userProfile?.key}&date1=${selectedDate1}&date2=${selectedDate2}`,
      icon: <RiTicket2Line size={24} color="#FFFFFF" />,
      isTicket: true,
    },
    {
      title: "مغایرت قرنطینه",
      description: "مغایرت قرنطینه",
      link: `${axios.defaults.baseURL}send_clearance_code_to_rsi/?date1=${selectedDate1}&date2=${selectedDate2}`,
    },
    {
      title: "گزارش جامع کشتار",
      description: "اطلاعات کلی از کشتار تا صنف",
      link: `${
        axios.defaults.baseURL
      }detail_of_killing_excel/?date1=${selectedDate1}&date2=${selectedDate2}&role=${getRoleFromUrl()}&key=${
        userInfo?.userProfile?.key
      }`,
    },
    {
      title: "گزارش پایش کشتارگاه ها",
      description: "پایش کلی کشتارگاه ها",
      link: `${axios.defaults.baseURL}comprehensive_report_of_the_slaughterhouse_excel/?date1=${selectedDate1}&date2=${selectedDate2}`,
    },
    {
      title: "اطلاعات بارها",
      description: "جزئیات بارهای ایجاد شده",
      link: `${
        axios.defaults.baseURL
      }bar_excel/?start=${selectedDate1}&end=${selectedDate2}&key=${
        userInfo?.userProfile?.key
      }&role=${getRoleFromUrl()}`,
    },
    {
      title: "گزارش پایش تعاونی ها",
      description: "جزئیات جوجه ریزی و کشتار تعاونی ها",
      link: `${
        axios.defaults.baseURL
      }general_city_operator/?date1=${selectedDate1}&date2=${selectedDate2}&key=${
        userInfo?.userProfile?.key
      }&role=${getRoleFromUrl()}`,
    },
    {
      title: "گزارش کلی خریداران",
      description: "گزارش تخصیص و پخش خریداران",
      link: `${axios.defaults.baseURL}kill_house_user_excel/?date1=${selectedDate1}&date2=${selectedDate2}`,
    },

    {
      title: "درخواست مرغداران",
      description: "درخواست های کتشار ثبت شده توسط مرغداران",
      link: `${
        axios.defaults.baseURL
      }poultry_kill_request_excel/?start=${selectedDate1}&end=${selectedDate1}&role=${getRoleFromUrl()}&token=${authToken}`,
    },
    {
      title: "اعلام نیاز خریداران",
      description: "اعلام نیاز کشتار از طرف خریداران",
      link: `${axios.defaults.baseURL}kill_house_excel/?start=${selectedDate1}&end=${selectedDate2}`,
    },
    {
      title: "جوجه ریزی های فعال",
      description: "اطلاعات تکمیلی جوجه ریزی",
      link: `${axios.defaults.baseURL}0/hatching_excel`,
    },
    {
      title: "جوجه ریزی های بایگانی شده",
      description: "اطلاعات تکمیلی جوجه ریزی",
      link: `${axios.defaults.baseURL}archive_hatching_excel/?key=${userInfo?.userProfile?.key}`,
    },
    {
      title: "درخواست های کشتار",
      description: "جزئیات درخواست مرغداران تا تحویلی کشتارگاه",
      link: `${axios.defaults.baseURL}poultry_request_report_excel/?start=${selectedDate1}&end=${selectedDate2}&key=${userInfo?.userProfile?.key}`,
    },
    {
      title: "اصناف",
      description: "اطلاعات اصناف ثبت شده",
      link: `${axios.defaults.baseURL}guilds_excel/?key=${userInfo?.userProfile?.key}`,
    },
    {
      title: "کاربران",
      description: "اطلاعات کاربران ثبت شده",
      link: `${axios.defaults.baseURL}get_all_user_excel/`,
    },
    {
      title: "تخصیصات",
      description: "جزئیات تخصیص به خریداران",
      link: `${axios.defaults.baseURL}allocated_excel/?start=${selectedDate1}&end=${selectedDate2}`,
    },
    {
      title: "گزارش پخش روزانه",
      description: "کشتارگاه به مباشر/صنف",
      link: `${axios.defaults.baseURL}all_inventory_excel/?date1=${selectedDate1}&date2=${selectedDate2}`,
    },
    {
      title: "گزارش پخش روزانه",
      description: "مباشر به صنف",
      link: `${axios.defaults.baseURL}steward_ware_house_total_report_daily_excel/?date1=${selectedDate1}&date2=${selectedDate2}`,
    },
    {
      title: "آمار جوجه ریزی",
      description: "جزئیات جوجه ریزی",
      link: `${axios.defaults.baseURL}hatching_date_range_excel/?date1=${selectedDate1}&date2=${selectedDate2}`,
    },
    {
      title: "بارهای تکمیل شده",
      description: "جزئیات بارهای تکمیل شده",
      link: `${axios.defaults.baseURL}bar-management-kill-house-excel/?key=${userInfo?.userProfile?.key}&date1=${selectedDate1}&date2=${selectedDate2}`,
    },
  ];

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <Box display="flex" justifyContent="center" alignItems="center">
        <Grid container direction="column" xs={12} sm={12} md={10} lg={10}>
          <BackButton />

          <Grid
            container
            alignItems="center"
            gap={SPACING.SMALL}
            sx={{ color: "#727272" }}
            px={2}
          >
            <Grid
              xs={12}
              container
              mt={1}
              alignItems="center"
              spacing={1}
              mb={SPACING.SMALL}
            >
              <Grid>
                <Typography sx={{ fontSize: "14px", color: "black" }}>
                  تاریخ گزارش:
                </Typography>
              </Grid>

              <Grid
                container
                direction={"row"}
                mr={1}
                mt={{ xs: 2, md: 0 }}
                mb={{ xs: 1, md: 0 }}
              >
                <DatePicker
                  label="از تاریخ"
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      style={{ width: "160px" }}
                      size="small"
                    />
                  )}
                  value={selectedDate1}
                  onChange={(newValue) => {
                    setSelectedDate1(moment(newValue).format("YYYY-MM-DD"));
                  }}
                />
                <Grid mx={0.5}></Grid>
                <DatePicker
                  label="تا تاریخ"
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      style={{ width: "160px" }}
                      size="small"
                    />
                  )}
                  value={selectedDate2}
                  onChange={(newValue) => {
                    setSelectedDate2(moment(newValue).format("YYYY-MM-DD"));
                  }}
                />
              </Grid>
              <Grid>
                <TextField
                  sx={{ minWidth: "250px" }}
                  id="outlined-basic"
                  size="small"
                  label="جستجو"
                  variant="outlined"
                  value={textValue}
                  onChange={(e) => {
                    setTextValue(e.target.value);
                  }}
                />
              </Grid>
            </Grid>
          </Grid>

          <Grid
            container
            xs={12}
            rowSpacing={SPACING.SMALL}
            justifyContent="center"
            mb={2}
            px={1}
          >
            {reportList
              ?.filter((option) => option?.title.includes(textValue))
              ?.map((item, i) => (
                <Grid item xs={6} sm={4} md={4} lg={2} key={i} px={1}>
                  <a
                    style={{ outline: "none", color: "#727272" }}
                    href={!item.isTicket ? item?.link : "#"}
                    rel="noreferrer"
                    onClick={(e) => {
                      if (item.isTicket) {
                        e.preventDefault();
                        handleTicketClick(item.link);
                      } else {
                        e.preventDefault();
                        handleDownload(item.link, item.isTicket);
                      }
                    }}
                  >
                    <motion.div
                      whileHover={{ scale: 1.05 }}
                      whileTap={{ scale: 0.9 }}
                    >
                      <Box
                        p={SPACING.MEDIUM}
                        border="1px solid #E6E6E6"
                        borderRadius={SPACING.SMALL}
                        bgcolor="#FCFCFC"
                        display="flex"
                        flexDirection="column"
                        alignItems="center"
                        sx={{ cursor: "pointer" }}
                        minHeight="11rem"
                        maxHeight="11rem"
                      >
                        <Box
                          sx={{
                            width: 60,
                            minWidth: 60,
                            height: 60,
                            minHeight: 60,
                            borderRadius: "50%",
                            backgroundColor: "#244CCC",
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "center",
                            marginBottom: SPACING.SMALL,
                          }}
                        >
                          {item.icon || (
                            <RiFileExcel2Fill size={24} color="#FFFFFF" />
                          )}
                        </Box>
                        <Typography
                          variant="body1"
                          mt={SPACING.SMALL}
                          sx={{
                            color: "#727272",
                            fontWeight: { xs: 500, md: 600 },
                            fontSize: { xs: "12px", md: "16px" },
                          }}
                        >
                          {item?.title}
                        </Typography>
                        <Typography
                          mt={SPACING.SMALL}
                          sx={{ color: "#727272", fontSize: "10px" }}
                        >
                          {item?.description}
                        </Typography>
                      </Box>
                    </motion.div>
                  </a>
                </Grid>
              ))}
          </Grid>
        </Grid>
      </Box>
    </motion.div>
  );
};

export default ProvinceRequests;