'use client'
import {useEffect, useRef} 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/stores-provider'
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} from '@/actions/user'
import RechargeModal from '@/components/composites/recharge'
import {useRouter} from 'next/navigation'
import {RealnameAuthDialog} from '@/components/composites/dialogs/realname-auth-dialog'
import {ChangePasswordDialog} from '@/components/composites/dialogs/change-password-dialog'

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>
                    <RealnameAuthDialog
                      hasAuthenticated={!!profile?.id_token}
                      triggerClassName="w-24"
                    />
                  </>
                )
                : (
                  <>
                    <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>
              <ChangePasswordDialog triggerClassName="w-24 h-9"/>
            </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>
  )
}