"use client";
import { useEffect, useMemo, useState } from "react";
import { cn } from "@/lib/utils";

import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  type CarouselApi,
} from "@/components/ui/carousel";

import Link from "next/link";
import { Check } from "lucide-react";

const pricingItems = [
  {
    plan: "Free",
    price: {
      monthly: 0,
      yearly: 0,
    },
    includes: "What's included:",
    features: [
      "Basic real-time analytics",
      "Event tracking",
      "7-day data retention",
      "Up to 3,000 monthly page views",
    ],
    cta: "Start for free",
  },
  {
    plan: "Pro",
    price: {
      monthly: 14,
      yearly: 11,
    },
    includes: "Everything in Free, plus:",
    features: [
      "Custom dashboards",
      "Funnel analysis",
      "Heatmaps",
      "30-day data retention",
      "Up to 25,000 monthly page views",
    ],
    cta: "Get started",
  },
  {
    plan: "Business",
    price: {
      monthly: 24,
      yearly: 20,
    },
    includes: "Everything in Pro, plus:",
    features: [
      "Session recording",
      "A/B testing",
      "User segmentation",
      "90-day data retention",
      "Up to 95,000 monthly page views",
    ],
    cta: "Get started",
  },
];

export function Pricing() {
  const [annualBilling, setAnnualBilling] = useState(true);
  const period = useMemo(
    () => (annualBilling ? "yearly" : "monthly"),
    [annualBilling]
  );

  const [api, setApi] = useState<CarouselApi>();
  const [current, setCurrent] = useState(0);

  useEffect(() => {
    if (!api) {
      return;
    }

    setCurrent(api.selectedScrollSnap());

    api.on("select", () => {
      setCurrent(api.selectedScrollSnap());
    });
  }, [api]);

  return (
    <div className="py-28">
      <div className="max-w-screen-xl mx-auto px-4 lg:px-8">
        <div className="max-w-xl mx-auto text-center">
          <p className="text-2xl font-bold md:text-3xl">
            Flexible plans for every stage of your business growth
          </p>
          <p className="text-foreground/60 mt-6 md:text-lg">
            Get the features you need today, with the flexibility to upgrade as
            your business scales.
          </p>
        </div>

        <div className="relative mx-auto mt-12 flex max-w-fit items-center space-x-2">
          <p className="text-foreground/60 font-medium">Monthly</p>
          <Switch checked={annualBilling} onCheckedChange={setAnnualBilling} />
          <p className="text-foreground/60 font-medium">Yearly</p>
          <Badge className="rounded-full border-foreground" variant="outline">
            20% off
          </Badge>
        </div>

        {/* desktop view */}
        <div className="hidden grid-cols-3 gap-6 mt-10 lg:grid">
          {pricingItems.map((item) => (
            <PricingCard key={item.plan} item={item} period={period} />
          ))}
        </div>

        {/* mobile view */}
        <div className="mt-10 lg:hidden">
          <Carousel
            setApi={setApi}
            opts={{
              startIndex: 1,
            }}
          >
            <CarouselContent>
              {pricingItems.map((item) => (
                <CarouselItem
                  key={item.plan}
                  className="basis-[min(90vw,400px)]"
                >
                  <PricingCard item={item} period={period} />
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
          <div className="mt-4 text-center">
            <div className="flex items-center justify-center gap-2">
              {pricingItems.map((_, index) => (
                <button
                  key={index}
                  className={`w-1.5 h-1.5 rounded-full transition-all ${
                    index === current ? "bg-primary" : "bg-primary/30"
                  }`}
                  onClick={() => api?.scrollTo(index)}
                />
              ))}
            </div>
          </div>
        </div>

        <div className="flex flex-col space-y-1 text-center mt-6 w-fit mx-auto lg:mt-12">
          <p className="text-sm text-foreground/50">
            All payments are processed & secured by{" "}
            <span className="font-semibold text-foreground">
              <Link target="_blank" href="https://stripe.com/">
                Stripe
              </Link>
            </span>
          </p>
          <p className="text-sm text-foreground/50">
            Price in USD. VAT may apply.
          </p>
        </div>
      </div>
    </div>
  );
}

function PricingCard({ item, period }) {
  const { plan, includes, price, features, cta } = item;

  return (
    <div
      key={plan}
      className={cn(
        "relative h-full flex flex-col border border-slate-300 rounded-xl p-8",
        plan === "Pro" && "border-foreground border-2"
      )}
    >
      <p className="text-xl font-medium mb-3.5">{plan}</p>

      <div className="flex items-center gap-x-1">
        <h5 className="text-4xl font-semibold">${price[period]}</h5>
      </div>
      {plan === "Free" ? (
        <p className="text-sm text-foreground/60 font-medium">free forever</p>
      ) : (
        <p className="text-sm text-foreground/60 font-medium">
          per {period === "yearly" ? "month, billed yearly" : "month"}
        </p>
      )}
      <p className="text-sm font-medium mt-6">{includes}</p>
      <ul className="text-sm text-foreground/60 mt-3 mb-10 space-y-3">
        {features.map((feature) => (
          <li key={feature} className="flex items-center gap-3">
            <Check className="w-5 h-6 flex-none text-foreground" />
            {feature}
          </li>
        ))}
      </ul>

      <div className="flex grow items-end py-4">
        {plan === "Pro" ? (
          <Button className="w-full h-10">{cta}</Button>
        ) : (
          <Button className="w-full h-10" variant="outline">
            {cta}
          </Button>
        )}
      </div>
    </div>
  );
}