import React, { useEffect, useState } from "react";
import AdminDashboard from "../AdminDashboard/AdminDashboard";
import {
  applicationReportListCsv,
  applicationReportListExcel,
  applicationReportListPdf,
  getAllApplicationsReportByStatus,
} from "../../../services/api/admin";
import { HomeIcon } from "../../../components/Application/ApplicationIcon";
import ReactPaginate from "react-paginate";
import NotFoundTable from "../../../components/notFound/NotFoundTable";
import { customStylesAcc, printData, selectTheme } from "../../../Utils/common";
import { useNavigate } from "react-router-dom";
import { OverlayTrigger, Table, Tooltip } from "react-bootstrap";
import { Message } from "../../../components/message";
import Select from "react-select";
import { GetLocalStorageParsed, PdfBaseUrl } from "../../../Utils/Utils";
import { stateDistrict } from "../../../services/api/auth";
import { Spinner } from "react-bootstrap";
import TotalRecords from "../../../components/notFound/TotalRecords";
import { EyeIcon } from "../AdminIcon";

const PendingApplicationsRoleWise = ({ status, title, heading, pageFrom }) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
  const navigate = useNavigate();
  const [applicationReportList, setApplicationReportList] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0); // Total number of pages
  const [orderBy, setOrderBy] = useState("asc");
  const [apiMessage, setApiMessage] = useState({ type: "", message: "" });
  const [tableDataLoaded, setTableDataLoaded] = useState(false);
  const [districtList, setDistrictList] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [districtId, setDistrictId] = useState("");
  const [sortBy, setSortBy] = useState("district_name");
  const [searchData, setSearchData] = useState("");
  const userDetail = GetLocalStorageParsed("userDetail");
  const [pdfDownLoading, setPdfDownLoading] = useState(false);
  const [totalRecords, setTotalRecords] = useState(0);

  useEffect(() => {
    getApplicationReportList("", "district_name", "1", "asc", "", true);
  }, []);

  const getApplicationReportList = async (
    searchedDistrict,
    sortBy,
    pageNo,
    orderBy,
    searchBy,
    isInitial = false
  ) => {
    try {
      setSearchData(searchBy);
      setOrderBy(orderBy);
      setSortBy(sortBy);
      const applicationReportData = await getAllApplicationsReportByStatus(
        sortBy,
        orderBy,
        searchedDistrict?.value ? searchedDistrict?.value : "",
        searchBy,
        pageNo,
        status
      );
      if (applicationReportData.status == 200) {
        if (isInitial) {
          const response = await stateDistrict();
          const data = userDetail?.district
            ? response.data?.data
                ?.filter((r) => r?.id == userDetail?.district)
                ?.map((district) => ({
                  label: district?.name_en,
                  value: district?.id,
                }))
            : applicationReportData?.data?.data?.map((district) => ({
                label: district?.district_name,
                value: district?.district_id,
              }));
          setDistrictList(data);
        }
        setTotalPages(
          Math.ceil(
            applicationReportData?.data?.total /
              applicationReportData?.data?.per_page
          )
        );
        setCurrentPage(pageNo > 0 ? pageNo - 1 : pageNo);
        setApplicationReportList(applicationReportData?.data?.data);
        setTotalRecords(
          applicationReportData?.data?.total
            ? applicationReportData?.data?.total
            : 0
        );
      }
      setTableDataLoaded(true);
    } catch (err) {
      setTotalRecords(0);
      setApiMessage({ type: "error", message: err?.message });
      setTableDataLoaded(true);
    }
  };

  const handlePageChange = (selectedPage) => {
    getApplicationReportList(
      districtId,
      sortBy,
      selectedPage.selected + 1,
      orderBy,
      searchData
    ); // Increment by 1 if the API starts page numbers from 1
  };

  const resetFilter = () => {
    setDistrictId("");
    getApplicationReportList("", sortBy, 1, orderBy, searchData);
  };

  const pdfDownload = async () => {
    try {
      setPdfDownLoading(true);
      const response = await applicationReportListPdf(
        status,
        districtId?.value ? districtId?.value : ""
      );
      setPdfDownLoading(false);
      window.open(
        `${PdfBaseUrl()}/${response.folder_path}/${response.file_name}`
      );
    } catch (err) {
      setPdfDownLoading(false);
      setApiMessage({ type: "error", message: err?.message });
    }
  };

  const excelDownload = async () => {
    try {
      const response = await applicationReportListExcel(
        status,
        districtId?.value ? districtId?.value : ""
      );
      window.open(response?.file_path);
    } catch (err) {
      setApiMessage({ type: "error", message: err?.message });
    }
  };

  const csvDownload = async () => {
    try {
      const response = await applicationReportListCsv();
      window.open(response?.file_path);
    } catch (err) {
      setApiMessage({ type: "error", message: err?.message });
    }
  };

  const exportPrint = async () => {
    try {
      // Fetch the PDF URL from the API
      const response = await applicationReportListPdf(
        status,
        districtId?.value ? districtId?.value : ""
      );
      if (response) {
        printData(response);
      }
    } catch (err) {
      setApiMessage({ type: "error", message: err?.message });
    }
  };

  return (
    <AdminDashboard>
      <div className="aod-outer">
        {apiMessage && (
          <Message
            apiMessage={apiMessage}
            setApiMessage={setApiMessage}
          ></Message>
        )}
        <div className="ap-breadcrumb pt-2 pb-2 mb-2 adm-breadcrumb">
          <div>
            <HomeIcon />
            <b onClick={() => navigate("/admin/")}>Home /</b>{" "}
            <span>{title}</span>
          </div>
          <div className="dropdown download_file_dropdown ms-auto d-flex gap-2 mb-3 flex-wrap align-items-center">
            {pdfDownLoading ? (
              <a className=" px-2 btn btn-danger btn-sm">
                {" "}
                <i className="fa fa-file-pdf me-1"></i>
                <span>PDF</span>
                <Spinner
                  animation="border"
                  className="pdf-spinner"
                  role="status"
                  style={{ marginLeft: "5px" }}
                >
                  <span className="visually-hidden"></span>
                </Spinner>
              </a>
            ) : (
              <a
                className=" px-2 btn btn-danger btn-sm"
                onClick={() => pdfDownload()}
              >
                {" "}
                <i className="fa fa-file-pdf me-1"></i> PDF
              </a>
            )}
            <a
              className=" px-2 btn btn-success btn-sm"
              onClick={() => excelDownload()}
            >
              <i className="fa fa-file-excel  me-1"></i>
              Excel{" "}
            </a>
            {/* <a className=" px-2 btn btn-primary btn-sm" onClick={() => csvDownload()} ><i className="fa fa-file-csv  me-1"></i>
                                CSV</a> */}
            <a
              className=" px-2 btn btn-info  btn-sm"
              onClick={() => exportPrint()}
            >
              <i className="fa fa-print me-1"></i>
              Print
            </a>
          </div>
        </div>
        <div className="aod-inner pt-0">
          <div className="aod-inner pt-0">
            <div className="aod-bottom">
              <div className="adm-tabs-outer d-flex justify-content-between">
                <h4 className="mb-0">{title}</h4>
                <div className="position-relative w-25">
                  <input
                    className="px-2 form-control"
                    placeholder="Search"
                    type="text"
                    value={searchTerm}
                    onChange={(e) => {
                      setSearchTerm(e.target.value);
                      getApplicationReportList(
                        districtId,
                        sortBy,
                        1,
                        orderBy,
                        e.target.value
                      );
                    }}
                  />
                  {searchTerm && (
                    <button
                      className="btn btn-clear position-absolute"
                      onClick={(e) => {
                        setSearchTerm("");
                        getApplicationReportList(
                          districtId,
                          sortBy,
                          1,
                          orderBy,
                          e.target.value
                        );
                      }}
                      style={{
                        top: "50%",
                        right: "10px",
                        transform: "translateY(-50%)",
                        border: "none",
                        background: "transparent",
                        fontSize: "1rem",
                        cursor: "pointer",
                      }}
                    >
                      &times;
                    </button>
                  )}
                </div>
              </div>
              <div className="aod-head"></div>
              <div className="row py-4">
                <div className="col-md-4 aod-resp-tab">
                  <div className="suf-input-box aod-form-input mb-2">
                    <Select
                      styles={customStylesAcc}
                      theme={selectTheme}
                      components={{
                        IndicatorSeparator: () => null,
                      }}
                      className="my-select selectpicker"
                      classNamePrefix="ad-menu_open_select_class"
                      aria-label="Default select example"
                      name="role"
                      value={districtId}
                      options={districtList}
                      onChange={(selectedOption) => {
                        setDistrictId(selectedOption);
                        getApplicationReportList(
                          selectedOption,
                          sortBy,
                          1,
                          orderBy,
                          searchData
                        );
                      }} // Use onChange for real-time validation
                      placeholder="Select District"
                    />
                  </div>
                </div>
                <div className="col-md-6">
                  <button
                    onClick={resetFilter}
                    className="ad-reset-btn w-auto px-4"
                  >
                    Reset
                  </button>
                </div>
                <TotalRecords totalRecords={totalRecords}></TotalRecords>
              </div>
              <div className="ad-reg-table">
                <Table size="sm" className="ad-cat-table">
                  <thead>
                    <tr>
                      <th className="ad-sno">S. No</th>
                      <th
                        className="ad-long cursor-pointer"
                        onClick={(e) =>
                          getApplicationReportList(
                            districtId,
                            "district_name",
                            currentPage + 1,
                            orderBy === "asc" ? "desc" : "asc",
                            searchData
                          )
                        }
                      >
                        District Name
                        <span>
                          <i className="fa-solid fa-sort"></i>
                        </span>
                      </th>
                      <th
                        className="ad-long cursor-pointer"
                        onClick={(e) =>
                          getApplicationReportList(
                            districtId,
                            "total_applications",
                            currentPage + 1,
                            orderBy === "asc" ? "desc" : "asc",
                            searchData
                          )
                        }
                      >
                        Total {heading}
                        <span>
                          <i className="fa-solid fa-sort"></i>
                        </span>{" "}
                      </th>
                      {pageFrom === "dtdo-pending-applications" ? (
                        <>
                          <th
                            className="ad-long cursor-pointer"
                            onClick={(e) =>
                              getApplicationReportList(
                                districtId,
                                "submitted",
                                currentPage + 1,
                                orderBy === "asc" ? "desc" : "asc",
                                searchData
                              )
                            }
                          >
                            Submitted Applications
                            <span>
                              <i className="fa-solid fa-sort"></i>
                            </span>{" "}
                          </th>
                          <th
                            className="ad-long cursor-pointer"
                            onClick={(e) =>
                              getApplicationReportList(
                                districtId,
                                "under_review",
                                currentPage + 1,
                                orderBy === "asc" ? "desc" : "asc",
                                searchData
                              )
                            }
                          >
                             Under Review Applications
                            <span>
                              <i className="fa-solid fa-sort"></i>
                            </span>{" "}
                          </th>
                        </>
                      ) : (
                        <>
                          <th
                            className="ad-long cursor-pointer"
                            onClick={(e) =>
                              getApplicationReportList(
                                districtId,
                                "pending_document",
                                currentPage + 1,
                                orderBy === "asc" ? "desc" : "asc",
                                searchData
                              )
                            }
                          >
                            Document Pending Applications
                            <span>
                              <i className="fa-solid fa-sort"></i>
                            </span>{" "}
                          </th>
                          <th
                            className="ad-long cursor-pointer"
                            onClick={(e) =>
                              getApplicationReportList(
                                districtId,
                                "rejected",
                                currentPage + 1,
                                orderBy === "asc" ? "desc" : "asc",
                                searchData
                              )
                            }
                          >
                            Rejected Applications
                            <span>
                              <i className="fa-solid fa-sort"></i>
                            </span>{" "}
                          </th>
                          <th
                            className="ad-long cursor-pointer"
                            onClick={(e) =>
                              getApplicationReportList(
                                districtId,
                                "rejected_payment_document",
                                currentPage + 1,
                                orderBy === "asc" ? "desc" : "asc",
                                searchData
                              )
                            }
                          >
                            Payment Document Rejected Applications
                            <span>
                              <i className="fa-solid fa-sort"></i>
                            </span>{" "}
                          </th>
                        </>
                      )}
                      <th className="ad-long">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {applicationReportList?.length > 0 ? (
                      applicationReportList?.map((item, index) => (
                        <tr key={index}>
                          <td>{currentPage * 10 + (index + 1)}</td>
                          <td>
                            {item?.district_name ? item?.district_name : "--"}
                          </td>
                          <td>
                            {item?.total_applications
                              ? item?.total_applications
                              : "--"}
                          </td>
                          {pageFrom === "dtdo-pending-applications" ? (
                            <>
                              <td>
                                {item?.submitted
                                  ? item?.submitted
                                  : "--"}
                              </td>
                              <td>
                                {item?.under_review
                                  ? item?.under_review
                                  : "--"}
                              </td>
                            </>
                          ) : (
                            <>
                              <td>
                                {item?.pending_document
                                  ? item?.pending_document
                                  : "--"}
                              </td>
                              <td>
                                {item?.rejected
                                  ? item?.rejected
                                  : "--"}
                              </td>
                              <td>
                                {item?.rejected_payment_document
                                  ? item?.rejected_payment_document
                                  : "--"}
                              </td>
                            </>
                          )}
                          <td className="icon-col">
                            <OverlayTrigger
                              placement="top"
                              overlay={
                                <Tooltip id={`edit-tooltip-${item.id}`}>
                                  View
                                </Tooltip>
                              }
                            >
                              <span
                                className="ad-cat-edit"
                                onClick={() => {
                                  navigate(
                                    "/admin/pending-applicaion-details",
                                    {
                                      state: {
                                        status: status,
                                        district_id: item?.district_id,
                                        pageFrom: pageFrom,
                                      },
                                    }
                                  );
                                }}
                              >
                                <EyeIcon />
                              </span>
                            </OverlayTrigger>
                          </td>
                        </tr>
                      ))
                    ) : tableDataLoaded ? (
                      <NotFoundTable colSpan="8"></NotFoundTable>
                    ) : (
                      <></>
                    )}
                  </tbody>
                </Table>
                {totalPages > 1 && applicationReportList?.length > 0 && (
                  <div className="d-flex w-100 justify-content-end">
                    <ReactPaginate
                      previousLabel={"Previous"}
                      nextLabel={"Next"}
                      breakLabel={"..."}
                      pageCount={totalPages} // Total number of pages from API
                      marginPagesDisplayed={1}
                      pageRangeDisplayed={1}
                      onPageChange={handlePageChange} // Method to handle page click
                      containerClassName={"pagination justify-content-center"} // Custom CSS classes
                      pageClassName={"page-item"}
                      pageLinkClassName={"page-link"}
                      previousClassName={"page-item"}
                      previousLinkClassName={"page-link"}
                      nextClassName={"page-item"}
                      nextLinkClassName={"page-link"}
                      breakClassName={"page-item"}
                      breakLinkClassName={"page-link"}
                      activeClassName={"active"}
                    />
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </AdminDashboard>
  );
};

export default PendingApplicationsRoleWise;