xiaoxia-saas/apps/web/src/pages/subscription/UpgradeSubscription.tsx

/**
 * 升级/降级/续费页面
 * P1-3: antd Button/Modal/Radio/Spin → 自定义 UI 组件
 */
import React, { useState, useEffect } from "react"
import { message } from "antd"
import { Button, Modal } from "@/components/ui"
import { useNavigate } from "react-router-dom"
import {
  getCurrentSubscription,
  changePlan,
  toggleAutoRenew,
  cancelSubscription,
} from "@/api/subscription"
import type { SubscriptionInfo, PlanType, BillingCycle } from "@/api/subscription"
import PageHead from "@/components/layout/PageHead"
import "./UpgradeSubscription.css"

const PLANS_META: Record<string, { name: string; price: number; yearlyPrice: number }> = {
  free: { name: "体验版", price: 0, yearlyPrice: 0 },
  standard: { name: "标准版", price: 99, yearlyPrice: 990 },
  pro: { name: "专业版", price: 299, yearlyPrice: 2990 },
  enterprise: { name: "企业版", price: 0, yearlyPrice: 0 },
}

/** 自定义计费周期切换组件 */
const BillingCycleSwitch: React.FC<{
  value: BillingCycle
  onChange: (cycle: BillingCycle) => void
  monthlyPrice: number
  yearlyPrice: number
}> = ({ value, onChange, monthlyPrice, yearlyPrice }) => (
  <div className="xx-billing-cycle-switch">
    <button
      type="button"
      className={`xx-billing-cycle-btn ${value === "monthly" ? "active" : ""}`}
      onClick={() => onChange("monthly")}
    >
      ¥{monthlyPrice}/月
    </button>
    <button
      type="button"
      className={`xx-billing-cycle-btn ${value === "yearly" ? "active" : ""}`}
      onClick={() => onChange("yearly")}
    >
      ¥{yearlyPrice}/年
      {yearlyPrice > 0 && monthlyPrice > 0 && (
        <span className="xx-save">省 ¥{monthlyPrice * 12 - yearlyPrice}</span>
      )}
    </button>
  </div>
)

/** 自定义 Spinner 组件 */
const Spinner: React.FC<{ size?: "small" | "large" }> = ({ size = "large" }) => (
  <div className={`xx-spinner xx-spinner--${size}`}>
    <div className="xx-spinner-dot" />
    <div className="xx-spinner-dot" />
    <div className="xx-spinner-dot" />
  </div>
)

const UpgradeSubscription: React.FC = () => {
  const navigate = useNavigate()
  const [subscription, setSubscription] = useState<SubscriptionInfo | null>(null)
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [selectedPlan, setSelectedPlan] = useState<PlanType>("standard")
  const [billingCycle, setBillingCycle] = useState<BillingCycle>("monthly")

  useEffect(() => {
    loadSubscription()
  }, [])

  const loadSubscription = async () => {
    try {
      const data = await getCurrentSubscription()
      setSubscription(data)
      setSelectedPlan(data.plan_id)
    } catch (err: unknown) {
      if (!(err as { __msgShown?: boolean })?.__msgShown) message.error("获取订阅信息失败")
    } finally {
      setLoading(false)
    }
  }

  const handleUpgrade = async () => {
    if (!subscription) return
    if (selectedPlan === subscription.plan_id && billingCycle === subscription.billing_cycle) {
      message.info("当前已是该套餐")
      return
    }

    const plan = PLANS_META[selectedPlan]
    const price = billingCycle === "yearly" ? plan.yearlyPrice : plan.price

    Modal.confirm({
      title: "确认变更套餐",
      content: `即将变更为「${plan.name}」（${billingCycle === "monthly" ? "月付" : "年付"}），${price > 0 ? `费用 ¥${price}${billingCycle === "monthly" ? "/月" : "/年"}` : "免费"}。变更立即生效。`,
      okText: "确认变更",
      cancelText: "取消",
      onOk: async () => {
        try {
          setSubmitting(true)
          const res = await changePlan({
            target_plan_id: selectedPlan,
            billing_cycle: billingCycle,
          })
          if (res.success) {
            message.success(res.message)
            setSubscription(res.new_subscription ?? null)
          } else {
            message.error(res.message)
          }
        } catch (err: unknown) {
          if (!(err as { __msgShown?: boolean })?.__msgShown) message.error("套餐变更失败，请重试")
        } finally {
          setSubmitting(false)
        }
      },
    })
  }

  const handleToggleAutoRenew = async (enabled: boolean) => {
    try {
      const res = await toggleAutoRenew(enabled)
      message.success(res.message)
      if (subscription) {
        setSubscription({ ...subscription, auto_renew: enabled })
      }
    } catch (err: unknown) {
      if (!(err as { __msgShown?: boolean })?.__msgShown) message.error("操作失败")
    }
  }

  const handleCancel = () => {
    Modal.confirm({
      title: "确认取消订阅",
      content: "取消后，当前周期结束前仍可正常使用，到期后降级为体验版。",
      okText: "确认取消",
      cancelText: "再想想",
      onOk: async () => {
        try {
          const res = await cancelSubscription()
          message.success(res.message)
          navigate("/app/subscription")
        } catch (err: unknown) {
          if (!(err as { __msgShown?: boolean })?.__msgShown) message.error("取消失败")
        }
      },
    })
  }

  if (loading) {
    return (
      <div className="xx-upgrade-page">
        <Spinner size="large" />
      </div>
    )
  }

  const currentPlan = subscription?.plan_id ?? "free"

  return (
    <div className="xx-upgrade-page">
      <PageHead
        title="变更订阅方案"
        description={`当前套餐：${PLANS_META[currentPlan]?.name ?? "体验版"}`}
      />

      <div className="xx-upgrade-plans">
        {(["standard", "pro", "enterprise"] as PlanType[]).map((planId) => {
          const plan = PLANS_META[planId]
          const isCurrent = planId === currentPlan
          return (
            <div
              key={planId}
              className={`xx-upgrade-card ${isCurrent ? "current" : ""} ${selectedPlan === planId ? "selected" : ""}`}
              onClick={() => setSelectedPlan(planId)}
            >
              {isCurrent && <div className="xx-current-badge">当前</div>}
              <h3>{plan.name}</h3>
              <div className="xx-price">
                <BillingCycleSwitch
                  value={billingCycle}
                  onChange={setBillingCycle}
                  monthlyPrice={plan.price}
                  yearlyPrice={plan.yearlyPrice}
                />
              </div>
            </div>
          )
        })}
      </div>

      <div className="xx-upgrade-actions">
        <Button
          buttonType="primary"
          buttonSize="lg"
          disabled={submitting || selectedPlan === currentPlan}
          onClick={handleUpgrade}
        >
          {submitting ? "处理中..." : "确认变更"}
        </Button>

        {subscription && subscription.status === "active" && (
          <div className="xx-auto-renew-section">
            <span>自动续费：{subscription.auto_renew ? "已开启" : "已关闭"}</span>
            <Button
              buttonType="text"
              buttonSize="sm"
              onClick={() => handleToggleAutoRenew(!subscription.auto_renew)}
            >
              {subscription.auto_renew ? "关闭" : "开启"}
            </Button>
          </div>
        )}

        {subscription && subscription.status === "active" && currentPlan !== "free" && (
          <Button
            buttonType="danger"
            buttonSize="sm"
            onClick={handleCancel}
            className="xx-cancel-btn"
          >
            取消订阅
          </Button>
        )}
      </div>
    </div>
  )
}

export default UpgradeSubscription
export const Component = UpgradeSubscription