import { useState, useEffect } from 'react'
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { Empty } from '@nutui/nutui-react-taro'
import './index.scss'

interface WithdrawRecord {
  id: string
  amount: number
  status: 'pending' | 'success' | 'failed'
  statusText: string
  createTime: string
  completeTime?: string
  remark?: string
}

function WithdrawDetail() {
  const [records, setRecords] = useState<WithdrawRecord[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    Taro.setNavigationBarTitle({
      title: '提现明细'
    })
    loadWithdrawRecords()
  }, [])

  const loadWithdrawRecords = async () => {
    try {
      setLoading(true)
      // 模拟数据，实际应该调用API
      const mockData: WithdrawRecord[] = [
        {
          id: '1',
          amount: 100.00,
          status: 'success',
          statusText: '提现成功',
          createTime: '2024-01-15 14:30:00',
          completeTime: '2024-01-15 16:45:00'
        },
        {
          id: '2',
          amount: 50.00,
          status: 'pending',
          statusText: '处理中',
          createTime: '2024-01-10 09:20:00'
        },
        {
          id: '3',
          amount: 200.00,
          status: 'failed',
          statusText: '提现失败',
          createTime: '2024-01-05 11:15:00',
          remark: '银行卡信息有误'
        }
      ]
      
      setTimeout(() => {
        setRecords(mockData)
        setLoading(false)
      }, 1000)
    } catch (error) {
      console.error('加载提现记录失败:', error)
      setLoading(false)
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'success':
        return '#10B981'
      case 'pending':
        return '#F59E0B'
      case 'failed':
        return '#EF4444'
      default:
        return '#6B7280'
    }
  }

  const handleRecordClick = (record: WithdrawRecord) => {
    const content = `
提现金额：¥${record.amount.toFixed(2)}
申请时间：${record.createTime}
${record.completeTime ? `完成时间：${record.completeTime}` : ''}
${record.remark ? `备注：${record.remark}` : ''}
    `.trim()

    Taro.showModal({
      title: '提现详情',
      content,
      showCancel: false
    })
  }

  if (loading) {
    return (
      <View className="withdraw-detail-page">
        <View className="loading-container">
          <View className="text-center text-gray-500">加载中...</View>
        </View>
      </View>
    )
  }

  return (
    <View className="withdraw-detail-page">
      {records.length === 0 ? (
        <View className="empty-container">
          <Empty description="暂无提现记录" />
        </View>
      ) : (
        <View className="records-list">
          {records.map((record) => (
            <View
              key={record.id}
              className="record-item"
              onClick={() => handleRecordClick(record)}
            >
              <View className="record-header">
                <View className="amount">¥{record.amount.toFixed(2)}</View>
                <View 
                  className="status"
                  style={{ color: getStatusColor(record.status) }}
                >
                  {record.statusText}
                </View>
              </View>
              <View className="record-info">
                <View className="time">申请时间：{record.createTime}</View>
                {record.completeTime && (
                  <View className="time">完成时间：{record.completeTime}</View>
                )}
                {record.remark && (
                  <View className="remark">备注：{record.remark}</View>
                )}
              </View>
            </View>
          ))}
        </View>
      )}
    </View>
  )
}

export default WithdrawDetail