soul/components/modules/referral/withdrawal-modal.tsx

"use client"

import { useState, useEffect } from "react"
import { X, Wallet, CheckCircle, AlertCircle, Phone, MessageCircle, CreditCard } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useStore } from "@/lib/store"

interface WithdrawalModalProps {
  isOpen: boolean
  onClose: () => void
  availableAmount: number
}

export function WithdrawalModal({ isOpen, onClose, availableAmount }: WithdrawalModalProps) {
  const { requestWithdrawal, user } = useStore()
  const [amount, setAmount] = useState<string>("")
  const [method, setMethod] = useState<"wechat" | "alipay">("wechat")
  const [account, setAccount] = useState("")
  const [name, setName] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSuccess, setIsSuccess] = useState(false)

  // 检查是否已绑定支付方式
  const hasBindWechat = !!user?.wechat
  const hasBindAlipay = !!user?.alipay
  const hasAnyPaymentMethod = hasBindWechat || hasBindAlipay
  
  // 自动填充已绑定的账号
  useEffect(() => {
    if (method === "wechat" && user?.wechat) {
      setAccount(user.wechat)
    } else if (method === "alipay" && user?.alipay) {
      setAccount(user.alipay)
    }
  }, [method, user])

  if (!isOpen) return null

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    const amountNum = parseFloat(amount)
    if (isNaN(amountNum) || amountNum <= 0 || amountNum > availableAmount) {
      alert("请输入有效的提现金额")
      return
    }

    if (!account || !name) {
      alert("请填写完整的提现信息")
      return
    }

    setIsSubmitting(true)
    
    // Simulate API delay
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    requestWithdrawal(amountNum, method, account, name)
    
    setIsSubmitting(false)
    setIsSuccess(true)
  }

  const handleClose = () => {
    setIsSuccess(false)
    setAmount("")
    setAccount("")
    setName("")
    onClose()
  }

  // 未绑定支付方式的提示
  if (!hasAnyPaymentMethod) {
    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
        <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={handleClose} />
        
        <div className="relative w-full max-w-sm bg-[#1c1c1e] rounded-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
          <button 
            onClick={handleClose}
            className="absolute top-3 right-3 p-1.5 bg-white/10 rounded-full text-white/60 hover:bg-white/20 z-10"
          >
            <X className="w-5 h-5" />
          </button>

          <div className="p-6 text-center">
            <div className="w-16 h-16 bg-orange-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
              <AlertCircle className="w-8 h-8 text-orange-400" />
            </div>
            <h3 className="text-xl font-bold text-white mb-2">请先绑定支付方式</h3>
            <p className="text-white/60 text-sm mb-6">
              提现前需要在"我的"页面绑定至少一种支付方式（微信或支付宝）
            </p>
            
            <div className="grid grid-cols-2 gap-3 mb-6">
              <div className="p-4 rounded-xl bg-white/5 border border-white/10">
                <MessageCircle className="w-6 h-6 text-[#07C160] mx-auto mb-2" />
                <p className="text-white/60 text-xs">绑定微信</p>
              </div>
              <div className="p-4 rounded-xl bg-white/5 border border-white/10">
                <CreditCard className="w-6 h-6 text-[#1677FF] mx-auto mb-2" />
                <p className="text-white/60 text-xs">绑定支付宝</p>
              </div>
            </div>
            
            <Button 
              onClick={handleClose}
              className="w-full bg-[#00CED1] hover:bg-[#00CED1]/90 text-black font-medium"
            >
              去绑定
            </Button>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={handleClose} />
      
      <div className="relative w-full max-w-sm bg-[#1c1c1e] rounded-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
        <button 
          onClick={handleClose}
          className="absolute top-3 right-3 p-1.5 bg-white/10 rounded-full text-white/60 hover:bg-white/20 z-10"
        >
          <X className="w-5 h-5" />
        </button>

        {isSuccess ? (
          <div className="p-8 flex flex-col items-center text-center">
            <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mb-4">
              <CheckCircle className="w-8 h-8 text-green-400" />
            </div>
            <h3 className="text-xl font-bold text-white mb-2">申请提交成功</h3>
            <p className="text-sm text-white/60 mb-6">
              您的提现申请已提交，预计1-3个工作日内到账。
            </p>
            <Button onClick={handleClose} className="w-full bg-green-500 hover:bg-green-600 text-white">
              完成
            </Button>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="p-6">
            <div className="flex items-center gap-2 mb-6">
              <Wallet className="w-5 h-5 text-[#FFD700]" />
              <h3 className="text-lg font-bold text-white">申请提现</h3>
            </div>

            <div className="space-y-4 mb-6">
              <div className="space-y-2">
                <Label htmlFor="amount" className="text-white/80">
                  提现金额 <span className="text-[#00CED1]">(可提现: ¥{availableAmount.toFixed(2)})</span>
                </Label>
                <div className="relative">
                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-white/50">¥</span>
                  <Input
                    id="amount"
                    type="number"
                    min="10"
                    max={availableAmount}
                    step="0.01"
                    value={amount}
                    onChange={(e) => setAmount(e.target.value)}
                    className="pl-7 bg-white/5 border-white/10 text-white placeholder:text-white/30"
                    placeholder="最低10元"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label className="text-white/80">提现方式</Label>
                <div className="flex gap-3">
                  {hasBindWechat && (
                    <button
                      type="button"
                      onClick={() => setMethod("wechat")}
                      className={`flex-1 py-3 px-4 rounded-xl border text-sm font-medium transition-colors flex items-center justify-center gap-2 ${
                        method === "wechat"
                          ? "border-[#07C160] bg-[#07C160]/10 text-[#07C160]"
                          : "border-white/10 bg-white/5 text-white/60"
                      }`}
                    >
                      <MessageCircle className="w-4 h-4" />
                      微信
                    </button>
                  )}
                  {hasBindAlipay && (
                    <button
                      type="button"
                      onClick={() => setMethod("alipay")}
                      className={`flex-1 py-3 px-4 rounded-xl border text-sm font-medium transition-colors flex items-center justify-center gap-2 ${
                        method === "alipay"
                          ? "border-[#1677FF] bg-[#1677FF]/10 text-[#1677FF]"
                          : "border-white/10 bg-white/5 text-white/60"
                      }`}
                    >
                      <CreditCard className="w-4 h-4" />
                      支付宝
                    </button>
                  )}
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="account" className="text-white/80">
                  {method === "wechat" ? "微信号" : "支付宝账号"}
                </Label>
                <Input
                  id="account"
                  value={account}
                  onChange={(e) => setAccount(e.target.value)}
                  placeholder={method === "wechat" ? "请输入微信号" : "请输入支付宝账号"}
                  className="bg-white/5 border-white/10 text-white placeholder:text-white/30"
                />
                {((method === "wechat" && user?.wechat) || (method === "alipay" && user?.alipay)) && (
                  <p className="text-xs text-[#00CED1]">已自动填充您绑定的账号</p>
                )}
              </div>

              <div className="space-y-2">
                <Label htmlFor="name" className="text-white/80">真实姓名</Label>
                <Input
                  id="name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="请输入收款人真实姓名"
                  className="bg-white/5 border-white/10 text-white placeholder:text-white/30"
                />
              </div>
            </div>

            <Button 
              type="submit" 
              className="w-full bg-[#FFD700] hover:bg-[#FFD700]/90 text-black font-bold"
              disabled={isSubmitting || !amount || !account || !name}
            >
              {isSubmitting ? "提交中..." : "确认提现"}
            </Button>
          </form>
        )}
      </div>
    </div>
  )
}