import { TIERS } from "@/config";
import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import NumberFlow from "@number-flow/react";
import { BadgeCheck, Flame } from "lucide-react";
import { Currency } from "@/hooks/useCurrency";
import { EnterpriseContactDialog } from "./EnterpriseContactDialog";

interface CurrencyInfo {
  currency: Currency;
  symbol: string;
  convertPrice: (inrPrice: number) => number;
}

export const PricingCard = ({
  tier,
  paymentFrequency,
  currencyInfo,
}: {
  tier: (typeof TIERS)[0];
  paymentFrequency: string;
  currencyInfo: CurrencyInfo;
}) => {
  const isHighlighted = tier.highlighted;
  const isPopular = tier.popular;
  const isOneTime = tier.isOneTime;

  // Handle different price structures
  const getPrice = () => {
    if (isOneTime) {
      // One-time payment - convert from INR base price
      const basePrice = tier.price as number;
      return currencyInfo.convertPrice(basePrice);
    } else if (typeof tier.price === 'object') {
      // Subscription pricing
      const basePrice = tier.price[paymentFrequency];
      if (typeof basePrice === 'number') {
        return currencyInfo.convertPrice(basePrice);
      }
      return basePrice; // Return as-is for "Free" or "Custom"
    }
    return tier.price;
  };

  const price = getPrice();

  return (
    <div
      className={cn(
        "relative flex flex-col gap-8 overflow-hidden rounded-2xl border p-6 shadow",
        isHighlighted
          ? "bg-foreground text-background"
          : "bg-background text-foreground",
        isPopular && "outline outline-[rgba(120,119,198)]",
      )}
    >
      {/* Background Decoration */}
      {isHighlighted && <HighlightedBackground />}
      {isPopular && <PopularBackground />}

      {/* Card Header */}
      <h2 className="flex items-center gap-3 text-xl font-medium capitalize">
        {tier.name}
        {isPopular && (
          <Badge className="mt-1 bg-indigo-600 px-1.5 py-1 text-white rounded-4xl hover:bg-orange-900">
            <Flame width={4} height={4} /> Most Popular
          </Badge>
        )}
      </h2>

      {/* Price Section */}
      <div className="relative min-h-[80px]">
        {typeof price === "number" ? (
          <>
            <NumberFlow
              format={{
                style: "currency",
                currency: currencyInfo.currency,
                trailingZeroDisplay: "stripIfInteger",
              }}
              value={price}
              className="text-4xl font-medium"
            />
            {isOneTime ? (
              <p className="-mt-2 text-xs font-medium text-green-600 dark:text-green-400">
                One-time payment
              </p>
            ) : (
              <p className="-mt-2 text-xs font-medium">
                Per {paymentFrequency.slice(0, -2)}
              </p>
            )}
          </>
        ) : (
          <h1 className="text-4xl font-medium">{price}</h1>
        )}
      </div>

      {/* Features */}
      <div className="flex-1 space-y-2">
        <h3 className="text-sm font-medium">{tier.description}</h3>
        <ul className="space-y-2">
          {tier.features.map((feature, index) => (
            <li
              key={index}
              className={cn(
                "flex items-center gap-2 text-sm font-medium",
                isHighlighted ? "text-background" : "text-foreground/60",
              )}
            >
              <BadgeCheck strokeWidth={1} size={16} />
              {feature}
            </li>
          ))}
        </ul>
      </div>

      {/* Call to Action Button */}
      {tier.id === "enterprise" ? (
        <EnterpriseContactDialog />
      ) : (
        <Button
          className={cn(
            "h-fit w-full rounded-lg",
            isHighlighted && "bg-accent text-foreground hover:bg-accent/95",
          )}
          onClick={() => {
            window.open("https://prejee.co/register", "_blank");
          }}
        >
          {tier.cta}
        </Button>
      )}
    </div>
  );
};

// Highlighted Background Component
const HighlightedBackground = () => (
  <div className="absolute inset-0 pointer-events-none bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:45px_45px] opacity-100 [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)] dark:opacity-30" />
);

// Popular Background Component
const PopularBackground = () => (
  <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.1),rgba(255,255,255,0))] dark:bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
);