import React, { useEffect, useState } from "react";
import AdminDashboard from "../AdminDashboard/AdminDashboard";
import {
  getEnableDisableUser,
  getDeletedUsers,
  deleteUserFromUserId,
  getRecoverAdminUsersSort,
  recoverAdminUser,
  adminUserListPdfDeleted,
  adminUserListExcel,
  adminUserListCsv,
  adminUserListExcelDeleted,
} from "../../../services/api/admin";
import { HomeIcon } from "../../../components/Application/ApplicationIcon";
import ReactPaginate from "react-paginate";
import NotFoundTable from "../../../components/notFound/NotFoundTable";
import { formatDateWithSlash, printData } from "../../../Utils/common";
import { useNavigate } from "react-router-dom";
import { Modal, Table } from "react-bootstrap";
import { OverlayTrigger, Tooltip } from "react-bootstrap";
import { DeleteIcon } from "../AdminIcon";
import { Message } from "../../../components/message";
import { CgSync } from "react-icons/cg";
import { checkPermission, permissionsConfig } from "../AdminPermission/PermissionChecker";
import { PdfBaseUrl } from "../../../Utils/Utils";
import { Spinner } from "react-bootstrap";

const RecoverAdminUsers = () => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
  const navigate = useNavigate();
  const [userList, setUserList] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0); // Total number of pages
  const [orderBy, setOrderBy] = useState("desc");
  const [recoverData, setRecoverData] = useState();
  const [apiMessage, setApiMessage] = useState({ type: "", message: "" });
  const [tableDataLoaded, setTableDataLoaded] = useState(false);
  const [searchTerm, setSearchTerm] = useState();
  const [sortBy, setSortBy] = useState("deleted_at");
  const [searchData, setSearchData] = useState("");
  const [pdfDownLoading, setPdfDownLoading] = useState(false);

   useEffect(() => {
      userDataList("deleted_at", "1", "desc", "");
    }, []);

  const grantPermissionForRecoverAdminUser = checkPermission(
    permissionsConfig.editRecoverAdminUser.role,
    permissionsConfig.editRecoverAdminUser.action,
    permissionsConfig.editRecoverAdminUser.type
  );

  const userDataList = async (sortBy, pageNo, orderBy, searchBy) => {
    try {
      setSearchData(searchBy);
      setOrderBy(orderBy);
      setSortBy(sortBy);
      const usersListData = await getDeletedUsers(sortBy, orderBy, searchBy, pageNo, "1", "admin");
      if (usersListData.status == 200) {
        setTotalPages(
          Math.ceil(usersListData?.data?.total / usersListData?.data?.per_page)
        );
        setCurrentPage(pageNo > 0 ? pageNo - 1 : pageNo);
        setUserList(usersListData?.data?.data);
      }
      setTableDataLoaded(true)
    } catch (err) {
      setApiMessage({ type: "error", message: err?.message });
      setTableDataLoaded(true)
    }
  };

  const handleEnableDisable = async (e, item) => {
    try {
      const formData = new FormData();
      formData.append("user_id", item?.id);
      formData.append("status", e?.value);
      const data = await getEnableDisableUser(formData);
      if (data?.status == 200) {
        setApiMessage({ type: "success", message: data.message });
        userDataList(sortBy, currentPage + 1, orderBy, searchData);
      }
    } catch (error) {
      setApiMessage({ type: "error", message: error.message });
    }
  };

  const searchSortFromList = async (e, sortBy) => {
    // try {
    //   const searchBy = e.target.value ? e.target.value : "";
    //   const validInput = /^[A-Za-z\s]*$/;
    //   if (!validInput.test(searchBy)) {
    //     e.target.value = searchBy.replace(/[^A-Za-z\s]/g, "");
    //     return;
    //   }
    //   let tabList = [];
    //   let data = [] ;
    //   if(!searchBy){
    //     tabList = await getRecoverAdminUsers(1);
    //     data = tabList?.data?.data;
    //   } else {
    //     setOrderBy(orderBy === "asc" ? "desc" : "asc");
    //     tabList = await getRecoverAdminUsersSort(sortBy, orderBy, searchBy);
    //     data = tabList?.data?.data;
    //   }
    //   setUserList(data);
    // } catch (err) {
    //   //console.log("error on categoryList: ", err);
    // }
  };
  const recoverUser = async (item) => {
    try {
      const formData = new FormData();
      formData.append("user_id", item?.id);
      const data = await recoverAdminUser(formData);
      if (data.status == 200) {
        setRecoverData("");
        userDataList(sortBy, currentPage, orderBy, searchData);
        setApiMessage({ type: "success", message: data.message });
      } else {
        setRecoverData("");
      }
    } catch (error) {
      //console.error(error);
      setRecoverData("");
      setApiMessage({ type: "error", message: error.message });
    }
  };

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

  const pdfDownload = async () => {
      try {
        setPdfDownLoading(true)
        const response = await adminUserListPdfDeleted()
        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 adminUserListExcelDeleted()
        window.open(response?.file_path);
      } catch (err) {
        setApiMessage({ type: "error", message: err?.message })
      }
    }
        
    const csvDownload = async () => {
      try {
        const response = await adminUserListCsv()
        window.open(response?.file_path);
      } catch (err) {
        setApiMessage({ type: "error", message: err?.message })
      }
    }
        
    const exportPrint = async () => {
            try {
                const response = await adminUserListPdfDeleted()
                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>Recover Admin Users</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">Recover Admin Users </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);
                      userDataList(sortBy, 1, orderBy, e.target.value)
                    }}
                  />
                  {searchTerm && (
                    <button
                      className="btn btn-clear position-absolute"
                      onClick={(e) => {
                        setSearchTerm("");
                        userDataList(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="ad-reg-table">
                <Table size="sm" className="ad-cat-table mt-4">
                  <thead>
                    <tr>
                      <th className="ad-sno">S. No</th>
                      {/* <th
                        className="ad-long "
                        onClick={(e) => searchSortFromList(e, "unique_id")}
                      >
                        Customer Id
                        <span>
                          <i className="fa-solid fa-sort"></i>
                        </span>
                      </th> */}
                      <th
                        className="ad-long cursor-pointer"
                        onClick={(e) => userDataList(
                          "name",
                          currentPage + 1,
                          orderBy === "asc" ? "desc" : "asc",
                          searchData
                        )}
                      >
                        Name
                        <span>
                          <i className="fa-solid fa-sort"></i>
                        </span>{" "}
                      </th>
                      <th className="ad-long ">Email Id</th>
                      <th className="ad-long ">Mobile Number</th>
                      <th
                        className="ad-long cursor-pointer"
                        onClick={(e) => userDataList(
                          "deleted_at",
                          currentPage + 1,
                          orderBy === "asc" ? "desc" : "asc",
                          searchData
                        )}
                      >
                        Deleted At{" "}
                        <span>
                          <i className="fa-solid fa-sort"></i>
                        </span>
                      </th>
                      {/* <th className="ad-long">Status</th> */}
                      {grantPermissionForRecoverAdminUser ? <th className="ad-long">Action</th> : <></>}

                      {/* <th className='ad-long' style={{ paddingLeft: '30px' }}>Actions</th> */}
                      {/* {(grantPermissionForEditRoles) ? (<>
                                                <th className='ad-long'>Status</th>

                                                <th className='ad-long' style={{ paddingLeft: '30px' }}>Actions</th></>
                                            ) : ''} */}
                    </tr>
                  </thead>
                  <tbody>
                    {userList?.length > 0 ? (
                      userList?.map((item, index) => (
                        <tr key={index}>
                          <td>{currentPage * 10 + (index + 1)}</td>
                          {/* <td>{item?.unique_id ? item?.unique_id : "--"}</td> */}
                          <td>{item?.name ? item?.name : "--"}</td>
                          <td>{item?.email ? item?.email : "--"}</td>
                          <td>
                            {item?.mobile_number ? item?.mobile_number : "--"}
                          </td>
                          <td>
                            {item?.deleted_at
                              ? formatDateWithSlash(item?.deleted_at)
                              : "--"}
                          </td>
                          {/* <td>
                            <label className="switch">
                              <input
                                type="checkbox"
                                checked={item?.status == 1}
                                onChange={(e) =>
                                  handleEnableDisable(
                                    e.target.checked
                                      ? { value: "1" }
                                      : { value: "0" },
                                    item
                                  )
                                }
                              />
                              <span className="slider"></span>
                            </label>
                          </td> */}
                          {grantPermissionForRecoverAdminUser ? <td>
                            <OverlayTrigger
                              placement="top"
                              overlay={
                                <Tooltip id={`recover-tooltip-${item.id}`}>
                                  Recover
                                </Tooltip>
                              }
                            >
                              <span
                                className="ad-cat-delete"
                                onClick={() => setRecoverData(item)}
                              >
                                <CgSync />
                              </span>
                            </OverlayTrigger>
                          </td> : <></>}
                          {/* {(grantPermissionForEditRoles) ? (<>
                                                    <td>
                                                        <label className="switch">
                                                            <input
                                                                type="checkbox"
                                                                checked={item?.status == 1}
                                                                onChange={(e) => handleEnableDisable(e.target.checked ? { value: "1" } : { value: "0" }, item)}
                                                            />
                                                            <span className="slider"></span>
                                                        </label>
                                                    </td>

                                                   <td>
                                                        <div className='icon-col'>
                                                            <OverlayTrigger
                                                                placement="top"
                                                                overlay={<Tooltip id={`edit-tooltip-${item.id}`}>Edit</Tooltip>}
                                                            >
                                                                <span
                                                                    className="ad-cat-edit"
                                                                    onClick={() => navigate("/admin/roles/update", { state: item })}
                                                                >
                                                                    <EditIcon />
                                                                </span>
                                                            </OverlayTrigger>

                                                            <OverlayTrigger
                                                                placement="top"
                                                                overlay={<Tooltip id={`delete-tooltip-${item.id}`}>Delete</Tooltip>}
                                                            >
                                                                <span
                                                                    className="ad-cat-delete"
                                                                    onClick={() => setDeleteData(item)}
                                                                >
                                                                    <DeleteIcon />
                                                                </span>
                                                            </OverlayTrigger>
                                                            <OverlayTrigger
                                                                placement="top"
                                                                overlay={<Tooltip id={`permission-tooltip-${item.id}`}>Permissions</Tooltip>}
                                                            >
                                                                <span
                                                                    className="ad-cat-permission"
                                                                    onClick={() => {
                                                                        navigate("/admin/roles/permissions/edit", { state: item })
                                                                    }}>
                                                                    <PermissionIcon />
                                                                </span>
                                                            </OverlayTrigger>
                                                        </div>
                                                    </td> 
                                                </>) : ''} */}
                        </tr>
                      ))
                    ) : tableDataLoaded ? (
                      <NotFoundTable colSpan="8"></NotFoundTable>
                    ) : (
                      <></>
                    )}
                  </tbody>
                </Table>
                {totalPages > 1 && userList?.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>
      <Modal show={recoverData?.id} onHide={() => setRecoverData("")}>
        <Modal.Header closeButton>
          <Modal.Title>Are you sure you want to recover this User ?</Modal.Title>
        </Modal.Header>
        <Modal.Footer>
          <div className="suf-btn p-2 d-flex flex-row">
            <button
              className="mx-2"
              onClick={() => {
                recoverUser(recoverData);
              }}
            >
              Yes
            </button>
            <button
              className="suf-can-butt no-btn mx-2"
              onClick={() => setRecoverData("")}
            >
              No
            </button>
          </div>
        </Modal.Footer>
      </Modal>
    </AdminDashboard>
  );
};

export default RecoverAdminUsers;