import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";
import { CheckCircle } from "lucide-react";
import { Button, Badge, SectionHeader } from "../ui/index";
import { useNavigate } from "react-router-dom";
import { usePricing } from "../../hooks/usePricing";
import { CHECKOUT_ROUTE } from "../../helper/routes";

interface Pricingprops {
    headerVariant?: "section" | "hero",
    onGetStarted?: () => void;
    setIsMinLoading?: (show: boolean) => void;
}

export function PricingSection({ onGetStarted, headerVariant, setIsMinLoading }: Pricingprops) {

    const navigate = useNavigate();
    const { data, isLoading } = usePricing()
    const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">("monthly");


    useEffect(() => {
        setIsMinLoading && setIsMinLoading(isLoading);
    }, [isLoading]);

    const handleGetStarted = (plan: any) => {
        if (onGetStarted) {
            onGetStarted();
        } else {
            navigate(CHECKOUT_ROUTE, {
                state: {
                    planName: plan.name,
                    price: plan.price,
                    billingCycle: billingCycle,
                    productId: plan.id,
                    discount: plan.discount,
                    discountprice: plan.discountprice
                }
            });
        }
    };

    const activePlans = data?.plans[billingCycle];

    return (
        <section id="pricing" className="md:px-0  py-20  md:pb-20">
            <SectionHeader variant={headerVariant} badge={data?.badge} special="" title={data?.title} description={data?.description} />
            <div className="container mx-auto max-w-6xl px-4">
                <div className="text-center mb-8 lg:mb-12">
                    <div className="inline-flex items-center gap-2 sm:gap-3 p-1 bg-white rounded-lg border shadow-sm  max-w-full overflow-hidden">
                        <button
                            onClick={() => setBillingCycle("monthly")}
                            className={`px-4 sm:px-6 py-2 rounded-md text-sm sm:text-base transition-colors ${billingCycle === "monthly" ? "bg-secondary text-primary2 hover-primary text-primary2" : "text-primary2 hover-primary"}`}
                        >
                            {data?.toggle?.monthly}
                        </button>
                        <button
                            onClick={() => setBillingCycle("yearly")}
                            className={`px-4 sm:px-6 py-2 rounded-md text-sm sm:text-base flex items-center transition-colors ${billingCycle === "yearly" ? "bg-secondary  text-primary2" : "text-primary2 hover-primary"}`}
                        >
                            {data?.toggle?.yearly}
                            {data?.toggle?.discountBadge > 0 && (
                                <Badge variant="default" className="ml-2 whitespace-nowrap hidden sm:inline-flex">
                                    <span>save {data.toggle.discountBadge} %</span>
                                </Badge>
                            )}
                        </button>
                    </div>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 ">
                    <AnimatePresence mode="wait">
                        {activePlans?.map((plan: any, index: number) => (
                            <motion.div
                                key={`${billingCycle}-${index}`}
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                exit={{ opacity: 0, y: -20 }}
                                transition={{ duration: 0.3, delay: index * 0.1 }}
                                className={`relative bg-white rounded-2xl p-6 lg:p-8 border-2 border-soft ${plan.popular ? "border-primary shadow-2xl lg:scale-105 z-10" : "border-gray-200 shadow-lg"}`}
                            >
                                {plan.popular && (
                                    <div className="absolute -top-4 left-1/2 -translate-x-1/2">
                                        <Badge variant={'popular'} className="text-white px-4 py-1 shadow-md">Most Popular</Badge>
                                    </div>
                                )}

                                <div className="mb-6">
                                    <h3 className="text-2xl font-bold mb-2 text-black">{plan?.name}</h3>
                                    <p className="text-primary2 text-sm mb-4">{plan?.description}</p>
                                    {plan?.isfree ?
                                       <div className="flex items-end gap-2">
                                          <span className="text-4xl lg:text-5xl font-bold text-black">Free</span>
                                       </div>
                                        :
                                        <div className="flex items-end gap-2">
                                            <span className="text-4xl lg:text-5xl font-bold text-black">{plan?.price}</span>
                                            {(!plan?.discount || plan?.discount <= 0) ? "" : <span className="text-2xl line-through text-primary2 mb-2">{plan?.discountprice}</span>}
                                         </div>
                                    }
                                    {plan?.savings ? 
                                        <p className="text-sm check-color mt-2">{plan?.savings}</p>
                                        :
                                        <p className="text-sm check-color mt-2">&nbsp;</p>
                                    }
                                </div>

                                <Button
                                    size="lg"
                                    className={`w-full mb-6 ${plan?.isactive ? "gradient-primary from-blue-500 to-purple-500 text-white cursor-not-allowed" : "hover-primary"
                                        }`}
                                    variant={
                                        plan?.isactive
                                            ? "secondary"
                                            : plan?.popular
                                                ? "popular"
                                                : "normal"
                                    }
                                    onClick={() => !plan?.isactive && handleGetStarted(plan)}
                                >
                                    {plan?.cta}
                                </Button>


                                <ul className="space-y-3">
                                    {plan?.features?.map((feature: any, i: number) => (
                                        <li key={i} className="flex items-start gap-3">
                                            <CheckCircle className="w-5 h-5 check-color shrink-0 mt-0.5" />
                                            <span className="text-primary2 text-sm lg:text-base">{feature}</span>
                                        </li>
                                    ))}
                                </ul>
                            </motion.div>
                        ))}
                    </AnimatePresence>
                </div>
            </div>
        </section>
    );
}