"use client";
import React, {useCallback, useEffect, useState} from "react";
import {App, AppQueryParams} from "@/types/app";
import CreateAppModal from "./create-app";
import {setAppDetail} from "@/lib/redux/features/app";
import {useAppDispatch, useAppSelector} from "@/lib/redux/hooks";
import AppTable, {ColumnsType} from "@/components/ui/table";
import {useRouter} from "@/i18n/routing";
import {SortDirection, SortField, Status} from "@/types/common";
import AppTag from "@/components/ui/tag";
import {getAuthInfo} from "@/lib/redux/features/auth";
import useFetchApp from "@/hooks/useFetchApp";
import {UserType} from "@/types/user";
import AppPrivateMode from "@/components/private-mode";
import AppInput from "@/components/ui/input";
import {SearchOutlined} from "@ant-design/icons";
import {debounce} from "lodash";
import {useTranslations} from "next-intl";
import {renderSorterTooltip} from "@/lib/utils";

export default function ManageAppTable() {
    const dispatch = useAppDispatch();
    const router = useRouter();

    const t = useTranslations("AppPage.information");

    const authInfo = useAppSelector(getAuthInfo);

    const [sortState, setSortState] = useState<{
        order: 'ascend' | 'descend' | null;
    }>({
        order: null,
    });

    const {
        appList,
        isLoadingApp,
        appPaging,
        appQuery,
        fetchAppPaging,
        setAppQuery,
    } = useFetchApp({
        pageNumber: 1,
        pageSize: 10,
        sortField: SortField.createdTime,
        sortDirection: SortDirection.DESC,
        statuses: [Status.ACTIVE, Status.INACTIVE],
    });

    useEffect(() => {
        (async () => {
            if (!authInfo) {
                return;
            }
            await handleFetchAppByUserType();
        })();
    }, [appQuery, authInfo]);

    async function handleFetchAppByUserType() {
        try {
            if (authInfo?.userType === UserType.USER) {
                await handleFetchAppPaging({
                    ...appQuery,
                    userId: authInfo.id,
                });
            } else {
                await handleFetchAppPaging({
                    ...appQuery,
                });
            }
        } catch (error) {
            console.error("Failed to fetch app by user type:", error);
        }
    }

    const handleSearch = debounce(
        async (e: React.ChangeEvent<HTMLInputElement>) => {
            const value = e.target.value.trim();
            setAppQuery((prev) => ({
                ...prev,
                searchKeyName: value,
                pageNumber: 1,
            }));
        },
        500,
    );

    const handleFetchAppPaging = useCallback(async (params?: AppQueryParams) => {
        try {
            await fetchAppPaging(params);
        } catch (error: any) {
            console.error("Failed to fetch app paging", error?.message);
        }
    }, []);

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

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

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

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

        setAppQuery(queryParams);
    };

    const handleViewAppDetail = (app: App) => {
        dispatch(setAppDetail(app));
        router.push(`/admin/app/${app?.id}/information`);
    };


    const columns: ColumnsType<App> = [
        {
            title: t("id"),
            dataIndex: "id",
            key: "id",
            width: "30%",
            render: (_, {id}) => {
                return (
                    <div>
                        <AppPrivateMode data={id} isShowCopyButton={true}/>
                    </div>
                );
            },
        },
        {
            title: t("name"),
            dataIndex: "name",
            key: "name",
            sorter: true,
            showSorterTooltip: {
                title: renderSorterTooltip(t, sortState, "email"),
            },
            width: "30%",
        },
        {
            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("created_time"),
            dataIndex: "createdTime",
            key: "createdTime",
            sorter: true,
            showSorterTooltip: {
                title: renderSorterTooltip(t, sortState, "createdTime"),
            },
            render: (time: number) => {
                return new Date(time).toLocaleString();
            },
        },
    ];

    return (
        <>
            {authInfo && (
                <CreateAppModal setAppQuery={setAppQuery} authInfo={authInfo}/>
            )}
            <div className="max-w-[300px] mb-4">
                <AppInput
                    placeholder={t("search_app_placeholder")}
                    prefix={<SearchOutlined/>}
                    onChange={handleSearch}
                    allowClear
                />
            </div>
            <AppTable<App>
                columns={columns}
                dataSource={appList}
                loading={isLoadingApp}
                pagination={{
                    current: appPaging.pageNumber,
                    pageSize: appPaging.pageSize,
                    total: appPaging.totalElements,
                }}
                rowKey="id"
                scroll={{x: 1000}}
                onChange={handleTableChange}
                rowConfig={{
                    onClick: handleViewAppDetail,
                    // className: 'hover:bg-gray-500',
                    style: {
                        transition: "all 0.3s ease",
                    },
                }}
            />
        </>
    );
}