import React from 'react';

import { Spinner } from '../ui/Spinner';

import { LaunchPlan } from './plans';

const formatUSD = (amount: number) =>
  new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    maximumFractionDigits: amount % 1 === 0 ? 0 : 2,
  }).format(amount);

interface PlanCardProps {
  plan: LaunchPlan;
  /** True while a checkout session is being created for this specific card. */
  isLocking: boolean;
  /** True while any card (including this one) is locking - disables the rest. */
  disabled: boolean;
  onLock: (plan: LaunchPlan) => void;
}

export const LaunchDiscountPlanCard: React.FC<PlanCardProps> = ({
  plan,
  isLocking,
  disabled,
  onLock,
}) => {
  const accentTone = plan.popular
    ? 'bg-white ring-gray-900/20'
    : 'bg-white ring-gray-200';

  return (
    <div className="p-0">
      <div
        className={[
          'relative h-full rounded-xl transition-shadow shadow-sm hover:shadow-md ring-1',
          accentTone,
        ].join(' ')}
      >
        {plan.popular && (
          <div className="absolute -top-3 left-1/2 -translate-x-1/2 z-[1]">
            <div className="inline-flex items-center rounded-full bg-gray-900 text-white text-xs font-semibold px-3 py-1 whitespace-nowrap">
              MOST POPULAR
            </div>
          </div>
        )}

        <div className="p-6 lg:p-7 space-y-4">
          <p
            className={[
              'text-xs font-semibold uppercase tracking-wider',
              plan.popular ? 'text-[#B7007C]' : 'text-gray-500',
            ].join(' ')}
          >
            {plan.name}
          </p>

          <p className="text-sm leading-relaxed text-gray-600">{plan.blurb}</p>

          <div className="space-y-1">
            <div className="flex items-baseline gap-2">
              <span className="text-4xl font-bold tracking-tight text-gray-900">
                {formatUSD(plan.discountMonthly)}
              </span>
              <span className="text-sm text-gray-500">first month</span>
            </div>
            <div className="flex items-baseline gap-2 text-sm text-gray-500">
              <span className="line-through">{formatUSD(plan.monthly)}</span>
              <span>then {formatUSD(plan.monthly)}/mo</span>
            </div>
          </div>

          <ul className="space-y-2">
            {plan.features.slice(0, 6).map(feature => (
              <li
                key={feature}
                className="flex items-start gap-2 text-sm text-gray-600"
              >
                <span className="mt-0.5 text-emerald-600">✓</span>
                <span>{feature}</span>
              </li>
            ))}
          </ul>

          <div className="mt-3">
            <button
              type="button"
              className="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed"
              onClick={() => onLock(plan)}
              disabled={disabled}
            >
              {isLocking ? (
                <>
                  <Spinner className="h-4 w-4" />
                  Opening checkout…
                </>
              ) : (
                'Start trial'
              )}
            </button>
            <p className="pt-2 text-xs text-gray-500 text-center">
              7 days free, then 50% off your first month.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};