'use client'
import {FormField} from '@/components/ui/form'
import {RadioGroup} from '@/components/ui/radio-group'
import {Input} from '@/components/ui/input'
import {Button} from '@/components/ui/button'
import {Minus, Plus} from 'lucide-react'
import FormOption from '@/components/composites/purchase/option'
import Image from 'next/image'
import check from '../_assets/check.svg'
import {Schema} from '@/components/composites/purchase/long/form'
import {useFormContext} from 'react-hook-form'
import {Card} from '@/components/ui/card'

export default function Center() {
  const form = useFormContext<Schema>()
  const type = form.watch('type')

  return (
    <Card className="flex-auto p-6 flex flex-col gap-6 relative">

      {/* 计费方式 */}
      <FormField
        className="flex flex-col gap-4"
        name="type"
        label="计费方式">
        {({id, field}) => (
          <RadioGroup
            id={id}
            defaultValue={field.value}
            onValueChange={field.onChange}
            className="flex gap-4 max-md:flex-col">

            <FormOption
              id={`${id}-2`}
              value="2"
              label="包量套餐"
              description="适用于短期或不定期高提取业务场景"
              compare={field.value}/>

            <FormOption
              id={`${id}-1`}
              value="1"
              label="包时套餐"
              description="适用于每日提取量稳定的业务场景"
              compare={field.value}/>

          </RadioGroup>
        )}
      </FormField>

      {/* IP 时效 */}
      <FormField
        className="space-y-4"
        name="live"
        label="IP 时效">
        {({id, field}) => (
          <RadioGroup
            id={id}
            defaultValue={field.value}
            onValueChange={field.onChange}
            className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">

            <FormOption id={`${id}-1`} value="1" label="1 小时" description="￥0.3/IP" compare={field.value}/>
            <FormOption id={`${id}-4`} value="4" label="4 小时" description="￥0.8/IP" compare={field.value}/>
            <FormOption id={`${id}-8`} value="8" label="8 小时" description="￥1.2/IP" compare={field.value}/>
            <FormOption id={`${id}-12`} value="12" label="12 小时" description="￥1.8/IP" compare={field.value}/>
            <FormOption id={`${id}-24`} value="24" label="24 小时" description="￥3.5/IP" compare={field.value}/>
          </RadioGroup>
        )}
      </FormField>

      {/* 根据套餐类型显示不同表单项 */}
      {type === '2' ? (
        /* 包量：IP 购买数量 */
        <FormField
          className="space-y-4"
          name="quota"
          label="IP 购买数量">
          {({id, field}) => {
            const value = Number(field.value) || 500
            const minValue = 500
            const step = 100
            return (
              <div className="flex gap-2 items-center">
                <Button
                  theme="outline"
                  type="button"
                  className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
                  onClick={() => form.setValue('quota', Math.max(minValue, value - step))}
                  disabled={value === minValue}>
                  <Minus/>
                </Button>
                <Input
                  {...field}
                  id={id}
                  type="number"
                  className="w-40 h-10 border border-gray-200 rounded-sm text-center"
                  min={minValue}
                  step={step}
                />
                <Button
                  theme="outline"
                  type="button"
                  className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
                  onClick={() => form.setValue('quota', value + step)}>
                  <Plus/>
                </Button>
              </div>
            )
          }}
        </FormField>
      ) : (
        <>
          {/* 包时：套餐时效 */}
          <FormField
            className="space-y-4"
            name="expire"
            label="套餐时效">
            {({id, field}) => (
              <RadioGroup
                id={id}
                defaultValue={field.value}
                onValueChange={field.onChange}
                className="flex gap-4 flex-wrap">

                <FormOption id={`${id}-7`} value="7" label="7天" compare={field.value}/>
                <FormOption id={`${id}-15`} value="15" label="15天" compare={field.value}/>
                <FormOption id={`${id}-30`} value="30" label="30天" compare={field.value}/>
                <FormOption id={`${id}-90`} value="90" label="90天" compare={field.value}/>
                <FormOption id={`${id}-180`} value="180" label="180天" compare={field.value}/>
                <FormOption id={`${id}-365`} value="365" label="365天" compare={field.value}/>
              </RadioGroup>
            )}
          </FormField>

          {/* 包时：每日提取上限 */}
          <FormField
            className="space-y-4"
            name="daily_limit"
            label="每日提取上限">
            {({id, field}) => {
              const value = Number(field.value) || 100
              const minValue = 100
              const step = 100

              return (
                <div className="flex gap-2 items-center">
                  <Button
                    theme="outline"
                    type="button"
                    className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg ${
                      value === minValue ? 'opacity-50 cursor-not-allowed' : ''
                    }`}
                    onClick={() => form.setValue('daily_limit', Math.max(minValue, value - step))}
                    disabled={value === minValue}>
                    <Minus/>
                  </Button>

                  <div className="w-40 h-10 border border-gray-200 rounded-sm flex items-center justify-center">
                    {value}
                  </div>

                  <Button
                    theme="outline"
                    type="button"
                    className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
                    onClick={() => form.setValue('daily_limit', value + step)}>
                    <Plus/>
                  </Button>
                </div>
              )
            }}
          </FormField>
        </>
      )}

      {/* 产品特性 */}
      <div className="space-y-6">
        <h3>产品特性</h3>
        <div className="grid grid-cols-2 md:grid-cols-3 auto-rows-fr gap-4 gap-y-6">
          <p className="flex gap-2 items-center">
            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
            <span className="text-sm text-gray-500">支持高并发提取</span>
          </p>
          <p className="flex gap-2 items-center">
            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
            <span className="text-sm text-gray-500">指定省份、城市或混播</span>
          </p>
          <p className="flex gap-2 items-center">
            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
            <span className="text-sm text-gray-500">账密＋白名单验证</span>
          </p>
          <p className="flex gap-2 items-center">
            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
            <span className="text-sm text-gray-500">完备的API接口</span>
          </p>
          <p className="flex gap-2 items-center">
            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
            <span className="text-sm text-gray-500">IP时效3-30分钟(可定制)</span>
          </p>
          <p className="flex gap-2 items-center">
            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
            <span className="text-sm text-gray-500">IP资源定期筛选</span>
          </p>
          <p className="flex gap-2 items-center">
            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
            <span className="text-sm text-gray-500">完备的API接口</span>
          </p>
          <p className="flex gap-2 items-center">
            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
            <span className="text-sm text-gray-500">包量/包时计费方式</span>
          </p>
          <p className="flex gap-2 items-center">
            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
            <span className="text-sm text-gray-500">每日去重量：500万</span>
          </p>
        </div>
      </div>
    </Card>
  )
}
