import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { Tabs, Button } from '@nutui/nutui-react-taro'

/**
 * 提现功能调试组件
 * 用于测试 Tabs 组件的点击和切换功能
 */
const WithdrawDebug: React.FC = () => {
  const [activeTab, setActiveTab] = useState<string | number>('0')
  const [clickCount, setClickCount] = useState(0)

  // Tab 切换处理函数
  const handleTabChange = (value: string | number) => {
    console.log('Tab切换:', { from: activeTab, to: value, type: typeof value })
    setActiveTab(value)
    setClickCount(prev => prev + 1)
  }

  // 手动切换测试
  const manualSwitch = (tab: string | number) => {
    console.log('手动切换到:', tab)
    setActiveTab(tab)
    setClickCount(prev => prev + 1)
  }

  return (
    <View className="bg-gray-50 min-h-screen p-4">
      <View className="bg-white rounded-lg p-4 mb-4">
        <Text className="text-lg font-bold mb-2">调试信息</Text>
        <Text className="block mb-1">当前Tab: {String(activeTab)}</Text>
        <Text className="block mb-1">切换次数: {clickCount}</Text>
        <Text className="block mb-1">Tab类型: {typeof activeTab}</Text>
      </View>

      <View className="bg-white rounded-lg p-4 mb-4">
        <Text className="text-lg font-bold mb-2">手动切换测试</Text>
        <View className="flex gap-2">
          <Button size="small" onClick={() => manualSwitch('0')}>
            切换到申请提现
          </Button>
          <Button size="small" onClick={() => manualSwitch('1')}>
            切换到提现记录
          </Button>
        </View>
      </View>

      <View className="bg-white rounded-lg">
        <Tabs value={activeTab} onChange={handleTabChange}>
          <Tabs.TabPane title="申请提现" value="0">
            <View className="p-4">
              <Text className="text-center text-gray-600">申请提现页面内容</Text>
              <Text className="text-center text-sm text-gray-400 mt-2">
                当前Tab值: {String(activeTab)}
              </Text>
            </View>
          </Tabs.TabPane>

          <Tabs.TabPane title="提现记录" value="1">
            <View className="p-4">
              <Text className="text-center text-gray-600">提现记录页面内容</Text>
              <Text className="text-center text-sm text-gray-400 mt-2">
                当前Tab值: {String(activeTab)}
              </Text>
            </View>
          </Tabs.TabPane>
        </Tabs>
      </View>

      <View className="bg-white rounded-lg p-4 mt-4">
        <Text className="text-lg font-bold mb-2">事件日志</Text>
        <Text className="text-sm text-gray-500">
          请查看控制台输出以获取详细的切换日志
        </Text>
      </View>
    </View>
  )
}

export default WithdrawDebug