'use client';
import { useQuery } from '@tanstack/react-query';
import { Dialog, DialogContent, DialogTitle } from '@workspace/airo-ui/components/dialog';
import { Separator } from '@workspace/airo-ui/components/separator';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import { forwardRef, useImperativeHandle, useState } from 'react';

import { SubscribeBilling } from '@/components/subscribe/billing';
import { SubscribeDetail } from '@/components/subscribe/detail';
import useGlobalStore from '@/config/use-global';
import { queryOrderDetail } from '@/services/user/order';

interface OrderDetailDialogProps {
  orderNo?: string;
}

export interface OrderDetailDialogRef {
  show: (orderNo: string) => void;
  hide: () => void;
}

const OrderDetailDialog = forwardRef<OrderDetailDialogRef, OrderDetailDialogProps>((props, ref) => {
  const t = useTranslations('order');
  const { getUserInfo } = useGlobalStore();
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [orderNo, setOrderNo] = useState<string | undefined>(props.orderNo);
  const [enabled, setEnabled] = useState(true);

  useImperativeHandle(ref, () => ({
    show: (newOrderNo: string) => {
      setOrderNo(newOrderNo);
      setEnabled(true);
      setOpen(true);
    },
    hide: () => {
      setOpen(false);
      setOrderNo(undefined);
      setEnabled(false);
    },
  }));

  const { data, isLoading } = useQuery({
    enabled: enabled && !!orderNo,
    queryKey: ['queryOrderDetail', orderNo],
    queryFn: async () => {
      const { data } = await queryOrderDetail({ order_no: orderNo! });
      if (data?.data?.status !== 1) {
        getUserInfo();
        setEnabled(false);
      }
      return data?.data;
    },
    refetchInterval: 3000,
  });

  const handleClose = () => {
    setOpen(false);
    setOrderNo(undefined);
    setEnabled(false);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTitle>
        <div className={'sr-only'}>order detail</div>
      </DialogTitle>
      <DialogContent className='sm:w-[675px]'>
        <div className='text-2xl font-bold text-[#0F2C53] sm:mb-8 sm:text-center'>
          {t('orderDetail')}
        </div>

        <div className='text-[16px] font-bold text-[#666]'>
          <div>{t('orderNo')}</div>
          <div className='text-[12px] font-light text-[#4D4D4D]'>{orderNo}</div>
        </div>
        <Separator className='mb-3 mt-2 h-[2px] bg-[#225BA9]' />
        <div className='text-[15px] text-[#225BA9]'>
          <div>{t('paymentMethod')}</div>
          <div className='font-light text-[#666]'>{data?.payment?.name}</div>
        </div>
        <Separator className='mb-3 mt-4 bg-[#225BA9]' />
        <div>
          <SubscribeDetail
            subscribe={{
              ...data?.subscribe,
              quantity: data?.quantity,
            }}
          />
          <Separator className='mb-3 mt-4 bg-[#225BA9]' />
          <SubscribeBilling
            order={{
              ...data,
              unit_price: data?.subscribe?.unit_price,
            }}
          />
          <Separator className='mb-3 mt-4 bg-[#225BA9]' />
        </div>
      </DialogContent>
    </Dialog>
  );
});

OrderDetailDialog.displayName = 'OrderDetailDialog';
export default OrderDetailDialog;
