'use client'
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import PlanListing from "@/Component/Admin/AdminPlan/PlanListing";
import { useSelector } from "react-redux";
import { AppStore } from "@/lib/store";
import { useQuery } from "@tanstack/react-query";
import { PaidSubscriptionAPI } from "@/Utils/APIRequest/Endpoints";
import CustomFetch from "@/Utils/APIRequest/AxiosInstance";
import moment from "moment";

const Subscription = (props) => {
    const { setPremiumModal, listRefetch, setMainModal } = props;
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const [planTab, setPlanTab] = useState('month');

    const togglePlanTab = () => {
        setPlanTab(planTab === 'month' ? 'year' : 'month');
    };

    const params = usePathname()
    const role = params.includes("brand") ? "brand" : "admin";

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

    console.log("data", data);

    useEffect(() => {
        // let initialInterval = data?.upcomingSubscription ? data?.upcomingSubscription?.interval : data?.activatedSubscription?.interval;
        let initialInterval = data?.activatedSubscription?.interval;
        setPlanTab(initialInterval);
    }, [data]);


    return (
        <div className="">
            {/* {(data?.upcomingSubscription || data?.activatedSubscription?.status == 'canceled') && <div className="text-center mb-3 bg-gradient-to-tr from-primary to-secondary flex items-center justify-center text-white max-w-xl rounded-md mx-auto p-1">
                <p>You will continue to have access to the <strong>{data?.activatedSubscription?.interval == 'month' ? 'Monthly' : 'Yearly'} {data?.activatedSubscription?.plan?.name}</strong> until <strong>{moment(data?.activatedSubscription?.end_date).format('MMM DD, YYYY')}</strong></p>
            </div>}
            {data?.activatedSubscription?.is_trial_active && <div className="text-center mb-3 bg-gradient-to-tr from-primary to-secondary flex items-center justify-center text-white max-w-xl rounded-md mx-auto p-1">
                <p>You are currently on a <strong>Trial plan</strong> for the <strong>{data?.activatedSubscription?.plan?.name}</strong> . Your trial ends on <strong>{moment(data?.activatedSubscription?.trial_end_date).format('MMM DD, YYYY')}</strong></p>
            </div>} */}
            <div className="flex items-center justify-center mb-8 gap-3">
                <span className={`font-medium text-sm ${planTab === 'month' ? 'text-black' : 'text-gray/75'}`}>
                    Monthly
                </span>

                <label className="relative inline-flex items-center cursor-pointer">
                    <input
                        type="checkbox"
                        className="sr-only peer"
                        checked={planTab === 'year'}
                        onChange={togglePlanTab}
                    />
                    <div className="w-12 h-7 bg-white rounded-full relative border border-gray/50">
                        <div
                            className={`absolute top-[3px] left-[3px] w-5 h-5 bg-gradient-to-r from-primary  to-secondary rounded-full transition-transform duration-300 ${planTab === 'year' ? 'translate-x-5' : ''
                                }`}
                        ></div>
                    </div>
                </label>

                <span className={`font-medium text-sm ${planTab === 'year' ? 'text-black' : 'text-gray/75'}`}>
                    Yearly
                </span>

                <span className="text-xs text-green-500">Save 20% with Yearly</span>
            </div>
            <div className="flex justify-center">
                <PlanListing role={role} setPremiumModal={setPremiumModal} listRefetch={refetch} planTab={planTab} setMainModal={setMainModal} planData={data} />
            </div>
        </div>
    )
}

export default Subscription