'use client'

import { IconButton } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { useGetWalletBalance } from '@/hooks/useWallet'
import Image from 'next/image'
import numeral from 'numeral'

const IncomeCard = () => {
  const { data } = useGetWalletBalance()
  const awaitingIncome = data?.awaitingIncome || 0
  const withdrawableAmount = data?.withdrawable || 0

  const handleWithdraw = () => {
    // TODO: 实现提现功能 - 目前显示提示信息
    // 可以根据需要导航到提现页面或显示提现弹窗
    const withdrawableAmount = data?.withdrawable || 0

    if (withdrawableAmount <= 0) {
      alert('No amount available for withdrawal')
      return
    }

    // 这里可以添加实际的提现逻辑，比如：
    // - 导航到提现页面
    // - 显示提现弹窗
    // - 调用提现 API
  }

  return (
    <div
      className="border-outline-normal flex h-[180px] flex-col items-center justify-center rounded-lg border bg-cover bg-center bg-no-repeat p-6"
      style={{
        backgroundImage: "url('/images/wallet/dashboard-bg.svg')",
      }}
    >
      {/* 内容区域 */}
      <div className="relative flex w-full items-end gap-6">
        {/* Crush Coin Income 部分 */}
        <div className="flex flex-1 flex-col gap-6">
          <div className="txt-title-m">CrushCoin Earnings</div>
          <div className="flex items-center gap-1">
            <Image
              src="/icons/diamond.svg"
              alt="diamond-icon"
              width={24}
              height={24}
              className="mt-2"
            />
            <div className="txt-numDisplay-m">{numeral(withdrawableAmount).format('0,0')}</div>
          </div>
        </div>

        {/* 分隔线 */}
        <div className="bg-outline-normal h-full w-px" />

        {/* Pending 部分 */}
        <div className="flex flex-1 flex-col gap-6">
          <div className="flex items-center gap-2">
            <div className="txt-title-m">Pending</div>
            <Tooltip>
              <TooltipTrigger asChild>
                <IconButton iconfont="icon-question" variant="tertiary" size="mini" />
              </TooltipTrigger>
              <TooltipContent>
                <p>Earnings can be withdrawn 30 days after receipt</p>
              </TooltipContent>
            </Tooltip>
          </div>
          <div className="flex items-center gap-1">
            <Image
              src="/icons/diamond.svg"
              alt="diamond-icon"
              width={24}
              height={24}
              className="mt-2"
            />
            <div className="txt-numDisplay-m">{numeral(awaitingIncome).format('0,0')}</div>
          </div>
        </div>

        {/* Withdraw 按钮 */}
        <button
          onClick={handleWithdraw}
          className="flex h-12 min-w-[128px] items-center justify-center rounded-full bg-black/65 px-8 py-3 backdrop-blur"
        >
          <span className="text-base font-medium text-white">Withdraw</span>
        </button>
      </div>
    </div>
  )
}

export default IncomeCard
