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

const View = () => {
    const [eventKey, setEventKey] = useState("SELL");
    const [showModal, setShowModal] = useState(false);
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);
    const [exportType, setExportType] = useState("csv");
    const [type1, setType1] = useState("SELL");
    const [type2, setType2] = useState("PENDING");
    const [category, setCategory] = useState("");
    const [categoryList, setCategoryList] = useState([]);

    useEffect(() => {
        getCategoryList();
    }, [])

    const getCategoryList = () => {
        WebService.getAPI({
            action: `admin/list/machine-types`,
            body: null,
            isShowError: true
        }).then((res: any) => {
            setCategoryList(res.list)
        }).catch((Error: any) => {
            return false;
        })
    }

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

    const closeExportModal = () => {
        setCategory("");
        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") : "";

        WebService.addLoader("export");
        WebService.downloadFileAPI({
            action: `admin/reports/${type1}?start_date=${formattedStartDate}&end_date=${formattedEndDate}&export=${exportType}&keyword=&cat_id=${category}&status=${type2}`,
            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=" Advertisement" 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="SELL" title="Sell">
                    {eventKey === "SELL" && <CommonScreen screen={eventKey} />}

                </Tab>
                <Tab eventKey="RENT" title="Rent">
                    {eventKey === "RENT" && <CommonScreen screen={eventKey} />}
                </Tab>
            </Tabs>

            <Modal show={showModal} onHide={closeExportModal}>
                <Modal.Header closeButton>
                    <Modal.Title> Export Advertisement</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 p-3">
                            <Form.Select
                                id="cmsSelect"
                                className="form-select"
                                value={category}
                                onChange={(e: any) => {
                                    setCategory(e.target.value)
                                }}
                            >
                                <option disabled value={""}>Select Category</option>
                                {categoryList && categoryList.length > 0 && categoryList.map((item: any, index: number) => {
                                    return (
                                        <option key={item.value} value={item.id}>{item.name}</option>
                                    );
                                })};
                            </Form.Select>
                        </Row>

                        <Row className="mt-3 mb-3">
                            <Col md={3}>
                                <Form.Label>
                                    <strong>
                                        Type
                                    </strong>
                                </Form.Label>
                                <Form.Check
                                    type="radio"
                                    label="Sell"
                                    name="type1"
                                    value="SELL"
                                    checked={type1 === "SELL"}
                                    onChange={(e) => setType1(e.target.value)}
                                />
                                <Form.Check
                                    type="radio"
                                    label="Rent"
                                    name="type1"
                                    value="RENT"
                                    checked={type1 === "RENT"}
                                    onChange={(e) => setType1(e.target.value)}
                                />
                                <Form.Check
                                    type="radio"
                                    label="Boost Ads"
                                    name="type1"
                                    value="BOOSTED_ADS"
                                    checked={type1 === "BOOSTED_ADS"}
                                    onChange={(e) => setType1(e.target.value)}
                                />
                            </Col>

                            <Col md={3}>
                                <Form.Label>
                                    <strong>
                                        Status
                                    </strong></Form.Label>
                                <Form.Check
                                    type="radio"
                                    label="Pending"
                                    name="jobType"
                                    value="PENDING"
                                    checked={type2 === "PENDING"}
                                    onChange={(e) => setType2(e.target.value)}
                                />
                                <Form.Check
                                    type="radio"
                                    label="Approved"
                                    name="jobType"
                                    value="APPROVED"
                                    checked={type2 === "APPROVED"}
                                    onChange={(e) => setType2(e.target.value)}
                                />
                                <Form.Check
                                    type="radio"
                                    label="Rejected"
                                    name="jobType"
                                    value="REJECTED"
                                    checked={type2 === "REJECTED"}
                                    onChange={(e) => setType2(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 View;