'use client';
import {
    Row,
    Col,
    InputGroup,
    Form,
    Button,
    Modal
} from "react-bootstrap";
import { HiMiniChevronUpDown } from "react-icons/hi2";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import { FiEdit, FiEye, FiSearch, FiTrash2 } from "react-icons/fi";
import { useRouter } from "next/navigation";
import WebService from "@/Services/WebService";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import PageTitle from "@/Common/PageTitle";
import NoDataFound from "@/Common/NoDataFound/NoDataFound";
import RentCityPagination from "@/Common/Pagination/RentCityPagination";
import DeleteModal from "@/Common/DeleteModal/DeleteModal";
import moment from "moment";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const AppUserListing = (props: any) => {

    const [getUserList, setUserList] = useState<any>([]);
    const [totalCount, setTotalCount] = useState<any>(0);
    const [pageLoader, setPageLoader] = useState<any>(false);
    const [offset, setOffset] = useState<any>(0);
    const [keyword, setKeyword] = useState<any>("");
    const [action, setAction] = useState<string>("");
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [orderBy, setOrderBy] = useState("DESC");
    const [sortBy, setSortBy] = useState("id");
    const navigate = useRouter();
    const [currentPage, setCurrentPage] = useState(1);
    const [showModal, setShowModal] = useState(false);
    const [exportType, setExportType] = useState("csv");
    const [jobType, setJobType] = useState("APP_USERS");
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);
    const [isBlockExportUser, setIsBlockExportUser] = useState(false);

    const getSrNo = (index: number) => {
        const itemsPerPage = 10;
        const offset = (currentPage - 1) * itemsPerPage;
        return offset + index + 1;
    };

    const handleSort = (column: string) => {
        if (sortBy == column) {
            setOrderBy(prev => (prev === 'DESC' ? 'ASC' : 'DESC'));
        } else {
            setSortBy(column);
            setOrderBy('DESC');
        }
    };

    const handleCloseModal = () => {
        setShowDeleteModal(false);
    };

    useEffect(() => {
        GetList(keyword);
    }, [offset, sortBy, orderBy]);

    const GetList = (
        keyword: any,
    ) => {
        setPageLoader(true);
        return WebService.CommonApi({
            method: "GET",
            action: `admin/app/users?keyword=${keyword}&offset=${offset}&order_by=${orderBy}&sort_by=${sortBy}`,
            body: null,
            isShowError: false,
        })
            .then((res: any) => {
                setUserList(res?.list);
                setTotalCount(res?.count ?? 0);
                setPageLoader(false);
                setCurrentPage(res?.current_page);
            })
            .catch((error: any) => {
                setPageLoader(false);
                toast.error(error?.response?.data?.message);
                return error;
            });
    };

    const updateIsOperator = (id: any) => {
        setPageLoader(true);
        WebService.putAPI({
            action: `admin/switch/operator/${id}`,
            body: null,
            isShowError: true
        }).then((res: any) => {
            setPageLoader(false);
            toast.success(res.message);
            GetList(keyword);
        }).catch((error: any) => {
            setPageLoader(false);
            return false;
        })
    }

    const updateStatus = (id: any) => {
        setPageLoader(true);
        WebService.putAPI({
            action: `admin/block/${id}`,
            body: null,
            isShowError: true
        }).then((res: any) => {
            setPageLoader(false);
            toast.success(res.message);
            GetList(keyword);
        }).catch((error: any) => {
            setPageLoader(false);
            return false;
        })
    }

    const openDeleteModel = (deleteId: any) => {
        setAction(`admin/app/users/${deleteId}`);
        setShowDeleteModal(true);
    };

    const openExportModal = () => {
        setShowModal(true);  // Show the modal when export button is clicked
    };

    const closeExportModal = () => {
        setStartDate(null);
        setEndDate(null);
        setShowModal(false);
    };

    const handleExport = () => {
        const formattedStartDate = startDate ? moment(startDate).format("YYYY-MM-DD") : "";
        const formattedEndDate = endDate ? moment(endDate).format("YYYY-MM-DD") : "";

        const params = {
            start_date: formattedStartDate,
            end_date: formattedEndDate,
            export_type: exportType,
            job_type: jobType,
        };

        WebService.addLoader("export");

        WebService.downloadFileAPI({
            action: `admin/reports/${params.job_type}?start_date=${params.start_date}&end_date=${params.end_date}&export=${params.export_type}`,
            body: null,
            isShowError: true,
        })
            .then((res: any) => {
                WebService.removeLoader("export");
                closeExportModal();

                try {
                    let blob;

                    if (exportType === "csv") {
                        blob = new Blob([res], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });

                        const url = window.URL.createObjectURL(blob);
                        const link = document.createElement("a");
                        link.href = url;
                        link.download = `App_user_report_${Date.now()}.xlsx`;
                        link.click();
                        window.URL.revokeObjectURL(url);

                    } else if (exportType === "pdf") {
                        blob = new Blob([res], { type: "application/pdf" });

                        const url = window.URL.createObjectURL(blob);
                        const link = document.createElement("a");
                        link.href = url;
                        link.download = `App_user_report_${Date.now()}.pdf`;
                        link.click();
                        window.URL.revokeObjectURL(url);
                    }
                } catch (err) {
                    console.log("Download Error →", err);
                }
            })
            .catch((err: any) => {
                WebService.removeLoader("export");
                console.log("Error:", err);
            });
    };

    return (
        <>
            {pageLoader && <CompoLoader />}
            <div className="page-accounting pb-3">
                <div className="sticky-top-mo">
                    <Row className="align-items-center">
                        <Col lg={8} xs={12}>
                            <div className="d-flex gap-2 align-items-center">
                                <PageTitle title=" App Users" backArrow={false} />
                            </div>
                        </Col>
                    </Row>
                </div>
                <div className="pt-0 pt-lg-2">
                    <Row className="">
                        <Col lg={5} xs={10} className="d-flex gap-2 align-items-sm-center">
                            <InputGroup className="search-box mb-lg-2 mb-2">
                                <InputGroup.Text id="basic-addon1">
                                    <FiSearch
                                        className="icon"
                                        onClick={() => GetList(keyword)}
                                    />
                                </InputGroup.Text>
                                <Form.Control
                                    placeholder="Search by keyword...."
                                    onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                                        if (e.key === "Enter") {
                                            setKeyword(e.currentTarget.value);
                                            GetList(
                                                e.currentTarget.value
                                            );
                                        }
                                    }}
                                />
                            </InputGroup>
                        </Col>
                        <Col>
                            <div className="float-right">
                                <div className="gap-3 d-flex">
                                    <Button onClick={() => {
                                        navigate.push("/manage-app-user/add-app-user")
                                    }}>
                                        Add App User
                                    </Button>
                                    <Button onClick={openExportModal}>
                                        Export
                                    </Button>
                                </div>
                            </div>
                        </Col>
                    </Row>
                    <div className="table-style-1 table-employee table-responsive position-relative">
                        <table className="table">
                            <thead className="">
                                <tr>
                                    <th>
                                        Sr.No{" "}
                                    </th>
                                    <th onClick={() => handleSort('name')}>
                                        Name{" "}
                                        <span className="sorting-icon" style={{ cursor: "pointer" }}>
                                            <HiMiniChevronUpDown />
                                        </span>
                                    </th>
                                    <th>
                                        Email{" "}
                                    </th>
                                    <th>
                                        Mobile Number{" "}
                                    </th>
                                    <th>
                                        Is Operator
                                    </th>
                                    <th>
                                        Is Block
                                    </th>
                                    <th className="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {getUserList && getUserList.length > 0 ? (
                                    getUserList &&
                                    getUserList?.map((data: any, index: any) => {
                                        return (
                                            <tr key={index}>
                                                <td className="col-id">
                                                    {getSrNo(index)}
                                                </td>

                                                <td className="col-designation">
                                                    {data?.name}
                                                </td>
                                                <td className="col-designation">
                                                    {data?.email}
                                                </td>
                                                <td className="col-designation">
                                                    {data?.dial_code + " " + data?.mobile_number}
                                                </td>
                                                <td style={{ cursor: "pointer", justifyContent: "center", justifyItems: "center" }}>
                                                    <Form.Check
                                                        type="switch"
                                                        id="active"
                                                        checked={data?.is_operator == 1 ? true : false}
                                                        onChange={(e: any) => {
                                                            updateIsOperator(data?.id);
                                                        }}
                                                        label="" />
                                                </td>
                                                <td style={{ cursor: "pointer", justifyContent: "center", justifyItems: "center" }}>
                                                    <Form.Check
                                                        type="switch"
                                                        id="active"
                                                        checked={data?.is_block == 1 ? true : false}
                                                        onChange={(e: any) => {
                                                            updateStatus(data?.id);
                                                        }}
                                                        label="" />
                                                </td>
                                                <td className="col-designation" style={{ cursor: "pointer" }}>
                                                    <div className="d-flex text-center">
                                                        <FiEye
                                                            size={25}
                                                            className="p-1 me-2 text-primary text-center"
                                                            onClick={() => navigate.push(`/manage-app-user/edit-app-user/${data?.uuid}`)}
                                                        />
                                                        {/* <FiTrash2 className="p-1 text-danger"
                                                            onClick={(e: any) => {
                                                                e.preventDefault();
                                                                openDeleteModel(data?.uuid);
                                                            }}
                                                            size={25}
                                                        /> */}
                                                    </div>
                                                </td>
                                            </tr>
                                        );
                                    })
                                ) : !pageLoader && (
                                    <tr>
                                        <td colSpan={8}>
                                            <NoDataFound />
                                        </td>
                                    </tr>
                                )}
                            </tbody>
                        </table>
                        {totalCount > 10 && (
                            <div className="float-end me-2">
                                <RentCityPagination
                                    totalCount={totalCount}
                                    itemCountPerPage={10}
                                    changePage={(page: any) => {
                                        setOffset(page - 1);
                                    }}
                                />
                            </div>
                        )}
                    </div>
                </div>
                <DeleteModal
                    show={showDeleteModal}
                    getApiCall={() => {
                        GetList(keyword);
                    }}
                    closeModal={(flag: any) => {
                        handleCloseModal();
                    }}
                    action={action}
                />
            </div>

            <Modal show={showModal} onHide={closeExportModal}>
                <Modal.Header closeButton>
                    <Modal.Title> Export App User</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form>
                        {/* Start Date */}
                        <Row>
                            <Col>
                                <Form.Group>
                                    <Form.Label><strong>Start Date</strong></Form.Label>
                                    <DatePicker
                                        selected={startDate}
                                        onChange={(date: any) => setStartDate(date)}
                                        dateFormat="dd-MM-yyyy"
                                        className="form-control"
                                        placeholderText="Select Date"
                                    />
                                </Form.Group>
                            </Col>
                            {/* End Date */}
                            <Col>
                                <Form.Group>
                                    <Form.Label> <strong>End Date</strong></Form.Label>
                                    <DatePicker
                                        selected={endDate}
                                        onChange={(date: any) => setEndDate(date)}
                                        dateFormat="dd-MM-yyyy"
                                        className="form-control"
                                        placeholderText="Select Date"
                                    />
                                </Form.Group>
                            </Col>
                        </Row>

                        <Row className="mt-3">
                            <Col md={3}>
                                <Form.Label>
                                    <strong>
                                        Export Type
                                    </strong>
                                </Form.Label>
                                <Form.Check
                                    type="radio"
                                    label="Excel"
                                    name="exportType"
                                    value="csv"
                                    checked={exportType === "csv"}
                                    onChange={(e) => setExportType(e.target.value)}
                                />
                                <Form.Check
                                    type="radio"
                                    label="PDF"
                                    name="exportType"
                                    value="pdf"
                                    checked={exportType === "pdf"}
                                    onChange={(e) => setExportType(e.target.value)}
                                />
                            </Col>
                            <Col md={3}>
                                <Form.Label>
                                    <strong>
                                        Job Type
                                    </strong></Form.Label>
                                <Form.Check
                                    type="radio"
                                    label="Jobseeker"
                                    name="jobType"
                                    value="JOB_SEEKERS"
                                    checked={jobType === "JOB_SEEKERS"}
                                    onChange={(e) => setJobType(e.target.value)}
                                />
                                <Form.Check
                                    type="radio"
                                    label="Operator"
                                    name="jobType"
                                    value="OPERATORS"
                                    checked={jobType === "OPERATORS"}
                                    onChange={(e) => setJobType(e.target.value)}
                                />
                                <Form.Check
                                    type="radio"
                                    label="Customer"
                                    name="jobType"
                                    value="CUSTOMERS"
                                    checked={jobType === "CUSTOMERS"}
                                    onChange={(e) => setJobType(e.target.value)}
                                />
                                <Form.Check
                                    type="radio"
                                    label="All"
                                    name="jobType"
                                    value="APP_USERS"
                                    checked={jobType === "APP_USERS"}
                                    onChange={(e) => setJobType(e.target.value)}
                                />
                            </Col>
                            <Col md={3} className="d-flex text-nowrap gap-2">
                                Is Block User
                                <Form.Check
                                    type="switch"
                                    checked={isBlockExportUser}
                                    onChange={((e: any) => setIsBlockExportUser(e.target.checked))}
                                />
                            </Col>
                        </Row>

                        <Button
                            variant="primary"
                            id="export"
                            onClick={() => {
                                handleExport();
                            }}
                        >
                            Export
                        </Button>
                    </Form>
                </Modal.Body>
            </Modal>

        </>
    );
}

export default AppUserListing;