import React, {useState, useEffect, useCallback} from 'react'
import {View, Text} from '@tarojs/components'
import {
  Space,
  Tabs,
  Tag,
  Empty,
  ActionSheet,
  Loading,
  PullToRefresh,
  Button,
  Dialog,
  Image,
  TextArea
} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import {useDealerUser} from '@/hooks/useDealerUser'
import {pageShopDealerWithdraw, updateShopDealerWithdraw} from '@/api/shop/shopDealerWithdraw'
import type {ShopDealerWithdraw} from '@/api/shop/shopDealerWithdraw/model'
import {ShopDealerBank} from "@/api/shop/shopDealerBank/model";
import {listShopDealerBank} from "@/api/shop/shopDealerBank";
import {pushNoticeOfWithdrawalToAccount} from "@/api/sdy/sdyTemplateMessage";
import {uploadFile} from "@/api/system/file";

interface WithdrawRecordWithDetails extends ShopDealerWithdraw {
  accountDisplay?: string
}

const DealerWithdraw: React.FC = () => {
  const [activeTab, setActiveTab] = useState<string | number>('10')
  const [loading, setLoading] = useState<boolean>(false)
  const [refreshing, setRefreshing] = useState<boolean>(false)
  const [banks, setBanks] = useState<any[]>([])
  const [isVisible, setIsVisible] = useState<boolean>(false)
  const [withdrawRecords, setWithdrawRecords] = useState<WithdrawRecordWithDetails[]>([])
  const [rejectDialogVisible, setRejectDialogVisible] = useState<boolean>(false)
  const [rejectReason, setRejectReason] = useState<string>('')
  const [currentRecord, setCurrentRecord] = useState<ShopDealerWithdraw | null>(null)
  const [payDialogVisible, setPayDialogVisible] = useState<boolean>(false)
  const [paymentImages, setPaymentImages] = useState<string[]>([])

  const {dealerUser} = useDealerUser()

  // Tab 切换处理函数
  const handleTabChange = (value: string | number) => {
    console.log('Tab切换到:', value)
    setActiveTab(value)
    // activeTab变化会自动触发useEffect重新获取数据，无需手动调用
  }

  // 获取提现记录
  const fetchWithdrawRecords = useCallback(async () => {
    if (!dealerUser?.userId) return

    try {
      setLoading(true)
      const currentStatus = Number(activeTab)
      const result = await pageShopDealerWithdraw({
        page: 1,
        limit: 100,
        applyStatus: currentStatus // 后端筛选，提高性能
      })

      if (result?.list) {
        const processedRecords = result.list.map(record => ({
          ...record,
          accountDisplay: getAccountDisplay(record)
        }))
        setWithdrawRecords(processedRecords)
      }
    } catch (error) {
      console.error('获取提现记录失败:', error)
      Taro.showToast({
        title: '获取提现记录失败',
        icon: 'none'
      })
    } finally {
      setLoading(false)
    }
  }, [dealerUser?.userId, activeTab])

  function fetchBanks() {
    listShopDealerBank({}).then(data => {
      const list = data.map(d => {
        d.name = d.bankName;
        d.type = d.bankName;
        return d;
      })
      setBanks(list.concat({
        name: '管理银行卡',
        type: 'add'
      }))
    })
  }

  // 格式化账户显示
  const getAccountDisplay = (record: ShopDealerWithdraw) => {
    if (record.payType === 10) {
      return '微信钱包'
    } else if (record.payType === 20 && record.alipayAccount) {
      return `支付宝(${record.alipayAccount.slice(-4)})`
    } else if (record.payType === 30 && record.bankCard) {
      return `${record.bankName || '银行卡'}(尾号${record.bankCard.slice(-4)})`
    }
    return '未知账户'
  }

  // 刷新数据
  const handleRefresh = async () => {
    setRefreshing(true)
    await Promise.all([fetchWithdrawRecords()])
    setRefreshing(false)
  }

  const handleSelect = (item: ShopDealerBank) => {
    if(item.type === 'add'){
      return Taro.navigateTo({
        url: '/dealer/bank/index'
      })
    }
    setIsVisible(false)
  }

  // 审核通过
  const handleApprove = async (record: ShopDealerWithdraw) => {
    try {
      await updateShopDealerWithdraw({
        ...record,
        applyStatus: 20, // 审核通过
      })

      Taro.showToast({
        title: '审核通过',
        icon: 'success'
      })

      await fetchWithdrawRecords()
    } catch (error: any) {
      if (error !== 'cancel') {
        console.error('审核通过失败:', error)
        Taro.showToast({
          title: error.message || '操作失败',
          icon: 'none'
        })
      }
    }
  }

  // 驳回申请
  const handleReject = (record: ShopDealerWithdraw) => {
    setCurrentRecord(record)
    setRejectReason('')
    setRejectDialogVisible(true)
  }

  // 确认驳回
  const confirmReject = async () => {
    if (!rejectReason.trim()) {
      Taro.showToast({
        title: '请输入驳回原因',
        icon: 'none'
      })
      return
    }

    try {
      await updateShopDealerWithdraw({
        ...currentRecord!,
        applyStatus: 30, // 驳回
        rejectReason: rejectReason.trim()
      })

      Taro.showToast({
        title: '已驳回',
        icon: 'success'
      })

      setRejectDialogVisible(false)
      setCurrentRecord(null)
      setRejectReason('')
      await fetchWithdrawRecords()
    } catch (error: any) {
      console.error('驳回失败:', error)
      Taro.showToast({
        title: error.message || '操作失败',
        icon: 'none'
      })
    }
  }

  // 确认打款 - 打开打款对话框
  const handleConfirmPay = (record: ShopDealerWithdraw) => {
    setCurrentRecord(record)
    setPaymentImages([])
    setPayDialogVisible(true)
  }

  // 上传打款凭证
  const handleUploadPaymentImage = async () => {
    try {
      // 直接调用uploadFile，它内部会处理图片选择和上传
      const data = await uploadFile();
      console.log(data.url, 'uploaded image url');
      
      // 确保url存在再添加到状态中
      if (data.url) {
        // 将返回的图片URL添加到状态中
        const newImages = [...paymentImages, data.url];
        setPaymentImages(newImages.slice(0, 3));
      } else {
        Taro.showToast({
          title: '图片上传失败：未返回有效URL',
          icon: 'none'
        });
      }
    } catch (error) {
      console.error('上传图片失败:', error);
      Taro.showToast({
        title: '上传失败: ' + (error instanceof Error ? error.message : '未知错误'),
        icon: 'none'
      });
    }
  }

  // 删除打款凭证
  const handleRemovePaymentImage = (index: number) => {
    const newImages = paymentImages.filter((_, i) => i !== index)
    setPaymentImages(newImages)
  }

  // 确认提交打款
  const confirmPayment = async () => {
    try {
      await updateShopDealerWithdraw({
        ...currentRecord!,
        applyStatus: 40, // 已打款
        image: paymentImages.length > 0 ? JSON.stringify(paymentImages) : undefined
      })

      Taro.showToast({
        title: '打款确认成功',
        icon: 'success'
      })

      if(currentRecord){
        await pushNoticeOfWithdrawalToAccount(currentRecord).then()
      }

      setPayDialogVisible(false)
      setCurrentRecord(null)
      setPaymentImages([])
      await fetchWithdrawRecords()
    } catch (error: any) {
      console.error('确认打款失败:', error)
      Taro.showToast({
        title: error.message || '操作失败',
        icon: 'none'
      })
    }
  }

  // 初始化加载数据
  useEffect(() => {
    if (dealerUser?.userId) {
      fetchWithdrawRecords().then()
      fetchBanks()
    }
  }, [fetchWithdrawRecords])

  const getStatusText = (status?: number) => {
    switch (status) {
      case 40:
        return '已到账'
      case 20:
        return '审核通过'
      case 10:
        return '待审核'
      case 30:
        return '已驳回'
      default:
        return '未知'
    }
  }

  const getStatusColor = (status?: number) => {
    switch (status) {
      case 40:
        return 'success'
      case 20:
        return 'success'
      case 10:
        return 'warning'
      case 30:
        return 'danger'
      default:
        return 'default'
    }
  }

  const renderWithdrawRecords = () => {
    console.log('渲染提现记录:', {loading, recordsCount: withdrawRecords.length, dealerUserId: dealerUser?.userId})

    return (
      <PullToRefresh
        disabled={refreshing}
        onRefresh={handleRefresh}
      >
        <View>
          {loading ? (
            <View className="text-center py-8">
              <Loading/>
              <Text className="text-gray-500 mt-2">加载中...</Text>
            </View>
          ) : withdrawRecords.length > 0 ? (
            withdrawRecords.map(record => (
              <View key={record.id} className="rounded-lg bg-gray-50 p-4 mb-3 shadow-sm">
                <View className="flex justify-between items-start mb-3">
                  <Space direction={'vertical'}>
                    <Text className="font-semibold text-gray-800 mb-1">
                      提现金额：¥{Number(record.money).toFixed(2)}
                    </Text>
                    <Text className="text-sm text-gray-500">
                      {record.comments}
                    </Text>
                    <Text className={'text-sm text-gray-500'}>
                      申请人：{record.bankAccount} {record.phone}
                    </Text>
                  </Space>
                  <Tag type={getStatusColor(record.applyStatus)}>
                    {getStatusText(record.applyStatus)}
                  </Tag>
                </View>

                <View className="text-xs text-gray-400">
                  <Text>申请时间：{record.createTime}</Text>
                  {record.auditTime && (
                    <Text className="block mt-1">
                      审核时间：{new Date(record.auditTime).toLocaleString()}
                    </Text>
                  )}
                  {record.rejectReason && (
                    <Text className="block mt-1 text-red-500">
                      驳回原因：{record.rejectReason}
                    </Text>
                  )}
                </View>

                {/* 操作按钮 */}
                {record.applyStatus === 10 && (
                  <View className="flex gap-2 mt-3">
                    <Button
                      type="success"
                      size="small"
                      className="flex-1"
                      onClick={() => handleApprove(record)}
                    >
                      审核通过
                    </Button>
                    <Button
                      type="danger"
                      size="small"
                      className="flex-1"
                      onClick={() => handleReject(record)}
                    >
                      驳回
                    </Button>
                  </View>
                )}

                {record.applyStatus === 20 && (
                  <View className="mt-3">
                    <Button
                      type="primary"
                      size="small"
                      block
                      onClick={() => handleConfirmPay(record)}
                    >
                      确认打款
                    </Button>
                  </View>
                )}
              </View>
            ))
          ) : (
            <Empty description="暂无提现记录"/>
          )}
        </View>
      </PullToRefresh>
    )
  }

  return (
    <View className="bg-gray-50 min-h-screen">
      <Tabs value={activeTab} onChange={handleTabChange}>
        <Tabs.TabPane title="待审核" value="10">
          {renderWithdrawRecords()}
        </Tabs.TabPane>

        <Tabs.TabPane title="已通过" value="20">
          {renderWithdrawRecords()}
        </Tabs.TabPane>

        <Tabs.TabPane title="已打款" value="40">
          {renderWithdrawRecords()}
        </Tabs.TabPane>

        <Tabs.TabPane title="已驳回" value="30">
          {renderWithdrawRecords()}
        </Tabs.TabPane>
      </Tabs>
      <ActionSheet
        visible={isVisible}
        options={banks}
        onSelect={handleSelect}
        onCancel={() => setIsVisible(false)}
      />

      {/* 驳回原因对话框 */}
      <Dialog
        visible={rejectDialogVisible}
        title="驳回原因"
        onCancel={() => {
          setRejectDialogVisible(false)
          setCurrentRecord(null)
          setRejectReason('')
        }}
        onConfirm={confirmReject}
      >
        <View className="p-4">
          <TextArea
            placeholder="请输入驳回原因"
            value={rejectReason}
            onChange={(value) => setRejectReason(value)}
            maxLength={200}
            rows={4}
          />
        </View>
      </Dialog>

      {/* 打款凭证对话框 */}
      <Dialog
        visible={payDialogVisible}
        title="确认打款"
        onCancel={() => {
          setPayDialogVisible(false)
          setCurrentRecord(null)
          setPaymentImages([])
        }}
        onConfirm={confirmPayment}
      >
        <View className="p-4">
          <View className="mb-3 flex flex-col">
            <Text className="text-sm text-gray-600">
              打款金额：¥{(Number(currentRecord?.money) - 3).toFixed(2)}
            </Text>
            <Text className="text-sm">
              开户行：{currentRecord?.bankName}
            </Text>
            <Text className="text-sm">
              户名：{currentRecord?.bankAccount}
            </Text>
            <Text className="text-sm">
              卡号：{currentRecord?.bankCard}
            </Text>
          </View>
          <View className="mb-3">
            <Text className="text-sm text-gray-600 mb-2 block">
              上传打款凭证（选填，最多3张）
            </Text>
            <View className="flex flex-wrap gap-2">
              {paymentImages.map((img, index) => (
                <View key={index} className="relative w-20 h-20">
                  <Image src={img} className="w-full h-full object-cover rounded" />
                  <View
                    className="absolute top-0 right-0 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs"
                    onClick={() => handleRemovePaymentImage(index)}
                  >
                    ×
                  </View>
                </View>
              ))}
              {paymentImages.length < 3 && (
                <View
                  className="w-20 h-20 border-2 border-dashed border-gray-300 rounded flex items-center justify-center"
                  onClick={handleUploadPaymentImage}
                >
                  <Text className="text-2xl text-gray-400">+</Text>
                </View>
              )}
            </View>
          </View>
        </View>
      </Dialog>
    </View>
  )
}

export default DealerWithdraw
