x-server-mobile/frontend/src/pages/login/QRCodeLogin.tsx

import { useState, useEffect, useRef } from 'react'
import { Dialog, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import styles from './QRCodeLogin.module.css'

// 声明飞书 QR SDK 类型
declare global {
  interface Window {
    QR?: (config: {
      id: string
      goto: string
      width?: string
      height?: string
      style?: string
    }) => {
      matchOrigin: (origin: string) => boolean
      matchData: (data: any) => boolean
    }
  }
}

interface QRCodeLoginProps {
  visible: boolean
  onClose: () => void
}

// 动态加载飞书 QR SDK
const loadFeishuQRSDK = (): Promise<void> => {
  return new Promise((resolve, reject) => {
    if (window.QR) {
      resolve()
      return
    }

    // 检查是否已经加载过
    const existingScript = document.getElementById('feishu-qr-sdk')
    if (existingScript) {
      existingScript.addEventListener('load', () => resolve())
      existingScript.addEventListener('error', () => reject(new Error('Failed to load Feishu QR SDK')))
      return
    }

    const script = document.createElement('script')
    script.id = 'feishu-qr-sdk'
    script.src = 'https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js'
    script.onload = () => resolve()
    script.onerror = () => reject(new Error('Failed to load Feishu QR SDK'))
    document.head.appendChild(script)
  })
}

export default function QRCodeLogin({ visible, onClose }: QRCodeLoginProps) {
  const navigate = useNavigate()
  const [status, setStatus] = useState<'loading' | 'pending' | 'scanning' | 'success'>('loading')
  const qrContainerRef = useRef<HTMLDivElement>(null)
  const qrObjRef = useRef<any>(null)
  const pollTimerRef = useRef<NodeJS.Timeout | null>(null)
  const sessionIdRef = useRef<string>('')

  useEffect(() => {
    if (visible) {
      initQRCode()
    }

    return () => {
      // 清理
      if (qrContainerRef.current) {
        qrContainerRef.current.innerHTML = ''
      }
      if (pollTimerRef.current) {
        clearTimeout(pollTimerRef.current)
      }
    }
  }, [visible])

  const initQRCode = async () => {
    setStatus('loading')
    try {
      // 加载飞书 QR SDK
      await loadFeishuQRSDK()

      if (!window.QR) {
        throw new Error('QR SDK not loaded')
      }

      // 生成登录会话
      const response = await fetch('/api/v1/auth/qrcode-login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          tenant_key: '14e7bc0fe5985740',
        }),
      })

      const result = await response.json()

      if (result.code === 0) {
        const authUrl = result.data.auth_url
        sessionIdRef.current = result.data.session_id

        // 清空容器
        if (qrContainerRef.current) {
          qrContainerRef.current.innerHTML = ''
        }

        // 使用飞书官方 QR SDK 创建二维码
        qrObjRef.current = window.QR({
          id: 'feishu-qrcode-container',
          goto: authUrl,
          width: '200',
          height: '200',
        })

        setStatus('pending')
        // 开始轮询登录状态
        startPolling(result.data.session_id)
      } else {
        Toast.show(result.message || '生成二维码失败')
      }
    } catch (error) {
      console.error('生成二维码失败:', error)
      Toast.show('生成二维码失败')
    }
  }

  const startPolling = (id: string) => {
    const poll = async () => {
      try {
        const response = await fetch(`/api/v1/auth/qrcode-login/status?session_id=${id}`)
        const result = await response.json()

        if (result.code === 0) {
          if (result.data.status === 'success') {
            setStatus('success')
            // 登录成功，保存 token
            const { token, user } = result.data
            localStorage.setItem('token', token)
            localStorage.setItem('i18nextLng', 'zh')
            // 触发登录成功事件，让 store 更新
            window.dispatchEvent(new CustomEvent('feishu-login-success', { detail: { user, token } }))

            Toast.show('登录成功')
            setTimeout(() => {
              onClose()
              navigate('/dashboard')
            }, 500)
          } else if (result.data.status === 'scanning') {
            setStatus('scanning')
            // 继续轮询
            pollTimerRef.current = setTimeout(poll, 2000)
          } else {
            // pending，继续轮询
            pollTimerRef.current = setTimeout(poll, 2000)
          }
        } else {
          // 继续轮询
          pollTimerRef.current = setTimeout(poll, 2000)
        }
      } catch (error) {
        console.error('轮询登录状态失败:', error)
        // 继续轮询
        pollTimerRef.current = setTimeout(poll, 2000)
      }
    }

    pollTimerRef.current = setTimeout(poll, 2000)
  }

  const getStatusText = () => {
    switch (status) {
      case 'loading':
        return '正在生成二维码...'
      case 'pending':
        return '请使用飞书扫码登录'
      case 'scanning':
        return '已扫码，请在手机上确认'
      case 'success':
        return '登录成功！'
      default:
        return ''
    }
  }

  const getStatusColor = () => {
    switch (status) {
      case 'pending':
        return '#1677ff'
      case 'scanning':
        return '#faad14'
      case 'success':
        return '#52c41a'
      default:
        return '#999'
    }
  }

  return (
    <Dialog
      visible={visible}
      content={
        <div className={styles.qrcodeContainer}>
          <div id="feishu-qrcode-container" ref={qrContainerRef} className={styles.qrcode}></div>

          <div className={styles.status} style={{ color: getStatusColor() }}>
            {getStatusText()}
          </div>

          <p className={styles.tip}>
            💡 打开飞书 APP，扫一扫登录
          </p>
        </div>
      }
      onClose={onClose}
      closeOnMaskClick={status !== 'scanning' && status !== 'success'}
    />
  )
}