import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { SpinLoading, Toast } from 'antd-mobile'
import { approvalApi } from '@/services/api'

export default function QuickAction() {
  const navigate = useNavigate()
  const [loading, setLoading] = useState(true)
  const [status, setStatus] = useState('processing')
  const [message, setMessage] = useState('处理中...')

  useEffect(() => {
    console.log('🚀 QuickAction 页面加载')

    const processAction = async () => {
      try {
        const urlParams = new URLSearchParams(window.location.search)
        const action = urlParams.get('action')
        const orderId = urlParams.get('order_id')
        const token = localStorage.getItem('token')

        console.log('🚀 快速审批参数:', { action, orderId, hasToken: !!token })

        if (!action || !orderId) {
          setStatus('error')
          setMessage('参数错误')
          Toast.show('参数错误')
          setTimeout(() => {
            window.location.href = '/login'
          }, 2000)
          return
        }

        // 检查是否登录
        if (!token) {
          console.log('⚠️ 未登录')
          setStatus('unauthorized')
          setMessage('请先登录')
          Toast.show('请先登录')
          setTimeout(() => {
            const currentUrl = window.location.pathname + window.location.search
            window.location.href = '/login?redirect=' + encodeURIComponent(currentUrl)
          }, 2000)
          return
        }

        setStatus('processing')
        setMessage('正在执行审批...')

        // 执行审批操作
        console.log('📝 执行审批操作:', action, 'order_id:', orderId)

        let result
        if (action === 'approve') {
          console.log('✅ 调用 approve API')
          result = await approvalApi.approve(Number(orderId), '')
          setMessage('已通过')
        } else if (action === 'reject') {
          console.log('❌ 调用 reject API')
          result = await approvalApi.reject(Number(orderId), '已拒绝')
          setMessage('已拒绝')
        } else {
          throw new Error('未知操作类型')
        }

        console.log('✅ 审批操作完成:', result)
        setStatus('success')

        // 操作成功后关闭页面
        setTimeout(() => {
          console.log('✅ 操作完成，尝试关闭页面')

          // 尝试关闭页面（在飞书客户端或新窗口中）
          try {
            // 尝试飞书关闭方法
            if ((window as any).tt && typeof (window as any).tt.close === 'function') {
              console.log('🔒 使用 tt.close() 关闭页面')
              ;(window as any).tt.close()
            } else if ((window as any).webkit && typeof (window as any).webkit.messageHandlers.postMessage === 'object') {
              console.log('📱 尝试 iOS WKWebView 关闭')
              ;(window as any).webkit.messageHandlers.postMessage({ action: 'close' })
            } else if (typeof window.close === 'function') {
              console.log('🌐 使用 window.close() 关闭')
              window.close()
            } else {
              console.log('📋 无法关闭页面，跳转到审批列表')
              navigate('/approval', { replace: true })
            }
          } catch (e) {
            console.log('⚠️ 关闭页面失败，跳转到列表')
            navigate('/approval', { replace: true })
          }
        }, 1500)

      } catch (error: any) {
        console.error('❌ 操作失败:', error)
        setStatus('error')
        setMessage('操作失败: ' + (error.message || '未知错误'))
        Toast.show('操作失败: ' + (error.message || '未知错误'))
        setTimeout(() => {
          navigate('/approval', { replace: true })
        }, 2000)
      } finally {
        setLoading(false)
      }
    }

    // 延迟一点执行，确保页面完全加载
    setTimeout(processAction, 100)
  }, [navigate])

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100vh',
      background: '#f5f5f5',
      padding: '20px',
      textAlign: 'center'
    }}>
      {loading && (
        <>
          <SpinLoading color='primary' />
          <p style={{ marginTop: '16px', color: '#999' }}>{message}</p>
        </>
      )}

      {status === 'success' && (
        <>
          <div style={{ fontSize: '64px' }}>✅</div>
          <p style={{ marginTop: '16px', color: '#52c41a', fontSize: '18px' }}>{message}</p>
          <p style={{ fontSize: '14px', color: '#999' }}>页面即将关闭...</p>
        </>
      )}

      {status === 'error' && (
        <>
          <div style={{ fontSize: '64px' }}>❌</div>
          <p style={{ marginTop: '16px', color: '#ff4d4f', fontSize: '18px' }}>{message}</p>
        </>
      )}

      {status === 'unauthorized' && (
        <>
          <div style={{ fontSize: '64px }}>🔒</div>
          <p style={{ marginTop: '16px', color: '#ff8800', fontSize: '18px' }}>需要登录</p>
          <p style={{ fontSize: '14px', color: '#999' }}>正在跳转到登录页面...</p>
        </>
      )}
    </div>
  )
}