'use client';

import PaymentMethods from '@/components/subscribe/payment-methods';
import PlanTabs, { TabValueType } from '@/components/SubscribePlan/PlanTabs/PlanTabs';
import useGlobalStore from '@/config/use-global';
import { preCreateOrder, purchase } from '@/services/user/order';
import { useQuery } from '@tanstack/react-query';
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@workspace/airo-ui/components/dialog';
import { Separator } from '@workspace/airo-ui/components/separator';
import { LoaderCircle } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import {
  forwardRef,
  useCallback,
  useImperativeHandle,
  useRef,
  useState,
  useTransition,
} from 'react';
import { SubscribeBilling } from './billing';
import { SubscribeDetail } from './detail';

interface PurchaseProps {
  subscribe?: API.Subscribe;
}

interface PurchaseDialogRef {
  show: (subscribe: API.Subscribe, tabValue: TabValueType) => void;
  hide: () => void;
}

const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
  const t = useTranslations('subscribe');
  const { getUserInfo } = useGlobalStore();
  const router = useRouter();
  const [params, setParams] = useState<Partial<API.PurchaseOrderRequest>>({
    quantity: 1,
    subscribe_id: 0,
    payment: -1,
    coupon: '',
  });
  const [subscribe, setSubscribe] = useState<API.Subscribe | undefined>(props.subscribe);
  const [loading, startTransition] = useTransition();
  const [open, setOpen] = useState(false);
  const lastSuccessOrderRef = useRef<any>(null);
  const [tabValue, setTabValue] = useState<'year' | 'month'>('year');

  useImperativeHandle(ref, () => ({
    show: (newSubscribe: API.Subscribe, tabValue: TabValueType) => {
      setSubscribe(newSubscribe);
      setParams((prev) => ({
        ...prev,
        subscribe_id: newSubscribe.id,
        quantity: tabValue === 'year' ? 12 : 1,
      }));
      setTabValue(tabValue);
      setOpen(true);
    },
    hide: () => {
      setOpen(false);
      setSubscribe(undefined);
      setParams({ quantity: 1, subscribe_id: 0, payment: -1, coupon: '' });
    },
  }));

  const { data: order } = useQuery({
    enabled: !!subscribe?.id && params.quantity !== undefined,
    queryKey: ['preCreateOrder', subscribe?.id, params.quantity],
    queryFn: async () => {
      try {
        const { data } = await preCreateOrder({
          ...params,
          subscribe_id: subscribe?.id as number,
          quantity: params.quantity as number,
        } as API.PurchaseOrderRequest);
        const result = data.data;
        if (result) {
          lastSuccessOrderRef.current = result;
        }
        return result;
      } catch (error) {
        if (lastSuccessOrderRef.current) {
          return lastSuccessOrderRef.current;
        }
        throw error;
      }
    },
  });

  const handleChange = useCallback((field: keyof typeof params, value: string | number) => {
    setParams((prev) => ({
      ...prev,
      [field]: value,
    }));
  }, []);

  const handleSubmit = useCallback(async () => {
    startTransition(async () => {
      try {
        const response = await purchase(params as API.PurchaseOrderRequest);
        const orderNo = response.data.data?.order_no;
        if (orderNo) {
          await getUserInfo();
          router.push(`/payment?order_no=${orderNo}`);
        }
      } catch (error) {
        /* empty */
      }
    });
  }, [params, router, getUserInfo]);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className='px-4 sm:h-auto sm:w-[675px] sm:py-12'>
        <DialogHeader className='p-6 pb-0'>
          <DialogTitle className='sr-only'>{t('buySubscription')}</DialogTitle>
        </DialogHeader>
        <div>
          <div className='pl-4 text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:pl-0 sm:text-center sm:text-4xl'>
            {t('purchaseTitle')}
          </div>
          <PlanTabs
            tabValue={tabValue}
            setTabValue={(val) => {
              if (val === 'year') {
                handleChange('quantity', 12);
              } else if (val === 'month') {
                handleChange('quantity', 1);
              }
              setTabValue(val);
            }}
            discount={20}
            className={'sm:mt-6'}
          />
          <div className={'px-4 sm:px-0'}>
            <SubscribeDetail
              subscribe={{
                ...subscribe,
                quantity: params.quantity,
              }}
            />
            <Separator className='mb-3 mt-4 bg-[#225BA9]' />
            <SubscribeBilling
              order={{
                ...order,
                quantity: params.quantity,
                unit_price: subscribe?.unit_price,
              }}
            />
            <Separator className='mb-3 mt-4 bg-[#225BA9]' />
            <PaymentMethods
              titleClassName={'text-[15px] text-[#225BA9]'}
              value={params.payment!}
              onChange={(value) => {
                handleChange('payment', value);
              }}
            />
          </div>
          <div className='mt-8 flex items-center justify-center'>
            <AiroButton variant={'primary'} disabled={loading} onClick={handleSubmit}>
              {loading && <LoaderCircle className='mr-2 animate-spin' />}
              {t('buyNow')}
            </AiroButton>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
});

Purchase.displayName = 'Purchase';
export default Purchase;
