redirect to credit when success topup

src/app/credits/success/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams, useRouter } from 'next/navigation'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { CheckCircle, Loader2 } from 'lucide-react'
@@ -9,10 +9,12 @@ import Link from 'next/link'
 
 export default function CreditTopupSuccess() {
   const searchParams = useSearchParams()
+  const router = useRouter()
   const sessionId = searchParams.get('session_id')
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [amount, setAmount] = useState<number | null>(null)
+  const [countdown, setCountdown] = useState(3)
 
   useEffect(() => {
     if (sessionId) {
@@ -38,6 +40,24 @@ export default function CreditTopupSuccess() {
     }
   }, [sessionId])
 
+  // 倒计时和自动跳转
+  useEffect(() => {
+    if (!loading && !error && amount !== null) {
+      const timer = setInterval(() => {
+        setCountdown((prev) => {
+          if (prev <= 1) {
+            clearInterval(timer)
+            router.push('/credits')
+            return 0
+          }
+          return prev - 1
+        })
+      }, 1000)
+
+      return () => clearInterval(timer)
+    }
+  }, [loading, error, amount, router])
+
   if (loading) {
     return (
       <div className="container mx-auto py-8 px-4">
@@ -87,6 +107,13 @@ export default function CreditTopupSuccess() {
           <p className="text-center text-muted-foreground">
             Your credit top-up has been processed successfully. The credits have been added to your account.
           </p>
+          {countdown > 0 && (
+            <div className="text-center">
+              <p className="text-sm text-muted-foreground">
+                Redirecting to credits page in <span className="font-semibold text-blue-600">{countdown}</span> seconds...
+              </p>
+            </div>
+          )}
           <div className="flex flex-col gap-3">
             <Link href="/credits" className="block">
               <Button className="w-full">View Credits</Button>