web/src/app/admin/profile/page.tsx

'use client'
import {useEffect, useRef, useState} from 'react'
import Page from '@/components/page'
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card'
import {Form, FormField} from '@/components/ui/form'
import {Button} from '@/components/ui/button'
import {useForm} from 'react-hook-form'
import {zodResolver} from '@hookform/resolvers/zod'
import * as z from 'zod'
import {useProfileStore} from '@/components/providers/StoreProvider'
import {toast} from 'sonner'
import {CheckCircle, QrCodeIcon} from 'lucide-react'
import * as qrcode from 'qrcode'
import Image from 'next/image'
import banner from '@/app/admin/identify/_assets/banner.webp'
import {Input} from '@/components/ui/input'
import {merge} from '@/lib/utils'
import {User} from '@/lib/models'
import {update, updatePassword} from '@/actions/user'
import {
  Dialog, DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import {sendSMS} from '@/actions/verify'
import RechargeModal from '@/components/composites/recharge'
import {useRouter} from 'next/navigation'

export type ProfilePageProps = {}

export default function ProfilePage(props: ProfilePageProps) {
  const router = useRouter()
  const profile = useProfileStore(store => store.profile)

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

  if (!profile) {
    return (
      <Page>
        <div className="flex flex-col gap-4">
          <h3 className="text-lg font-bold">加载中...</h3>
          <p className="text-sm text-gray-600">请稍等片刻</p>
        </div>
      </Page>
    )
  }

  return (
    <Page className="lg:flex-row lg:items-stretch md:flex-col max-sm:flex-col">
      <div className="flex-3/4 flex flex-col gap-4">
        {/* banner */}
        <section className="flex-none relative  rounded-lg p-16 pr-4 overflow-hidden flex max-sm:flex-col flex-col gap-4 pl-8 justify-center">
          <Image src={banner} alt="背景图" aria-hidden className="absolute inset-0 w-full h-full object-cover"/>
          <h3 className="text-lg font-bold z-10 relative">蓝狐HTTP邀请您参与【先测后买】服务</h3>
          <p className="text-sm  text-gray-600 z-10 relative">为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
        </section>

        {/* 块信息 */}
        <div className="flex gap-4  max-md:flex-col max-sm:flex-col">

          <Card className="flex-1 ">
            <CardHeader>
              <CardTitle className="font-normal">帐号余额（元）</CardTitle>
            </CardHeader>
            <CardContent className="flex-auto flex justify-between items-center px-8">
              <p className="text-xl">{profile?.balance}</p>
              <RechargeModal classNames={{
                trigger: `h-10 px-6`,
              }}/>
            </CardContent>
          </Card>

          <Card className="flex-1">
            <CardHeader>
              <CardTitle className="font-normal">实名认证</CardTitle>
            </CardHeader>
            <CardContent className="flex-auto flex justify-between items-center gap-4 px-4 pr-8">
              {!profile?.id_token
                ? (
                  <>
                    <p className="text-sm">为了保障您的账户安全和正常使用服务，请您尽快完成实名认证</p>
                    <Button theme="outline" className="w-24" onClick={() => router.push('/admin/identify')}>去认证</Button>
                  </>
                )
                : (
                  <>
                    <p className="flex flex-col gap-1">
                      <span>{profile.name}</span>
                      <span className="text-sm">{profile.id_no}</span>
                    </p>
                    <p className="flex gap-1 items-center">
                      <CheckCircle className="text-done" size={18}/>
                      <span>已认证</span>
                    </p>
                  </>
                )}
            </CardContent>
          </Card>
        </div>

        <div className="flex-none rounded-lg bg-white p-4  flex max-sm:flex-col flex-col gap-8">

          {/* 安全信息 */}
          <div className="flex flex-col gap-4">
            <h3 className="font-normal">安全信息</h3>
            <div className="flex gap-4 items-center">
              <p>{profile.phone}</p>
              <PasswordForm profile={profile}/>
            </div>
          </div>

          {/* 基本信息 */}
          <BasicForm profile={profile}/>
        </div>
      </div>

      {/* 侧边栏：客服经理信息 */}
      <Aftersale profile={profile}/>

    </Page>
  )
}

function Aftersale(props: {
  profile: User
}) {
  const admin = props.profile.admin_id
  const canvasRef = useRef(null)

  useEffect(() => {
    if (admin && canvasRef.current) {
      qrcode.toCanvas(canvasRef.current, String(admin), {
        width: 180,
        margin: 0,
      }).catch((err) => {
        console.error(err)
      })
    }
  }, [admin])

  return (
    <Card className="flex-none max-sm:flex-col">
      <CardHeader>
        <CardTitle>
          <QrCodeIcon size={18}/>
          关于售后
        </CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-8">

        <div className="flex flex-col gap-4">
          <p className="text-weak text-sm">
            1.全国100万+动态IP代理资源免费测试，先测后买让您安心使用。
          </p>

          <p className="text-weak text-sm">
            2.注册即享新人福利，专业的客户经理，多维度为您提供在线代理相关答疑
          </p>

          <p className="text-weak text-sm">
            3.1V1专属售后答疑，技术团队7*24小时在线支持提供专属解决方案
          </p>
        </div>

        <div className="flex flex-col gap-4 items-center">
          <p>您的专属客服经理</p>
          <div>
            <canvas ref={canvasRef} width="180" height="180" className="mx-auto bg-muted"/>
          </div>
          <p className="text-xs text-weak">
            扫描上方二维码添加客服经理微信
            <br/>
            获取更多帮助与支持
          </p>
        </div>
      </CardContent>
    </Card>
  )
}

function BasicForm(props: {
  profile: User
}) {
  const schema = z.object({
    username: z.string(),
    email: z.string().email('请输入正确的邮箱'),
    contact_qq: z.string(),
    contact_wechat: z.string(),
  })
  type Schema = z.infer<typeof schema>
  const form = useForm<Schema>({
    resolver: zodResolver(schema),
    defaultValues: {
      username: props.profile.username || '',
      email: props.profile.email || '',
      contact_qq: props.profile.contact_qq || '',
      contact_wechat: props.profile.contact_wechat || '',
    },
  })
  const handler = form.handleSubmit(async (value) => {
    try {
      const resp = await update(value)
      if (!resp.success) {
        throw new Error(resp.message)
      }

      await refreshProfile()
      toast.success(`保存成功`)
    }
    catch (e) {
      console.error(e)
      toast.error(`保存失败`, {
        description: e instanceof Error ? e.message : String(e),
      })
    }
  })

  const refreshProfile = useProfileStore(store => store.refreshProfile)

  return (
    <div className="flex flex-col gap-4 flex-1 w-full">
      <h3 className="font-normal">基本信息</h3>
      <Form
        form={form}
        handler={handler}
        className={merge(
          `grid grid-cols-2 gap-4 max-md:grid-cols-1 items-start`,
        )}
      >
        <FormField<Schema>
          name="username"
          label={<span className="w-full flex justify-end">用户名</span>}
          className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
          classNames={{
            message: `col-start-2`,
          }}
        >
          {({field}) => (
            <Input {...field} placeholder="请输入用户名" className="w-48 max-xl:w-full"/>
          )}
        </FormField>
        <FormField<Schema>
          name="email"
          label={<span className="w-full flex justify-end">邮箱</span>}
          className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
          classNames={{
            message: `col-start-2`,
          }}
        >
          {({field}) => (
            <Input {...field} placeholder="请输入邮箱" className="w-48 max-xl:w-full"/>
          )}
        </FormField>
        <FormField<Schema>
          name="contact_qq"
          label={<span className="w-full flex justify-end">QQ</span>}
          className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
          classNames={{
            message: `col-start-2`,
          }}
        >
          {({field}) => (
            <Input {...field} placeholder="请输入QQ号" className="w-48 max-xl:w-full"/>
          )}
        </FormField>
        <FormField<Schema>
          name="contact_wechat"
          label={<span className="w-full flex justify-end">微信</span>}
          className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
          classNames={{
            message: `col-start-2`,
          }}
        >
          {({field}) => (
            <Input {...field} placeholder="请输入微信号" className="w-48 max-xl:w-full"/>
          )}
        </FormField>
        <div className="flex justify-end gap-4 md:col-span-2  justify-self-stretch">
          <Button
            theme="outline"
            type="button"
            onClick={() => form.reset({
              username: props.profile.username || '',
              email: props.profile.email || '',
              contact_qq: props.profile.contact_qq || '',
              contact_wechat: props.profile.contact_wechat || '',
            })}>
            撤销
          </Button>
          <Button>保存</Button>
        </div>
      </Form>
    </div>
  )
}

function PasswordForm(props: {
  profile: User
}) {
  // ======================
  // open
  // ======================

  const [open, setOpen] = useState(false)

  // ======================
  // form
  // ======================

  const schema = z.object({
    phone: z.string().regex(/^1\d{10}$/, `请输入正确的手机号`),
    captcha: z.string().nonempty('请输入验证码'),
    code: z.string().regex(/^\d{6}$/, `请输入正确的验证码`),
    password: z.string().min(6, `密码至少6位`),
    confirm_password: z.string(),
  }).refine(data => data.password === data.confirm_password, {
    message: '两次输入的密码不一致',
    path: ['confirm_password'],
  })
  type Schema = z.infer<typeof schema>

  const form = useForm<Schema>({
    resolver: zodResolver(schema),
    defaultValues: {
      phone: '',
      captcha: '',
      code: '',
      password: '',
      confirm_password: '',
    },
  })
  const handler = form.handleSubmit(async (value) => {
    try {
      const resp = await updatePassword({
        phone: value.phone,
        code: value.code,
        password: value.password,
      })
      if (!resp.success) {
        throw new Error(resp.message)
      }

      toast.success(`保存成功`)
      setOpen(false)
    }
    catch (e) {
      console.error(e)
      toast.error(`保存失败`, {
        description: e instanceof Error ? e.message : String(e),
      })
    }
  })

  // ======================
  // phone code
  // ======================

  const [captchaUrl, setCaptchaUrl] = useState(`/captcha?t=${new Date().getTime()}`)
  const [captchaWait, setCaptchaWait] = useState(0)
  const interval = useRef<NodeJS.Timeout>(null)

  const refreshCaptcha = () => {
    setCaptchaUrl(`/captcha?t=${new Date().getTime()}`)
  }

  const sendVerifier = async () => {
    const result = await form.trigger(['phone', 'captcha'])
    if (!result) {
      return
    }

    const {phone, captcha} = form.getValues()
    const resp = await sendSMS({phone, captcha})
    if (!resp.success) {
      toast.error(resp.message)
      refreshCaptcha()
      return
    }

    setCaptchaWait(60)
    interval.current = setInterval(() => {
      setCaptchaWait((wait) => {
        if (wait <= 1) {
          clearInterval(interval.current!)
          return 0
        }
        return wait - 1
      })
    }, 1000)

    toast.success(`验证码已发送，请注意查收`)
  }

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

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button theme="outline" className="w-24 h-9">修改密码</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>修改密码</DialogTitle>
        </DialogHeader>
        <Form form={form} handler={handler} className="flex flex-col gap-4 mt-4">

          {/* 手机号 */}
          <FormField<Schema> name="phone" label="手机号" className="flex-auto">
            {({field}) => (
              <Input {...field} placeholder="请输入手机号" autoComplete="tel-national"/>
            )}
          </FormField>

          <FormField<Schema> name="captcha" label="验证码">
            {({field}) => (
              <div className="flex gap-4">
                <Input {...field} placeholder="请输入验证码" autoComplete="one-time-code"/>
                <Button className="p-0 bg-transparent" onClick={refreshCaptcha} type="button">
                  <img src={captchaUrl} alt="验证码" className="h-10"/>
                </Button>
              </div>
            )}
          </FormField>

          {/* 短信令牌 */}
          <FormField<Schema> name="code" label="短信令牌" className="flex-auto">
            {({field}) => (
              <div className="flex gap-4">
                <Input {...field} placeholder="请输入验证码" autoComplete="one-time-code"/>
                <Button theme="outline" type="button" className="w-36" onClick={() => sendVerifier()}>
                  {captchaWait > 0
                    ? `重新发送(${captchaWait})`
                    : `获取短信令牌`
                  }
                </Button>
              </div>
            )}
          </FormField>

          {/* 新密码 */}
          <FormField<Schema> name="password" label="新密码" className="flex-auto">
            {({field}) => (
              <Input {...field} placeholder="请输入新密码" type="password" autoComplete="new-password"/>
            )}
          </FormField>

          {/* 确认密码 */}
          <FormField<Schema> name="confirm_password" label="确认密码" className="flex-auto">
            {({field}) => (
              <Input {...field} placeholder="请再次输入新密码" type="password" autoComplete="new-password"/>
            )}
          </FormField>
        </Form>

        <DialogFooter>
          <Button
            theme="outline"
            type="button"
            onClick={() => {
              setOpen(false)
              form.reset()
            }}>
            关闭
          </Button>
          <Button onClick={async (e) => {
            const result = await handler(e)
          }}>
            保存
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}