'use client'
import {Suspense, use, useEffect, useMemo, useState} from 'react'
import {Schema} from '@/components/composites/purchase/short/form'
import {RadioGroup} from '@/components/ui/radio-group'
import {FormField} from '@/components/ui/form'
import FormOption from '@/components/composites/purchase/option'
import Image from 'next/image'
import alipay from '../_assets/alipay.svg'
import wechat from '../_assets/wechat.svg'
import balance from '../_assets/balance.svg'
import {useProfileStore} from '@/components/stores/profile'
import RechargeModal from '@/components/composites/recharge'
import {buttonVariants} from '@/components/ui/button'
import Link from 'next/link'
import {merge} from '@/lib/utils'
import Pay from '@/components/composites/purchase/pay'
import {useFormContext, useWatch} from 'react-hook-form'
import {Card} from '@/components/ui/card'
import {CreateResourceReq, getPrice} from '@/actions/resource'
import {ExtraResp} from '@/lib/api'

export default function Right() {
  const {control} = useFormContext<Schema>()
  const method = useWatch({control, name: 'pay_type'})
  const live = useWatch({control, name: 'live'})
  const mode = useWatch({control, name: 'type'})
  const expire = useWatch({control, name: 'expire'})
  const quota = useWatch({control, name: 'quota'})
  const dailyLimit = useWatch({control, name: 'daily_limit'})
  const [priceData, setPriceData] = useState<ExtraResp<typeof getPrice>>({
    price: '0.00',
    discounted_price: '0.00',
    discounted: 0,
  })

  useEffect(() => {
    const price = async () => {
      try {
        const priceResponse = await getPrice({
          type: 1,
          short: {
            live: Number(live),
            mode: Number(mode),
            quota: mode === '1' ? Number(dailyLimit) : Number(quota),
            expire: mode === '1' ? Number(expire) : undefined,
          },
        })
        if (!priceResponse.success) {
          throw new Error('获取价格失败')
        }

        const data = priceResponse.data
        setPriceData({
          price: data.price,
          discounted_price: data.discounted_price ?? data.price ?? '',
          discounted: data.discounted,
        })
      }
      catch (error) {
        console.error('获取价格失败:', error)
        setPriceData({
          price: '0.00',
          discounted_price: '0.00',
          discounted: 0,
        })
      }
    }
    price()
  }, [expire, live, quota, mode, dailyLimit])

  const {price, discounted_price: discountedPrice = '', discounted} = priceData

  return (
    <Card className={merge(
      `flex-none basis-90 p-6 flex flex-col gap-6 relative`,
    )}>
      <h3>订单详情</h3>
      <ul className="flex flex-col gap-3">
        <li className="flex justify-between items-center">
          <span className="text-sm text-gray-500">套餐名称</span>
          <span className="text-sm">
            {mode === '2' ? `包量套餐` : `包时套餐`}
          </span>
        </li>
        <li className="flex justify-between items-center">
          <span className="text-sm text-gray-500">IP 时效</span>
          <span className="text-sm">
            {Number(live) / 60}
            {' '}
            分钟
          </span>
        </li>
        {mode === '2' ? (
          <>
            <li className="flex justify-between items-center">
              <span className="text-sm text-gray-500">购买 IP 量</span>
              <span className="text-sm">
                {quota}
                个
              </span>
            </li>
            <li className="flex justify-between items-center">
              <span className="text-sm text-gray-500">实价</span>
              <span className="text-sm">
                ￥{price}
              </span>
            </li>
          </>
        ) : (
          <>
            <li className="flex justify-between items-center">
              <span className="text-sm text-gray-500">套餐时长</span>
              <span className="text-sm">
                {expire}
                天
              </span>
            </li>
            <li className="flex justify-between items-center">
              <span className="text-sm text-gray-500">每日限额</span>
              <span className="text-sm">
                {dailyLimit}
                个
              </span>
            </li>
            <li className="flex justify-between items-center">
              <span className="text-sm text-gray-500">原价</span>
              <span className="text-sm">
                ￥{price}
              </span>
            </li>
            {discounted === 1 ? '' : (
              <li className="flex justify-between items-center">
                <span className="text-sm text-gray-500">总折扣</span>
                <span className="text-sm">
                  -￥{discounted === 1 ? '' : discounted}
                </span>
              </li>
            )}
          </>
        )}
      </ul>
      <div className="border-b border-gray-200"></div>
      <p className="flex justify-between items-center">
        <span>实付价格</span>
        <span className="text-xl text-orange-500">
          ￥{discountedPrice}
        </span>
      </p>
      <Suspense>
        <BalanceOrLogin {...{method, discountedPrice, mode, live, quota, expire, dailyLimit}}/>
      </Suspense>
    </Card>
  )
}

function BalanceOrLogin(props: {
  method: 'wechat' | 'alipay' | 'balance'
  discountedPrice: string
  mode: string
  live: string
  quota: number
  expire: string
  dailyLimit: number
}) {
  const profile = use(useProfileStore(store => store.profile))
  return profile ? (
    <>
      <FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
        {({id, field}) => (
          <RadioGroup
            id={id}
            defaultValue={field.value}
            onValueChange={field.onChange}
            className="flex flex-col gap-3">

            {/* <div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
              <p className="flex items-center gap-3">
                <Image src={balance} alt="余额icon"/>
                <span className="text-sm text-gray-500">账户余额</span>
              </p>
              <p className="flex justify-between items-center">
                <span className="text-xl">{profile.balance}</span>
                <RechargeModal/>
              </p>
            </div> */}

            {/* <FormOption
              id={`${id}-balance`}
              value="balance"
              compare={field.value}
              className="p-3 w-full flex-row gap-2 justify-center">
              <Image src={balance} alt="余额 icon"/>
              <span>余额</span>
            </FormOption> */}
            <FormOption
              id={`${id}-wechat`}
              value="wechat"
              compare={field.value}
              className="p-3 w-full flex-row gap-2 justify-center">
              <Image src={wechat} alt="微信 logo"/>
              <span>微信</span>
            </FormOption>
            <FormOption
              id={`${id}-alipay`}
              value="alipay"
              compare={field.value}
              className="p-3 w-full flex-row gap-2 justify-center">
              <Image src={alipay} alt="支付宝 logo"/>
              <span>支付宝</span>
            </FormOption>
          </RadioGroup>
        )}
      </FormField>
      <Pay
        method={props.method}
        balance={profile.balance}
        amount={props.discountedPrice}
        resource={{
          type: 1,
          short: {
            mode: Number(props.mode),
            live: Number(props.live),
            expire: Number(props.expire),
            quota: props.mode === '1' ? props.dailyLimit : props.quota,
          },
        }}/>
    </>
  ) : (
    <Link href="/login" className={buttonVariants()}>
      登录后支付
    </Link>
  )
}
