'use client';
import { ef } from '@/lib/helpers/utfNumbers'
import { Cup, Star1, MoneyRecive } from 'iconsax-react'
import React from 'react'
import { useConvertScoreToWallet, useGetUserPointsBalance, useGetUserWallet } from '../../hooks/useTransactionData';
import { Button } from '@/components/ui/button';
import { useGetAbout } from '../../../about/hooks/useAboutData';
import { toast } from '@/components/Toast';
import { extractErrorMessage } from '@/lib/func';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';

function TransactionsIndex() {

    const { data: userWallet } = useGetUserWallet();
    const { data: userPointsBalance } = useGetUserPointsBalance();
    const { data: aboutData } = useGetAbout();
    const { mutate: convertScoreToWallet, isPending: isConverting } = useConvertScoreToWallet();
    const userPoints = userPointsBalance?.data?.balance ?? 0;
    const userWalletAmount = userWallet?.data?.balance ?? 0;
    const conversionRate = Number(aboutData?.data?.score?.purchaseScore ?? 1000);
    const calculatedAmount = Math.floor(userPoints / conversionRate) * Number(aboutData?.data?.score?.purchaseAmount ?? 1);

    const handleConvert = async () => {
        convertScoreToWallet(undefined, {
            onSuccess: () => {
                toast('تبدیل امتیاز به اعتبار با موفقیت انجام شد', 'success');
                window.location.reload();
            },
            onError: (error) => {
                toast(extractErrorMessage(error), 'error');
            },
        });
    };

    return (
        <section className='pt-6 pb-10'>
            <h1 className='font-medium dark:text-foreground'>باشگاه مشتریان</h1>

            <section
                aria-label="درباره باشگاه مشتریان"
                className={glassSurfaceCard('mt-3 rounded-normal grid grid-cols-4 items-center')}
            >
                <div className='col-span-3 py-5 pe-7 ps-5 relative h-36.5'>
                    <div className='w-full h-full absolute top-0 left-0 overflow-clip text-muted-foreground/30 dark:text-foreground/20'>
                        <svg width="301" height="146" viewBox="0 0 301 146" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g opacity="0.15">
                                <path d="M262.479 152.795C202.8 122.128 120.111 132.267 77.763 175.315C35.4154 218.362 49.3247 278.14 109.004 308.807C168.683 339.474 251.373 329.335 293.721 286.287C336.069 243.24 322.159 183.462 262.479 152.795Z" stroke="currentColor" />
                                <path d="M298.808 115.866C239.129 85.1988 156.44 95.3379 114.092 138.385C71.7445 181.433 85.6538 241.21 145.333 271.877C205.012 302.544 287.702 292.405 330.05 249.358C372.398 206.31 358.488 146.533 298.808 115.866Z" stroke="currentColor" />
                                <path d="M347.543 66.3263C287.863 35.6595 205.174 45.7986 162.826 88.8461C120.479 131.894 134.388 191.671 194.067 222.338C253.747 253.005 336.437 242.866 378.784 199.819C421.132 156.771 407.222 96.9933 347.543 66.3263Z" stroke="currentColor" />
                                <path d="M416.657 -3.92933C356.977 -34.5961 274.288 -24.457 231.941 18.5905C189.593 61.638 203.502 121.415 263.182 152.082C322.861 182.749 405.551 172.61 447.899 129.563C490.246 86.5153 476.336 26.7377 416.657 -3.92933Z" stroke="currentColor" />
                            </g>
                        </svg>
                    </div>
                    <div className='flex flex-col justify-between h-full relative z-10'>
                        <div>
                            <h2 className='font-bold text-base dark:text-foreground'>در باشگاه مشتریان</h2>
                            <p className='text-xs mt-[7px] dark:text-disabled-text'>با امتیازی که داری سفارش بده!</p>
                        </div>

                        <p className='text-xs font-medium dark:text-foreground'>مجموع امتیازات شما: {ef(userPointsBalance?.data?.balance?.toString() ?? '0')}</p>
                    </div>
                </div>

                <div
                    className='max-w-36 place-self-end col-span-1 h-full text-end py-4 px-5.5 flex flex-col justify-between rounded-e-normal bg-linear-to-br from-primary to-menu-header'
                >
                    <p className='text-sm2 text-white leading-tight'>
                        <span className='font-normal'>Customer</span><br />
                        <span className='font-medium'>Club</span>
                    </p>

                    <div className='place-self-center w-fit border max-h-6 flex justify-center items-center gap-1 border-white rounded-sm py-1 px-1.5'>
                        <Star1 className='fill-white stroke-white' size={8} />
                        <Star1 className='fill-white stroke-white' size={8} />
                        <Star1 className='fill-white stroke-white' size={8} />
                        <Cup className='stroke-white' size={16} />
                    </div>
                </div>
            </section>

            {/* بخش نمایش اعتبار کاربر */}
            <section className={glassSurfaceCard('mt-6 rounded-normal p-5')}>
                <div className='flex items-center gap-2 mb-4'>
                    <MoneyRecive color='currentColor' size={24} className='text-primary dark:text-foreground' variant='Bold' />
                    <h2 className='font-bold text-base dark:text-foreground'>اعتبار شما</h2>
                </div>
                <div className='bg-linear-to-l from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/10 rounded-md p-4'>
                    <div className='flex justify-between items-center'>
                        <span className='text-sm text-muted-foreground dark:text-disabled-text'>موجودی کیف پول:</span>
                        <span className='font-bold text-lg text-primary dark:text-foreground'>{ef(userWalletAmount.toLocaleString())} تومان</span>
                    </div>
                </div>
            </section>

            {/* بخش تبدیل امتیاز به اعتبار */}
            <section className={glassSurfaceCard('mt-6 rounded-normal p-5')}>
                <div className='flex items-center gap-2 mb-4'>
                    <MoneyRecive color='currentColor' size={24} className='text-primary dark:text-foreground' variant='Bold' />
                    <h2 className='font-bold text-base dark:text-foreground'>تبدیل امتیاز به اعتبار</h2>
                </div>

                <p className='text-sm text-muted-foreground dark:text-disabled-text mb-4'>
                    هر {ef(aboutData?.data?.score?.purchaseScore?.toString() ?? '0')} امتیاز معادل {ef(aboutData?.data?.score?.purchaseAmount?.toString() ?? '0')} تومان اعتبار است
                </p>

                <div className='space-y-4'>
                    <div className='bg-accent/50 dark:bg-disabled/30 rounded-md p-4 space-y-2 border border-border/50 dark:border-border'>
                        <div className='flex justify-between items-center'>
                            <span className='text-sm text-muted-foreground dark:text-disabled-text'>امتیاز شما:</span>
                            <span className='font-bold text-lg dark:text-foreground'>{ef(userPoints.toString())}</span>
                        </div>
                        <div className='flex justify-between items-center'>
                            <span className='text-sm text-muted-foreground dark:text-disabled-text'>دریافت می‌کنید:</span>
                            <span className='font-bold text-lg text-primary dark:text-foreground'>{ef(calculatedAmount.toString())} تومان</span>
                        </div>
                    </div>

                    <Button
                        onClick={handleConvert}
                        disabled={userPoints <= 0 || isConverting}
                        className='w-full text-xs dark:bg-white dark:text-gray-900 dark:hover:bg-white/90'
                    >
                        {isConverting ? 'در حال تبدیل...' : 'تبدیل تمام امتیازات'}
                    </Button>
                </div>
            </section>

        </section>
    )
}

export default TransactionsIndex