'use client';
import React, { useEffect, useState } from "react";
import { Button, Col, Dropdown, Form, InputGroup, Modal, OverlayTrigger, Row, Tab, Tabs, Tooltip } from "react-bootstrap";
import PendingListing from "./PendingListing";
import ApprovedListing from "./ApprovedListing";
import PageTitle from "@/Common/PageTitle";
import moment from "moment";
import WebService from "@/Services/WebService";
import DatePicker from "react-datepicker";

const ContactSupportListing = () => {
    const [eventKey, setEventKey] = useState("PENDING");
    const [showModal, setShowModal] = useState(false);
    const [exportType, setExportType] = useState("csv");
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);
    const [jobType, setJobType] = useState("PENDING");

    const openExportModal = () => {
        setShowModal(true);
    };

    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,
        };

        WebService.addLoader("export");

        WebService.downloadFileAPI({
            action: `admin/reports/CUSTOMER_QUERIES?start_date=${params.start_date}&end_date=${params.end_date}&export=${params.export_type}&status=${jobType}`,
            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 (
        <>
            <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={" Customer Queries"} backArrow={false} />
                        </div>
                    </Col>
                    <Col>
                        <div className="float-right">
                            <Button onClick={openExportModal}>
                                Export
                            </Button>
                        </div>
                    </Col>
                </Row>
            </div>
            <Tabs
                activeKey={eventKey}
                id="uncontrolled-tab-example"
                className="mb-3"
                onSelect={(e: any) => setEventKey(e)}
            >
                <Tab eventKey="PENDING" title="Pending">
                    {eventKey === "PENDING" && <PendingListing type={"PENDING"} />}

                </Tab>
                <Tab eventKey="RESOLVED" title="Resolved">
                    {eventKey === "RESOLVED" && <ApprovedListing type={"RESOLVED"} />}
                </Tab>
            </Tabs>


            <Modal show={showModal} onHide={closeExportModal}>
                <Modal.Header closeButton>
                    <Modal.Title> Export Customer Queries</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>
                                        Type
                                    </strong></Form.Label>
                                <Form.Check
                                    type="radio"
                                    label="Pending"
                                    name="jobType"
                                    value="PENDING"
                                    checked={jobType === "PENDING"}
                                    onChange={(e) => setJobType(e.target.value)}
                                />
                                <Form.Check
                                    type="radio"
                                    label="Resolved"
                                    name="jobType"
                                    value="RESOLVED"
                                    checked={jobType === "RESOLVED"}
                                    onChange={(e) => setJobType(e.target.value)}
                                />
                            </Col>
                            <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>
                        </Row>

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

export default ContactSupportListing;