"use client";
import {useAppDispatch, useAppSelector} from "@/lib/redux/hooks";
import {Modal} from "antd";
import {useTranslations} from "use-intl";
import {z} from "zod";
import {useState} from "react";
import {useForm} from "react-hook-form";
import {zodResolver} from "@hookform/resolvers/zod";
import {FormItem, FormWrapper} from "@/components/ui/form";
import AppInput from "@/components/ui/input";
import AppButton from "@/components/ui/button";
import {doUpdateUser} from "@/lib/redux/features/user";
import {UserType} from "@/types/user";
import AppSelect from "@/components/ui/select";
import {AppUserRole, Member} from "@/types/appUser";
import {
    doUpdateAppUser,
    getAppUserDetail,
} from "@/lib/redux/features/appUser";
import {AuthInfo} from "@/types/auth";

type UpdateUserModalProps = {
    isOpenUpdateModal: boolean;
    setOpenUpdateModal: React.Dispatch<React.SetStateAction<boolean>>;
    appUserSelected?: Member;
    setUserQuery: React.Dispatch<React.SetStateAction<any>>;
    authInfo: AuthInfo;
};

export default function UpdateUserModal({
                                            isOpenUpdateModal,
                                            setOpenUpdateModal,
                                            appUserSelected,
                                            setUserQuery,
                                            authInfo,
                                        }: UpdateUserModalProps) {
    const dispatch = useAppDispatch();
    const t = useTranslations("Form");
    const [isLoading, setIsLoading] = useState(false);
    const appUserDetail = useAppSelector(getAppUserDetail);

    const isCurrentAppUser = appUserSelected?.id === authInfo?.id;

    const closeModal = () => {
        updateUserForm.reset();
        setOpenUpdateModal(false);
    };
    const formSchema = z.object({
        firstName: z
            .string()
            .trim()
            .max(255, {message: t("validate.maximum_characters")}),
        lastName: z
            .string()
            .trim()
            .max(255, {message: t("validate.maximum_characters")}),
        role: z.string(),
    });
    type updateUserFormSchema = z.infer<typeof formSchema>;

    const updateUserForm = useForm<updateUserFormSchema>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            firstName: "",
            lastName: "",
            role: "",
        },
        values: {
            firstName: appUserSelected?.firstName || "",
            lastName: appUserSelected?.lastName || "",
            role: appUserSelected?.appUser?.role || "",
        },
    });

    async function onSubmit(values: updateUserFormSchema) {
        setIsLoading(true);
        try {
            if (!appUserSelected?.id) {
                console.error("User ID not found!");
                return;
            }
            const request = {
                firstName: values.firstName,
                lastName: values.lastName,
                id: appUserSelected.id,
            };
            await dispatch(doUpdateUser(request));

            if (appUserSelected?.appUser?.role !== values.role && !isCurrentAppUser) {
                if (!appUserSelected?.appUser?.appsId) {
                    console.error("App ID not found!");
                    return;
                }

                await dispatch(
                    doUpdateAppUser({
                        appId: appUserSelected.appUser.appsId,
                        userId: appUserSelected.id,
                        role: values.role,
                    }),
                );
            }
            setUserQuery((prev) => ({...prev, pageNumber: 1}));
        } catch (error: any) {
            console.error("Error: update user", error?.message);
        } finally {
            closeModal();
            setIsLoading(false);
        }
    }

    const generateRoleOptions = () => {
        // If you are an OWNER or SUPER ADMIN, you can invite all roles.
        if (
            (authInfo?.userType === UserType.USER &&
                appUserDetail?.role === AppUserRole.OWNER) ||
            authInfo?.userType === UserType.ADMIN
        ) {
            return [
                {
                    label: t("user_role.OWNER"),
                    value: AppUserRole.OWNER,
                },
                {label: t("user_role.ADMIN"), value: AppUserRole.ADMIN},
                {label: t("user_role.DEVELOPER"), value: AppUserRole.DEVELOPER},
            ];
        }

        // // If you are an ADMIN, you can only invite ADMIN and DEVELOPER.
        if (
            authInfo?.userType === UserType.USER &&
            appUserDetail?.role === AppUserRole.ADMIN
        ) {
            return [
                {
                    label: t("user_role.OWNER"),
                    value: AppUserRole.OWNER,
                    disabled: true,
                },
                {label: t("user_role.ADMIN"), value: AppUserRole.ADMIN},
                {label: t("user_role.DEVELOPER"), value: AppUserRole.DEVELOPER},
            ];
        }

        return [];
    };

    return (
        <Modal
            title={t("update_member")}
            open={isOpenUpdateModal}
            onOk={closeModal}
            onCancel={closeModal}
            footer={null}
        >
            <FormWrapper<updateUserFormSchema>
                form={updateUserForm}
                onSubmit={onSubmit}
                layout="vertical"
                className="space-y-4"
            >
                <FormItem name="firstName" label={t("first_name")}>
                    {({value, ref, ...field}) => (
                        <AppInput
                            value={value}
                            ref={ref}
                            {...field}
                            placeholder={t("firs_name_placeholder")}
                        />
                    )}
                </FormItem>
                <FormItem name="lastName" label={t("last_name")}>
                    {({value, ref, ...field}) => (
                        <AppInput
                            value={value}
                            ref={ref}
                            {...field}
                            placeholder={t("last_name_placeholder")}
                        />
                    )}
                </FormItem>
                <FormItem name="role" label={t("role")} className="!mb-0 w-full">
                    {({value, onChange, ref, ...field}) => (
                        <AppSelect
                            {...field}
                            ref={ref}
                            value={value}
                            onChange={onChange}
                            options={generateRoleOptions()}
                            placeholder={t("select_role_placeholder")}
                            disabled={
                                isCurrentAppUser ||
                                (appUserDetail?.role === AppUserRole.ADMIN &&
                                    appUserSelected?.appUser?.role === AppUserRole.OWNER) || // Admin cannot delete owner but can delete other admin and developer
                                appUserDetail?.role === AppUserRole.DEVELOPER // Role is developer
                            }
                        />
                    )}
                </FormItem>
                <div className="flex justify-end items-center gap-2">
                    <AppButton
                        type="default"
                        onClick={closeModal}
                        loading={isLoading}
                        className=""
                    >
                        {t("button.cancel")}
                    </AppButton>
                    <AppButton
                        type="primary"
                        htmlType="submit"
                        loading={isLoading}
                        onClick={() => updateUserForm.handleSubmit(onSubmit)}
                        className=""
                        disabled={
                            authInfo?.userType === UserType.USER &&
                            appUserDetail?.role === AppUserRole.DEVELOPER
                        }
                    >
                        {t("button.save")}
                    </AppButton>
                </div>
            </FormWrapper>
        </Modal>
    );
}