'use client'
import {MobilePayment} from './mobile-payment'
import {DesktopPayment} from './desktop-payment'
import {TradePlatform} from '@/lib/models/trade'
import {Dialog} from '@/components/ui/dialog'
import {PaymentProps} from './type'
import {payClose} from '@/actions/resource'
import {useEffect} from 'react'
import {UniversalDesktopPayment} from './universal-desktop-payment'
import {useAppStore} from '@/components/stores/app'

export type PaymentModalProps = {
  onConfirm: (showFail: boolean) => Promise<void>
  onClose: () => void
} & PaymentProps

export function PaymentModal(props: PaymentModalProps) {
  // 手动关闭时的处理
  const handleClose = async () => {
    // try {
    //   const res = await payClose({
    //     trade_no: props.inner_no,
    //     method: props.method,
    //   })
    //   if (!res.success) {
    //     throw new Error(res.message)
    //   }
    // }
    // catch (error) {
    //   console.error('关闭订单失败:', error)
    // }
    // finally {
    props.onClose?.()
    // }
  }

  // SSE处理方式检查支付状态
  const apiUrl = useAppStore('apiUrl')
  useEffect(() => {
    const eventSource = new EventSource(
      `${apiUrl}/api/trade/check?trade_no=${props.inner_no}&method=${props.method}`,
    )
    eventSource.onmessage = async (event) => {
      switch (event.data) {
      case '1':
        props.onConfirm?.(true)
      case '2':
        props.onClose?.()
      }
    }
    eventSource.onerror = (error) => {
      console.error('SSE 连接错误:', error)
    }

    return () => {
      eventSource.close()
    }
  }, [apiUrl, props])

  return (
    <Dialog
      defaultOpen={true}
      onOpenChange={(open) => {
        if (!open) handleClose()
      }}>

      {props.platform === TradePlatform.Mobile
        ? <MobilePayment {...props} onClose={handleClose}/>
        : <DesktopPayment {...props} onClose={handleClose}/>
      }

      {/* <UniversalDesktopPayment {...props} onClose={handleClose}/> */}
    </Dialog>
  )
}