"use client";
import { cn } from "@/lib/utils";
import NumberFlow from "@number-flow/react";
import { CheckCheck } from "lucide-react";
import Link from "next/link";
import { useState } from "react";

const PricingSwitch = ({ onSwitch }: { onSwitch: (value: string) => void }) => {
  const [selected, setSelected] = useState("0");

  const handleSwitch = (value: string) => {
    setSelected(value);
    onSwitch(value);
  };

  return (
    <div className="bg-white border border-gray-200 rounded-lg lg:p-4 p-2 md:mt-auto mx-auto h-fit lg:w-60 md:w-36 w-full flex-shrink-0 text-xs md:mb-4 mb-0 ">
      <h3 className="text-sm font-medium mb-3">Pick Your Plan:</h3>
      <div className="space-y-2 md:block flex gap-4">
        <label className="flex items-center gap-2 cursor-pointer">
          <div className="relative flex items-center justify-center">
            <input
              type="radio"
              className="sr-only"
              checked={selected === "0"}
              onChange={() => handleSwitch("0")}
            />
            <div className="h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center">
              {selected === "0" && (
                <div className="h-3 w-3 rounded-full bg-black" />
              )}
            </div>
          </div>
          <span>Monthly Billing</span>
        </label>

        <label className="flex items-center gap-2 cursor-pointer">
          <div className="relative flex items-center justify-center">
            <input
              type="radio"
              className="sr-only"
              checked={selected === "1"}
              onChange={() => handleSwitch("1")}
            />
            <div className="h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center">
              {selected === "1" && (
                <div className="h-3 w-3 rounded-full bg-black" />
              )}
            </div>
          </div>
          <div className="flex lg:flex-row flex-col items-center  lg:gap-0 gap-1">
            <span>Yearly Billing</span>
            <span className="lg:ml-2 text-xs bg-gray-100 text-gray-800 px-2 py-0.5 rounded">
              Save 20%
            </span>
          </div>
        </label>
      </div>
    </div>
  );
};

type PricingCardProps = {
  isYearly?: boolean;
  title: string;
  monthlyPrice?: number;
  yearlyPrice?: number;
  description: string;
  features: string[];
  popular?: boolean;
  highlighted?: boolean;
  price?: string;
  disabled?: boolean;
  cta?: string;
  indexNumber: number;
};

const PricingCard = ({
  isYearly,
  title,
  monthlyPrice,
  yearlyPrice,
  description,
  features,
  popular,
  highlighted,
  price,
  cta = "Get Started",
  indexNumber,
}: PricingCardProps) => {
  const currentPrice = isYearly ? yearlyPrice : monthlyPrice;
  const href =
    price === "Free"
      ? "/sign-up"
      : price === "Contact Us"
        ? "/contact"
        : "/login";

  return (
    <>
      <div
        className={cn(
          "relative flex flex-col sm:gap-6 gap-3 overflow-hidden rounded-2xl lg:p-6 sm:p-4 p-1.5 shadow w-full bg-white text-black",

          indexNumber === 0 && " sm:translate-x-4 sm:pr-10 scale-95",
          indexNumber === 1 &&
            "z-[1] bg-gradient-to-t from-[#4053ff] from-60% to-[#5c6cfc] text-white",
          indexNumber === 2 && " sm:-translate-x-4 sm:px-10 scale-95",
        )}
      >
        {indexNumber === 1 && (
          <div className="absolute inset-0 -z-10 h-full w-full  bg-[linear-gradient(to_right,#4053ff_1px,transparent_1px),linear-gradient(to_bottom,#4053ff_1px,transparent_1px)] bg-[size:2rem_2rem]" />
        )}

        <div className="relative z-10">
          {/* Header */}
          <h2
            className={cn(
              "flex items-center lg:gap-3 gap-1 xl:text-xl sm:text-lg text-[0.8rem] font-medium capitalize",
              popular && "lg:flex-row flex-col-reverse",
            )}
          >
            {title}
            {popular && (
              <div className="mt-1 sm:block hidden text-[0.7rem] rounded-full bg-white px-1 py-0 leading-5 text-black ">
                🔥 Popular
              </div>
            )}
          </h2>

          {/* Price */}
          <div className="xl:mt-4 relative">
            <div className="flex items-baseline">
              <span className="xl:text-4xl lg:text-2xl sm:text-lg text-[0.8rem] font-medium xl:pb-0 py-2">
                {currentPrice === undefined ? (
                  "Free"
                ) : (
                  <span>
                    {" "}
                    ${" "}
                    <NumberFlow
                      format={{
                        // style: 'currency',
                        currency: "USD",
                        // trailingZeroDisplay: 'stripIfInteger',
                      }}
                      value={currentPrice}
                      className="xl:text-4xl lg:text-2xl sm:text-lg text-[0.8rem] font-medium"
                    />
                  </span>
                )}
              </span>
              {currentPrice !== undefined && (
                <>
                  <span
                    className={cn(
                      "ml-1 text-sm sm:block hidden text-muted-foreground",
                      indexNumber === 1 && "text-gray-100",
                    )}
                  >
                    /{isYearly ? "year" : "month"}
                  </span>
                  <span
                    className={cn(
                      "ml-1 text-xs sm:hidden block text-muted-foreground",
                      indexNumber === 1 && "text-gray-100",
                    )}
                  >
                    /{isYearly ? "yr." : "mth."}
                  </span>
                </>
              )}
            </div>
            <p
              className={cn(
                "text-xs md:block hidden text-gray-600",
                indexNumber === 1 && "text-gray-100",
                indexNumber === 3 && "text-gray-300",
              )}
            >
              {description}
            </p>
          </div>
        </div>

        {/* CTA Button */}
        <Link
          href={`/${href}`}
          className={cn(
            "mt-auto h-fit w-full rounded-lg transition-all font-semibold duration-300 sm:text-base text-sm relative z-[2] sm:p-4 p-2 cursor-pointer",
            "hover:shadow-lg hover:translate-y-[-2px] inline-block text-center bg-gray-200 text-black  hover:bg-foreground/90",
            indexNumber === 1 && "bg-white",
            indexNumber === 3 && "bg-white",
          )}
        >
          {cta}
        </Link>
      </div>
    </>
  );
};

type Plan = {
  title: string;
  monthlyPrice?: number;
  yearlyPrice?: number;
  description: string;
  features: string[];
  popular?: boolean;
  highlighted?: boolean;
  price?: string;
  cta?: string;
};

const MainPricing = ({ plans }: { plans: Plan[] }) => {
  const [isYearly, setIsYearly] = useState(false);
  const togglePricingPeriod = (value: string) =>
    setIsYearly(Number.parseInt(value) === 1);
  const allFeatures = [
    "Unlimited Components",
    "Easily Edited and Customized",
    "Combine Files Mercurius",
    "Health Care Included",
    "AI-Powered Automation",
    "Seamless Third-Party Integrations",
    "24/7 Customer Support",
    "Advanced Security & Encryption",
    "Custom Branding Options",
    "Cloud-Based Access Anywhere",
    "Real-Time Collaboration",
    "Data Analytics & Insights",
    "Multi-User Access with Roles",
    "Priority Support & Consultation",
    "Regular Feature Updates",
    "Performance Optimization Tools",
    "Custom Workflows & Automation",
    "Offline Access & Sync",
  ];
  return (
    <>
      <div className="relative bg-gray-50 rounded-xl max-w-screen-xl mx-auto lg:px-8 px-4 pt-0">
        <div className="md:flex sticky top-0 bg-gray-50 pt-8">
          <PricingSwitch onSwitch={togglePricingPeriod} />
          <div className="lg:px-4 flex justify-center gap-0">
            {plans.map((plan, index) => (
              <PricingCard
                key={index}
                isYearly={isYearly}
                title={plan.title}
                monthlyPrice={plan.monthlyPrice}
                yearlyPrice={plan.yearlyPrice}
                description={plan.description}
                features={plan.features}
                popular={plan.popular}
                highlighted={plan.highlighted}
                price={plan.price}
                cta={plan.cta}
                indexNumber={index}
              />
            ))}
          </div>
        </div>
        <div className="bg-gray-50 overflow-hidden space-y-3 py-5 w-full sm:w-[97%]">
          {allFeatures.map((feature, index) => (
            <div
              key={index}
              className={cn(
                "grid grid-cols-4  items-center sm:py-4 py-2 px-2 sm:px-6 rounded-xl",
                index % 2 === 0
                  ? "bg-gray-50"
                  : "bg-white border border-gray-100",
              )}
            >
              <div className="col-span-1 md:text-base sm:text-xs text-[0.65rem] font-medium">
                {feature}
              </div>
              {plans.map((plan, planIndex) => (
                <div key={planIndex} className="col-span-1 text-center">
                  {plan.features.includes(feature) ? (
                    <span className="md:w-7 w-6 md:h-7 h-6 mx-auto rounded-full grid place-content-center bg-green-500">
                      <CheckCheck className="mx-auto h-4 w-4 text-white" />
                    </span>
                  ) : (
                    <span className="block h-5 w-5"></span>
                  )}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default MainPricing;
pricing8
