'use client'
import {useEffect, useRef, useState} from 'react'
import Cap from '@cap.js/widget'
import {updateSendSMS} from '@/actions/verify'
import {toast} from 'sonner'
import {Button} from '@/components/ui/button'
import {LoaderIcon} from 'lucide-react'

export default function SendMsg() {
  const [countdown, setCountdown] = useState(0)
  const [progress, setProgress] = useState(0)
  const [mode, setMode] = useState<'ready' | 'wait' | 'check'>('ready')
  const cap = useRef(new Cap({apiEndpoint: '/'}))
  cap.current.addEventListener('progress', (event) => {
    setProgress(event.detail.progress)
  })

  // 发送验证码
  const sendCode = async () => {
    try {
      setMode('check')

      // 完成挑战
      const result = await cap.current.solve()
      if (!result.success || !cap.current.token) {
        throw new Error('人机验证失败')
      }

      // 发送验证码
      const resp = await updateSendSMS({
        captcha: cap.current.token,
      })
      if (!resp.success) {
        throw new Error(`验证码发送失败: ${resp.message}`)
      }

      setMode('wait')
      setCountdown(60)
      toast.success('验证码已发送')
    }
    catch (e) {
      setMode('ready')
      toast.error('验证码发送失败', {
        description: (e as Error).message,
      })
    }
  }

  // 计时
  useEffect(() => {
    const interval = setInterval(() => {
      if (countdown > 0) {
        setCountdown(countdown - 1)
      }
      else if (mode === 'wait') {
        setMode('ready')
      }
    }, 1000)
    return () => clearInterval(interval)
  }, [countdown, mode])

  return (
    <Button
      type="button"
      theme="outline"
      className="whitespace-nowrap h-10"
      disabled={countdown > 0}
      onClick={sendCode}
    >
      {mode === 'check' && <LoaderIcon className="animate-spin"/>}
      <span>
        {mode === 'check' && '检查登录环境'}
        {mode === 'wait' && `${countdown}秒后重发`}
        {mode === 'ready' && '获取验证码'}
      </span>
    </Button>
  )
}