import React from 'react';

import { IUser } from '../../types';
import { Plan, PlanType, basePlans, PLAN_ORDER } from '../../utils/plan';
import { Spinner } from '../ui/Spinner';
import { Check } from '../ui/Check';
import Button from '../widgets/Button';

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

const CrossIcon = ({
  className = '',
  ...props
}: React.SVGProps<SVGSVGElement>) => (
  <svg
    viewBox="0 0 20 20"
    fill="currentColor"
    className={`h-4 w-4 ${className}`}
    aria-hidden="true"
    {...props}
  >
    <path
      fillRule="evenodd"
      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
      clipRule="evenodd"
    />
  </svg>
);

const FEATURE_ROWS: {
  label: string;
  values: Partial<Record<PlanType, string>>;
}[] = [
  {
    label: 'AI Discoverability Audit',
    values: {
      [PlanType.FREE]: 'Included',
      [PlanType.FAST_GROWING]: 'Included',
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'Personalized Action Plan',
    values: {
      [PlanType.FREE]: 'Included',
      [PlanType.FAST_GROWING]: 'Included',
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'AI-Ready Titles',
    values: {
      [PlanType.FREE]: 'Included',
      [PlanType.FAST_GROWING]: 'Included',
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'AI-Optimized Product Descriptions',
    values: {
      [PlanType.FREE]: 'Included',
      [PlanType.FAST_GROWING]: 'Included',
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'AI Q&A Snippets',
    values: {
      [PlanType.FREE]: 'Included',
      [PlanType.FAST_GROWING]: 'Included',
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'LLM.txt',
    values: {
      [PlanType.FREE]: 'Included',
      [PlanType.FAST_GROWING]: 'Included',
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'Continuous AI Discoverability Monitoring',
    values: {
      [PlanType.FREE]: 'Included',
      [PlanType.FAST_GROWING]: 'Included',
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'Included Product Optimizations / month',
    values: {
      [PlanType.FREE]: '50',
      [PlanType.FAST_GROWING]: '100',
      [PlanType.SCALING]: '1,000',
      [PlanType.HYPER_SCALING]: '10,000',
    },
  },
  {
    label: 'Cost per Extra Product',
    values: {
      [PlanType.FREE]: '$0.50',
      [PlanType.FAST_GROWING]: '$0.40',
      [PlanType.SCALING]: '$0.30',
      [PlanType.HYPER_SCALING]: '$0.20',
    },
  },
  {
    label: 'Brand Voice Controls',
    values: {
      [PlanType.FAST_GROWING]: 'Included',
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'Bulk Titles, Descriptions and Q&A Update',
    values: {
      [PlanType.FAST_GROWING]: 'Included',
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'Conversational AI Sales Agent',
    values: {
      [PlanType.FAST_GROWING]: 'Included',
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'Smart AI Summary',
    values: {
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'Custom Brand Styling',
    values: {
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'Advanced AI Prompting',
    values: {
      [PlanType.SCALING]: 'Included',
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'Multi-language Content',
    values: {
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'AI-Ready Product Manuals',
    values: {
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
  {
    label: 'Custom Integrations',
    values: {
      [PlanType.HYPER_SCALING]: 'Included',
    },
  },
];

interface NormalPricingProps {
  user: IUser | null;
  isUserLoaded: boolean;
  hasActiveSub: boolean;
  isFreeTrialActive: boolean;
  isCanceled: boolean;
  currentPlan: Plan | null;
  checkingOutKey: PlanType | null;
  onInitializePayment: (priceId: string, planKey: PlanType) => void;
}

/**
 * Regular monthly plan grid, shown to non-AppSumo merchants. Owns the feature
 * matrix and the per-plan CTA/state derivation; the shared subscription state
 * is supplied by the Pricing page.
 *
 * @param {NormalPricingProps} props
 * @return {JSX.Element}
 */
export const NormalPricing = ({
  user,
  isUserLoaded,
  hasActiveSub,
  isFreeTrialActive,
  isCanceled,
  currentPlan,
  checkingOutKey,
  onInitializePayment,
}: NormalPricingProps): JSX.Element => {
  const plans = basePlans;
  const stripeStatusRaw = (user?.stripe_subscription_status || '')
    .toString()
    .toLowerCase();

  const getCtaLabel = (plan: Plan): string => {
    if (plan?.enterprise) return 'Contact Sales';

    if (plan.key === PlanType.FREE) return 'Included';

    if (isCanceled && user?.plan_snapshot === plan.key) {
      return 'Re-activate Plan';
    }

    if (isFreeTrialActive) {
      if (plan.key === PlanType.HYPER_SCALING) return 'Current Plan';
      if (plan.key === PlanType.FAST_GROWING || plan.key === PlanType.SCALING)
        return 'Downgrade Plan';
      return 'Choose Plan';
    }

    if (hasActiveSub && currentPlan) {
      const diff = PLAN_ORDER[plan.key] - PLAN_ORDER[currentPlan.key];
      if (plan.key === currentPlan.key) return 'Current Plan';
      if (diff > 0) return 'Upgrade Plan';
      if (diff < 0) return 'Downgrade Plan';
      return 'Choose Plan';
    }

    return 'Choose Plan';
  };

  const isCtaDisabled = (plan: Plan): boolean => {
    if (!isUserLoaded) return true;
    if (plan.key === PlanType.FREE) return true;
    if (isFreeTrialActive && plan.key === PlanType.HYPER_SCALING) return true;
    if (hasActiveSub && currentPlan && plan.key === currentPlan.key)
      return true;
    return false;
  };

  const isCurrentByTrial = (plan: Plan) => {
    return isFreeTrialActive && plan.key === PlanType.HYPER_SCALING;
  };

  const isCurrentPaid = (plan: Plan) => {
    return hasActiveSub && !!currentPlan && plan.key === currentPlan.key;
  };

  return (
    <div
      id="plans-grid"
      className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4"
    >
      {plans
        .filter(plan => !plan.enterprise)
        .map(plan => {
          const isPopular = !!plan.popular;
          const isHyperScaling = plan.key === PlanType.HYPER_SCALING;
          const isFreePlan = plan.key === PlanType.FREE;
          const isInactiveHighlighted =
            ['canceled', 'cancelled', 'expired', 'incomplete_expired'].includes(
              stripeStatusRaw
            ) && user?.plan_snapshot === plan.key;

          const currentByTrial = isCurrentByTrial(plan);
          const currentPaid = isCurrentPaid(plan);
          const showCurrentTag = currentByTrial || currentPaid;

          const ctaLabel = getCtaLabel(plan);
          const isDisabled =
            isFreePlan ||
            (isCtaDisabled(plan) &&
              user?.stripe_subscription_status !== 'canceled') ||
            checkingOutKey === plan.key;
          const isLoadingThisPlan = checkingOutKey === plan.key;

          let buttonClass =
            'mb-6 w-full justify-center rounded-md border px-4 py-2 text-sm font-medium transition-colors ';

          if (isLoadingThisPlan) {
            buttonClass +=
              'border-gray-200 bg-gray-100 text-gray-500 cursor-wait opacity-100';
          } else if (isFreePlan) {
            buttonClass +=
              'border-gray-200 bg-gray-100 text-gray-500 cursor-not-allowed opacity-100';
          } else if (showCurrentTag && ctaLabel !== 'Re-activate Plan') {
            buttonClass +=
              'border-emerald-200 bg-emerald-50 text-emerald-700 cursor-not-allowed opacity-100';
          } else if (isDisabled) {
            buttonClass +=
              'border-gray-200! bg-gray-100! text-gray-500! cursor-not-allowed opacity-100';
          } else if (
            isHyperScaling &&
            !showCurrentTag &&
            !isInactiveHighlighted
          ) {
            buttonClass +=
              'border-transparent bg-gray-900 text-white hover:bg-gray-800';
          } else {
            buttonClass +=
              'border-gray-200 bg-white text-gray-900 hover:bg-gray-50';
          }

          return (
            <div
              key={plan.key}
              className={`relative flex flex-col rounded-xl bg-white p-6 shadow-sm ring-1 ring-inset transition-shadow ${
                isHyperScaling && !isInactiveHighlighted && !showCurrentTag
                  ? 'ring-gray-900 hover:shadow-md'
                  : isPopular && !isInactiveHighlighted
                    ? 'ring-gray-300 hover:shadow-md'
                    : 'ring-gray-200 hover:shadow-md'
              } ${
                isInactiveHighlighted
                  ? 'bg-gray-50 ring-gray-300'
                  : showCurrentTag
                    ? ctaLabel === 'Re-activate Plan'
                      ? 'ring-gray-300'
                      : 'ring-gray-900 bg-gray-50/50'
                    : ''
              }`}
            >
              <div className="absolute -top-3 left-1/2 flex -translate-x-1/2 gap-2">
                {currentByTrial && (
                  <span className="whitespace-nowrap rounded-full bg-emerald-100 px-3 py-1 text-[10px] font-bold text-emerald-800 ring-1 ring-inset ring-emerald-600/20">
                    FREE TRIAL
                  </span>
                )}
                {!currentByTrial &&
                  isPopular &&
                  !currentPaid &&
                  !isInactiveHighlighted && (
                    <span className="whitespace-nowrap rounded-full bg-gray-900 px-3 py-1 text-[10px] font-bold text-white">
                      MOST POPULAR
                    </span>
                  )}
                {!currentByTrial && currentPaid && (
                  <span
                    className={`whitespace-nowrap rounded-full px-3 py-1 text-[10px] font-bold ring-1 ring-inset ${
                      ctaLabel === 'Re-activate Plan'
                        ? 'bg-gray-100 text-gray-600 ring-gray-500/20'
                        : 'bg-emerald-100 text-emerald-800 ring-emerald-600/20'
                    }`}
                  >
                    {`CURRENT PLAN`}
                  </span>
                )}
                {isInactiveHighlighted && (
                  <span className="whitespace-nowrap rounded-full bg-gray-200 px-3 py-1 text-[10px] font-bold text-gray-700 ring-1 ring-inset ring-gray-500/20">
                    {stripeStatusRaw.toUpperCase()}
                  </span>
                )}
              </div>

              <div className="mb-6 space-y-2">
                <h3 className="text-base font-medium text-gray-900">
                  {plan.name}
                </h3>
                <p className="min-h-[40px] text-sm text-gray-500">
                  {plan.blurb}
                </p>
              </div>

              <div className="mb-6 flex items-baseline gap-1">
                <span className="text-3xl font-medium text-gray-900">
                  {isFreePlan ? 'Free' : formatUSD(plan.monthly)}
                </span>
                {!isFreePlan && (
                  <span className="text-sm font-medium text-gray-500">/mo</span>
                )}
              </div>

              <Button
                onClick={() => onInitializePayment(plan.priceId, plan.key)}
                disabled={isDisabled}
                className={buttonClass}
              >
                {isLoadingThisPlan ? (
                  <>
                    <Spinner className="mr-2 h-4 w-4" /> Processing…
                  </>
                ) : (
                  ctaLabel
                )}
              </Button>

              <hr className="mb-6 border-gray-100" />

              <ul className="flex-1 space-y-4">
                {FEATURE_ROWS.map(row => {
                  const value = row.values[plan.key];
                  const isIncluded = value !== undefined;
                  const description =
                    value && value !== 'Included' ? (
                      <span>
                        {row.label}:{' '}
                        <strong className="font-medium text-gray-900">
                          {value}
                        </strong>
                      </span>
                    ) : (
                      row.label
                    );

                  return (
                    <li key={row.label} className="flex items-start gap-3">
                      {isIncluded ? (
                        <Check className="mt-0.5 h-4 w-4 shrink-0 text-gray-900" />
                      ) : (
                        <CrossIcon className="mt-0.5 h-4 w-4 shrink-0 text-gray-300" />
                      )}
                      <span
                        className={`text-sm ${isIncluded ? 'text-gray-600' : 'text-gray-400'}`}
                      >
                        {description}
                      </span>
                    </li>
                  );
                })}
              </ul>
            </div>
          );
        })}
    </div>
  );
};

export default NormalPricing;