import React from 'react';

import {
  getDiscountMultiplier,
  getDisplayPrice,
} from '@/app/(root)/account/AuraSubscriptions/CurrencySelector';
import { ModalButton } from '@/app/(root)/account/AuraSubscriptions/modals/shared/ModalButton';
import {
  PriceRow,
  PricingSection,
  TaxDisplay,
} from '@/app/(root)/account/AuraSubscriptions/modals/shared/PriceDisplay';
import { Currency, DEFAULT_CURRENCY } from '@/app/(root)/account/constants';
import { ButtonVariant } from '@/components/button/Button';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { useBillingTaxInfo } from '@/hooks/useBillingTax';
import logWebUserEvent from '@/logging/logWebUserEvent';
import {
  DiscountOfferWithRedemption,
  SubscriptionInfo,
} from '@/state/sessionStore';
import { calculateTaxAmount, isTaxApplicable } from '@/utils/tax';

interface Props {
  discountOffer: DiscountOfferWithRedemption;
  currentSubscription: SubscriptionInfo;
  isConfirmLoading: boolean;
  onBack: () => void;
  onConfirm: () => void;
}

// Helper function to validate and get currency with fallback
const getValidCurrency = (currency: string | undefined | null): Currency => {
  if (!currency) return DEFAULT_CURRENCY;
  const upperCaseCurrency = currency.toUpperCase();
  return Object.values(Currency).includes(upperCaseCurrency as Currency)
    ? (upperCaseCurrency as Currency)
    : DEFAULT_CURRENCY;
};

const ConfirmUpdateStep: React.FC<Props> = ({
  discountOffer,
  currentSubscription,
  isConfirmLoading,
  onBack,
  onConfirm,
}) => {
  const { data: taxInfo } = useBillingTaxInfo();
  const hasTax = isTaxApplicable(taxInfo);
  const currentPrice = currentSubscription?.plan_currency_price ?? 30;
  const validCurrency = getValidCurrency(currentSubscription?.plan_currency);
  const currentPriceDisplay = getDisplayPrice(
    currentPrice,
    validCurrency,
    false
  );
  const planName = currentSubscription?.plan?.name?.split(' ')[0] ?? 'Plan';
  const planPeriod =
    currentSubscription?.period === 'month' ? 'Monthly' : 'Yearly';

  // Calculate discount amount
  const discountAmount =
    discountOffer.amount_off ??
    (discountOffer.percent_off
      ? currentPrice * getDiscountMultiplier(discountOffer.percent_off)
      : 0);

  const discountAmountDisplay = getDisplayPrice(
    discountAmount,
    validCurrency,
    false
  );

  // Calculate subtotal (original price minus discount)
  const subtotal = Math.max(0, currentPrice - discountAmount);

  // Calculate tax amount
  const taxAmount = calculateTaxAmount(taxInfo, subtotal);

  // For the first billing cycle, they get the discount, so total due is the subtotal plus tax
  const totalDue = subtotal + taxAmount;

  // Generate discount description using duration_months
  const durationText =
    discountOffer.duration_months === 1
      ? '1 month'
      : `${discountOffer.duration_months} months`;

  const discountDescription = discountOffer.percent_off
    ? `${discountOffer.percent_off}% off for ${durationText}`
    : discountOffer.amount_off
      ? `${discountAmountDisplay} off for ${durationText}`
      : `Discount for ${durationText}`;

  return (
    <div>
      <PricingSection className='mb-8'>
        <PriceRow
          label={`Suno ${planName} ${planPeriod}`}
          amount={currentPrice}
          currency={validCurrency}
          isBold
        />

        <div className='mb-2 flex justify-between'>
          <div className='text-left'>
            <p className='font-bold'>Discount</p>
            <p className='text-sm text-foreground-primary'>
              {discountDescription}; {currentPriceDisplay}/mo after
            </p>
          </div>
          <p className='text-accent-success-on-primary'>
            -{discountAmountDisplay}
          </p>
        </div>

        <PriceRow
          label='Subtotal'
          amount={subtotal}
          currency={validCurrency}
          isBold
        />

        {hasTax && (
          <TaxDisplay taxAmount={taxAmount} currency={validCurrency} />
        )}

        <PriceRow
          label='Total due next billing cycle'
          amount={totalDue}
          currency={validCurrency}
          isBold
        />
      </PricingSection>
      <div className='flex justify-center gap-3'>
        <ModalButton variant={ButtonVariant.Secondary} onClick={onBack}>
          Back
        </ModalButton>
        <ModalButton
          variant={ButtonVariant.Primary}
          onClick={() => {
            logWebUserEvent({
              actionName: 'SubCancelFlowConfirmAcceptOfferButtonClicked',
              context: {
                currentPeriod: currentSubscription?.period || '',
                currentUsagePlanId: currentSubscription?.plan?.id || '',
                stripeCouponId: discountOffer?.stripe_coupon_id || '',
              },
            });
            onConfirm();
          }}
          disabled={isConfirmLoading}
          icon={isConfirmLoading ? <SpinnerSVG className='fill-black' /> : null}
        >
          {isConfirmLoading ? 'Confirming...' : 'Confirm'}
        </ModalButton>
      </div>
    </div>
  );
};

export default ConfirmUpdateStep;