'use client'
import {z} from 'zod'
import {zodResolver} from '@hookform/resolvers/zod'
import {Form, FormField, FormLabel} from '@/components/ui/form'
import {RadioGroup, RadioGroupItem} from '@/components/ui/radio-group'
import {Input} from '@/components/ui/input'
import {Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, SelectValue} from '@/components/ui/select'
import {Button} from '@/components/ui/button'
import {useForm, useFormContext, useWatch} from 'react-hook-form'
import {Alert, AlertTitle} from '@/components/ui/alert'
import {ArrowRight, Box, CircleAlert, CopyIcon, ExternalLinkIcon, LinkIcon, Loader, Plus, Timer} from 'lucide-react'
import {memo, ReactNode, Suspense, use, useEffect, useRef, useState} from 'react'
import {useStatus} from '@/lib/states'
import {allResource, getAreaList} from '@/actions/resource'
import {Resource} from '@/lib/models'
import {format, intlFormatDistance} from 'date-fns'
import {toast} from 'sonner'
import {merge} from '@/lib/utils'
import {Combobox} from '@/components/ui/combobox'
import ExtractDocs from '@/app/(home)/docs/(product)/api-docs/page.md'
import Link from 'next/link'
import {useProfileStore} from '@/components/stores/profile'

const schema = z.object({
  resource: z.string({required_error: '请选择套餐'}),
  prov: z.string().optional(),
  city: z.string().optional(),
  regionType: z.enum(['unlimited', 'specific']).default('unlimited'),
  // isp: z.enum(['all', '1', '2', '3'], {required_error: '请选择运营商'}),
  proto: z.enum(['all', '1', '2'], {required_error: '请选择协议'}),
  authType: z.enum(['1', '2'], {required_error: '请选择认证方式'}),
  distinct: z.enum(['1', '0'], {required_error: '请选择去重选项'}),
  format: z.enum(['text', 'json'], {required_error: '请选择导出格式'}),
  // hostFormat: z.enum(['domain', 'ip'], {required_error: '请选择主机格式'}),
  separator: z.string({required_error: '请选择分隔符'}),
  breaker: z.string({required_error: '请选择换行符'}),
  count: z.number({required_error: '请输入有效的数量'}).min(1),
})

type Schema = z.infer<typeof schema>

type ExtractProps = {
  className?: string
}

export default function Extract(props: ExtractProps) {
  const form = useForm<Schema>({
    resolver: zodResolver(schema),
    defaultValues: {
      regionType: 'unlimited',
      // isp: 'all',
      proto: 'all',
      authType: '1',
      count: 1,
      distinct: '1',
      // hostFormat: 'ip',
      format: 'text',
      breaker: '13,10',
      separator: '124',
    },
  })

  // ======================
  // render
  // ======================

  return (
    <Form
      form={form}
      className={merge(
        `flex flex-col gap-6`,
      )}
    >
      <CardSection>
        <FormFields/>
      </CardSection>

      <CardSection>
        <ApplyLink/>
      </CardSection>

      <CardSection>
        <ExtractDocs/>
      </CardSection>
    </Form>
  )
}

function CardSection(props: {
  children: ReactNode
}) {
  return (
    <div className="flex flex-col gap-4 p-4 md:p-6 bg-white rounded-lg">
      {props.children}
    </div>
  )
}

const FormFields = memo(() => {
  return (
    <div className="flex flex-col gap-6 items-stretch max-w-[calc(160px*4+1rem*3)]">
      {/* 选择套餐 */}
      <Suspense>
        <SelectResource/>
      </Suspense>

      {/* 地区筛选 */}
      <SelectRegion/>

      {/* 运营商筛选 */}
      {/* <FormField name="isp" label="运营商筛选" classNames={{label: 'max-md:text-sm'}}>
        {({id, field}) => (
          <RadioGroup
            onValueChange={field.onChange}
            defaultValue={field.value}
            className="grid grid-cols-2 md:grid-cols-4 gap-4"
          >
            <FormLabel htmlFor={`${id}-v-all`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="all" id={`${id}-v-all`}/>
              <span>不限</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-telecom`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="1" id={`${id}-v-telecom`}/>
              <span>电信</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-mobile`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="2" id={`${id}-v-mobile`}/>
              <span>联通</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-unicom`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="3" id={`${id}-v-unicom`}/>
              <span>移动</span>
            </FormLabel>
          </RadioGroup>
        )}
      </FormField> */}

      {/* 协议类型 */}
      <FormField name="proto" label="协议类型" classNames={{label: 'max-md:text-sm'}}>
        {({id, field}) => (
          <RadioGroup
            onValueChange={field.onChange}
            defaultValue={field.value}
            className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <FormLabel htmlFor={`${id}-v-all`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="all" id={`${id}-v-all`} className="mr-2"/>
              <span>不限</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-http`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="1" id={`${id}-v-http`} className="mr-2"/>
              <span>HTTP</span>
            </FormLabel>
            {/* <FormLabel htmlFor={`${id}-v-https`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="2" id={`${id}-v-https`} className="mr-2"/>
              <span>HTTPS</span>
            </FormLabel> */}
            <FormLabel htmlFor={`${id}-v-socks5`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="2" id={`${id}-v-socks5`} className="mr-2"/>
              <span>SOCKS5</span>
            </FormLabel>
          </RadioGroup>
        )}
      </FormField>

      {/* 认证方式 */}
      <FormField name="authType" className="md:max-w-[calc(160px*2+1rem)]" label="认证方式" classNames={{label: 'max-md:text-sm'}}>
        {({id, field}) => (
          <RadioGroup
            onValueChange={field.onChange}
            defaultValue={field.value}
            className="flex gap-4">
            <FormLabel htmlFor={`${id}-v-http`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="1" id={`${id}-v-http`} className="mr-2"/>
              <span>白名单</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-https`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="2" id={`${id}-v-https`} className="mr-2"/>
              <span>密码</span>
            </FormLabel>
          </RadioGroup>
        )}
      </FormField>

      {/* 去重选项 */}
      <FormField name="distinct" className="md:max-w-[calc(160px*2+1rem)]" label="去重选项" classNames={{label: 'max-md:text-sm'}}>
        {({id, field}) => (
          <RadioGroup
            onValueChange={field.onChange}
            defaultValue={field.value}
            className="flex gap-4">
            <FormLabel htmlFor={`${id}-v-true`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="1" id={`${id}-v-true`} className="mr-2"/>
              <span>去重</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-false`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="0" id={`${id}-v-false`} className="mr-2"/>
              <span>不去重</span>
            </FormLabel>
          </RadioGroup>
        )}
      </FormField>

      {/* 导出格式 */}
      <FormField name="format" className="md:max-w-[calc(160px*2+1rem)]" label="导出格式" classNames={{label: 'max-md:text-sm'}}>
        {({id, field}) => (
          <RadioGroup
            onValueChange={field.onChange}
            defaultValue={field.value}
            className="flex gap-4"
          >
            <FormLabel htmlFor={`${id}-v-txt`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="text" id={`${id}-v-txt`} className="mr-2"/>
              <span>TXT 格式</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-json`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="json" id={`${id}-v-json`} className="mr-2"/>
              <span>JSON 格式</span>
            </FormLabel>
          </RadioGroup>
        )}
      </FormField>

      {/* 主机格式 */}
      {/* <FormField name="hostFormat" className="md:max-w-[calc(160px*2+1rem)]" label="主机格式" classNames={{label: 'max-md:text-sm'}}>
        {({id, field}) => (
          <RadioGroup
            onValueChange={field.onChange}
            defaultValue={field.value}
            className="flex gap-4"
          >
            <FormLabel htmlFor={`${id}-v-ip`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="ip" id={`${id}-v-ip`} className="mr-2"/>
              <span>IP</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-domain`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="domain" id={`${id}-v-domain`} className="mr-2"/>
              <span>域名</span>
            </FormLabel>
          </RadioGroup>
        )}
      </FormField> */}

      {/* 分隔符 */}
      <FormField name="separator" className="md:max-w-[calc(160px*3+1rem*2)]" label="分隔符" classNames={{label: 'max-md:text-sm'}}>
        {({id, field}) => (
          <RadioGroup
            onValueChange={field.onChange}
            defaultValue={field.value}
            className="grid grid-cols-2 md:grid-cols-3 gap-4">
            <FormLabel htmlFor={`${id}-v-comma`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="124" id={`${id}-v-comma`} className="mr-2"/>
              <span>竖线 ( | )</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-semicolon`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="58" id={`${id}-v-semicolon`} className="mr-2"/>
              <span>冒号 ( : )</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-space`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="9" id={`${id}-v-space`} className="mr-2"/>
              <span>制表符 (\t)</span>
            </FormLabel>
          </RadioGroup>
        )}
      </FormField>

      {/* 换行符 */}
      <FormField name="breaker" className="md:max-w-[calc(160px*3+1rem*2)]" label="换行符" classNames={{label: 'max-md:text-sm'}}>
        {({id, field}) => (
          <RadioGroup
            onValueChange={field.onChange}
            defaultValue={field.value}
            className="grid grid-cols-2 md:grid-cols-3 gap-4">
            <FormLabel htmlFor={`${id}-v-newline2`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="13,10" id={`${id}-v-newline2`} className="mr-2"/>
              <span>回车换行 (\r\n)</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-newline`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="10" id={`${id}-v-newline`} className="mr-2"/>
              <span>换行 (\n)</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-newline3`} className="px-3 h-10 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="13" id={`${id}-v-newline3`} className="mr-2"/>
              <span>回车 (\r)</span>
            </FormLabel>
          </RadioGroup>
        )}
      </FormField>

      {/* 提取数量 */}
      <FormField
        name="count"
        className="max-w[160px*2+1rem]"
        label="提取数量"
        classNames={{label: 'max-md:text-sm'}}
      >
        {({id, field}) => (
          <div className="flex gap-2 items-center">
            {/* 减号按钮：移动端显示，步长1，最小1 */}
            <Button
              theme="outline"
              type="button"
              className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
              onClick={() => field.onChange(Math.max(1, Number(field.value) - 1))}
              disabled={Number(field.value) === 1}
            >
              -
            </Button>

            {/* 数量输入框 */}
            <Input
              {...field}
              id={id}
              type="number"
              min={1}
              step={1}
              className="w-40 h-10 border border-gray-200 rounded-sm text-center"
              placeholder="输入提取数量"
              onChange={(e) => {
                const value = Math.max(1, Number(e.target.value) || 1)
                field.onChange(value)
              }}
            />

            {/* 加号按钮：移动端显示，步长1 */}
            <Button
              theme="outline"
              type="button"
              className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
              onClick={() => field.onChange(Number(field.value) + 1)}
            >
              +
            </Button>
          </div>
        )}
      </FormField>
    </div>
  )
})
FormFields.displayName = 'FormFields'

function SelectResource() {
  const [resources, setResources] = useState<Resource[]>([])
  const [status, setStatus] = useStatus()
  const profile = use(useProfileStore(store => store.profile))
  const getResources = async () => {
    if (!profile) {
      setStatus('done')
      setResources([])
      return
    }
    setStatus('load')
    try {
      const resp = await allResource()
      if (!resp.success) {
        throw new Error('获取套餐失败，请稍后再试')
      }
      setResources(resp.data ?? [])
      setStatus('done')
    }
    catch (error) {
      toast.error((error as Error).message)
      setStatus('fail')
    }
  }

  useEffect(() => {
    getResources().then()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [profile])

  return (
    <FormField name="resource" className="md:max-w-[calc(160px*2+1rem)]" label="选择套餐" classNames={{label: 'max-md:text-sm'}}>
      {({field}) => (
        <Select
          value={field.value ? String(field.value) : undefined}
          onValueChange={value => field.onChange(value)}
        >
          <SelectTrigger className="min-h-10 h-auto w-full">
            <SelectValue placeholder="选择套餐"/>
          </SelectTrigger>
          <SelectContent>
            {status === 'load' ? (
              <div className="p-4 flex gap-1 items-center">
                <Loader className="animate-spin" size={20}/>
                <span>加载中...</span>
              </div>
            ) : !profile ? (
              <div className="p-4 flex gap-1 items-center">
                <span className="text-gray-600">请先登录账号，<Link href="/login" className="text-blue-600 hover:text-blue-700 font-medium">去登录</Link></span>
              </div>
            ) : resources.length === 0 ? (
              <div className="p-4 flex gap-1 items-center">
                <span>暂无可用套餐</span>
              </div>
            ) : (
              <>
                {resources.map(resource => (
                  <SelectItem
                    key={resource.id}
                    value={String(resource.resource_no)}
                    className="p-3">
                    <div className="flex flex-col gap-2 w-72">
                      {resource.type === 1 && resource.short.type === 1 && (
                        <>
                          <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm">
                            <Timer size={20}/>
                            <span>{name(resource)}</span>
                          </div>
                          <div className="flex text-xs text-weak">
                            <span>{resource.resource_no}</span>
                          </div>
                          <div className="flex justify-between gap-2 text-xs text-weak">
                            <span>
                              到期时间：
                              {format(resource.short.expire_at, 'yyyy-MM-dd HH:mm:ss')}
                            </span>
                            <span>{intlFormatDistance(resource.short.expire_at, new Date())}</span>
                          </div>
                        </>
                      )}
                      {resource.type === 1 && resource.short.type === 2 && (
                        <>
                          <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm">
                            <Box size={20}/>
                            <span>{name(resource)}</span>
                          </div>
                          <div className="flex text-xs text-weak">
                            <span>{resource.resource_no}</span>
                          </div>
                          <div className="flex justify-between gap-2 text-xs text-weak">
                            <span>
                              提取数量：
                              {resource.short.used}
                              {' '}
                              /
                              {resource.short.quota}
                            </span>
                            <span>
                              剩余
                              {resource.short.quota - resource.short.used}
                            </span>
                          </div>
                        </>
                      )}
                      {resource.type === 2 && resource.long.type === 1 && (
                        <>
                          <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm">
                            <Timer size={20}/>
                            <span>{name(resource)}</span>
                          </div>
                          <div className="flex text-xs text-weak">
                            <span>{resource.resource_no}</span>
                          </div>
                          <div className="flex justify-between gap-2 text-xs text-weak">
                            <span>
                              到期时间：
                              {format(resource.long.expire_at, 'yyyy-MM-dd HH:mm:ss')}
                            </span>
                            <span>{intlFormatDistance(resource.long.expire_at, new Date())}</span>
                          </div>
                        </>
                      )}
                      {resource.type === 2 && resource.long.type === 2 && (
                        <>
                          <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm">
                            <Box size={20}/>
                            <span>{name(resource)}</span>
                          </div>
                          <div className="flex text-xs text-weak">
                            <span>{resource.resource_no}</span>
                          </div>
                          <div className="flex justify-between gap-2 text-xs text-weak">
                            <span>
                              提取数量：
                              {resource.long.used}
                              {' '}
                              /
                              {resource.long.quota}
                            </span>
                            <span>
                              剩余
                              {resource.long.quota - resource.long.used}
                            </span>
                          </div>
                        </>
                      )}
                    </div>
                  </SelectItem>
                ))}
              </>
            )}
          </SelectContent>
        </Select>
      )}
    </FormField>
  )
}

type AreaItem = {
  id: number
  parent_id: number
  level: number
  name: string
  created_at: string
  updated_at: string
}

function AreaTree(flatList: AreaItem[]) {
  const provinces = flatList.filter(item => item.level === 1)
  const cities = flatList.filter(item => item.level === 2)

  return provinces.map(prov => ({
    value: String(prov.id),
    label: prov.name,
    children: cities
      .filter(city => city.parent_id === prov.id)
      .map(city => ({
        value: String(city.id),
        label: city.name,
      })),
  }))
}

function SelectRegion() {
  const {control, setValue} = useFormContext<Schema>()
  const regionType = useWatch({control, name: 'regionType'})
  const prov = useWatch({control, name: 'prov'})
  const city = useWatch({control, name: 'city'})
  const [options, setOptions] = useState<ReturnType<typeof AreaTree>>([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    if (regionType === 'specific') {
      const fetchData = async () => {
        setLoading(true)
        try {
          const req = await getAreaList({})
          console.log(req, 'req')

          if (req.success && req.data) {
            setOptions(AreaTree(req.data))
          }
        }
        catch (error) {
          toast.error('无法选择区域')
        }
        finally {
          setLoading(false)
        }
      }

      fetchData()
    }
  }, [regionType])

  return (
    <div className="flex flex-col gap-4 md:max-w-[calc(160px*2+1rem)]">
      <FormField name="regionType" label="地区筛选" classNames={{label: 'max-md:text-sm'}}>
        {({id, field}) => (
          <RadioGroup
            onValueChange={(e) => {
              field.onChange(e)
              if (e === 'unlimited') {
                setValue('prov', '')
                setValue('city', '')
              }
            }}
            defaultValue={field.value}
            className="flex gap-4"
          >
            <FormLabel htmlFor={`${id}-v-unlimited`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="unlimited" id={`${id}-v-unlimited`} className="mr-2"/>
              <span>不限地区</span>
            </FormLabel>
            <FormLabel htmlFor={`${id}-v-specific`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
              <RadioGroupItem value="specific" id={`${id}-v-specific`} className="mr-2"/>
              <span>指定地区</span>
            </FormLabel>
          </RadioGroup>
        )}
      </FormField>

      {regionType === 'specific' && (
        loading ? (
          <div className="flex gap-2 items-center">
            <Loader className="animate-spin" size={16}/>
            <span className="text-sm text-weak">加载地区数据中...</span>
          </div>
        ) : (
          <Combobox
            placeholder="请选择地区"
            options={options}
            value={[prov || '', city || '']}
            onChange={(value) => {
              setValue('prov', value[0] || '')
              setValue('city', value[1] || '')
            }}
          />
        )
      )}
    </div>
  )
}

function ApplyLink() {
  const form = useFormContext<Schema>()
  useWatch()

  // let type: 'open' | 'copy' = 'open'
  const type = useRef<'open' | 'copy'>('open')
  const handler = form.handleSubmit(
    // eslint-disable-next-line react-hooks/refs
    async (values: z.infer<typeof schema>) => {
      const params = link(values)

      switch (type.current) {
      case 'copy':
        const url = new URL(window.location.href).origin
        const text = `${url}${params}`

        // 使用 clipboard API 复制链接
        let copied = false
        try {
          await navigator.clipboard.writeText(text)
          copied = true
        }
        catch (e) {
          console.log('剪贴板 API 调用失败，尝试备选方案')
        }

        // 使用 document.execCommand 作为备选方案
        if (!copied) {
          const textarea = document.createElement('textarea')
          textarea.value = text
          document.body.appendChild(textarea)
          textarea.select()
          document.execCommand('copy')
          document.body.removeChild(textarea)
        }

        toast.success('链接已复制到剪贴板')
        break
      case 'open':
        window.open(params, '_blank')
        break
      }
    },
    (errors) => {
      const desc: (string | undefined)[] = []
      Object.entries(errors).forEach(([field, error]) => {
        if (error.message) {
          desc.push(error.message)
        }
      })
      toast.error('请完成填写：', {
        description: desc.map((msg, i) => (
          <span key={i}>
            -
            {msg}
          </span>
        )),
      })
    },
  )

  const submit = (t: 'open' | 'copy') => {
    type.current = t
    handler()
  }

  return (
    <div className="flex flex-col gap-3 rounded-lg">
      <Alert variant="warn" className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <CircleAlert className="size-4 shrink-0"/>
          <AlertTitle className="text-orange-600">
            提取 IP 前需要将本机 IP 添加到白名单后才可使用
          </AlertTitle>
        </div>
        <Link href="/admin/whitelist" className="flex-none text-orange-600 font-medium flex items-center gap-1">
          <span>添加白名单</span>
          <ArrowRight className="size-4"/>
        </Link>
      </Alert>

      <Alert className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <CircleAlert className="size-4 shrink-0"/>
          <AlertTitle>端口同时支持 socks5 和 http 协议</AlertTitle>
        </div>
        <div className="w-[88px]"/>
      </Alert>
      <h4 className="text-base font-medium">API 链接</h4>

      <div className="bg-gray-100 rounded-md p-4 break-all font-mono text-sm">
        {link(form.getValues())}
      </div>

      <div className="flex gap-3">
        <Button type="button" onClick={() => submit('copy')} className="gap-1">
          <CopyIcon className="size-4"/>
          <span>复制链接</span>
        </Button>
        <Button type="button" onClick={() => submit('open')} className="gap-1">
          <ExternalLinkIcon className="size-4"/>
          <span>打开链接</span>
        </Button>
      </div>
    </div>
  )
}

function link(values: Schema) {
  const {resource, prov, city, proto, authType, distinct, format: formatType, separator, breaker, count} = values
  console.log(values, 'values')

  const sp = new URLSearchParams()
  if (resource) sp.set('i', String(resource))
  if (authType) sp.set('t', authType)
  if (proto != 'all') sp.set('x', proto)
  if (prov) sp.set('b', prov)
  if (city) sp.set('b', city)

  sp.set('s', 'all')
  sp.set('d', distinct)
  sp.set('rt', formatType)
  sp.set('rh', 'ip')
  sp.set('rs', separator)
  sp.set('rb', breaker)
  sp.set('n', String(count))

  return `/proxies?${sp.toString()}`
}

function name(resource: Resource) {
  switch (resource.type) {
  case 1:
    // 短效套餐
    switch (resource.short.type) {
    case 1:
      return `${resource.short?.sku?.name}`
    case 2:
      return `${resource.short?.sku?.name}`
    }
    break

  case 2:
    // 长效套餐
    switch (resource.long.type) {
    case 1:
      return `${resource.long?.sku?.name}`
    case 2:
      return `${resource.long?.sku?.name}`
    }
    break
  }
}
