import { useEffect, useState } from "react"
import { toast } from "sonner"
import { submitCashOut } from "@/api/cashOut"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

const ALIPAY_ACCOUNT_RE =
  /^(?:1[3-9]\d{9}|[a-zA-Z\d._-]*@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/


const CUSTOMER_SERVICE_URL =
  "https://admin.qidian.qq.com/template/blue/mp/menu/qr-code-jump.html?linkType=0&env=ol&kfuin=2852138148&fid=299&key=f377ec024ca45115a03a7632c7bda230&cate=1&source=&isLBS=&isCustomEntry=&type=16&ftype=1&_type=wpa&qidian=true"

interface CashOutDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  balance: number
  onSubmitted?: () => void
}

export function CashOutDialog({
  open,
  onOpenChange,
  balance,
  onSubmitted,
}: CashOutDialogProps) {
  const [step, setStep] = useState<"notice" | "form">("notice")
  const [money, setMoney] = useState("")
  const [reason, setReason] = useState("")
  const [alipayAccount, setAlipayAccount] = useState("")
  const [realName, setRealName] = useState("")
  const [submitting, setSubmitting] = useState(false)

  useEffect(() => {
    if (!open) {
      setSubmitting(false)
      // setStep("notice")
    }
  }, [open])

  const handleSubmit = async () => {
    const cashOutMoney = Number(money)
    if (!Number.isFinite(cashOutMoney) || cashOutMoney <= 0) {
      toast.error("抱歉！请重新输入提现金额！")
      return
    }
    if (cashOutMoney > balance) {
      toast.error("抱歉！您提现的额度大于余额，请重新输入提现金额！")
      return
    }
    if (!realName.trim()) {
      toast.error("抱歉！请重新输入姓名！")
      return
    }
    if (
      !alipayAccount.trim() ||
      !ALIPAY_ACCOUNT_RE.test(alipayAccount.trim())
    ) {
      toast.error("抱歉！请重新输入支付宝账号！")
      return
    }

    setSubmitting(true)
    const res = await submitCashOut({
      cash_out_money: money,
      reason: reason.trim(),
      alipay_account: alipayAccount.trim(),
      real_name: realName.trim(),
    })
    setSubmitting(false)

    if (!res.success) {
      toast.error(res.message || "提现异常！请重试或联系客服。")
      return
    }
    if (!res.data) {
      toast.error("提现异常！请重试或联系客服。")
      return
    }
    toast.success(
      "提现请求发送成功，我们会在5到7个工作日进行处理，请注意查看资金明细。",
    )
    setMoney("")
    setReason("")
    setAlipayAccount("")
    setRealName("")
    onOpenChange(false)
    onSubmitted?.()
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[85dvh] overflow-y-auto sm:max-w-sm p-6">
        {step === "notice" ? (
          <>
            <DialogHeader>
              <DialogTitle className="text-xl font-semibold text-center">
                余额提现
              </DialogTitle>
            </DialogHeader>

            <div className="mt-3 space-y-2 text-sm text-gray-600">
              <p>聚IP涵盖十余种全网知名旗舰产品，总有一款适合您！</p>
              <p>联系客服帮您推荐合适的产品，我们将最大努力满足您的需求！</p>
            </div>

            <div className="mt-4 flex gap-3">
              <Button
                type="button"
                className="flex-1 bg-blue-600 hover:bg-blue-700 text-white"
                onClick={() =>
                  window.open(
                    CUSTOMER_SERVICE_URL,
                    "_blank",
                    "noopener,noreferrer",
                  )
                }
              >
                联系客服
              </Button>
              <Button
                type="button"
                variant="outline"
                className="flex-1"
                onClick={() => setStep("form")}
              >
                我不需要
              </Button>
            </div>
          </>
        ) : (
          <>
            <DialogHeader>
              <DialogTitle className="text-xl font-semibold text-center">
                余额提现
              </DialogTitle>
            </DialogHeader>

            <div className="space-y-4 mt-2">
              <p className="text-xs text-muted-foreground">
                当前可用余额：
                <span className="font-bold text-orange-500">
                  ¥{balance.toFixed(2)}
                </span>
              </p>

              <div className="space-y-1.5">
                <Label className="text-sm text-gray-600">提现金额</Label>
                <Input
                  type="number"
                  min={0}
                  value={money}
                  onChange={e => setMoney(e.target.value)}
                  className="h-11 bg-gray-50 border-gray-200"
                  placeholder="请输入提现金额"
                />
              </div>

              <div className="space-y-1.5">
                <Label className="text-sm text-gray-600">提现理由</Label>
                <Input
                  value={reason}
                  onChange={e => setReason(e.target.value)}
                  className="h-11 bg-gray-50 border-gray-200"
                  placeholder="请输入提现理由"
                />
              </div>

              <div className="space-y-1.5">
                <Label className="text-sm text-gray-600">
                  提现支付宝账号（目前仅支持支付宝）
                </Label>
                <Input
                  value={alipayAccount}
                  onChange={e => setAlipayAccount(e.target.value)}
                  className="h-11 bg-gray-50 border-gray-200"
                  placeholder="请输入支付宝账号"
                />
              </div>

              <div className="space-y-1.5">
                <Label className="text-sm text-gray-600">支付宝真实姓名</Label>
                <Input
                  value={realName}
                  onChange={e => setRealName(e.target.value)}
                  className="h-11 bg-gray-50 border-gray-200"
                  placeholder="请输入与支付宝关联的真实姓名"
                />
              </div>

              <Button
                type="button"
                disabled={submitting}
                onClick={() => void handleSubmit()}
                className="w-full h-11 mt-2 bg-blue-600 hover:bg-blue-700 text-white font-medium"
              >
                {submitting ? "提交中..." : "确认提现"}
              </Button>
            </div>
          </>
        )}
      </DialogContent>
    </Dialog>
  )
}