"use client";
import { cn } from "@/lib/utils";
import NumberFlow from "@number-flow/react";
import * as Switch from "@radix-ui/react-switch";
import * as Tooltip from "@radix-ui/react-tooltip";
import { BadgeCheck, CheckCheck, Info, Minus } from "lucide-react";
import { motion } from "motion/react";
import { useState } from "react";
type TPlan = {
  title: string;
  monthlyPrice?: number;
  yearlyPrice?: number;
  description: string;
  features: string[];
  popular?: boolean;
  highlighted?: boolean;
  price?: string;
  disabled?: boolean;
  cta?: string;
};

interface PricingSwitchProps {
  isYearly: boolean;
  setIsYearly: any;
  isCompared: boolean;
  setIsCompared: any;
}

type PricingCardProps = {
  isYearly?: boolean;
  isCompared?: boolean;
  plan: TPlan;
  indexNumber: number;
};

export const PricingSwitch = ({
  isYearly,
  isCompared,
  setIsYearly,
  setIsCompared,
}: PricingSwitchProps) => {
  return (
    <div className="flex sm:flex-row flex-col justify-between sm:items-center sm:gap-0 gap-2">
      <div className="flex items-center gap-3">
        <span className="sm:text-sm text-xs font-medium text-gray-300">
          Save with annual billing
        </span>
        <Switch.Root
          checked={isYearly}
          onCheckedChange={() => setIsYearly(!isYearly)}
          className="group relative h-[24px] w-[44px] cursor-pointer rounded-full bg-gray-600 outline-none data-[state=checked]:bg-blue-600"
        >
          <Switch.Thumb className="block h-[20px] w-[20px] translate-x-[2px] rounded-full bg-white shadow-lg transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[22px]" />
        </Switch.Root>
        {isYearly && (
          <motion.div
            initial={{ opacity: 0, y: 5 }}
            animate={{ opacity: 1, y: 0 }}
          >
            <span className="text-xs font-medium text-white">SAVE 30%</span>
          </motion.div>
        )}
      </div>
      <div className="flex items-center gap-3">
        <span className="sm:text-sm text-xs font-medium text-gray-300">
          Compared Prices
        </span>
        <Switch.Root
          checked={isCompared}
          onCheckedChange={() => setIsCompared(!isCompared)}
          className="group relative h-[24px] w-[44px] cursor-pointer rounded-full bg-gray-600 outline-none data-[state=checked]:bg-blue-600"
        >
          <Switch.Thumb className="block h-[20px] w-[20px] translate-x-[2px] rounded-full bg-white shadow-lg transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[22px]" />
        </Switch.Root>
      </div>
    </div>
  );
};

const PricingCard = ({
  isYearly,
  plan,
  indexNumber,
  isCompared,
}: PricingCardProps) => {
  const currentPrice = isYearly ? plan.yearlyPrice : plan.monthlyPrice;

  return (
    <>
      <div
        className={cn(
          "relative flex z-[1] flex-col gap-6 overflow-hidden rounded-2xl w-full xl:p-6 sm:p-4 p-2 shadow bg-gradient-to-t from-60% from-gray-950 to-gray-900 text-white",
          plan.popular && " from-[#4053ff] to-[#5c6cfc] text-white",
          isCompared && "sm:p-4 p-3",
        )}
      >
        <div
          className={cn(
            "absolute inset-0 -z-10 h-full w-full  bg-[linear-gradient(to_right,#030712_1px,transparent_1px),linear-gradient(to_bottom,#030712_1px,transparent_1px)] bg-[size:2rem_2rem]",
            plan.popular &&
              "bg-[linear-gradient(to_right,#4053ff_1px,transparent_1px),linear-gradient(to_bottom,#4053ff_1px,transparent_1px)]",
          )}
        />

        <div className={"relative z-10"}>
          {/* Header */}
          <h2
            className={cn(
              "flex items-center gap-3 text-xl font-medium capitalize pb-2",
              isCompared && "sm:text-xl text-sm",
            )}
          >
            {plan.title}
          </h2>

          {/* Price */}
          {!isCompared && (
            <div className="xl:mt-4 xl:mb-0 mb-1 mt-2 relative">
              <div className="flex items-baseline">
                <span className="lg:text-4xl text-2xl font-medium">
                  {currentPrice === undefined ? (
                    "Free"
                  ) : (
                    <span>
                      ${" "}
                      <NumberFlow
                        format={{
                          currency: "USD",
                        }}
                        value={currentPrice}
                        className="lg:text-4xl text-2xl font-medium"
                      />
                    </span>
                  )}
                </span>
                {currentPrice !== undefined && (
                  <>
                    <span
                      className={cn(
                        "xl:block hidden ml-1 text-sm text-gray-200",
                      )}
                    >
                      /{isYearly ? "year" : "month"}
                    </span>
                    <span
                      className={cn(
                        "xl:hidden block ml-1 text-sm text-gray-200",
                      )}
                    >
                      /{isYearly ? "yr." : "mo."}
                    </span>
                  </>
                )}
              </div>
            </div>
          )}
          <button
            className={cn(
              "mt-auto h-fit w-full rounded-lg transition-all font-semibold duration-300  relative z-[2] p-2 cursor-pointer",
              "hover:shadow-lg hover:translate-y-[-2px]  inline-block text-center bg-white text-black  hover:bg-white/90",
              isCompared && "lg:text-base text-sm p-1.5",
            )}
          >
            {plan.cta}{" "}
            {isCompared && (
              <>
                <br className="md:hidden block" />
                {currentPrice !== undefined && (
                  <span>
                    ( $
                    <NumberFlow
                      format={{
                        currency: "USD",
                      }}
                      value={currentPrice}
                      className="lg:text-sm text-xs font-medium"
                    />
                    )
                  </span>
                )}
              </>
            )}
          </button>
          {/* Features */}
          {!isCompared && (
            <ul className="mt-6 xl:space-y-4 space-y-2 text-white ">
              {plan.features.map((feature, index) => (
                <li
                  key={index}
                  className={cn("flex items-center gap-2 xl:text-sm text-xs")}
                >
                  <BadgeCheck className="h-4 w-4 flex-shrink-0" />
                  {feature}
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </>
  );
};

const MainPricing = ({ plans }: { plans: TPlan[] }) => {
  const [isYearly, setIsYearly] = useState(false);
  const [isCompared, setIsCompared] = useState(false);

  // Features organized by category
  const featureCategories = [
    {
      name: "Core Features",
      features: [
        {
          name: "Workspace users",
          tooltip: "Number of users who can access the workspace",
        },
        { name: "Boards", tooltip: "Number of boards you can create" },
        {
          name: "Unlimited storage",
          tooltip: "Storage space for your files and documents",
        },
        {
          name: "Unlimited projects",
          tooltip: "Number of projects you can create",
        },
        {
          name: "Priority levels",
          tooltip: "Set priority levels for tasks and projects",
        },
        { name: "Guests", tooltip: "Invite guests with limited access" },
      ],
    },
    {
      name: "Customization",
      features: [
        {
          name: "Custom fields",
          tooltip: "Create custom fields for your tasks and projects",
        },
        {
          name: "Sub-tasks",
          tooltip: "Create sub-tasks for better organization",
        },
        { name: "Task reminders", tooltip: "Get reminders for upcoming tasks" },
        {
          name: "Private projects",
          tooltip: "Create private projects visible only to selected members",
        },
        {
          name: "File uploads",
          tooltip: "Upload files to your tasks and projects",
        },
      ],
    },
    {
      name: "Views & Layouts",
      features: [
        { name: "Kanban layout", tooltip: "View your tasks in a Kanban board" },
        { name: "List layout", tooltip: "View your tasks in a list" },
        { name: "Calendar layout", tooltip: "View your tasks in a calendar" },
        { name: "Timeline layout", tooltip: "View your tasks in a timeline" },
        {
          name: "Custom filters",
          tooltip: "Create custom filters for your tasks",
        },
      ],
    },
    {
      name: "Collaboration",
      features: [
        { name: "Comments", tooltip: "Comment on tasks and projects" },
        { name: "Assigned tasks", tooltip: "Assign tasks to team members" },
        {
          name: "Team roles & permissions",
          tooltip: "Set roles and permissions for team members",
        },
      ],
    },
    {
      name: "Advanced",
      features: [
        { name: "Labels", tooltip: "Create and use labels for organization" },
        {
          name: "Task descriptions",
          tooltip: "Add detailed descriptions to tasks",
        },
        {
          name: "100+ integrations",
          tooltip: "Connect with other tools and services",
        },
        { name: "Data export", tooltip: "Export your data in various formats" },
        {
          name: "Attachment permissions",
          tooltip: "Control who can view and download attachments",
        },
        {
          name: "Organization visible boards",
          tooltip: "Make boards visible to the entire organization",
        },
        {
          name: "Unlimited activity log",
          tooltip: "Track all activities in your workspace",
        },
      ],
    },
  ];
  const planValues: { [key: string]: string[] } = {
    "Workspace users": ["1", "Up to 15", "Up to 25", "Unlimited"],
    Boards: ["10", "Unlimited", "Unlimited", "Unlimited"],
    "Unlimited storage": ["200 MB / user", "1 GB / user", "✓", "✓"],
    "Unlimited projects": ["5", "10", "✓", "✓"],
    Guests: ["—", "—", "20", "200"],
    "File uploads": ["10 MB", "250 MB", "250 MB", "250 MB"],
    "Custom filters": ["5", "150", "Unlimited", "Unlimited"],
    "Task reminders": ["4 Task", "10 Task", "Unlimted", "Unlimited"],
    "Unlimited activity log": ["-", "-", "✓", "✓"],
  };

  return (
    <>
      <div className="relative rounded-xl  mx-auto md:px-8 sm:px-4 pt-0">
        <PricingSwitch
          isYearly={isYearly}
          isCompared={isCompared}
          setIsCompared={setIsCompared}
          setIsYearly={setIsYearly}
        />
        <div
          className={cn(
            "lg:flex grid grid-cols-2 gap-2 sticky items-center top-0 pt-4 ",
            isCompared && "grid md:grid-cols-5 sm:grid-cols-4 grid-cols-2",
          )}
        >
          {isCompared && (
            <div className="absolute -bottom-[25%] left-0 h-14 w-full bg-gradient-to-b from-black from-40%"></div>
          )}
          {isCompared && (
            <h1 className="text-2xl md:block hidden w-full">
              Compare Plans
            </h1>
          )}
          {plans.map((plan, index) => (
            <PricingCard
              key={index}
              isYearly={isYearly}
              isCompared={isCompared}
              indexNumber={index}
              plan={plan}
            />
          ))}
        </div>
        {isCompared && (
          <div className=" overflow-hidden py-5 pt-10  ">
            {/* Feature Categories */}
            <Tooltip.Provider delayDuration={200}>
              {featureCategories.map((category, categoryIndex) => (
                <div
                  key={categoryIndex}
                  className="sm:space-y-0 space-y-4 sm:bg-transparent "
                >
                  {/* Category Header */}
                  <div className="sm:border-b sm:bg-gray-950 bg-neutral-950 ">
                    <div className="p-4 font-bold">{category.name}</div>
                  </div>

                  {/* Features */}
                  {category.features.map((feature, featureIndex) => (
                    <div
                      key={featureIndex}
                      className="sm:grid flex sm:grid-cols-5 flex-wrap gap-0 border-b   sm:bg-transparent bg-neutral-900 sm:hover:bg-gray-900/20  hover:backdrop-blur-md"
                    >
                      <div className="p-4 flex md:text-base text-sm items-center gap-2">
                        {feature.name}
                        <Tooltip.Root>
                          <Tooltip.Trigger asChild>
                            <Info className="text-gray-400 cursor-pointer h-4 w-4" />
                          </Tooltip.Trigger>
                          <Tooltip.Portal>
                            <Tooltip.Content
                              className="select-none rounded w-72 leading-[120%] text-center z-50 bg-gray-950 border text-white border-gray-900 px-[15px] py-2.5 text-[15px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
                              sideOffset={5}
                            >
                              {feature.tooltip}
                              <Tooltip.Arrow className="fill-gray-900" />
                            </Tooltip.Content>
                          </Tooltip.Portal>
                        </Tooltip.Root>
                      </div>

                      {plans.map((plan, planIndex) => {
                        // Check if this feature has specific values
                        const hasSpecificValue = planValues[feature.name];
                        const specificValue = hasSpecificValue
                          ? planValues[feature.name][planIndex]
                          : null;

                        // Determine if feature is included in this plan

                        return (
                          <div
                            key={planIndex}
                            className={cn(
                              "p-4 md:text-base text-xs text-center sm:hover:bg-transparent hover:bg-neutral-800 transition-all duration-300 flex sm:gap-0 gap-2 items-center justify-center",
                              plan.popular ? "sm:bg-gray-950" : "",
                            )}
                          >
                            <span className="sm:hidden block text-xs text-blue-500">
                              {plan.title.split("")[0]}
                              {plan.title.split("")[1]}
                              {plan.title.split("")[2]}.
                            </span>
                            {specificValue ? (
                              specificValue === "✓" ? (
                                <div className="h-6 w-6 rounded-full bg-blue-600 flex items-center justify-center">
                                  <CheckCheck className="h-4 w-4 text-white" />
                                </div>
                              ) : (
                                <span>{specificValue}</span>
                              )
                            ) : (
                              <Minus className="h-4 w-4 text-gray-400" />
                            )}
                          </div>
                        );
                      })}
                    </div>
                  ))}
                </div>
              ))}
            </Tooltip.Provider>
          </div>
        )}
      </div>
    </>
  );
};

export default MainPricing;
pricing14
