'use client'
import { useEffect, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import { useQuery } from "@tanstack/react-query"
import moment from "moment"
import ConfirmationModal from "@/Component/Common/Modal/ConfirmationModal"
import NoData from "@/Component/Common/Tables/NoData/NoData"
import Loader from "@/Layout/Loader"
import { getUserDetails } from "@/lib/Features/UserDetails/userDetails"
import { AppStore } from "@/lib/store"
import CustomFetch from "@/Utils/APIRequest/AxiosInstance"
import { CancelSchedulingAPI, CancelSubscriptionAPI, ManageSubscriptionAPI, PaidSubscriptionAPI, PaymentSubScriptionsAPI, ReactivateSubscriptionAPI, SelfAPI } from "@/Utils/APIRequest/Endpoints"
import { CustomToast } from "@/Utils/CustomToast"
import usePost from "@/Utils/Hooks/usePost"
import { useTranslation } from "@/Utils/Hooks/useTranslate"
import AdminPaymentSubscriptionHistory from "@/Component/Admin/AdminPlan/AdminPaymentSubscriptionHistory"
import SubscriptionHistory from "./SubscriptionHistory"

const Subscription = () => {
    const dispatch = useDispatch()
    const { translations } = useTranslation();
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const currentPlan = userDetails?.subscription?.length > 0 ? userDetails?.subscription[0] : null
    const [modal, setModal] = useState("");
    const [scheduleModal, setScheduleModal] = useState("");
    const [reactivateModal, setReactivateModal] = useState("")
    const [cancelTrialModal, setCancelTrialModal] = useState("")
    const [manageSub, setManageSub] = useState(false);

    // Self API
    const { data, refetch: selfRefetch, isPending: SelfLoader } = useQuery({ queryKey: [SelfAPI], queryFn: () => CustomFetch({ url: SelfAPI, }, null, false), refetchOnWindowFocus: false, enabled: false, select: (data) => data?.data });

    useEffect(() => {
        if (data) {
            dispatch(getUserDetails(data));
        }
    }, [data])

    // API GET
    // const { data: PlanAPIData, isPending, refetch } = useQuery({ queryKey: [PaymentSubScriptionsAPI], queryFn: () => CustomFetch({ url: PaymentSubScriptionsAPI, params: { status: -1 } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.data })

    // API GET
    const { data: SubscriptionAPIData, isPending, refetch } = useQuery({ queryKey: [PaidSubscriptionAPI], queryFn: () => CustomFetch({ url: PaidSubscriptionAPI }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data })

    const { data: ManageAPIData, isPending: manageLoader, refetch: manageRefetch } = useQuery({ queryKey: [ManageSubscriptionAPI], queryFn: () => CustomFetch({ url: ManageSubscriptionAPI }, null, false), refetchOnWindowFocus: false, enabled: manageSub == true, select: (data) => data?.data })

    useEffect(() => {
        if (ManageAPIData) {
            window.location.href = ManageAPIData?.url;
            setManageSub(false);
        }
    }, [ManageAPIData])

    // API Patch Cancel Subscription
    const { isPending: deleteLoader, mutate } = usePost(`${CancelSubscriptionAPI}/${modal}`, null, (response) => {
        if (response.status == 200 || response.status == 201) {
            CustomToast("success", translations?.planCancelSuccessfully)
            refetch()
            selfRefetch()
            setModal('')
        }
    }, 'patch')

    // API Patch Cancel Schedule Subscription
    const { isPending: scheduleLoader, mutate: scheduleMutate } = usePost(`${CancelSchedulingAPI}/${scheduleModal}`, null, (response) => {
        if (response.status == 200 || response.status == 201) {
            CustomToast("success", translations?.planCancelSuccessfully)
            refetch()
            selfRefetch()
            setScheduleModal('')
        }
    }, 'patch')

    // API Patch Reactivate Subscription
    const { isPending: reactivateLoader, mutate: reactivateMutate } = usePost(`${ReactivateSubscriptionAPI}/${reactivateModal}`, null, (response) => {
        if (response.status == 200 || response.status == 201) {
            CustomToast("success", translations?.planReactivateSuccessfully)
            refetch()
            selfRefetch()
            setReactivateModal('')
        }
    }, 'patch')

    const callbackFunction = () => {
        mutate()
    }

    const callbackFunctionSchedule = () => {
        scheduleMutate()
    }

    const callbackFunctionReactivate = () => {
        reactivateMutate()
    }

    const callbackFunctionCancelTrial = () => {
        // cancelTrialMutate()
    }

    const cancelSubscriptionAPI = (plan) => {
        console.log("plan", plan);

        if (plan?.status == 'upcoming') {
            setScheduleModal(plan?.id)
        } else if (plan?.status == 'canceled') {
            setReactivateModal(plan?.id)
        } else if (plan.status == 'active' && plan?.is_trial_active) {
            setCancelTrialModal(plan?.id)
        } else {
            setModal(plan?.id)
        }
    }

    const shouldShowReactivateButton = (activated, upcoming) => {
        if (activated?.plan?.plan_type !== 'premium') return false;
        if (activated?.status !== 'canceled') return false;
        if (
            upcoming &&
            upcoming.plan?.id === activated.plan?.id &&
            upcoming.interval !== activated.interval
        ) {
            return false;
        }
        return true;
    };

    const manageSubscription = () => {
        setManageSub(true)
    }

    if (isPending) {
        return <Loader />
    }

    if (manageSub && manageLoader) {
        return <Loader />
    }

    return (
        <>
            <div>
                <h2 className="text-primary text-xl mb-6 font-medium leading-6">✅ {translations?.subscriptions}</h2>

                {/* {(!SubscriptionAPIData?.upcomingSubscription && SubscriptionAPIData?.activatedSubscription?.status == 'canceled') && <p className="mb-4">You will lose your access to the <span className="font-semibold capitalize">{SubscriptionAPIData?.activatedSubscription?.interval == 'month' ? 'Monthly' : 'Yearly'} {SubscriptionAPIData?.activatedSubscription?.plan?.name} </span> after {moment(SubscriptionAPIData?.activatedSubscription?.end_date).format("DD MMM YYYY")}.</p>}

                {SubscriptionAPIData?.upcomingSubscription && <p className="mb-4">Your plan will change to <span className="font-semibold capitalize">{SubscriptionAPIData?.upcomingSubscription?.interval == 'month' ? 'Monthly' : 'Yearly'} {SubscriptionAPIData?.upcomingSubscription?.plan?.name}</span> after {moment(SubscriptionAPIData?.activatedSubscription?.end_date).format("DD MMM YYYY")}. {SubscriptionAPIData?.upcomingSubscription?.plan?.plan_type !== 'free' && <span className={`underline font-medium text-gray leading-normal cursor-pointer`} onClick={(() => cancelSubscriptionAPI(SubscriptionAPIData?.upcomingSubscription))}>{translations.cancelSubscription}</span>}</p>}

                {SubscriptionAPIData?.activatedSubscription?.is_trial_active && <p className="mb-4">You are currently on a <span className="font-semibold">Free Trial plan</span> for the <span className="font-semibold">{SubscriptionAPIData?.activatedSubscription?.plan?.name}</span>. Your trial ends on <span className="font-semibold">{moment(data?.activatedSubscription?.trial_end_date).format('MMM DD, YYYY')}</span></p>} */}

                <div className={`rounded-2xl bg-primary/10 p-4 mb-2.5`}>
                    <div className="flex justify-between items-center gap-3">
                        <span className="rounded-md py-1.5 px-3 text-xs font-medium focus-visible:outline-none bg-gradient-to-br from-secondary to-primary text-white capitalize">{(SubscriptionAPIData?.activatedSubscription?.is_active) ? translations?.active : ""} {SubscriptionAPIData?.activatedSubscription?.is_trial_active ? translations?.freeTrial : SubscriptionAPIData?.activatedSubscription?.plan?.name} </span>

                        {!SubscriptionAPIData?.activatedSubscription?.is_trial_active &&
                            <>
                                {SubscriptionAPIData?.activatedSubscription?.status == "canceled" || SubscriptionAPIData?.activatedSubscription?.status == "upcoming" ? <p className=" text-xs leading-normal text-gray">
                                    {translations?.expiredOn} {moment(SubscriptionAPIData?.activatedSubscription?.end_date).format("DD MMM YYYY")}
                                </p> : <p className=" text-xs leading-normal text-gray"> {translations?.renewOn} {moment(SubscriptionAPIData?.activatedSubscription?.end_date).format("DD MMM YYYY")} </p>}
                            </>
                        }
                    </div>
                    <div className="text-3xl text-black leading-tight font-bold mt-3">${SubscriptionAPIData?.activatedSubscription?.amount}<span className="text-black text-opacity-40 text-sm capitalize">/{SubscriptionAPIData?.activatedSubscription?.interval}</span></div>
                    {/* {(SubscriptionAPIData?.activatedSubscription?.plan?.plan_type !== 'free') &&
                        <div className="flex justify-end cursor-pointer">
                            {(SubscriptionAPIData?.activatedSubscription?.status == "active" && !SubscriptionAPIData?.upcomingSubscription && !SubscriptionAPIData?.activatedSubscription?.is_trial_active) &&
                                <span className={`underline  font-medium text-xs text-gray  leading-normal`}
                                    onClick={(() => cancelSubscriptionAPI(SubscriptionAPIData?.activatedSubscription))}>
                                    {translations.cancelSubscription}
                                </span>
                            }
                            {shouldShowReactivateButton(SubscriptionAPIData?.activatedSubscription, SubscriptionAPIData?.upcomingSubscription) &&
                                <span className={`bg-green-500 px-2 py-1 rounded text-white text-sm`}
                                    onClick={(() => cancelSubscriptionAPI(SubscriptionAPIData?.activatedSubscription))}>
                                    Reactivate plan
                                </span>
                            }
                            {SubscriptionAPIData?.activatedSubscription?.is_trial_active &&
                                <span className={`underline  font-medium text-xs text-gray  leading-normal`}
                                    onClick={(() => cancelSubscriptionAPI(SubscriptionAPIData?.activatedSubscription))}>
                                    Cancel Free Trial
                                </span>
                            }
                        </div>
                    } */}
                    {(SubscriptionAPIData?.activatedSubscription?.plan?.plan_type !== 'free') &&
                        <div className="flex justify-end cursor-pointer">
                            <span className={`underline font-medium text-xs text-gray  leading-normal`}
                                onClick={(() => manageSubscription())}>
                                {translations?.manageSubscription}
                            </span>
                        </div>
                    }
                </div>
            </div>
            <h3 className="xl:text-xl text-lg mb-3 font-medium leading-6 mt-5">{translations?.billingHistory}</h3>
            <SubscriptionHistory />
            {modal && <ConfirmationModal loader={deleteLoader} modal={modal} args={{ message: `${translations?.cancelPlanMessage} ${moment(SubscriptionAPIData?.activatedSubscription?.end_date).format("DD MMM YYYY")}` }} setModal={setModal} callbackFunction={callbackFunction} translations={translations} />}
            {scheduleModal && <ConfirmationModal loader={scheduleLoader} modal={scheduleModal} args={{ message: translations?.cancelSchedulePlanMessage }} setModal={setScheduleModal} callbackFunction={callbackFunctionSchedule} translations={translations} />}
            {reactivateModal && <ConfirmationModal loader={reactivateLoader} modal={reactivateModal} args={{ message: translations?.reactivatePlanMessage }} setModal={setReactivateModal} callbackFunction={callbackFunctionReactivate} translations={translations} />}
            {cancelTrialModal && <ConfirmationModal loader={deleteLoader} modal={cancelTrialModal} args={{ message: `${translations?.freeTrialPlanMessage}` }} setModal={setCancelTrialModal} callbackFunction={callbackFunctionCancelTrial} translations={translations} />}
        </>
    )
}

export default Subscription