import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { Button, TextField } from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { CLOSE_MODAL, OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import { provinceGetTotalGuildsService } from "../../services/province-get-total-guilds";
import { ProvinceLegalGuildsForm } from "./ProvinceLegalGuildsForm";
import { ProvinceLegalGuildsOperations } from "./ProvinceLegalGuildsOperations";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { RiSearchLine } from "react-icons/ri";

export const ProvinceLegalGuildsInProvince = () => {
  const dispatch = useDispatch();
  const [data, setData] = useState([]);
  const [totalRows, setTotalRows] = useState(0);
  const [perPage, setPerPage] = useState(10);
  const [textValue, setTextValue] = useState("");
  const [page, setPage] = useState(1);
  const [tableData, setTableData] = useState([]);
  const [selectedDate1, setSelectedDate1] = useState(null);
  const [selectedDate2, setSelectedDate2] = useState(null);

  const handleTextChange = (e) => setTextValue(e.target.value);

  const fetchApiData = async (pageNum) => {
    const response = await dispatch(
      provinceGetTotalGuildsService({
        search: "filter",
        value: textValue,
        page: pageNum,
        page_size: perPage,
        steward: false,
        active_state: "all",
        is_real_person: false,
        ...(selectedDate1 && {
          date_from: moment(selectedDate1).format("YYYY-MM-DD"),
        }),
        ...(selectedDate2 && {
          date_to: moment(selectedDate2).format("YYYY-MM-DD"),
        }),
      })
    );

    if (response.payload.error) {
      console.error("Error fetching data:", response.payload.error);
      setData([]);
      setTotalRows(0);
    } else {
      setData(response.payload.data?.results || []);
      const count = Number(response.payload.data?.count) || 0;
      setTotalRows(count);
    }
  };

  const handlePageChange = (pageNum) => {
    fetchApiData(pageNum);
    setPage(pageNum);
  };

  const handlePerRowsChange = (perRows) => {
    setPerPage(Number(perRows));
    setPage(1);
  };

  const updateTableData = () => {
    fetchApiData(page !== 0 ? page : 1);
  };

  useEffect(() => {
    if (!data || !Array.isArray(data)) {
      setTableData([]);
      return;
    }
    const d = data.map((item, i) => {
      return [
        page === 1 ? i + 1 : i + perPage * (page - 1) + 1,
        item?.nationalId || "-",
        item?.guildsName || "-",
        `${item?.user?.fullname || "-"}`,
        item?.user?.mobile || "-",
        item?.address?.province?.name || "-",
        item?.address?.city?.name || "-",
        item?.typeActivity || "-",
        item?.active ? "فعال" : "غیر فعال",
        <ProvinceLegalGuildsOperations
          key={`operations-${item?.key || i}`}
          guild={item}
          updateTable={updateTableData}
        />,
      ];
    });
    setTableData(d);
  }, [data, page, perPage]);

  useEffect(() => {
    fetchApiData(1);
    setPage(1);
  }, [perPage]);

  useEffect(() => {
    fetchApiData(1);
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setPage(1);
    const response = await dispatch(
      provinceGetTotalGuildsService({
        search: "filter",
        value: textValue,
        page: 1,
        page_size: perPage,
        steward: false,
        active_state: "all",
        is_real_person: false,
        ...(selectedDate1 && {
          date_from: moment(selectedDate1).format("YYYY-MM-DD"),
        }),
        ...(selectedDate2 && {
          date_to: moment(selectedDate2).format("YYYY-MM-DD"),
        }),
      })
    );

    if (response.payload.error) {
      console.error("Error fetching data:", response.payload.error);
      setData([]);
      setTotalRows(0);
    } else {
      setData(response.payload.data?.results || []);
      const count = Number(response.payload.data?.count) || 0;
      setTotalRows(count);
    }
  };

  const handleOpenModal = () => {
    dispatch(
      OPEN_MODAL({
        title: "ثبت واحد حقوقی",
        content: (
          <ProvinceLegalGuildsForm
            onClose={() => dispatch(CLOSE_MODAL())}
            updateTable={updateTableData}
          />
        ),
        size: 400,
      })
    );
  };

  return (
    <Grid container gap={SPACING.SMALL} p={2}>
      <Grid
        container
        xs={12}
        justifyContent="start"
        alignItems="center"
        gap={SPACING.SMALL}
      >
        <Button variant="contained" color="primary" onClick={handleOpenModal}>
          ثبت واحد حقوقی
        </Button>

        <form onSubmit={handleSubmit}>
          <Grid container alignItems="center" gap={SPACING.SMALL}>
            <TextField
              size="small"
              autoComplete="off"
              label="جستجو"
              variant="outlined"
              style={{ width: 200 }}
              value={textValue}
              onChange={handleTextChange}
            />

            <DatePicker
              label="از تاریخ"
              value={selectedDate1}
              onChange={(newValue) => {
                setSelectedDate1(newValue);
              }}
              renderInput={(params) => (
                <TextField {...params} size="small" style={{ width: 160 }} />
              )}
            />

            <DatePicker
              label="تا تاریخ"
              value={selectedDate2}
              onChange={(newValue) => {
                setSelectedDate2(newValue);
              }}
              renderInput={(params) => (
                <TextField {...params} size="small" style={{ width: 160 }} />
              )}
            />

            <Button
              type="submit"
              onClick={handleSubmit}
              endIcon={<RiSearchLine />}
            >
              جستجو
            </Button>
          </Grid>
        </form>
      </Grid>

      <Grid item xs={12}>
        <ResponsiveTable
          title="واحدهای حقوقی"
          columns={[
            "ردیف",
            "شناسه حقوقی",
            "نام واحد",
            "نام و نام خانوادگی",
            "شماره همراه",
            "استان",
            "شهر",
            "نوع فعالیت",
            "وضعیت",
            "عملیات",
          ]}
          data={tableData}
          handlePageChange={handlePageChange}
          totalRows={totalRows}
          page={page}
          perPage={perPage}
          handlePerRowsChange={handlePerRowsChange}
        />
      </Grid>
    </Grid>
  );
};
