import { useSearchParams } from 'react-router-dom';
import Footer from '../components/Footer';
import { API_HOST } from '../config';

function PaymentSuccess() {
    const [searchParams] = useSearchParams();
    const sessionId = searchParams.get('session_id');

    return (
        <div className="relative min-h-screen bg-white">
            {/* Floating elements */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
            </div>

            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
                {/* Header section */}
                <div className="text-center mb-16">
                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
                        Payment Successful
                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
                    </h1>
                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
                        Thank you for subscribing to our service.
                    </p>
                </div>

                {/* Content */}
                <div className="max-w-md mx-auto">
                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-8">
                        <div className="flex items-center justify-center">
                            <div className="w-16 h-16 relative">
                                <div className="w-full h-full border-4 border-brand-purple rounded-full"></div>
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <span className="text-3xl text-brand-purple">✓</span>
                                </div>
                            </div>
                        </div>

                        <div className="text-center">
                            <p className="text-gray-600">
                                Your subscription is now active. You can start using our services right away.
                            </p>
                        </div>

                        <div className="h-px bg-gray-100"></div>

                        <form action={`${API_HOST}/api/v1/onboard/create-portal-session`} method="POST">
                            <input type="hidden" id="session-id" name="session_id" value={sessionId} />
                            <button
                                type="submit"
                                className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
                            >
                                <span className="flex items-center gap-2">
                                    Manage billing information
                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                                </span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default PaymentSuccess;
