'use client'
import {useEffect, useState, useContext, useRef} from 'react'
import Page from '@/components/page'
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from '@/components/ui/card'
import {Form, FormField, FormLabel} from '@/components/ui/form'
import {Button} from '@/components/ui/button'
import {Input} from '@/components/ui/input'
import {useForm} from 'react-hook-form'
import {zodResolver} from '@hookform/resolvers/zod'
import * as z from 'zod'
import {StoreContext, useProfileStore} from '@/components/providers/StoreProvider'
import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger} from '@/components/ui/dialog'
import {toast} from 'sonner'
import {Alert, AlertDescription, AlertTitle} from '@/components/ui/alert'
import {CheckCircle, AlertCircle, Shield, Wallet, CreditCard, QrCode, UserIcon} from 'lucide-react'
import * as qrcode from 'qrcode'
import Link from 'next/link'
import RechargeModal from '@/components/composites/purchase/_client/recharge'
import {User} from '@/lib/models'
import { Label } from '@/components/ui/label'

export type ProfilePageProps = {}

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

  // 默认选中的Tab
  const [activeTab, setActiveTab] = useState('basic')

  if (!profile) {
    return (
      <Page>
        <div className="flex justify-center items-center h-full">
          <Alert className="max-w-md">
            <AlertCircle className="h-4 w-4"/>
            <AlertTitle>加载中</AlertTitle>
            <AlertDescription>正在加载个人信息，请稍候...</AlertDescription>
          </Alert>
        </div>
      </Page>
    )
  }

  return (
    <Page>
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <div className="lg:col-span-3">
          <Tabs defaultValue={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid grid-cols-4 mb-4">
              <TabsTrigger value="basic">基本信息</TabsTrigger>
              <TabsTrigger value="security">安全设置</TabsTrigger>
              <TabsTrigger value="balance">余额管理</TabsTrigger>
              <TabsTrigger value="identify">实名认证</TabsTrigger>
            </TabsList>

            <TabsContent value="basic">
              <BasicInfoTab profile={profile} refreshProfile={refreshProfile}/>
            </TabsContent>

            <TabsContent value="security">
              <SecurityTab profile={profile} refreshProfile={refreshProfile}/>
            </TabsContent>

            <TabsContent value="balance">
              <BalanceTab profile={profile} refreshProfile={refreshProfile}/>
            </TabsContent>

            <TabsContent value="identify">
              <IdentifyTab profile={profile} refreshProfile={refreshProfile}/>
            </TabsContent>
          </Tabs>
        </div>

        {/* 侧边栏：客服经理信息 */}
        <div className="lg:col-span-1">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <UserIcon size={18}/> 账户概览
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-1">
                <p className="text-sm text-muted-foreground">用户名</p>
                <p className="font-medium">{profile.name || profile.username}</p>
              </div>

              <div className="space-y-1">
                <p className="text-sm text-muted-foreground">手机号</p>
                <p className="font-medium">{profile.phone ? maskPhone(profile.phone) : '未设置'}</p>
              </div>

              <div className="space-y-1">
                <p className="text-sm text-muted-foreground">账户余额</p>
                <p className="font-medium text-xl">￥{profile.balance || 0}</p>
              </div>

              <div className="space-y-1">
                <p className="text-sm text-muted-foreground">实名认证</p>
                <p className="flex items-center gap-2">
                  {profile.id_token ? (
                    <><CheckCircle size={16} className="text-green-500"/> 已认证</>
                  ) : (
                    <><AlertCircle size={16} className="text-amber-500"/> 未认证</>
                  )}
                </p>
              </div>
            </CardContent>
          </Card>

          {profile.contact_wechat && (
            <Card className="mt-6">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <QrCode size={18}/> 专属客服经理
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-col items-center space-y-4">
                  <ServiceManagerQRCode wechat={profile.contact_wechat}/>
                  <p className="text-sm text-muted-foreground text-center">
                    扫描上方二维码添加客服经理微信<br/>获取更多帮助与支持
                  </p>
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </Page>
  )
}

// 基本信息组件
function BasicInfoTab(props: {
  profile: User
  refreshProfile: () => Promise<void>
}) {
  const {profile, refreshProfile} = props

  const basicInfoSchema = z.object({
    name: z.string().min(2, '名称至少需要2个字符'),
    email: z.string().email('请输入有效的邮箱地址').or(z.string().length(0)),
  })

  type BasicInfoShema = z.infer<typeof basicInfoSchema>

  const form = useForm({
    resolver: zodResolver(basicInfoSchema),
    defaultValues: {
      name: profile.name || '',
      email: profile.email || '',
    },
  })

  const [isSubmitting, setIsSubmitting] = useState(false)

  const onSubmit = async (data: BasicInfoShema) => {
    setIsSubmitting(true)
    try {
      // 这里会调用更新用户信息的API
      // 示例: await updateUserProfile(data)

      toast.success('基本信息更新成功')
      await refreshProfile()
    }
    catch (error) {
      toast.error('更新失败', {
        description: (error as Error).message || '请稍后重试',
      })
    }
    finally {
      setIsSubmitting(false)
    }
  }

  return (
    <Form form={form} onSubmit={onSubmit} className="space-y-6">
      <FormField name="name" label="姓名">
        {({id, field}) => (
          <Input
            {...field}
            id={id}
            placeholder="请输入您的姓名"
          />
        )}
      </FormField>

      <FormField name="email" label="电子邮箱">
        {({id, field}) => (
          <Input
            {...field}
            id={id}
            type="email"
            placeholder="请输入您的邮箱地址"
          />
        )}
      </FormField>

      <div>
        <Button type="submit" disabled={isSubmitting}>
          {isSubmitting ? '保存中...' : '保存修改'}
        </Button>
      </div>
    </Form>
  )
}

// 安全设置组件
function SecurityTab(props: {
  profile: User
  refreshProfile: () => Promise<void>
}) {
  const {profile, refreshProfile} = props

  const [showPhoneDialog, setShowPhoneDialog] = useState(false)
  const [showPasswordDialog, setShowPasswordDialog] = useState(false)

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between py-3 border-b">
        <div>
          <h3 className="text-lg font-medium">手机号</h3>
          <p className="text-sm text-muted-foreground">
            {profile.phone ? maskPhone(profile.phone) : '未设置手机号'}
          </p>
        </div>
        <Button onClick={() => setShowPhoneDialog(true)}>
          {profile.phone ? '修改' : '设置'}
        </Button>
      </div>

      <div className="flex items-center justify-between py-3 border-b">
        <div>
          <h3 className="text-lg font-medium">密码</h3>
          <p className="text-sm text-muted-foreground">定期修改密码可以保障您的账户安全</p>
        </div>
        <Button onClick={() => setShowPasswordDialog(true)}>修改</Button>
      </div>

      <div className="flex items-center justify-between py-3">
        <div>
          <h3 className="text-lg font-medium">账号保护</h3>
          <p className="text-sm text-muted-foreground">开启登录保护，提升账号安全</p>
        </div>
        <Button theme="outline">设置</Button>
      </div>

      {/* 修改手机号对话框 */}
      <ChangePhoneDialog
        open={showPhoneDialog}
        onOpenChange={setShowPhoneDialog}
        currentPhone={profile.phone}
        refreshProfile={refreshProfile}
      />

      {/* 修改密码对话框 */}
      <ChangePasswordDialog
        open={showPasswordDialog}
        onOpenChange={setShowPasswordDialog}
        refreshProfile={refreshProfile}
      />
    </div>
  )
}

// 余额管理组件
function BalanceTab(props: {
  profile: User
  refreshProfile: () => Promise<void>
}) {
  const {profile} = props

  // 交易历史记录示例数据
  const transactions = [
    {id: 1, type: '充值', amount: 100, date: '2025-04-18', status: '成功'},
    {id: 2, type: '购买套餐', amount: -50, date: '2025-04-15', status: '成功'},
    {id: 3, type: '系统赠送', amount: 10, date: '2025-04-10', status: '成功'},
  ]

  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <h3 className="text-2xl font-bold">当前余额: ￥{profile.balance || 0}</h3>
          <p className="text-sm text-muted-foreground">您可以随时充值或查看交易记录</p>
        </div>
        <RechargeModal/>
      </div>

      <div className="mt-8">
        <h3 className="text-lg font-medium mb-4">近期交易记录</h3>
        <div className="border rounded-md">
          <div className="grid grid-cols-4 bg-muted p-3 font-medium">
            <div>类型</div>
            <div>金额</div>
            <div>日期</div>
            <div>状态</div>
          </div>

          <div className="divide-y">
            {transactions.map(tx => (
              <div key={tx.id} className="grid grid-cols-4 p-3">
                <div>{tx.type}</div>
                <div className={tx.amount >= 0 ? 'text-green-600' : 'text-red-600'}>
                  {tx.amount >= 0 ? `+${tx.amount}` : tx.amount}
                </div>
                <div>{tx.date}</div>
                <div>{tx.status}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-4 text-center">
          <Button theme="outline">查看更多交易记录</Button>
        </div>
      </div>
    </div>
  )
}

// 实名认证组件
function IdentifyTab(props: {
  profile: User
  refreshProfile: () => Promise<void>
}) {
  const {profile} = props

  return (
    <div className="space-y-6">
      {profile.id_token ? (
        <div className="bg-muted rounded-lg p-6 text-center">
          <CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-4"/>
          <h3 className="text-xl font-medium mb-2">您已完成实名认证</h3>
          <p className="text-muted-foreground mb-6">认证信息已通过验证，可以正常使用所有功能</p>

          <div className="grid grid-cols-2 gap-4 max-w-md mx-auto text-left">
            <div>
              <p className="text-sm text-muted-foreground">认证姓名</p>
              <p className="font-medium">{maskName(profile.name)}</p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground">身份证号</p>
              <p className="font-medium">{maskIdNumber(profile.id_no)}</p>
            </div>
          </div>
        </div>
      ) : (
        <div className="bg-muted rounded-lg p-6 text-center">
          <AlertCircle className="w-12 h-12 text-amber-500 mx-auto mb-4"/>
          <h3 className="text-xl font-medium mb-2">您尚未完成实名认证</h3>
          <p className="text-muted-foreground mb-6">
            根据相关法律法规要求，使用HTTP代理服务需要先完成实名认证
          </p>

          <Link href="/admin/identify">
            <Button className="w-40">立即认证</Button>
          </Link>
        </div>
      )}

      <Alert>
        <AlertCircle className="h-4 w-4"/>
        <AlertTitle>重要提示</AlertTitle>
        <AlertDescription>
          为响应国家相关规定，使用HTTP代理需完成实名认证。
          认证服务由支付宝提供，您的个人信息将受到严格保护，仅用于账户安全认证。
        </AlertDescription>
      </Alert>
    </div>
  )
}

// 修改手机号对话框
function ChangePhoneDialog(props: {
  open: boolean
  onOpenChange: (open: boolean) => void
  currentPhone?: string
  refreshProfile: () => Promise<void>
}) {
  const {open, onOpenChange, currentPhone, refreshProfile} = props

  const phoneChangeSchema = z.object({
    newPhone: z.string().length(11, '请输入11位手机号码'),
    verifyCode: z.string().min(4, '请输入验证码'),
  })

  type PhoneChangeSchema = z.infer<typeof phoneChangeSchema>

  const form = useForm({
    resolver: zodResolver(phoneChangeSchema),
    defaultValues: {
      newPhone: '',
      verifyCode: '',
    },
  })

  const [isSubmitting, setIsSubmitting] = useState(false)
  const [countdown, setCountdown] = useState(0)

  const onSubmit = async (data: PhoneChangeSchema) => {
    setIsSubmitting(true)
    try {
      // 这里调用修改手机号的API
      // 示例: await changePhone(data.newPhone, data.verifyCode)

      toast.success('手机号更新成功')
      await refreshProfile()
      onOpenChange(false)
    }
    catch (error) {
      toast.error('更新失败', {
        description: (error as Error).message || '请稍后重试',
      })
    }
    finally {
      setIsSubmitting(false)
    }
  }

  const sendVerifyCode = () => {
    const newPhone = form.getValues('newPhone')
    if (!newPhone || newPhone.length !== 11) {
      form.setError('newPhone', {message: '请输入有效的手机号码'})
      return
    }

    // 这里调用发送验证码的API
    // 示例: await sendSmsCode(newPhone)
    toast.success('验证码已发送')

    // 开始倒计时
    setCountdown(60)
    const timer = setInterval(() => {
      setCountdown(prev => {
        if (prev <= 1) {
          clearInterval(timer)
          return 0
        }
        return prev - 1
      })
    }, 1000)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>修改手机号</DialogTitle>
        </DialogHeader>

        <Form form={form} onSubmit={onSubmit} className="space-y-4 py-4">
          {currentPhone && (
            <div className="space-y-1">
              <Label>当前手机号</Label>
              <Input value={maskPhone(currentPhone)} disabled/>
            </div>
          )}

          <FormField name="newPhone" label="新手机号">
            {({id, field}) => (
              <Input
                {...field}
                id={id}
                placeholder="请输入新手机号"
              />
            )}
          </FormField>

          <FormField name="verifyCode" label="验证码">
            {({id, field}) => (
              <div className="flex gap-2">
                <Input
                  {...field}
                  id={id}
                  className="flex-1"
                  placeholder="请输入验证码"
                />
                <Button
                  type="button"
                  theme="outline"
                  disabled={countdown > 0}
                  onClick={sendVerifyCode}
                >
                  {countdown > 0 ? `${countdown}秒后重发` : '获取验证码'}
                </Button>
              </div>
            )}
          </FormField>

          <DialogFooter className="pt-4">
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? '保存中...' : '保存'}
            </Button>
          </DialogFooter>
        </Form>
      </DialogContent>
    </Dialog>
  )
}

// 修改密码对话框
function ChangePasswordDialog(props: {
  open: boolean
  onOpenChange: (open: boolean) => void
  refreshProfile: () => Promise<void>
}) {
  const {open, onOpenChange, refreshProfile} = props

  const passwordChangeSchema = z.object({
    oldPassword: z.string().min(6, '密码至少需要6个字符'),
    newPassword: z.string().min(6, '密码至少需要6个字符'),
    confirmPassword: z.string().min(6, '密码至少需要6个字符'),
  }).refine(data => data.newPassword === data.confirmPassword, {
    message: '两次输入的新密码不一致',
    path: ['confirmPassword'],
  })

  type PasswordChangeSchema = z.infer<typeof passwordChangeSchema>

  const form = useForm({
    resolver: zodResolver(passwordChangeSchema),
    defaultValues: {
      oldPassword: '',
      newPassword: '',
      confirmPassword: '',
    },
  })

  const [isSubmitting, setIsSubmitting] = useState(false)

  const onSubmit = async (data: PasswordChangeSchema) => {
    setIsSubmitting(true)
    try {
      // 这里调用修改密码的API
      // 示例: await changePassword(data.oldPassword, data.newPassword)

      toast.success('密码修改成功')
      onOpenChange(false)
    }
    catch (error) {
      toast.error('修改失败', {
        description: (error as Error).message || '请稍后重试',
      })
    }
    finally {
      setIsSubmitting(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>修改密码</DialogTitle>
        </DialogHeader>

        <Form form={form} onSubmit={onSubmit} className="space-y-4 py-4">
          <FormField name="oldPassword" label="当前密码">
            {({id, field}) => (
              <Input
                {...field}
                id={id}
                type="password"
                placeholder="请输入当前密码"
              />
            )}
          </FormField>

          <FormField name="newPassword" label="新密码">
            {({id, field}) => (
              <Input
                {...field}
                id={id}
                type="password"
                placeholder="请输入新密码"
              />
            )}
          </FormField>

          <FormField name="confirmPassword" label="确认新密码">
            {({id, field}) => (
              <Input
                {...field}
                id={id}
                type="password"
                placeholder="请再次输入新密码"
              />
            )}
          </FormField>

          <DialogFooter className="pt-4">
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? '保存中...' : '保存'}
            </Button>
          </DialogFooter>
        </Form>
      </DialogContent>
    </Dialog>
  )
}

// 客服经理二维码组件
function ServiceManagerQRCode(props: {
  wechat?: string
}) {
  const {wechat} = props
  const canvasRef = useRef(null)

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

  return (
    <div className="p-2 bg-white rounded-md border">
      <canvas ref={canvasRef} width="180" height="180"/>
    </div>
  )
}

// 工具函数：遮盖手机号
function maskPhone(phone?: string) {
  if (!phone) return ''
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 工具函数：遮盖姓名
function maskName(name?: string) {
  if (!name) return ''
  if (name.length <= 2) {
    return name.charAt(0) + '*'
  }
  const stars = '*'.repeat(name.length - 2)
  return name.charAt(0) + stars + name.charAt(name.length - 1)
}

// 工具函数：遮盖身份证号
function maskIdNumber(idNumber?: string) {
  if (!idNumber) return ''
  return idNumber.replace(/^(.{4})(.*)(.{4})$/, '$1**********$3')
}