'use client';

import { Display } from '@/components/display';
import useGlobalStore from '@/config/use-global';
import { Card, CardContent } from '@workspace/airo-ui/components/card';
import { useTranslations } from 'next-intl';

import Recharge from '@/components/subscribe/recharge';
import SvgIcon from '@/components/SvgIcon';
import { Button } from '@workspace/airo-ui/components/button';
import Link from 'next/link';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { toast } from 'sonner';
import Table from './components/Table/Table';
import WalletDialog from './components/WalletDialog/WalletDialog';

export default function Page() {
  const t = useTranslations('wallet');
  const dashboardT = useTranslations('dashboard');
  const { user } = useGlobalStore();
  const totalAssets = (user?.balance || 0) + (user?.commission || 0) + (user?.gift_amount || 0);
  return (
    <>
      <Card className='rounded-[40px] border border-[#D9D9D9] px-[24px] pb-[30px] pt-[20px] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:mb-4 sm:px-[30px]'>
        <CardContent className='p-0'>
          <h2 className='mb-4 flex items-center justify-between text-base font-bold text-[#666] sm:text-xl'>
            <span>{t('assetOverview')}</span>
            <Recharge />
          </h2>
          <div className='mb-4'>
            <div className='flex items-center justify-between'>
              <div>
                <p className='text-sm font-light text-[#666]'>{t('totalAssets')}</p>
                <p className='text-2xl font-bold'>
                  <Display type='currency' value={totalAssets} />
                </p>
              </div>
            </div>
          </div>
          <div className='grid grid-cols-2 gap-2 sm:grid-cols-2 sm:gap-6 md:grid-cols-4'>
            <div className='col-span-2 rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md sm:col-span-1'>
              <p className='text-sm font-light text-[#666] opacity-80 sm:mb-3'>
                {t('accountBalance')}
              </p>
              <p className='text-xl font-medium text-[#225BA9]'>
                <Display type='currency' value={user?.balance} />
              </p>
            </div>
            <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
              <p className='text-sm font-light text-[#666] opacity-80 sm:mb-3'>{t('giftAmount')}</p>
              <p className='text-xl font-medium text-[#225BA9]'>
                <Display type='currency' value={user?.gift_amount} />
              </p>
            </div>
            <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
              <p className='text-sm font-light text-[#666] opacity-80 sm:mb-3'>{t('commission')}</p>
              <p className='text-xl font-medium text-[#225BA9]'>
                <Display type='currency' value={user?.commission} />
              </p>
            </div>
            <div className='col-span-2 rounded-[20px] border-2 border-[#D9D9D9] p-4 shadow-sm transition-all duration-300 hover:shadow-md sm:col-span-1'>
              <p className='mb-1 flex justify-between text-sm font-light text-[#666] sm:mb-3'>
                <span>{t('referralCode')}</span>
                <Link href='/affiliate' className={'text-[#225BA9]'}>
                  {t('referralDetails')}
                </Link>
              </p>
              <p className='flex justify-between text-base font-medium text-[#225BA9]'>
                <span> {user?.refer_code}</span>
                <CopyToClipboard
                  text={`${location?.origin}/?invite=${user?.refer_code}`}
                  onCopy={(text, result) => {
                    if (result) {
                      toast.success(dashboardT('copySuccess'));
                    }
                  }}
                >
                  <Button variant='link' size='sm' className='h-auto p-0 px-0 [&_svg]:size-5'>
                    <SvgIcon name={'copy'}></SvgIcon>
                  </Button>
                </CopyToClipboard>
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
      <div className={'hidden sm:block'}>
        <Table />
      </div>
      <div className={'mt-2.5 sm:hidden'}>
        <WalletDialog />
      </div>
    </>
  );
}