"use client";
import {useAppDispatch} from "@/lib/redux/hooks";
import {useTranslations} from "use-intl";
import {z} from "zod";
import {useEffect, 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 {useRouter} from "@/i18n/routing";
import {doUpdateCoupon} from "@/lib/redux/features/coupon";
import {DatePicker, Modal} from "antd";
import AppSelect from "../ui/select";
import AppCheckbox from "../ui/checkbox";
import dayjs from "dayjs";
import AppInputNumber from "../ui/input-number";
import {ProductAppIdQueryParams, ProductOption, ProductResponse,} from "@/types/product";
import {onGetProductAppId, onGetProductListByCouponId} from "@/services/apis/product";
import {ResponseStatus, SortDirection, SortField} from "@/types/common";

export default function UpdateCouponModal({
                                              isOpenUpdateModal,
                                              setOpenUpdateModal,
                                              couponDetail,
                                              fetchCouponPaging,
                                          }) {
    const dispatch = useAppDispatch();
    const router = useRouter();
    const t = useTranslations("AppPage.coupon");
    const [isLoading, setIsLoading] = useState(false);
    const [isUnlimited, setIsUnlimited] = useState<string>("NO");
    const [couponTypeValue, setCouponTypeValue] = useState<string>("PERCENTAGE");

    const [loading, setLoading] = useState<boolean>(false);
    const [products, setProducts] = useState<ProductOption[]>([]);
    const [productPaging, setProductPaging] = useState({
        numberOfElements: 0,
        pageNumber: 1,
        pageSize: 10,
        totalElements: 0,
        totalPages: 0,
    });

    const handleGetProductsByCouponId = async (couponId) => {
        const result = await onGetProductListByCouponId({couponId: couponId.toString()})
        if (result && result?.status === ResponseStatus.SUCCESS) {
            const productList = result?.data || [];
            const productByCouponIdList = productList.map((product: ProductResponse) => product.id.toString())
            updateCouponForm.setValue("productIds", productByCouponIdList)
            console.log("Set productIds", productByCouponIdList)
        }

    }

    const handleRenderPurchaseType = () => {
        return [
            {
                label: t("purchase_type_options.ONE_TIME_PURCHASE"),
                value: "ONE_TIME_PURCHASE",
            },
            {
                label: t("purchase_type_options.SUBSCRIPTION"),
                value: "SUBSCRIPTION",
            },
            {
                label: t("purchase_type_options.BOTH"),
                value: "BOTH",
            },
        ]
    }

    const handleUnlimitedChange = (checked: boolean) => {
        setIsUnlimited(checked ? "YES" : "NO");
    };

    const closeModal = () => {
        setOpenUpdateModal(false);
        updateCouponForm.reset();
    };

    const formSchema = z
        .object({
            couponType: z
                .string({
                    required_error: t("validate.required"),
                })
                .default("PERCENTAGE"),

            isUnlimited: z
                .string({
                    required_error: t("validate.required"),
                })
                .default("NO"),

            currency: z.coerce
                .number({
                    required_error: t("validate.required"),
                    invalid_type_error: t("validate.currency_must_be_number"),
                })
                .min(1, {message: t("validate.required")})
                .refine(
                    (val) => {
                        if (couponTypeValue === "PERCENTAGE" && val > 100) {
                            return false;
                        }
                        return true;
                    },
                    {message: t("validate.percent_max")}
                ),

            numberOfUsages: z.coerce
                .number({
                    invalid_type_error: t("validate.required"),
                })
                .refine(
                    (val) => {
                        if (!isUnlimited) {
                            return val >= 1;
                        }
                        return true;
                    },
                    {message: t("validate.min_number_of_usages")}
                ),

            startsAt: z
                .string({
                    required_error: t("validate.required"),
                })
                .nullable()
                .transform((val) => (val === null ? "" : val))
                .refine((val) => val.length > 0, { message: t("validate.required") }),

            endsAt: z
                .string({
                    required_error: t("validate.required"),
                })
                .nullable()
                .transform((val) => (val === null ? "" : val))
                .refine((val) => val.length > 0, { message: t("validate.required") }),

            productIds: z.array(z.string()).min(1, {message: t("validate.required")}),

            oncePerCustomer: z.boolean().default(false),

            purchaseType: z.string().min(1, {message: t("validate.required")}),
        })
        .superRefine((data, ctx) => {
            if (
                data.isUnlimited !== "YES" &&
                (!data.numberOfUsages || data.numberOfUsages < 1)
            ) {
                ctx.addIssue({
                    code: z.ZodIssueCode.custom,
                    message: t("validate.number_of_usages_required"),
                    path: ["numberOfUsages"],
                });
            }
        });

    type UpdateCouponFormSchema = z.infer<typeof formSchema>;

    const updateCouponForm = useForm<UpdateCouponFormSchema>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            couponType: "PERCENTAGE",
            isUnlimited: "NO",
            currency: 0,
            numberOfUsages: 0,
            startsAt: "",
            endsAt: "",
            productIds: [],
            oncePerCustomer: false,
            purchaseType: "",
        },
    });

    const getListProduct = async (query: ProductAppIdQueryParams) => {
        setLoading(true);
        try {
            if (!query?.appsId) {
                console.error("App ID not found.")
                return;
            }
            const result = await onGetProductAppId(query);
            if (result && result?.status === ResponseStatus.SUCCESS) {
                const products = result.data.content || [];
                const pageNumber = result.data.pageNumber || 1;
                const newProducts = products.map(
                    (product: ProductResponse) => {
                        return {
                            label: product.name,
                            value: product.id.toString(),
                        };
                    }
                );
                setProductPaging({
                    numberOfElements: result.data.totalElements,
                    pageNumber: pageNumber,
                    pageSize: result.data.pageSize,
                    totalElements: result.data.totalElements,
                    totalPages: result.data.totalPages,
                })
                if (pageNumber === 1) {
                    setProducts(newProducts);
                } else {
                    setProducts((prevProduct) => [...prevProduct, ...newProducts]);
                }
            }
        } catch (error) {
            console.error("Error fetching products", error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        if (!isOpenUpdateModal) {
            return
        }
        getListProduct({
            appsId: couponDetail?.appsId,
            pageNumber: 1,
            pageSize: 10,
            sortField: SortField.createdTime,
            sortDirection: SortDirection.DESC,
        });
        handleGetProductsByCouponId(couponDetail.id);
    }, [couponDetail, isOpenUpdateModal]);

    const handlePopupScroll = (e: React.UIEvent<HTMLDivElement>) => {
        const target = e.target as HTMLDivElement;
        if (target.scrollTop + target.offsetHeight >= target.scrollHeight - 20 && !loading && productPaging.totalPages > productPaging.pageNumber) {
            getListProduct({
                appsId: couponDetail?.appsId,
                pageNumber: productPaging.pageNumber + 1,
                pageSize: 10,
                sortField: SortField.createdTime,
                sortDirection: SortDirection.DESC,
            })
        }
    };

    useEffect(() => {
        if (couponDetail && isOpenUpdateModal) {

            console.log("Coupon Detail", couponDetail)

            handleGetProductsByCouponId(couponDetail?.id)
            // Determine coupon type from old format to new format
            let couponTypeFormatted: string = "PERCENTAGE"; // Default value

            // Check if couponType is boolean (old format) or string (new format)
            if (couponDetail.couponType !== undefined) {
                if (typeof couponDetail.couponType === "boolean") {
                    // Convert from old boolean format
                    couponTypeFormatted =
                        couponDetail.couponType === true ? "FIXED_AMOUNT" : "PERCENTAGE";
                } else if (typeof couponDetail.couponType === "string") {
                    // Use the string directly if it's already in new format
                    couponTypeFormatted = couponDetail.couponType;
                }
            }
            setCouponTypeValue(couponTypeFormatted);

            // Handle isUnlimited conversion
            let isUnlimitedFormatted: string = "NO"; // Default value
            if (couponDetail.isUnlimited !== undefined) {
                if (typeof couponDetail.isUnlimited === "boolean") {
                    isUnlimitedFormatted = couponDetail.isUnlimited ? "YES" : "NO";
                } else if (typeof couponDetail.isUnlimited === "string") {
                    isUnlimitedFormatted = couponDetail.isUnlimited;
                }
            }
            setIsUnlimited(isUnlimitedFormatted);

            // Convert timestamp dates to ISO strings if they exist
            const startsAtISO = couponDetail.startTime
                ? dayjs(couponDetail.startTime).toISOString()
                : "";

            const endsAtISO = couponDetail.endTime
                ? dayjs(couponDetail.endTime).toISOString()
                : "";

            // Get numberOfUsages from couponDetail, ensuring it's properly extracted
            // First check the explicit numberOfUsages property
            let usageCount = 0;
            if (
                couponDetail.numberOfUsages !== undefined &&
                couponDetail.numberOfUsages !== null
            ) {
                usageCount = Number(couponDetail.numberOfUsages);
            }

            // Prepare form values with fallback defaults for missing fields
            const formValues = {
                couponName: couponDetail.name || "",
                couponType: couponTypeFormatted,
                isUnlimited: isUnlimitedFormatted,
                currency: couponDetail.currency || 0,
                numberOfUsages: usageCount,
                startsAt: startsAtISO,
                endsAt: endsAtISO,
                oncePerCustomer: couponDetail.oncePerCustomer || false,
                purchaseType: couponDetail.purchaseType
            };

            updateCouponForm.reset(formValues);
            // Also set the value directly to ensure it updates
            updateCouponForm.setValue("numberOfUsages", usageCount);
        }
    }, [couponDetail, updateCouponForm, isOpenUpdateModal]);

    async function onSubmit(values: UpdateCouponFormSchema) {
        setIsLoading(true);

        // Prepare update request data
        const requestData: any = {
            // name: values.couponName,
            couponType: values.couponType,
            isUnlimited: values.isUnlimited,
            currency: values.currency,
            startsAt: dayjs(values.startsAt).toISOString(),
            endsAt: dayjs(values.endsAt).toISOString(),
            productIds: values.productIds.map((id) => Number(id)),
            oncePerCustomer: values.oncePerCustomer,
            purchaseType: values.purchaseType,
        };

        // Add numberOfUsages if not unlimited
        if (values.isUnlimited === "NO") {
            requestData.numberOfUsages = values.numberOfUsages;
        }

        // Format the request based on the expected API structure
        const request = {
            data: requestData,
            id: couponDetail.id,
        };

        const result = await dispatch(doUpdateCoupon(request));
        if ((result.payload as { status: string })?.status === "success") {
            await new Promise((resolve) => setTimeout(resolve, 500));
            fetchCouponPaging({appsId: couponDetail.appsId});
        }

        setIsLoading(false);
        closeModal();
        router.refresh();
    }

    useEffect(() => {
        console.log("Update coupon Form errors:", updateCouponForm.formState.errors);
    }, [updateCouponForm.formState.errors]);

    return (
        <Modal
            title={t("updateCoupon")}
            open={isOpenUpdateModal}
            onOk={closeModal}
            onCancel={closeModal}
            footer={null}
        >
            <FormWrapper<UpdateCouponFormSchema>
                form={updateCouponForm}
                onSubmit={onSubmit}
                layout="vertical"
                className="space-y-4"
            >
                <FormItem name="couponName" label={t("couponName")}>
                    {({value, ref, ...field}) => (
                        <AppInput
                            disabled
                            ref={ref}
                            {...field}
                            value={value?.toUpperCase()}
                            placeholder={t("couponName_placeholder")}
                            onChange={(e) => {
                                const upperValue = e.target.value.toUpperCase().slice(0, 6);
                                field.onChange(upperValue);
                            }}
                        />
                    )}
                </FormItem>

                <div className="flex gap-2">
                    <FormItem name="currency" label={t("currency")} className="flex-1">
                        {({value, ref, ...field}) => (
                            <AppInputNumber
                                ref={ref}
                                value={value}
                                {...field}
                                placeholder={t("currency_placeholder")}
                                disabled={value === false}
                                min={0}
                                controls={true}
                                parser={(value) => (value ? value.replace(/[^\d]/g, "") : "")}
                                formatter={(value) =>
                                    `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                                }
                            />
                        )}
                    </FormItem>

                    <FormItem name="couponType" label={t("couponType")} className="flex">
                        {({value, ref, ...field}) => {
                            return (
                                <AppSelect
                                    ref={ref}
                                    {...field}
                                    value={value === "PERCENTAGE" ? "percent" : "jpy"}
                                    onChange={(selectedValue: string) => {
                                        const stringValue =
                                            selectedValue === "jpy" ? "FIXED_AMOUNT" : "PERCENTAGE";
                                        field.onChange(stringValue);
                                        setCouponTypeValue(stringValue);
                                        if (selectedValue) {
                                            updateCouponForm.clearErrors("currency");
                                        }
                                    }}
                                    options={[
                                        {value: "jpy", label: "¥"},
                                        {value: "percent", label: "%"},
                                    ]}
                                />
                            );
                        }}
                    </FormItem>
                </div>
                <FormItem name="purchaseType" label={t("purchase_type")}>
                    {({value, ref, ...field}) => (
                        <div className="flex items-center gap-2">
                            <AppSelect
                                {...field}
                                value={value}
                                style={{width: "100%"}}
                                placeholder={t("purchase_type_placeholder")}
                                onChange={(value) => {
                                    field.onChange(value);
                                }}
                                options={handleRenderPurchaseType()}
                            />
                        </div>
                    )}
                </FormItem>
                <FormItem name="startsAt" label={t("starts_at")}>
                    {({value, ref, ...field}) => {
                        return (
                            <DatePicker
                                ref={ref}
                                {...field}
                                value={value ? dayjs(value) : null}
                                placeholder={t("startsAt_placeholder")}
                                style={{width: "100%"}}
                                format="YYYY-MM-DD"
                                onChange={(date) => {
                                    if (date) {
                                        const startOfDay = date.startOf("day");
                                        field.onChange(startOfDay.toISOString());
                                    } else {
                                        field.onChange(null);
                                    }
                                }}
                                disabledDate={(current) => {
                                    return current && current.isBefore(dayjs(), "day");
                                }}
                            />
                        );
                    }}
                </FormItem>

                <FormItem name="endsAt" label={t("ends_at")}>
                    {({value, ref, ...field}) => {
                        return (
                            <DatePicker
                                ref={ref}
                                {...field}
                                value={value ? dayjs(value) : null}
                                placeholder={t("endsAt_placeholder")}
                                style={{width: "100%"}}
                                format="YYYY-MM-DD"
                                onChange={(date) => {
                                    if (date) {
                                        const endOfDay = date.endOf("day");
                                        field.onChange(endOfDay.toISOString());
                                    } else {
                                        field.onChange(null);
                                    }
                                }}
                                disabledDate={(current) => {
                                    return current && current.isBefore(dayjs(), "day");
                                }}
                            />
                        );
                    }}
                </FormItem>

                <FormItem name="productIds" label={t("products")}>
                    {({value, ref, ...field}) => (
                        <div className="flex items-center gap-2">
                            <AppSelect
                                {...field}
                                mode="multiple"
                                allowClear
                                style={{width: "100%"}}
                                placeholder={t("product_placeholder")}
                                value={value}
                                onChange={(value) => {
                                    field.onChange(value);
                                }}
                                options={products}
                                loading={loading}
                                filterOption={(input, option) =>
                                    (option?.label?.toString() ?? "")
                                        .toLowerCase()
                                        .includes(input.toLowerCase())
                                }
                                onPopupScroll={handlePopupScroll}
                            />
                        </div>
                    )}
                </FormItem>
                <FormItem name="oncePerCustomer">
                    {({value, ref, ...field}) => (
                        <AppCheckbox
                            checked={value}
                            onChange={(checked) => {
                                field.onChange(checked);
                            }}
                        >
                            {t("limit_one_use_per_customer")}
                        </AppCheckbox>
                    )}
                </FormItem>

                <FormItem name="numberOfUsages" label={t("numberOfUsages")}>
                    {({value, ref, ...field}) => (
                        <div className="flex items-center gap-2">
                            <AppInputNumber
                                ref={ref}
                                value={value}
                                {...field}
                                placeholder={t("numberOfUsages_placeholder")}
                                disabled={isUnlimited === "YES"}
                                min={0}
                                controls={true}
                                parser={(value) => (value ? value.replace(/[^\d]/g, "") : "")}
                                formatter={(value) =>
                                    `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                                }
                            />
                            <AppCheckbox
                                checked={isUnlimited === "YES"}
                                onChange={(value: boolean | string[]) => {
                                    if (typeof value === "boolean") {
                                        const newValue = value ? "YES" : "NO";
                                        handleUnlimitedChange(value);
                                        updateCouponForm.setValue("isUnlimited", newValue);
                                        if (value) {
                                            updateCouponForm.setValue("numberOfUsages", 0);
                                            updateCouponForm.clearErrors("numberOfUsages");
                                        }
                                    }
                                }}
                            >
                                {t("unlimited")}
                            </AppCheckbox>
                        </div>
                    )}
                </FormItem>

                <div className="flex justify-end items-center gap-2">
                    <AppButton type="default" loading={isLoading} onClick={closeModal}>
                        {t("button.cancel")}
                    </AppButton>
                    <AppButton
                        type="primary"
                        htmlType="submit"
                        loading={isLoading}
                        onClick={() => updateCouponForm.handleSubmit(onSubmit)}
                    >
                        {t("button.save")}
                    </AppButton>
                </div>
            </FormWrapper>
        </Modal>
    );
}