"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { Check, Info, X } from "lucide-react";

import { cn } from "@/lib/utils";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

const pricingCardVariants = cva(
  "relative flex flex-col transition-all duration-300 hover:-translate-y-1",
  {
    variants: {
      variant: {
        default: "border-border",
        featured: "border-primary shadow-md scale-105 z-10 ring-2 ring-primary/30 hover:ring-primary/50",
        compact: "border-border",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

export interface PricingFeature {
  text: string;
  included: boolean;
  tooltip?: string;
}

export type BillingCycle = "monthly" | "annual";

export interface PricingCardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pricingCardVariants> {
  plan: string;
  price: string | number;
  period?: string;
  features: PricingFeature[];
  cta?: string;
  onCtaClick?: () => void;
  popular?: boolean;
  savings?: string;
  /** Alternative to `price` — supply both to render a Monthly/Annual toggle. Overrides `price`/`savings` when set. */
  monthlyPrice?: number;
  annualPrice?: number;
  /** Label shown next to the price once "Annual" is selected, e.g. "2 months free". */
  annualSavingsLabel?: string;
  /** Show the built-in toggle. Set false when a parent renders one shared toggle for several cards. */
  showBillingToggle?: boolean;
  billingCycle?: BillingCycle;
  onBillingCycleChange?: (cycle: BillingCycle) => void;
  /** Disables the CTA and labels it "Current Plan" — the account-page state most pricing demos skip. */
  isCurrentPlan?: boolean;
}

/**
 * PricingCard — a single pricing tier.
 *
 * Pass `price` for a fixed amount, or `monthlyPrice` + `annualPrice` to get a
 * built-in Monthly/Annual toggle. When several cards share one toggle, lift the
 * state: set `showBillingToggle={false}` on each and drive `billingCycle` yourself.
 *
 * @example
 * <PricingCard
 *   plan="Pro"
 *   variant="featured"
 *   popular
 *   monthlyPrice={29}
 *   annualPrice={290}
 *   annualSavingsLabel="2 months free"
 *   features={[{ text: "Unlimited projects", included: true }]}
 *   onCtaClick={() => checkout("pro")}
 * />
 */
export function PricingCard({
  className,
  variant,
  plan,
  price,
  period = "/month",
  features,
  cta = "Get Started",
  onCtaClick,
  popular,
  savings,
  monthlyPrice,
  annualPrice,
  annualSavingsLabel,
  showBillingToggle = true,
  billingCycle,
  onBillingCycleChange,
  isCurrentPlan = false,
  ...props
}: PricingCardProps) {
  const isCompact = variant === "compact";
  const isFeatured = variant === "featured";
  const hasToggle = monthlyPrice !== undefined && annualPrice !== undefined;

  const [uncontrolledCycle, setUncontrolledCycle] = React.useState<BillingCycle>("monthly");
  const cycle = billingCycle ?? uncontrolledCycle;
  const setCycle = (next: BillingCycle) => {
    if (billingCycle === undefined) setUncontrolledCycle(next);
    onBillingCycleChange?.(next);
  };

  const displayPrice = hasToggle ? cycle === "monthly" ? monthlyPrice! : annualPrice! : price;
  const displayPeriod = hasToggle ? (cycle === "monthly" ? "/month" : "/year") : period;
  const displaySavings = hasToggle ? (cycle === "annual" ? annualSavingsLabel : undefined) : savings;

  return (
    <Card className={cn(pricingCardVariants({ variant }), className)} {...props}>
      {popular && (
        <Badge
          className="absolute -top-3 right-0 left-0 mx-auto w-fit"
          variant={isFeatured ? "default" : "secondary"}
        >
          Most Popular
        </Badge>
      )}
      <CardHeader className={cn("text-center", isCompact ? "p-4 pb-2" : "p-6")}>
        <CardTitle className={cn("text-lg", isFeatured ? "text-primary" : "text-foreground")}>
          {plan}
        </CardTitle>

        {hasToggle && showBillingToggle && (
          <div className="mx-auto mt-3 inline-flex items-center rounded-full bg-muted p-0.5 text-xs font-medium">
            {(["monthly", "annual"] as const).map((option) => (
              <button
                key={option}
                type="button"
                onClick={() => setCycle(option)}
                className={cn(
                  "rounded-full px-3 py-1 capitalize transition-colors",
                  cycle === option ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
                )}
              >
                {option}
              </button>
            ))}
          </div>
        )}

        <div className="mt-4 flex items-baseline justify-center gap-1">
          <span className="text-4xl font-bold tracking-tight">
            {typeof displayPrice === "number" ? `$${displayPrice}` : displayPrice}
          </span>
          {displayPrice !== "Custom" && displayPrice !== "Free" && (
            <span className="text-sm font-semibold text-muted-foreground">{displayPeriod}</span>
          )}
          {displaySavings && (
            <span className="ml-2 rounded-full bg-emerald-500/10 px-2 py-0.5 text-xs font-medium text-emerald-600">
              {displaySavings}
            </span>
          )}
        </div>
      </CardHeader>
      <CardContent className={cn("flex-1", isCompact ? "p-4 pt-0" : "p-6 pt-0")}>
        <ul className="space-y-3">
          {features.map((feature, index) => (
            <li key={index} className="flex items-start gap-3">
              {feature.included ? (
                <Check className="h-5 w-5 shrink-0 text-primary" />
              ) : (
                <X className="h-5 w-5 shrink-0 text-muted-foreground/50" />
              )}
              <div className="flex items-center gap-1.5 group/tooltip relative">
                <span
                  className={cn(
                    "text-sm",
                    feature.included ? "text-foreground" : "text-muted-foreground/70"
                  )}
                >
                  {feature.text}
                </span>
                {feature.tooltip && (
                  <>
                    <Info className="h-4 w-4 text-muted-foreground/50 hover:text-muted-foreground transition-colors cursor-help" />
                    <span className="pointer-events-none absolute left-1/2 -top-8 -translate-x-1/2 whitespace-nowrap rounded bg-foreground px-2 py-1 text-xs text-background opacity-0 transition-opacity group-hover/tooltip:opacity-100 z-20">
                      {feature.tooltip}
                    </span>
                  </>
                )}
              </div>
            </li>
          ))}
        </ul>
      </CardContent>
      <CardFooter className={cn(isCompact ? "p-4 pt-0" : "p-6 pt-0")}>
        <Button
          className={cn("w-full gap-2 transition-all", isFeatured && !isCurrentPlan && "hover:shadow-lg hover:shadow-primary/25")}
          variant={isCurrentPlan ? "secondary" : isFeatured ? "default" : "outline"}
          size={isCompact ? "sm" : "default"}
          onClick={onCtaClick}
          disabled={isCurrentPlan}
        >
          {isCurrentPlan && <Check className="h-4 w-4" />}
          {isCurrentPlan ? "Current Plan" : cta}
        </Button>
      </CardFooter>
    </Card>
  );
}
Pricing Card

Pro Plan

Pro Plan
