'use client'

import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
} from '../ui/alert-dialog'
import { Button, IconButton } from '../ui/button'
import { cn } from '@/lib/utils'
import Image from 'next/image'
import { Checkbox } from '../ui/checkbox'
import { ChatPriceType, ChatPriceTypeMap, useGetWalletBalance } from '@/hooks/useWallet'
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
import { isChargeDrawerOpenAtom, isCoinInsufficientAtom } from '@/atoms/im'
import { useAtom, useSetAtom } from 'jotai'

// 钻石图标组件
const DiamondIcon = ({ className, size = 16 }: { className?: string; size?: number }) => (
  <Image
    src="/icons/diamond.svg"
    alt="diamond"
    width={size}
    height={size}
    className={cn('shrink-0', className)}
  />
)

// 问号图标组件
const QuestionIcon = ({ className }: { className?: string }) => (
  <Tooltip>
    <TooltipTrigger asChild>
      <IconButton iconfont="icon-question" variant="tertiary" size="mini" />
    </TooltipTrigger>
    <TooltipContent className="max-w-[300px]">
      <div>
        <p>
          The text message price refers to the price of a text message conversation with a
          character, including sending voice, sending pictures, and sending gifts.
        </p>
        <p>
          Voice call message price refers to the price of a voice call conversation with the
          character, calculated by item
        </p>
      </div>
    </TooltipContent>
  </Tooltip>
)

const CoinInsufficientDialog = ({}) => {
  const [isCoinInsufficient, setIsCoinInsufficient] = useAtom(isCoinInsufficientAtom)
  const setIsChargeDrawerOpen = useSetAtom(isChargeDrawerOpenAtom)

  const { data } = useGetWalletBalance()
  const balance = data?.balance || 0

  const handleClose = () => {
    setIsCoinInsufficient(false)
  }

  const handleRecharge = () => {
    setIsChargeDrawerOpen(true)
    handleClose()
  }

  return (
    <>
      <AlertDialog open={isCoinInsufficient} onOpenChange={setIsCoinInsufficient}>
        <AlertDialogContent className="bg-surface-base-normal w-full max-w-[400px] rounded-2xl p-6">
          {/* 标题栏 */}
          <AlertDialogHeader>
            <AlertDialogTitle>Crush Coin insufficient</AlertDialogTitle>
          </AlertDialogHeader>

          {/* 描述文本 */}
          <p className="txt-body-l text-txt-primary-normal mb-4">
            The Crush coin is insufficient and cannot continue to send messages. The charging
            standard of the current model：
          </p>

          {/* 角色扮演模型价格区域 */}
          <div className="bg-surface-element-normal rounded-m mb-4 p-4">
            <div className="mb-3">
              <div className="mb-1 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <h3 className="txt-title-s text-txt-primary-normal">Role-playing model</h3>
                  <QuestionIcon />
                </div>
                <Checkbox checked shape="round" />
              </div>
              <p className="txt-body-m text-txt-secondary-normal">
                Have a role-playing conversation with AI
              </p>
            </div>

            {/* 价格详情 */}
            <div className="bg-surface-district-normal space-y-3 rounded-sm p-3">
              <div className="flex items-center gap-1">
                <DiamondIcon size={16} />
                <span className="txt-label-m text-txt-primary-normal">
                  {ChatPriceTypeMap[ChatPriceType.TEXT]}/Text Message
                </span>
              </div>
              <div className="flex items-center gap-1">
                <DiamondIcon size={16} />
                <span className="txt-label-m text-txt-primary-normal">
                  {ChatPriceTypeMap[ChatPriceType.VOICE]}/Voice Message
                </span>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-1">
                  <DiamondIcon size={16} />
                  <span className="txt-label-m text-txt-primary-normal">
                    {ChatPriceTypeMap[ChatPriceType.VOICE_CALL]}/Voice call message
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* 余额显示 */}
          <div className="mb-6 flex items-center justify-between">
            <span className="txt-label-m text-txt-primary-normal">Your Balance</span>
            <div className="flex items-center gap-1">
              <DiamondIcon size={16} />
              <span className="txt-label-m text-txt-primary-normal">{balance}</span>
            </div>
          </div>

          {/* 按钮组 */}
          <div className="flex items-center justify-end gap-4 border-t-0 pt-4">
            <Button variant="tertiary" size="large" onClick={handleClose}>
              Cancel
            </Button>
            <Button variant="primary" size="large" onClick={handleRecharge}>
              Recharge
            </Button>
          </div>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}

export default CoinInsufficientDialog
