import { View, Text, Input } from '@tarojs/components';
import { useState } from 'react';
import NavBar from '@/components/NavBar';

export default function RebateWithdrawPage() {
  const [amount, setAmount] = useState('');
  const [account, setAccount] = useState('');
  const [name, setName] = useState('');
  const [canWithdraw, setCanWithdraw] = useState(528.50);

  const handleWithdraw = () => {
    if (parseFloat(amount) > canWithdraw) {
      console.log('余额不足');
      return;
    }
    if (parseFloat(amount) < 100) {
      console.log('最低提现金额¥100');
      return;
    }
    console.log('申请提现', { amount, account, name });
  };

  return (
    <View className="bg-gray-100 flex flex-col" style={{ minHeight: '100vh' }}>
      <NavBar title="佣金提现" />

      <View className="flex-1 p-4">
        {/* 可提现金额 */}
        <View className="bg-white rounded-lg p-4 mb-4">
          <Text className="text-sm text-gray-500 mb-2 block">可提现金额(元)</Text>
          <View className="flex items-baseline">
            <Text className="text-3xl font-bold text-red-500">{canWithdraw.toFixed(2)}</Text>
          </View>
          <Text className="text-xs text-gray-400 mt-2 block">最低提现金额 ¥100.00</Text>
        </View>

        {/* 提现金额 */}
        <View className="bg-white rounded-lg p-4 mb-4">
          <Text className="text-base font-medium mb-3 block">提现金额</Text>
          <View className="flex items-center border-b border-gray-200 pb-3 mb-3">
            <Text className="text-2xl font-bold mr-2">¥</Text>
            <Input
              className="flex-1 text-2xl font-bold"
              type="digit"
              placeholder="请输入提现金额"
              value={amount}
              onInput={(e: any) => setAmount(e.detail.value)}
            />
          </View>
          <View className="flex justify-between text-sm">
            <Text className="text-gray-500">手续费：¥0.00</Text>
            <Text
              className="text-blue-500"
              onClick={() => setAmount(canWithdraw.toString())}
            >
              全部提现
            </Text>
          </View>
        </View>

        {/* 收款信息 */}
        <View className="bg-white rounded-lg p-4 mb-4">
          <Text className="text-base font-medium mb-3 block">收款信息</Text>

          <View className="mb-4">
            <Text className="text-sm text-gray-600 mb-2 block">收款人姓名</Text>
            <Input
              className="w-full p-3 bg-gray-100 rounded-lg text-sm"
              placeholder="请输入收款人姓名"
              value={name}
              onInput={(e: any) => setName(e.detail.value)}
            />
          </View>

          <View className="mb-4">
            <Text className="text-sm text-gray-600 mb-2 block">支付宝账号</Text>
            <Input
              className="w-full p-3 bg-gray-100 rounded-lg text-sm"
              placeholder="请输入支付宝账号"
              value={account}
              onInput={(e: any) => setAccount(e.detail.value)}
            />
          </View>
        </View>

        {/* 提现说明 */}
        <View className="bg-white rounded-lg p-4 mb-4">
          <Text className="text-base font-medium mb-3 block">提现说明</Text>
          <View className="text-sm text-gray-500 flex flex-col" style={{ gap: '8px' }}>
            <View className="flex">
              <Text className="text-red-500 mr-2">•</Text>
              <Text>提现申请将在1-3个工作日内审核</Text>
            </View>
            <View className="flex">
              <Text className="text-red-500 mr-2">•</Text>
              <Text>提现金额将打入您指定的支付宝账号</Text>
            </View>
            <View className="flex">
              <Text className="text-red-500 mr-2">•</Text>
              <Text>如有疑问，请联系客服</Text>
            </View>
          </View>
        </View>
      </View>

      <View className="p-4 bg-white border-t border-gray-200" style={{ paddingBottom: '20px' }}>
        <View
          className="bg-red-500 text-white rounded-full w-full h-12 flex items-center justify-center"
          onClick={handleWithdraw}
        >
          <Text className="text-white font-medium">申请提现</Text>
        </View>
      </View>
    </View>
  );
}