import {
  Button,
  DatePicker,
  Drawer,
  Dropdown,
  Form,
  Input,
  Menu,
  message,
  Modal,
  Select,
  Table,
  Tooltip,
  Typography,
} from "antd";
import React, { useEffect, useRef, useState } from "react";
import tagIcon from "../../assets/tagIcon.svg";
import {
  CheckCircleOutlined,
  CloseOutlined,
  DeleteOutlined,
  DollarOutlined,
  EditOutlined,
  EllipsisOutlined,
  InfoCircleOutlined,
  PlusOutlined,
  QuestionCircleOutlined,
  SearchOutlined,
} from "@ant-design/icons";
import { theme } from "antd";
import { useAccountingData } from "../../Hooks/Accounting";
import moment from "moment";
import api from "../../API/api";
import dayjs from "dayjs";
import { useTeamData } from "../../Hooks/Teams";

type Employee = {
  id: number;
  full_name: string;
  username: string;
};

type BonusData = {
  employee: Employee;
  charges: any[];
  total: number;
};

interface BonusesTableProps {
  bonusesData: BonusData[];
}

const AccountingCurrent: React.FC = () => {
  const themes = localStorage.getItem("theme") === "true" ? true : false;

  const [open, setOpen] = useState(false);
  const [selectedUser, setSelectedUser] = useState<any>(null);

  const currentDate = new Date();
  currentDate.setMonth(currentDate.getMonth() - 1);

  const previousMonth = currentDate.toLocaleString("default", {
    month: "long",
  });

  const lastMonth = moment().subtract(1, "months").month();
  const lastMonthYear = moment().subtract(1, "months").year();
  const lastMonthDefault = dayjs().subtract(1, "month");
  const today = moment().endOf("day");

  const disabledDate = (current: any) => {
    return (
      current &&
      (current.month() !== lastMonth ||
        current.year() !== lastMonthYear ||
        current > today)
    );
  };

  const [form] = Form.useForm();
  const [selectedUserId, setSelectedUserId] = useState(null);
  const [selectedDate, setSelectedDate] = useState<moment.Moment | null>(null);

  const [isBonusModalVisible, setIsBonusModalVisible] = useState(false);
  const [isChargeModalVisible, setIsChargeModalVisible] = useState(false);

  const [bonusesData, setBonusesData] = useState<BonusesTableProps[]>([]);
  const [chargesData, setChargesData] = useState([]);

  const [search, setSearch] = useState<string>("");
  const [team, setTeam] = useState<any>("");

  const showBonusModal = (userId: any) => {
    setSelectedUserId(userId); // Tanlangan user_id ni saqlash
    setIsBonusModalVisible(true);
  };

  const showChargeModal = (userId: any) => {
    setIsChargeModalVisible(true);
    setSelectedUserId(userId);
  };

  const handleCancel = () => {
    setIsBonusModalVisible(false);
    setIsChargeModalVisible(false);
  };

  const { data, refetch, isLoading } = useAccountingData({
    month: "last",
    search: search,
    team: team,
  });

  const handleDateChange = (date: any) => {
    setSelectedDate(date);
    form.setFieldsValue({ date });
  };

  const handleOkCharge = () => {
    form
      .validateFields()
      .then((values) => {
        const { date, amount, notes } = values;

        if (selectedUserId) {
          api
            .post(`/add-charge/${selectedUserId}/`, {
              date: date ? date.toISOString().split("T")[0] : null,
              amount: amount,
              reason: notes,
            })
            .then((response) => {
              message.success(response.data.message);
              setIsChargeModalVisible(false);
              form.resetFields();
              refetch();
            })
            .catch((error) => {
              console.error("API error:", error);
            });
        }
      })
      .catch((info) => {
        console.log("Validate Failed:", info);
      });
  };
  const handleOkBonus = () => {
    form
      .validateFields()
      .then((values) => {
        const { date, amount, notes } = values;

        if (selectedUserId) {
          api
            .post(`/add-bonus/${selectedUserId}/`, {
              date: date ? date.toISOString().split("T")[0] : null,
              amount: amount,
              reason: notes,
            })
            .then((response) => {
              message.success(response.data.message);
              setIsBonusModalVisible(false);
              form.resetFields();
              refetch();
            })
            .catch((error) => {
              console.error("API error:", error);
            });
        }
      })
      .catch((info) => {
        console.log("Validate Failed:", info);
      });
  };

  const menu = (userId: any) => (
    <Menu>
      <Menu.Item key="1" onClick={() => showBonusModal(userId)}>
        <PlusOutlined /> Add Bonus
      </Menu.Item>
      <Menu.Item key="2" onClick={() => showChargeModal(userId)}>
        <PlusOutlined /> Add Charge
      </Menu.Item>
    </Menu>
  );

  useEffect(() => {
    if (isBonusModalVisible || isChargeModalVisible) {
      setOpen(false);
    }
  }, [isBonusModalVisible, isChargeModalVisible]);

  const handleRowClick = (record: any, e: React.MouseEvent<HTMLElement>) => {
    setSelectedUser(record);

    const target = e.target as HTMLElement;

    const employee_id = record.employee_id;
    const apiUrl = `/bonuses/${employee_id}`;
    const chargeUrl = `/charges/${employee_id}`;

    const params = {
      month: "last",
    };

    api
      .get(apiUrl, { params })
      .then((response) => {
        const formattedData = response.data.bonuses.map(
          (bonus: any, index: any) => ({
            no: index + 1,
            id: bonus.id,
            // date: bonus.date,
            amount: bonus.amount,
            reason: bonus.reason || "",
            username: response.data.employee.username,
            total: response.data.total,
          })
        );

        setBonusesData(formattedData);
      })
      .catch((error) => {
        console.error("Error:", error);
      });

    api
      .get(chargeUrl, { params })
      .then((response) => {
        const formattedData = response.data.charges.map(
          (charges: any, index: any) => ({
            no: index + 1,
            id: charges.id,
            // date: charges.date,
            amount: charges.amount,
            reason: charges.reason || "",
            username: response.data.employee.username,
            total: response.data.total,
          })
        );

        setChargesData(formattedData);
      })
      .catch((error) => {
        console.error("Error:", error);
      });

    if (!target.closest(".ant-dropdown-trigger")) {
      setOpen(true);
    }
  };

  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
  const [isEditBonusModalVisible, setIsEditBonusModalVisible] = useState(false);

  const [selectedRecord, setSelectedRecord] = useState<{ id?: string } | null>(
    null
  );
  const [selectedRecordBonus, setSelectedRecordBonus] = useState<{
    id?: string;
  } | null>(null);

  const showModalBonusEdit = (record: any) => {
    if (!record || typeof record !== "object") {
      console.error("Invalid record:", record);
      return;
    }

    // const recordWithoutDate = { ...record };
    // delete recordWithoutDate.date;

    setSelectedRecordBonus(record);
    form.setFieldsValue(record);
    setIsEditBonusModalVisible(true);
  };
  const showModal = (record: any) => {
    if (!record || typeof record !== "object") {
      console.error("Invalid record:", record);
      return;
    }

    // const recordWithoutDate = { ...record };
    // delete recordWithoutDate.date;

    setSelectedRecord(record);
    form.setFieldsValue(record);
    setIsEditModalVisible(true);
  };

  const Cancel = () => {
    setIsEditModalVisible(false);
    setIsEditBonusModalVisible(false);
    form.resetFields();
  };

  const handleOkBonusEdit = async () => {
    try {
      // Formani tekshirish
      const values = await form.validateFields();

      if (!selectedRecordBonus) {
        throw new Error("No record selected!");
      }

      // Obyektni biriktirish: selectedRecord va formdagi values
      const updatedData = { ...(selectedRecordBonus || {}), ...values };

      // Axios so‘rovini yuborish
      const response = await api.put(
        `bonus/${selectedRecordBonus.id}/`,
        updatedData,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );

      // Javobni tekshirish
      if (response.status === 202) {
        setBonusesData((prevData: any) =>
          prevData.map((item: any) =>
            item.id === selectedRecordBonus.id
              ? { ...item, ...updatedData }
              : item
          )
        );
        refetch();

        setIsEditBonusModalVisible(false);
      } else {
        throw new Error("Server Error");
      }
    } catch (error) {
      console.error(error);
    }
  };

  // EDIT modal Charge
  const handleOk = async () => {
    try {
      const values = await form.validateFields();

      if (!selectedRecord) {
        throw new Error("No record selected!");
      }

      const updatedData = {
        ...(selectedRecord || {}),
        ...values,
      };

      const response = await api.put(
        `charge/${selectedRecord.id}/`,
        updatedData,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );

      if (response.status === 202) {
        setChargesData((prevData: any) =>
          prevData.map((item: any) =>
            item.id === selectedRecord.id ? { ...item, ...updatedData } : item
          )
        );
        refetch();

        setIsEditModalVisible(false);
      } else {
        throw new Error("Server Error");
      }
    } catch (error) {
      console.error(error);
    }
  };

  const confirmSalaries = async () => {
    try {
      const response = await api.post("/employees-salaries-confirm/");
      refetch();
    } catch (error) {
      console.error("Error confirming salaries:", error);
    }
  };

  const timerRef = useRef<NodeJS.Timeout | null>(null);
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }

    const searchText = e.target.value;
    timerRef.current = setTimeout(() => {
      setSearch(searchText);
    }, 1000);
  };

  const teamData = useTeamData({});
  const teamOptions: { label: string; value: any }[] | undefined =
    teamData?.data?.map((item) => ({
      label: item?.name,
      value: item?.name,
    }));
  const additionalOption = {
    label: "all",
    value: "",
  };
  if (teamOptions) {
    teamOptions.unshift(additionalOption);
  }
  const { token } = theme.useToken();

  const deleteFunctionBonus = (record: any) => {
    const { id } = record;

    const apiUrl = `/bonus/${id}`;

    api
      .delete(apiUrl)
      .then((response) => {
        if (response.status === 200) {
          setBonusesData((prevData: any) => {
            const updatedData = prevData.filter((item: any) => item.id !== id);
            console.log("Updated Data:", updatedData);
            return updatedData;
          });
          message.success(response.data.message);
        }
        refetch();
      })
      .catch((error) => {
        console.error(error);
      });
  };
  const deleteFunctionCharge = (record: any) => {
    const { id } = record;

    const apiUrl = `/charge/${id}`;

    api
      .delete(apiUrl)
      .then((response) => {
        if (response.status === 200) {
          setChargesData((prevData: any) => {
            const updatedData = prevData.filter((item: any) => item.id !== id);
            console.log("Updated Data:", updatedData);
            return updatedData;
          });
          message.success(response.data.message);
        }
        refetch();
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <div style={{ paddingBottom: 40 }}>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          marginBottom: 10,
        }}
      >
        <div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              // marginBottom: 10,
            }}
          >
            <div style={{ marginRight: 12 }}>
              <Input
                placeholder="Search"
                prefix={<SearchOutlined />}
                onChange={handleSearchChange}
              />
            </div>
            <Select
              style={{ width: 260 }}
              placeholder="Team"
              onChange={(value: any) => setTeam(value)}
              options={teamOptions}
            />
          </div>
        </div>

        <Button
          disabled={data?.some((item) => item.is_confirmed)}
          type="primary"
          onClick={() =>
            Modal.confirm({
              title: "",
              icon: null,
              content: (
                <div
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    textAlign: "center",
                    padding: "20px",
                  }}
                >
                  <InfoCircleOutlined
                    style={{
                      fontSize: "40px",
                      color: "#f99e2c",
                      marginBottom: "12px",
                    }}
                  />

                  <div
                    style={{
                      fontSize: "18px",
                      fontWeight: 700,
                      marginBottom: "8px",
                      maxWidth: "300px",
                    }}
                  >
                    Are you sure you want to confirm the salaries for the{" "}
                    {previousMonth}?
                  </div>

                  <div
                    style={{
                      fontSize: "14px",
                      color: "#0F111C",
                      marginBottom: "24px",
                      maxWidth: "300px",
                      fontWeight: 500,
                    }}
                  >
                    Bonuses and charges cannot be added or altered after the
                    confirmation.
                  </div>
                </div>
              ),
              okButtonProps: {
                style: {
                  backgroundColor: "#F99E2C",
                  borderColor: "#F99E2C",
                  color: "white",
                  borderRadius: "8px",
                  width: "162px",
                  height: "40px",
                  fontSize: "14px",
                  padding: "0 20px",
                },
              },
              cancelButtonProps: {
                style: {
                  borderRadius: "8px",
                  width: "162px",
                  height: "40px",
                  fontSize: "14px",
                  padding: "0 20px",
                },
              },
              footer: (originFooter) => (
                <div
                  style={{
                    display: "flex",
                    justifyContent: "center",
                    gap: "8px",
                  }}
                >
                  {originFooter}
                </div>
              ),
              okText: "Confirm",
              onOk() {
                confirmSalaries();
              },
              onCancel() {},
            })
          }
        >
          Confirm
        </Button>
      </div>
      <Table
        size="small"
        loading={isLoading}
        dataSource={data?.map((u, i) => ({
          no: i + 1,
          ...u,
        }))}
        columns={[
          {
            title: <img src={tagIcon} alt="" />,
            dataIndex: "no",
            key: "no",
            width: "5%",
            align: "center",
          },
          {
            title: "Username",
            dataIndex: "username",
            key: "username",
            render: (text, record) => (
              <Tooltip
                title={
                  record?.full_name?.trim()
                    ? record.full_name
                    : "User does not have a name"
                }
              >
                <span>{text}</span>
              </Tooltip>
            ),
          },
          {
            title: "Role",
            dataIndex: "role",
            key: "role",
            filters: [
              {
                text: "Tech Support",
                value: "Tech Support",
              },
              {
                text: "Checker",
                value: "Checker",
              },
              {
                text: "Accountant",
                value: "Accountant",
              },
            ],
            filterMultiple: false,
            onFilter: (value: any, record: any) => {
              return record.role === value;
            },
          },
          {
            title: "Team",
            dataIndex: "team_name",
            key: "team_name",
          },
          {
            title: "Tasks",
            dataIndex: "number_of_tasks",
            key: "number_of_tasks",
          },
          {
            title: "Points",
            dataIndex: "total_points",
            key: "total_points",
          },
          {
            title: "Salary Type",
            dataIndex: "salary_type",
            render: (value: any, record: any) => {
              if (record.salary_type === "task_based") {
                return <p>Task Based</p>;
              } else if (record.salary_type === "hybrid") {
                return <p>Hybrid</p>;
              } else if (record.salary_type === "fixed") {
                return <p>Fixed</p>;
              } else {
                return <p>{record.salary_type}</p>;
              }
            },
            filters: [
              {
                text: "Hybrid",
                value: "hybrid",
              },
              {
                text: "Task Based",
                value: "task_based",
              },
              {
                text: "Fixed",
                value: "fixed",
              },
            ],
            filterMultiple: false,
            // defaultFilteredValue: ["hybrid"],
            onFilter: (value: any, record: any) => {
              return record.salary_type === value;
            },
          },
          {
            title: "Base Salary",
            dataIndex: "salary_base_amount",
            render: (text: string, record: any) => (
              <p>${record?.salary_base_amount}</p>
            ),
          },
          {
            title: "Performance Salary",
            dataIndex: "performance_salary",
            render: (text: string, record: any) => (
              <p>${record?.performance_salary}</p>
            ),
          },
          {
            title: "Charges",
            dataIndex: "total_charges",
            render: (text: string, record: any) => (
              <p>${record?.total_charges}</p>
            ),
          },
          {
            title: "Bonuses",
            dataIndex: "total_bonuses",
            render: (text: string, record: any) => (
              <p>${record?.total_bonuses}</p>
            ),
          },
          {
            title: "Salary",
            dataIndex: "salary",
            key: "salary",
            render: (text: string, record: any) => (
              <span>${record.salary}</span>
            ),
          },
          {
            title: "Actions",
            key: "actions",
            align: "center",
            render: (_: any, record: any) => (
              <Dropdown
                overlay={menu(record.employee_id)}
                trigger={["click"]}
                disabled={data?.some((item) => item.is_confirmed)}
              >
                <Button
                  icon={<EllipsisOutlined />}
                  onClick={(e) => e.stopPropagation()}
                />
              </Dropdown>
            ),
          },
        ]}
        rowClassName={(record, index) =>
          index % 2 === 0 ? "odd-row" : "even-row"
        }
        bordered
        pagination={{
          pageSize: 10,
          size: "default",
          style: {
            margin: 0,
            justifyContent: "end",
            position: "fixed",
            bottom: 0,
            left: 0,
            width: "100%",
            backgroundColor: token.colorBgContainer,
            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
            padding: "10px 0",
            zIndex: 1000,
          },
          showLessItems: true,
        }}
        onRow={(record) => ({
          onClick: (e) => handleRowClick(record, e),
        })}
      />
      {/* <div
        style={{
          display: "flex",
          justifyContent: "end",
          alignItems: "center",
          marginTop: 24,
        }}
      >
        <Button
          disabled={data?.some((item) => item.is_confirmed)}
          type="primary"
          onClick={() =>
            Modal.confirm({
              title: "",
              icon: null,
              content: (
                <div
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    textAlign: "center",
                    padding: "20px",
                  }}
                >
                  <InfoCircleOutlined
                    style={{
                      fontSize: "40px",
                      color: "#f99e2c",
                      marginBottom: "12px",
                    }}
                  />

                  <div
                    style={{
                      fontSize: "18px",
                      fontWeight: 700,
                      marginBottom: "8px",
                      maxWidth: "300px",
                    }}
                  >
                    Are you sure you want to confirm the salaries for the{" "}
                    {previousMonth}?
                  </div>

                  <div
                    style={{
                      fontSize: "14px",
                      color: "#0F111C",
                      marginBottom: "24px",
                      maxWidth: "300px",
                      fontWeight: 500,
                    }}
                  >
                    Bonuses and charges cannot be added or altered after the
                    confirmation.
                  </div>
                </div>
              ),
              okButtonProps: {
                style: {
                  backgroundColor: "#F99E2C",
                  borderColor: "#F99E2C",
                  color: "white",
                  borderRadius: "8px",
                  width: "162px",
                  height: "40px",
                  fontSize: "14px",
                  padding: "0 20px",
                },
              },
              cancelButtonProps: {
                style: {
                  borderRadius: "8px",
                  width: "162px",
                  height: "40px",
                  fontSize: "14px",
                  padding: "0 20px",
                },
              },
              footer: (originFooter) => (
                <div
                  style={{
                    display: "flex",
                    justifyContent: "center",
                    gap: "8px",
                  }}
                >
                  {originFooter}
                </div>
              ),
              okText: "Confirm",
              onOk() {
                confirmSalaries();
              },
              onCancel() {},
            })
          }
        >
          Confirm
        </Button>
      </div> */}

      <Drawer
        title={
          <Typography className="title">
            {selectedUser?.full_name?.trim()
              ? selectedUser.full_name
              : selectedUser?.username}
          </Typography>
        }
        placement="right"
        width={850}
        onClose={() => setOpen(false)}
        closable={false}
        open={open}
        extra={
          <Button
            type="text"
            icon={<CloseOutlined />}
            onClick={() => setOpen(false)}
          />
        }
      >
        <div className="info-div">
          <Typography
            style={{
              fontSize: 18,
              fontWeight: 700,
              lineHeight: "24px",
              letterSpacing: "-0.02em",
              marginBottom: 16,
            }}
          >
            Information
          </Typography>
          <div className="info-body">
            <div className="d-flex" style={{ justifyContent: "space-between" }}>
              <div>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Username</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    {selectedUser?.username}
                  </p>
                </tr>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Role</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    {selectedUser?.role}
                  </p>
                </tr>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Tasks</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    {selectedUser?.number_of_tasks}
                  </p>
                </tr>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Points</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    {selectedUser?.total_points}
                  </p>
                </tr>
              </div>
              <div>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Last month</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    {previousMonth}
                  </p>
                </tr>

                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Bonus</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    ${selectedUser?.total_bonuses}
                  </p>
                </tr>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Charge</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    ${selectedUser?.total_charges}
                  </p>
                </tr>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Salary</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    ${selectedUser?.salary}
                  </p>
                </tr>
              </div>
            </div>
          </div>
        </div>

        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            gap: 25,
            marginTop: 25,
          }}
        >
          <div style={{ width: "50%" }}>
            <Typography
              style={{
                fontSize: 18,
                fontWeight: 700,
                lineHeight: "24px",
                letterSpacing: "-0.02em",
                marginBottom: 16,
              }}
            >
              Bonuses
            </Typography>
            <Table
              bordered
              size="small"
              dataSource={bonusesData}
              columns={[
                {
                  title: <img src={tagIcon} alt="" />,
                  dataIndex: "no",
                  key: "no",
                  width: "5%",
                  align: "center",
                },
                {
                  title: "Date",
                  dataIndex: "date",
                  render: (text: string) => moment(text).format("MMMM DD"),
                },
                {
                  title: "Amount",
                  dataIndex: "amount",
                  render: (text: string, record: any) => (
                    <p>${record?.amount}</p>
                  ),
                },
                {
                  title: "Action",
                  // width: "5%",
                  align: "center",
                  render: (_, record) => (
                    <>
                      <Button
                        icon={<EditOutlined />}
                        disabled={data?.some((item) => item.is_confirmed)}
                        onClick={() => showModalBonusEdit(record)}
                        style={{ marginRight: 8 }}
                      />
                      <Button
                        style={{
                          color: "red",
                          borderColor: "red", // Butonning chegarasini qizil qilish
                        }}
                        icon={<DeleteOutlined />}
                        onClick={() => deleteFunctionBonus(record)}
                        disabled={data?.some((item) => item.is_confirmed)}
                      />
                    </>
                  ),
                },
              ]}
              pagination={{
                pageSize: 10,
                showLessItems: true,
              }}
            />
          </div>

          <div style={{ width: "50%" }}>
            <Typography
              style={{
                fontSize: 18,
                fontWeight: 700,
                lineHeight: "24px",
                letterSpacing: "-0.02em",
                marginBottom: 16,
              }}
            >
              Charges
            </Typography>
            <Table
              size="small"
              bordered
              dataSource={chargesData}
              columns={[
                {
                  title: <img src={tagIcon} alt="" />,
                  dataIndex: "no",
                  key: "no",
                  width: "5%",
                  align: "center",
                },
                {
                  title: "Date",
                  dataIndex: "date",
                  render: (text: string) => moment(text).format("MMMM DD"),
                },
                {
                  title: "Amount",
                  dataIndex: "amount",
                  render: (text: string, record: any) => (
                    <p>${record?.amount}</p>
                  ),
                },
                {
                  title: "Action",
                  // width: "5%",
                  align: "center",
                  render: (_, record) => (
                    <>
                      <Button
                        icon={<EditOutlined />}
                        disabled={data?.some((item) => item.is_confirmed)}
                        onClick={() => showModal(record)}
                        style={{ marginRight: 8 }}
                      />
                      <Button
                        style={{
                          color: "red",
                          borderColor: "red", // Butonning chegarasini qizil qilish
                        }}
                        icon={<DeleteOutlined />}
                        onClick={() => deleteFunctionCharge(record)}
                        disabled={data?.some((item) => item.is_confirmed)}
                      />
                    </>
                  ),
                },
              ]}
              pagination={{
                showLessItems: true,
              }}
            />
          </div>
        </div>
      </Drawer>

      <Modal
        title="Add Bonus"
        visible={isBonusModalVisible}
        onCancel={handleCancel}
        onOk={handleOkBonus}
        maskClosable={false}
        okText={
          <span>
            <PlusOutlined style={{ marginRight: 4 }} />
            Add
          </span>
        }
        cancelText={
          <span>
            <CloseOutlined style={{ marginRight: 4 }} />
            Cancel
          </span>
        }
        // footer={null}
      >
        <Form form={form} layout="vertical">
          {/* Date Picker */}
          <Form.Item
            name="date"
            label="Date"
            rules={[{ required: true, message: "Please select a date!" }]}
          >
            <DatePicker
              style={{ width: "100%" }}
              disabledDate={disabledDate}
              format="YYYY MMMM DD"
              defaultPickerValue={lastMonthDefault}
              onChange={handleDateChange}

              // value={lastMonthDefault}
            />
          </Form.Item>

          {/* Amount Input */}
          <Form.Item
            name="amount"
            label="Amount"
            rules={[{ required: true, message: "Please enter an amount!" }]}
          >
            <Input
              prefix={<DollarOutlined />}
              type="number"
              min={0}
              style={{ width: "100%" }}
              placeholder="0"
              onKeyPress={(e) => {
                if (e.key === "-" || e.key === "e") {
                  e.preventDefault();
                }
              }}
            />
          </Form.Item>

          {/* Textarea */}
          <Form.Item name="notes" label="Notes">
            <Input.TextArea placeholder="Enter notes here" rows={4} />
          </Form.Item>
        </Form>
      </Modal>

      {/* Charge Modal */}
      <Modal
        title="Add Charge"
        visible={isChargeModalVisible}
        onCancel={handleCancel}
        maskClosable={false}
        onOk={handleOkCharge}
        okText={
          <span>
            <PlusOutlined style={{ marginRight: 4 }} />
            Add
          </span>
        }
        cancelText={
          <span>
            <CloseOutlined style={{ marginRight: 4 }} />
            Cancel
          </span>
        }
      >
        <Form form={form} layout="vertical">
          {/* Date Picker */}
          <Form.Item
            name="date"
            label="Date"
            rules={[{ required: true, message: "Please select a date!" }]}
          >
            <DatePicker
              style={{ width: "100%" }}
              disabledDate={disabledDate}
              defaultPickerValue={lastMonthDefault}
              format="YYYY MMMM DD"
              onChange={handleDateChange}
              // value={selectedDate}
            />
          </Form.Item>

          {/* Amount Input */}
          <Form.Item
            name="amount"
            label="Amount"
            rules={[{ required: true, message: "Please enter an amount!" }]}
          >
            <Input
              prefix={<DollarOutlined />}
              type="number"
              style={{ width: "100%" }}
              placeholder="0"
              onKeyPress={(e) => {
                if (e.key === "-" || e.key === "e") {
                  e.preventDefault();
                }
              }}
            />
          </Form.Item>

          {/* Textarea */}
          <Form.Item name="notes" label="Notes">
            <Input.TextArea placeholder="Enter notes here" rows={4} />
          </Form.Item>
        </Form>
      </Modal>

      {/* EDIT CHARGE  MODAL */}

      <Modal
        title="Edit Charge"
        visible={isEditModalVisible}
        onCancel={Cancel}
        onOk={handleOk}
        maskClosable={false}
        okText={
          <span>
            <PlusOutlined style={{ marginRight: 4 }} />
            Save
          </span>
        }
        cancelText={
          <span>
            <CloseOutlined style={{ marginRight: 4 }} />
            Cancel
          </span>
        }
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="amount"
            label="Amount"
            rules={[{ required: true, message: "Please enter an amount!" }]}
          >
            <Input
              prefix={<DollarOutlined />}
              type="number"
              style={{ width: "100%" }}
              placeholder="0"
              onKeyPress={(e) => {
                if (e.key === "-" || e.key === "e") {
                  e.preventDefault();
                }
              }}
            />
          </Form.Item>

          {/* Textarea */}
          <Form.Item name="reason" label="Notes">
            <Input.TextArea placeholder="Enter notes here" rows={4} />
          </Form.Item>
        </Form>
      </Modal>

      {/* EDIT Bonus  MODAL */}

      <Modal
        title="Edit Bonus"
        visible={isEditBonusModalVisible}
        onCancel={Cancel}
        onOk={handleOkBonusEdit}
        maskClosable={false}
        okText={
          <span>
            <PlusOutlined style={{ marginRight: 4 }} />
            Save
          </span>
        }
        cancelText={
          <span>
            <CloseOutlined style={{ marginRight: 4 }} />
            Cancel
          </span>
        }
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="amount"
            label="Amount"
            rules={[{ required: true, message: "Please enter an amount!" }]}
          >
            <Input
              prefix={<DollarOutlined />}
              type="number"
              style={{ width: "100%" }}
              placeholder="0"
              onKeyPress={(e) => {
                if (e.key === "-" || e.key === "e") {
                  e.preventDefault();
                }
              }}
            />
          </Form.Item>

          <Form.Item name="reason" label="Notes">
            <Input.TextArea placeholder="Enter notes here" rows={4} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default AccountingCurrent;