import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import MainLayout from '@/components/layouts/MainLayout';
import { CheckCircle, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';

export default function PaymentSuccess() {
    const router = useRouter();
    const [countdown, setCountdown] = useState(5);

    useEffect(() => {
        // 倒计时自动跳转
        if (countdown > 0) {
            const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
            return () => clearTimeout(timer);
        } else {
            router.push('/membership');
        }
    }, [countdown, router]);

    return (
        <MainLayout>
            <div className="min-h-[60vh] flex items-center justify-center px-4">
                <div className="max-w-md w-full text-center">
                    <div className="mb-6 flex justify-center">
                        <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center">
                            <CheckCircle className="w-12 h-12 text-green-600" />
                        </div>
                    </div>

                    <h1 className="text-3xl font-bold text-gray-900 mb-4">
                        支付成功！
                    </h1>

                    <p className="text-gray-600 mb-8">
                        恭喜您成功开通会员，现在可以享受所有会员特权了！
                    </p>

                    <div className="bg-gray-50 rounded-lg p-6 mb-8">
                        <div className="flex items-center justify-center gap-2 text-gray-500 text-sm">
                            <Loader2 className="w-4 h-4 animate-spin" />
                            <span>{countdown} 秒后自动跳转到会员中心...</span>
                        </div>
                    </div>

                    <div className="flex gap-4 justify-center">
                        <Button
                            variant="outline"
                            onClick={() => router.push('/')}
                        >
                            返回首页
                        </Button>
                        <Button
                            onClick={() => router.push('/membership')}
                        >
                            查看会员权益
                        </Button>
                    </div>
                </div>
            </div>
        </MainLayout>
    );
}