"use client";
import React, {useState} from "react";
import {useAppDispatch, useAppSelector} from "@/lib/redux/hooks";
import AppTable, {ColumnsType} from "@/components/ui/table";
import {
    PaginationState,
    ResponseStatus,
    SortDirection,
    Status,
} from "@/types/common";
import AppTag from "@/components/ui/tag";
import {EditOutlined, SearchOutlined} from "@ant-design/icons";
import {UserQueryParams, UserType} from "@/types/user";
import UpdateUserModal from "./update-user";
import AppInput from "../ui/input";
import {debounce} from "lodash";
import AppButton from "../ui/button";
import {Ellipsis, Trash} from "lucide-react";
import {useTranslations} from "use-intl";
import {AppUserResponse, AppUserRole, Member} from "@/types/appUser";
import {getAuthInfo} from "@/lib/redux/features/auth";
import {
    doDeleteAppUser,
    getAppUserDetail,
} from "@/lib/redux/features/appUser";
import showConfirmModal from "@/components/ui/confirm-modal";
import AppDropdown from "@/components/ui/dropdown";
import {renderSorterTooltip} from "@/lib/utils";

type UserTableProps = {
    appsId: string;
    members: Member[];
    userPaging: PaginationState;
    userQuery: UserQueryParams;
    loading: boolean;
    setUserQuery: React.Dispatch<React.SetStateAction<UserQueryParams>>;
    isAppInActive?: boolean;
};
export default function ManageUserTable({
                                            members,
                                            userPaging,
                                            userQuery,
                                            loading,
                                            setUserQuery,
                                            isAppInActive,
                                        }: UserTableProps) {
    const dispatch = useAppDispatch();
    const authInfo = useAppSelector(getAuthInfo);
    const appUserDetail = useAppSelector(getAppUserDetail);
    const [isOpenUpdateModal, setOpenUpdateModal] = useState(false);
    const [appUserSelected, setAppUserSelected] = useState<Member | undefined>(
        undefined,
    );
    const [sortState, setSortState] = useState<{
        columnKey: string | null;
        order: 'ascend' | 'descend' | null;
    }>({
        columnKey: null,
        order: null,
    });
    const t = useTranslations("AppPage.member");

    const handleSearch = debounce((e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value.trim();
        setUserQuery({...userQuery, searchKeyEmail: value});
    }, 500);

    const handleActions = (record: Member) => {
        const userType = authInfo?.userType; // Current user type
        const currentUserRole = appUserDetail?.role; // Current app user role
        const currentUserStatus = appUserDetail?.status; // Current app user status
        const targetUserRole = record.appUser?.role; // Role target app user delete

        // const cannotDelete =
        //     (record?.appUser?.status && record?.appUser?.status !== Status.ACTIVE) || // App user not active
        //     record.id === authInfo?.id || // Can't delete yourself
        //     (authInfo?.userType === UserType.USER && // userType là user
        //         appUserDetail?.status && appUserDetail?.status !== Status.ACTIVE) ||
        //     currentUserRole === AppUserRole.DEVELOPER || // Developer do not permission to delete
        //     // Admin cannot delete owner but can delete other admin and developer
        //     (currentUserRole === AppUserRole.ADMIN &&
        //         targetUserRole === AppUserRole.OWNER) ||
        //     // Owner can delete all but cannot delete users with userType ADMIN
        //     (currentUserRole === AppUserRole.OWNER &&
        //         authInfo?.userType === UserType.ADMIN);
        const cannotDelete =
            (record?.appUser?.status && record?.appUser?.status === Status.INACTIVE) || // App user INACTIVE
            userType && userType === UserType.USER &&  // userType là USER
            record.id === authInfo?.id || // Can't delete yourself
            currentUserStatus && currentUserStatus !== Status.ACTIVE || // status app user is inactive or pending
            currentUserRole === AppUserRole.DEVELOPER || // Developer do not permission to delete
            (currentUserRole === AppUserRole.ADMIN &&
                targetUserRole === AppUserRole.OWNER) || // Admin cannot delete owner
            (currentUserRole === AppUserRole.OWNER &&
                authInfo?.userType === UserType.ADMIN); // Owner can delete all but cannot delete users with userType ADMIN

        return [
            {
                key: "edit",
                label: t("edit"),
                icon: <EditOutlined style={{fontSize: 20}}/>,
                onClick: () => handleOpenUpdateApp(record),
                disabled:
                    (record?.appUser?.status && record?.appUser?.status === Status.INACTIVE) || // App user INACTIVE
                    isAppInActive || // App inactive
                    userType && userType === UserType.USER && // userType là user
                    currentUserStatus && currentUserStatus !== Status.ACTIVE || // status app user is inactive
                    currentUserRole && currentUserRole === AppUserRole.DEVELOPER ||// Role is developer
                    (currentUserRole === AppUserRole.ADMIN &&
                        targetUserRole === AppUserRole.OWNER),
            },
            {
                key: "delete",
                danger: true,
                label: t("delete"),
                icon: <Trash size={18}/>,
                onClick: () => handleConfirmDeleteMember(record),
                disabled: cannotDelete || isAppInActive,
            },
        ];
    };

    const columns: ColumnsType<Member> = [
        {
            title: t("email"),
            dataIndex: "email",
            key: "email",
            sorter: true,
            showSorterTooltip: {
                title: renderSorterTooltip(t, sortState, "email"),
            },
            render: (_, record: any) => {
                return `${record.email}`;
            },
        },
        {
            title: t("full_name"),
            dataIndex: "username",
            key: "username",
            sorter: true,
            showSorterTooltip: {
                title: renderSorterTooltip(t, sortState, "username"),
            },
            render: (_, record: any) => {
                const firstName = record?.firstName || "";
                const lastName = record?.lastName || "";

                return firstName !== "" && lastName !== ""
                    ? `${firstName} ${lastName}`
                    : "-";
            },
        },
        {
            title: t("role"),
            dataIndex: "role",
            key: "role",
            render: (_, {appUser}) => {
                return `${appUser ? t(`user_role.${appUser?.role}`) : "-"}`;
            },
        },
        {
            title: t("status"),
            dataIndex: ["appUser", "status"],
            key: "appUserStatus",
            render: (_, record) => {
                const status = record?.appUser?.status;
                return (
                    <>
                        {status ? (
                            <AppTag
                                color={
                                    status === Status.ACTIVE
                                        ? "#0E9154"
                                        : status === Status.INACTIVE
                                            ? "gold"
                                            : "orange-inverse"
                                }
                                bordered={false}
                            >
                                {t(`status_type.${status}`)}
                            </AppTag>
                        ) : (
                            "-"
                        )}
                    </>
                );
            },
        },
        {
            title: t("created_time"),
            dataIndex: "createdTime",
            key: "createdTime",
            sorter: true,
            showSorterTooltip: {
                title: renderSorterTooltip(t, sortState, "createdTime"),
            },
            render: (time: number) => {
                return new Date(time).toLocaleString();
            },
        },
        {
            title: t("actions"),
            key: "actions",
            render: (_, record) => (
                <AppDropdown
                    menu={{
                        items: handleActions(record),
                    }}
                    trigger={["click"]}
                >
                    <AppButton type="text" shape="circle">
                        <Ellipsis size={18}/>
                    </AppButton>
                </AppDropdown>
            ),
        },
    ];

    const handleTableChange = (pagination: any, filters: any, sorter: any) => {
        let queryParams = {...userQuery};

        filters?.statuses?.length > 0
            ? (queryParams = {
                ...queryParams,
                statuses: filters.statuses,
            })
            : (queryParams = {
                ...queryParams,
                statuses: [Status.PENDING, Status.ACTIVE, Status.INACTIVE],
            });

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

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

        setUserQuery(queryParams);
    };

    const handleConfirmDeleteMember = (member: Member) => {
        showConfirmModal({
            title: t("delete_member"),
            content: t("delete_member_msg", {
                memberName: `${member?.firstName || ""} ${member?.lastName || ""}`,
            }),
            okText: t("delete"),
            cancelText: t("cancel"),
            onOk: async () => {
                await handleDeleteMember(member);
            },
        });
    };

    const handleDeleteMember = async (member: Member) => {
        try {
            if (!member?.appUser?.appsId) {
                console.error("App ID not found");
                return;
            }
            if (!member?.appUser?.userId) {
                console.error("User ID not found");
                return;
            }
            const result = await dispatch(
                doDeleteAppUser({
                    appId: member.appUser.appsId,
                    userId: member.appUser.userId,
                }),
            );
            const payload = result?.payload as AppUserResponse;
            if (payload && payload?.status === ResponseStatus.SUCCESS) {
                setUserQuery((prev) => ({...prev, pageNumber: 1}));
            }
        } catch (error: any) {
            console.error("Failed delete app!", error?.message);
        }
    };

    const handleOpenUpdateApp = (member: Member) => {
        setAppUserSelected(member);
        setOpenUpdateModal(true);
    };

    return (
        <>
            <div className="max-w-[300px] mb-4">
                <AppInput
                    placeholder={t("search_email_placeholder")}
                    prefix={<SearchOutlined/>}
                    onChange={handleSearch}
                    allowClear
                />
            </div>
            <AppTable<Member>
                columns={columns}
                dataSource={members}
                loading={loading}
                pagination={{
                    current: userPaging.pageNumber,
                    pageSize: userPaging.pageSize,
                    total: userPaging.totalElements,
                }}
                rowKey="id"
                scroll={{x: 1000}}
                onChange={handleTableChange}
            />
            {authInfo && (
                <UpdateUserModal
                    isOpenUpdateModal={isOpenUpdateModal}
                    setOpenUpdateModal={setOpenUpdateModal}
                    appUserSelected={appUserSelected}
                    setUserQuery={setUserQuery}
                    authInfo={authInfo}
                />
            )}
        </>
    );
}