import { ENDPOINTS } from "@/api/apiEndpoints";
import API, { ApiMethods } from "@/api/apiFunction";
import functions from "@/utils/functions";
import React, { useEffect, useState } from "react";
import FullPageLoader from "../common/loader/FullPageLoader";
import DataTableCommon from "../common/Datatable";
import { ColumnArrayType } from "../common/Datatable/type";
import approve from "../../assets/approve_icon.svg";
import reject from "../../assets/reject_icon.svg";
import Modal from "../common/Modal";
import ValidationMsg from "../common/ValidationMsg";
import { toast } from "react-toastify";
import Link from "next/link";

const DealersLeads = () => {
  const [leadsData, setLeadsData] = useState<object[]>([]);
  const [loader, setLoader] = useState<boolean>(true);
  const [selectedDealerId, setSelectedDealerId] = useState<string | null>(null);
  const [dealerIdInput, setDealerIdInput] = useState<{
    id: number | string;
    error: string;
  }>({ id: "", error: "" });
  const [isApproveModalOpen, setIsApproveModalOpen] = useState(false);
  const [isRejectModalOpen, setIsRejectModalOpen] = useState(false);

  // TABLE COLUMN
  const tableColumns = [
    {
      name: "Name",
      selector: (row: { name: string }) => row.name,
      sortable: true,
      cell: (row: { name: string; leadData: unknown }) => (
        <Link
          href={`dealers-leads/details/${
            (row?.leadData as { id: string })?.id
          }`}
        >
          {row.name}
        </Link>
      ),
    },
    {
      name: "State",
      selector: (row: { state: string }) => row.state,
      sortable: true,
    },
    {
      name: "City",
      selector: (row: { city: string }) => row.city,
      sortable: true,
    },
    {
      name: "Zipcode",
      selector: (row: { zipcode: string }) => row.zipcode,
      sortable: true,
    },
    {
      name: "Contact no",
      selector: (row: { phone: string }) => row.phone,
      sortable: true,
    },
    {
      name: "Email",
      selector: (row: { email: string }) => row.email,
      sortable: true,
    },
    {
      name: "Action",
      selector: (row: { action: string }) => row.action,
      cell: (row: { leadData: object }) => (
        <div className="action_buttons">
          <button
            className="btn btn_green"
            onClick={() => {
              setSelectedDealerId((row?.leadData as { id: string })?.id);
              openApproveModal();
            }}
          >
            <img src={approve?.src ?? ""} alt="Reject" />
            Approve
          </button>
          <button
            className="btn btn_red"
            onClick={() => {
              setSelectedDealerId((row?.leadData as { id: string })?.id);
              openRejectModal();
            }}
          >
            <img src={reject?.src ?? ""} alt="Reject" />
            Reject
          </button>
        </div>
      ),
    },
  ];

  // HANDLERS
  const closeApproveModal = (e?: React.MouseEvent<HTMLButtonElement>): void => {
    e?.preventDefault();
    setSelectedDealerId(null);
    setDealerIdInput({ id: "", error: "" });
    setIsApproveModalOpen(false);
  };
  const openApproveModal = () => {
    setIsApproveModalOpen(true);
  };
  const handleApproveDealer = async (e: React.FormEvent<HTMLFormElement>) => {
    e?.preventDefault();

    try {
      if (dealerIdInput.id && selectedDealerId) {
        const dataToBeSent = {
          status: 1,
          id: selectedDealerId,
          dealerId: Number(dealerIdInput.id),
        };
        const res = await API(
          ENDPOINTS.acceptOrReject,
          ApiMethods.POST,
          dataToBeSent
        );
        if (res?.status) {
          toast.success("Dealer Approved");
          getDealersLeadsData();
          closeApproveModal();
        } else {
          const errorMsg = (
            res?.data as { response: { data: { data: { msg: string } } } }
          )?.response?.data?.data?.msg;
          if (errorMsg) toast?.error(errorMsg);
          else if (res?.data !== null) toast?.error("Something went wrong");
        }
      } else {
        setDealerIdInput((prev) => ({
          ...prev,
          error: "Please Enter Dealer Id",
        }));
      }
    } catch (e) {
      console.log("error", e);
    }
  };
  const closeRejectModal = () => {
    setSelectedDealerId(null);
    setIsRejectModalOpen(false);
  };
  const openRejectModal = () => {
    setIsRejectModalOpen(true);
  };
  const handleRejectDealer = async () => {
    if (selectedDealerId) {
      try {
        const dataToBeSent = {
          status: 2,
          id: selectedDealerId,
        };
        const res = await API(
          ENDPOINTS.acceptOrReject,
          ApiMethods.POST,
          dataToBeSent
        );
        if (res?.status) {
          toast.success("Dealer Request Rejected");
          closeRejectModal();
          getDealersLeadsData();
        } else {
          const errorMsg = (
            res?.data as { response: { data: { data: { msg: string } } } }
          )?.response?.data?.data?.msg;
          if (errorMsg) toast?.error(errorMsg);
          else if (res?.data !== null) toast?.error("Something went wrong");
        }
      } catch (e) {
        console.log("error", e);
      }
    }
  };

  // GET DEALERS LEADS DATA
  const getDealersLeadsData = async () => {
    setLoader(true);
    try {
      const leadsRes = await API(ENDPOINTS.dealersLeads, ApiMethods.GET);
      const data = (leadsRes?.data as { data: [] })?.data;
      setLoader(false);
      if (leadsRes?.status && Array.isArray(data) && data?.length) {
        // Get require data from res
        const getRequreData = data.map((lead: Record<string, string>) => {
          const fullName = lead?.AccountingContact
            ? `${lead?.AccountingContact}`
            : null;
          return {
            name: functions.applyCharactersLimits(fullName, 15)
              ? functions.applyCharactersLimits(fullName, 15)
              : "N/A",
            state: functions.applyCharactersLimits(lead?.states, 15)
              ? functions.applyCharactersLimits(lead?.states, 15)
              : "N/A",
            city: functions.checkEmpty(lead?.city),
            zipcode: functions.checkEmpty(lead?.zipcode),
            phone: functions.checkEmpty(lead?.ContactPhone),
            email: functions.applyCharactersLimits(lead?.ContactMail, 15)
              ? functions.applyCharactersLimits(lead?.ContactMail, 15)
              : "N/A",
            action: "Approve",
            leadData: lead as object,
          };
        });
        setLeadsData(getRequreData);
      } else {
        setLeadsData([]);
      }
    } catch (e) {
      console.log(e, "error");
      setLeadsData([]);
      setLoader(false);
    }
  };

  useEffect(() => {
    getDealersLeadsData();
  }, []);

  return (
    <div className="ds_inr_box">
      {loader ? (
        <FullPageLoader />
      ) : (
        <>
          {/*APPROVE INPUT MODAL */}
          <Modal
            isOpen={isApproveModalOpen}
            handleClose={closeApproveModal as (e?: unknown) => void}
          >
            <div className="content_title">
              <h2>Approve Dealer Lead</h2>
            </div>
            <div className="modal_content">
              <p> Enter dealer ID to add the lead into dealer listing</p>
              <form
                onSubmit={(e) => {
                  handleApproveDealer(e);
                }}
              >
                <div className="sabox">
                  <input
                    placeholder="Dealer Id"
                    type="number"
                    className="form-control"
                    value={dealerIdInput.id as number}
                    onChange={(event) => {
                      setDealerIdInput({
                        id: event.target.value,
                        error: "",
                      });
                    }}
                  />
                  <ValidationMsg>{dealerIdInput.error ?? null}</ValidationMsg>
                </div>

                <div className="modal_buttons">
                  <button
                    type="reset"
                    onClick={closeApproveModal}
                    className="btn"
                  >
                    Cancel
                  </button>
                  <button type="submit" className="btn btn_submit">
                    Submit
                  </button>
                </div>
              </form>
            </div>
          </Modal>

          {/* REJECT MODAL */}
          <Modal isOpen={isRejectModalOpen} handleClose={closeRejectModal}>
            <div className="content_title">
              <h2>Reject Dealer Lead</h2>
            </div>
            <div className="modal_content">
              <p>Are you sure to reject this dealer request ?</p>
              <div className="modal_buttons">
                <button onClick={closeRejectModal} className="btn">
                  Cancel
                </button>
                <button onClick={handleRejectDealer} className="btn btn_submit">
                  Reject
                </button>
              </div>
            </div>
          </Modal>
          <h1>Dealer Leads</h1>
          <div className="ds_data_table">
            <DataTableCommon
              title="Dealer Leads"
              columns={tableColumns as unknown as ColumnArrayType[]}
              rowsData={leadsData as ColumnArrayType[]}
            />
          </div>
        </>
      )}
    </div>
  );
};

export default DealersLeads;