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 AddressOption = {
    id: string
    name: string
    phone: string
    address: 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 addressOptions: 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',
    },
]

function HomePage() {
    const [selectedProduct, setSelectedProduct] = useState<ProductItem | null>(null)
    const [selectedAddressId, setSelectedAddressId] = useState<string>(addressOptions[0]?.id ?? '')

    const handleOpenRedeemModal = (product: ProductItem) => {
        setSelectedProduct(product)
        setSelectedAddressId(addressOptions[0]?.id ?? '')
    }

    const handleCloseRedeemModal = () => {
        setSelectedProduct(null)
    }

    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'}>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)}
                                            >
                                                {product.ctaLabel}
                                            </button>
                                        </div>
                                    </div>
                                ))
                            }
                        </div>
                    </div>))
                }
            </div>

            <Modal
                open={Boolean(selectedProduct)}
                title="Redeem Product"
                onClose={handleCloseRedeemModal}
                className="max-w-[720px]"
                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={handleCloseRedeemModal}
                        >
                            Cancel
                        </button>
                        <button
                            type="button"
                            className="button-play h-[38px]"
                            onClick={handleCloseRedeemModal}
                        >
                            Confirm
                        </button>
                    </>
                }
            >
                {selectedProduct ? (
                    <>
                        <div className="flex gap-[14px] rounded-[12px] bg-white/5 p-[12px]">
                            <div
                                className={`${selectedProduct.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">{selectedProduct.title}</div>
                                    <div className="mt-[6px] text-[13px] text-white/60">{selectedProduct.subtitle}</div>
                                </div>
                                <div className="text-[18px] font-bold text-[#FA6A00]">{selectedProduct.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>
                                    )
                                })}
                            </div>
                        </div>
                    </>
                ) : null}
            </Modal>
        </PageLayout>
    )
}

export default HomePage;
