import React from 'react';

import {
  getDiscountMultiplier,
  getDisplayPrice,
  getPriceForPlanAndCurrency,
} from '@/app/(root)/account/AuraSubscriptions/CurrencySelector';
import { Currency, DEFAULT_CURRENCY } from '@/app/(root)/account/constants';
import { ButtonVariant } from '@/components/button/Button';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import {
  DiscountOfferWithRedemption,
  SubscriptionInfo,
} from '@/state/sessionStore';
import { SubscriptionPeriod } from '@/utils/session';

import { ModalButton } from '../../shared/ModalButton';

interface Props {
  currentSubscription: SubscriptionInfo;
  isCancelLoading: boolean;
  discountOffer: DiscountOfferWithRedemption | null;
  onBack: () => void;
  onConfirmCancel: () => void;
  handleAcceptOffer: () => void;
}

const PanicOfferStep: React.FC<Props> = ({
  currentSubscription,
  isCancelLoading,
  discountOffer,
  onBack,
  onConfirmCancel,
  handleAcceptOffer,
}) => {
  // Safely get currency with validation and fallback
  const getCurrency = (): Currency => {
    if (!currentSubscription.plan_currency) {
      return DEFAULT_CURRENCY;
    }

    const planCurrency = currentSubscription.plan_currency.toUpperCase();
    // Check if the plan currency is a valid Currency enum value
    if (Object.values(Currency).includes(planCurrency as Currency)) {
      return planCurrency as Currency;
    }

    return DEFAULT_CURRENCY;
  };

  const currency = getCurrency();

  const percentOff = discountOffer?.percent_off;
  const amountOff = discountOffer?.amount_off;

  // Get the current price in the selected currency
  const currentPrice = currentSubscription?.plan
    ? getPriceForPlanAndCurrency(
        currentSubscription.plan,
        currency,
        SubscriptionPeriod.Monthly
      )
    : 0;

  // Calculate the discount amount display
  const discountAmount = amountOff
    ? getDisplayPrice(amountOff, currency)
    : `${percentOff}%`;

  // Calculate the discounted price
  const discountedPrice =
    currentPrice -
    (amountOff ?? currentPrice * getDiscountMultiplier(percentOff ?? 0));
  const currentPriceDisplay = getDisplayPrice(currentPrice, currency);
  const nextMonthPriceDisplay = getDisplayPrice(discountedPrice, currency);

  const planName = currentSubscription?.plan?.name.split(' ')[0] ?? '';

  return (
    <div>
      <p className='-mt-4 mb-4 text-white/80'>
        We have a special offer for you!
      </p>
      <div className='mb-12 rounded-3xl bg-white/10 p-4'>
        <div className='mx-auto mb-4 max-w-xs text-center leading-relaxed'>
          Keep Suno {planName} and all its benefits at a {discountAmount}{' '}
          discount for your next month!
        </div>

        <div className='mb-4 flex items-center justify-center gap-6'>
          <div className='flex items-baseline gap-1 text-foreground-tertiary'>
            <span className='text-2xl leading-none font-medium line-through'>
              {currentPriceDisplay}
            </span>
            <span className='text-sm leading-none'>total</span>
          </div>
          <div className='flex items-baseline gap-1 text-accent-pink-on-primary'>
            <span className='text-2xl leading-none font-medium'>
              {nextMonthPriceDisplay}
            </span>
            <span className='text-sm leading-none'>total</span>
          </div>
        </div>

        <ModalButton
          variant={ButtonVariant.Primary}
          className='w-full'
          onClick={handleAcceptOffer}
        >
          Accept Offer
        </ModalButton>
      </div>

      <div className='-mt-4 flex justify-center gap-3'>
        <ModalButton variant={ButtonVariant.Secondary} onClick={onBack}>
          Back
        </ModalButton>
        <ModalButton
          variant={ButtonVariant.Secondary}
          onClick={onConfirmCancel}
          disabled={isCancelLoading}
          icon={isCancelLoading ? <SpinnerSVG className='fill-black' /> : null}
        >
          {isCancelLoading ? 'Confirming...' : 'Confirm Cancellation'}
        </ModalButton>
      </div>
    </div>
  );
};

export default PanicOfferStep;