import { React, useState, useContext } from "react";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Button } from "primereact/button";
import { useRef } from "react";
import axios from "axios";
import { Toast } from "primereact/toast";
import { useEffect } from "react";
import { ConfirmPopup, confirmPopup } from "primereact/confirmpopup";
import { authUser } from "@/Components/AuthProvider";
import { Dropdown } from "primereact/dropdown";
import { Calendar } from "primereact/calendar";
import { renderPDF } from "@/Utils/helper";

function UserActivityHistory({ auth, users }) {
    const { permission, warehouseList } = useContext(authUser);
    const [startDate, setStartDate] = useState();
    const [endDate, setEndDate] = useState();
    const [status, setStatus] = useState([]);
    const [customer, setCustomer] = useState([]);
    const [user, setUser] = useState([]);
    const [customerId, setCustomerID] = useState(null);
    const toast = useRef(null);
    const [searchCustomer, setSearchValue] = useState({
        customer: "",
    });

    const search = async () => {
        let form = new FormData();
        form.append("start", startDate);
        form.append("end", endDate);
        form.append("status", status);
        form.append("userId", user);
        let res = await axios.post("user-activity-report-filter", form);
        return res.data;
    };

    const openInNewTab = async () => {
        const data = await search();
        const pdfDoc = await window.generatePDFView(
            data,
            window.reportModes.activityLogColumns,
            false,
            "User Activity History",
            startDate,
            endDate
        );
        renderPDF(pdfDoc, "UserActivityHistory.pdf");
    };

    const filterCustomer = (event) => {
        setTimeout(() => {
            axios
                .post(route("customer-search"), { data: event.query })
                .then((response) => {
                    setCustomer(response.data.customer);
                });
        }, 250);
    };

    const customerTemplateIOptionList = (option) => {
        return (
            <div className="country-item">
                <div>
                    {option.name} ({option.code}) ({option.user_type})
                </div>
            </div>
        );
    };

    return (
        <AuthenticatedLayout
            user={auth.user}
            header={
                <>
                    <h2 className="text-skin-header font-medium ">
                        User Activity History
                    </h2>{" "}
                    <p className="text-skin-sub-header font-semibold text-xs">
                        {" "}
                        Home - Report - User Activity History
                    </p>
                </>
            }
            headerButton={<></>}
        >
            <Toast ref={toast} />
            {/* View Table*/}
            <div className="card min-h-screen">
                <div className="bg-gray-100  flex items-center justify-center py-12 px-2 sm:px-6 lg:px-8">
                    <div className="w-full max-w-5xl bg-white rounded-2xl shadow-lg border border-gray-200 p-4 sm:p-8 md:p-10">
                        <h2 className="text-2xl md:text-3xl font-bold text-center text-gray-800 mb-8 md:mb-10 tracking-tight">
                            Filter Report Criteria
                        </h2>

                        <div className="grid grid-cols-12 gap-6">
                            <div className="col-span-12 sm:col-span-4">
                                <label className="block text-sm font-medium text-gray-600 mb-2">
                                    Starting Date
                                </label>
                                <Calendar
                                    value={startDate}
                                    onChange={(e) => setStartDate(e.value)}
                                    className="w-full h-[41px] text-[14px] rounded-lg shadow-sm"
                                />
                            </div>
                            <div className="col-span-12 sm:col-span-4">
                                <label className="block text-sm font-medium text-gray-600 mb-2">
                                    End Date
                                </label>
                                <Calendar
                                    value={endDate}
                                    onChange={(e) => setEndDate(e.value)}
                                    className="w-full h-[41px] text-[14px] rounded-lg shadow-sm"
                                />
                            </div>
                            <div className="col-span-12 sm:col-span-4">
                                <label className="block text-sm font-medium text-gray-600 mb-2">
                                    Select User
                                </label>

                                <Dropdown
                                    value={user}
                                    onChange={(e) => {
                                        setUser(e.value);
                                    }}
                                    options={users}
                                    optionLabel="name"
                                    optionValue="id"
                                    placeholder="Select a User"
                                    className="w-full h-11"
                                    filter
                                    showClear
                                />
                            </div>
                            <div className="col-span-12 sm:col-span-4">
                                <label className="block text-sm font-medium text-gray-600 mb-2">
                                    Select Status
                                </label>

                                <Dropdown
                                    value={status}
                                    onChange={(e) => {
                                        setStatus(e.value);
                                    }}
                                    options={[
                                        {
                                            label: "All",
                                            value: "all",
                                        },
                                        {
                                            label: "Only Login",
                                            value: "login",
                                        },
                                    ]}
                                    showClear
                                    optionLabel="label"
                                    optionValue="value"
                                    placeholder="Select a Status"
                                    className="w-full h-11"
                                    filter
                                />
                            </div>
                        </div>
                        <div className="mt-10 flex justify-center">
                            <Button
                                type="button"
                                label="🔍 View Report"
                                onClick={openInNewTab}
                                className="px-6 py-3 rounded-xl bg-blue-600 text-white font-semibold shadow hover:bg-blue-700 transition duration-200 text-sm"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}

export default UserActivityHistory;
