"use client";

import React, { useEffect, useState } from "react";
import { Star, Zap, Building2 } from "lucide-react";
import { FaRegCircleCheck } from "react-icons/fa6";
import { motion } from "framer-motion";
import { useAuth } from "@/Context/AuthProvider";
import axios from "axios";
import { toast } from "sonner";
import { STORAGE_KEYS } from "@/Utils/storage";
import { addToGuestCart } from "@/Utils/cartUtils";

const CompetitorAnalysisToolCardSkeleton = () => (
  <div className="rounded-2xl p-6 bg-white border border-[#0B0F191A] animate-pulse">
    <div className="w-10 h-10 rounded-xl bg-gray-200 mb-4"></div>

    <div className="h-5 w-32 bg-gray-300 rounded mb-2"></div>

    <div className="h-4 w-full bg-gray-200 rounded mb-1"></div>
    <div className="h-4 w-3/4 bg-gray-200 rounded"></div>

    <div className="mt-4 h-6 w-24 bg-gray-300 rounded"></div>

    <div className="mt-6 h-10 w-full bg-gray-300 rounded-xl"></div>

    <div className="mt-6 space-y-2">
      {[1, 2, 3, 4, 5].map((i) => (
        <div key={i} className="h-4 w-5/6 bg-gray-200 rounded"></div>
      ))}
    </div>
  </div>
);

const CompetitorAnalysisPricingSection = () => {
  const [competitorAnalysisTools, setCompetitorAnalysisTools] = useState([]);
  const [loading, setLoading] = useState(false);
  const [addingId, setAddingId] = useState(null);
  const { authUser } = useAuth();

  const userId = authUser?._id;

  const container = {
    hidden: {},
    show: {
      transition: {
        staggerChildren: 0.15,
      },
    },
  };

  const card = {
    hidden: { opacity: 0, y: 40 },
    show: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5, ease: "easeOut" },
    },
  };

  useEffect(() => {
    const cachedCompetitorAnalysisTools = localStorage.getItem(
      "competitorAnalysisTools",
    );

    if (cachedCompetitorAnalysisTools) {
      setCompetitorAnalysisTools(JSON.parse(cachedCompetitorAnalysisTools));
    }
    setLoading(true);
    fetchAllCompetitorAnalysisTool();
  }, []);

  const fetchAllCompetitorAnalysisTool = () => {
    axios
      .get(
        `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/competitorAnalysisTool/get-all`,
        {
          withCredentials: true,
        },
      )
      .then((response) => {
        console.log(response?.data?.competitorAnalysisTools);
        setCompetitorAnalysisTools(response?.data?.competitorAnalysisTools);
        localStorage.setItem(
          "competitorAnalysisTools",
          JSON.stringify(response?.data?.competitorAnalysisTools),
        );
      })
      .catch((error) =>
        console.error("Error fetching competitor analysis tools:", error),
      )
      .finally(() => setLoading(false));
  };

  const getPlanIcon = (index) => {
    const icons = [
      <Zap className="text-white w-6 h-6" />,
      <Star className="w-6 h-6" />,
      <Building2 className="text-white w-6 h-6" />,
    ];

    return icons[index] || icons[0];
  };

  const addToCart = async (service) => {
    setAddingId(service._id);

    const currentUserId = authUser?._id;

    const currency = service.currency || "USD";

    const currencySymbols = {
      USD: "$",
      EUR: "€",
      GBP: "£",
      AED: "د.إ",
      INR: "₹",
    };

    const serviceData = {
      serviceId: service._id,
      serviceType: "CompetitorAnalysisTool",
      serviceName: "Competitor Analysis Tool",
      name: service.name,
      price: service.price,
      oldPrice: service.oldPrice,
      currency,
      currencySymbol: currencySymbols[currency],
      plan: service.plan,
    };

    try {
      let message = "";

      if (currentUserId) {
        const res = await axios.post(
          `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/cart/add-item`,
          { userId: currentUserId, service: serviceData },
          { withCredentials: true },
        );

        const storedCount = Number(
          localStorage.getItem(STORAGE_KEYS.USER_COUNT) || 0,
        );

        localStorage.setItem(
          STORAGE_KEYS.USER_COUNT,
          (storedCount + 1).toString(),
        );

        window.dispatchEvent(new Event(STORAGE_KEYS.CART_EVENT));

        message = res?.data?.message;
      } else {
        const res = addToGuestCart(serviceData);

        if (!res.success) {
          toast.error(res.message);
          return;
        }

        message = `${serviceData.serviceName} - ${serviceData.name} added to cart`;
      }

      toast.success(message);
    } catch (error) {
      console.error("Error adding to cart:", error);
      toast.error(error.response?.data?.message || "Failed to add to cart");
    } finally {
      setAddingId(null);
    }
  };

  return (
    <section className="py-6 lg:py-16 px-6">
      <div className="max-w-6xl mx-auto text-center">
        <h2 className="text-2xl md:text-3xl font-semibold text-[#212121]">
          Flexible pricing for Aurrganic's Competitor Research Tool
        </h2>
        <motion.div
          variants={container}
          initial="hidden"
          animate="show"
          className="mt-14 grid md:grid-cols-3 gap-6"
        >
          {loading
            ? Array(3)
                .fill(0)
                .map((_, i) => <CompetitorAnalysisToolCardSkeleton key={i} />)
            : competitorAnalysisTools.map((plan, index) => (
                <motion.div
                  key={plan._id}
                  variants={card}
                  whileHover={{ y: -4, scale: 1.01 }}
                  className={`relative rounded-2xl p-6 text-left transition ${
                    plan.popular
                      ? "bg-[#794AFF] text-white shadow-[0_20px_60px_rgba(0,0,0,0.2)]"
                      : "bg-white border border-[#0B0F191A] shadow-sm"
                  }`}
                >
                  {plan.popular && (
                    <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-white text-[#794AFF] text-sm px-3 py-1 rounded-full border">
                      Most Popular
                    </div>
                  )}

                  <motion.div
                    whileHover={{ rotate: 8, scale: 1.1 }}
                    className={`w-10 h-10 flex items-center justify-center rounded-xl mb-4 ${
                      plan.popular ? "bg-white text-[#794AFF]" : "bg-[#794AFF]"
                    }`}
                  >
                    {getPlanIcon(index)}
                  </motion.div>

                  <h3 className="text-xl lg:text-2xl font-semibold">
                    {plan.name}
                  </h3>

                  <p
                    className={`mt-2 ${
                      plan.popular ? "text-white/80" : "text-[#676767]"
                    }`}
                  >
                    {plan.description}
                  </p>

                  <motion.div
                    key={plan.price}
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    className="mt-4"
                  >
                    {plan.oldPrice && (
                      <div
                        className={`block text-sm lg:text-base line-through opacity-60 ${
                          plan.popular ? "text-white/80" : "text-[#676767]"
                        }`}
                      >
                        {plan.currencySymbol}
                        {plan.oldPrice}
                        {plan.plan === "Monthly"
                          ? " /month"
                          : plan.plan === "Yearly"
                            ? " /year"
                            : plan.plan === "3 Year"
                              ? " /3 year"
                              : ""}
                      </div>
                    )}

                    <div className="flex items-end gap-1">
                      <span className="text-3xl lg:text-4xl font-bold">
                        {plan.currency === "AED" ? (
                          <>
                            <span
                              className={`text-base font-normal ${
                                plan.popular ? "text-white/80" : "text-gray-600"
                              }`}
                            >
                              {plan.plan === "Monthly"
                                ? "month / "
                                : plan.plan === "Yearly"
                                  ? "year / "
                                  : plan.plan === "3 Year"
                                    ? "3 year / "
                                    : ""}
                            </span>

                            {plan.currencySymbol}
                            {plan.price}
                          </>
                        ) : (
                          <>
                            {plan.currencySymbol}
                            {plan.price}
                            <span
                              className={`text-base font-normal ${
                                plan.popular ? "text-white/80" : "text-gray-600"
                              }`}
                            >
                              {plan.plan === "Monthly"
                                ? " /month"
                                : plan.plan === "Yearly"
                                  ? " /year"
                                  : plan.plan === "3 Year"
                                    ? " /3 year"
                                    : ""}
                            </span>
                          </>
                        )}
                      </span>
                    </div>
                  </motion.div>

                  <motion.button
                    onClick={() => addToCart(plan)}
                    disabled={addingId === plan._id}
                    whileTap={{ scale: addingId === plan._id ? 1 : 0.95 }}
                    className={`mt-6 w-full py-3 rounded-xl text-md font-medium flex items-center justify-center gap-2 ${
                      plan.popular
                        ? "bg-white text-[#794AFF]"
                        : "bg-[#794AFF] text-white"
                    } ${addingId === plan._id ? "opacity-70 cursor-not-allowed" : "hover:opacity-90"}`}
                  >
                    {addingId === plan._id ? (
                      <>
                        <span className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></span>
                        Adding...
                      </>
                    ) : (
                      "Add to cart"
                    )}
                  </motion.button>

                  <ul className="mt-6 space-y-3 text-sm">
                    {(plan.features || []).map((item, i) => (
                      <motion.li
                        key={i}
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: i * 0.05 }}
                        className="flex items-center gap-3"
                      >
                        <FaRegCircleCheck
                          size={16}
                          className={plan.popular ? "" : "text-[#3B3B3B]"}
                        />
                        {item}
                      </motion.li>
                    ))}
                  </ul>
                </motion.div>
              ))}
        </motion.div>
      </div>
    </section>
  );
};

export default CompetitorAnalysisPricingSection;