"use client";

import classNames from "classnames";
import type {
  PricingTier,
  CurrencyInfo,
  BillingPeriod,
} from "@/lib/types/pricing";
import { CurrencyManager } from "@/lib/utils/currency";

interface PricingCardProps {
  tier: PricingTier;
  isAr: boolean;
  currencyInfo: CurrencyInfo;
  billingPeriod: BillingPeriod;
  calculatePrice: (price: number) => number;
  onGetStarted: (tierId: string) => void;
  isChangePlanMode?: boolean;
}

export default function PricingCard({
  tier,
  isAr,
  currencyInfo,
  billingPeriod,
  calculatePrice,
  onGetStarted,
  isChangePlanMode = false,
}: PricingCardProps) {
  const discountedPrice = calculatePrice(tier.priceGBP);
  const convertedPrice = CurrencyManager.convert(
    discountedPrice,
    currencyInfo.code,
  );
  const convertedSetup = CurrencyManager.convert(
    tier.setupGBP,
    currencyInfo.code,
  );

  return (
    <div
      data-testid="pricing-card"
      data-tier={tier.id}
      className={classNames(
        "relative rounded-2xl border-2 bg-white dark:bg-slate-900 p-6 shadow-lg transition-all hover:shadow-2xl hover:-translate-y-1",
        tier.popular
          ? "border-brand-green ring-4 ring-brand-green/20 dark:ring-brand-green/40"
          : "border-slate-200 dark:border-slate-700",
      )}
    >
      {tier.popular && (
        <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-brand-green text-white text-sm font-bold rounded-full shadow-lg">
          {isAr ? "الأكثر شعبية" : "Most Popular"}
        </div>
      )}

      <div className="text-center mb-6">
        <h3 className="text-2xl font-bold text-brand-ink dark:text-white">
          {isAr ? tier.nameAr : tier.nameEn}
        </h3>
        <div className="mt-4">
          {billingPeriod === "yearly" && (
            <div
              className="text-sm text-neutral-500 dark:text-neutral-400 line-through mb-1"
              suppressHydrationWarning
            >
              {currencyInfo.symbol}
              {CurrencyManager.convert(
                tier.priceGBP,
                currencyInfo.code,
              ).toLocaleString()}
            </div>
          )}
          <div className="flex items-baseline justify-center gap-1">
            <span
              className="text-4xl font-extrabold text-brand-green"
              suppressHydrationWarning
            >
              {currencyInfo.symbol}
              {convertedPrice.toLocaleString()}
            </span>
            <span className="text-neutral-600 dark:text-neutral-400">
              /{isAr ? "شهر" : "mo"}
            </span>
          </div>
          {billingPeriod === "yearly" && (
            <p className="mt-1 text-xs text-emerald-600 dark:text-emerald-400 font-semibold">
              {isAr ? "عند الدفع سنوياً" : "Billed annually"}
            </p>
          )}
          <p
            className="mt-2 text-sm text-neutral-500 dark:text-neutral-400"
            suppressHydrationWarning
          >
            {isAr ? "إعداد" : "Setup"}: {currencyInfo.symbol}
            {convertedSetup.toLocaleString()}
          </p>
        </div>
      </div>

      <ul className="space-y-3 mb-8">
        {(isAr ? tier.featuresAr : tier.featuresEn)
          .slice(0, 6)
          .map((feature, idx) => (
            <li key={idx} className="flex items-start gap-2 text-sm">
              <span className="text-brand-green text-lg flex-shrink-0">✓</span>
              <span className="text-neutral-700 dark:text-neutral-300">
                {feature}
              </span>
            </li>
          ))}
      </ul>

      <button
        onClick={() => onGetStarted(tier.id)}
        className={classNames(
          "block w-full text-center py-3 rounded-lg font-semibold transition-all",
          tier.popular
            ? "bg-brand-green text-white hover:bg-brand-greenHover shadow-md"
            : "bg-slate-100 text-brand-ink hover:bg-slate-200 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700",
        )}
        data-tier-id={tier.id}
        data-stripe-product-id={tier.stripeProductId}
      >
        {isChangePlanMode
          ? isAr
            ? "اختر هذه الباقة"
            : "Select This Plan"
          : isAr
            ? "ابدأ الآن"
            : "Get Started"}
      </button>
    </div>
  );
}