'use client';

import { Display } from '@/components/display';
import { Empty } from '@/components/empty';
import { ProList, ProListActions } from '@/components/pro-list';
import { closeOrder, queryOrderList } from '@/services/user/order';
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
import { Card, CardContent } from '@workspace/airo-ui/components/card';
import { formatDate } from '@workspace/airo-ui/utils';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { useRef } from 'react';
import OrderDetailDialog from './components/OrderDetailDialog';

export default function Page() {
  const t = useTranslations('order');

  const ref = useRef<ProListActions>(null);
  const OrderDetailDialogRef = useRef<typeof OrderDetailDialog>(null);

  return (
    <div>
      <ProList<API.OrderDetail, Record<string, unknown>>
        action={ref}
        request={async (pagination, filter) => {
          const response = await queryOrderList({ ...pagination, ...filter });
          return {
            list: response.data.data?.list || [],
            total: response.data.data?.total || 0,
          };
        }}
        renderItem={(item) => {
          return (
            <Card className='rounded-[32px] border border-[#D9D9D9] pb-5 pl-5 pr-4 pt-3 shadow-[0px_0px_4.5px_0px_rgba(0,0,0,0.25)] sm:pl-16'>
              <div className={'flex justify-between'}>
                <div>
                  <div className={'text-[#666]'}>{t('orderNo')}</div>
                  <p className='text-xs text-[#4D4D4D]'>{item.order_no}</p>
                </div>
                <div className={'hidden sm:block'}>
                  {item.status === 1 ? (
                    <>
                      <AiroButton
                        variant={'danger'}
                        onClick={async () => {
                          await closeOrder({ orderNo: item.order_no });
                          ref.current?.refresh();
                        }}
                      >
                        {t('cancelOrder')}
                      </AiroButton>
                      <AiroButton variant={'primary'} className={'ml-2'} asChild>
                        <Link key='payment' href={`/payment?order_no=${item.order_no}`}>
                          {t('payment')}
                        </Link>
                      </AiroButton>
                    </>
                  ) : (
                    <AiroButton
                      variant={'default'}
                      onClick={() => OrderDetailDialogRef?.current?.show(item.order_no)}
                    >
                      {t('detail')}
                    </AiroButton>
                  )}
                </div>
                <div className={'sm:hidden'}>
                  {item.status === 1 ? (
                    <AiroButton
                      variant={'dangerLink'}
                      className={'min-w-0 px-0'}
                      onClick={async () => {
                        await closeOrder({ orderNo: item.order_no });
                        ref.current?.refresh();
                      }}
                    >
                      {t('cancelOrder')}
                    </AiroButton>
                  ) : null}
                </div>
              </div>
              <CardContent className='px-0 py-3 pb-0 text-sm'>
                <ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-4'>
                  <li>
                    <span className='text-[#225BA9]'>{t('name')}</span>
                    <span className={'font-bold text-[#091B33]'}>
                      {item.subscribe.name || t(`type.${item.type}`)}
                    </span>
                  </li>
                  <li className='font-semibold'>
                    <span className='text-[#225BA9]'>{t('paymentAmount')}</span>
                    <span>
                      <Display type='currency' value={item.amount} />
                    </span>
                  </li>
                  <li className='font-semibold'>
                    <span className='text-[#225BA9]'>{t('status.0')}</span>
                    <span>{t(`status.${item.status}`)}</span>
                  </li>
                  <li className='font-semibold'>
                    <span className='text-[#225BA9]'>{t('createdAt')}</span>
                    <time>{formatDate(item.created_at)}</time>
                  </li>
                </ul>
                <div className={'mt-2 flex justify-center sm:hidden'}>
                  {item.status === 1 ? (
                    <>
                      <AiroButton variant={'primary'} className={'ml-2'} asChild>
                        <Link key='payment' href={`/payment?order_no=${item.order_no}`}>
                          {t('payment')}
                        </Link>
                      </AiroButton>
                    </>
                  ) : (
                    <AiroButton
                      variant={'default'}
                      onClick={() => OrderDetailDialogRef?.current?.show(item.order_no)}
                    >
                      {t('detail')}
                    </AiroButton>
                  )}
                </div>
              </CardContent>
            </Card>
          );
        }}
        empty={<Empty />}
      />
      <OrderDetailDialog ref={OrderDetailDialogRef} />
    </div>
  );
}