'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 { Button } from '@workspace/ui/components/button';
import { Card, CardContent } from '@workspace/ui/components/card';
import { formatDate } from '@workspace/ui/utils';
import { useTranslations } from 'next-intl';
import { useRef } from 'react';

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

  const ref = useRef<ProListActions>(null);
  return (
    <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] px-3 pb-5 pt-3 shadow-[0px_0px_4.5px_0px_rgba(0,0,0,0.25)]'>
            <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>
                {item.status === 1 ? (
                  <>
                    <Button className='min-w-[150px] rounded-full border-[#0F2C53] bg-[#0F2C53] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'>
                      {t('payment')}
                    </Button>
                    <Button
                      className='min-w-[150px] rounded-full border-[#0F2C53] bg-[#0F2C53] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'
                      onClick={async () => {
                        await closeOrder({ orderNo: item.order_no });
                        ref.current?.refresh();
                      }}
                    >
                      {t('cancel')}
                    </Button>
                  </>
                ) : (
                  <Button className='min-w-[150px] rounded-full border-[#0F2C53] bg-[#0F2C53] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'>
                    {t('detail')}
                  </Button>
                )}
              </div>
            </div>
            <CardContent className='p-3 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>
            </CardContent>
          </Card>
        );
      }}
      empty={<Empty />}
    />
  );
}