import { useMutation, useQueryClient } from '@tanstack/react-query';
import { format, parseISO } from 'date-fns';
import { useState } from 'react';

import { ModalButton } from '@/app/(root)/account/AuraSubscriptions/modals/shared/ModalButton';
import { SUBSCRIPTION_PAGE_VERSIONS } from '@/app/(root)/account/constants';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import AuraModal from '@/components/modal/AuraModal';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { toast } from '@/components/toast/Toast';
import { useModalContext } from '@/context/ModalContext';
import useSubscriptionInfo from '@/hooks/useSubscriptionInfo';
import { CheckIcon, ErrorIcon, SparklesIcon } from '@/icons';
import { useApiClient } from '@/lib/apiClient';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { SubscriptionCancel } from '@/state/sessionStore';
import { ModalStep } from '@/utils/subscriptionModalUtils';

import { ModalTypes } from './constants/ModalTypes';

const CancelChangesModal = () => {
  const { closeModal } = useModalContext();

  const [step, setStep] = useState<ModalStep>(ModalStep.Confirm);
  const [isLoading, setIsLoading] = useState(false);
  const [renewStatus, setRenewStatus] = useState<'success' | 'error' | null>(
    null
  );

  const apiClient = useApiClient();
  const queryClient = useQueryClient();

  const query = useSubscriptionInfo();
  const { data: sub } = query;

  const renewSubscription = async (): Promise<{ ok: boolean }> => {
    const { data } = (await apiClient.POST(
      '/api/billing/cancel-sub/undo/',
      {}
    )) as { data?: SubscriptionCancel };
    return data || { ok: false };
  };

  const renewMutation = useMutation({
    mutationFn: renewSubscription,
    onMutate: () => setIsLoading(true),
    onSuccess: () => {
      setTimeout(() => {
        queryClient.invalidateQueries({ queryKey: ['subscriptionInfo'] });
        setIsLoading(false);
        setRenewStatus('success');
        setStep(ModalStep.Completing);
        toast({
          title: 'Subscription changes canceled',
          status: 'info',
          duration: 3000,
          isClosable: true,
        });
      }, 2000);
    },
    onError: () => {
      setIsLoading(false);
      setRenewStatus('error');
      setStep(ModalStep.Completing);
      toast({
        title: 'An error occurred',
        status: 'error',
        duration: 3000,
        isClosable: true,
      });
    },
  });

  const onClose = () => {
    setStep(ModalStep.Confirm);
    setRenewStatus(null);
    setIsLoading(false);
    closeModal(ModalTypes.CANCEL_SUBSCRIPTION_CHANGES);
  };

  const handleConfirmCancelChanges = () => {
    logWebUserEvent({
      actionName: 'ConfirmRenewPlanButtonClicked',
      context: {
        usagePlanId: sub?.plan?.id || '',
        period: sub?.period || '',
        subPageVersion: SUBSCRIPTION_PAGE_VERSIONS.aura,
      },
    });
    renewMutation.mutate();
  };

  const getModalIcon = () => {
    if (step === ModalStep.Completing) {
      return renewStatus === 'success' ? (
        <CheckIcon className='h-[24px] w-[24px]' />
      ) : (
        <ErrorIcon className='h-[24px] w-[24px]' />
      );
    }
    return <SparklesIcon className='h-[24px] w-[24px]' />;
  };

  const getModalTitle = () => {
    if (step === ModalStep.Confirm) return 'Keep your Subscription';
    return renewStatus === 'success' ? 'Success' : 'An Error Occurred';
  };

  const renderModalContent = () => {
    if (step === ModalStep.Confirm) {
      return (
        <div>
          <p className='mb-6'>
            Your current subscription will be renewed using your saved payment
            information on{' '}
            {sub?.renews_on ? format(parseISO(sub?.renews_on), 'MMM d, y') : ''}
            .
          </p>

          <div className='mt-6 flex justify-center gap-3'>
            <ModalButton onClick={onClose}>Close</ModalButton>
            <ModalButton
              icon={isLoading ? <SpinnerSVG className='fill-black' /> : null}
              variant={ButtonVariant.Primary}
              onClick={handleConfirmCancelChanges}
              disabled={isLoading}
            >
              {isLoading ? 'Confirming...' : 'Confirm'}
            </ModalButton>
          </div>
        </div>
      );
    }

    if (step === ModalStep.Completing) {
      return (
        <div>
          <p className='mb-6'>
            {renewStatus === 'success'
              ? 'Your subscription will continue as normal.'
              : 'We were unable to update your subscription. Please try again later.'}
          </p>

          <Button
            className='w-full'
            variant={ButtonVariant.Primary}
            size={ButtonSize.Large}
            shape={ButtonShape.Pill}
            onClick={onClose}
          >
            Close
          </Button>
        </div>
      );
    }

    return null;
  };

  return (
    <AuraModal
      open={true}
      onOpenChange={(open) => {
        if (!open) {
          closeModal(ModalTypes.CANCEL_SUBSCRIPTION_CHANGES);
        }
      }}
      title={getModalTitle()}
      icon={getModalIcon()}
    >
      {renderModalContent()}
    </AuraModal>
  );
};

export default CancelChangesModal;