import { useState } from 'react'

import recordSvg from '@/assets/record.svg'
import accountSvg from '@/assets/account.svg'
import PageLayout from '@/components/layout'
import Modal from '@/components/modal'
import { Link } from 'react-router-dom'

type QuickNavCardProps = {
    icon: string
    label: string
    to: string
}

type ProductItem = {
    id: string
    title: string
    subtitle: string
    points: string
    ctaLabel: string
    imageClassName: string
}

type ProductCategory = {
    id: string
    name: string
    items: ProductItem[]
}

type SelectedProductState = {
    categoryId: ProductCategory['id']
    product: ProductItem
}

type AddressOption = {
    id: string
    name: string
    phone: string
    address: string
    postalCode: string
    isDefault?: boolean
}

type ModalMode = 'select-address' | 'add-address'

type AddAddressForm = {
    name: string
    phone: string
    region: string
    detailedAddress: string
    postalCode: string
    isDefault: boolean
}

function QuickNavCard({ icon, label, to }: QuickNavCardProps) {
    return (
        <Link
            to={to}
            className={'liquid-glass-bg rounded-[10px] flex items-center pr-[10px] cursor-pointer'}
        >
            <div className={'flex px-[10px] py-[5px] items-center gap-[5px]'}>
                <div className={'p-[5px] rounded-[10px] bg-linear-to-b from-[#FB8001] to-[#FCAA2C]'}>
                    <img src={icon} className={'w-[16px] h-[16px]'} />
                </div>
                <div>{label}</div>
            </div>
            <div>&gt;</div>
        </Link>
    )
}

const productCategories: ProductCategory[] = [
    {
        id: 'transfer-to-platform',
        name: 'Transfer to Platform',
        items: [
            {
                id: 'transfer-100',
                title: 'Transfer 100',
                subtitle: '1 x Turnover',
                points: '1000 Points',
                ctaLabel: 'Transfer Now',
                imageClassName: 'bg-[linear-gradient(135deg,_#5B1D00_0%,_#FA6A00_55%,_#FFBC6D_100%)]',
            },
            {
                id: 'transfer-300',
                title: 'Transfer 300',
                subtitle: '2 x Turnover',
                points: '2800 Points',
                ctaLabel: 'Transfer Now',
                imageClassName: 'bg-[linear-gradient(135deg,_#1C1A48_0%,_#5050D8_55%,_#8AB6FF_100%)]',
            },
            {
                id: 'transfer-500',
                title: 'Transfer 500',
                subtitle: '3 x Turnover',
                points: '4200 Points',
                ctaLabel: 'Transfer Now',
                imageClassName: 'bg-[linear-gradient(135deg,_#153A35_0%,_#1F9D8B_55%,_#8BF3D8_100%)]',
            },
            {
                id: 'transfer-1000',
                title: 'Transfer 1000',
                subtitle: '5 x Turnover',
                points: '7800 Points',
                ctaLabel: 'Transfer Now',
                imageClassName: 'bg-[linear-gradient(135deg,_#421515_0%,_#C93D3D_52%,_#FF9B9B_100%)]',
            },
        ],
    },
    {
        id: 'game-bonus',
        name: 'Game Bonus',
        items: [
            {
                id: 'bonus-spin',
                title: 'Lucky Spin Pack',
                subtitle: 'Bonus Voucher',
                points: '850 Points',
                ctaLabel: 'Redeem Bonus',
                imageClassName: 'bg-[linear-gradient(135deg,_#28103D_0%,_#8E3DD1_50%,_#F1A8FF_100%)]',
            },
            {
                id: 'bonus-chip',
                title: 'Chip Booster',
                subtitle: 'Casino Special',
                points: '1600 Points',
                ctaLabel: 'Redeem Bonus',
                imageClassName: 'bg-[linear-gradient(135deg,_#2D2407_0%,_#C79200_52%,_#FFE58A_100%)]',
            },
            {
                id: 'bonus-cashback',
                title: 'Cashback Card',
                subtitle: 'Weekly Reward',
                points: '2400 Points',
                ctaLabel: 'Redeem Bonus',
                imageClassName: 'bg-[linear-gradient(135deg,_#062A2F_0%,_#1296A5_52%,_#6DE2F0_100%)]',
            },
            {
                id: 'bonus-vip',
                title: 'VIP Match Bonus',
                subtitle: 'Limited Access',
                points: '5000 Points',
                ctaLabel: 'Redeem Bonus',
                imageClassName: 'bg-[linear-gradient(135deg,_#35120A_0%,_#DD6C2F_52%,_#FFC09A_100%)]',
            },
        ],
    },
    {
        id: 'physical-prizes',
        name: 'Physical Prizes',
        items: [
            {
                id: 'prize-headset',
                title: 'Gaming Headset',
                subtitle: 'Physical Delivery',
                points: '6800 Points',
                ctaLabel: 'Claim Prize',
                imageClassName: 'bg-[linear-gradient(135deg,_#111827_0%,_#374151_50%,_#A3AAB8_100%)]',
            },
            {
                id: 'prize-mouse',
                title: 'Wireless Mouse',
                subtitle: 'Physical Delivery',
                points: '4200 Points',
                ctaLabel: 'Claim Prize',
                imageClassName: 'bg-[linear-gradient(135deg,_#19212F_0%,_#3A5B84_50%,_#98B8E3_100%)]',
            },
            {
                id: 'prize-speaker',
                title: 'Bluetooth Speaker',
                subtitle: 'Physical Delivery',
                points: '7300 Points',
                ctaLabel: 'Claim Prize',
                imageClassName: 'bg-[linear-gradient(135deg,_#32120F_0%,_#A73F2F_50%,_#F0A28D_100%)]',
            },
            {
                id: 'prize-keyboard',
                title: 'Mechanical Keyboard',
                subtitle: 'Physical Delivery',
                points: '9500 Points',
                ctaLabel: 'Claim Prize',
                imageClassName: 'bg-[linear-gradient(135deg,_#142C17_0%,_#2B7A38_52%,_#8DE69B_100%)]',
            },
        ],
    },
]

const initialAddressOptions: AddressOption[] = [
    {
        id: 'address-shanghai',
        name: 'Jia Jun',
        phone: '+86 138 0000 1288',
        address: 'No. 88 Century Avenue, Pudong New Area, Shanghai',
        postalCode: '200120',
        isDefault: true,
    },
    {
        id: 'address-singapore',
        name: 'Alicia Tan',
        phone: '+65 9123 4567',
        address: '18 Robinson Road, Singapore',
        postalCode: '048547',
    },
    {
        id: 'address-kuala-lumpur',
        name: 'Marcus Lee',
        phone: '+60 12 778 9911',
        address: '27 Jalan Bukit Bintang, Kuala Lumpur',
        postalCode: '55100',
    },
]

const emptyAddressForm: AddAddressForm = {
    name: '',
    phone: '',
    region: '',
    detailedAddress: '',
    postalCode: '',
    isDefault: false,
}

function getNumericValue(value: string) {
    const matched = value.match(/\d+/)
    return matched ? matched[0] : value
}

function getTurnoverRequirement(subtitle: string) {
    const matched = subtitle.match(/\d+/)
    return matched ? `${matched[0]}x` : subtitle
}

function HomePage() {
    const [selectedProduct, setSelectedProduct] = useState<SelectedProductState | null>(null)
    const [claimModalOpen, setClaimModalOpen] = useState(false)
    const [modalMode, setModalMode] = useState<ModalMode>('select-address')
    const [addressOptions, setAddressOptions] = useState<AddressOption[]>(initialAddressOptions)
    const [selectedAddressId, setSelectedAddressId] = useState<string>(initialAddressOptions[0]?.id ?? '')
    const [addressForm, setAddressForm] = useState<AddAddressForm>(emptyAddressForm)

    const handleOpenRedeemModal = (product: ProductItem, categoryId: ProductCategory['id']) => {
        setSelectedProduct({
            product,
            categoryId,
        })
        setSelectedAddressId(addressOptions[0]?.id ?? '')
        setModalMode('select-address')
        setAddressForm(emptyAddressForm)
    }

    const handleCloseRedeemModal = () => {
        setSelectedProduct(null)
        setModalMode('select-address')
        setAddressForm(emptyAddressForm)
    }

    const handleOpenClaimModal = () => {
        setClaimModalOpen(true)
    }

    const handleCloseClaimModal = () => {
        setClaimModalOpen(false)
    }

    const handleOpenAddAddress = () => {
        setModalMode('add-address')
    }

    const handleChangeAddressForm = (field: keyof AddAddressForm, value: string | boolean) => {
        setAddressForm((previous) => ({
            ...previous,
            [field]: value,
        }))
    }

    const isAddAddressFormValid = [
        addressForm.name,
        addressForm.phone,
        addressForm.region,
        addressForm.detailedAddress,
    ].every((value) => value.trim())

    const handleConfirm = () => {
        if (modalMode === 'add-address') {
            if (!isAddAddressFormValid) {
                return
            }

            const newAddress: AddressOption = {
                id: `address-${Date.now()}`,
                name: addressForm.name.trim(),
                phone: addressForm.phone.trim(),
                address: `${addressForm.region.trim()}, ${addressForm.detailedAddress.trim()}`,
                postalCode: addressForm.postalCode.trim() || 'N/A',
                isDefault: addressForm.isDefault,
            }

            setAddressOptions((previous) => {
                const normalizedPrevious = addressForm.isDefault
                    ? previous.map((item) => ({ ...item, isDefault: false }))
                    : previous

                return [...normalizedPrevious, newAddress]
            })
            setSelectedAddressId(newAddress.id)
            setAddressForm(emptyAddressForm)
            setModalMode('select-address')
            return
        }
        handleCloseRedeemModal()
    }

    const selectedCategoryId = selectedProduct?.categoryId
    const selectedProductData = selectedProduct?.product ?? null
    const isPhysicalPrize = selectedCategoryId === 'physical-prizes'
    const isTransferToPlatform = selectedCategoryId === 'transfer-to-platform'
    const isGameBonus = selectedCategoryId === 'game-bonus'
    const modalTitle = modalMode === 'add-address'
        ? 'Add Shipping Address'
        : isTransferToPlatform
            ? 'Confirm Withdrawal'
            : isGameBonus
                ? 'Confirm Bonus Redemption'
                : 'Redeem Product'
    const modalMaxWidthClassName = isTransferToPlatform
        ? 'max-w-[620px]'
        : isGameBonus
            ? 'max-w-[460px]'
            : 'max-w-[720px]'

    return (
        <PageLayout>
            <div className={'flex justify-end gap-2 py-[10px]'}>
                <QuickNavCard to="/record" icon={recordSvg} label="record" />
                <QuickNavCard to="/account" icon={accountSvg} label="account" />
            </div>

            <div>
                <div className={'flex gap-[5px]'}>
                    <div className={'liquid-glass-bg h-[167px] w-[267px] p-[10px] flex flex-col justify-start'}>
                        <div>Claimable Points</div>
                        <div>2,880</div>
                        <div>Yesterday's losses
                            have been converted
                            to points.Claim to use.
                        </div>
                    </div>
                    <div className={'liquid-glass-bg h-[167px] w-[267px] p-[10px] flex flex-col justify-start'}>
                        <div>Daily Claim Limit</div>
                        <div>1,500</div>
                        <div
                            className={'progress-bar'}
                            role="progressbar"
                            aria-valuemin={0}
                            aria-valuemax={1500}
                            aria-valuenow={800}
                        >
                            <div className={'progress-bar__fill'} style={{ width: '53.33%' }}></div>
                        </div>
                        <div>Claimed: 800 / 1500</div>
                    </div>

                    <div className={'flex flex-col gap-[5px]'}>
                        <div className={'liquid-glass-bg flex-1'}>
                            <div>Available for Withdrawal (Cash)</div>
                            <div>152 CNY</div>
                        </div>
                        <div className={'h-[54px] w-[564px] liquid-glass-bg flex gap-[10px] p-[5px]'}>
                            <button className={'button-play flex-1'} onClick={handleOpenClaimModal}>
                                Claim Now
                            </button>
                            <button className={'button-play flex-1'}>Sync Balance</button>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                {
                    productCategories.map((category) => (<div key={category.id} className={'mt-[20px]'}>
                        <div className={'flex items-center justify-between mb-[5px]'}>
                            <div className={'font-bold text-[14px]'}>{category.name}</div>
                            <div
                                className={'text-[#FA6A00] text-[12px] font-light underline cursor-pointer'}>more
                            </div>
                        </div>
                        <div className={'grid grid-cols-1 gap-4  md:grid-cols-4 xl:grid-cols-4'}>
                            {
                                category.items.map((product) => (
                                    <div
                                        key={product.id}
                                        className={'liquid-glass-bg aspect-[215/260] w-full flex flex-col items-stretch justify-start'}>
                                        <div className={`${product.imageClassName} w-full h-[40%] rounded-t-[10px]`}></div>
                                        <div
                                            className={'p-[10px] w-full flex-1 flex flex-col justify-around items-start'}>
                                            <div>{product.title}</div>
                                            <div className={'text-neutral-500'}>{product.subtitle}</div>
                                            <div className={'text-[#FA6A00]'}>{product.points}</div>
                                            <button
                                                className={'button-play w-full h-[30px]'}
                                                onClick={() => handleOpenRedeemModal(product, category.id)}
                                            >
                                                {product.ctaLabel}
                                            </button>
                                        </div>
                                    </div>
                                ))
                            }
                        </div>
                    </div>))
                }
            </div>

            <Modal
                open={Boolean(selectedProduct)}
                title={modalTitle}
                onClose={handleCloseRedeemModal}
                className={modalMaxWidthClassName}
                bodyClassName="space-y-[18px]"
                footer={
                    <>
                        <button
                            type="button"
                            className="h-[38px] rounded-[8px] border border-white/15 bg-white/5 px-[18px] text-[14px] text-white transition-colors hover:bg-white/10"
                            onClick={modalMode === 'add-address' ? () => setModalMode('select-address') : handleCloseRedeemModal}
                        >
                            Cancel
                        </button>
                        <button
                            type="button"
                            className={`button-play h-[38px] ${modalMode === 'add-address' && !isAddAddressFormValid ? 'opacity-50' : ''}`}
                            onClick={handleConfirm}
                            disabled={modalMode === 'add-address' && !isAddAddressFormValid}
                        >
                            Confirm
                        </button>
                    </>
                }
            >
                {selectedProductData ? (
                    <>
                        {isTransferToPlatform ? (
                            <div className="rounded-[14px] bg-[#1C1818]/80 px-[18px] py-[14px] shadow-[0_10px_30px_rgba(0,0,0,0.22)]">
                                <div className="divide-y divide-white/8">
                                    <div className="flex items-center justify-between py-[14px] text-white">
                                        <div className="text-[18px]">Withdrawal Amount</div>
                                        <div className="text-[18px]">{getNumericValue(selectedProductData.title)}</div>
                                    </div>
                                    <div className="flex items-center justify-between py-[14px] text-white">
                                        <div className="text-[18px]">Points Required</div>
                                        <div className="text-[18px]">{getNumericValue(selectedProductData.points)}</div>
                                    </div>
                                    <div className="flex items-center justify-between py-[14px] text-white">
                                        <div className="text-[18px] underline decoration-[#1E90FF] underline-offset-[3px]">
                                            Turnover Requirement
                                        </div>
                                        <div className="text-[18px]">{getTurnoverRequirement(selectedProductData.subtitle)}</div>
                                    </div>
                                </div>
                                <div className="pt-[10px] text-center text-[18px] text-white/45">
                                    Submit withdrawal request?
                                </div>
                            </div>
                        ) : isGameBonus ? (
                            <div className="rounded-[10px] bg-[#1C1818]/80 px-[16px] py-[8px] shadow-[0_10px_30px_rgba(0,0,0,0.22)]">
                                <div className="divide-y divide-white/8">
                                    <div className="flex items-center justify-between py-[14px] text-white">
                                        <div className="text-[13px] text-white/78">Item</div>
                                        <div className="text-[14px]">{selectedProductData.title}</div>
                                    </div>
                                    <div className="flex items-center justify-between py-[14px] text-white">
                                        <div className="text-[13px] text-white/78">Points Required</div>
                                        <div className="text-[14px]">{getNumericValue(selectedProductData.points)}</div>
                                    </div>
                                    <div className="flex items-center justify-between py-[14px] text-white">
                                        <div className="text-[13px] text-white/78">Turnover Requirement</div>
                                        <div className="text-[14px]">{getTurnoverRequirement(selectedProductData.subtitle)}</div>
                                    </div>
                                </div>
                            </div>
                        ) : modalMode === 'select-address' && isPhysicalPrize ? (
                            <>
                                <div className="flex gap-[14px] rounded-[12px] bg-white/5 p-[12px]">
                                    <div
                                        className={`${selectedProductData.imageClassName} h-[110px] w-[140px] shrink-0 rounded-[10px]`}
                                    ></div>
                                    <div className="flex min-w-0 flex-1 flex-col justify-between">
                                        <div>
                                            <div className="text-[20px] font-bold text-white">{selectedProductData.title}</div>
                                            <div className="mt-[6px] text-[13px] text-white/60">{selectedProductData.subtitle}</div>
                                        </div>
                                        <div className="text-[18px] font-bold text-[#FA6A00]">{selectedProductData.points}</div>
                                    </div>
                                </div>

                                <div>
                                    <div className="mb-[10px] text-[14px] font-bold text-white">Select Shipping Address</div>
                                    <div className="space-y-[10px]">
                                        {addressOptions.map((address) => {
                                            const isSelected = selectedAddressId === address.id

                                            return (
                                                <button
                                                    key={address.id}
                                                    type="button"
                                                    className={`flex w-full items-start gap-[12px] rounded-[12px] border px-[14px] py-[14px] text-left transition-colors ${
                                                        isSelected
                                                            ? 'border-[#FA6A00] bg-[#FA6A00]/12'
                                                            : 'border-white/10 bg-white/4 hover:bg-white/8'
                                                    }`}
                                                    onClick={() => setSelectedAddressId(address.id)}
                                                >
                                                    <div
                                                        className={`mt-[3px] h-[16px] w-[16px] rounded-full border ${
                                                            isSelected
                                                                ? 'border-[#FA6A00] bg-[#FA6A00] shadow-[0_0_12px_rgba(250,106,0,0.45)]'
                                                                : 'border-white/30'
                                                        }`}
                                                    >
                                                        <div
                                                            className={`m-auto mt-[3px] h-[6px] w-[6px] rounded-full bg-white ${
                                                                isSelected ? 'block' : 'hidden'
                                                            }`}
                                                        ></div>
                                                    </div>
                                                    <div className="min-w-0 flex-1">
                                                        <div className="flex items-center gap-[8px]">
                                                            <div className="text-[14px] font-bold text-white">{address.name}</div>
                                                            <div className="text-[13px] text-white/60">{address.phone}</div>
                                                            {address.isDefault ? (
                                                                <div className="rounded-full bg-[#FA6A00]/18 px-[8px] py-[2px] text-[11px] text-[#FFB36D]">
                                                                    Default
                                                                </div>
                                                            ) : null}
                                                        </div>
                                                        <div className="mt-[6px] text-[13px] leading-[1.5] text-white/75">
                                                            {address.address}
                                                        </div>
                                                        <div className="mt-[4px] text-[12px] text-white/45">
                                                            Postal Code: {address.postalCode}
                                                        </div>
                                                    </div>
                                                </button>
                                            )
                                        })}

                                        <button
                                            type="button"
                                            className="flex w-full items-center gap-[12px] rounded-[12px] border border-dashed border-[#FA6A00]/55 bg-[#FA6A00]/8 px-[14px] py-[16px] text-left transition-colors hover:bg-[#FA6A00]/12"
                                            onClick={handleOpenAddAddress}
                                        >
                                            <div className="flex h-[18px] w-[18px] items-center justify-center rounded-full bg-[#FA6A00] text-[14px] leading-none text-white">
                                                +
                                            </div>
                                            <div>
                                                <div className="text-[14px] font-bold text-white">Add New Address</div>
                                                <div className="mt-[4px] text-[12px] text-white/55">
                                                    Create a shipping address for this redemption
                                                </div>
                                            </div>
                                        </button>
                                    </div>
                                </div>
                            </>
                        ) : isPhysicalPrize ? (
                            <div className="rounded-[12px] bg-[#171313]/88 px-[14px] py-[10px] shadow-[0_10px_30px_rgba(0,0,0,0.25)]">
                                <div className="flex items-center justify-between border-b border-white/10 px-[6px] pb-[16px]">
                                    <div className="text-[18px] font-medium text-white">Address Info</div>
                                    <button
                                        type="button"
                                        className="flex items-center gap-[8px] text-[14px] text-white/85"
                                        onClick={() => handleChangeAddressForm('isDefault', !addressForm.isDefault)}
                                    >
                                        <span
                                            className={`flex h-[16px] w-[16px] items-center justify-center rounded-full border ${
                                                addressForm.isDefault ? 'border-[#FA6A00]' : 'border-white/35'
                                            }`}
                                        >
                                            <span
                                                className={`h-[8px] w-[8px] rounded-full ${
                                                    addressForm.isDefault ? 'bg-[#FA6A00]' : 'bg-transparent'
                                                }`}
                                            ></span>
                                        </span>
                                        <span>Default Address</span>
                                    </button>
                                </div>

                                <div className="divide-y divide-white/10">
                                    <div className="grid grid-cols-[170px_1fr] items-center gap-[10px] px-[6px] py-[16px]">
                                        <label className="text-[14px] text-white/92">
                                            Name<span className="text-[#FA6A00]">*</span>
                                        </label>
                                        <input
                                            value={addressForm.name}
                                            onChange={(event) => handleChangeAddressForm('name', event.target.value)}
                                            placeholder="Full Name"
                                            className="bg-transparent text-[14px] text-white outline-none placeholder:text-white/35"
                                        />
                                    </div>
                                    <div className="grid grid-cols-[170px_1fr] items-center gap-[10px] px-[6px] py-[16px]">
                                        <label className="text-[14px] text-white/92">
                                            Phone Number<span className="text-[#FA6A00]">*</span>
                                        </label>
                                        <input
                                            value={addressForm.phone}
                                            onChange={(event) => handleChangeAddressForm('phone', event.target.value)}
                                            placeholder="Phone Number"
                                            className="bg-transparent text-[14px] text-white outline-none placeholder:text-white/35"
                                        />
                                    </div>
                                    <div className="grid grid-cols-[170px_1fr] items-center gap-[10px] px-[6px] py-[16px]">
                                        <label className="text-[14px] text-white/92">
                                            Region<span className="text-[#FA6A00]">*</span>
                                        </label>
                                        <input
                                            value={addressForm.region}
                                            onChange={(event) => handleChangeAddressForm('region', event.target.value)}
                                            placeholder="State, City, District"
                                            className="bg-transparent text-[14px] text-white outline-none placeholder:text-white/35"
                                        />
                                    </div>
                                    <div className="grid grid-cols-[170px_1fr] items-center gap-[10px] px-[6px] py-[16px]">
                                        <label className="text-[14px] text-white/92">
                                            Detailed Address<span className="text-[#FA6A00]">*</span>
                                        </label>
                                        <input
                                            value={addressForm.detailedAddress}
                                            onChange={(event) => handleChangeAddressForm('detailedAddress', event.target.value)}
                                            placeholder="Apt, Suite, Bldg, etc"
                                            className="bg-transparent text-[14px] text-white outline-none placeholder:text-white/35"
                                        />
                                    </div>
                                    <div className="grid grid-cols-[170px_1fr] items-center gap-[10px] px-[6px] py-[16px]">
                                        <label className="text-[14px] text-white/92">Postal Code</label>
                                        <input
                                            value={addressForm.postalCode}
                                            onChange={(event) => handleChangeAddressForm('postalCode', event.target.value)}
                                            placeholder="Postal Code"
                                            className="bg-transparent text-[14px] text-white outline-none placeholder:text-white/35"
                                        />
                                    </div>
                                </div>
                            </div>
                        ) : null}
                    </>
                ) : null}
            </Modal>

            <Modal
                open={claimModalOpen}
                title="Confirm Claim"
                onClose={handleCloseClaimModal}
                className="max-w-[560px]"
                bodyClassName="space-y-[18px]"
                footer={
                    <>
                        <button
                            type="button"
                            className="h-[38px] min-w-[120px] rounded-[8px] border border-white/10 bg-white/10 px-[18px] text-[14px] text-white/75 transition-colors hover:bg-white/14"
                            onClick={handleCloseClaimModal}
                        >
                            Cancel
                        </button>
                        <button type="button" className="button-play h-[38px] min-w-[130px]" onClick={handleCloseClaimModal}>
                            Confirm
                        </button>
                    </>
                }
            >
                <div className="rounded-[12px] bg-[#1C1818]/82 px-[14px] py-[18px] text-[17px] leading-[1.65] text-white/92 shadow-[0_10px_30px_rgba(0,0,0,0.2)]">
                    Once pending points are transferred to your available balance, they can be redeemed or withdrawn.
                    Confirm claim?
                </div>
            </Modal>
        </PageLayout>
    )
}

export default HomePage;
