import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { useEffect, useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import PaginationTitle from "../pages/PaginationTitle";
import { Paginator } from "primereact/paginator";
import { ScaleLoader } from "react-spinners";
import BulkImportRejectModal from "../modal/BulkImportRejectModal";
import ConfirmModalAlert from "../modal/ConfirmModalAlert";
import { toAcceptBulkFile, toCancelBulkFile } from "@/services/bulkUploadRequest";
import "primereact/resources/primereact.css";
import "primereact/resources/themes/saga-blue/theme.css";
import "primeicons/primeicons.css";
import "rsuite/dist/rsuite.min.css";
import BulkImportReasonModal from "../modal/BulkImportReasonModal";
import { useSession } from "next-auth/react";

interface Prop {
    loading: boolean;
    data: any;
    requestMetaData: any;
    setQueryDataObj: any;
    setRefreshBulkFileListing: any;
}

export default function Datatable(props: Prop) {

    const [totalRecords, setTotalRecords] = useState(0);
    const [sortField, setSortField] = useState("");
    const [sortOrder, setSortOrder] = useState(null);
    const [first, setFirst] = useState(0);
    const [perPageDataShow, setPerPageDataShow] = useState(0);
    const [perPageNumber, setPerPageNumber] = useState(1);
    const [isRejectModalStatus, setIsRejectModalStatus] = useState(false);
    const [isAcceptModalStatus, setIsAcceptModalStatus] = useState(false);
    const [isReasonModalStatus, setIsReasonModalStatus] = useState(false);
    const [selectedTableRowData, setSelectedTableRowData] = useState<any>("");
    const [reasonTableRowData, setReasonTableRowData] = useState<any>("");
    const [rows, setRows] = useState(10);
    const [confirmModalType, setConfirmModalType] = useState<any>("");
    const userType: any = useSession();

    useEffect(()=>{
        setTotalRecords(props.data.length);
        setPerPageDataShow(props?.requestMetaData?.per_page);
        setTotalRecords(props?.requestMetaData?.total);
    }, [props.data])

    const onPageChange = (event: any) => {
        let perpage: any = event.page + 1;
        setFirst(event.first);
        setRows(event.rows);
        setPerPageNumber(perpage);
        props.setQueryDataObj({pageno: perpage, paginate_count: event.rows})
    };

    const onSortChange = (e: any) => {
        setSortField(e.sortField);
        setSortOrder(e.sortOrder);
    };

    const handleReject = (tableRowData: any)=>{
        setIsRejectModalStatus(true);
        setSelectedTableRowData(tableRowData);
    }

    const handleModalClosefn = ()=>{
        setIsRejectModalStatus(false);
        setIsAcceptModalStatus(false);
        setIsReasonModalStatus(false);
    }

    const handleAccept = (tableRowData: any)=>{
        setIsAcceptModalStatus(true);
        setSelectedTableRowData(tableRowData);
        setConfirmModalType("accept");
    }

    const handleApproveModalfn = async () => {
      try {
        const makePayload = {
          file_id: selectedTableRowData?.id,
        };
        const response = await toAcceptBulkFile(makePayload);
        if (response?.status === 'success') {
          props.setRefreshBulkFileListing((prev: boolean) => !prev);
          props.setQueryDataObj((prev: any) => ({
            ...prev,
            pageno: perPageNumber,
            paginate_count: rows,
          }));
          toast.success("The file has been successfully approved", {
            position: toast.POSITION.TOP_CENTER,
          });
          setIsAcceptModalStatus(false);
        } else {
          toast.error(response?.message ?? 'Approval failed', {
            position: toast.POSITION.TOP_CENTER,
          });
        }
      } catch (error) {
        console.error("Approval process failed:", error);
        toast.error("An error occurred during the approval process", {
          position: toast.POSITION.TOP_CENTER,
        });
      }
    };

    const handleCancel = async (tableRowData: any)=>{
      setIsAcceptModalStatus(true);
      setSelectedTableRowData(tableRowData);
      setConfirmModalType("cancel");
    }

    const handleCancelModalfn = async ()=>{
      try {
        const makePayload = {
          file_id: selectedTableRowData?.id,
        };
        const responce = await toCancelBulkFile(makePayload);
        props.setRefreshBulkFileListing(true);
        if (responce?.status === 'success') {
          props.setRefreshBulkFileListing(false);
          props.setQueryDataObj({ pageno: perPageNumber, paginate_count: rows });
          toast.success("The file has been successfully canceled", {
            position: toast.POSITION.TOP_CENTER,
          });
          setIsAcceptModalStatus(false);
        } else {
          toast.error(responce?.message ?? 'Cancelation failed', {
            position: toast.POSITION.TOP_CENTER,
          });
        }
      } catch (error) {
        console.error("Cancel process failed:", error);
        toast.error("An error occurred during the cancelation process", {
          position: toast.POSITION.TOP_CENTER,
        });
      }
    }
      
    const handleModalDatafn = () =>{
      props.setQueryDataObj({pageno: perPageNumber, paginate_count: rows});
    }

    const handleReason = (tableRowData: any)=>{
        setIsReasonModalStatus(true);
        setReasonTableRowData(tableRowData);
    }

    return (
        <div>
            <ToastContainer />
            <div className="card table_height">
                {props.loading && (
                    <div id="loader_table">
                      <ScaleLoader color="#3180f3" className="table_loader" />
                    </div>
                )}
                <DataTable
                    value={props?.data}
                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport"
                    first={first}
                    rows={rows}
                    sortField={sortField}
                    sortOrder={sortOrder}
                    onSort={onSortChange}
                    onPage={(e) => {
                      onPageChange(e);
                    } }
                    totalRecords={totalRecords}
                    emptyMessage="No record found."
                >
                    <Column className="table-header" field="username" header="Requested by" sortable />
                    <Column className="table-header" field="type" header="Type of Upload" sortable 
                        body={(rowData) => (
                            <span className="bulk-import-list-status-text">
                                {rowData?.type}
                            </span>
                        )}
                    />
                    <Column className="table-header" field="path" header="Uploaded File" sortable 
                        body={(rowData) =>{
                            let fileName = rowData?.path?.split('/').pop() || '';
                            fileName = fileName.replace(/\.csv$/i, '');
                            return (
                              <div>
                                <a href={rowData?.path}>
                                  {fileName}
                                </a>
                              </div>
                            );
                          }
                        }
                    />
                    <Column className="table-header" field="failed_count" header="Count of Records failed" sortable />
                    <Column className="table-header" field="total_count" header="Total Count of records" sortable />
                    <Column className="table-header" field="success_count" header="Success count" sortable />
                    <Column className="table-header" field="failed_record_csv" header="Records failed"  sortable
                         body={(rowData) => {
                          const fileName = rowData?.failed_record_csv?.split('/').pop() || '';
                          const match = fileName.match(/\d+/);
                          const numberOnly = match ? match[0] : '';
                          return (
                            <div>
                              <a href={rowData?.failed_record_csv}>
                                {numberOnly}
                              </a>
                            </div>
                          );
                        }} 
                    />
                    <Column className="table-header" field="created_at" header="Date and Time" sortable 
                        body = {(rowData) => {
                            if (!rowData?.created_at) return null;
                            const dateObj = new Date(rowData?.created_at);
                            const pad = (num: number) => String(num).padStart(2, '0');
                            const formattedDate = `${pad(dateObj.getMonth() + 1)}-${pad(dateObj.getDate())}-${dateObj.getFullYear()}`;
                            const formattedTime = `${pad(dateObj.getHours())}:${pad(dateObj.getMinutes())}`;
                            return <span>{formattedDate} {formattedTime}</span>;
                        }}
                    />
                    <Column className="table-header" field="status" header="Status" sortable 
                       body={(rowData) => (
                        <span className={`bulk-import-list-status-text ${rowData?.status}`}>
                          {rowData?.status}
                        </span>
                      )}
                    />
                    <Column
                        className="table-header"
                        header="Actions"
                        body={(rowData) => {
                            if (rowData?.status === 'pending') {
                              return (
                                <div className="together-class">
                                  {userType?.data?.user?.group_type === 'customers' ? (
                                      <div>
                                          <button
                                            className="btn btn-sm btn-danger"
                                            onClick={() => handleCancel(rowData)}
                                          >
                                            <i className="bi bi-trash"></i>&nbsp;Cancel
                                          </button>
                                      </div>
                                    ): (
                                      <div>
                                        <button
                                            className="btn btn-sm btn-success"
                                            onClick={() => handleAccept(rowData)}
                                        >
                                            <i className="bi bi-check"></i>&nbsp;Accept
                                        </button>
                                        &nbsp;
                                        <button
                                            className="btn btn-sm btn-warning"
                                            onClick={() => handleReject(rowData)}
                                        >
                                            <i className="bi bi-x-circle"></i>&nbsp;Reject
                                        </button>
                                      </div>
                                    )
                                  }
                                </div>
                              );
                            }else if(rowData?.status === 'rejected'){
                                return (
                                    <div>
                                        <button className="btn btn-sm btn-primary" onClick={()=>handleReason(rowData)}>
                                            <i className="bi bi-journal-text"></i>&nbsp;Reason
                                        </button>
                                    </div>
                                )
                            }else{
                                return null
                            }
                        }}
                    />
                </DataTable>
                <div className="pagination_footer">
                  <PaginationTitle first={first} totalRecords={totalRecords} perPageData={perPageDataShow}/>
                  <Paginator
                    rows={rows}
                    first={first}
                    totalRecords={totalRecords}
                    onPageChange={onPageChange}
                    rowsPerPageOptions={[10, 20, 30, 50, 100]} 
                  />
                </div>
            </div>
            <ConfirmModalAlert  
                handleDeleteModalfn = {confirmModalType === 'accept' ? handleApproveModalfn : handleCancelModalfn}
                handleModalClosefn = {handleModalClosefn}
                isModalStatus = {isAcceptModalStatus}
                isModalType = {confirmModalType}
            />
            <BulkImportRejectModal 
                handleModalClosefn = {handleModalClosefn}
                isModalStatus = {isRejectModalStatus}
                selectedTableRowData = {selectedTableRowData}
                handleModalDatafn = {handleModalDatafn}
            />
            <BulkImportReasonModal 
                handleModalClosefn = {handleModalClosefn}
                isModalStatus = {isReasonModalStatus}
                tableRowData = {reasonTableRowData}
            />
        </div>
    );
}