"use client";

import React, {useEffect, useState} from "react";
import {Dropdown, Menu, Modal} from "antd";
import {useAppDispatch, useAppSelector} from "@/lib/redux/hooks";
import AppTable, {ColumnsType} from "@/components/ui/table";
import {PaginationState, SortDirection, Status} from "@/types/common";
import AppTag from "@/components/ui/tag";
import {
    EditOutlined,
    DeleteOutlined,
    EllipsisOutlined,
    SearchOutlined,
} from "@ant-design/icons";
import {CouponDetails, CouponQueryParams} from "@/types/coupon";
import CreateCouponModal from "./create-coupon";
import UpdateCouponModal from "./update-coupon";
import {doDeleteCoupon} from "@/lib/redux/features/coupon";
import {useTranslations} from "use-intl";
import {Trash} from "lucide-react";
import AppButton from "../ui/button";
import AppInput from "../ui/input";
import {debounce} from "lodash";
import {getAuthInfo} from "@/lib/redux/features/auth";
import {UserType} from "@/types/user";
import {getAppDetail} from "@/lib/redux/features/app";
import {renderSorterTooltip} from "@/lib/utils";
import AppDropdown from "@/components/ui/dropdown";

type CouponTableProps = {
    appsId: string;
    couponList: CouponDetails[];
    couponPaging: PaginationState;
    couponQuery: CouponQueryParams;
    loading: boolean;
    fetchCouponPaging: (params?: CouponQueryParams) => void;
};
export default function ManageCouponTable({
                                              couponList,
                                              couponPaging,
                                              couponQuery,
                                              loading,
                                              fetchCouponPaging,
                                              appsId,
                                          }: CouponTableProps) {
    const dispatch = useAppDispatch();
    const authInfo = useAppSelector(getAuthInfo);
    const appDetail = useAppSelector(getAppDetail);
    const [isOpenDeleteModal, setIsOpenDeleteModal] = useState(false);
    const [isOpenUpdateModal, setOpenUpdateModal] = useState(false);
    const [couponDetail, setCouponDetail] = useState<CouponDetails>();
    const [reload, setReload] = useState(false);
    const [sortState, setSortState] = useState<{
        columnKey: string | null;
        order: 'ascend' | 'descend' | null;
    }>({
        columnKey: null,
        order: null,
    });
    const t = useTranslations("AppPage.coupon");

    const handleSearch = debounce((e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value.trim();
        if (value === "") {
            fetchCouponPaging({
                ...couponQuery,
                searchKeyName: "",
                pageNumber: 1,
            });
            return;
        }
        if (value) {
            fetchCouponPaging({
                ...couponQuery,
                searchKeyName: value,
                pageNumber: 1,
            });
        }
    }, 500);

    const isAppActive = appDetail?.status === Status.ACTIVE;
    const handleActions = (record: CouponDetails) => {
        const isNotAdmin = authInfo?.userType && authInfo?.userType !== UserType.ADMIN;
        const isAppNotActive = !isAppActive;
        return [
            {
                key: "edit",
                label: t("edit"),
                icon: <EditOutlined style={{fontSize: 20}}/>,
                onClick: () => handleMenuClick("edit", record),
                disabled: isNotAdmin || isAppNotActive || record?.status === Status.INACTIVE,
            },
            {
                key: "delete",
                danger: true,
                label: t("delete"),
                icon: <Trash size={18}/>,
                onClick: () => handleMenuClick("delete", record),
                disabled: isNotAdmin || isAppNotActive || record?.status === Status.INACTIVE,
            },
        ];
    };

    const columns: ColumnsType<CouponDetails> = [
        {
            title: t("code"),
            dataIndex: "name",
            key: "username",
        },
        {
            title: t("discount"),
            dataIndex: "currency",
            key: "currency",
            render: (value: number, record: CouponDetails) => {
                if (record.couponType) {
                    return `¥${value}`;
                } else {
                    return `${value}%`;
                }
            },
        },
        {
            title: t("purchase_type"),
            dataIndex: "purchaseType",
            key: "purchaseType",
            render: (_, {purchaseType}) => {
                return purchaseType ?  t(`purchase_type_options.${purchaseType}`) : "-";
            },
        },
        {
            title: t("numberOfUsed"),
            dataIndex: "numberOfUsed",
            key: "number_of_used",
            sorter: true,
            showSorterTooltip: {
                title: renderSorterTooltip(t, sortState, "number_of_used"),
            },
        },
        {
            title: t("status"),
            dataIndex: "status",
            key: "statuses",
            filters: [
                {
                    text: t(`status_type.ACTIVE`),
                    value: Status.ACTIVE,
                },
                {
                    text: t(`status_type.INACTIVE`),
                    value: Status.INACTIVE,
                },
            ],
            render: (_, {status}) => {
                return (
                    <AppTag
                        color={
                            status === Status.ACTIVE
                                ? "#0E9154"
                                : "orange-inverse"
                        }
                        bordered={false}
                    >
                        {t(`status_type.${status}`)}
                    </AppTag>
                );
            },
        },
        {
            title: t("numberOfUsages"),
            dataIndex: "numberOfUsages",
            key: "number_of_usages",
            render: (value: number, record: CouponDetails) => {
                if (record.isUnlimited) {
                    return <AppTag color="#0E9154">{t("unlimited")}</AppTag>;
                } else {
                    return `${value}`;
                }
            },
        },
        {
            title: t("startTime"),
            dataIndex: "startTime",
            key: "start_time",
            sorter: true,
            showSorterTooltip: {
                title: renderSorterTooltip(t, sortState, "start_time"),
            },
            render: (time: number) => {
                if (!time) return "";

                const date = new Date(time);
                const day = date.getDate().toString().padStart(2, "0");
                const month = (date.getMonth() + 1).toString().padStart(2, "0");
                const year = date.getFullYear();

                return `${day}/${month}/${year}`;
            },
        },
        {
            title: t("endTime"),
            dataIndex: "endTime",
            key: "end_time",
            sorter: true,
            showSorterTooltip: {
                title: renderSorterTooltip(t, sortState, "end_time"),
            },
            render: (time: number) => {
                if (!time) return "";

                const date = new Date(time);
                const day = date.getDate().toString().padStart(2, "0");
                const month = (date.getMonth() + 1).toString().padStart(2, "0");
                const year = date.getFullYear();

                return `${day}/${month}/${year}`;
            },
        },
        // {
        //   title: "Created Time",
        //   dataIndex: "createdTime",
        //   key: "created_time",
        //   sorter: true,
        //   render: (time: number) => {
        //     return new Date(time).toLocaleString();
        //   },
        // },
        {
            title: t("actions"),
            key: "actions",
            render: (_, record) => {
                return (
                    <AppDropdown
                        menu={{
                            items: handleActions(record),
                        }}
                        trigger={["click"]}
                    >
                        <AppButton type="text" shape="circle">
                            <EllipsisOutlined style={{fontSize: 18}}/>
                        </AppButton>
                    </AppDropdown>
                );
            },
        },
    ];

    const handleTableChange = (pagination: any, filters: any, sorter: any) => {
        let queryParams = {...couponQuery};
        if (filters?.statuses?.length > 0) {
            queryParams = {
                ...queryParams,
                statuses: filters.statuses,
            };
        } else {
            queryParams = {
                ...queryParams,
                statuses: [Status.PENDING, Status.ACTIVE, Status.INACTIVE],
            };
        }

        if (sorter && sorter.columnKey && sorter.order) {
            setSortState({
                columnKey: sorter.columnKey,
                order: sorter.order,
            })
            queryParams = {
                ...queryParams,
                sortField: sorter.columnKey,
                sortDirection:
                    sorter.order === "ascend" ? SortDirection.ASC : SortDirection.DESC,
            };
        } else {
            setSortState({
                columnKey: null,
                order: null,
            });
        }

        queryParams = {
            ...queryParams,
            pageNumber: pagination.current,
            pageSize: pagination.pageSize,
        };
        fetchCouponPaging(queryParams);
    };

    const handleDeleteCoupon = async (coupon: CouponDetails) => {
        if (authInfo?.userType !== UserType.ADMIN) {
            return;
        }

        if (couponDetail) {
            await dispatch(doDeleteCoupon(coupon.id));
            await new Promise((resolve) => setTimeout(resolve, 500));
            fetchCouponPaging(couponQuery);
            setIsOpenDeleteModal(false);
            setReload(true);
        }
    };

    const handleOpenUpdateApp = (coupon: CouponDetails) => {
        if (authInfo?.userType !== UserType.ADMIN) {
            return;
        }

        setCouponDetail(coupon);
        setOpenUpdateModal(true);
    };

    const handleMenuClick = (key: string, record: CouponDetails) => {
        if (key === "edit") {
            handleOpenUpdateApp(record);
        } else if (key === "delete") {
            setCouponDetail(record);
            setIsOpenDeleteModal(true);
        }
    };

    useEffect(() => {
        if (reload) {
            fetchCouponPaging(couponQuery);
            setReload(false);
        }
    }, [reload]);

    return (
        <>
            <CreateCouponModal
                fetchCouponPaging={fetchCouponPaging}
                appsId={appsId}
                authInfo={authInfo}
                isAppActive={!isAppActive}
            />

            <div className="max-w-[300px] mb-4">
                <AppInput
                    placeholder={t("searchName")}
                    prefix={<SearchOutlined/>}
                    onChange={handleSearch}
                    allowClear
                />
            </div>
            <AppTable<CouponDetails>
                columns={columns}
                dataSource={couponList}
                loading={loading}
                pagination={{
                    current: couponPaging.pageNumber,
                    pageSize: couponPaging.pageSize,
                    total: couponPaging.totalElements,
                }}
                rowKey="id"
                scroll={{x: 1000}}
                onChange={handleTableChange}
            />
            <Modal
                title={t("deleteCoupon")}
                open={isOpenDeleteModal}
                okText={t("delete")}
                cancelText={t("cancel")}                onOk={() => handleDeleteCoupon(couponDetail as CouponDetails)}
                onCancel={() => setIsOpenDeleteModal(false)}
            >
                {t("deleteConfirmation")}
            </Modal>
            <UpdateCouponModal
                isOpenUpdateModal={isOpenUpdateModal}
                setOpenUpdateModal={setOpenUpdateModal}
                couponDetail={couponDetail}
                fetchCouponPaging={fetchCouponPaging}
            />
        </>
    );
}