"use client";

import { FiCheck, FiAward } from "react-icons/fi";
import { cn } from "@/lib/utils";
import { TEXT } from "@/branding";
import type { MembershipPlan } from "@/types";
import { getBenefitLabels } from "./benefitLabels";

interface MembershipPlanCardProps {
  plan: MembershipPlan;
  isCurrent: boolean;
  isPopular: boolean;
  currencyCode: string;
  subscribing: boolean;
  onSubscribe: () => void;
}

export default function MembershipPlanCard({
  plan,
  isCurrent,
  isPopular,
  currencyCode,
  subscribing,
  onSubscribe,
}: MembershipPlanCardProps) {
  const benefitLabels = getBenefitLabels(plan);

  return (
    <div
      className={cn(
        "relative flex flex-col rounded-2xl border-2 bg-white dark:bg-dm-surface p-6 transition-all duration-300",
        isPopular
          ? "border-secondary-500 shadow-card-hover sm:-translate-y-2 z-10"
          : "border-gray-100 dark:border-dm-border shadow-card hover:border-primary-200",
      )}
    >
      {isPopular && (
        <span className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-secondary-500 text-[10px] font-black uppercase tracking-wide text-primary-900 shadow-sm whitespace-nowrap">
          {TEXT.membership.mostPopular}
        </span>
      )}

      <div
        className={cn(
          "w-11 h-11 rounded-full flex items-center justify-center mb-4",
          isPopular ? "bg-secondary-50 dark:bg-dm-surface2" : "bg-primary-50 dark:bg-dm-surface2",
        )}
      >
        <FiAward size={20} className={isPopular ? "text-secondary-600" : "text-primary-700"} />
      </div>

      <h3 className="font-display text-lg font-bold text-gray-900 dark:text-white">{plan.name}</h3>

      <div className="flex items-baseline gap-1.5 mt-4">
        <span className="text-3xl font-black text-gray-900 dark:text-white">
          {currencyCode}{plan.price}
        </span>
        <span className="text-xs text-gray-400 font-medium">
          {TEXT.membership.perPlan(plan.duration_type, plan.duration_value)}
        </span>
      </div>

      {benefitLabels.length > 0 && (
        <ul className="mt-5 space-y-2.5 flex-1">
          {benefitLabels.map((b) => (
            <li key={b} className="flex items-start gap-2 text-sm text-gray-600 dark:text-dm-muted">
              <FiCheck size={15} className="text-primary-600 mt-0.5 flex-shrink-0" />
              <span>{b}</span>
            </li>
          ))}
        </ul>
      )}

      <button
        onClick={onSubscribe}
        disabled={isCurrent || subscribing}
        className={cn(
          "w-full mt-6 py-3 rounded-xl font-bold text-sm transition-colors focus:outline-none focus:ring-2 disabled:cursor-not-allowed",
          isCurrent
            ? "bg-primary-50 text-primary-700 dark:bg-dm-surface2"
            : "bg-primary text-white hover:opacity-90 disabled:opacity-60",
        )}
      >
        {isCurrent
          ? TEXT.membership.yourPlan
          : subscribing
            ? TEXT.membership.subscribing
            : plan.is_buy === 1
              ? TEXT.membership.resubscribe
              : TEXT.membership.subscribeNow}
      </button>
    </div>
  );
}