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

import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Toast } from 'antd-mobile'
import { useUserStore } from '@/stores/user'
import QRCodeLogin from './QRCodeLogin'
import styles from './login.module.css'

// 声明飞书 JSAPI 类型
declare global {
  interface Window {
    // 官方 tt API（H5 应用免登）
    tt?: {
      requestAuthCode: (params: {
        appId: string
        success?: (res: { code: string }) => void
        fail?: (err: any) => void
      }) => void
    }
    // 旧版 ttjsBridge（兼容性）
    ttjsBridge?: {
      getAuthCode: (params: any) => void
    }
  }
}

export default function Login() {
  const navigate = useNavigate()
  const { login } = useUserStore()
  const [loading, setLoading] = useState(true)
  const [environment, setEnvironment] = useState<'feishu' | 'external' | null>(null)
  const [showQRCode, setShowQRCode] = useState(false)

  useEffect(() => {
    // 监听飞书登录成功事件
    const handleFeishuLoginSuccess = ((e: any) => {
      console.log('🎉 收到飞书登录成功事件:', e.detail)
      const { user, token } = e.detail
      login(user, token)
    }) as EventListener

    window.addEventListener('feishu-login-success', handleFeishuLoginSuccess)

    return () => {
      window.removeEventListener('feishu-login-success', handleFeishuLoginSuccess)
    }
  }, [])

  useEffect(() => {
    // 1. 检测是否在飞书客户端内
    const ua = navigator.userAgent.toLowerCase()
    const isInFeishu = ua.includes('feishu') || ua.includes('lark') || window.tt !== undefined

    console.log('🔍 Environment check:', { ua, isInFeishu, hasTt: window.tt !== undefined })

    if (isInFeishu) {
      // 飞书内：静默授权
      setEnvironment('feishu')
      handleFeishuAutoLogin()
    } else {
      // 飞书外：检查 URL 中是否有 auth_code 参数（飞书授权回调）
      const urlParams = new URLSearchParams(window.location.search)
      const authCode = urlParams.get('auth_code')
      const qrcodeId = urlParams.get('qrcode_id')

      if (qrcodeId) {
        // 扫码登录回调
        setEnvironment('external')
        handleQrcodeCallback(qrcodeId)
      } else if (authCode) {
        // 直接访问授权页面（不太可能）
        setEnvironment('external')
        handleFeishuCallback(authCode)
      } else {
        setEnvironment('external')
        setLoading(false)
      }
    }
  }, [])

  // 飞书内静默授权（使用官方 tt.requestAuthCode API）
  const handleFeishuAutoLogin = () => {
    console.log('🚀 Feishu auto login started')

    const appId = 'cli_a8033d607cba500d'

    if (window.tt) {
      // 使用官方 tt.requestAuthCode API
      window.tt.requestAuthCode({
        appId: appId,
        success: (res) => {
          console.log('✅ Got auth code from tt.requestAuthCode:', res.code)
          handleFeishuLogin(res.code)
        },
        fail: (error: any) => {
          console.error('❌ requestAuthCode failed:', error)
          setLoading(false)
          Toast.show('获取授权失败，请重试')
        },
      })
    } else if ((window as any).ttjsBridge) {
      // 兼容旧版 ttjsBridge
      console.warn('⚠️ Using legacy ttjsBridge API')
      ;(window as any).ttjsBridge.getAuthCode({
        success: (authCode: string) => {
          console.log('✅ Got auth code from ttjsBridge:', authCode)
          handleFeishuLogin(authCode)
        },
        fail: (error: any) => {
          console.error('❌ Get auth code failed:', error)
          setLoading(false)
          Toast.show('获取授权失败，请重试')
        },
      })
    } else {
      console.warn('⚠️ No Feishu bridge available')
      setLoading(false)
      Toast.show('请在飞书中打开')
    }
  }

  // 跳转到飞书授权页面（飞书外扫码登录）
  const redirectToFeishu = () => {
    // 直接打开扫码登录弹窗
    setShowQRCode(true)
  }

  // 处理飞书回调（飞书外扫码后回调）
  const handleFeishuCallback = async (authCode: string) => {
    try {
      await handleFeishuLogin(authCode)
    } catch (error) {
      console.error('登录失败:', error)
      setLoading(false)
    }
  }

  // 处理扫码登录回调
  const handleQrcodeCallback = async (qrcodeId: string) => {
    try {
      // 飞书扫码后会带着 qrcode_id 参数跳转回来
      // 这个时候前端需要显示 loading 状态
      // 后端会处理 qrcodeLoginCallback，更新 session 状态
      // 前端只需要轮询状态即可
      setShowQRCode(true)
      setLoading(false)

      // 设置轮询 session_id
      // 实际上这个逻辑在 QRCodeLogin 组件中处理
    } catch (error) {
      console.error('处理扫码回调失败:', error)
      setLoading(false)
    }
  }

  // 处理飞书登录
  const handleFeishuLogin = async (authCode: string) => {
    try {
      const tenantKey = '14e7bc0fe5985740'

      const response = await fetch('/api/v1/auth/feishu-login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          auth_code: authCode,
          tenant_key: tenantKey,
        }),
      })

      const result = await response.json()

      if (result.code === 0) {
        login(result.data.user, result.data.token)
        Toast.show('登录成功')
        navigate('/dashboard')
      } else {
        Toast.show(result.message || '登录失败')
        setLoading(false)
      }
    } catch (error: any) {
      console.error('登录失败:', error)
      Toast.show('登录失败，请重试')
      setLoading(false)
    }
  }

  // 邮箱密码登录
  const handlePasswordLogin = () => {
    navigate('/login-simple')
  }

  if (loading) {
    return (
      <div className={styles.login}>
        <div className={styles.container}>
          <h1>企业工具台</h1>
          <p>正在登录...</p>
        </div>
      </div>
    )
  }

  return (
    <div className={styles.login}>
      <div className={styles.container}>
        <h1>企业工具台</h1>
        <p className={styles.subtitle}>请选择登录方式</p>

        <div className={styles.loginMethods}>
          <button className={styles.methodBtn} onClick={handlePasswordLogin}>
            <div className={styles.methodIcon}>📧</div>
            <div className={styles.methodText}>
              <div className={styles.methodTitle}>邮箱密码登录</div>
              <div className={styles.methodDesc}>使用企业邮箱登录</div>
            </div>
          </button>

          <button className={styles.methodBtn} onClick={redirectToFeishu}>
            <div className={styles.methodIcon}>📱</div>
            <div className={styles.methodText}>
              <div className={styles.methodTitle}>飞书扫码登录</div>
              <div className={styles.methodDesc}>使用飞书 APP 扫码登录</div>
            </div>
          </button>
        </div>

        {environment === 'external' && (
          <p className={styles.tip}>
            💡 提示：在飞书客户端内打开可自动登录
          </p>
        )}

        <QRCodeLogin
          visible={showQRCode}
          onClose={() => setShowQRCode(false)}
        />
      </div>
    </div>
  )
}